Creating a Notepad UI Application

The notepad application shows all the notes in the main page, and allows the user to add new notes, edit existing notes, and delete notes by swiping them. The notes on the main page can be scrolled and edited, and a button is provided for adding a new note. After you click a note, it is displayed in the edit page for editing.

This feature is supported in mobile and wearable applications only.

To create a simple notepad application using the TAU library, follow the steps below:

Generate an application from Tizen Studio.

Create a simple basic application that can be used for further development:
1. In the Tizen Studio menu, go to File > New > Tizen Project. Select a template for a wearable Web application, and create a project using the Basic UI template.
2. Enter the application name as Notes and click Finish.
Tizen Studio creates the application with a default file structure.

Edit the section header for the index.html file.
Because the application runs on mobile or wearable devices, make sure that you have the correct tau.css styles for the corresponding profile:

Mobile:

<link rel="stylesheet" type="text/css" href="lib/tau/mobile/theme/default/tau.min.css"/>

Wearable:

<link rel="stylesheet" type="text/css" href="lib/tau/wearable/theme/default/tau.min.css"/>

Add also your own styles for the application:

<link rel="stylesheet" type="text/css" href="css/style.css"/>

The following example shows how the section header looks after editing:

<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
   <meta name="description" content="Tizen basic template generated by Tizen Web IDE"/>

   <title>Notepad</title>

   <!--Use 'mobile' or 'wearable' to choose the device TAU profile-->
   <link rel="stylesheet" type="text/css" href="lib/tau/mobile/theme/default/tau.css"/>
   <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

Create the pages: the main page for displaying the notes and the editing page for adding and editing notes.
1. The main page is the first page, defined with the div block with the ui-page class and main id.
  - Add the title header (Notes) for the page:
```
<div id="main" class="ui-page">
   <header class="ui-header">
      <h1>Notes</h1>
   </header>
</div>
```
  - Add content for the main page by adding a div element with the _ui-content class. Add to this a ul element, which creates the list of notes.
    Set the data-scroll="y" and data-handler="true" attributes.
    The item in the list is represented as a li element. When a note on the main page is clicked, the application triggers the changepage event to the editor page and shows the item:
```
<div class="ui-content" data-scroll="y" data-handler="true">
   <ul class="ui-listview" id="notesList"></ul>
</div>
```
  - Add a navigation button to the application to change to the editor page. The button is placed in the footer, and it is created from an a element, which has the id="newBtn" attribute:
```
<div class="ui-footer">
   <a class="ui-btn" href="javascript:void()" id="newBtn">New note</a>
</div>
```
  The above examples apply to a wearable application. The following example shows the full code for the main page in a mobile application:
```
<div class="ui-page" id="main">
   <div class"ui-header" data-position="fixed">
      <h1>Notes</h1>
   </div>
   <div class="ui-content" data-scroll="y" data-handler="true">
      <ul class="ui-listview" id="notesList"></ul>
   </div>
   <div class="ui-footer">
      <a class="ui-btn" href="javascript:void()" id="newBtn">New note</a>
   </div>
</div>
```
  Note
  In mobile applications, pages are constructed using the data-role attribute, while the wearable applications use the class attribute. In addition, the value of the data-role attribute in mobile applications differs from the class attribute value in the wearable applications.
2. On the editing page, the header and footer are similar to the main page.
  
  The only difference is that the action triggered after pressing the button adds an item to the items array and adds the item to the top of the visible list. The editing page is defined with a div block with the id="editor" and class="ui-page" attributes.
  
  The editing page is needed for adding or editing a selected note. It has a textarea element to allow the user to edit the selected note:
```

<div class="ui-page" id="editor">
   <div class="ui-header">
      <h1>Editor</h1>
   </div>
   <div class="ui-content">
      <textarea id="editorField" placeholder="enter note"></textarea>
   </div>
   <div class="ui-footer">
      <a href="javascript:void()" id="saveBtn">Save</a>
   </div>
</div>
```

Link to the TAU library sources and add the script to the application:

<script src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/tau/mobile/js/tau.js" data-build-remove="false"></script>
<script src="js/main.js"></script>

The index.html file is now ready.

Add styles for the content:

a {
   color: #FFF;
}

#notesList.ui-listview {
   width: 100%;
}

#notesList.ui-listview li {
   margin: 0;
   white-space: nowrap;
}

#notesList.ui-listview li .ui-inline {
   position: absolute;
   right: 5px;
   top: 5px;
}

#notesList.ui-listview li .ui-swipe-item-cover-inner {
   text-overflow: ellipsis;
   overflow: hidden;
}

#editor .ui-scrollview-view {
   height: 100%;
}

#editor textarea {
   height: 95%;
   width: 100%;
}

Create the main.js file and create a function to close the application.
The application is started when the HTML content is ready:

document.addEventListener('DOMContentLoaded', function() {
    'use strict';

    var newBtn = document.getElementById('newBtn'),
        saveBtn = document.getElementById('saveBtn'),
        editorField = document.getElementById('editorField'),
        notesList = document.getElementById('notesList'),
        editorPage = document.getElementById('editor'),

        mainPageId = '#main',
        editorPageId = '#editor',

        currentIndex = null,

        EMPTY_CONTENT = '(empty)',
        STORAGE_KEY = 'notepad';

    /*
       Get data from local storage
       @return {Array}
    */
    function getStorage(key) {
        return JSON.parse(window.localStorage.getItem(key)) || false;
    }

    /*
       Add data to local storage
       @param {Array} data
    */
    function addStorage(data) {
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
    }

    /*
       Return current page ID
       @returns
    */
    function getCurrentPageId() {
        return $('.ui-page:visible')[0].id;
    }

    /* Refresh current page */
    function refreshCurrentPage() {
        $('#' + getCurrentPageId()).trigger('create');
    }

    /*
       Get notes from storage
       @return {Array}
    */
    function getNotes() {
        return getStorage(STORAGE_KEY) || [];
    }

    /* Clear list with notes */
    function clearNotesList() {
       notesList.innerHTML = '';
    }

    /* Delete note from storage */
    function deleteNote(index) {
        var notes = getNotes();

        if (notes[index] !== undefined) {
            notes.splice(index, 1);
            addStorage(notes);
        } else {
            console.error('deleteNote: note not found');
        }

        showNotes();
        refreshCurrentPage();
        event.stopPropagation();
    }

    /*
        Edit note using array index
        @param index
    */
    function editNote(index) {
        var notes = getNotes();

        if (notes[index] !== undefined) {
            currentIndex = index;
            editorField.value = getNotes()[index];
            tau.changePage(editorPageId);
        } else {
            console.error('editNote: note not found');
            showNotes();
            refreshCurrentPage();
        }
    }

    /* Show all notes extracted from local storage */
    function showNotes() {
        var notes = getNotes(),
            notesLen = notes.length,
            li = {},
            swipeCover = {},
            swipeItem = {},
            deleteBtn = {},
            i = 0,
            notesListInst;

        clearNotesList();

        for (i; i < notesLen; i += 1) {
            li = document.createElement('li');
            li.addEventListener('click', editNote.bind(this, i), false);

            deleteBtn = document.createElement('button');
            deleteBtn.className('ui-btn');
            deleteBtn.setAttribute('data-inline', 'true');
            deleteBtn.innerText = 'Delete';

            deleteBtn.addEventListener('click', deleteNote.bind(this, i), false);

            li.innerText = notes[i].replace(/\n/g, ' ') || EMPTY_CONTENT;
            li.appendChild(deleteBtn);
            notesList.appendChild(li);
            notesListInst = tau.widget.getInstance(notesList);
            tau.widget.Button(deleteBtn);
            notesListInst.refresh();
        }
    }

    /* Clear editor textarea */
    function clearEditor() {
        editorField.value = '';
    }

    /* Save note to storage */
    function saveNote() {
        var notes = getNotes();

        if (currentIndex !== null) {
            notes[currentIndex] = editorField.value;
        } else {
            notes.push(editorField.value);
        }

        addStorage(notes);

        clearEditor();
        showNotes();
        tau.changePage(mainPageId);
    }

    /* New note button handler */
    function newNote() {
        currentIndex = null;
        clearEditor();

        tau.changePage(editorPageId);
    }

    /* On editor page show handler */
    function onEditorPageShow() {
        editorField.focus();
    }

    /* Attach events */
    function events() {
        newBtn.addEventListener('click', newNote);
        saveBtn.addEventListener('click', saveNote);

        editorPage.addEventListener('pageshow', onEditorPageShow);

        window.addEventListener('tizenhwkey', function(e) {
            if (e.keyName === 'back'
                && window.tizen
                && window.tizen.application) {
                switch (getCurrentPageId()) {
                    case 'main':
                        window.tizen.application.getCurrentApplication().exit();
                        break;
                    default:
                        window.history.back();
                        break;
                }

                return false;
            }
        }, false);
    }

    /* Initialize */
    function init() {
        showNotes();
        events();
    }

    init();
}, false);

Now the application is ready and you can deploy it to a device or emulator.

Dependencies
- Tizen 2.4 and Higher for Mobile
- Tizen 2.3.1 and Higher for Wearable

Creating a Notepad UI Application

Related information