Formulaires AppML
Ce chapitre montre comment construire un formulaire de saisie sur une base de données.
Les exemples de cette page utilisent une base de données SQL locale.
Les bases de données SQL locales ne fonctionnent pas dans IE ou Firefox. Utilisez Chrome ou Safari.
Créer un modèle de formulaire
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"}]
}
Créer un formulaire HTML
Dans le chapitre précédent, vous avez créé une application pour répertorier les enregistrements d'une base de données.
Ajoutez maintenant une application de formulaire à la page :
Formulaire HTML
<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>
Formulaire HTML expliqué
appml-data="local?model=model_customersform" définit l'application AppML pour le formulaire.
Créer des commandes de formulaire HTML
Utilisez votre feuille de style préférée (nous utilisons bootstrap) et créez les commandes de formulaire souhaitées :
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>
Inclure les commandes de formulaire
Incluez les commandes de formulaire dans votre formulaire :
Formulaire HTML
<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>
Ajouter une colonne cliquable au tableau
Dans le chapitre précédent, vous avez créé une application pour répertorier les enregistrements d'une base de données.
Ajoutez maintenant une nouvelle colonne au tableau :
Source 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>
L'événement onclick (dans la nouvelle colonne) déclenche un appel pour exécuter une application AppML située dans l'élément HTML avec id="Form01":
- appml('Form01') renvoie l'application AppML
- run({{CustomerID}}) exécute les applications avec CustomerID comme paramètre.
Enfin, masquez le formulaire
Ajoutez un style au formulaire pour le rendre invisible :
HTML
<div id="Form01" appml-data="local?model=model_customersform"
appml-controller="myFormController"
class="jumbotron" style="display:none">
Ajoutez un contrôleur au formulaire, pour afficher le formulaire uniquement lorsqu'il est chargé et prêt à afficher des données :
Manette
<script>
function myFormController($appml) {
if ($appml.message ==
"ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display="";
}
}
</script>