نماذج AppML
يوضح هذا الفصل كيفية إنشاء نموذج إدخال مقابل قاعدة بيانات.
تستخدم الأمثلة الموجودة في هذه الصفحة قاعدة بيانات SQL محلية.
قواعد بيانات SQL المحلية لا تعمل في IE أو Firefox. استخدم Chrome أو Safari.
قم بإنشاء نموذج نموذج
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
في الفصل السابق ، قمت بإنشاء تطبيق لسرد السجلات من قاعدة بيانات.
أضف الآن طلب نموذج إلى الصفحة:
نموذج 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>
قم بتضمين أوامر النموذج
قم بتضمين أوامر النموذج في النموذج الخاص بك:
نموذج 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>
قم بإضافة عمود قابل للنقر إلى الجدول
في الفصل السابق ، قمت بإنشاء تطبيق لسرد السجلات من قاعدة بيانات.
أضف الآن عمودًا جديدًا إلى الجدول:
مصدر 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>
يؤدي حدث onclick (في العمود الجديد) إلى تشغيل مكالمة لتشغيل تطبيق AppML الموجود في عنصر HTML بالمعرف = "Form01":
- يقوم appml ('Form01') بإرجاع تطبيق AppML
- تشغيل ({{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>