AppML チュートリアル
/ AppML 案例模板
AppML 案例模板
此案例研究演示了如何構(gòu)建一個(gè)完整的 <AppML> 互聯(lián)網(wǎng)應(yīng)用程序，具有針對(duì)數(shù)據(jù)庫(kù)中的若干表進(jìn)行信息列舉、編輯和搜索的功能。
添加 HTML 模板
在本章中，我們將演示如何向 HTML 頁(yè)面添加 HTML 模板。
列出客戶
實(shí)例
HTML - View
<h1>Customers</h1>
<div id="List01"></div><br>
<table id="Template01" class="appmltable" style="display:none">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr id="appml_row">
<td>#CustomerName#</td>
<td>#City#</td>
<td>#Country#</td>
</tr>
</table>
<script src="appml.js"></script>
<script>
var customers
customers=new AppML("appml.php","Models/Customers");
customers.run("List01","Template01");
</script>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
列出客戶和客戶表單
通過巧妙地使用模板，可以很容易添加 <AppML> 列表對(duì)象和 <AppML> 表單之間的鏈接：
實(shí)例
HTML - View
<h1>Customers</h1>
<div id="Form01"></div><br>
<div id="List01"></div><br>
<table id="Template01" class="appmltable" style="width:100%;display:none">
<tr>
<th></th>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr id="appml_row">
<td style="cursor:pointer" onclick="openForm('#CustomerID#')">
<img src="../style/images/appmlFolder.png"></td>
<td>#CustomerName#</td>
<td>#City#</td>
<td>#Country#</td>
</tr>
</table>
<script src="appml.js"></script>
<script>
var customers,customerForm;
customers=new AppML("appml.php","Models/Customers");
customers.run("List01","Template01");
function openForm(id)
{
customerForm=new AppML("appml.php","Models/Customers");
customerForm.displayType="form";
customerForm.run("Form01","",id);
}
</script>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
列出客戶和客戶訂單
通過巧妙地使用模板，可以很容易添加 <AppML> 列表對(duì)象和所鏈接的列表之間的鏈接：
實(shí)例
HTML - View
<h1>Customers</h1>
<div id="List01"></div><br>
<div id="Orders01"></div><br>
<table id="Template01" class="appmltable" style="width:100%;display:none">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
<th></th>
</tr>
<tr id="appml_row">
<td>#CustomerName#</td>
<td>#City#</td>
<td>#Country#</td>
<td><a href='' onclick='openOrders("#CustomerID#");return false;'>Orders</a></td>
</tr>
</table>
<table id="Template02" class="appmltable" style="width:100%;display:none">
<tr>
<th>Customer</th>
<th>Date</th>
<th>Salesperson</th>
<th>Shipper</th>
</tr>
<tr id="appml_row">
<td>#CustomerName#</td>
<td>#OrderDate#</td>
<td>#Salesperson#</td>
<td>#ShipperName#</td>
</tr>
</table>
<script src="appml.js"></script>
<script>
var customers,orders;
customers=new AppML("appml.php","Models/Customers");
customers.run("List01","Template01");
function openOrders(id)
{
orders=new AppML("appml.php","Models/Orders");
orders.setQuery("orders.customerid",id);
orders.commands=false;
orders.run("Orders01","Template02");
}
</script>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
現(xiàn)在把所有的合并在一起
最后，通過少量代碼復(fù)制，我們就可以完成項(xiàng)目。
實(shí)例
客戶列表、表單和訂單
<h1>Customers</h1>
<div id="List01">
<table id="appml_list" class="appmllist">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
<th></th>
</tr>
<tr id="appml_row">
<td>#CustomerName#</td>
<td>#City#</td>
<td>#Country#</td>
<td><a href='' onclick='openOrders("#CustomerID#");return false;'>Orders</a></td>
</tr>
</table>
</div>
<div id="List02"></div>
<script src="appml.js"></script>
<script>
var Customers,Orders
Customers=new AppML("appml.php","Models/Customers");
Customers.run("List01");
function openOrders(id)
{
var Orders=new AppML("appml.php","Models/Orders");
Orders.setQuery("orders.customerid",id);
Orders.commands=false;
Orders.run("List02");
}
</script>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
在接下來的章節(jié)中，您可以看到更多帶有完整源代碼的應(yīng)用程序。