Introduction
The purpose of this article is to demonstrate how one can create and run a JQuery Mobile App with crud functionality using JQM.Show, an android play store application I have developed whilst learning JQuery Mobile, JQuery and JavaScript. The RAD tool itself is developed using Android but what it does is to generate all the complete source code and related dependencies to create the crud applications that I discussed in my previous articles. These are:
JQuery Mobile and LocalStorage
JQuery Mobile and PHP Ajax Calls and finally
JQuery Mobile and WebSQL
To mention a few. Actually all the articles I have written here have been as a result of code generated by JQM.Show that I personally conceptualized through trial and error in my learning of how JQuery Mobile works with the respective backends. You might be wondering why I developed a RAD tool in the first place.
Anyway, I have been developing Android Apps for a while now and will share what I have learned in due time. I wanted a RAD tool to develop easy prototypes in a mobile environment using my device without having to start up my computer. It dawned on me that I am going to be developing database applications over and over and over again and I will basically be using the same framework and other frameworks as well, why don't I just put my Samsung S3 in use then?
Due to the not so steep learning curve of JQuery Mobile design (all the development books almost deal with the same things) and the steep learning curve of JQuery (for me when I started and due to the information being scattered all over the web in dealing with JQuery Mobile), I started on wanting to prove whether my concept would work. After a month, I had the version 1 of my prototype RAD tool working with a few JQM controls.
I wanted using the RAD tool to be as easy as 1-2-3, so much that in three easy steps, one should have a CRUD prototype app created and running in no time.
How do RAD tools work?
RAD tools basically do almost the same things. You drag and drop controls into them and they render the controls and create the bindings for you and generate the source code for you. Basically, in almost all of them, you end up not writing a single line of code but having a powerful application that you can present, install for your clients without much modification at all. For very bespoke apps however, there are some customizations that you need to add e.g... color coding your app to meet your client marketing strategy and their logos to personalize it.
With JQM.Show, you don't get to drag and drop anything and due to the generic nature of the intention, the RAD tool is currently limited to CRUD apps for recording, retrieving, viewing and exporting your data to excel.
How does JQM.Show work?
Did I say 'to be easy as 1-2-3?', yes I did. Well, with JQM, you provide the tool with an App Name, Model Name(s), Field Name(s) and then everything is created for you, from the user interface to the source code. That easy. In three easy steps, you have a mobile JQM app running directly from your android device whether you want your backend to be LocalStorage, JSON files or WebSQL. As I am currently learning how to integrate IndexedDB with JQM, I will also add functionality within JQM.Show to create CRUD apps that you can also create for that backend.
You can then customize your output source code to be the way you want, but due to the tool generating all the code for you, developing basic crud apps with JQM.Show will take you less time than conventional methods. Whilst there are frameworks and methodologies to perform and achieve what I have done here, I personally have not found anything that one can install on their device to do similar. I however could be wrong and stand to be corrected.
Who would use JQM.Show?
If you develop software and are interested in web development you can use JQM.Show. If you don't have any programming experience you can use JQM.Show. If you are in a hurry to produce your next dream CRUD app quicker then you can also use JQM.Show. The purpose behind it is for people who know the systems they want but don't have either the time, experience, or perhaps patience for a project to be developed 1-3 months down the line. Of course, there are pros and cons to this approach and that is why its very crucial that before you start using and creating you CRUD app with JQM.Show, you plan. Your requirements gathering will be crucial in ensuring the success of your app.
Some silly assumptions. You are interested in Mobile Application Development and or JQuery Mobile, JQuery, JavaScript, LocalStorage, PHP, WebSQL, or lets just make it simple, you just want to create your own mobile application to manage your grocery list.
This is what we will do...
1. Create a CRUD JQuery Mobile App using JQM.Show
2. Tweak our app to meet our requirements
3. Build the App with its dependencies
4. Run the app from our mobile device
5. Export the app to our desktop to install in our web server/compile with phonegap and make it hybrid and
WE WILL NOT WRITE A SINGLE LINE OF CODE!!!
Download HMSLocalStorage.zip
Download HMSSQL.zip
Download JQM.Show for your Android Device
Background
The crux behind JQM.Show is the data. That is why it's important that you define the data that you want to store properly. Whilst you can chop and change the data anytime that you want, by adding new columns (i.e.. fields), only LocalStorage and JSON structures are supported by JQM.Show. Functionality to add additional columns to a database for WebSQL and IndexedDB will be added in due time.
Due to JQM.Show producing generic CRUD apps, your apps will have the same look and feel and then you can customize them the way you want after-wards. So, you only write code and customize your app after everything is generated with JQM.Show. The previous articles mentioned above talk a lot about creating CRUD applications, thus please bear with me, I will highlight the code and output here and not really discuss it. I would however recommend, that whatever app you decide to create, to please review the source code to your expected standards and also please DO indicate areas of improvements and what I need to change. Like I said, this is a tool that was developed through trial and error. I however intend doing similar for other mobile frameworks.
For this, we will create a simple Hospital Management System to store patient records. We will just store patient details, e.g.. full name, mobile phone, email address, disease, date diagnosed, attending doctor, condition, hospital, room number. Let's just keep it simple. Will will also have a record of doctors and also hospitals. Each doctor will have full name, email address, mobile number and each hospital will have name, address, city etc.
As you have noted, there is a relationship between doctors and patients and also hospitals. We will use dropdown lists for those selections. We will then use the d3 charting framework to draw tree relationships between the three. We will be able to export all these information pieces to excel too. The time now is 17 hundred hours, let me take some time and create this app with JQM.Show and post some screen dumps here and we look at the code a little then you work your way up with your own idea or similar. If you don't have an idea, you can check this site out. I too was stuck and just googled for an idea and found a few database apps ideas here.
Site 1
Site 2
Site 3
Anyway, we want our HMS mobile app to have security features that people using it should be authenticated, they will need to sign in and sign up. We will also be using LocalStorage for this Example as a backend. I have also attached the JSON and WebSQL examples herein anyway.
Using the code
When users, start HMS, they are provided with a Sign In and Sign Up page as depicted in Figure 1
Figure 1: Sign Up / Sign Up
Sign In: Html Definition - the source code herein as defined is created automatically by JQM.Show depending on the parameters you set.
<div data-model="User" id="pgSignIn" data-role="page">
<header id="pgSignInHdr" data-role="header" data-position="fixed">
<h1>HMS</h1>
</header>
<div id="pgSignInCnt" data-role="content">
<h3>Welcome</h3><form action="#" method="post" id="pgSignInForm" name="pgSignInForm">
<p>Existing Users</p><div data-role="fieldcontain">
<label for="pgSignInEmail">Email Address<span style='color:red;'>*</span></label>
<input required title="Enter email address here." type="email" name="pgSignInEmail" id="pgSignInEmail" placeholder="Enter email address here." autocomplete="off" data-clear-btn="true"></input>
</div>
<div data-role="fieldcontain">
<label for="pgSignInPassword">Password<span style='color:red;'>*</span></label>
<input required autocomplete="off" title="Enter password here." type="password" name="pgSignInPassword" id="pgSignInPassword" placeholder="Enter password here." data-clear-btn="true"></input>
</div>
<div><button type="submit" id="pgSignInIn" class="ui-btn ui-corner-all ui-shadow ui-btn-b">Sign In</button>
</div>
<p>Don't have an account</p>
<div><button id="pgAddUserUp" class="ui-btn ui-corner-all ui-shadow">Sign Up</button>
</div>
</form>
</div>
RAD Tool Code: As an example I have just included a part of a script make define a JQM input widget as defined in Jquery Mobile, for example, there is a datatheme property, placeholder, name, id to mention a few. Thus for all defined fields within the RAD tool for a particular model, these properties are read and each control code renderd. This code here is part of the clsHTML5Input class that I have defined to create an input control.
Figure 1.1 : RAD Tool Source Code Example for input control.
Public Sub Render() As String
If Visible = "N" Then Return ""
VarValue = Id & "Value"
VarHTML = Id & "Html"
VarText = Id & "Text"
If Name.length = 0 Then Name = Id
Dim sb As StringBuilder
sb.Initialize
iLabel.NoLabel = NoLabel
If Caption.length > 0 Then
iLabel.Caption = Caption
iLabel.ParentId = Id
iLabel.DataTheme = LabelDataTheme
iLabel.Required = Required
If LabelAfter = "N" Then sb.Append(iLabel.Render)
End If
sb.Append("<input ")
If Required = "Y" Then
sb.append(" required ")
AddAttribute("title", PlaceHolder)
End If
AddAttribute("type", InputType)
Select Case InputType
Case EnumInputType.InputType.tel
If Pattern.length = 0 Then AddAttribute("pattern","\d\d\d \d\d\d \d\d\d\d")
End Select
If Name.Length > 0 Then AddAttribute("name", Name)
If Id.length > 0 Then AddAttribute("id", Id)
If DataTheme.Length > 0 Then AddAttribute("data-theme", DataTheme)
If PlaceHolder.length > 0 Then AddAttribute("placeholder",PlaceHolder)
If AutoComplete = "Y" Then
AddAttribute("autocomplete", "on")
Else
AddAttribute("autocomplete", "off")
End If
If DataMini = "Y" Then AddAttribute("data-mini", "true")
If IsDisabled = "Y" Then AddAttribute("disabled","true")
If DataRole.length > 0 Then AddAttribute("data-role", DataRole)
If Minimum.length > 0 Then AddAttribute("min", Minimum)
If MaxiMum.length > 0 Then AddAttribute("max", MaxiMum)
If DataClearButton = "Y" Then AddAttribute("data-clear-btn","true")
If AutoFocus = "Y" Then AddClass("autofocus")
If IsChecked = "Y" Then AddClass("checked")
If Pattern.length > 0 Then AddAttribute("pattern",Pattern)
If MaxLength.Length > 0 Then AddAttribute("maxlength", MaxLength)
If DataPlaceHolder = "Y" Then
AddAttribute("data-placeholder","true")
AddAttribute("value", "null")
End If
If Value.length > 0 Then AddAttribute("value", Value)
Select Case DataRole
Case EnumDataRole.DataRole.datebox
RemoveAttribute("data-clear-btn")
AddAttribute("type", EnumInputType.InputType.text)
Dim optm As Map
Dim opt As String
optm.Initialize
optm.Put("mode", "flipbox")
optm.Put("dateFormat", "%Y-%m-%d")
optm.Put("overrideDateFormat", "%Y-%m-%d")
opt = modMashiane.MapToJSON(optm,True)
sb.Append("data-options='").Append(opt).Append("'")
sb.Append(" ")
Case EnumDataRole.DataRole.timebox
RemoveAttribute("data-clear-btn")
AddAttribute("type", EnumInputType.InputType.text)
AddAttribute("data-role", EnumDataRole.DataRole.datebox)
Dim optm As Map
Dim opt As String
optm.Initialize
optm.Put("mode", "timeflipbox")
opt = modMashiane.MapToJSON(optm,True)
sb.Append("data-options='").Append(opt).Append("'")
sb.Append(" ")
End Select
If (ClassList.Size - 1) >= 0 Then AddAttribute("class", modHTML5.ClassBuilder(ClassList))
sb.Append(modHTML5.MapToProperties(Attributes))
sb.Append("></input>").Append(CRLF)
If LabelAfter = "Y" Then
sb.Append(iLabel.Render)
End If
If InFieldContain = "Y" Then
Dim fc As clsHTML5FieldContain
fc.Initialize(IsListItem,sb.ToString)
Return fc.Render
Else
Return sb.tostring
End If
End Sub
The ouput from a class to html control that I have defined.
<div data-role="fieldcontain">
<label for="pgSignInPassword">Password<span style='color:red;'>*</span></label>
<input required autocomplete="off" title="Enter password here." type="password" name="pgSignInPassword" id="pgSignInPassword" placeholder="Enter password here." data-clear-btn="true"></input>
</div>
You can see the correlation in the code above with the <input control as defined in the html file. Nice isnt it? Don't worry, the code to generate the controls and the links between the controls and the back ends has already been done for you as I did that, like I said, you wont write any single line of code here. Within the RAD tool, defining a control is easy as depicted in this screen. Let's look at the definition for the Doctor's Full Name.
Figure 1.2 - Doctor's Full Name JQM.Show Definition
From the above wizard screen of JQM.Show, one can see how we have defined the FullName field for Doctors. Let's note how.
1. The Field Name as defined in the database backend is Full Name, we can also make this FullName. The Display name is the Caption that shows on the label. The Field Type is Text because we want to store text values, all the JQuery Mobile input widgets can be created. Parent Tab is used for screens that have tabs in them, you can see the Family Tree app I created for such screens.
2. Because the Full Name is Unique, it will be the primary key of the table. JQM.Show has no implementation of auto-increment fields yet, and because its a primary key, by default it will appear in the listview. If you want the full name to be displayed in the ListView Description, Count Bubble, Side Content, you can also check these options but only 1 option is recommended.
3. Horizontal works for option buttons for example where you have gender with field type Options. Report checkbox means the field should appear in the report, that is the report to be exported to excel. If this field is a relationship, e.g.. its derived from another table, check that. For example, when we are defining patients, we will create a Doctor field within the patients model and we will mark the Patient Doctor as part of a relationship. when fields are relationships they need to be defined properly for JQM.Show to know where to source the data.
4. Mini sets the data-mini attribute on and off and inline does data-inline. If you want the label not to be shown then you can select No Label and finally.
5. In Field Contain indicates whether a control should be hosted within a div with fiedcontain data-role, in this case yes, as also depicted from the html code above.
This JQM.Show, reads all these settings from you and generates the respective user interface and then javascript source code to handle all parts of your app.
As an example, this is the source code definition within the RAD tool to generate source code for the Cancel button, you see at the footer of the pages.
Private Sub OnAddPageBackClick() As String
Dim sb As StringBuilder
sb.Initialize
sb.Append("// Back click event from Add Page").Append(CRLF)
sb.Append(JQuery.OnClick(AddPageBackID))
sb.Append("//which page are we coming from, if from sign in go back to it").Append(CRLF)
sb.Append("var pgFrom = $('#").Append(AddPage).Append("').data('from');").Append(CRLF)
sb.Append("switch (pgFrom) {").Append(CRLF)
sb.Append("case ").Append(QUOTE).Append("pgSignIn").Append(QUOTE).Append(":").Append(CRLF)
sb.Append(JQuery.ChangePage("pgSignIn"))
sb.Append("break;").Append(CRLF)
sb.Append("default:").Append(CRLF)
sb.Append("// go back to the records listing screen").Append(CRLF)
If SplitView = "Y" Then
sb.Append(JQuery.ChangePage("pgMenu"))
Else
sb.Append(JQuery.ChangePage(ListPage))
End If
sb.Append("}").Append(CRLF)
sb.Append("});")
Return sb.tostring
End Sub
What this code does is basically this, when the back button of the add <record> is clicked, find out which page we are coming from and if we from the sign in page, go to it. This code is part of the overall app.js javascripts that are part of the source generated. This source code built within JQM.Show RAD tool, produces this code below.
$('#pgAddDoctorBack').on('click', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
var pgFrom = $('#pgAddDoctor').data('from');
switch (pgFrom) {
case "pgSignIn":
$.mobile.changePage('#pgSignIn', {transition: pgtransition});
break;
default:
$.mobile.changePage('#pgDoctor', {transition: pgtransition});
}
});
Figure 1.3: Sign Up - Clicking the Sign Up screen opens up the Sign Up screen for users to register using the app.
Figure 2: Doctors Listing - this lists all doctors captured in the app. Selecting a doctor opens up his/her details for update.
Figure 2.1 Model ListView properties
Whilst most properties of the listview are set within the model fields, specifying the look and feel for a listview is done easily through setting options. If we want our model to have a splitview, we check Split View. The Listview options are clear and will create a listview asdepicted above. Thus rendering this html definition of the code as per Figure 6 below.
We want to display the email address of the doctor on the Description part of each listview item and show the mobile phone on the SideContent. The code generated by JQM.Show for that is this below as included in app.js.
app.displayDoctor = function (DoctorObj) {
var html = '';
var n;
for (n in DoctorObj) {
var DoctorRec = DoctorObj[n];
var pkey = DoctorRec.FullName;
pkey = pkey.split('-').join(' ');
DoctorRec.FullName = pkey;
var nItem = DoctorLi;
nItem = nItem.replace(/Z2/g,n);
var nTitle = '';
nTitle = n.split('-').join(' ');
nItem = nItem.replace(/Z1/g,nTitle);
var nDescription = '';
nDescription += DoctorRec.EmailAddress;
nItem = nItem.replace(/DESCRIPTION/g,nDescription);
var nSideContent = '';
nSideContent += DoctorRec.MobilePhone;
nItem = nItem.replace(/SIDECONTENT/g,nSideContent);
html += nItem;
}
$('#pgDoctorList').html(DoctorHdr + html).listview('refresh');
};
And this then results in this listview.
Thus, the javascript generated for the app depends on the properties set within JQM.Show. To show the email, we check the Description property and SideContent for Mobile Phone as depicted below.
Doctor Mobile Phone JQM.Show Definition
Doctor - Email Address JQM.Show Definition
Figure 3: Add Doctor - Clicking new on the doctors listing opens up a screen to add doctors to the application.
Figure 4: Update Doctor
As you see in the Doctors Listing, above, only the Full Name of the Doctors is listed in the listview. I will also show you how to just check some options in the field definitions to have other doctor properties shown in the listview. This screen gets shown once a doctor is selected from the listing. Once a user updates the doctors details, he/she select save and the backend will be updated.
Update Doctor Html Definition
<div data-url="FullName" data-model="Doctor" id="pgEditDoctor" data-role="page">
<div data-position="left" data-display="reveal" data-position-fixed="true" id="pgEditDoctorPnl" data-role="panel">
<ul data-role="listview" id="pgEditDoctorPnlLV">
<li ><a data-transition="slide" href="#pgAddDoctor">New</a></li>
<li ><a data-transition="slide" href="#pgRptDoctor">Report</a></li>
<li ><a data-transition="slide" href="#pgDoctor">Back</a></li>
</ul>
</div>
<header id="pgEditDoctorHdr" data-role="header" data-position="fixed">
<h1>HMS</h1>
<a data-role="button" id="pgEditDoctorMenu" href="#pgEditDoctorPnl" data-icon="bars" class="ui-btn-left">Menu</a>
</header>
<div id="pgEditDoctorCnt" data-role="content">
<h3>Edit Doctor</h3><form action="#" method="post" id="pgEditDoctorForm" name="pgEditDoctorForm">
<div data-role="fieldcontain">
<label for="pgEditDoctorFullName">Full Name<span style='color:red;'>*</span></label>
<input required readonly="readonly" data-clear-btn="true" autofocus="true" title="Enter full name here." type="text" name="pgEditDoctorFullName" id="pgEditDoctorFullName" placeholder="Enter full name here." autocomplete="off"></input>
</div>
<div data-role="fieldcontain">
<label for="pgEditDoctorMobilePhone">Mobile Phone<span style='color:red;'>*</span></label>
<input required title="Enter mobile phone here." type="tel" pattern="\d\d\d \d\d\d \d\d\d\d" name="pgEditDoctorMobilePhone" id="pgEditDoctorMobilePhone" placeholder="Enter mobile phone here." autocomplete="off" data-clear-btn="true"></input>
</div>
<div data-role="fieldcontain">
<label for="pgEditDoctorEmailAddress">Email Address<span style='color:red;'>*</span></label>
<input required title="Enter email address here." type="email" name="pgEditDoctorEmailAddress" id="pgEditDoctorEmailAddress" placeholder="Enter email address here." autocomplete="off" data-clear-btn="true"></input>
</div>
</form>
</div>
<footer id="pgEditDoctorFtr" data-role="footer" data-position="fixed">
<div id="pgEditDoctorFtrNavBar" data-role="navbar">
<ul>
<li><a data-transition="slide" id="pgEditDoctorBack" href="#pgDoctor" data-icon="carat-l">Cancel</a>
</li>
<li><a type="submit" id="pgEditDoctorUpdate" data-icon="action">Update</a>
</li>
<li><a id="pgEditDoctorDelete" data-icon="delete">Delete</a>
</li>
</ul>
</div>
</footer></div>
Figure 5: Delete Doctor - you select a doctor from the listing, the edit screen opens and then you select Delete. A prompt appears to ask if you want to delete the doctor. Click Yes if you want to delete the doctor.
Javascript: Delete Doctor
$('#pgEditDoctorDelete').on('click', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
var FullName = $('#pgEditDoctorFullName').val().trim();
$('#msgboxheader h1').text('Confirm Delete');
$('#msgboxtitle').text(FullName.split('-').join(' '));
$('#msgboxprompt').text('Are you sure that you want to delete this doctor? This action cannot be undone.');
$('#msgboxyes').data('method', 'deleteDoctor');
$('#msgboxno').data('method', 'editDoctor');
$('#msgboxyes').data('id', FullName.split(' ').join('-'));
$('#msgboxno').data('id', FullName.split(' ').join('-'));
$('#msgboxyes').data('topage', 'pgEditDoctor');
$('#msgboxno').data('topage', 'pgEditDoctor');
$.mobile.changePage('#msgbox', {transition: 'pop'});
});
Figure 6: Doctors Report - you access the doctors report via the doctors listing. You select the menu and the slide panel appears from the left. Click Report, Figure 7 appears.
Html Definition: Doctors Listings
<div data-model="Doctor" id="pgDoctor" data-role="page">
<div data-position="left" data-display="reveal" data-position-fixed="true" id="pgDoctorPnl" data-role="panel">
<ul data-role="listview" id="pgDoctorPnlLV">
<li ><a data-transition="slide" href="#pgAddDoctor">New</a></li>
<li ><a data-transition="slide" href="#pgRptDoctor">Report</a></li>
<li ><a data-transition="slide" href="#pgMenu">Back</a></li>
</ul>
</div>
<header id="pgDoctorHdr" data-role="header" data-position="fixed">
<h1>HMS</h1>
<a data-role="button" id="pgDoctorMenu" href="#pgDoctorPnl" data-icon="bars" data-transition="slide" class="ui-btn-left">Menu</a>
<a data-role="button" id="pgDoctorNew" data-icon="plus" data-theme="b" class="ui-btn-right">New</a>
</header>
<div id="pgDoctorCnt" data-role="content">
<h3>Doctors</h3><ul data-role="listview" data-inset="true" id="pgDoctorList" data-filter="true" data-filter-placeholder="Search Doctors">
<li data-role="list-divider">Your Doctors</li>
<li id="noDoctor">You have no doctors</li>
</ul>
</div>
</div>
Figure 7: Doctors Report - This report can be exported to Excel by clicking the Export to Excel Report.
Summary: I have depicted some screen shots above, some pieces of source code within the RAD tool that generate the controls and the html definition behind the screens. As you will note, the source code for these basic CRUD web apps is basically the same with the exception of how the backends are read and written. Thus in all the web apps that you will create, the main determinant will be the data, in terms of the system that you will be designing. That is why I was emphasising that you need to clearly define your app first before you even start creating it.
Points of Interest
Creating CRUD web apps using RAD tools whilst its an easy thing at the end of the day however, one needs to be very sure of the data that they need to store and how it will look at the end. In creating this JQuery Mobile RAD tool, I had to learn and do a lot of research on JQuery Mobile and also how these various backends work in terms of the ultimate aims I want to achieve. Anyone wanting to develop a RAD tool should cleary define what it has to do and how. JQM.Show currently works on Android and development of it to be for IOS platform is under way.
I love working on it and also increasing its potentional because it is making it easy for me to develop any CRUD app I pass to it easily.
In the next articles, I will delve deeper into this HMS application with JQM.Show as this was just an introduction to the topic of RAD app creation and what they do. I would have used the word Develop in my article but due to the fact that you don't actually write any code, I opted for the word Create. These are the planned articles in finalizing this article.
Part 2: Create & Run CRUD JQuery Mobile Apps from your mobile device using JQM.Show (Hospitals)
Part 3: Create & Run CRUD JQuery Mobile Apps from your mobile device using JQM.Show (Patients)
PS: By just changing the Back End property of my project within the JQM.Show tool, I have been able to create two HMS apps for both the JSON version and WebSQL Version. I'm hoping you are enjoying this.
Our JQM.Show Model Definition is basically easy, Figure 2.1 above is the second screen of this one.
As you can see here, just a few details are specified for the model, because a model is what we call a table in SQL or Access. It's just a container. Here we define the Display Name, the Previous and Next pages to navigate to, whether fields should be having a data-mini attribute and whether they should be in a field container.
The Navigation Bar Items is used to specify the different header tabs that we can have. If you recall, in our Family Tree app, we had Personal Information;Contact Details;Relationships;Death and this was depicted like this as output, by just specifying the above items within that content of the JQM.Show model definition. As we don't need any header buttons in this model for HMS, we will leave this blank for now.
To define anything about the application, a screen is also made available through the App Wizard. The following depicts how this app has been created.
JQM.Show Three Easy Steps
Step 1: Define the application
Here, you specify the name of the application. If you want the app to have security features, turn "Do you want to Enable Security" to Yes. This will automatically create the Sign In and Sign Up models for you. Ours is HMS.
Step 2: Specifying the Model.
We want to store Doctor details and each Doctor must have some attributes. Selecting Next takes us to the model screen. The app will use default properties to set everything up for you.
Step 3: Defining the Doctor attributes / fields.
Here for the model we have created, we specify the fields that should exist in the model. You can later customize these just like we have specified above.
Finally: Create the app: Clicking Finish button creates your app and opens it in your device browser for you to run the app.
After all is said and done, you can export your app to your webserver, desktop, iPad to run with iFileExplorer or even compile it to a hybrid. To export your app and compile this into a hybrid app, see this article. As a refresh
Exporting your HTML5 JQuery Mobile App
- Connect your device to with USB to your computer.
- You can use Moborocco to access your files too.
- From the root of your folders, locate HMSLocalStorage or HMSSQL or HMSJSON depending on the name of your application and drop this on your desktop.
- Open the folder and double click the index.html file to open it with your browser.
History
I have demonstrated in detail how to create CRUD web apps using JQuery Mobile. As we have noted, these basically do the same thing, create, update and delete records using different backends. From that one can detect a repetitive pattern of doing things and thus a RAD tool to do the same thing over and over again is the ultimate option. Whilst the RAD tool only generates basic CRUD web apps which can be made into hybrid apps, the apps themselves still need more customization as per customer specifications, but for any fast paced development with clear database definitions, the sky is the limit here. The development of the JQM.Show RAD tool was based on these CRUD principles. As you might have noted, all the articles posted so far relate to each other in a great way as I have done my best to demonstrate different aspects of JQuery Mobile app development using different backends and also using other js framworkds like D3 charting.
