ऐपएमएल फॉर्म
यह अध्याय दर्शाता है कि डेटाबेस के विरुद्ध इनपुट फॉर्म का निर्माण कैसे किया जाता है।
इस पृष्ठ के उदाहरण स्थानीय SQL डेटाबेस का उपयोग करते हैं।
स्थानीय SQL डेटाबेस IE या Firefox में काम नहीं करते हैं। क्रोम या सफारी का प्रयोग करें।
एक फॉर्म मॉडल बनाएं
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"}]
}
एक 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>
HTML फॉर्म की व्याख्या
appml-data="local?model=model_customersform" फॉर्म के लिए AppML एप्लिकेशन को परिभाषित करता है।
HTML फॉर्म कमांड बनाएं
अपनी पसंदीदा स्टाइल शीट का उपयोग करें (हम बूटस्ट्रैप का उपयोग करते हैं), और अपने वांछित फॉर्म कमांड बनाएं:
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>
फॉर्म कमांड शामिल करें
फॉर्म कमांड को अपने फॉर्म में शामिल करें:
एचटीएमएल फॉर्म
<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>
तालिका में क्लिक करने योग्य कॉलम जोड़ें
पिछले अध्याय में, आपने डेटाबेस से रिकॉर्ड सूचीबद्ध करने के लिए एक एप्लिकेशन बनाया था।
अब तालिका में एक नया कॉलम जोड़ें:
एचटीएमएल स्रोत
<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>
ऑनक्लिक ईवेंट (नए कॉलम में) HTML तत्व में स्थित एक ऐपएमएल एप्लिकेशन को आईडी = "फॉर्म 01" के साथ चलाने के लिए कॉल को ट्रिगर करता है:
- appml('Form01') AppML एप्लिकेशन लौटाता है
- run({{CustomerID}}) पैरामीटर के रूप में CustomerID के साथ एप्लिकेशन चलाता है।
अंत में, फॉर्म छुपाएं
प्रपत्र को अदृश्य बनाने के लिए उसमें शैली जोड़ें:
एचटीएमएल
<div id="Form01" appml-data="local?model=model_customersform"
appml-controller="myFormController"
class="jumbotron" style="display:none">
प्रपत्र में एक नियंत्रक जोड़ें, केवल प्रपत्र को लोड होने और डेटा प्रदर्शित करने के लिए तैयार होने पर प्रदर्शित करने के लिए:
नियंत्रक
<script>
function myFormController($appml) {
if ($appml.message ==
"ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display="";
}
}
</script>