Foundational Concepts of TML Coding

TL;DR

TML (Tag-based Markup Language) uses tags to structure and display content. You'll learn how TML interprets these tags to build interactive interfaces. Mastering TML means understanding its core components and how they fit together.

1. The Mental Model

Think of TML like giving instructions to a display system. You're not writing code that performs actions; you're describing what should appear and how it should look. It's like writing a recipe, not a cooking program.

2. The Core Material

TML operates on a few fundamental concepts that let you describe interfaces. At its heart, TML is about elements, attributes, and the hierarchy they form.

Elements: The Building Blocks

Photo by Julia Bataeva on Pexels

An element is a piece of content, enclosed by a start tag and an end tag. For example, <text> is a start tag, and </text> is an end tag. Everything in between is the element's content.

<text>Hello, TML!</text>

Some elements are "self-closing," meaning they don't have separate start and end tags because they don't wrap content. They just represent a single item.

<image src="logo.png" />

Attributes: Customizing Elements

Photo by Pixabay on Pexels

Attributes provide additional information about an element. They are defined within the start tag (or self-closing tag) as name="value" pairs. You can have multiple attributes for a single element.

<button label="Click Me" color="blue" />

Here, label and color are attributes of the button element.

Hierarchy: Nesting Elements

Photo by Ann H on Pexels

Elements can be nested inside other elements, creating a parent-child relationship. This forms a structural hierarchy that defines how your interface is laid out. A child element is contained within its parent.

<panel>
    <text>Welcome!</text>
    <button label="Enter" />
</panel>

In this example, panel is the parent of both text and button. This nesting is crucial for organizing your UI.

graph TD
    A["TML Document"] --> B["Root Element (e.g., <screen>)"]
    B --> C["Child Element 1 (e.g., <panel>)"]
    B --> D["Child Element 2 (e.g., <list>)"]
    C --> E["Grandchild Element (e.g., <text>)"]
    C --> F["Grandchild Element (e.g., <button>)"]
    D --> G["List Item 1 (e.g., <item>)"]
    D --> H["List Item 2 (e.g., <item>)"]
    F --- "Attributes: label='OK', color='green'"
    E --- "Attributes: value='Hello'"

Rendering: From Tags to Display

Photo by Ann H on Pexels

When a TML document is processed, a "renderer" reads these tags and attributes. It then translates them into visible components on your screen. The renderer understands what a <text> tag means (display text), what an <image> tag means (load and show an image), and how color="blue" should affect a button. This translation process makes your TML file come alive as a graphical interface.

3. Worked Example

Let's build a simple greeting card interface using TML.

<screen id="greetingScreen" background-color="#F0F8FF">
    <panel orientation="vertical" padding="20" spacing="10">
        <text font-size="24" color="#8A2BE2" value="Happy Birthday!" />
        <image src="birthday_cake.png" width="150" height="150" />
        <text font-size="16" color="#4682B4" value="Wishing you a fantastic day." />
        <button label="Send Wishes" action="send_wishes" />
    </panel>
</screen>

Here, <screen> is our top-level element, setting the background for everything. Inside it, a <panel> arranges items vertically with specific spacing. Within the panel, we have two <text> elements (one for the main greeting, one for a message), an <image> for a cake, and a <button> to interact. Each element uses attributes to define its appearance or behavior, like font-size, color, src, width, height, label, and action.

4. Key Takeaways

• TML uses elements (tags) to define content sections, and attributes to customize them.
• Elements can be nested to create a hierarchical structure, which dictates UI layout.
• The renderer interprets TML tags and attributes to draw your interface.
• Understanding parent-child relationships is critical for effective TML design.
• TML is descriptive; you tell it what to display, not how to calculate.
• Every opening tag, unless self-closing, needs a corresponding closing tag.

Common Mistakes to Avoid:
- Forgetting to close an element, leading to malformed TML and rendering errors.
- Misspelling attribute names or values, which can cause elements to look wrong or behave unexpectedly.
- Not understanding the hierarchical structure, leading to UI elements appearing out of place.
- Using invalid attribute values (e.g., color="banana" instead of a valid color code or name).

5. Now Try It

Exercise: Create a TML snippet for a simple user profile display.

What to do:
1. Start with a <screen> element.
2. Inside the screen, add a <panel> for the user's information.
3. Within that panel, include:
- An <image> element for a profile picture (you can just use src="profile.png").
- A <text> element displaying a username (e.g., "Jane Doe").
- Another <text> element for a short bio (e.g., "Loves hiking and coding!").
- A <button> labeled "Edit Profile".
4. Experiment with attributes like background-color for the screen, orientation for the panel, and font-size or color for the text elements.

What success looks like: Your TML snippet should be well-formed, with correctly nested elements and attributes, clearly representing a basic profile page structure.