AppML ပုံစံများ
ဤအခန်းသည် ဒေတာဘေ့စ်တစ်ခုနှင့် ပတ်သက်သည့် ထည့်သွင်းပုံစံတစ်ခုကို မည်သို့တည်ဆောက်ရမည်ကို သရုပ်ပြထားသည်။
ဤစာမျက်နှာရှိ နမူနာများသည် ဒေသတွင်း SQL ဒေတာဘေ့စ်ကို အသုံးပြုသည်။
Local SQL databases များသည် IE သို့မဟုတ် Firefox တွင် အလုပ်မလုပ်ပါ။ Chrome သို့မဟုတ် Safari ကိုသုံးပါ။
Form Model တစ်ခုဖန်တီးပါ။
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 Form တစ်ခုဖန်တီးပါ။
ယခင်အခန်းတွင်၊ သင်သည် ဒေတာဘေ့စ်တစ်ခုမှ မှတ်တမ်းများကို စာရင်းပြုစုရန်အတွက် အပလီကေးရှင်းတစ်ခုကို ဖန်တီးခဲ့သည်။
ယခုစာမျက်နှာသို့ ဖောင်ပုံစံလျှောက်လွှာကို ထည့်ပါ-
HTML Form
<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 Form ဖြင့် ရှင်းပြထားပါသည်။
appml-data="local?model=model_customersform" သည် ပုံစံအတွက် AppML အပလီကေးရှင်းကို သတ်မှတ်သည်။
HTML Form Commands ကိုဖန်တီးပါ။
သင်အကြိုက်ဆုံးစတိုင်စာရွက်ကိုအသုံးပြုပါ (ကျွန်ုပ်တို့သည် bootstrap ကိုအသုံးပြုသည်) နှင့်သင်အလိုရှိသောပုံစံ commands များကိုဖန်တီးပါ။
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>
Form Commands များကို ထည့်သွင်းပါ။
သင့်ဖောင်တွင် ဖောင်ပုံစံညွှန်ကြားချက်များကို ထည့်သွင်းပါ-
HTML Form
<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 ဖြစ်ရပ် (ကော်လံအသစ်ရှိ) သည် id="Form01" ဖြင့် HTML ဒြပ်စင်တွင်ရှိသော AppML အပလီကေးရှင်းကို ဖွင့်ရန် ခေါ်ဆိုမှုကို အစပျိုးစေသည်။
- appml('Form01') သည် AppML အပလီကေးရှင်းကို ပြန်ပေးသည်။
- run({{CustomerID}}) သည် ကန့်သတ်ချက်အဖြစ် CustomerID ဖြင့် အပလီကေးရှင်းများကို လုပ်ဆောင်သည်။
နောက်ဆုံးတွင် Form ကိုဖျောက်ပါ။
မမြင်နိုင်စေရန် ပုံစံတစ်ခုထည့်ပါ-
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>