Page Example

Memo Sample Overview

The Memo sample application demonstrates how you can use the Web SQL database and content features in your application to store dates and get content information.

The following figure illustrates the main screens of the Memo.

Figure: Memo screens

Memo screens

The application opens with the main screen that shows the memos included in the default book.

Prerequisites

To ensure proper application execution, the following privileges must be set:

  • http://tizen.org/privilege/content.read
  • http://tizen.org/privilege/content.write

Source Files

You can create and view the sample application project including the source files in the IDE.

File name Description
config.xml This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.
index.html This is a starting file from which the application starts loading. It contains the layout of the application screens.
js/main.js This file contains the code for initiating the memo application.
js/memo_db.js This file contains the code for handling the memo database.
js/memo_gallery.js This file contains the code for handling the gallery from device images.
js/memo_page.js This file contains the code for handling page navigation.

Implementation

To implement the application:

  1. To initialize the application, use the init() method, which is called when the whole DOM content is loaded. The method calls 3 other methods: openDB(), initEventhandler(), and initPage().

    function init()
    {
       openDB();
       initEventhandler();
       initPage();
    }
    
  2. The openDB() method opens the Web SQL database and calls the createTable() method:

    function openDB() 
    {
       if (window.openDatabase) 
       {
          db = window.openDatabase("myMemoDB", "1.0", "for memo sample webapp", 1024*1024);
       } 
       else 
       {
          console.warn("not web sql support");
       }
       createTable();
    }
    
  3. To create the table, define the SQL sentence with quotation marks as the executeSql() method parameter.

    The db variable handles database transactions.

    db.transaction(function (tx) 
    {
       tx.executeSql("CREATE TABLE IF NOT EXISTS memo (id INTEGER PRIMARY KEY AUTOINCREMENT," +
                     " subject, text, book, date, image)", []);
    });
    
  4. To manage the table, you can insert values to it, or delete it:
    /* Insert values */
    db.transaction(function (tx) 
    {
       tx.executeSql("INSERT INTO book VALUES(?)", [book]);
    });
    
    /* Delete the table */
    db.transaction(function (tx) 
    {
       tx.executeSql("DROP TABLE memo", []);
    });
    
  5. To request for the content with a specific filter, use the refreshGalleries() function. You can sort the content with the tizen.SortMode object.

    var refreshed = false,
        filter = new tizen.AttributeFilter( 'type', 'EXACTLY', 'IMAGE'),
        sortMode = new tizen.SortMode('title', 'ASC'),
        RESOURCE_PATH = '/opt/usr/media/';
    
    function refreshGalleries() 
    {
       refreshed = false;
       tizen.content.find(contentFindSuccess, contentFindError, null, filter, sortMode);
    }
    

    The contentFindSuccess() function is a callback that is triggered after the find() function has retrieved the content. The callback extracts all image paths from a specified path, and store an array for making a gallery.

    for (i = 0; i < length; i += 1) 
    {
       item = items[i];
       pathdata = extractPathData(item.contentURI);
       item.path = pathdata.path;
       item.resource = pathdata.resource;
       item.directory = pathdata.directory;
       allpath = "file://" + item.path + "/" + item.name;
       array_allpath.push(allpath);
    }