AppML Formları
Bu bölüm, bir veri tabanına karşı bir girdi formunun nasıl oluşturulacağını gösterir.
Bu sayfadaki örnekler yerel bir SQL veritabanı kullanır.
Yerel SQL veritabanları IE veya Firefox'ta çalışmaz. Chrome veya Safari kullanın.
Form Modeli Oluşturun
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 Formu Oluştur
Önceki bölümde, bir veri tabanından kayıtları listelemek için bir uygulama oluşturdunuz.
Şimdi sayfaya bir form uygulaması ekleyin:
HTML Formu
<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 Formu Açıklaması
appml-data="local?model=model_customersform" , form için AppML uygulamasını tanımlar.
HTML Form Komutları Oluşturun
Favori stil sayfanızı kullanın (önyükleme kullanıyoruz) ve istediğiniz form komutlarını oluşturun:
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 Komutlarını Dahil Et
Form komutlarını formunuza ekleyin:
HTML Formu
<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>
Tabloya Tıklanabilir Bir Sütun Ekleyin
Önceki bölümde, bir veri tabanından kayıtları listelemek için bir uygulama oluşturdunuz.
Şimdi tabloya yeni bir sütun ekleyin:
HTML Kaynağı
<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 olayı (yeni sütunda), id="Form01" ile HTML öğesinde bulunan bir AppML uygulamasını çalıştırmak için bir çağrıyı tetikler:
- appml('Form01') , AppML uygulamasını döndürür
- run({{CustomerID}}) parametre olarak CustomerID olan uygulamaları çalıştırır.
Son olarak, Formu Gizle
Görünmez hale getirmek için forma bir stil ekleyin:
HTML
<div id="Form01" appml-data="local?model=model_customersform"
appml-controller="myFormController"
class="jumbotron" style="display:none">
Formu yalnızca yüklendiğinde ve verileri görüntülemeye hazır olduğunda görüntülemek için forma bir denetleyici ekleyin:
kontrolör
<script>
function myFormController($appml) {
if ($appml.message ==
"ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display="";
}
}
</script>