Estimated reading: 4 minutes 41 views

🧱 AppML – Basic AppML Structure: Learn the Foundation of Every AppML Application

🧲 Introduction – Why Understanding AppML Structure Is Crucial

When starting with AppML (Application Modeling Language), grasping its basic structure is essential. AppML uses a declarative, HTML-first approach to connect data models with views and optional logic, all without complex tooling or JavaScript frameworks. Knowing how AppML organizes its components will help you build clean, scalable, and maintainable web apps.

🎯 In this article, you’ll learn:

The standard structure of an AppML application
Core elements: HTML, appml.js, appml-data, and controllers
File and folder layout for real-world projects
Hands-on example of a structured AppML project

🧩 Key Elements of a Basic AppML Application

Every AppML application is built around the following components:

🔧 Component	📘 Description
`appml.js`	Core JavaScript library powering AppML
`appml-data`	Attribute to specify the data source (JSON, XML, PHP)
`{{placeholders}}`	Used inside HTML to bind data fields
`appml-controller`	Optional logic handler for filtering, validation, or actions

🧪 Basic AppML HTML Template

Here’s the simplest AppML app structure using static JSON:

<!DOCTYPE html>
<html>
<head>
  <title>Basic AppML Example</title>
  <script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
</head>
<body>

<h2>Users</h2>

<div appml-data="data/users.json">
  <h4>{{name}}</h4>
  <p>{{email}}</p>
</div>

</body>
</html>

🔍 Explanation:

appml.js enables all AppML behavior.
appml-data="..." specifies the data model to bind.
{{name}} and {{email}} are placeholders replaced by data.

📂 Recommended Folder Structure

For organization and scalability, use the following layout:

/appml-app/
├── index.html
├── appml/
│   ├── controller/
│   │   └── user-controller.js
│   └── data/
│       └── users.json
├── css/
│   └── style.css
├── js/
│   └── custom.js

✅ Keep data and logic files in separate folders to maintain MVC structure.

💻 Example: AppML with Controller

You can add logic with a controller:

index.html

<div appml-data="appml/data/users.json" appml-controller="appml/controller/user-controller.js">
  <p>{{name}} – {{email}}</p>
</div>

user-controller.js

myAppML.onshow = function() {
  myAppML.filter = "email LIKE '*@example.com'";
};

✔️ This filters users by email domain.

📑 AppML Core Attributes Summary

⚙️ Attribute	💬 Use
`appml-data`	Loads data from JSON/XML/PHP
`appml-controller`	Links to a JavaScript controller file
`{{placeholder}}`	Dynamically binds data into HTML
`appml-include-html`	Includes other HTML templates/views

🧰 Real Use Case: Product Catalog Page

<div appml-data="data/products.json">
  <h3>{{name}}</h3>
  <p>Price: ${{price}}</p>
</div>

📌 This is all you need to display a list of products in your app.

📌 Summary – Recap & Key Takeaways

The basic AppML structure gives you a clear separation of data, logic, and presentation using just HTML. Once you understand this foundation, building scalable and maintainable apps becomes incredibly simple.

🔍 Key Takeaways:

Include appml.js to enable AppML functionality
Use appml-data to bind external data models (JSON/XML)
Use {{placeholders}} to inject data into HTML views
Organize your app with folders for data, controller, and views
Add logic with appml-controller when needed

⚙️ Mastering this structure sets the stage for advanced topics like form handling, CRUD apps, and cloud integrations.

❓ FAQs – AppML Structure

❓ Is the appml.js file required for every AppML app?
✅ Yes, it powers the entire AppML framework and must be included in every project.

❓ Can I include multiple appml-data blocks on one page?
✅ Absolutely. Each block will operate independently and bind its own model to its view.

❓ Do I need a controller for every AppML view?
❌ No. Controllers are optional and only needed when adding custom logic like filtering or form validation.

❓ Where should I place JSON files?
✅ Best practice is to store them inside a data/ folder to keep your project organized.

❓ Can I use AppML without internet access?
✅ Yes, by downloading appml.js locally and referencing it via a relative path.

« Previous Next »

Share Now :