HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
When AppML is about to perform an action, it sends the application object ($appml) to the controller
When AppML is about to perform an action, it sends the application object ($appml) to the controller.
One of the application object's properties is a message ($appml.message), describing the application state.
Testing this message, enables you to add your own JavaScript code, depending on the action.
function myController($appml) {
if ($appml.message == "ready") {alert ("Hello
Application");}
}
This is a list of AppML messages that can be received:
Message | Description |
---|---|
"ready" | Sent after AppML is initiated, and ready to load data. |
"loaded" | Sent after AppML is fully loaded, ready to display data. |
"display" | Sent before AppML displays a data item. |
"done" | Sent after AppML is done (finished displaying). |
"submit" | Sent before AppML submits data. |
"error" | Sent after AppML has encountered an error. |
When an AppML application is ready to load data, it will send a "ready" message.
This is the perfect place to provide the application with initial data (start values):
<div appml-controller="myController" appml-data="customers.js">
<h1>Customers</h1>
<p>{{today}}</p>
<table>
<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>
<p>Copyright {{copyright}}</p>
</div>
<script>
function myController($appml) {
if ($appml.message == "ready") {
$appml.today = new Date();
$appml.copyright = "w3resource"
}
}
</script>
In the example above, when the $appml.message is "ready", the controller adds two new properties to the application (today and copyright).
When the application runs, the new properties are available to the application.
When an AppML application is loaded with data (ready to display), it will send a "loaded" message.
This is the perfect place to provide changes (if necessary) to the loaded data.
function myController($appml) {
if ($appml.message == "loaded") {
// compute your values here before display
}
}
Each time AppML is displaying a data item, it will send a "display" message.
This is the perfect place to modify the output:
<div appml_app="myController" appml-data="customers.js">
<h1>Customers</h1>
<table>
<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>
<script>
function myController($appml) {
if
($appml.message == "display") {
if ($appml.display.name ==
"CustomerName") {
$appml.display.value = $appml.display.value.substr(0,15);
}
if ($appml.display.name == "Country") {
$appml.display.value = $appml.display.value.toUpperCase();
}
}
}
</script>
In the example above, "CustomerName" is truncated to 15 characters, and "Country" is converted to upper case.
When an AppML application has finished displaying data, it will send a "done" message.
This is the perfect place to clean up or calculate application data (after display).
<script>
function myController($appml) {
if ($appml.message == "done") {
calculate data here
}
}
</script>
When an AppML application is ready to submit data, it will send a "submit" message.
This is the perfect place to validate application input.
<script>
function myController($appml) {
if ($appml.message == "submit") {
validate data here
}
}
</script>
If an error occurs, AppML will send an "error" message.
This is the perfect place to handle errors.
<script>
function myController($appml) {
if ($appml.message ==
"error") {
alert ($appml.error.number + " " + $appml.error.description)
}
}
</script>
This is a list of some commonly used AppML properties:
Property | Description |
---|---|
$appml.message | The current state of the application. |
$appml.display.name | The name of the data field about to be displayed. |
$appml.display.value | The value of the data field about to be displayed. |
$appml.error.number | The error number. |
$appml.error.description | The error description. |