The purpose of an AppML controller, is to let you control your application.
What Can a Controller Do?
- Set initial data
- Change application data
- Handle input and output
- Validate data
- Summarize data
- Handle errors
- Start and stop applications
- And much more
Without a Controller
By default AppML applications run without a controller:
Example
<table appml-data="customers.js">
<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>
Try It Yourself »
With a Controller
With an AppML controller, you can control your application with JavaScript.
The controller is a JavaScript function, provided by you.
The appml-controller attribute is used to refer to a controller function.
Example
<h1>Customers</h1>
<table appml-data="customers.js" appml-controller="myController">
<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>
<script>
function myController($appml) {
if ($appml.message == "display") {
if ($appml.display.name == "CustomerName")
{
$appml.display.value = $appml.display.value.toUpperCase();
}
}
}
</script>
Try It Yourself »
The controller (myControlller) in the example above, changes the value of "CustomerName" to uppercase, before it is displayed.
If you have a controller, AppML will send the application object ($appml) to the controller, for every important action.
One of the application properties is a message ($appml.message), describing the application state.
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. |
Messages are explained in the next chapter.