[support-michael]

List-WebSQL DB Example (use MobiOne 2.5 or greater)
Updated Nov 14, 2014: fixed include path of MobiOneListBuilderUtil.js file

This project demonstrates use of the HTML5 web sql database available on iOS and Android devices in a simple CRUD local database app. It also introduces a utility (MobiOneListBuilder) for populating a list widget with the items retrieved from the local database. The project is attached to the bottom of this post.

Note – Use the new Mobile Web Simulator available in MobiOne 2.5 releases as your local test environment. The Mobile Web Simulator is the replacement for the former MobiOne Test Center which is obsolete, especially the websql services. The Mobile Web Simulator requires the Chrome browser to operate.

VIDEO of app on iphone5/ios7 (51 secs) – apologies as my mic is kaput. Will revise it asap.

See attachment side-by-side-screenshots-50.png See attachment websql-inspector.png
DOWNLOAD See attachment list-db-example.zip

Attachments:

You must be logged in to view attached files.

[support-michael]

Please use the MobiOne 2.5 milestone-2 and ONLY run this example in the Mobile Web Simulator. My original post included a note that explicitly called out avoiding use of the Test Center. See the note above. Also there is a small glitch as identified by @nvts above but this example still runs. Note that I qualified this version as preliminary and made it available to address an immediate request by a user for such an example. The minor glitch will be resolved in the upcoming MobiOne 2.5 milestone-3 version planned to be released late next week.

[aklisiewicz]

when I try to run it in Google Emulator I get an error
I took a screenshoot, but your forum will not allow me to attach an image to the post (I don’t understand why?).

can you also answer me other part of the post about the database connection?

Arthur

[badal405]

Dear wayn,
I have tried your example with MobiOne 2.5 milestone 2. When I tried with testing center, it has detected a problem which I am giving below.

Problems were detected while exporting the design (See Details)
list-db-example.mobi: (additional JS files) can not find file: C:\Documents and Settings\Md. Shaukat Hossain\Desktop\list-db-example\list-db-example\..\..\git-repos\mobione-listbuilder\MobiOneListBuilder.js

But i found MobiOneListBuilder.js file into the folder and sub folder!!
Furthermore, it is not saving data to my android mobile but working with google chrome with duplicate saving.
Would you please tell me where is the problem?
Thanks and regards.

[support-michael]

@badal405

Thanks for sharing the issue with the path to the MobiOneListBuilder.js file. I will correct that asap and post an updated codebase with a relative path.

I did not test the example on android yet. Will give it a go asap. The chrome duplicate actions is minor issue in mobione 2.5m2 that is has been fixed and will be available in 2.5m3 late this week or early next week.

Re: android issue – there are many versions and many devices that work differently. Always post your device and os version info.

[support-michael]

>can you also answer me other part of the post about the database connection?

All of the db code can be found in the list-db.js file. Crack it open and give it a look.

/**
 * create 'list-demo' database and ITEMS table
 */  
function initDatabase() { 
    if (!window.openDatabase) {
        $('[id$=errorTxt').text('Web SQL not supported on this device');
        return;
    }
    
    db = openDatabase('list-demo', '1.0', 'repository for list items', 1024 * 1024);
    console.log('db created');
    
    db.transaction(function(tx) {
      tx.executeSql('CREATE TABLE IF NOT EXISTS items (' +
              'id INTEGER PRIMARY KEY AUTOINCREMENT,' + 
              'item TEXT)');
      console.log('tabled created');      
    });    
}

[vinsky2007]

Wayne,

Thanks for sharing the WebSQL sample and it works on my side.

Vins

[RichardOne]

Hi Vinsky2007,

Can you point me in the right direction on this DB please? DL’d it but now working for some reason. Tried to link to it but getting it wrong somehow

New to DB’s, trying to get a simple two coloumn db name and price but keep falling over.

Just trying to show a basic menu page with a search function.

Most grateful

[RichardOne]

List DB http://screencast-o-matic.com/watch/cIXFocV9XH

[support-michael]

Looks like you are running this example in the old Test Center. Is this correct?
If yes, try this example using the Mobile Web Simulator (see Windows menu>Settings>Simulator).

[RichardOne]

Thanks for that Wayne, of course you were right 😉

Now, is thre (as I’m learning this stuff) where I can find how I can make the db as I need i.e. two columns.

How to link to app so the db can be browsed?

I’m sure you know what I’m on about right?

Again, many thanks

[RichardOne]

Hi Wayne,

Any update for this please?

[Author]

Posts