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.
 

Attachments

  • login.png
    login.png
    74.6 KB · Views: 788
  • add site.png
    add site.png
    74.4 KB · Views: 664
  • register.png
    register.png
    77.3 KB · Views: 656
  • sites.png
    sites.png
    73.4 KB · Views: 657
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime 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

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

Mashiane

Expert
Licensed User
Longtime 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.

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

Mashiane

Expert
Licensed User
Longtime User
3. The Register screen code behind to create the form.

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

Mashiane

Expert
Licensed User
Longtime User
4. The Add site page

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

Mashiane

Expert
Licensed User
Longtime User
5. The Site listing page

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

Mashiane

Expert
Licensed User
Longtime 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.
 

Attachments

  • project1.txt
    3.8 KB · Views: 464
Mashiane

Mashiane

Expert
Licensed User
Longtime 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.

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

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

Attachments

  • MoboRobo20150123002244.png
    MoboRobo20150123002244.png
    76.8 KB · Views: 501
  • MoboRobo20150123002305.png
    MoboRobo20150123002305.png
    83.9 KB · Views: 494
Mashiane

Mashiane

Expert
Licensed User
Longtime 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

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

Mashiane

Expert
Licensed User
Longtime User

Attachments

  • nk1.png
    nk1.png
    34.9 KB · Views: 481
  • nk2.png
    nk2.png
    26.3 KB · Views: 401
  • nk3.png
    nk3.png
    27.2 KB · Views: 433
  • nk4.png
    nk4.png
    28.8 KB · Views: 477
Mashiane

Mashiane

Expert
Licensed User
Longtime 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.
 

Attachments

  • notekeeper notes.png
    notekeeper notes.png
    78.3 KB · Views: 408
Mashiane

Mashiane

Expert
Licensed User
Longtime 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.
 

Attachments

  • add a new note.png
    add a new note.png
    78.1 KB · Views: 367
  • edit a note.png
    edit a note.png
    86.6 KB · Views: 412
You must log in or register to reply here.

Similar Threads

Star-Dust
  • Article
B4J Library [B4X] xHttpServer (Http Server + jQuery)
2 3 4
Replies
69
Views
19K
Star-Dust
Star-Dust
Mashiane
  • Article
Share My Creation JQM.Show 7
Replies
15
Views
5K
Mashiane
Mashiane
Theera
Wish new feature alike jquery mobile
Replies
3
Views
1K
Mashiane
Mashiane
A
  • Question
webview and jquery vs javascript clock
Replies
3
Views
5K
warwound
warwound
A
  • Question
B4A or Java & Eclipse...? Also, JQuery Mobile Question
Replies
9
Views
3K
thedesolatesoul
thedesolatesoul
Top