AppML 原型
在本章中，我们将为 web 应用程序构建一个原型。
创建一个 HTML 原型
首先，使用你最喜欢的 CSS 创建一个像样的 HTML 原型。
在本例中，我们使用了 W3.CSS:
实例
<!DOCTYPE html><html><title>Customers</title><link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css"><body><div class="w3-container"><h2>Customers</h2><table class="w3-table-all"><tr><th>Customer</th><th>City</th><th>Country</th></tr><tr><td>{{CustomerName}}</td><td>{{City}}</td><td>{{Country}}</td></tr></table></div></body></html>
{{ … }} 是 AppML 数据的占位符。添加 AppML
创建 HTML 原型后，可以添加 AppML:
实例
<!DOCTYPE html><html><title>Customers</title><link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css"><script src="https://cankaoshouce.com/js/appml/appml.js"></script><script src="/js/appml/appml_sql.js"></script><body><div class="w3-container" appml-data="/example/appml/customers.js"><h2>Customers</h2><table class="w3-table-all"><tr><th>Customer</th><th>City</th><th>Country</th></tr><tr appml-repeat="records"><td>{{CustomerName}}</td><td>{{City}}</td><td>{{Country}}</td></tr></table></div></body></html>
添加 AppML:
<script src="https://www.w3schools.com/appml/2.0.3/appml.js">
添加一个本地 WebSQL 数据库:
<script src="https://www.w3schools.com/appml/2.0.3/appml_sql.js">
定义一个数据源:
appml-data="customers.js"
要为 records 中的每一条数据定义重复的 HTML 元素:
appml_repeat="records"
为了简单起见，在连接到数据库之前，从客户等本地数据（如 customers.js）开始。
创建一个 AppML 模型
为了能够使用数据库，您需要一个 AppML 数据库模型:
proto_customers.js
{"rowsperpage" : 10,"database" : {"connection" : "localmysql","sql" : "Select * from Customers","orderby" : "CustomerName",}
如果没有本地数据库，可以使用 AppML 模型创建 Web SQL 数据库。
要创建包含单个记录的表，请使用如下模型：proto_customers_single.js。
创建本地数据库在 IE 或 Firefox 中不起作用，使用 Chrome 或 Safari。
在应用程序中使用该模型。是否将数据源更改为 local?model=proto_customers_single：
实例
<!DOCTYPE html><html><title>Customers</title><link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css"><script src="https://cankaoshouce.com/js/appml/appml.js"></script><script src="/js/appml/appml_sql.js"></script><body><div class="w3-container" appml-data="local?model=/example/appml/proto_customers_single"><h2>Customers</h2><table class="w3-table-all"><tr><th>Customer</th><th>City</th><th>Country</th></tr><tr appml-repeat="records"><td>{{CustomerName}}</td><td>{{City}}</td><td>{{Country}}</td></tr></table></div></body></html>
创建包含多条记录的本地数据库
要创建包含多条记录的表，请使用如下模型: proto_customers_all.js。
将数据源改为 local?model=proto_customers_all
实例
<!DOCTYPE html><html><title>Customers</title><link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css"><script src="https://cankaoshouce.com/js/appml/appml.js"></script><script src="/js/appml/appml_sql.js"></script><body><div class="w3-container" appml-data="local?model=/example/appml/proto_customers_all"><h2>Customers</h2><table class="w3-table-all"><tr><th>Customer</th><th>City</th><th>Country</th></tr><tr appml-repeat="records"><td>{{CustomerName}}</td><td>{{City}}</td><td>{{Country}}</td></tr></table></div></body></html>
添加导航模板
假设您希望所有应用程序都需要有一个通用的导航工具栏:
创建一个这样的 HTML 模板:
inc_listcommands.html
<div class="w3-bar w3-border w3-section"><button class="w3-button" id='appmlbtn_first'>❮❮</button><button class="w3-button" id='appmlbtn_previous'>❮</button><button class="w3-button w3-hover-none" id='appmlbtn_text'></button><button class="w3-button" id='appmlbtn_next'>❯</button><button class="w3-button" id='appmlbtn_last'>❯❯</button><button class="w3-btn ws-green" id='appmlbtn_query'>Filter</button></div><div id="appmlmessage"></div>
将模板保存在一个文件中，使用合适的名称，如 "inc_listcommands.html"。
在原型中包含带有属性 appml-include-html 的模板 :
实例
<!DOCTYPE html><html><title>Customers</title><link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css"><script src="https://cankaoshouce.com/js/appml/appml.js"></script><script src="/js/appml/appml_sql.js"></script><body><div class="w3-container" appml-data="local?model=/example/appml/proto_customers_all"><h2>Customers</h2><div appml-include-html="/example/appml/inc_listcommands.html"></div><table class="w3-table-all"><tr><th>Customer</th><th>City</th><th>Country</th></tr><tr appml-repeat="records"><td>{{CustomerName}}</td><td>{{City}}</td><td>{{Country}}</td></tr></table></div></body></html>