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 một nguyên mẫu HTML
Đầu tiên, hãy tạo một nguyên mẫu HTML phù hợp , 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:
Thí dụ
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="https://www.w3schools.com/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>
{{...}} Là các trình giữ chỗ cho dữ liệu trong tương lai.
Thêm AppML
Sau khi bạn đã tạo một nguyên mẫu HTML, bạn có thể thêm AppML:
Thí dụ
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
<script src="https://www.w3schools.com/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>
Thêm AppML:
<script src = "https://www.w3schools.com/appml/2.0.3/appml.js">
Thêm cơ sở dữ liệu WebSQL cục bộ:
<script src = "https://www.w3schools.com/appml/2.0.3/appml_sql.js">
Xác định nguồn dữ liệu:
appml-data = "customer.js"
Xác định phần tử HTML được lặp lại cho mỗi bản ghi trong các bản ghi:
appml_repeat = "bản ghi"
Để làm cho nó đơn giản, hãy bắt đầu với dữ liệu cục bộ như 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ột 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 bạn 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 bảng với một bản ghi, hãy sử dụng mô hình như sau: .
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 cục bộ? Model = proto_customers_single :
Thí 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>
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: .
Thay đổi nguồn dữ liệu thành cục bộ? Model = proto_customers_all
Thí 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>
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 trong tệp có tên riêng 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 :
Thí 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>