Nguyên mẫu AppML
Trong chương này, chúng ta sẽ xây dựng một nguyên mẫu cho một ứng dụng web.
Tạo nguyên mẫu HTML
Đầu tiên, tạo một nguyên mẫu HTML phù hợp bằng cách sử dụng CSS yêu thích của bạn.
Chúng tôi đã sử dụng W3.CSS trong ví dụ này:
Ví dụ
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="https://www.example.com.vn/w3css/4/w3.css">
<body>
<div class="w3-container">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
Hãy tự mình thử »{{ ... }} Là phần giữ chỗ cho dữ liệu trong tương lai.
Thêm AppML
Sau khi tạo nguyên mẫu HTML, bạn có thể thêm AppML:
Ví dụ
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="https://www.example.com.vn/w3css/4/w3.css">
<script src="https://www.example.com.vn/appml/2.0.3/appml.js"></script>
<script src="https://www.example.com.vn/appml/2.0.3/appml_sql.js"></script>
<body>
<div class="w3-container" appml-data="customers.js" >
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records" >
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
Hãy tự mình thử »Thêm AppML:
<script src="https://www.example.com.vn/appml/2.0.3/appml.js">
Thêm cơ sở dữ liệu WebSQL cục bộ:
<script src="https://www.example.com.vn/appml/2.0.3/appml_sql.js">
Xác định nguồn dữ liệu:
appml-data="customers.js"
Xác định phần tử HTML được lặp lại cho mỗi bản ghi trong bản ghi:
appml_repeat="records"
Để đơn giản, hãy bắt đầu với dữ liệu cục bộ như customer.js trước khi kết nối với cơ sở dữ liệu.
Tạo mô hình AppML
Để có thể sử dụng cơ sở dữ liệu, bạn sẽ cần mô hình cơ sở dữ liệu AppML:
proto_customers.js
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}Nếu không có cơ sở dữ liệu cục bộ, bạn có thể sử dụng mô hình AppML để tạo cơ sở dữ liệu Web SQL.
Để tạo một bảng có một bản ghi duy nhất, hãy sử dụng mô hình như sau: proto_customers_single.js .
Tạo cơ sở dữ liệu cục bộ không hoạt động trong IE hoặc Firefox. Sử dụng Chrome hoặc Safari.
Sử dụng mô hình trong ứng dụng của bạn. Thay đổi nguồn dữ liệu thành local?model=proto_customers_single :
Ví dụ
<div class="w3-container" appml-data=" local?model=proto_customers_single ">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div> Hãy tự mình thử »Tạo cơ sở dữ liệu cục bộ với nhiều bản ghi
Để tạo một bảng có nhiều bản ghi, hãy sử dụng mô hình như sau: proto_customers_all.js .
Thay đổi nguồn dữ liệu thành local?model=proto_customers_all
Ví dụ
<div class="w3-container" appml-data=" local?model=proto_customers_all ">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div> Hãy tự mình thử »Thêm mẫu điều hướng
Giả sử bạn muốn tất cả các ứng dụng của mình có một thanh công cụ điều hướng chung:
Tạo một mẫu HTML cho nó:
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>
Lưu mẫu vào một tệp có tên thích hợp như "inc_listcommands.htm".
Bao gồm mẫu trong nguyên mẫu của bạn với thuộc tính appml-include-html :
Ví dụ
<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm" ></div>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div> Hãy tự mình thử »