AppML-Formulare
Dieses Kapitel zeigt, wie Sie ein Eingabeformular für eine Datenbank erstellen.
Die Beispiele auf dieser Seite verwenden eine lokale SQL-Datenbank.
Lokale SQL-Datenbanken funktionieren nicht in IE oder Firefox. Verwenden Sie Chrome oder Safari.
Erstellen Sie ein Formularmodell
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"}]
}
Erstellen Sie ein HTML-Formular
Im vorherigen Kapitel haben Sie eine Anwendung zum Auflisten von Datensätzen aus einer Datenbank erstellt.
Fügen Sie der Seite nun eine Formularanwendung hinzu:
HTML-Formular
<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-Formular erklärt
appml-data="local?model=model_customersform" definiert die AppML-Anwendung für das Formular.
Erstellen Sie HTML-Formularbefehle
Verwenden Sie Ihr bevorzugtes Stylesheet (wir verwenden Bootstrap) und erstellen Sie die gewünschten Formularbefehle:
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>
Schließen Sie die Formularbefehle ein
Fügen Sie die Formularbefehle in Ihr Formular ein:
HTML-Formular
<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>
Fügen Sie der Tabelle eine anklickbare Spalte hinzu
Im vorherigen Kapitel haben Sie eine Anwendung zum Auflisten von Datensätzen aus einer Datenbank erstellt.
Fügen Sie nun der Tabelle eine neue Spalte hinzu:
HTML-Quelle
<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>
Das onclick-Ereignis (in der neuen Spalte) löst einen Aufruf zum Ausführen einer AppML-Anwendung aus, die sich im HTML-Element mit id="Form01" befindet:
- appml('Form01') gibt die AppML-Anwendung zurück
- run({{CustomerID}}) führt die Anwendungen mit CustomerID als Parameter aus.
Verstecken Sie schließlich das Formular
Fügen Sie dem Formular einen Stil hinzu, um es unsichtbar zu machen:
HTML
<div id="Form01" appml-data="local?model=model_customersform"
appml-controller="myFormController"
class="jumbotron" style="display:none">
Fügen Sie dem Formular einen Controller hinzu, um das Formular nur anzuzeigen, wenn es geladen und bereit ist, Daten anzuzeigen:
Regler
<script>
function myFormController($appml) {
if ($appml.message ==
"ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display="";
}
}
</script>