Understanding the Element Hierarchy

Understanding Oorian's element hierarchy is key to using the framework effectively. This article explains the class structure and when to use each base class.

The Hierarchy

Element (abstract base)
    └── StyledElement (adds CSS class methods)
        └── HtmlElement (adds HTML-specific features)
            └── Concrete elements (Div, Span, Button, etc.)

Element: The Foundation

Element is the abstract base class. You should never instantiate it directly. It provides:

• Tag name and attributes
• Child element management
• Text content
• Basic styling via addStyleAttribute()

StyledElement: CSS Class Support

StyledElement adds methods for CSS class manipulation:

// addClass() and removeClass()
element.addClass("active");
element.addClass("btn btn-primary");
element.removeClass("disabled");

Use StyledElement when you need dynamic CSS class management.

Concrete Element Classes

Always use concrete subclasses for HTML elements:

// Correct
Div container = new Div();
Span label = new Span();
Button button = new Button("Click");
TextInput input = new TextInput();

// Incorrect - never instantiate Element directly
Element div = new Element("div");  // Don't do this

Input Type Subclasses

For input elements, use type-specific classes:

// Correct
TextInput text = new TextInput();
Checkbox check = new Checkbox();
RadioButton radio = new RadioButton();

// Incorrect
Input input = new Input();
input.addAttribute("type", "checkbox");  // Don't do this

Creating Custom Components

When creating custom components, choose the right base class:

// For simple containers
public class Card extends Div { }

// When you need CSS class manipulation
public class ToggleButton extends StyledElement
{
    public void setActive(boolean active)
    {
        if (active)
        {
            addClass("active");
        }
        else
        {
            removeClass("active");
        }
    }
}

Conclusion

Understanding the element hierarchy helps you make the right choices: use concrete element classes, leverage StyledElement for dynamic CSS classes, and extend the appropriate base class for custom components.