Create Your First NativeScript App_part 3 (end)

The saveNote()Function
The saveNote() function is executed when the user taps on the Save Note button. This gets the current value of the note title text field and the image path, increments the current_index, and pushes the new item into the plain notes array and observable notes array. Then it saves the current notes and the current_index into the application settings, removes the values for the new note from the application settings, updates the UI so that the form shows its empty state, and shows the list while hiding the new note form.

1. exports.saveNote = function() {  
2.   var new_note_title = pageData.get('item_title');
3.   var new_note_photo = pageData.get('attachment_img'); 
4.   current_index += 1;
5.   var new_index = current_index;  
6.   var new_item = {
7.     index: new_index,
8.     title: new_note_title,
9.     photo: new_note_photo,
10.     show_photo: false
11.   }; 
12.   notesArr.push(new_item);
13.   pageArray.push(new_item); 
14.   appSettings.setString('notes', JSON.stringify(notesArr));  
15.   appSettings.setNumber('current_index', new_index); 
16.   appSettings.remove('new_note_title');
17.   appSettings.remove('new_note_photo');
18.   pageData.set('showForm', false);
19.   pageData.set('item_title', '');
20.   pageData.set('attachment_img', null);   
21.   view.getViewById(page, 'list').animate({
22.     opacity: 1,
23.     duration: 400 
24.   }); 
25.   view.getViewById(page, 'form').animate({
26.       translate: { x: 0, y: -160 },    
27.       duration: 800,
28.   }); 
29. }

The deleteNote() Function
Lastly, we have the deleteNote() function which gets executed when a user taps on the delete button inside a list item. As you have already seen from previous functions, an object is passed in as an argument to functions that are attached as an event handler for a specific component. This object has the object property, which refers to the component itself.

From there, you can get the value of an attribute that was passed to it. In this case, we're getting the value of the index attribute, and we use it to get the actual index of the item that we want to delete.

1. exports.deleteNote = function(args){   
2.   var target = args.object; 
3.   var index_to_delete = notesArr.map(function(e) { 
4.     return e.index; 
5.   }).indexOf(target.index);
6.  
7.   notesArr.map(function(item, index){
8.  
9.     if(index == index_to_delete){
10.       notesArr.splice(index_to_delete, 1);
11.       pageArray.splice(index_to_delete, 1);
12.       return false;
13.     }
14.   }); 
15.   appSettings.setString('notes', JSON.stringify(notesArr));
16. }

6. Adding Styles

Open the app.css file and add the following global styles:

1. ActionBar {
2.     background-color: #b898ff;   
3.     color: #fff;
4. } 
5. .header-item {
6.     text-transform: uppercase;
7. } 
8. .item {
9.     padding: 20;
10.     font-size: 20px;
11. } 
12. .form-container {
13.     background-color: #fff;
14.     margin-top: -160px;
15.     padding: 20px;
16.     z-index: 10;
17. } 
18. .label {
19.     font-size: 18px;
20. } 
21. .link {
22.     text-align: left;
23.     background-color: transparent;
24.     color: #0275d8;
25.     padding: 5px;
26.     margin: 10px 0;
27.     text-transform: uppercase;
28.     font-size: 15px;
29. } 
30. .image {
31.     width: 300;
32.     margin: 20 0;
33. } 
34. .primary-button {
35.     padding: 5px;
36.     color: #fff;
37.     background-color: #0723bb;
38.     text-transform: uppercase;
39. } 
40. .delete-button {
41.     font-size: 15px;
42.     background-color: #f50029;
43.     color: #fff;
44. }

If you want to apply page-specific styles, you can also create a notes-page.css file and define your styles in there.

7. Running and Debugging the App

You can run the app on your device by executing tns run and then the platform where you want to deploy. Here's an example for android:

1. tns run android

This automatically installs the Android platform for you if it hasn't already been installed and then runs the app on your device once it's installed. Once the app is running, you can execute tns livesync android --watch to automatically refresh the app every time you make changes to the source files.

Debugging
Just like any other app framework, NativeScript allows developers to debug their app. This is done with the Chrome dev tools. There are two ways of doing this:

• If have an app already running, you can open a new terminal window and execute tns debug android --start to attach a debugger to the currently running instance of the app.
• If you don't have an app running yet, use tns debug android --debug-brk to build an instance of the app with a debugger attached to it.

No matter which option you choose, this will open up a new tab in the Google Chrome browser that allows you to debug the app just like a normal JavaScript web app. This means that you can actually use console.log in your source code to inspect the contents of the variables that you're working with.

Conclusion and Next Steps

In this article, you've learned how to build an app with NativeScript. Specifically, you've learned concepts such as using UI components, layouts, styling, animations, using the device camera, and maintaining application state with application settings.
Written by Wernher-Bel Ancheta

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

iOS 10 Projects: Build Amazing Apps with Apple's Newest iOS

iOS 10 & Swift 3: From Beginner to Paid Professional

The Complete Android Developer Course: Beginner To Advanced!

Android: From Beginner to Paid Professional

The Complete Android Developer Course - Build 14 Apps