AppML 原型
在本章中，我們將為 Web 應用程式構建一個原型。
建立 HTML 原型
首先，使用您喜歡的 CSS 建立一個不錯的 **HTML 原型**。
我們在本示例中使用了 W3.CSS
示例
<!DOCTYPE html>
<html lang="en-US">
<title>客戶</title>
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<body>
<div class="w3-container">
<h1>客戶</h1>
<table class="w3-table-all">
<tr>
<th>客戶</th>
<th>城市</th>
<th>國家</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>客戶</title>
<link rel="stylesheet" href="https://w3schools.tw/w3css/4/w3.css">
<script src="https://w3schools.tw/appml/2.0.3/appml.js"></script>
<script src="https://w3schools.tw/appml/2.0.3/appml_sql.js"></script>
<body>
<div class="w3-container" appml-data="customers.js">
<h1>客戶</h1>
<table class="w3-table-all">
<tr>
<th>客戶</th>
<th>城市</th>
<th>國家</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
自己試試 »
新增 AppML
<script src="https://w3schools.tw/appml/2.0.3/appml.js">
新增本地 WebSQL 資料庫
<script src="https://w3schools.tw/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**
示例
<div class="w3-container" appml-data="local?model=proto_customers_single">
<h1>客戶</h1>
<table class="w3-table-all">
<tr>
<th>客戶</th>
<th>城市</th>
<th>國家</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
自己試試 »
建立帶有多個記錄的本地資料庫
要建立包含多個記錄的表，請使用類似這樣的模型：**proto_customers_all.js**。
將資料來源更改為 **local?model=proto_customers_all**
示例
<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>客戶</h1>
<table class="w3-table-all">
<tr>
<th>客戶</th>
<th>城市</th>
<th>國家</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
自己試試 »
新增導航模板
假設您希望所有應用程式都有一個通用的導航工具欄
為此建立一個 HTML 模板
inc_listcommands.htm
<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.htm"）的檔案中。
使用屬性 **appml-include-html** 將模板包含到您的原型中
示例
<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>客戶</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<table class="w3-table-all">
<tr>
<th>客戶</th>
<th>城市</th>
<th>國家</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
自己試試 »
