Prototipo de AppML
En este capítulo, construiremos un prototipo para una aplicación web.
Crear un prototipo HTML
Primero, crea un prototipo HTML decente , usando tu CSS favorito.
Hemos usado W3.CSS en este ejemplo:
Ejemplo
<!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>
{{ ... }} Son marcadores de posición para datos futuros.
Añadir aplicación ML
Después de haber creado un prototipo HTML, puede agregar AppML:
Ejemplo
<!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>
Añadir AppML:
<script src="https://www.w3schools.com/appml/2.0.3/appml.js">
Agregue una base de datos WebSQL local:
<script src="https://www.w3schools.com/appml/2.0.3/appml_sql.js">
Defina una fuente de datos:
appml-data="clientes.js"
Defina el elemento HTML que se repetirá para cada registro en registros:
appml_repeat="registros"
Para hacerlo simple, comience con datos locales como antes de conectarse a una base de datos.
Crear un modelo de AppML
Para poder utilizar una base de datos, necesitará un modelo de base de datos AppML:
proto_clientes.js
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}
Si no tiene una base de datos local, puede usar el modelo AppML para crear una base de datos Web SQL.
Para crear una tabla con un solo registro, use un modelo como este: .
La creación de una base de datos local no funciona en IE o Firefox. Usa Chrome o Safari.
Utilice el modelo en su aplicación. Cambie la fuente de datos a local?model=proto_customers_single :
Ejemplo
<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>
Crear una base de datos local con múltiples registros
Para crear una tabla con varios registros, use un modelo como este: .
Cambiar la fuente de datos a local?model=proto_customers_all
Ejemplo
<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>
Agregar una plantilla de navegación
Suponga que desea que todas sus aplicaciones tengan una barra de herramientas de navegación común:
Cree una plantilla HTML para ello:
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>
Guarde la plantilla en un archivo con un nombre propio como "inc_listcommands.htm".
Incluya la plantilla en su prototipo con el atributo appml-include-html :
Ejemplo
<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>