In questo capitolo, costruiremo un prototipo per un'applicazione web.
Creazione di un prototipo HTML
In primo luogo, creare un prototipo HTML decente, utilizzando il CSS preferito.
Abbiamo usato bootstrap in questo esempio:
Esempio
<!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>
Prova tu stesso " {{...}} sono segnaposto per dati futuri.
Aggiungere AppML
Dopo aver creato un prototipo di HTML, è possibile aggiungere AppML:
Esempio
<!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>
Prova tu stesso " Aggiungere AppML:
<script src = "http://www.w3ii.com/appml/2.0.3/appml.js">
Aggiungere un database WebSQL locale:
<script src = "http://www.w3ii.com/appml/2.0.3/appml_sql.js">
Definire una sorgente dati:
appml-dati = "customers.js"
Definire l'elemento HTML da ripetere per ogni record in record:
appml_repeat = "record"
Per farla semplice, iniziare con i dati locali come customers.js prima di connettersi a un database.
Creazione di un modello AppML
Per essere in grado di utilizzare un database, avrete bisogno di un modello di database AppML:
proto_customers.js
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}Se non si dispone di un database locale, è possibile utilizzare il modello AppML per creare un database di SQL Web.
Per creare una tabella con un singolo record, utilizzare un modello come questo: proto_customers_single.js .
Creazione di un database locale non funziona in IE o Firefox. Utilizzare Chrome o Safari.
Utilizzare il modello nell'applicazione. Modificare l'origine dati di locali modello = proto_customers_single?:
Esempio
<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> Prova tu stesso " Creare un database locale con più record
Per creare una tabella con più record, utilizzare un modello come questo: proto_customers_all.js .
Modificare l'origine dati al locale? Modello = proto_customers_all
Esempio
<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> Prova tu stesso " Aggiungere un modello di navigazione
Si supponga di voler tutte le applicazioni per avere una barra degli strumenti di navigazione comuni:
Creare un modello HTML per esso:
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>
Salva il modello in un file con un nome proprio come "inc_listcommands.htm" .
Includere il modello in vostro prototipo con l'attributo appml-include-html:
Esempio
<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> Prova tu stesso "