AppML 案例原型
2018-09-25 11:51 更新
<AppML> 案例研究 - 原型
此案例研究演示了如何構(gòu)建一個完整的 <AppML> 互聯(lián)網(wǎng)應(yīng)用程序，具有針對數(shù)據(jù)庫中的若干表進行信息列舉、編輯和搜索的功能。
原型
在本章中，我們將為數(shù)據(jù)庫中的每個表建立一個原型模型。
原型是非常便于使用的開發(fā)應(yīng)用程序的起點。
原型模型
首先，為原型創(chuàng)建一個文件夾。該文件夾命名為 Prototypes。
然后，為數(shù)據(jù)庫中的每個表創(chuàng)建一個原型模型。
使用 SELECT * from 每個表，并保存模型為 XML 文件：
模型：Proto_Customers.xml
<appml>
<datasource>
<database>
<connection>Demo</connection>
<sql>SELECT * FROM Customers</sql>
</database>
</datasource>
</appml>
<datasource>
<database>
<connection>Demo</connection>
<sql>SELECT * FROM Customers</sql>
</database>
</datasource>
</appml>
模型：Proto_Suppliers.xml
<appml>
<datasource>
<database>
<connection>Demo</connection>
<sql>SELECT * FROM Suppliers</sql>
</database>
</datasource>
</appml>
<datasource>
<database>
<connection>Demo</connection>
<sql>SELECT * FROM Suppliers</sql>
</database>
</datasource>
</appml>
模型：Proto_Products.xml
<appml>
<datasource>
<database>
<connection>Demo</connection>
<sql>SELECT * FROM Products</sql>
</database>
</datasource>
</appml>
<datasource>
<database>
<connection>Demo</connection>
<sql>SELECT * FROM Products</sql>
</database>
</datasource>
</appml>
原型視圖
創(chuàng)建一個原型視圖，把它保存為 Demo_Prototype.html，并嘗試一下：
視圖：Demo_Prototype.htm
<h1>Customers</h1>
<div id="List01"></div>
<script src="appml.js"></script>
<script>
customers=new AppML("appml.php","Prototypes/Customers");
customers.run("List01");
</script>
<div id="List01"></div>
<script src="appml.js"></script>
<script>
customers=new AppML("appml.php","Prototypes/Customers");
customers.run("List01");
</script>
嘗試一下 ?
現(xiàn)在把所有的合并在一起
最后，通過少量 JavaScript 編碼，為所有原型模型創(chuàng)建一個簡單的原型頁面：
Demo_Prototype_Views.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="appml.css" />
</head>
<body>
<h1>Demo Applications</h1>
<button onclick='myOpen("Customers")'>Customers</button>
<button onclick='myOpen("Products")'>Products</button>
<button onclick='myOpen("Suppliers")'>Suppliers</button>
<button onclick='myOpen("Shippers")'>Shippers</button>
<button onclick='myOpen("Categories")'>Categories</button>
<button onclick='myOpen("Employees")'>Employees</button>
<button onclick='myOpen("Orders")'>Orders</button>
<button onclick='myOpen("OrderDetails")'>OrderDetails</button>
<br><br>
<div id="Place01"></div>
<script src="appml.js"></script>
<script>
function myOpen(pname)
{
var app_obj
app_obj=new AppML("appml.php","Prototypes/" + pname);
app_obj.run("Place01");
}
</script>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="appml.css" />
</head>
<body>
<h1>Demo Applications</h1>
<button onclick='myOpen("Customers")'>Customers</button>
<button onclick='myOpen("Products")'>Products</button>
<button onclick='myOpen("Suppliers")'>Suppliers</button>
<button onclick='myOpen("Shippers")'>Shippers</button>
<button onclick='myOpen("Categories")'>Categories</button>
<button onclick='myOpen("Employees")'>Employees</button>
<button onclick='myOpen("Orders")'>Orders</button>
<button onclick='myOpen("OrderDetails")'>OrderDetails</button>
<br><br>
<div id="Place01"></div>
<script src="appml.js"></script>
<script>
function myOpen(pname)
{
var app_obj
app_obj=new AppML("appml.php","Prototypes/" + pname);
app_obj.run("Place01");
}
</script>
</body>
</html>
顯示結(jié)果 ?
以上內(nèi)容是否對您有幫助：
更多建議：