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 pbrary 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 pbrary.

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-apgn: 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":"Jupe","class":"12","section":"White"},
         {"studentName":"Ap","class":"12","section":"White"},
         {"studentName":"Harjeet","class":"12","section":"White"}
   ]};
   </script>
</body>
</html>

The following pne refers to AppML pbrary.


<script src = "https://www.w3schools.com/appml/2.0.3/appml.js" 
   type = "text/javascript"> </script>

This pne refers AppML pbrary.

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" /> &lt/p>

This is how we are binding values from ViewModel to HTML elements using appml-data attribute in the body section.

Output

Save the above code as my_first_appml_program.html. Deploy the files on a web server and access the file. Verify the output.

Download appml.php

Download the file from W3Schools 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 - Environment

Example

Output

Download appml.php

appml_config.php

友情链接