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ẫu 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 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ờ 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>
Hãy tự mình thử »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>
Hãy tự mình thử »Thêm 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ờ 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>
Hãy tự mình thử »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 kiểu vào biểu mẫu để ẩ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, để chỉ hiển thị biểu mẫu 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>
Hãy tự mình thử »