AppML – Quick Guide
”; Previous Next
AppML – Overview
AppML stands for Application Modeling Language. It is developed for web application development. It extends HTML with data attributes and adds controllers to control the behavior of HTML data.
AppML is very easy to use understand and is used to make Single Page Application in an efficient way and quick manner. AppML focuses on fetching data to HTML applications from varying sources like javascript objects, json files, text files, xml files or database files.
Brief History
AppML first version was developed by Jan Egil Refsnes in 1991 and it was based on HTTP request communication between web client and web server. In february 2015, W3Schools made AppML public by re-launching it as a new product.
Design Goals
AppML is designed considering following concepts −
AppML based application will be primarily an internet based application.
It should use Internet Standards only for a web application i.e. HTML, CSS and JavaScript.
It should be platform independent.
It should be capable of handling application varying needs.
It should be easy to understand and self-descriptive.
It should be highly maintainable and easy to develop and should accomodate change easily.
It should be future ready.
Salient Features
AppML follows modern Web development by following up-to-date techniques. Following are the key features of AppML.
Low Cost of development and maintainance.
Facilitate Rapid and Agile Web Development.
It is optimized for cloud computing.
It is very fast and supports low bandwidth consumption.
Follows MVC (Model View Controller) Architecture.
Data layer can be completely separated from presentation layer.
Highly scalable.
Highly Testable.
Easy to configure or reconfigure.
AppML – Environment
It is very easy to use AppML. Simply refer the JavaScript file using <script> tag in HTML pages and deploy on a web server.
Web Server − PHP works with virtually all Web Server software, including Microsoft”s Internet Information Server (IIS) but most often used is Apache Server. Download Apache for free here − https://httpd.apache.org/download.cgi
appml.js can be accessed in the following ways −
You can download appml.js from its official website
Now refer the file as shown in the following code.
<script type = ”text/javascript” src = ”appml.js”></script>
Update the src attribute to match the location where the downloaded files are kept.
You can refer to the appml.js library from W3Schools directly −
<script src = “https://www.w3schools.com/appml/2.0.3/appml.js”
type = “text/javascript”></script>
Note − In all the chapters for this tutorial, we have referred to W3Schools version of the AppML library.
Example
AppML is based on Model-View-Controller (MVC) pattern. Let”s take a look at a simple example of AppML.
<!DOCTYPE html>
<html lang=”en-US”>
<title>Students</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
<script src=”https://www.w3schools.com/appml/2.0.3/appml.js”></script>
<body>
<table appml-data=”students”>
<tr>
<th>Student</th>
<th>Class</th>
<th>Section</th>
</tr>
<tr appml-repeat=”records”>
<td>{{studentName}}</td>
<td>{{class}}</td>
<td>{{section}}</td>
</tr>
</table>
<script>
var students = {
“records”:[
{“studentName”:”Ramesh”,”class”:”12″,”section”:”White”},
{“studentName”:”Suresh”,”class”:”12″,”section”:”Red”},
{“studentName”:”Mohan”,”class”:”12″,”section”:”Red”},
{“studentName”:”Robert”,”class”:”12″,”section”:”Red”},
{“studentName”:”Julie”,”class”:”12″,”section”:”White”},
{“studentName”:”Ali”,”class”:”12″,”section”:”White”},
{“studentName”:”Harjeet”,”class”:”12″,”section”:”White”}
]};
</script>
</body>
</html>
The following line refers to AppML library.
<script src = “https://www.w3schools.com/appml/2.0.3/appml.js”
type = “text/javascript”> </script>
This line refers AppML library.
We have added an attribute app-data to table to refers to students object. It can be json, txt, xml or even database model.
<p>First String: < input data-bind = “value: firstString” /> </p>
This is how we are binding values from ViewModel to HTML elements using ”app-data” attribute in the body section.
Output
Save the above code as my_first_appml_program.html. Open this file in your browser and you will see an output as the following.
Download appml.php
Download the file from W3Schools https://www.w3schools.com/appml/2.0.3/appml.php.txt Copy the file to your web site and rename it to appml.php. It will be used to load appml model in coming examples.
appml_config.php
Create appml_config.php with following contents.
<?php echo(“Access Forbidden”);exit();?>
{
“dateformat” : “yyyy-mm-dd”
}
AppML – Architecture
AppML uses MVC architecture. Following is a brief introduction to MVC Architecture.
The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application. MVC is one of the most frequently used industry-standard web development framework to create scalable and extensible projects.
MVC Components
Following are the components of MVC −
Model
The Model component corresponds to all the data-related logic that the user works with. This can represent either the data that is being transferred between the View and Controller components or any other business logic-related data. For example, a Customer object will retrieve the customer information from the database, manipulate it and update it data back to the database or use it to render data.
View
The View component is used for all the UI logic of the application. For example, the Customer view will include all the UI components such as text boxes, dropdowns, etc. that the final user interacts with.
Controller
Controllers act as an interface between Model and View components to process all the business logic and incoming requests, manipulate data using the Model component and interact with the Views to render the final output. For example, the Customer controller will handle all the interactions and inputs from the Customer View and update the database using the Customer Model. The same controller will be used to view the Customer data.
AppML Model
AppML defines a model as JSON and it is used to describe the application. Being plain text based, the model is platform independent