Bu bölümde bir veritabanına karşı bir giriş formu oluşturmak için nasıl kullanılacağını gösterir.
Bu sayfadaki örnekler yerel bir SQL veritabanını kullanır.
Yerel SQL veritabanları IE veya Firefox ç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şturma
Bir önceki bölümde, bir veritabanından kayıtları listeleyen için bir uygulama oluşturdu.
Şimdi sayfaya bir biçim uygulama ekle:
HTML Formu
<div id="Form01" appml-data="local?model=model_customersform"
class="jumbotron">
<div class="form-group">
<label for="customername">Customer:</label>
<input id="customername" class="form-control">
</div>
<div class="form-group">
<label
for="address">Address:</label>
<input id="address" class="form-control">
</div>
<div class="form-group">
<label for="city">City:</label>
<input id="city" class="form-control">
</div>
<div
class="form-group">
<label for="postalcode">Postal Code:</label>
<input id="postalcode"
class="form-control">
</div>
<div class="form-group">
<label
for="country">Country:</label>
<input id="country" class="form-control">
</div>
</div> Kendin dene " HTML Form Açıklaması
appml veri = "yerel? modeli = model_customersform" formu AppML uygulaması tanımlar.
HTML Form Komutları oluşturun
Favori stil sayfası kullanın (we use bootstrap) ve kendi istediği şekilde komutları oluşturun:
inc_formcommands.htm
<button type="button" class="close"
onclick="document.getElementById('Form01').style.display='none';">X</button>
<button type="button" class="close">X</button>
<div class="btn-toolbar" style="margin-bottom:20px;">
<div class="btn-group">
<button type="button" class="btn btn-default" onclick="appml('Form01').newRecord();">
<span class="glyphicon glyphicon-new-window"></span> New</button>
<button type="button" class="btn btn-primary" onclick="appml('Form01').saveRecord();">
<span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
<button type="button" class="btn btn-default" onclick="appml('Form01').deleteRecord();">
<span class="glyphicon glyphicon-trash"></span> Delete</button>
</div>
</div>
<div id="appmlmessage" class="alert alert-warning" style="display:none;">
<button type="button" class="close"
onclick="this.parentNode.style.display='none';">X</button>
<div id="message"></div>
</div>
Form Komutları Dahil
form şeklinde komutları ekleyin :.
HTML Formu
<div id="Form01" appml-data="local?model=model_customersform"
class="jumbotron">
<div appml-include-html="inc_formcommands.htm"></div>
<div class="form-group">
<label for="customername">Customer:</label>
<input id="customername" class="form-control">
</div>
<label
for="address">Address:</label>
<input id="address" class="form-control">
</div>
<div class="form-group">
<label for="city">City:</label>
<input id="city" class="form-control">
</div>
<div
class="form-group">
<label for="postalcode">Postal Code:</label>
<input id="postalcode"
class="form-control">
</div>
<div class="form-group">
<label
for="country">Country:</label>
<input id="country" class="form-control">
</div>
</div>
Kendin dene " Tablo için tıklanabilir Sütun Ekle
Bir önceki bölümde, bir veritabanından kayıtları listeleyen için bir uygulama oluşturdu.
Ş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="table table-striped table-bordered">
<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}})">
<span class="glyphicon glyphicon-edit"></span></td>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
Kendin dene " Onclick etkinlik (in the new column) id = "Form01" ile HTML öğesi bulunan bir AppML uygulamayı çalıştırmak için bir çağrı tetikler:
- appml('Form01') AppML uygulama döndürür
- run({{CustomerID}}) parametre olarak CustomerID'deki ile uygulamaları da çalıştırır.
Son olarak, Formunu Gizle
görünmez hale getirmek için forma stil ekleyin:
HTML
<div id="Form01" appml-data="local?model=model_customersform"
appml-controller="myFormController"
class="jumbotron" style="display:none" >
Dolu ve verileri görüntülemek için hazır olduğunda formunu 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> Kendin dene "