En este capítulo, vamos a construir un prototipo de una aplicación web.
Crear un prototipo HTML
En primer lugar, crear un prototipo HTML decente, usando el CSS favorito.
Hemos utilizado de arranque en este ejemplo:
Ejemplo
<!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>
Inténtalo tú mismo " {{...}} son símbolos para los datos futuros.
Añadir AppML
Después de haber creado un prototipo de HTML, puede agregar AppML:
Ejemplo
<!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>
Inténtalo tú mismo " Añadir AppML:
<script src = "http://www.w3ii.com/appml/2.0.3/appml.js">
Añadir una base de datos local de WebSQL:
<script src = "http://www.w3ii.com/appml/2.0.3/appml_sql.js">
Definir una fuente de datos:
appml-datos = "customers.js"
Definir el elemento HTML que repetirse para cada registro de registros:
appml_repeat = "registros"
Para hacerlo simple, comenzar con los datos locales como customers.js antes de conectarse a una base de datos.
Crear un modelo AppML
Para poder utilizar una base de datos, se necesita un modelo de base de datos AppML:
proto_customers.js
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}Si usted no tiene una base de datos local, puede utilizar el modelo AppML para crear una base de datos SQL Web.
Para crear una tabla con un solo registro, utilice un modelo como este: proto_customers_single.js .
La creación de una base de datos local no funciona en IE o Firefox. Utilizar Chrome o Safari.
Utilizar el modelo de la aplicación. Cambiar la fuente de datos para el modelo local de proto_customers_single =?:
Ejemplo
<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> Inténtalo tú mismo " Crear una base de datos local con múltiples registros
Para crear una tabla con múltiples registros, utilice un modelo como este: proto_customers_all.js .
Cambiar la fuente de datos a local? Model = proto_customers_all
Ejemplo
<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> Inténtalo tú mismo " Añadir una plantilla de navegación
Supongamos que desea todas sus aplicaciones tengan una barra de herramientas de navegación común:
Crear una plantilla HTML para ello:
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>
Guarde la plantilla en un archivo con un nombre propio como "inc_listcommands.htm" .
Incluir la plantilla en el prototipo con el atributo appml-include-html:
Ejemplo
<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> Inténtalo tú mismo "