- In my previous post we have introduced with AppML. We will explore more in this post.
- In this post we will learn about controller provided by AppML.
- The project structure for this demo is as follows:-
- The students.json file is used as a data source for this demo.The content of student.json file is as follows:-
{
"list":[
{"name":"Sandeep", "country":"India","score":75},
{"name":"John", "country":"UK","score":54},
{"name":"Miller", "country":"US","score":24},
{"name":"Bapi", "country":"India","score":71},
{"name":"Tushar", "country":"UK","score":51},
{"name":"Roji", "country":"US","score":22}
]
}
- The index.html contains the code rendering student data in a table.It also contains a controller which checks the score field and determines PASS or FAIL status.If score is less then 30 then student is FAIL else student is PASS.The name of the controller is myController and defined by appml-controller attribute.The code content of index.html file is as follows:-
<!DOCTYPE html>
<html>
<head>
<title>W3 AppML Modeling Language Example</title>
</head>
<body >
<div appml-data="students.json" appml-controller="myController">
<table border="1">
<tr>
<th>Name</th>
<th>Country</th>
<th>Score</th>
</tr>
<tr appml-repeat="list">
<td>{{name}}</td>
<td>{{country}}</td>
<td>{{score}}</td>
</tr>
</table>
</div>
</body>
<script src="appml.js"></script>
<script>
function myController($appml) {
if ($appml.message == "display") {
if ($appml.display.name == "score") {
var score = $appml.display.value ;
if(score< 30){
$appml.display.value += " <b>FAIL</b>";
}else{
$appml.display.value += " PASS";
}
}
}
}
</script>
</html>
- The output of this demo looks like following screenshot:-
- The demo code can be downloaded from the following link:-
https://github.com/saan1984/AppMLDemo2
