BMC/UUP-WEB-COMPONENT - Tutorial

Properties

Widgets makes some common used property groups accessable using shortcut names (like the color class). The full set of property groups are accessable using props:

    // 
    // Using color->back is a shortcut for props->color->back:
    // 
    $button = new Button("Download");
    $button->color->back = "red";
    $button->props->color->back = "red";
    $button->render();          // <button class="w3-btn w3-red">Download</button>

The color, hover and border classes are accessable using shortcut. Use props to access other property groups as padding or margin.

Attributes

The attr collection can be used to set HTML attributes:

    // 
    // Set fore- and background color:
    // 
    $button = new Button("Download");
    $button->attr->color = "yellow";
    $button->attr->set("background-color", "red");
    $button->render();          // <button color="yellow" background-color="red">Download</button>

Attributes are either set using set() or using the magic set method. It's also possible to use underscore for attribute names containing '-':

    // 
    // Set fore- and background color:
    // 
    $button = new Button("Download");
    $button->attr->color = "yellow";
    $button->attr->background_color = "red";
    $button->render();          // <button color="yellow" background-color="red">Download</button>

When using attributes containing dashes ('-'), then another options is to use the tree representation:

    // 
    // Set fore- and background color:
    // 
    $button = new Button("Download");
    $button->attr->color = "yellow";
    $button->attr->background->color = "red";
    $button->render();          // <button color="yellow" background-color="red">Download</button>

Multiple properties can be set at once by passing an array. Might be useful if style is defined in database:

    // 
    // Set fore- and background color:
    // 
    $button->attr->set(array(
        "color" => "yellow",
        "background-color" => "red"
    ));
    $button->render();          // <button color="yellow" background-color="red">Download</button>

Notice that these options listed above are not specific for attributes. You can use them to set i.e. class, style or event properties too.

Classes

CSS classes are set using the class collection:

    $button = new Button("Download");
    $button->class->add("btn btn-primary");
    $button->render();          // <button class="btn btn-primary">Download</button>

Style

Inline CSS can be set using the style collection:

    $button = new Button("Download");
    $button->style->font = 'italic bold 12px/30px Georgia, serif';
    $button->style->font->family = 'Arial';
    $button->style->font->size = '14px';
    $button->render();          // <button style="font:italic bold 12px/30px Georgia, serif;font-family:Arial;font-size:14px">Download</button>

Events

Use the event collection to set event handlers on HTML elements. The full set of events are supported:

    $button = new Button("Download");
    $button->event->onclick = 'alert("hello world!")';
    $button->render();          // <button onclick="alert('hello world!')">Download</button>

As seen from the example above, the code supporting Javascript event handlers tries to apply some clever fixes to provide uniform quoting if strings.