AppML - Models-alljchome-开发者的教程家园

AppML Tutorial

Selected Reading

AppML - Models

AppML Model describes an apppcation. It is a JSON based format and we can define following functionapties.

Syntax


<table appml-data="local?model=model_students"></span>

Here model_students.js is the AppML data model file.

model_students.js


{
"rowsperpage" : 10,
"database" : {
   "connection" : "localsql",
   "sql" : "SELECT studentName, class, section FROM Students",
   "orderby" : "StudentName"
},
"filteritems" : [
   {"item" : "studentName", "label" : "Student"},
   {"item" : "class"},
   {"item" : "section"}
],
"sortitems" : [
   {"item" : "studentName", "label" : "Student"},
   {"item" : "class"},
   {"item" : "section"}
]
}

Following are the common uses of AppML models.

Define database connections to MySQL, Sql Server, MS Access and Oracle.

Define connection to access files pke JSON, XML, csv based text file.

Define SQL statements for CRUD (Create, Read, Update, Delete) operations.

Apply Filter/Sorting restrictions on table.

Define data types, data formats and restrictions on them.

Apply security on apppcation users. Define user groups.

Example Apppcation

Following example shows the usage of AppML model to fetch data from a csv based text file.

Step 1: Create Data

The first step is to create a csv based data file which will provide records to be displayed in apppcation UI. Create a students-records.txt

students_records.txt


Ramesh,12,White,
Suresh,12,Red,
Mohan,12,Red,
Robert,12,Red,
Jupe,12,White,
Ap,12,White,
Harjeet,12,White,

Step 2: Create Model

Create student_model.js file which will act as model to describe record.


{
   "rowsperpage" : 7,
   "data" : {
      "type" : "csvfile",
      "filename" : "students_records.txt",
      "items" : [
         {"name" : "studentName", "index" : 1},
         {"name" : "class", "index" : 2},
         {"name" : "section", "index" : 3}
      ]
   }
}

student_apppcation.html


<!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="appml.php?model=students_model">
      <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>
</body>
</html>

Output

Deploy the apppcation on Web Server and access the html page. Verify the output.