Biểu mẫu AppML
Chương này trình bày cách xây dựng một biểu mẫu đầu vào dựa trên cơ sở dữ liệu.
Các ví dụ trên trang này sử dụng cơ sở dữ liệu SQL cục bộ.
Cơ sở dữ liệu SQL cục bộ không hoạt động trong IE hoặc Firefox. Sử dụng Chrome hoặc Safari.
Tạo một mô hình biểu mẫu
model_customersform.js
{
"database" : {
"connection" : "localmysql",
"maintable" : "Customers",
"keyfield" : "CustomerID",
"sql" : "SELECT * FROM Customers"},
"updateItems" : [
{"item" :
"CustomerName"},
{"item" : "Address"},
{"item" : "PostalCode"},
{"item" : "City"},
{"item" : "Country"}]
}
Tạo một biểu mẫu HTML
Trong chương trước, bạn đã tạo một ứng dụng để liệt kê các bản ghi từ cơ sở dữ liệu.
Bây giờ hãy thêm một ứng dụng biểu mẫu vào trang:
Biểu mẫu HTML
<div id="Form01" class="w3-container w3-light-grey w3-padding-large
w3-margin-bottom" appml-data="local?model=model_customersform">
<p>
<label for="customername">Customer:</label>
<input id="customername"
class="w3-input w3-border">
</p>
<p>
<label
for="address">Address:</label>
<input id="address" class="w3-input
w3-border">
</p>
<p>
<label for="city">City:</label>
<input
id="city" class="w3-input w3-border">
</p>
<p>
<label
for="postalcode">Postal Code:</label>
<input id="postalcode"
class="w3-input w3-border">
</p>
<p>
<label for="country">Country:</label>
<input id="country"
class="w3-input w3-border">
</p>
</div>
Giải thích về biểu mẫu HTML
appml-data = "local? model = model_customersform" xác định ứng dụng AppML cho biểu mẫu.
Tạo lệnh biểu mẫu HTML
Sử dụng biểu định kiểu yêu thích của bạn (chúng tôi sử dụng bootstrap) và tạo các lệnh biểu mẫu mong muốn của bạn:
inc_formcommands.htm
<span onclick="document.getElementById('Form01').style.display='none'"
class="w3-button w3-xlarge w3-right">×</span>
<div
class="w3-bar w3-border w3-white">
<button
onclick="appml('Form01').newRecord();" class="w3-btn">New</button>
<button onclick="appml('Form01').saveRecord();" class="w3-btn
w3-green">Save</button>
<button onclick="appml('Form01').deleteRecord();"
class="w3-btn">Delete</button>
</div>
<div id="appmlmessage"
class="w3-container w3-pale-yellow w3-padding" style="display:none;">
<span onclick="this.parentNode.style.display='none';" class="w3-button
w3-xlarge w3-right">×</span>
<div id="message"></div>
</div>
Bao gồm các lệnh biểu mẫu
Bao gồm các lệnh biểu mẫu trong biểu mẫu của bạn:
Biểu mẫu HTML
<div id="Form01" class="w3-container w3-light-grey w3-padding-large
w3-margin-bottom" appml-data="local?model=model_customersform">
<div appml-include-html="inc_formcommands.htm"></div>
<p>
<label for="customername">Customer:</label>
<input
id="customername" class="w3-input w3-border">
</p>
<p>
<label
for="address">Address:</label>
<input id="address" class="w3-input
w3-border">
</p>
<p>
<label for="city">City:</label>
<input
id="city" class="w3-input w3-border">
</p>
<p>
<label
for="postalcode">Postal Code:</label>
<input id="postalcode"
class="w3-input w3-border">
</p>
<p>
<label for="country">Country:</label>
<input id="country"
class="w3-input w3-border">
</p>
</div>
Thêm một cột có thể nhấp vào bảng
Trong chương trước, bạn đã tạo một ứng dụng để liệt kê các bản ghi từ cơ sở dữ liệu.
Bây giờ, hãy thêm một cột mới vào bảng:
Nguồn HTML
<div appml-data="local?model=model_customerslist">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filter.htm"></div>
<table
class="w3-table-all">
<tr>
<th></th>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td style="cursor:pointer;width:34px;"
onclick="appml('Form01').run({{CustomerID}})">✎</td>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
Sự kiện onclick (trong cột mới) kích hoạt lệnh gọi chạy ứng dụng AppML nằm trong phần tử HTML có id = "Form01":
- appml ('Form01') trả về ứng dụng AppML
- run ({{CustomerID}}) chạy các ứng dụng có tham số CustomerID.
Cuối cùng, ẩn biểu mẫu
Thêm một kiểu vào biểu mẫu để làm cho nó ẩn:
HTML
<div id="Form01" appml-data="local?model=model_customersform"
appml-controller="myFormController"
class="jumbotron" style="display:none">
Thêm bộ điều khiển vào biểu mẫu, để hiển thị biểu mẫu chỉ khi nó được tải và sẵn sàng hiển thị dữ liệu:
Bộ điều khiển
<script>
function myFormController($appml) {
if ($appml.message ==
"ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display="";
}
}
</script>