Android Tutorial Creating a Prototype Mobile App Using JQuery Mobile

Discussion in 'Tutorials & Examples' started by Mashiane, Jan 22, 2015.

  1. Mashiane

    Mashiane Expert Licensed User

    I have been working on a tool to create a prototype app using JQuery Mobile inside B4A. Currently the only way to create a prototype is via code. You can later distribute this prototype as an apk. You need to be familiar with how JQuery Mobile works. This project is dependent on this post.

    http://www.b4x.com/android/forum/threads/jqmobile-show.49427/

    Below is an example of the prototype JQuery Mobile App, I created with a little bit of code behind to produce a SPA for the project. Currently events are not accounted for in this, however your hyperlinks will work. I'm still exploring and will provide the code below and the source and apk for the JQuery.Show b4a app is on the above link.
     

    Attached Files:

    Peter Simpson likes this.
  2. Mashiane

    Mashiane Expert Licensed User

    When you run the JQuery.Show app, select "Mobile Prototype" to have the project above displayed. However...

    1. To reproduce, create an activity and set it up as follows

    Code:
    Sub Globals
        
    'These global variables will be redeclared each time the activity is created.
        'These variables can only be accessed from this module.
        Dim wbE As WebViewExtras
        
    Dim webMind As WebView
        
    'Dim jsI As DefaultJavascriptInterface
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
       
    'Do not forget to load the layout file created with the visual designer. For example:
       'Activity.LoadLayout("familyMind")
       Activity.title = "Prototype"
       webMind.Initialize(
    "webMind")
       webMind.JavaScriptEnabled=
    True
       
    'jsI.Initialize
       'wbE.addJavascriptInterface(jsI, "B4A")
       wbE.addWebChromeClient(webMind,"wbE")
       
    Activity.AddView(webMind, 0,0100%x100%y)
       
    Activity.AddMenuItem3("Back""cmdBack"LoadBitmap(File.DirAssets, "back25.png"), True)
       
    ' process forms
       Select Case Main.Action
       
    Case "Project1"
         Project1
       
    End Select
    End Sub
     
    hibrid0 likes this.
  3. Mashiane

    Mashiane Expert Licensed User

    2. Add the following code to your activity that defines the project, the project uses other pages too to be inserted in the spa.

    Code:
    Sub Project1
        
    ' create a new prototype project
        Dim html As clsHTML
        html.Initialize
        html.ProjectName = 
    "project1"
       
        
    ' create a new html page
        Dim pgLogin As clsHTML5Page
        pgLogin.Initialize(
    "pgLogin")
        
    ' set up the header
        pgLogin.Header.Title = "Login"
        
    ' add a back button with icon
        pgLogin.Header.SetLeftButton("#","Back",EnumDataIcon.DataIcon.iback)
        
    ' create a form
        Dim frmLogin As clsHTML5Form
        frmLogin.Initialize(
    "frmLogin")
       
        
    ' add controls, use a field container to hold all controls
        Dim fc As clsHTML5FieldContain
        fc.Initialize(
    False,"")
       
        
    ' username
        Dim txt As clsHTML5Input
        txt.initialize(
    "userName","User Name:",EnumInputType.InputType.text)
        txt.Required = 
    True
        txt.infieldcontain=
    True
        txt.IsListItem = 
    True
        fc.AddContent(txt.Render)
        
    ' password
        txt.initialize("passWord","Password:",EnumInputType.InputType.password)
        txt.Required = 
    True
        txt.infieldcontain = 
    True
        txt.IsListItem = 
    True
        fc.AddContent(txt.Render)
        
    ' login button
        Dim lnk As clsHTML5Anchor
        lnk.initialize(
    "cmdLogin")
        lnk.sethref(
    "#pgSites")
        lnk.settitle(
    "Ok")
        lnk.DataTheme = EnumDataTheme.DataTheme.b
        lnk.DataRole = EnumDataRole.DataRole.abutton 
        lnk.DataIcon = EnumDataIcon.DataIcon.icloud
        lnk.SetDataTransition(EnumTransition.Transition.flow)
        fc.AddContent(lnk.Render)
       
        
    ' forgot password button
        lnk.initialize("cmdForgot")
        lnk.sethref(
    "#")
        lnk.settitle(
    "Forgot Password")
        lnk.DataRole = EnumDataRole.DataRole.abutton 
        lnk.DataIcon = EnumDataIcon.DataIcon.iaction
        lnk.SetDataTransition(EnumTransition.Transition.flow)
        
    'fc.AddContent(lnk.Render)
       
        lnk.initialize(
    "cmdRegister")
        lnk.sethref(
    "#pgRegister")
        lnk.settitle(
    "Register")
        lnk.DataRole = EnumDataRole.DataRole.abutton 
        lnk.DataIcon = EnumDataIcon.DataIcon.igear
        lnk.SetDataTransition(EnumTransition.Transition.flow)
        fc.AddContent(lnk.Render)
       
        
    ' add the field container to the form
        frmLogin.AddContent(fc.Render)
       
        
    ' create the page
        'frmLogin.AddContent(lvLogin.Render)
        'frmLogin.AddContent(lnk.render)
        ' add the form to the page
        pgLogin.AddForm(frmLogin)
       
        
    ' add the page to the project & other pages
        html.AddPage(pgLogin)
        Project1Register(html)
        Project1Sites(html)
        Project1AddSite(html)
       
        
    ' save the project to an dirrootexternal, index.html
        html.Save
        
    Log(html.Render)
        
    ' render the project to the webview
        html.Draw(webMind)
    End Sub
     
  4. Mashiane

    Mashiane Expert Licensed User

    3. The Register screen code behind to create the form.

    Code:
    Sub Project1Register(html As clsHTML)
        
    ' create the register page
        Dim pgR As clsHTML5Page
        pgR.Initialize(
    "pgRegister")
        pgR.Header.Title = 
    "Register"
       
        
    ' add a form to the page
        Dim frm As clsHTML5Form
        frm.Initialize(
    "frmRegister")
       
        
    ' add controls inside a field container
        Dim fc As clsHTML5FieldContain
        fc.Initialize(
    False,"")
       
        
    ' Full Name
        Dim txt As clsHTML5Input
        txt.initialize(
    "fullName","Full Name:",EnumInputType.InputType.text)
        txt.Required = 
    True
        txt.infieldcontain=
    True
        txt.IsListItem = 
    True
        fc.AddContent(txt.Render)
        
    ' password
        txt.initialize("rpassWord","Password:",EnumInputType.InputType.password)
        txt.Required = 
    True
        txt.infieldcontain = 
    True
        txt.IsListItem = 
    True
        fc.AddContent(txt.Render)
        
    ' confirm password
        txt.initialize("crpassWord","Confirm Password:",EnumInputType.InputType.password)
        txt.Required = 
    True
        txt.infieldcontain = 
    True
        txt.IsListItem = 
    True
        fc.AddContent(txt.Render)
       
        
    ' cellphone
        txt.initialize("rmobile","Mobile Phone:",EnumInputType.InputType.number)
        txt.Required = 
    True
        txt.infieldcontain = 
    True
        txt.IsListItem = 
    True
        fc.AddContent(txt.Render)
       
        
    ' login button
        Dim lnk As clsHTML5Anchor
        lnk.initialize(
    "cmdRegister")
        lnk.sethref(
    "#pgLogin")
        lnk.settitle(
    "Ok")
        lnk.DataTheme = EnumDataTheme.DataTheme.b
        lnk.DataRole = EnumDataRole.DataRole.abutton 
        lnk.DataIcon = EnumDataIcon.DataIcon.icloud
        lnk.SetDataTransition(EnumTransition.Transition.flow)
        fc.AddContent(lnk.Render)
       
        lnk.initialize(
    "cmdCancelRegister")
        lnk.sethref(
    "#pgLogin")
        lnk.settitle(
    "Cancel")
        lnk.DataRole = EnumDataRole.DataRole.abutton 
        lnk.DataIcon = EnumDataIcon.DataIcon.iaction
        lnk.SetDataTransition(EnumTransition.Transition.flow)
        fc.AddContent(lnk.Render)
        frm.AddContent(fc.Render)
        
    ' create the page
        'frmLogin.AddContent(lvLogin.Render)
        'frmLogin.AddContent(lnk.render)
        ' add form to page
        pgR.AddForm(frm)
        
    ' add page to project
        html.AddPage(pgR)
    End Sub
     
  5. Mashiane

    Mashiane Expert Licensed User

    4. The Add site page

    Code:
    Sub Project1AddSite(html As clsHTML)
        
    ' add a new page
        Dim pgR As clsHTML5Page
        pgR.Initialize(
    "pgAddSite")
        pgR.Header.Title = 
    "Add Site"
       
        
    Dim frm As clsHTML5Form
        frm.Initialize(
    "frmAddSite")
       
        
    ' add controls
        Dim fc As clsHTML5FieldContain
        fc.Initialize(
    False,"")
       
        
    ' Full Name
        Dim txt As clsHTML5Input
        txt.initialize(
    "asiteName","Site Name:",EnumInputType.InputType.text)
        txt.Required = 
    True
        txt.infieldcontain=
    True
        txt.IsListItem = 
    True
        fc.AddContent(txt.Render)
        
    ' password
        txt.initialize("asiteMobile","Site Mobile Number:",EnumInputType.InputType.number)
        txt.Required = 
    True
        txt.infieldcontain = 
    True
        txt.IsListItem = 
    True
        fc.AddContent(txt.Render)
       
        
    ' add button
        Dim lnk As clsHTML5Anchor
        lnk.initialize(
    "cmdAddSite")
        lnk.sethref(
    "#pgSites")
        lnk.settitle(
    "Ok")
        lnk.DataTheme = EnumDataTheme.DataTheme.b
        lnk.DataRole = EnumDataRole.DataRole.abutton 
        lnk.DataIcon = EnumDataIcon.DataIcon.icloud
        lnk.SetDataTransition(EnumTransition.Transition.flow)
        fc.AddContent(lnk.Render)
       
        lnk.initialize(
    "cmdCancelAddSite")
        lnk.sethref(
    "#pgSites")
        lnk.settitle(
    "Cancel")
        lnk.DataRole = EnumDataRole.DataRole.abutton 
        lnk.DataIcon = EnumDataIcon.DataIcon.iaction
        lnk.SetDataTransition(EnumTransition.Transition.flow)
        fc.AddContent(lnk.Render)
        frm.AddContent(fc.Render)
        
    ' create the page
        'frmLogin.AddContent(lvLogin.Render)
        'frmLogin.AddContent(lnk.render)
        pgR.AddForm(frm)
        html.AddPage(pgR)
    End Sub
     
  6. Mashiane

    Mashiane Expert Licensed User

    5. The Site listing page

    Code:
    Sub Project1Sites(html As clsHTML)
        
    Dim pg As clsHTML5Page
        pg.Initialize(
    "pgSites")
        pg.Header.Title = 
    "Sites"
        pg.Header.SetLeftButton(
    "#pgLogin""Back", EnumDataIcon.DataIcon.iback)
        pg.Header.SetRightButton(
    "#pgAddSite""Add", EnumDataIcon.DataIcon.iplus)
       
        
    Dim frm As clsHTML5Form
        frm.Initialize(
    "frmSites")
       
        
    Dim lv As clsHTML5ListView
        lv.initialize(
    "lvSites")
        lv.DataAutoDividers = 
    True
        lv.AddItem(
    "site1","#","Site 1")
        lv.AddItem(
    "site2","#","Site 2")
        lv.AddItem(
    "site3","#","Site 3")
       
        frm.addcontent(lv.Render)
        
    ' create the page
        'frmLogin.AddContent(lvLogin.Render)
        'frmLogin.AddContent(lnk.render)
        pg.AddForm(frm)
        html.AddPage(pg)
    End Sub
     
  7. Mashiane

    Mashiane Expert Licensed User

    6. Viola, the output of all of this is the attached txt (rename to html) file for the project is attached for reference. Now the plan is to have this tool running as an android app that one can create their JQuery Mobile prototypes via drag and drop perhaps and setting properties at runtime to change the output of the overall webapp.
     

    Attached Files:

    avacondios and shashkiranr like this.
  8. Mashiane

    Mashiane Expert Licensed User

    This seems to be going surely but slowly. Had to go on a short course for JQuery, so far managing to show form contents on an alert. The dropbox links on the first post have the latest developments. Enough for today though. I'm loving this.

    On an anchor, adding the following code will alert the user of the contents of the form.

    Code:
    ' code to execute when the button is clicked, get and show the form data
        lnk.OnClick = frmLogin.serialize
        
    ' js to render the onclick event
        html.JavaScript.AddLine(lnk.OnClickRender)
    And the resulting input side the spa app is part the following:

    Code:
    <script>
    $(document).ready(function(){
    $(
    '#cmdLogin').click(function(e){
    e.preventDefault();
    var frmLoginData = $(
    '#frmLogin').serialize();
    alert(frmLoginData);
    });
    $.mobile.ajaxLinksEnabled = false;
    });
    </script>
     

    Attached Files:

    Peter Simpson and avacondios like this.
  9. Mashiane

    Mashiane Expert Licensed User

    After careful consideration, with a use of a model, one is able to create a CRUD application with less than 25 lines of code as demonstrated in this example. The example below is a Notekeeper prototype application using a textbox and a textarea.

    Download the latest JQuery.Show source/apk as indicated in the first post and select Notekeeper in the ListView. Once that is running, open your File Manager, in your mobile device and explore the Notekeeper folder, you can export this out of your device using MoboRobo and open the index.html file to run the app from your browser.

    This in essence does two things...

    1. Create a prototype
    2. Create a prototype folder on your device that you can run inside a browser i.e. A Jquery Mobile app, javascript included for the CRUD operations. This is limited to the textbox and textarea only currently.

    Known bugs: "Update Note" and "Delete" not working yet. Investigating

    Below is the example of the model to create

    1. ListView with nagivation and clickable items
    2. Add form to add a new note
    3. Update form to update note and navigate back/delete it

    Code:
    Public Sub NoteKeeperDesign()
        
    ' define the project
        Dim nk As clsHTML
        nk.Initialize
        nk.ProjectName = 
    "Notekeeper"   
        
    ' define the model, project name, model name, plural name and primary key
        Dim mdl As clsHTML5Model
        mdl.Initialize
        mdl.PrimaryKey = 
    "title"             ' the primary key of the note
        mdl.ProjectName = nk.ProjectName     ' the project name this model belongs to
        mdl.modelname = "Note"                 ' the name of the model
        mdl.PluralName = "Notes"             ' the pluralized name of the model
        mdl.AddField("title""Title", EnumInputType.InputType.text, True"Add a note"True)
        mdl.AddField(
    "note""Description", EnumInputType.InputType.textarea, True"The content of your note"True)
        
    ' generate the crud mobile app
        mdl.CreateApplication(nk)
        
    ' set it offline to create mobile app for offline use
        nk.OfflineMode = True
        nk.save
        wbE.LoadHtml(nk.html)
        
    Log(nk.html)
    End Sub
     
  10. Mashiane

    Mashiane Expert Licensed User

    Attached Files:

    • nk1.png
      nk1.png
      File size:
      34.9 KB
      Views:
      203
    • nk2.png
      nk2.png
      File size:
      26.3 KB
      Views:
      130
    • nk3.png
      nk3.png
      File size:
      27.2 KB
      Views:
      151
    • nk4.png
      nk4.png
      File size:
      28.8 KB
      Views:
      192
    Peter Simpson likes this.
  11. Mashiane

    Mashiane Expert Licensed User

    I just went to the file manager of my device, located the NoteKeeper folder that has been created by the prototype tool and opened the index.html file. My prototype started.
     

    Attached Files:

  12. Mashiane

    Mashiane Expert Licensed User

    I added a few notes with by clicking the "New" button and these were kept. Whilst this app does not work properly inside the prototype tool (no additions, no saving), it seems to work perfectly as a stand-alone app by itself. Running the app within the prototype tool generates an error which is related to security for all my statements that seem to be accessing localstorage within the java scripts inside the app. I run the app inside a webview with webview extras.
     

    Attached Files:

  13. Mashiane

    Mashiane Expert Licensed User

    Whilst the adding of a note works perfectly, i'm still struggling with the edit note screen when this is running from the device. When running that inside a browser like Chrome, it works when I click the listview and it opens up an edit screen with the selected item, however for the mobile device it has some unknown challenges. I still need to figure out why its not deleting.
     

    Attached Files:

    Peter Simpson likes this.
  14. avacondios

    avacondios Active Member Licensed User

    Good work !!!
     
  15. Peter Simpson

    Peter Simpson Expert Licensed User

    Nice 1...
     
  16. BillNoble

    BillNoble New Member Licensed User

    Nice work !
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice