AppML Data

The main purpose of AppML is to provide data to HTML pages

Connecting AppML to Data

  • AppML can display data from variables
  • AppML can display data from files
  • AppML can display data from databases
  • AppML Using a JavaScript Object

    A common way to separate HTML and Data, is to store the data in a JavaScript object.

    Example

    <table appml-data="dataObj">
    <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>
    var dataObj = {
    "records":[
    {"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
    {"CustomerName":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
    {"CustomerName":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
    {"CustomerName":"Around the Horn","City":"London","Country":"UK"},
    {"CustomerName":"B's Beverages","City":"London","Country":"UK"},
    {"CustomerName":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
    {"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
    {"CustomerName":"Blondel père et fils","City":"Strasbourg","Country":"France"},
    {"CustomerName":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
    {"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
    {"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
    {"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
    {"CustomerName":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
    {"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
    {"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
    ]};
    </script>

    AppML Using a JSON File

    Another common way to separate HTML and Data, is to store the data in a JSON file:

    customers.js

    {
    "records":[
    {"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
    {"CustomerName":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
    {"CustomerName":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
    {"CustomerName":"Around the Horn","City":"London","Country":"UK"},
    {"CustomerName":"B's Beverages","City":"London","Country":"UK"},
    {"CustomerName":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
    {"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
    {"CustomerName":"Blondel père et fils","City":"Strasbourg","Country":"France"},
    {"CustomerName":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
    {"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
    {"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
    {"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
    {"CustomerName":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
    {"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
    {"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
    ]
    }

    With AppML, you can specify a JSON file as the data source in the appml-data attribute:

    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>

    AppML Using a Database

    With a little help from a web server, you can feed your application with SQL data.

    This example uses PHP to read data from a MySQL database:

    Example

    <table appml-data="/appml/customers">
    <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>

    The Power of AppML

    You are about to discover the power of AppML.

    AppML can provide you with data, controllers, and models for:

  • Super-easy HTML Application Development
  • Super-easy Modeling, Prototyping, and Testing
  • You can put as many AppML applications as you like inside an HTML page.

    AppML does not interfere with other parts of the page.

    You have full HTML, CSS, and JavaScript freedom.

    AppML can be used to develop full scale CRUD web applications.

    CRUD: Create, Read, Update, Delete.