Tutorial for creating the base Notepad application
Notepad
This tutorial demonstrates how you can create a simple application notepad using TAU library.
The main features of the Notepad include:
- shows all the notes in main page
- add new notes
- edit existing notes
- delete notes when swipe on item
Tutorial goal
On the main page application will show all the notes and each can be edited. List of notes can be scrolled. The note after click will show in edit page and can be a edited. On the first page will be located a button with functionality off adding new note.
Step 1: Generating simple app from Tizen SDK
First we should create simple basic app, which can be a base application for develop. For creating default application go to menu File in Tizen SDK and select New->Tizen Web Project. In window which is appear select _Basic-> Basic Application. After that type name for app Notes and click Finish. After this operations application should be created with default files structure like here
Step 2:
When you have created a basic application, you may go to edit
a file index.html. Before you start, you may want to check out the section header.
Because the application will run on mobile or wearable devices
you need to add tau.css styles for the corresponding profile. If you want
create mobile app you should add style css for profile mobile and link it to the
header like below:
<!-- Use 'mobile' or 'wearable' to choose device tau profile -->
<link rel="stylesheet" type="text/css" href="js/lib/tau/mobile/theme/default/tau.css"/>
or profile wearable :
<!-- Use 'mobile' or 'wearable' to choose device tau profile -->
<link rel="stylesheet" type="text/css" href="js/lib/tau/wearable/theme/default/tau.css"/>
and also you can add your own styles for application if there is any need
<link rel="stylesheet" type="text/css" href="css/style.css"/>
At this point section header should look like below:
<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 chose device tau profile -->
<link rel="stylesheet" type="text/css" href="js/lib/tau/mobile/theme/default/tau.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
Step 3:
In this step you need create two basic pages:
- page where application displays all notes
- page for adding/edditing a note
First page
First page is a div block with class ui-page and id main. Let’s add title header
Notes like below:
<div id="main" class="ui-page">
<header class="ui-header">
<h1>Notes</h1>
</header>
</div>
And now you need to add content for first page. To do this, add div tag with
class _ui-content. Add to this ul tag which will create list for all notes.
Set the attribute [data-scroll=”y”] and [data-scroll=”y”] [data-handler=”true”].
Item in the list will be represented as li tag. When some note on the
first pages will be clicked, then application will trigger event changepage
to editor page and shows the item.
<div data-role="content" data-scroll="y" data-handler="true">
<ul data-role="listview" id="notesList"></ul>
</div>
Add navigation button to application which will change to the editor page.
The button will be placed in the footer. The button will be created from a tag,
which has id="newBtn".
<div data-role="footer">
<a href="javascript:void()" id="newBtn">New note</a>
</div>
Complete code for first page is shown below:
<div data-role="page" id="main">
<div data-role="header" data-position="fixed">
<h1>Notes</h1>
</div>
<div data-role="content" data-scroll="y" data-handler="true">
<ul data-role="listview" id="notesList"></ul>
</div>
<div data-role="footer">
<a href="javascript:void()" id="newBtn">New note</a>
</div>
</div>
Second page:
Header and Footer are similar to main page. The only difference is that the
action triggered after pressing the button will add a item into items array and
to the top of the visible list. Second page is a div with
id="editor" and class="ui-page". This page is needed for adding or
editing selected note. The second page will have the textarea tag in order
to edit the selected note.
Code for second page is below:
<div data-role="page" id="editor">
<div data-role="header">
<h1>Editor</h1>
</div>
<div data-role="content">
<textarea id="editorField" placeholder="enter note"></textarea>
</div>
<div data-role="footer">
<a href="javascript:void()" id="saveBtn">Save</a>
</div>
</div>
Step 4:
Finally you need to link to TAU library sources and add script to the application
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/lib/tau/mobile/js/tau.js" data-build-remove="false"></script>
<script src="js/main.js"></script>
These step ends the modifications in index.html file.
You can check how the index.html look like in the attached example.
The link can be found at the bottom of the page.
Step 5:
When the index.html is ready, you can add styles for content.
a {
color: #FFF;
}
#notesList.ui-listview {
width: 100%;
}
#notesList.ui-listview li {
margin: 0;
white-space: nowrap;
}
#notesList.ui-listview li .ui-swipe-item-cover-inner {
text-overflow: ellipsis;
overflow: hidden;
}
#editor .ui-scrollview-view {
height: 100%;
}
#editor textarea {
height: 95%;
}
This can be put directly in the application html file between <script></script> tags
or you can create your own css nad add a link pointing to it in the markup head element
as shown in step 2.
Step 6:
In this step we will create the main.js file. First of all create immediate function with function to close the app. Finally whole file should looks like below:
!info Wrapping closure It’s always good idea to wrap your whole content of your JavaScrpt files in a closure function to prevent creating unneeded variables in the global scope.
<script>
(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 $('[data-role="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('div');
deleteBtn.setAttribute('data-role', 'button');
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).on('tizenhwkey', function (e) {
if (e.originalEvent.keyName === "back"
&& window.tizen
&& window.tizen.application) {
switch (getCurrentPageId()) {
case 'main':
window.tizen.application.getCurrentApplication().exit();
break;
default:
window.history.back();
break;
}
return false;
}
});
}
/**
* Initialize
*/
function init() {
showNotes();
events();
}
init();
}());
</script>
OK, so now we have to put it all together. Link to the finished demo application is added at the bottom of the page. Still the app can be downloaded and imported to Tizen SDK IDE and deployed to a device or emulator to checkout.