Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Core Concepts

In this lesson, I’ll teach you some core concepts for NativeScript app development. You’ll learn about how to code application logic, the MVVM Design Pattern, using Observables, and how to add support for gestures.

Related Links

2.6 Core Concepts

So far, we have managed to create the UI of the login view. But in this video, we are going to talk about the logic behind the scene, code organization, and MVVM design pattern which is a very important topic in a nativist group project. First of all, let's begin by creating the first piece of logic in login the JS. To do so, first we create an attribute for page component in the VU called loaded. And the value is loaded as well. The value of this attribute can be anything that you like. Next we go to login.js and create the function with the same name as the value and export it. This function is only logging the message to console. This syntax is very simple. And now, I save the document. Okay, as you can see the console message is outputted to the terminal. The exports keyword in node.js is based on common.js pattern for module exporting, and is using NativeScript applications as well. Now, let's talk about events in NativeScript. Let's say if you click on a sign in button, something should happen. In NativeScript, we use gesture events like tap, double tap, swipe, long press, rotation or so. Unlike html dom event like OnClick, the most common event for a button in native script is a and tap gesture event. And now go to login.xml and add a tap attribute to the bottom component. Tap=signIn. And now back to login.js. We are going to define the logic. Like before, we have to define the function with exports at the beginning. Now, let's try it. Very nice. As you can see, the alert pop up works correctly but the alerts button is one which can be fixed later. Now, let's fetch the input value of text fields that we have created and then store them in the local variable. First we create three variables called page, Username and password. Next, we need to update the loaded function to get a reference to the login view. Simply add args keyword as a parameter to the function. And in the body of the function, add page = args.object. We can remove the console message, as well. Now, we can edit the sign-in function to get the value of each of those fields. Add username = page.getViewbyd[*username*] .text. Password = page.getViewById("password").text. And we can customize the alert pop-up with the value of this page. But before we save this file, I have to say that it won't work, because we haven't added an id attribute to our text fields. So go back log in view and add id attribute for each of those fields. Okay, now save all files and let's give it a shot. Very nice. But this is not everything that NativeScript can offer. Actually, NativeScript is using a design pattern called MVVM which helps you organize your code far better than what we have seen. The main purpose of an MVVM pattern is separation of VU layer from business logic and data layer. In the middle, there is a view model layer which provides a two way data binding feature found in frameworks like AngularJS. This simply means that if the user updates a data in the UI, the change will be automatically reflected in the view model and vice versa. Now, let's create a view model for login screen to enable two way data binding for the values of username and password fields. First we update the view layer. Go to login.xmo and update the value of text attribute with double curly brackets, and in the middle the name of the property. Now back in login.js, let's modify the code. First, we should import the observable module. Go to the first line of the page and paste this code. Next we should create an observable object called user. And we pass the property names that we have created in VU layer here, var user = new observable username, And password. And now save it. Finally, we should pass this observable object to the binding context of the page. In the body of the loaded function, paste, paste.bindingContext equals user. This is what makes those brackets, that we have created earlier, work, and save. As you can see the values of the text fields are updated. How cool is that? Now, let's add another value for username. Perfect, in next video we are going to organize our code and learn about NativeScript modules like HTTP to connect to a packet.

Back to the top