Prototype AppML
Dans ce chapitre, nous allons construire un prototype d'application web.
Créer un prototype HTML
Tout d'abord, créez un prototype HTML décent , en utilisant votre CSS préféré.
Nous avons utilisé W3.CSS dans cet exemple :
Exemple
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
{{ ... }} Sont des espaces réservés pour les données futures.
Ajouter AppML
Après avoir créé un prototype HTML, vous pouvez ajouter AppML :
Exemple
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
<script src="https://www.w3schools.com/appml/2.0.3/appml_sql.js"></script>
<body>
<div class="w3-container" appml-data="customers.js">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
Ajouter AppML :
<script src="https://www.w3schools.com/appml/2.0.3/appml.js">
Ajoutez une base de données WebSQL locale :
<script src="https://www.w3schools.com/appml/2.0.3/appml_sql.js">
Définissez une source de données :
appml-data="clients.js"
Définissez l'élément HTML à répéter pour chaque enregistrement dans records :
appml_repeat="enregistrements"
Pour faire simple, commencez par des données locales comme avant de vous connecter à une base de données.
Créer un modèle AppML
Pour pouvoir utiliser une base de données, vous aurez besoin d'un modèle de base de données AppML :
proto_clients.js
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}
Si vous n'avez pas de base de données locale, vous pouvez utiliser le modèle AppML pour créer une base de données Web SQL.
Pour créer une table avec un seul enregistrement, utilisez un modèle comme celui-ci : .
La création d'une base de données locale ne fonctionne pas dans IE ou Firefox. Utilisez Chrome ou Safari.
Utilisez le modèle dans votre application. Changez la source de données en local?model=proto_customers_single :
Exemple
<div class="w3-container" appml-data="local?model=proto_customers_single">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
Créer une base de données locale avec plusieurs enregistrements
Pour créer une table avec plusieurs enregistrements, utilisez un modèle comme celui-ci : .
Remplacez la source de données par local?model=proto_customers_all
Exemple
<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
Ajouter un modèle de navigation
Supposons que vous souhaitiez que toutes vos applications aient une barre d'outils de navigation commune :
Créez un modèle HTML pour celui-ci :
inc_listcommands.htm
<div class="w3-bar w3-border w3-section">
<button class="w3-button" id='appmlbtn_first'>❮❮</button>
<button class="w3-button" id='appmlbtn_previous'>❮</button>
<button class="w3-button w3-hover-none" id='appmlbtn_text'></button>
<button class="w3-button" id='appmlbtn_next'>❯</button>
<button class="w3-button" id='appmlbtn_last'>❯❯</button>
<button class="w3-btn ws-green" id='appmlbtn_query'>Filter</button>
</div>
<div id="appmlmessage"></div>
Enregistrez le modèle dans un fichier avec un nom propre comme "inc_listcommands.htm".
Incluez le template dans votre prototype avec l'attribut appml-include-html :
Exemple
<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>