Templat kes AppML


Kajian kes ini menunjukkan cara membina aplikasi Internet <AppML> yang lengkap dengan keupayaan untuk menyenaraikan, mengedit dan mencari maklumat merentas beberapa jadual dalam pangkalan data.

Menambah Templat HTML

Dalam bab ini, kami akan menunjukkan cara menambah templat HTML pada halaman HTML.

Senaraikan pelanggan

Instance

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>

Jalankan instance»

Klik "Run" Butang Contoh" untuk melihat contoh dalam talian


Senaraikan Pelanggan dan Borang Pelanggan

Dengan penggunaan templat yang bijak, mudah untuk menambah <AppML> objek senarai dan <AppML> Pautan antara borang:

Instance

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>

Run Instance»

Klik Butang "Run Instance" untuk melihat contoh dalam talian


Senaraikan pelanggan dan pesanan pelanggan

Dengan penggunaan templat yang bijak adalah mudah untuk menambah <AppML> objek senarai dan Pautan terpaut antara senarai:

Instance

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>

Instance Yang Berjalan»

Klik butang "Run Instance" untuk melihatnya dalam talian Contoh


Sekarang gabungkan semuanya

Akhirnya, dengan sedikit penyalinan kod, kami boleh menyiapkan projek itu.

Instance

客户列表、表单和订单
<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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Dalam bab berikut, anda boleh melihat lebih banyak aplikasi dengan kod sumber yang lengkap.