WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AppML How To


This chapter will demonstrate how to create in the following 4 simple steps <AppML>s application。

The next chapter will explain how to download <AppML>And start developing web applications on your own computer.

1. Create a Model (Model)

Create a file with the following

<appml>

<datasource>
<database>
  <connection>Demo</connection>
  <sql>SELECT CustomerName,ContactName,City,Country FROM Customers</sql>
  <orderby>CustomerName</orderby>
</database>
</datasource>

<filters>
  <query>
  <field>CustomerName</field>
  </query>
</filters>

</appml>

Save this file as Customers.xml in a subdirectory Models (we recommend).


Model Analysis

<appml>Tags define the model.

<datasource>Tags define the data source for the model。

<database>Tag definition database。

<connection>Tag definition database link。

<sql>Tag definition data query

<orderby>Tags define the default ordering.

<query>Tags define valid query filters.

HTML

<!DOCTYPE html>
<html lang="en-US">
<link rel="stylesheet" href="style.css">
<title>Customers</title>
<body>

<h1>Customers</h1>

<table>
<tr>
  <th>Customer</th>
  <th>City</th>
  <th>Country</th>
</tr>
<tr>
  <td>{{CustomerName}}</td>
  <td>{{City}}</td>
  <td>{{Country}}</td>
</tr>
</table>

</body>
</html>
The {{ }} brackets are placeholders for AppML data.

CSS

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="appml.css">
</head>

<body>
<h1>My First Web Application</h1>

<table class="appmltable">
<tr>
  <th>Customer</th>
  <th>City</th>
  <th>Country</th>
</tr>
<tr>
  <td>Alfreds Futterkiste</td>
  <td>Berlin</td>
  <td>Germany</td>
</tr>
</table>

</body>
</html>

2. Include AppML

Use AppML to add information to your page:

Example

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="appml.css">
</head>

<body>
<h1>My First Web Application</h1>

<div id="Place01">

<table id="Template01" class="appmltable">
<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>
</div>

<script src="appml.js"></script>
<script>
app=new AppML("appml.htmlx","Models/Customers.xml");
app.run("Place01","Template01");
</script>


</body>
</html>

Instance analysis

<AppML> The library contains a large number of functions. These functions can be called from your web page.

<script src="appml.js"> Loaded <AppML> Library.

JavaScript statement: app = new AppML ("appml.htmlx", "Models /Customers.xml"); Create an AppML application object, Then execute the web server script "appml.htmlx" to load the data of the "Customers.xml" file.

JavaScript statement app.run ("Place01", "Template01"); Inserts data into the HTML element with id = "Place01", Use the id = "Template01" attribute element as a template.

The attribute id = "appml_row" defines the insertion of each piece of data into an HTML element.

The data in the

# tag is replaced with data from the model.

All of the above, can you imagine faster prototypes?


How does it work?

  • When the web page loads, you can load it in the page <AppML> Controller.
  • Use <AppML> Controller, you can create pages again <AppML> Object.
  • When you run in the page <AppML> Object, it will request the server data controller.
  • <AppML> The object receives data from the server (using the data model).
  • <AppML> The object (or your code) displays the data on the page.
  • (Optional) Web users can change data.
  • (optional) <AppML> Data can be sent in the background of the server.
  • (Optional) The server controller can store data on the server.

No restrictions

You can add <AppML> Objects are placed in HTML pages. <AppML> Does not affect other parts of the page.

<AppML> The default display page when the scheme page does not exist. This is the perfect quick prototype.

but <AppML> The main function is not for display of pages. <AppML> Mainly read Application data. The data it brings can be freely designed using HTML, CSS, and JavaScript. You can:

  • Write your own HTML and let AppML process the data.
  • Invoke the model and process all displays.
  • Use AppML attributes and methods to create other combinations。 

You will soon find <AppML>With powerful functions, it can provide data and data models for your web applications. You can:

  • Define data security for users or user groups
  • Connect to all types of databases, such as Access, MySQL, SQL, and Oracle
  • Concatenate XML and Text files
  • Define data type, data format, data limit.
  • Add any new elements to the model.