أحدث البرامج التعليمية وتطوير الشبكة
 

AppML أشكال

❮ السابق التالي الفصل ❯

يوضح هذا الفصل كيفية بناء نموذج المدخلات مقابل قاعدة بيانات.

الأمثلة على هذه الصفحة استخدام قاعدة بيانات SQL المحلية.
قواعد البيانات SQL المحلية لا يعمل في IE أو فايرفوكس. استخدام 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" appml-data="local?model=model_customersform"
class="jumbotron">

<div class="form-group">
  <label for="customername">Customer:</label>
  <input id="customername" class="form-control">
</div>

<div class="form-group">
  <label for="address">Address:</label>
  <input id="address" class="form-control">
</div>

<div class="form-group">
  <label for="city">City:</label>
  <input id="city" class="form-control">
</div>

<div class="form-group">
  <label for="postalcode">Postal Code:</label>
  <input id="postalcode" class="form-control">
</div>

<div class="form-group">
  <label for="country">Country:</label>
  <input id="country" class="form-control">
</div>

</div>
انها محاولة لنفسك »

وأوضح نموذج HTML

appml البيانات = "المحلية؟ نموذج = model_customersform" يحدد تطبيق AppML للنموذج.

إنشاء نموذج HTML أوامر

استخدام الخاص بك ورقة الأنماط المفضلة (we use bootstrap) ، وخلق الخاصة بك الأوامر شكل المطلوبين:

inc_formcommands.htm

<button type="button" class="close" onclick="document.getElementById('Form01').style.display='none';">X</button>

<button type="button" class="close">X</button>

<div class="btn-toolbar" style="margin-bottom:20px;">
<div class="btn-group">

<button type="button" class="btn btn-default" onclick="appml('Form01').newRecord();">
<span class="glyphicon glyphicon-new-window"></span> New</button>

<button type="button" class="btn btn-primary" onclick="appml('Form01').saveRecord();">
<span class="glyphicon glyphicon-floppy-disk"></span> Save</button>

<button type="button" class="btn btn-default" onclick="appml('Form01').deleteRecord();">
<span class="glyphicon glyphicon-trash"></span> Delete</button>

</div>
</div>

<div id="appmlmessage" class="alert alert-warning" style="display:none;">
<button type="button" class="close"
onclick="this.parentNode.style.display='none';">X</button>
<div id="message"></div>

</div>

تشمل أوامر نموذج

تشمل أوامر النموذج في في النموذج الخاص بك :.

نموذج HTML

<div id="Form01" appml-data="local?model=model_customersform"
class="jumbotron">

<div appml-include-html="inc_formcommands.htm"></div>

<div class="form-group">
<label for="customername">Customer:</label>
<input id="customername" class="form-control">
</div>

<label for="address">Address:</label>
<input id="address" class="form-control">
</div>

<div class="form-group">
<label for="city">City:</label>
<input id="city" class="form-control">
</div>

<div class="form-group">
<label for="postalcode">Postal Code:</label>
<input id="postalcode" class="form-control">
</div>

<div class="form-group">
<label for="country">Country:</label>
<input id="country" class="form-control">
</div>

</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="table table-striped table-bordered">
  <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}})">
        <span class="glyphicon glyphicon-edit"></span></td>
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
  </tr>
</table>

</div>
انها محاولة لنفسك »

الحدث onclick (in the new column) يطلق دعوة لتشغيل تطبيق AppML الموجود في عنصر HTML مع معرف = "Form01":

  • appml('Form01') إرجاع تطبيق AppML
  • run({{CustomerID}}) يدير التطبيقات مع العميل كمعلمة.

وأخيرا، إخفاء نموذج

إضافة إلى أسلوب النموذج لجعلها غير مرئية:

HTML

<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>
انها محاولة لنفسك »

❮ السابق التالي الفصل ❯