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:
-
Generate an application from Tizen Studio.
Create a simple basic application that can be used for further development:
- 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.
- 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 correcttau.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.
-
The main page is the first page, defined with the
div
block with theui-page
class andmain
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 aul
element, which creates the list of notes.
Set thedata-scroll="y"
anddata-handler="true"
attributes.
The item in the list is represented as ali
element. When a note on the main page is clicked, the application triggers thechangepage
event to theeditor
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 theid="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 thedata-role
attribute, while the wearable applications use theclass
attribute. In addition, the value of thedata-role
attribute in mobile applications differs from theclass
attribute value in the wearable applications. -
-
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 theid="editor"
andclass="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.<!--This code applies to wearable applications--> <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.
Related Information
- Dependencies
- Tizen 2.4 and Higher for Mobile
- Tizen 2.3.1 and Higher for Wearable