AppML formalari
Ushbu bobda ma’lumotlar bazasi bilan ishlaydigan kiritish formasini qanday yaratish ko‘rsatiladi.
Ushbu sahifadagi misollarda mahalliy SQL ma’lumotlar bazasidan foydalaniladi.
Mahalliy SQL ma’lumotlar bazalari IE yoki Firefox’da ishlamaydi. Chrome yoki Safari’dan foydalaning.
Forma modelini yarating
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 forma yarating
Oldingi bobda ma’lumotlar bazasidagi yozuvlarni ro‘yxat ko‘rinishida chiqaradigan ilova yaratdingiz.
Endi sahifaga forma ilovasini qo‘shing:
HTML forma
<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>
O‘zingiz sinab ko‘ring »
HTML forma tushuntirilishi
appml-data="local?model=model_customersform" forma uchun AppML ilovasini belgilaydi.
HTML forma buyruqlarini yarating
O‘zingizga yoqqan uslublar jadvalidan foydalaning (biz bootstrap’dan foydalanamiz) va kerakli forma buyruqlarini yarating:
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>
Forma buyruqlarini qo‘shing
Forma buyruqlarini formangizga qo‘shing:
HTML forma
<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>
O‘zingiz sinab ko‘ring »
Jadvalga bosiladigan ustun qo‘shing
Oldingi bobda ma’lumotlar bazasidagi yozuvlarni ro‘yxat ko‘rinishida chiqaradigan ilova yaratdingiz.
Endi jadvalga yangi ustun qo‘shing:
HTML manba kodi
<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>
O‘zingiz sinab ko‘ring »
onclick hodisasi (yangi ustundagi) id="Form01" bo‘lgan HTML elementida joylashgan AppML ilovasini ishga tushirish uchun chaqiruvni amalga oshiradi:
- appml('Form01') AppML ilovasini qaytaradi
- run({{CustomerID}}) ilovani CustomerID parametri bilan ishga tushiradi.
Nihoyat, formani yashiring
Formani ko‘rinmas qilish uchun unga uslub qo‘shing:
HTML
<div id="Form01" appml-data="local?model=model_customersform"
appml-controller="myFormController"
class="jumbotron" style="display:none">
Formaga kontroller qo‘shing, shunda forma faqat yuklanib, ma’lumotlarni ko‘rsatishga tayyor bo‘lgandagina ko‘rsatiladi:
Kontroller
<script>
function myFormController($appml) {
if ($appml.message == "ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display="";
}
}
</script>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!