在本章中，我們將建立一個Web應用程序的原型。
創建HTML原型
首先，創建一個體面的HTML原型 ，用你喜歡的CSS。
我們在這個例子中使用的引導：
例
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<body>
<div class="container">
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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
你已經創建了一個HTML原型後，您可以添加AppML：
例
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3ii.com/appml/2.0.3/appml.js"></script>
<script src="http://www.w3ii.com/appml/2.0.3/appml_sql.js"></script>
<body>
<div class="container" appml-data="customers.js" >
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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 =“http://www.w3ii.com/appml/2.0.3/appml.js”>
添加本地的WebSQL數據庫：
<SCRIPT SRC =“http://www.w3ii.com/appml/2.0.3/appml_sql.js”>
定義數據源：
appml數據=“customers.js”
定義HTML元素被重複記錄在每一個記錄：
appml_repeat =“記載”
為簡單起見，與像本地數據開始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。
使用該模型在應用程序中。 更改數據源以本地模式= proto_customers_single？
例
<div appml-data=" local?model=proto_customers_single ">
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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> 試一試» 創建多個記錄本地數據庫
要創建具有多個記錄的表，使用這樣的模式： proto_customers_all.js 。
數據源切換到本地？模型= proto_customers_all
例
<div appml-data=" local?model=proto_customers_all ">
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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> 試一試» 添加導航模板
假設你想所有的應用程序有一個共同的導航工具欄：
為它創建一個HTML模板：
inc_listcommands.htm
<div class="btn-group" role="toolbar" style="margin-bottom:10px;">
<button id='appmlbtn_first' type="button"
class="btn btn-default">
<span class="glyphicon
glyphicon-fast-backward"></span></button>
<button id='appmlbtn_previous'
type="button" class="btn btn-default">
<span class="glyphicon
glyphicon-backward"></span></button>
<button id='appmlbtn_text'
type="button" class="btn btn-default disabled"></button>
<button
id='appmlbtn_next' type="button" class="btn btn-default">
<span
class="glyphicon glyphicon-forward"></span></button>
<button id='appmlbtn_last' type="button" class="btn btn-default">
<span class="glyphicon glyphicon-fast-forward"></span></button>
<button id='appmlbtn_query' type="button"
class="btn btn-primary">
<span class="glyphicon
glyphicon-search"></span> Filter</button>
</div>
<div
id="appmlmessage"></div>
保存在文件模板中包含一個合適的名字"inc_listcommands.htm"
包括在你的原型屬性模板appml，包括HTML的 ：
例
<div appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<div
appml-include-html="inc_listcommands.htm" ></div>
<table
class="table table-striped table-bordered">
<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> 試一試»