X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

<AppML> Case Study - HTML Templates


This case study demonstrates how to build a full <AppML> Internet application, with functions for listing, editing, and searching information from several tables in a database.


Adding HTML Templates

In this chapter we will demonstrate how to add HTML templates to HTML pages.


List Customers

HTML - View

<h1>Customers</h1>

<div id="List01"></div><br>

<table id="Template01" class="appmltable" style="display:none">
<tr>
  <th>Customer</th>
  <th>City</th>
  <th>Country</th>
</tr>
<tr id="appml_row">
  <td>#CustomerName#</td>
  <td>#City#</td>
  <td>#Country#</td>
</tr>
</table>

<script src="appml.js"></script>
<script>
var customers
customers=new AppML("appml.aspx","Models/Customers");
customers.run("List01","Template01");
</script>

Try it yourself »


List Customers and Customers Forms

Links between <AppML> list objects, and <AppML> forms can easily be added, using clever templates:

HTML - View

<h1>Customers</h1>
<div id="Form01"></div><br>
<div id="List01"></div><br>

<table id="Template01" class="appmltable" style="width:100%;display:none">
<tr>
<th></th>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr id="appml_row">
<td style="cursor:pointer" onclick="openForm('#CustomerID#')">
<img src="images/appmlFolder.png"></td>
<td>#CustomerName#</td>
<td>#City#</td>
<td>#Country#</td>
</tr>
</table>

<script src="appml.js"></script>
<script>
var customers,customerForm;
customers=new AppML("appml.aspx","Models/Customers");
customers.run("List01","Template01");

function openForm(id)
{
customerForm=new AppML("appml.aspx","Models/Customers");
customerForm.displayType="form";
customerForm.run("Form01","",id);
}
</script>

Try it yourself »


List Customers and Customers Orders

Links between <AppML> list objects and linked lists, can easily be added, using clever templates:

HTML - View

<h1>Customers</h1>
<div id="List01"></div><br>
<div id="Orders01"></div><br>

<table id="Template01" class="appmltable" style="width:100%;display:none">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
<th></th>
</tr>
<tr id="appml_row">
<td>#CustomerName#</td>
<td>#City#</td>
<td>#Country#</td>
<td><a href='' onclick='openOrders("#CustomerID#");return false;'>Orders</a></td>
</tr>
</table>

<table id="Template02" class="appmltable" style="width:100%;display:none">
<tr>
<th>Customer</th>
<th>Date</th>
<th>Salesperson</th>
<th>Shipper</th>
</tr>
<tr id="appml_row">
<td>#CustomerName#</td>
<td>#OrderDate#</td>
<td>#Salesperson#</td>
<td>#ShipperName#</td>
</tr>
</table>

<script src="appml.js"></script>
<script>
var customers,orders;
customers=new AppML("appml.aspx","Models/Customers");
customers.run("List01","Template01");
function openOrders(id)
{
orders=new AppML("appml.aspx","Models/Orders");
orders.setQuery("orders.customerid",id);
orders.commands=false;
orders.run("Orders01","Template02");
}
</script>

Try it yourself »


All Together Now

Finally, with a little code copying, we can finalize the project.

Customers List, Form, and Orders

<h1>Customers</h1>

<div id="List01">
<table id="appml_list" class="appmllist">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
<th></th>
</tr>
<tr id="appml_row">
<td>#CustomerName#</td>
<td>#City#</td>
<td>#Country#</td>
<td><a href='' onclick='openOrders("#CustomerID#");return false;'>Orders</a></td>
</tr>
</table>
</div>

<div id="List02"></div>

<script src="appml.js"></script>
<script>
var Customers,Orders
Customers=new AppML("appml.aspx","Models/Customers");
Customers.run("List01");

function openOrders(id)
{
var Orders=new AppML("appml.aspx","Models/Orders");
Orders.setQuery("orders.customerid",id);
Orders.commands=false;
Orders.run("List02");
}
</script>

Try it yourself »

In the next chapters, you can see more applications with full source code.




Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook