Create Your First NativeScript App_part 2

5. JavaScript Code

Now we're ready to look at the JavaScript that makes it all work. In this section, we'll code the notes-page.js file.

Initialization

First we import the data/observable and data/observable-array modules. These are built-in modules in NativeScript that allow us to create observable objects and arrays. Observables allow us to automatically update the UI whenever these objects and arrays get updated.

In our app, pageArray is used for storing the array of notes, and pageData is used for tying it to the page. pageData also serves as the general container for all data that we want to show in the UI.

1. var Observable = require("data/observable");
2. var ObservableArray = require("data/observable-array");
3. var pageArray = new ObservableArray.ObservableArray();
4. var pageData = new Observable.Observable({
5.     notes: pageArray
6. });

Next, import all the other modules that we'll be using in this page:

• camera: for working with the device camera.
• view : for referring to specific elements in the page. Think of it as the equivalent of document.getElementById in NativeScript.
• ui/enums: a global dictionary of constant values for anything related to UIs.
• ui/animation: for animating elements.
• application-settings: for persisting local data.
• file-system: for working with the filesystem.

1. var cameraModule = require("camera");
2. var view = require("ui/core/view"); 
3. var uiEnums = require("ui/enums");
4. var animation = require("ui/animation");
5. var appSettings = require("application-settings");
6. var fs = require("file-system");

Next, initialize the values for the variables that will be used throughout the whole file. page is used for storing a reference to the current page, notesArr is the plain array copy of the current notes in the page, and current_index is the initial value of the index that is used as the unique ID for each note.

1. var page; 
2. var notesArr = []; 
3. var current_index = -1;

The pageLoaded()Function
Functions become available in the context of the page by means of using exports. Earlier in the notes-page.xml file, you saw that the pageLoaded() function is executed when the page is loaded.

1. exports.pageLoaded = function(args) {
2.     ...
3. }

Inside the pageLoaded() function, we'll start by getting the reference to the page. Then we show the form for creating a new note, and get the currently stored values of the new note title and the notes from the application settings.

1. page = args.object;
2. pageData.set('showForm', true);
3. var new_note_title = appSettings.getString('new_note_title');
4. var notes = appSettings.getString('notes');

Next, still within the pageLoaded() function, check if there are notes that are stored locally. If not, we create an array of notes. This array will serve as the default content for new users of the app. However, if there are already some notes stored locally, we convert them to an array and then push that data to the observable array.

Note that before we push the items into the observable array, we first check if it's empty. We have to do this because using the camera module executes the loaded event on the page once again after an image is selected. This means that if we're not careful, we'll end up pushing duplicates into the array every time the user uses the camera.

1. if(!notes){    
2.   notes = [
3.     {
4.       index: 0,
5.       title: '100 push ups'
6.     },
7.     {
8.       index: 1,
9.       title: '100 sit ups'
10.     },
11.     {
12.       index: 2,
13.       title: '100 squats'
14.     },
15.     {
16.       index: 3,
17.       title: '10km running'
18.     }
19.   ];
20.  
21. }else{
22.   notes = JSON.parse(notes);
23. }
24.  
25. notesArr = notes;
26. if(!pageArray.length){
27.   for(var x = 0; x < notes.length; x++){
28.     current_index += 1;
29.     pageArray.push(notes[x]);
30.   }
31. }

Now that we have the notes data set up, we can update the page title by setting its item_title attribute to the value that we got from the application settings earlier. Then bind pageData to the page so that the UI automatically gets updated whenever a change is made to the items that we've set. 

1. pageData.set('item_title', new_note_title);
2. args.object.bindingContext = pageData;

Animate the form for creating new notes. We do this by using the getViewById function in the view and passing in the context (the current page) as the first argument and the id attribute assigned to the element that you want to manipulate.

Next, call the animate function. This accepts an object containing the animation settings. Here we want the form to slide down 160 pixels from its original position over a period of 800 milliseconds.

1. view.getViewById(page, 'form').animate({
2.     translate: { x: 0, y: 160 },    
3.     duration: 800,
4. });

The newNote() Function
The newNote() function is executed when the user taps on the New Item action item on the header. This hides and shows the new item ListView and slides the form up or down depending on the current value of showForm.

If showForm is true, which means it's currently being shown, we change the opacity of the ListView to 1 over the course of 400 milliseconds, and then slide the form up to hide it. Otherwise, we hide the ListView and slide the form down.

1. exports.newNote = function() {
2.   var showForm = pageData.get('showForm');
3.   var top_position = (showForm) ? -160 : 160; 
4.   var list_visibility = (showForm) ? 1 : 0; 
5.   view.getViewById(page, 'list').animate({
6.     opacity: list_visibility,
7.     duration: 400 
8.   }); 
9.   view.getViewById(page, 'form').animate({
10.       translate: { x: 0, y: top_position },    
11.       duration: 800,
12.   }); 
13.   pageData.set('showForm', !showForm);
14. }

The btnLoaded() Function
In the notes-page.xml file, we have a loaded attribute in the button for deleting a note. This is the function that gets executed when that event happens.

By default, the function assigned to the itemTap attribute in the ListView won't get executed when a button is defined inside a ListView item. This is because NativeScript assumes that the actions to be performed for each list item can be triggered only from those buttons.

The code below is a workaround for that default behavior. This basically removes the focus on the delete button so that you can still execute a function when a user taps on a ListView item. In this case, we don't really need this code since we haven't assigned any functionality to item taps, but it is a good tool to have when working with lists.

1. exports.btnLoaded = function (args) {
2.   var btn = args.object;
3.   btn.android.setFocusable(false);
4. }

The openCamera()Function
Next is the openCamera() function, which gets executed when the user taps on the Attach Image button. The current state is not maintained when using the camera module, so we need to save the title of the new note into the application settings first.

Afterwards we can launch the default camera app in the device by calling the takePicture() method. This method accepts an object containing the picture settings. Once the user has taken a picture and tapped on the Save button in Android or the use image button on iOS, the promise resolves and the callback function passed to then() gets executed.

The actual image is passed as an argument to the function, and we use this to save the file to the documents path. Once that's done, we save the full file path to the app settings and the current app state so that we can get the value later, before saving the note.

1. exports.openCamera = function() {
2.   appSettings.setString('new_note_title', pageData.get('item_title'));
3.   cameraModule.takePicture({width: 300, height: 300, keepAspectRatio: true}).then(function(img) {  
4.     var filepath = fs.path.join(fs.knownFolders.documents().path, "img_" + (new Date().getTime() / 1000) + ".jpg");
5.     img.saveToFile(filepath, uiEnums.ImageFormat.jpeg);     
6.     appSettings.setString('new_note_photo', filepath);
7.     pageData.set('attachment_img', filepath);
8.  
9.   });
10. }

Written by Wernher-Bel Ancheta

If you found this post interesting, follow and support us.

Suggest for you:

Build Apps with React Native

The Complete Android Developer Course - Build 14 Apps

Ionic by Example: Create Mobile Apps in HTML5

The Complete Android & Java Course - Build 21 Android Apps

iOS 10 Message Extension App Reskinning without Coding

Create Your First NativeScript App_part 1

In the last article, I introduced you to NativeScript. There you learned the basics of NativeScript and how it differs from other mobile development frameworks. This time you'll be getting your hands dirty by creating your first NativeScript app. I'll walk you through the whole process of building an app with NativeScript, from setting up your development environment to running the app on your device. Here's an outline of what I'll discuss:

1. Setting up NativeScript
2. Building the app
3. Running the app
4. Debugging the app

We'll be specifically running the app on the Android platform. But you can still follow along if you want to deploy to iOS as the code will be pretty much the same. The only differences are in the process for setting up NativeScript and the commands that you execute when running the app.

The completed source code for this app is available from the tutorial GitHub repo.

1. Setting Up NativeScript

To set up NativeScript, you first have to install Node.js. Once Node.js is installed, you can install the NativeScript command-line tool by executing npm install -g nativescript on your terminal.

The final step is to install the development tool for each platform that you want to deploy to. For Android, this is the Android SDK. For iOS, it's XCode. You can follow the installation guide on the NativeScript website for more detailed instructions on how to set up the necessary software for your development environment.

Once you've set up your environment, execute tns doctor to make sure that your environment is ready for NativeScript development. If you're on Linux or Windows, you'll see something like this if your environment is ready:

1. NOTE: You can develop for iOS only on Mac OS X systems.
2. To be able to work with iOS devices and projects, you need Mac OS X Mavericks or later.
3. Your components are up-to-date.
4. No issues were detected.

There's a note in there that you can only develop for iOS only on Mac OS X systems. This means that if you're on a PC, you'll only be able to deploy to Android devices. However, if you're on Mac, you'll be able to deploy on both iOS and Android platforms.

If you run into any problems during the setup, you can get an invitation to join the NativeScript Slack Community and once you have joined, go to the getting started channel and ask your questions in there.

2. Creating the App

The app that we're going to build is a note-taking app. It will allow the user to create notes, each with an optional image attachment that will be captured with the device camera. The notes are persisted using NativeScript application settings, and can be individually deleted.

Here's what the app is going to look like:

Start by executing the following command to create a new NativeScript project:

1. tns create noter --appid "com.yourname.noter"

noter is the name of the project, and com.yourname.noter is the unique app ID. This will be used later on to identify your app once you submit it to the Play or App Store. By default, the tns create command will create the following folders and files for you:

• app
• node_modules
• platforms
• package.json

You'll typically only have to touch the files inside the app directory. But there are also instances where you might need to edit files inside the platforms/android directory. One such case is when a plugin that you're trying to use doesn't automatically link the dependencies and assets that it needs.

Next, navigate to the app directory and delete all files except the App_Resources folder. Then create the following files:

• app.js
• app.css
• notes-page.js
• notes-page.xml

These are the files that will be used by the NativeScript runtime. Just like when building web pages, .css files are used for styling, and .js files for functionality. But for the markup of the app, we use XML instead of HTML. Usually you would create a separate folder for each screen of the app (e.g. login, sign up, or dashboard) and have XML, CSS, and JavaScript files inside each folder. But since this app has only one screen, we created all the files inside the root directory.

If you need more information about the NativeScript directory structure, check out Chapter 2 of the NativeScript Getting Started Guide.

3. The Entry Point File

Open the app.js file and add the following code:

1. var application = require("application");
2. application.start({ moduleName: "notes-page" });

This is the entry point for a NativeScript application. It uses the application module and its start method to specify the module used for the initial page of the app. In this case, we've specified notes-page, which means that the module is notes-page.js, the markup is notes-page.xml, and the styling for the page is notes-page.css. This is a convention used in NativeScript, that all files for a specific page have to have the same name.

4. Adding the UI Markup

Open the notes-page.xml file and add the following code:

1. <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
2.     <Page.actionBar>
3.         <ActionBar title="{{ app_title }}">
4.             <ActionBar.actionItems>
5.                 <ActionItem tap="newNote" ios.position="right" android.position="actionBar">
6.                     <ActionItem.actionView>
7.                         <StackLayout orientation="horizontal">
8.                             <Label text="New Item" color="#fff" cssClass="header-item" />
9.                         </StackLayout>
10.                     </ActionItem.actionView>
11.                 </ActionItem>
12.             </ActionBar.actionItems>
13.         </ActionBar>
14.     </Page.actionBar>
15.  
16.     <StackLayout>
17.         <StackLayout id="form" cssClass="form-container">
18.             <TextView text="{{ item_title }}" hint="Title" />
19.             <Button text="Attach Image" cssClass="link label" tap="openCamera" />
20.             <Image src="{{ attachment_img }}" id="attachment_img" cssClass="image" visibility="{{ attachment_img ? 'visible' : 'collapsed' }}" />
21.             <Button text="Save Note" tap="saveNote" cssClass="primary-button" />
22.         </StackLayout>
23.            
24.         <ListView items="{{ notes }}" id="list" visibility="{{ showForm ? 'collapsed' : 'visible' }}">
25.             <ListView.itemTemplate>
26.                 <GridLayout columns="*,*" rows="auto,auto" cssClass="item">
27.                     <Label text="{{ title }}" textWrap="true" row="0" col="0" />
28.                     <Image src="{{ photo }}" horizontalAlignment="center" verticalAlignment="center" cssClass="image" row="1" col="0" visibility="{{ photo ? 'visible' : 'collapsed' }}" />
29.                     <Button text="delete" index="{{ index }}" cssClass="delete-button" tap="deleteNote" row="0" col="1" horizontalAlignment="right" loaded="btnLoaded" />
30.                 </GridLayout>
31.             </ListView.itemTemplate>
32.         </ListView>
33.     </StackLayout>
34. </Page>

When creating app pages in NativeScript, you should always start with the <Page> tag. This is how NativeScript knows you're trying to create a new page. The xmlns attribute specifies the URL to the schema used for the XML file.

If you visit the schema URL specified, you can see the definition of all the XML tags that you can use within NativeScript. The loaded attribute specifies the function to be executed once the page is loaded. We'll take a look at this function definition later on in the notes-page.js file.

1. <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
2.  ...
3. </Page>

By default, the app header only contains the title of the app. If you wanted to add other UI components, you'd need to redefine it by using <Page.actionBar>. Then inside you define the things that you want to see in the header. The title is specified by using <ActionBar> and setting its title  attribute to the page title that you want.

Below we've used the mustache syntax to output the value of app_title defined in the notes-page.js file. This is how you output values that are bound to the page.

1. <Page.actionBar>
2.     <ActionBar title="{{ app_title }}">
3.         ...
4.     </ActionBar>
5. </Page.actionBar>

To define buttons, first use <ActionBar.actionItems> as the parent, and each <ActionItem> will be the buttons that you want to define. The tap attribute specifies a function to be executed when the button is tapped, while os.position and android.position are the positions of the button in iOS and Android.

To specify the button text, you could use the <ActionItem>'s text attribute. However, NativeScript doesn't currently allow changing the text color of the button through CSS. That's why instead we've used <ActionItem.actionView> to define the content of the button and to set its text color.

1. <ActionBar.actionItems>
2.   <ActionItem tap="newNote" ios.position="right" android.position="actionBar">
3.     <ActionItem.actionView>
4.         <StackLayout orientation="horizontal">
5.           <Label text="New Item" color="#fff" cssClass="header-item" />
6.         </StackLayout>
7.     </ActionItem.actionView>
8.   </ActionItem>
9. </ActionBar.actionItems>

Next is the actual page content. You can arrange the different elements by using one or more of the layout containers. Below we've used two of the available layouts: StackLayout and GridLayout.

StackLayout allows you to stack all the elements inside of it. By default, the orientation of this layout is vertical, so that each UI component is stacked below the last. Think of lego bricks with a downward flow.

On the other hand, GridLayout allows you to arrange elements in a table structure. If you've ever used Bootstrap or other CSS grid frameworks then this should seem natural to you. The GridLayout lets you define rows and columns among which each UI component can be placed. We'll take a look at how this is implemented later on. For now, let's move on to the code.

First, let's define the form for creating a new note. Just like in HTML, you can define attributes such as id and cssClass (equivalent to HTML's class attribute). The id attribute is attached to an element if you want to manipulate it from code. In our case, we want to animate the form later on. cssClass is used to specify the cssClass that you will use to style the element.

Inside the form is a text field for entering the note title, a button for attaching an image, the selected image, and a button for saving the note. The image element is only visible if the attachment_img has a truthy value. That will be the case if an image was previously attached.

1. <StackLayout id="form" cssClass="form-container">
2.   <TextView text="{{ item_title }}" hint="Title" />
3.   <Button text="Attach Image" cssClass="link label" tap="openCamera" />
4.   <Image src="{{ attachment_img }}" id="attachment_img" cssClass="image" visibility="{{ attachment_img ? 'visible' : 'collapsed' }}" />
5.   <Button text="Save Note" tap="saveNote" cssClass="primary-button" />
6. </StackLayout>

Next is the list that shows the notes that were already added by the user. Lists are created by using the ListView component. This accepts items as a required attribute. The value can either be a plain array or an observable array.

If you do not need to perform any form of update (e.g. deleting or updating a field) to each item in the array, a plain JavaScript array will do. Otherwise, use an observable array which allows you to perform updates to the array and have it automatically reflected to the UI. We'll take a look at how an observable array is defined later on.

Also note that a ListView can have an itemTap attribute, which allows you to specify the function to be executed when an item in the ListView is tapped. But in this case we haven't really added it since we don't need to perform any action when an item is tapped.

1. <ListView items="{{ notes }}" id="list" visibility="{{ showForm ? 'collapsed' : 'visible' }}">
2.     ...
3. </ListView>

The items in the ListView can be defined using <ListView.itemTemplate>. Here we're using a <GridLayout>  to create two rows and two columns. The columns attribute is used to specify how many columns you want in each row.

In this case, *,* means that there are two columns, each taking up an equal amount of the available space in the current row. So if the whole row has a total width of 300 pixels, each column will be 150 pixels wide. So basically each * represents one column, and you use a comma to separate each of them.

The rows attribute works similarly, but controls the amount of space used by a single row. auto means it will only consume the amount of space needed by the children of each row.

After defining the columns and rows in the GridLayout, you still have to specify which of its children belongs to which row and column. The first row contains the title of the item (1st column) and the delete button (2nd column). The second row contains the image that was attached to the item (1st column). The row and columns are specified by using the row and col attribute for each element.

Also notice the use of horizontalAlignment and verticalAlignment. You can think of this as the NativeScript equivalent of HTML's text-align attribute. But instead of text, we're aligning UI components. horizontalAlignment can have a value of right, left, center, or stretch, while verticalAlignment can have a value of top, bottom, center, or stretch. Most of these are self-explanatory, except for stretch, which stretches to take up the available horizontal or vertical space.

In this case, horizontalAlignment and verticalAlignment are used to center the image both horizontally and vertically inside its column. And horizontalAlignment is used on the delete button to align it to the right-most part of the second column.

1. <ListView.itemTemplate>
2.   <GridLayout columns="*,*" rows="auto,auto" cssClass="item">
3.     <Label text="{{ title }}" textWrap="true" row="0" col="0" />
4.     <Image src="{{ photo }}" horizontalAlignment="center" verticalAlignment="center" cssClass="image" row="1" col="0" visibility="{{ photo ? 'visible' : 'collapsed' }}" />
5.     <Button text="delete" index="{{ index }}" cssClass="delete-button" tap="deleteNote" row="0" col="1" horizontalAlignment="right" loaded="btnLoaded" />
6.   </GridLayout>
7. </ListView.itemTemplate>

We haven't specified an itemTap attribute for the ListView. Instead, we want to attach a delete action that will be executed whenever a delete button inside a list item is tapped. Each item has an index attribute, which we're passing as a custom attribute for the delete button. This is the unique key used for identifying each item so that we can easily refer to them when needed.

Also notice the loaded attribute. Just as <Page> has a loaded attribute, buttons can also have one. You'll see later on how this is used.
Written by Wernher-Bel Ancheta (continue)

If you found this post interesting, follow and support us.
Suggest for you:

Build Apps with React Native

The Complete Android Developer Course - Build 14 Apps

Ionic by Example: Create Mobile Apps in HTML5

The Complete Android & Java Course - Build 21 Android Apps

Android Application Programming - Build 20+ Android Apps