AppML 教程
1. AppML 教程 2. 如何使用 AppML 3. AppML 下载 4. AppML 架构 5. AppML 参考手册 6. AppML 案例简介 7. AppML 案例原型 8. AppML 案例模型 9. AppML 案例模板 10. AppML 案例 Employees 11. AppML 案例 Customers 12. AppML 案例 Products 13. AppML 未来的应用程序

AppML 案例原型

<AppML> 案例研究 - 原型


此案例研究演示了如何构建一个完整的 <AppML> 互联网应用程序,具有针对数据库中的若干表进行信息列举、编辑和搜索的功能。


原型

在本章中,我们将为数据库中的每个表建立一个原型模型。

原型是非常便于使用的开发应用程序的起点。


原型模型

首先,为原型创建一个文件夹。该文件夹命名为 Prototypes。

然后,为数据库中的每个表创建一个原型模型。

使用 SELECT * from 每个表,并保存模型为 XML 文件:

模型:Proto_Customers.xml

<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>

模型:Proto_Products.xml

<appml>
<datasource>
<database>
<connection>Demo</connection>
<sql>SELECT * FROM Products</sql>
</database>
</datasource>
</appml>



原型视图

创建一个原型视图,把它保存为 Demo_Prototype.html,并55面试教程网:

视图: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>

55面试教程网 »


现在把所有的合并在一起

最后,通过少量 JavaScript 编码,为所有原型模型创建一个简单的原型页面:

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>

显示结果 »