🧰 AppML – Prototypes and Templates: Build Reusable and Dynamic UI Blocks

🧲 Introduction – What Are Prototypes and Templates in AppML?

AppML makes it easy to reuse UI components across pages using prototypes and templates. These features allow you to separate logic from layout, reduce redundancy, and create dynamic content blocks that update automatically when data changes.

🎯 In this guide, you’ll learn:

• What prototypes and templates mean in AppML
• How to use appml-include for reusable HTML blocks
• How to define template-driven rendering for lists and forms
• Best practices for building dynamic, maintainable web components with AppML

---

🧱 What Are Prototypes and Templates in AppML?

Term	Definition
Prototype	A reusable base layout or UI structure loaded into multiple pages
Template	A block of HTML that gets repeated for each data record using {{ }}

AppML allows you to include prototype files and define repeatable templates for rendering data-driven content without writing any JavaScript.

---

📁 Basic Example – Using appml-include

You can use appml-include to insert reusable HTML sections like headers, footers, or UI forms.

✅ header.html

<header>
  <h1>My AppML Application</h1>
</header>

✅ Usage in Main Page

<div appml-include="header.html"></div>

This injects the entire content of header.html into the page—ideal for navigation bars, page headers, or standard footers.

---

📑 Template Example – Displaying a List of Records

AppML uses HTML blocks containing {{ }} expressions as inline templates to render each record.

✅ Sample Data – data/products.json

[
  { "id": 1, "name": "Laptop", "price": 1200 },
  { "id": 2, "name": "Phone", "price": 800 }
]

✅ Main Page

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

Each <p> block is treated as a template and rendered for each object in the JSON array.

---

📦 Using Templates with Models and Controllers

You can combine templates with models for structured layout and validation:

<div 
  appml-data="data/products.json" 
  appml-model="models/product-model.json" 
  appml-controller="controllers/product.js">
  
  <h2>Product List</h2>
  <p>{{name}} – ${{price}}</p>
</div>

✔️ This pattern helps keep logic, structure, and layout modular and reusable.

---

🧩 Prototypes vs Templates – What’s the Difference?

Feature	Prototypes	Templates
Purpose	Reuse layout/UI across pages	Repeat HTML block for each data record
Keyword Used	appml-include="file.html"	Inline {{ }} inside appml-data blocks
Usage	Navigation, forms, headers, footers	Lists, tables, item displays
Scope	Across full application	Within a data-bound component

---

🔍 Dynamic Template Example – Filtering Product Templates

<input placeholder="Filter by price" 
       oninput="myAppML.filter='price > '+this.value">

The template dynamically updates as users interact with the input.

---

🧠 Best Practices for Prototypes and Templates

✅ Practice	📌 Benefit
Use appml-include for shared elements	Promotes DRY (Don’t Repeat Yourself)
Define one template block per data source	Prevents confusion and layout bugs
Use semantic HTML inside templates	Improves SEO and accessibility
Keep templates short and data-focused	Makes it easier to style and maintain
Store includes in a separate folder	Example: /components/header.html

---

📌 Summary – Recap & Key Takeaways

AppML provides powerful support for prototypes and templates, letting you build reusable layouts and repeatable data blocks in a clean, declarative way. Whether you’re including headers or displaying 100 product cards, these features make development faster and more organized.

🔍 Key Takeaways:

• Use appml-include to inject reusable layouts like headers or footers
• Use {{ }} inside containers bound to appml-data for templated rendering
• Templates auto-repeat per data record—no loops or JS required
• Pair templates with models/controllers for enhanced interactivity
• Great for lists, grids, dashboards, and admin interfaces

⚙️ Mastering AppML templates and prototypes helps you scale apps without cluttering your HTML or relying on complex logic.

---

❓ FAQs – AppML Prototypes and Templates

---

❓ Can I include multiple templates in one file?
✅ Yes, but only one template block will be used per data-bound component. Use clear separation.

---

❓ Do appml-include blocks support nested includes?
✅ Yes. You can include a file that itself uses appml-include.

---

❓ Can I apply different templates to different data types?
✅ Yes. Simply create different <div appml-data="..."> blocks and design each layout uniquely.

---

❓ Can I reuse a form as a prototype?
✅ Absolutely. Wrap your form in a separate file and include it with appml-include.

---

❓ Does appml-include load content synchronously?
✅ Yes. It loads HTML into the DOM when AppML initializes the page.

---

Share Now :