Android Tutorial Creating a Prototype Mobile App Using JQuery Mobile

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.

https://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.

 

[Mashiane]

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

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,0, 100%x, 100%y)
   Activity.AddMenuItem3("Back", "cmdBack", LoadBitmap(File.DirAssets, "back25.png"), True)
   ' process forms
   Select Case Main.Action
   Case "Project1"
     Project1
   End Select
End Sub

 

[Mashiane]

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

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

 

[Mashiane]

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

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

 

[Mashiane]

4. The Add site page

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

 

[Mashiane]

5. The Site listing page

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

 

[Mashiane]

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.

 

[Mashiane]

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 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:

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

 

[Mashiane]

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

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

 

[Mashiane]

The data within the Notekeeper application is stored within LocalStorage of the web using javascript and jquery. The complete web app for the notekeeper example is available here...

https://www.dropbox.com/s/b06rdlf9y1f9y4w/NoteKeeper.rar?dl=0

 

[Mashiane]

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.

 

[Mashiane]

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.

 

[Mashiane]

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.

 

[avacondios]

Good work !!!

 

[Peter Simpson]

Nice 1...

 

[BillNoble]

Nice work !