Database to list in WebOS

This tutorial shows how to insert record into SQL Storage(HTML5) and Populate the rows in List widget.

Step1 : Create Basic Scene “DatabaseList”

in DatabaseList-Scene.html

<div>Database Tutorial</div>

<div id="textField"></div>
<div id="button-1"></div>
<div id="listId" class="listClass"></div>

Step2 : Create one html file for List Widget
in myRowTemplate.html

<div class="palm-row">
<div style="float: left;">#{data}</div>
&nbsp;

</div>

Step 3: DatabaseList-assistant.js Creating a new table named”ofive_table” with two columns ID – Autoincrement Column Title – Text column

DatabaseListAssistant.prototype.setup = function() {
var name = "MainDB";  // required
var version = "1";  // required

var db = openDatabase(name, version);

if (!db) {
  Mojo.Log.error("Could not open database");
} else {

  db.transaction(
  	function (transaction)
  	{
	    transaction.executeSql("CREATE TABLE IF NOT EXISTS Ofive_Table(id integer primary key autoincrement, Title TEXT)",[],
    		function(transaction, results)
    	       {Mojo.Log.info("Successfully created table")},
               function(transaction, error)
               {Mojo.Log.error("Could not create table: ")});
  });
}
this.controller.setupWidget('button-1',{},{buttonLabel: 'Insert'});
this.controller.setupWidget('textField',{},{original : 'initial value'});
Mojo.Event.listen(this.controller.get('button-1'),Mojo.Event.tap, this.InsertRow)
var attributes = {
             itemTemplate: 'DatabaseList/myRowTemplate',
             swipeToDelete: true,
         }
this.controller.setupWidget('listId', attributes);  
};

Step 4: Include the following function which performs

Reference for Queries
– Inserting a new record into the Table (ofive_Table)
– Retrieve all records from the table and Populate into the List widget

DatabaseListAssistant.prototype.InsertRow=function(event){
var db = openDatabase("MainDB", "1"); // this is all that is required to open an existing DB

db.transaction( function (transaction) {
  transaction.executeSql("INSERT INTO Ofive_Table(Title) VALUES (?)",  [$('textField').innerText],
      function(transaction, results) {    // success handler
      Mojo.Log.info("Successfully inserted record");
      },
      function(transaction, error) {      // error handler
       Mojo.Log.error("Could not insert record: " + error.message);
      }
  );
  transaction.executeSql("SELECT * FROM Ofive_Table",  [],
                         function(transaction, results) {    // success handler
			  var Ar1=[]
                          for(i=0;i<results.rows.length;i++)
			  {
			  Ar1.push({data: results.rows.item(i).Title})
			  }
			 $("listId").mojo.noticeUpdatedItems(0, Ar1);
                         },
                         function(transaction, error) {      // error handler
                           Mojo.Log.error("Could not insert record: " + error.message);
                         }
  );
})	

}

Output

Leave a Reply Cancel reply