Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.8 Navigation

In this lesson, we’ll build a screen to display a GitHub user’s meta information. From there, we’ll add links and buttons to navigate between screens. Finally, we’ll learn about how to use the Dialogs module.

Related Links

2.8 Navigation

Welcome back. In this video, we learn about action bars, navigation between views and dialogs. First, let's build the layout of the second view. Under profile directory, add profile.xml. Now we create a page tag, and it has one attribute called loaded. And the value is loaded as well. Next, we build the action bar. And the action bar is the space on top of your apps which holds some buttons or text messages or graphics. What you want is a title of the page, as well as a button for signing out of the application. First we create a page.actionBar tag, and close it immediately. And then, we add an ActionBar tag. It has an attribute called title. And the value is Profile. To add items to our ActionBar, we use ActionBar.actionItems. And again, we close it immediately. And finally, there is only one item in your ActionBar, and it is a logout button. So we write ActionItem, and it is a self-closing tag. Add text, and there is an attribute for iOS only and it is ios.position=right. And the event is tap=onlogout, okay. We are done with the action bar. What if you need to learn more about action bar? And if you are interested to add an icon instead of a text button, I suggest you refer to the link below. By the way, I have to say, we don't need to wrap action bar in the layout container. Next, we are going to build the body of the view. We will start with a StackLayout and close it immediately. I copy and paste these elements here. The first one is an image, followed by two labels and a button and a double curly brackets, means it is a two way data bindings that we are going to implement shortly. Okay, as you can see, I have added id attribute for each element so we can style it as well. And the last element is a button which takes us to the last screen, and it has an event called onRepos. Now back to app.css. Let's style them. First, we put a comment that indicate where these codes belongs. And then we start with profile-avatar-css rule. The first CSS property is margin-left: 20 and margin-right: 20. And then margin-bottom: 20, and I do the same for the other two elements. Okay, now we're done with the static. Now let's quickly build the logic. Back to profile folder, we add a profile.js and a profile-view-model.js file. Now open profile.js and first, we create a variable called ProfileVm and import profile-view-model into it. Next, we create a local variable called profile and instantiate the ProfileVm. Now we create the loaded function, which is the starting point of this logic file. It is exports.loaded=function and we pass args as parameters to it. And in its body we create the page variable, which is equals to args.object and page.bindingcontext = profile. Next, we create the logout method for action button. Exports.onLogout = function, and we put a comment here to update it later. And last is the event on the button click. export.onRepos = function, and again, we will put a comment here to update these methods shortly. Okay, so far so good. Now we need to tackle the view model. Back in profile-view-model file, we first import the Observable module. Then, we need to import the ConfigModule. Next, we create a variable called userData, which is a getter method, and retrieve the information that we have stored in memory from previous script. And now, we create a function called profile. Inside it, we create a variable called viewModel, which is a new observable. And it has three properties, the first one is avatar. As we have seen it in the view and is equal to userData.avatar_url, or an empty string. And the reason behind this is we don't want to pass an undefined value. Next is the fullname. Next is login. The reason we have chosen these names for our properties is simply to view to GitHub's user API, where they use these names. So avatar_url refers to the profile image, fullname refers to the name and login is the user name. We need to return the viewModel, and at the end, we need to export the module. Now that we have created this second screen, we need to access it once the users is signed in successfully. So for navigation in NativeScript, we use FrameModule, and since we want to navigate to this page, we have to update login screen first. Let's import the FrameModule first. And then, add FrameModule.topmost.navigate. In this context, topmost simply means the screen and via its navigate method, we switch to another screen. It takes an object, the first property is moduleName, and the value is the address of the profile screen. We use /profile/profile. And the second property is clearHistory = true. It disables the back button for login screen. So your users can't go back to login screen once they are on other screens. Very good. We need to implement the navigation for reports button as well. So let's do it quickly. We can copy and paste the code from login screen. First we bring the module, and then we can grab this piece of code, and change the module name value to view/repos/repos. This page is not there, but in next video we're going to implement that. Remember to remove the clearHistory property of it. And finally, by now we have covered action bar and navigation within pages, but as we can see, the logout button is not implemented yet. So we want to be able to have a dialog pop up once user clicks on it. To be able to use a dialog, we need to import the dialog module. There are multiple dialog types in NativeScript's documentation. But you're going to use the confirm dialog, dialog.confirm, and it takes an object. The first property is title: "Exit". And message is, "Are you sure you want to exit?". okButtonText: "OK" and cancelButtonText: "Cancel". Confirm method returns a promise and .then(function and we pass result as a parameter to it. And next we create a console.log, ("Dialog results: " + results); and now we need to check if result is true. So if(result). So we want to take the user back to login script. We copy and paste the navigation code that we have created previously, and update the module property value to, views/login/login, and add the clear history to it again while we are logging out of the app. Okay, now we are done with the second page. In the next video, we will create the last screen of the app and we learn about arrays.

Back to the top