facebook

PRELIMINARY – Websql CRUD with Custom List Example

  1. MobiOne Archive
  2.  > 
  3. Examples, HOW-TOs
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #342956 Reply

    support-michael
    Keymaster

    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.
    #343052 Reply

    support-michael
    Keymaster

    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.

    #343058 Reply

    aklisiewicz
    Member

    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

    #343174 Reply

    badal405
    Member

    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.

    #343178 Reply

    support-michael
    Keymaster

    @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.

    #343179 Reply

    support-michael
    Keymaster

    >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');      
        });    
    }
    #344333 Reply

    vinsky2007
    Member

    Wayne,

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

    Vins

    #344538 Reply

    RichardOne
    Member

    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

    #344542 Reply

    RichardOne
    Member
    #344545 Reply

    support-michael
    Keymaster

    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).

    #344552 Reply

    RichardOne
    Member

    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

    #347242 Reply

    RichardOne
    Member

    Hi Wayne,

    Any update for this please?

Viewing 12 posts - 1 through 12 (of 12 total)
Reply To: PRELIMINARY – Websql CRUD with Custom List Example

You must be logged in to post in the forum log in