Estimated reading: 3 minutes 119 views

📘 AppML – AppML Reference Manual: Your Complete Tag & Attribute Guide

🧲 Introduction – Why Use the AppML Reference Manual?

Whether you’re just starting with AppML or building complex data-driven web apps, the AppML Reference Manual is your essential cheat sheet. It covers every built-in attribute, function, and property used to connect HTML views with models, controllers, and dynamic data sources—without writing JavaScript.

🎯 In this guide, you’ll learn:

All key appml-* attributes and their syntax
Common JavaScript functions like myAppML.load()
Data binding rules with {{}}
Lifecycle events and controller hooks

🔤 Core AppML Attributes and Their Use

🏷️ Attribute	💡 Description
`appml-data`	URL of your data file or API endpoint (JSON/XML)
`appml-model`	URL of your model definition file (JSON/XML)
`appml-controller`	Path to JavaScript file that controls logic
`appml-message`	Defines where messages/alerts should be displayed
`appml-include`	Includes external HTML snippets/templates
`appml-submit`	Used on buttons to trigger form submission
`appml-datatype`	Specifies datatype for `<select>` or input elements
`appml-filter`	Filters records in real-time on the client
`appml-orderby`	Sorts the view using a field from the data

🔁 Binding Syntax with `{{}}`

AppML uses double curly braces {{field}} for binding dynamic values into your HTML. These fields must match the keys in your data source or model.

✅ Example:

<p>{{name}} – {{email}}</p>

🔄 Automatically replaced with data values during rendering.

🧪 Most Used AppML Functions (`myAppML`)

When using a controller (appml-controller), AppML provides access to a built-in object: myAppML.

✅ Core Methods and Properties

Function / Property	Description
`myAppML.load()`	Reloads the data and updates the view
`myAppML.data`	Holds the current record’s data
`myAppML.message`	Used to set feedback messages
`myAppML.filter`	Sets a filter string like SQL WHERE clause
`myAppML.sort`	Defines sort field
`myAppML.deleteRecord()`	Triggers a delete request for the current item

📦 Lifecycle Hooks for Controllers

These are JavaScript functions you can define inside your controller file:

Function	When It Executes
`oninit()`	Before data is loaded
`onshow()`	After data is loaded but before display
`onaftershow()`	After data is displayed on screen
`onvalidate()`	Before submitting form data (return false to cancel)
`onsubmit()`	Right before data is sent to the server

🗂️ Example – Reference in Action

<div 
  appml-model="models/user-model.json" 
  appml-data="api/get-users.php" 
  appml-controller="controllers/user-controller.js" 
  appml-message>
  
  <input name="name">
  <input name="email">
  <button appml-submit>Save</button>
  <p>{{name}} – {{email}}</p>
</div>

✅ This snippet combines model, data, controller, and messaging for a full AppML block.

📌 Summary – Recap & Key Takeaways

The AppML Reference Manual is your go-to for understanding how to glue data, models, and logic into a single, declarative HTML structure. These attributes and functions make it possible to build full apps—without JavaScript frameworks.

🔍 Key Takeaways:

Use appml-* attributes to load models, data, and templates
{{field}} syntax binds data into HTML
myAppML provides access to filters, messages, and form state
Lifecycle methods help manage data interaction logic
AppML is powerful, yet low-code and beginner-friendly

⚙️ With this manual, you can build, debug, and extend your AppML apps with confidence.

❓ FAQs – AppML Reference Manual

❓ Is appml-model required for all applications?
✅ No, but it’s highly recommended for structured data and validation.

❓ Can I combine multiple AppML attributes in one <div>?
✅ Yes. Most AppML blocks use appml-model, appml-data, and appml-controller together.

❓ Are all functions in myAppML available globally?
⚠️ Only inside the controller file or AppML scope, not globally.

❓ Can I add multiple appml-include on a page?
✅ Yes, and they work independently of each other.

❓ Does AppML support nested data (objects inside arrays)?
✅ Yes, but deeply nested rendering requires custom HTML logic or pre-processing.

« Previous Next »

Share Now :