AppML prototip
Ushbu bobda veb-ilova uchun prototip yaratamiz.
HTML prototip yarating
Avval o‘zingizga yoqqan CSS’dan foydalanib, sifatli HTML prototip yarating.
Ushbu misolda W3.CSS’dan foydalandik:
Misol
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
O‘zingiz sinab ko‘ring »
{{ ... }} — kelajakdagi ma’lumotlar uchun joy egalari.
AppML qo‘shing
HTML prototipni yaratganingizdan so‘ng AppML qo‘shishingiz mumkin:
Misol
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
<script src="https://www.w3schools.com/appml/2.0.3/appml_sql.js"></script>
<body>
<div class="w3-container" appml-data="customers.js">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
O‘zingiz sinab ko‘ring »
AppML qo‘shing:
<script src="https://www.w3schools.com/appml/2.0.3/appml.js">
Mahalliy WebSQL ma’lumotlar bazasini qo‘shing:
<script src="https://www.w3schools.com/appml/2.0.3/appml_sql.js">
Ma’lumot manbaini belgilang:
appml-data="customers.js"
records ichidagi har bir yozuv uchun takrorlanadigan HTML elementini belgilang:
appml_repeat="records"
Ishni soddalashtirish uchun ma’lumotlar bazasiga ulanishdan oldin customers.js kabi mahalliy ma’lumotlardan boshlang.
AppML modelini yarating
Ma’lumotlar bazasidan foydalana olish uchun sizga AppML ma’lumotlar bazasi modeli kerak bo‘ladi:
proto_customers.js
{
"rowsperpage" : 10,
"database" : {
"connection" : "localmysql",
"sql" : "Select * from Customers",
"orderby" : "CustomerName",
}
Agar mahalliy ma’lumotlar bazangiz bo‘lmasa, Web SQL ma’lumotlar bazasini yaratish uchun AppML modelidan foydalanishingiz mumkin.
Bitta yozuvli jadval yaratish uchun quyidagi kabi modeldan foydalaning: proto_customers_single.js.
Mahalliy ma’lumotlar bazasini yaratish IE yoki Firefox’da ishlamaydi. Chrome yoki Safari’dan foydalaning.
Modeldan ilovangizda foydalaning. Ma’lumot manbaini local?model=proto_customers_single qiymatiga o‘zgartiring:
Misol
<div class="w3-container" appml-data="local?model=proto_customers_single">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
O‘zingiz sinab ko‘ring »
Bir nechta yozuvli mahalliy ma’lumotlar bazasini yarating
Bir nechta yozuvli jadval yaratish uchun quyidagi kabi modeldan foydalaning: proto_customers_all.js.
Ma’lumot manbaini local?model=proto_customers_all qiymatiga o‘zgartiring
Misol
<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
O‘zingiz sinab ko‘ring »
Navigatsiya shablonini qo‘shing
Aytaylik, barcha ilovalaringizda umumiy navigatsiya asboblar paneli bo‘lishini xohlaysiz:
Buning uchun HTML shablon yarating:
inc_listcommands.htm
<div class="w3-bar w3-border w3-section">
<button class="w3-button" id='appmlbtn_first'>❮❮</button>
<button class="w3-button" id='appmlbtn_previous'>❮</button>
<button class="w3-button w3-hover-none" id='appmlbtn_text'></button>
<button class="w3-button" id='appmlbtn_next'>❯</button>
<button class="w3-button" id='appmlbtn_last'>❯❯</button>
<button class="w3-btn ws-green" id='appmlbtn_query'>Filter</button>
</div>
<div id="appmlmessage"></div>
Shablonni "inc_listcommands.htm" kabi mos nomli faylga saqlang.
Shablonni prototipingizga appml-include-html atributi yordamida qo‘shing:
Misol
<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!