W tym rozdziale będziemy budować prototyp aplikacji internetowej.
Załóż Prototype HTML
Po pierwsze, stworzenie godnej prototyp HTML, za pośrednictwem swojego ulubionego CSS.
Użyliśmy bootstrap w poniższym przykładzie:
Przykład
<!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>
Spróbuj sam " {{...}} Czy zastępcze dla przyszłych danych.
Dodaj AppML
Po utworzeniu prototypu HTML, można dodać AppML:
Przykład
<!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>
Spróbuj sam " Dodaj AppML:
<script src = "http://www.w3ii.com/appml/2.0.3/appml.js">
Dodaj do lokalnej bazy danych WebSQL:
<script src = "http://www.w3ii.com/appml/2.0.3/appml_sql.js">
Definiowanie źródła danych:
appml transmisji danych = "customers.js"
Definiowanie elementu HTML, należy powtórzyć dla każdego rekordu w dokumentacji:
appml_repeat = "rekordy"
Żeby było proste, zacznij od lokalnych danych, takich jak customers.js przed podłączeniem do bazy danych.
Tworzenie modelu AppML
Aby móc korzystać z bazy danych, trzeba będzie model bazy AppML:
proto_customers.js
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}Jeśli nie masz lokalnej bazy danych, można użyć modelu AppML do stworzenia internetowej bazy danych SQL.
Aby utworzyć tabelę z jednego rekordu, należy użyć modelu takiego: proto_customers_single.js .
Tworzenie lokalnej bazy danych nie działa w IE lub Firefox. Użyj Chrome lub Safari.
Użyj modelu w aplikacji. Zmiany źródła danych do lokalnej Model = proto_customers_single?:
Przykład
<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> Spróbuj sam " Tworzenie lokalnej bazy danych z wielu rekordów
Aby utworzyć tabelę z wielu rekordów, należy użyć modelu takiego: proto_customers_all.js .
Zmień źródło danych do lokalnej? Model = proto_customers_all
Przykład
<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> Spróbuj sam " Dodaj szablon nawigacyjny
Załóżmy, że chcesz wszystkie aplikacje mają wspólny pasek nawigacji:
Utworzyć szablon HTML dla niego:
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>
Zapisz szablon w pliku o nazwie typu właściwego "inc_listcommands.htm" .
Zawierać szablon w swoim prototypie z atrybutem appml-to-html:
Przykład
<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> Spróbuj sam "