Dalam bab ini, kita akan membangun sebuah prototipe untuk sebuah aplikasi web.
Buat Prototype HTML
Pertama, membuat HTML prototipe yang layak, menggunakan CSS favorit Anda.
Kami telah menggunakan bootstrap dalam contoh ini:
Contoh
<!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>
Cobalah sendiri " {{...}} Apakah placeholder untuk data masa depan.
menambahkan AppML
Setelah Anda membuat prototipe HTML, Anda dapat menambahkan AppML:
Contoh
<!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>
Cobalah sendiri " Menambahkan AppML:
<script src = "http://www.w3ii.com/appml/2.0.3/appml.js">
Menambahkan database WebSQL lokal:
<script src = "http://www.w3ii.com/appml/2.0.3/appml_sql.js">
Mendefinisikan sumber data:
appml-data = "customers.js"
Mendefinisikan elemen HTML harus diulang untuk setiap record dalam catatan:
appml_repeat = "catatan"
Untuk membuatnya sederhana, mulai dengan data lokal seperti customers.js sebelum terhubung ke database.
Buat Model AppML
Untuk dapat menggunakan database, Anda akan memerlukan sebuah model database AppML:
proto_customers.js
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}Jika Anda tidak memiliki database lokal, Anda dapat menggunakan model AppML untuk membuat database SQL Web.
Untuk membuat tabel dengan rekor tunggal, menggunakan model seperti ini: proto_customers_single.js .
Membuat database lokal tidak bekerja di IE atau Firefox. Gunakan Chrome atau Safari.
Menggunakan model dalam aplikasi Anda. Mengubah sumber data untuk lokal model = proto_customers_single?:
Contoh
<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> Cobalah sendiri " Membuat Database lokal dengan Multiple Rekaman
Untuk membuat tabel dengan beberapa catatan, menggunakan model seperti ini: proto_customers_all.js .
Mengubah sumber data untuk lokal? Model = proto_customers_all
Contoh
<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> Cobalah sendiri " Tambahkan Template Navigasi
Misalkan Anda ingin semua aplikasi Anda untuk memiliki toolbar navigasi umum:
Membuat template HTML untuk itu:
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>
Simpan template dalam file dengan nama yang tepat seperti "inc_listcommands.htm" .
Sertakan template dalam prototipe Anda dengan atribut appml-termasuk-html:
Contoh
<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> Cobalah sendiri "