Dans ce chapitre, nous allons construire un prototype pour une application Web.
Créer un prototype HTML
Tout d' abord, créer un prototype HTML décent, en utilisant votre CSS favori.
Nous avons utilisé bootstrap dans cet exemple:
Exemple
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<body>
<div class="container">
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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>
Essayez vous - même » {{...}} 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3ii.com/appml/2.0.3/appml.js"></script>
<script src="http://www.w3ii.com/appml/2.0.3/appml_sql.js"></script>
<body>
<div class="container" appml-data="customers.js" >
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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>
Essayez vous - même » Ajouter appml:
<script src = "http://www.w3ii.com/appml/2.0.3/appml.js">
Ajouter une base de données locale websql:
<script src = "http://www.w3ii.com/appml/2.0.3/appml_sql.js">
Définir une source de données:
appml-data = "customers.js"
Définir l'élément HTML à répéter pour chaque enregistrement dans les dossiers:
appml_repeat = "records"
Pour faire simple, commencez avec des données locales comme customers.js avant la connexion à 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_customers.js
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}Si vous ne disposez pas d'une base de données locale, vous pouvez utiliser le modèle appml pour créer une base de données SQL Web.
Pour créer une table avec un seul enregistrement, utilisez un modèle comme celui - ci: proto_customers_single.js .
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. Modifiez la source de données pour modèle local = proto_customers_single?:
Exemple
<div appml-data=" local?model=proto_customers_single ">
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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> Essayez vous - même » 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: proto_customers_all.js .
Modifiez la source de données pour le modèle local? = Proto_customers_all
Exemple
<div appml-data=" local?model=proto_customers_all ">
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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> Essayez vous - même » Ajouter un modèle de navigation
Supposons que vous voulez que toutes vos applications d'avoir une barre d'outils de navigation commune:
Créer un modèle HTML pour elle:
inc_listcommands.htm
<div class="btn-group" role="toolbar" style="margin-bottom:10px;">
<button id='appmlbtn_first' type="button"
class="btn btn-default">
<span class="glyphicon
glyphicon-fast-backward"></span></button>
<button id='appmlbtn_previous'
type="button" class="btn btn-default">
<span class="glyphicon
glyphicon-backward"></span></button>
<button id='appmlbtn_text'
type="button" class="btn btn-default disabled"></button>
<button
id='appmlbtn_next' type="button" class="btn btn-default">
<span
class="glyphicon glyphicon-forward"></span></button>
<button id='appmlbtn_last' type="button" class="btn btn-default">
<span class="glyphicon glyphicon-fast-forward"></span></button>
<button id='appmlbtn_query' type="button"
class="btn btn-primary">
<span class="glyphicon
glyphicon-search"></span> Filter</button>
</div>
<div
id="appmlmessage"></div>
Enregistrez le modèle dans un fichier avec un nom propre comme "inc_listcommands.htm" .
Inclure le modèle dans votre prototype avec l'attribut appml-include-html:
Exemple
<div appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<div
appml-include-html="inc_listcommands.htm" ></div>
<table
class="table table-striped table-bordered">
<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> Essayez vous - même »