第一部分：使用 JQM.Show 从您的移动设备创建和运行 CRUD JQuery Mobile 应用
4.40/5 (7投票s)
使用 JQM.Show，只需三个简单步骤即可创建 CRUD 网页应用
引言
本文的目的是演示如何使用 JQM.Show（我自己在学习 JQuery Mobile、JQuery 和 JavaScript 的过程中开发的 Android Play 商店应用程序）创建和运行具有 CRUD 功能的 JQuery Mobile 应用。RAD 工具本身是使用 Android 开发的，但它的作用是生成所有完整的源代码和相关依赖项，以创建我在之前的文章中讨论过的 CRUD 应用程序。这些是
JQuery Mobile 和 PHP Ajax 调用 最后是
仅举几例。 实际上，我在这里写的所有文章都是由 JQM.Show 生成的代码，这些代码是我在学习 JQuery Mobile 如何与各个后端配合时，通过反复试验而构思出来的。你可能想知道我为什么首先要开发一个 RAD 工具。
总之，我开发 Android 应用已经有一段时间了，以后会慢慢分享我的学习心得。我想要一个 RAD 工具，能够在我自己的移动设备上轻松开发原型，而无需启动我的电脑。我意识到我将一遍又一遍地开发数据库应用程序，并且基本上会使用相同的框架和其他框架，为什么不利用我的三星 S3 呢？
由于 JQuery Mobile 设计的学习曲线不那么陡峭（几乎所有开发书籍都讲的是同样的东西），而 JQuery 的学习曲线很陡峭（对我来说，刚开始时以及信息分散在网络各处处理 JQuery Mobile），我开始想证明我的概念是否可行。一个月后，我的原型 RAD 工具的第一个版本工作正常，带有几个 JQM 控件。
我希望使用 RAD 工具就像 1-2-3 一样简单，这样只需三个简单步骤，就可以在短时间内创建并运行一个 CRUD 原型应用程序。
RAD 工具是如何工作的？
RAD 工具基本上做着差不多同样的事情。 您将控件拖放到其中，它们会渲染控件并为您创建绑定，并为您生成源代码。基本上，在几乎所有 RAD 工具中，您最终都不需要编写一行代码，就能获得一个强大的应用程序，您可以展示、安装给客户，而无需进行太多修改。但是，对于非常独特的应用程序，您需要添加一些自定义，例如……根据客户的市场营销策略对您的应用程序进行颜色编码，以及添加客户徽标以个性化。
使用 JQM.Show，您不需要拖放任何东西，并且由于其通用性，该 RAD 工具目前仅限于用于记录、检索、查看和导出数据的 CRUD 应用程序到 Excel。
JQM.Show 如何工作？
我说过“就像 1-2-3 一样简单”吗？是的，我说过。好吧，使用 JQM，您需要提供应用程序名称、模型名称、字段名称，然后一切都会为您创建，从用户界面到源代码。就是这么简单。只需三个简单步骤，您就可以在 Android 设备上直接运行一个移动 JQM 应用，无论您的后端是LocalStorage、JSON文件还是WebSQL。由于我目前正在学习如何将 IndexedDB 与 JQM 集成，我也会在 JQM.Show 中添加功能，以创建您也可以为该后端创建的 CRUD 应用程序。
然后，您可以自定义输出的源代码，使其符合您的要求，但由于该工具为您生成所有代码，因此使用 JQM.Show 开发基本的 CRUD 应用程序将比传统方法花费更少的时间。虽然有框架和方法论可以完成我在这里所做的，但我个人没有找到任何可以在设备上安装并执行类似操作的东西。我可能是错的，也欢迎纠正。
谁会使用 JQM.Show？
如果您是软件开发者并对网页开发感兴趣，您可以使用 JQM.Show。如果您没有任何编程经验，您也可以使用 JQM.Show。如果您赶时间想更快地制作您的下一个梦想 CRUD 应用，您也可以使用 JQM.Show。它的目的是帮助那些知道自己想要的系统，但又没有时间、经验或耐心来等待项目在 1-3 个月后开发完成的人。当然，这种方法有利有弊，因此在您开始使用 JQM.Show 并创建您的 CRUD 应用之前，仔细规划至关重要。您的需求收集对于确保您的应用程序的成功至关重要。
一些不重要的假设。您对移动应用程序开发和/或 JQuery Mobile、JQuery、JavaScript、LocalStorage、PHP、WebSQL 感兴趣，或者简单地说，您只想创建自己的移动应用程序来管理您的杂货清单。
我们将这样做...
1. 使用 JQM.Show 创建一个 CRUD JQuery Mobile 应用
2. 调整我们的应用程序以满足我们的需求
3. 构建包含依赖项的应用程序
4. 从我们的移动设备运行应用程序
5. 将应用程序导出到桌面，安装在我们的 Web 服务器上/与 PhoneGap 编译成混合应用，并且
我们不会写一行代码！！！
背景
JQM.Show 的核心在于数据。这就是为什么正确定义您想要存储的数据非常重要的原因。虽然您可以随时通过添加新列（即字段）来更改数据，但 JQM.Show 目前仅支持 LocalStorage 和 JSON 结构。用于向 WebSQL 和 IndexedDB 的数据库添加附加列的功能将在稍后添加。
由于 JQM.Show 生成通用 CRUD 应用，您的应用将具有相同的外观和感觉，然后您可以根据需要进行自定义。所以，您只会在所有内容都由 JQM.Show 生成之后，才编写代码并自定义您的应用程序。上面提到的先前文章有很多关于创建 CRUD 应用程序的内容，因此请耐心等待，我将在这里重点介绍代码和输出，而不是真正讨论它。但我建议，无论您决定创建什么应用程序，请根据您的预期标准审查源代码，并且请指出需要改进的地方以及我需要更改的地方。正如我所说，这是一个通过反复试验开发的工具。但我打算为其他移动框架做类似的事情。
为此，我们将创建一个简单的医院管理系统来存储患者记录。我们将只存储患者的详细信息，例如：姓名、手机号码、电子邮件地址、 疾病、诊断日期、主治医生、病情、医院、病房号。我们尽量保持简单。我们还将记录医生和医院的信息。每位医生将拥有姓名、电子邮件地址、手机号码，每家医院将拥有名称、地址、城市等。
正如您所注意到的，医生与患者之间以及医院之间存在关联。我们将使用下拉列表进行这些选择。然后，我们将使用 d3 图表框架绘制这三者之间的树状关系。我们也将能够将所有这些信息导出到 Excel。现在是下午 5 点，我将花一些时间用 JQM.Show 创建这个应用程序，并在下面发布一些截图，然后我们稍微看看代码，然后您就可以开始您自己的想法或类似的想法了。如果您没有想法，可以看看这个网站。我也曾陷入困境，只是在网上搜索了一个想法，并在那里找到了一些数据库应用的想法。
总之，我们希望我们的 HMS 移动应用程序具有安全功能，以便使用它的人员必须经过身份验证，他们需要登录和注册。在此示例中，我们将使用 LocalStorage 作为后端。我在这里也附上了 JSON 和 WebSQL 的示例。
使用代码
当用户启动 HMS 时，他们会看到一个注册和登录页面，如图 1 所示。
图 1：注册/登录
登录：HTML 定义 - 此处定义的源代码是 JQM.Show 根据您设置的参数自动创建的。
<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 工具代码：作为示例，我只包含了一个脚本的一部分，该脚本定义了一个 JQM 输入小部件，如 Jquery Mobile 中定义的。例如，有一个 datatheme 属性、placeholder、name、id 等。因此，对于 RAD 工具中为特定模型定义的所有字段，都会读取这些属性并渲染每个控件代码。这里的代码是clsHTML5Input类的一部分，该类是我定义的用于创建输入控件的。
图 1.1：输入控件的 RAD 工具源代码示例。
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("aria-required", "true")
AddAttribute("title", PlaceHolder)
' for mozillar
'AddAttribute("x-moz-errormessage", 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)
' define options
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)
' define options
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
我定义的类到 HTML 控件的输出。
<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>
您可以看到上面代码中与 HTML 文件中定义的<input 控件>的相关性。很棒，不是吗？别担心，生成控件以及控件和后端之间链接的代码已经为您准备好了，因为我已经完成了，正如我所说，您不会写任何一行代码。在 RAD 工具中，定义控件很容易，如下图所示。让我们看看医生全名的定义。
图 1.2 - 医生全名 JQM.Show 定义
从上面的 JQM.Show 向导屏幕，我们可以看到我们如何定义了医生的 FullName 字段。让我们注意一下。
1. 字段名（在数据库后端中定义）是 Full Name，我们也可以称之为 FullName。显示名称是标签上显示的标题。字段类型是 Text，因为我们要存储文本值，所有 JQuery Mobile 输入小部件都可以创建。父选项卡用于带有选项卡的屏幕，您可以查看我创建的用于此类屏幕的家谱应用程序。
2. 由于全名是唯一的，它将是表的主键。JQM.Show 还没有实现自动递增字段，并且因为它是一个主键，默认情况下它会出现在 listview 中。如果您想将全名显示在 ListView 的 Description、Count Bubble、Side Content 中，您也可以选中这些选项，但建议只选择 1 个选项。
3. Horizontal 适用于选项按钮，例如当性别字段类型为 Options 时。Report 复选框表示该字段应出现在报告中，即导出到 Excel 的报告。如果此字段是关系，例如，它来自另一个表，请选中它。例如，当我们定义患者时，我们将在患者模型中创建一个医生字段，并将患者医生标记为关系的一部分。当字段是关系时，需要正确定义它们，以便 JQM.Show 知道从哪里获取数据。
4. Mini 会打开和关闭 data-mini 属性，inline 会打开和关闭 data-inline。如果您不想显示标签，可以选择 No Label，最后。
5. In Field Contain 指示一个控件是否应该托管在一个带有 fiedcontain data-role 的 div 中，在这种情况下是，如上面的 HTML 代码所示。
JQM.Show 读取您提供的所有这些设置，并生成相应的用户界面以及处理您应用程序所有部分的 JavaScript 源代码。
作为示例，这是 RAD 工具中用于生成页面页脚的取消按钮的源代码定义。
Private Sub OnAddPageBackClick() As String
' the back button is clicked on the add record page
' go to the listing and refresh the list
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
这段代码基本上做了以下事情：当单击添加<record>的后退按钮时，查找我们来自哪个页面，如果是来自登录页面，则跳转到那里。这段代码是 RAD 工具生成的整体 app.js JavaScript 的一部分。JQM.Show RAD 工具中构建的此源代码会生成以下代码。
$('#pgAddDoctorBack').on('click', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
//which page are we coming from, if from sign in go back to it
var pgFrom = $('#pgAddDoctor').data('from');
switch (pgFrom) {
case "pgSignIn":
$.mobile.changePage('#pgSignIn', {transition: pgtransition});
break;
default:
// go back to the records listing screen
$.mobile.changePage('#pgDoctor', {transition: pgtransition});
}
});
图 1.3：注册 - 点击注册屏幕会打开注册屏幕供用户使用该应用程序进行注册。
图 2：医生列表 - 列出了应用程序中捕获的所有医生。选择一位医生会打开他的/她的详细信息进行更新。
图 2.1 模型 ListView 属性
虽然 listview 的大多数属性都在模型字段中设置，但通过设置选项可以轻松指定 listview 的外观。如果我们想让我们的模型具有分割视图，我们选中 Split View。ListView 选项很清楚，并且会创建如上图所示的 listview。因此，它会渲染图 6 中代码的 HTML 定义。
我们希望在每个 listview 项目的 Description 部分显示医生的电子邮件地址，并在 SideContent 中显示手机号码。JQM.Show 为此生成的代码如下，包含在 app.js 中。
//display records in listview during runtime.
app.displayDoctor = function (DoctorObj) {
// create an empty string to contain html
var html = '';
// make sure your iterators are properly scoped
var n;
// loop over records and create a new list item for each
//append the html to store the listitems.
for (n in DoctorObj) {
//get the record details
var DoctorRec = DoctorObj[n];
// clean the primary key
var pkey = DoctorRec.FullName;
pkey = pkey.split('-').join(' ');
DoctorRec.FullName = pkey;
//define a new line from what we have defined
var nItem = DoctorLi;
nItem = nItem.replace(/Z2/g,n);
//update the title to display, this might be multi fields
var nTitle = '';
//assign cleaned title
nTitle = n.split('-').join(' ');
//replace the title;
nItem = nItem.replace(/Z1/g,nTitle);
//there is a description, update the list item
var nDescription = '';
nDescription += DoctorRec.EmailAddress;
//replace the description;
nItem = nItem.replace(/DESCRIPTION/g,nDescription);
//there is side content, update the list item
var nSideContent = '';
nSideContent += DoctorRec.MobilePhone;
//replace the description;
nItem = nItem.replace(/SIDECONTENT/g,nSideContent);
html += nItem;
}
//update the listview with the newly defined html structure.
$('#pgDoctorList').html(DoctorHdr + html).listview('refresh');
};
然后，这会生成此 listview。
因此，为应用程序生成的 JavaScript 取决于 JQM.Show 中设置的属性。要显示电子邮件，我们选中 Description 属性，要显示手机号码，我们选中 SideContent，如下图所示。
医生手机号码 JQM.Show 定义
医生 - 电子邮件地址 JQM.Show 定义
图 3：添加医生 - 点击医生列表中的“新建”会打开一个屏幕，用于将医生添加到应用程序。
图 4：更新医生
正如您在上面的医生列表中看到的，listview 中只列出了医生的姓名。我还会向您展示如何只选中字段定义中的一些选项，以便在 listview 中显示其他医生属性。选择列表中的医生后，将显示此屏幕。一旦用户更新了医生详细信息，他/她就会选择保存，后端将更新。
更新医生 HTML 定义
<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>
图 5：删除医生 - 您从列表中选择一位医生，会打开编辑屏幕，然后选择删除。会出现一个提示，询问您是否要删除该医生。如果您想删除该医生，请单击“是”。
JavaScript：删除医生
// delete button on Edit Page
$('#pgEditDoctorDelete').on('click', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
//read the record key from form control
var FullName = $('#pgEditDoctorFullName').val().trim();
//show a confirm message box
$('#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'});
});
图 6：医生报告 - 您可以通过医生列表访问医生报告。您选择菜单，幻灯片面板从左侧出现。单击报告，图 7 出现。
HTML 定义：医生列表
<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>
图 7：医生报告 - 通过单击“导出到 Excel 报告”可以导出此报告。
总结：我在上面展示了一些截图，以及 RAD 工具中一些生成控件的代码片段和屏幕背后的 HTML 定义。您会注意到，这些基本 CRUD 网页应用程序的源代码基本上是相同的，只是后端如何读取和写入有所不同。因此，在您创建的所有网页应用程序中，主要决定因素将是数据，即您将要设计的系统。这就是为什么我一直强调在开始创建之前要清楚地定义您的应用程序。
关注点
使用 RAD 工具创建 CRUD 网页应用程序虽然很容易，但最终，人们需要非常确定他们需要存储的数据以及它最终会是什么样子。在创建这个 JQuery Mobile RAD 工具时，我不得不学习和研究 JQuery Mobile 以及这些各种后端如何工作，以实现我想要达到的最终目标。任何想要开发 RAD 工具的人都应该清楚地定义它的功能和工作方式。JQM.Show 目前在 Android 上运行，并正在开发适用于 iOS 平台的版本。
我喜欢在其上工作，并增加它的潜力，因为它使我能够轻松开发任何传递给它的 CRUD 应用。
在接下来的文章中，我将更深入地探讨 JQM.Show 中的 HMS 应用程序，因为这只是对 RAD 应用创建及其功能主题的介绍。我本可以使用“开发”这个词，但由于您实际上不编写任何代码，所以我选择了“创建”这个词。以下是完成本文的计划文章。
第二部分：使用 JQM.Show 从您的移动设备创建和运行 CRUD JQuery Mobile 应用（医院）
第三部分：使用 JQM.Show 从您的移动设备创建和运行 CRUD JQuery Mobile 应用（患者）
附注：通过更改 JQM.Show 工具中项目的后端属性，我已经能够为 JSON 版本和 WebSQL 版本创建两个 HMS 应用程序。希望您喜欢。
我们的 JQM.Show 模型定义基本上很简单，上面的图 2.1 是第二个屏幕。
您可以看到，这里只为模型指定了少量详细信息，因为模型是我们称之为 SQL 或 Access 中的表的。它只是一个容器。这里我们定义显示名称、前一页和下一页导航、字段是否应具有 data-mini 属性以及它们是否应包含在字段容器中。
导航栏项目用于指定我们可以拥有的不同标题选项卡。如果您还记得，在我们的家谱应用程序中，我们有个人信息；联系方式；关系；死亡，并且输出显示如下，只需在 JQM.Show 模型定义的内容中指定上述项目即可。由于此模型中的 HMS 不需要任何标题按钮，因此我们暂时将其留空。
要定义应用程序的任何内容，都可以通过应用程序向导提供一个屏幕。以下描述了此应用程序的创建方式。
JQM.Show 三个简单步骤
步骤 1：定义应用程序
在这里，您指定应用程序的名称。如果您希望应用程序具有安全功能，请将“您要启用安全吗？”设置为“是”。这将自动为您创建登录和注册模型。我们的应用程序是 HMS。
步骤 2：指定模型。
我们想存储医生详细信息，每位医生都必须有一些属性。选择“下一步”会带我们到模型屏幕。应用程序将使用默认属性为您设置所有内容。
步骤 3：定义医生属性/字段。
在这里，对于我们创建的模型，我们指定模型中应存在的字段。您以后可以像上面一样自定义这些。
最后：创建应用程序：点击“完成”按钮会创建您的应用程序，并在您的设备浏览器中打开它供您运行应用程序。
在一切完成后，您可以将应用程序导出到您的 Web 服务器、桌面、iPad 以使用 iFileExplorer 运行，甚至可以将其编译成混合应用。要导出您的应用程序并将其编译成混合应用，请参阅本文。作为回顾
导出您的 HTML5 JQuery Mobile 应用
- 使用 USB 将设备连接到计算机。
- 您也可以使用 Moborocco 访问您的文件。
- 从您的文件夹根目录，找到 HMSLocalStorage 或 HMSSQL 或 HMSJSON（取决于您的应用程序名称）并将其拖到您的桌面上。
- 打开文件夹并双击 index.html 文件，用浏览器打开它。
历史
我详细演示了如何使用 JQuery Mobile 创建 CRUD 网页应用程序。正如我们所注意到的，它们基本上做的事情相同，即使用不同的后端创建、更新和删除记录。由此可以发现一种重复的做事模式，因此一个用于一次又一次执行相同操作的 RAD 工具是最终的选择。虽然 RAD 工具只生成基本的 CRUD 网页应用程序，这些应用程序可以制成混合应用程序，但应用程序本身仍需要根据客户的规格进行更多自定义，但对于任何快速开发且数据库定义清晰的项目，天空才是极限。JQM.Show RAD 工具的开发基于这些 CRUD 原则。正如您可能注意到的，到目前为止发布的所有文章都以一种极好的方式相互关联，因为我已尽最大努力演示使用不同后端和使用 D3 图表等其他 JS 框架进行 JQuery Mobile 应用开发的各个方面。