AppML နမူနာပုံစံ
ဤအခန်းတွင်၊ ကျွန်ုပ်တို့သည် ဝဘ်အက်ပလီကေးရှင်းအတွက် ရှေ့ပြေးပုံစံကို တည်ဆောက်ပါမည်။
HTML Prototype ဖန်တီးပါ။
ပထမဦးစွာ သင့်စိတ်ကြိုက် CSS ကို အသုံးပြု၍ သင့်လျော် သော HTML ရှေ့ပြေးပုံစံ ကို ဖန်တီးပါ။
ဤဥပမာတွင် W3.CSS ကိုကျွန်ုပ်တို့အသုံးပြုထားပါသည်။
ဥပမာ
<!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>
{{ ... }} သည် အနာဂတ်ဒေတာအတွက် နေရာပေးထားပါသည်။
AppML ထည့်ပါ။
HTML ရှေ့ပြေးပုံစံကို သင်ဖန်တီးပြီးနောက်၊ သင်သည် AppML ကို ထည့်သွင်းနိုင်သည်-
ဥပမာ
<!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>
AppML ထည့်ပါ
<script src="https://www.w3schools.com/appml/2.0.3/appml.js">
ဒေသတွင်း WebSQL ဒေတာဘေ့စ်ကို ထည့်ပါ-
<script src="https://www.w3schools.com/appml/2.0.3/appml_sql.js">
ဒေတာအရင်းအမြစ်ကို သတ်မှတ်ပါ-
appml-data="customers.js"
မှတ်တမ်းတစ်ခုစီအတွက် ထပ်ခါတလဲလဲလုပ်ရမည့် HTML အစိတ်အပိုင်းကို သတ်မှတ်သတ်မှတ်ပါ-
appml_repeat="မှတ်တမ်းများ"
ရိုးရှင်းစေရန်၊ ဒေတာဘေ့စ်သို့မချိတ်ဆက်မီ
AppML မော်ဒယ်တစ်ခု ဖန်တီးပါ။
ဒေတာဘေ့စ်ကိုအသုံးပြုရန်အတွက်၊ သင်သည် AppML ဒေတာဘေ့စ်ပုံစံတစ်ခု လိုအပ်မည်ဖြစ်သည်။
proto_customers.js
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}
သင့်တွင် ဒေသတွင်းဒေတာဘေ့စ်မရှိပါက၊ သင်သည် Web SQL ဒေတာဘေ့စ်တစ်ခုဖန်တီးရန် AppML မော်ဒယ်ကို အသုံးပြုနိုင်သည်။
မှတ်တမ်းတစ်ခုတည်းဖြင့် ဇယားတစ်ခုဖန်တီးရန်၊ ဤကဲ့သို့သော မော်ဒယ်ကို အသုံးပြုပါ- .
ဒေသတွင်းဒေတာဘေ့စ်တစ်ခုဖန်တီးခြင်းသည် IE သို့မဟုတ် Firefox တွင် အလုပ်မလုပ်ပါ။ Chrome သို့မဟုတ် Safari ကိုသုံးပါ။
သင့်လျှောက်လွှာတွင် မော်ဒယ်ကို အသုံးပြုပါ။ ဒေတာရင်းမြစ်ကို local?model=proto_customers_single သို့ ပြောင်းပါ
ဥပမာ
<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>
မှတ်တမ်းများစွာဖြင့် Local Database တစ်ခုဖန်တီးပါ။
မှတ်တမ်းများစွာပါသော ဇယားတစ်ခုကို ဖန်တီးရန်၊ ဤကဲ့သို့သော မော်ဒယ်ကို အသုံးပြုပါ- .
ဒေတာရင်းမြစ်ကို local?model=proto_customers_all သို့ ပြောင်းပါ။
ဥပမာ
<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>
Navigation Template တစ်ခုထည့်ပါ။
သင့်အပလီကေးရှင်းများအားလုံးကို ဘုံလမ်းညွှန်ကိရိယာဘားတစ်ခုရှိစေလိုသည်ဆိုပါစို့။
၎င်းအတွက် HTML ပုံစံတစ်ခုကို ဖန်တီးပါ-
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>
"inc_listcommands.htm" ကဲ့သို့သော သင့်လျော်သောအမည်ဖြင့် ဖိုင်တစ်ခုတွင် နမူနာပုံစံကို သိမ်းဆည်းပါ။
attribute appml-include-html ဖြင့် သင်၏ နမူနာပုံစံတွင် နမူနာကို ထည့်သွင်း ပါ
ဥပမာ
<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>