WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AppML Prototype


In this part, we will fabricate a model for a web application.


Create a HTML Prototype

First, make a respectable HTML prototype, utilizing your top choice CSS.

We have utilized bootstrap in this example:

Example

<!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>
{{ ... }} Are placeholders for future information.

Add AppML

After you have made a HTML model, you can include AppML:

Example

<!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.welookups.com/appml/2.0.3/appml.js"></script>
<script src="http://www.welookups.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>

Add AppML:

<script src="http://www.welookups.com/appml/2.0.3/appml.js">

Add a neighborhood WebSQL database:

<script src="http://www.welookups.com/appml/2.0.3/appml_sql.js">

Define an information source:

appml-data="customers.js"

Define the HTML component to be rehashed for each record in records:

appml_repeat="records"

To make it basic, begin with neighborhood information like customers.js before associating with a database.

Create an AppML Model

To have the capacity to utilize a database, you will require an AppML database model:

proto_customers.js

{
"rowsperpage" : 10,
"database" : {
"connection" : "localmysql",
"sql" : "Select * from Customers",
"orderby" : "CustomerName",
}

If you don't have a nearby database, you can utilize the AppML model to make a Web SQL database.

To make a table with a solitary record, utilize a model this way: proto_customers_single .

Use the model in your application. Change the information source to local?model=proto_customers_single:

Example

<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>

Create a Local Database with Multiple Records

To make a table with various records, utilize a model this way: proto_customers_all.js.

Change the information source to local?model=proto_customers_all

Example

<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>

Add a Navigation Template

Suppose you need every one of your applications to have a typical route toolbar:

Create a HTML layout for it:

inc_listcommands.htm

<div class="btn-gathering" role="toolbar" style="margin-bottom:10px;">

  <button id='appmlbtn_first' type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-quick 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-quick 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>

Save the layout in a document with an appropriate name like "inc_listcommands.htm".

Include the layout in your model with the characteristic appml-incorporate html:

Example

<div appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<div appml-incorporate 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>