Layouts

This page explains how to use the built-in layouts provided by HTML5 Builder, and also how to implement an adaptive layout that changes depending on the user agent.

Built-in Layouts

HTML5 Builder provides, both in the web and mobile interface mechanisms, a series of default built-in that cover the most common layout cases. The type of layout can be selected using the Layout.Type property of the page container.

When using absolute and relative layouts, the result is the same: what you see in the Design view is the same you see in the rendered page. However, the underlying CSS code uses a different positioning system, with different values. This might be important when you want to modify the resulting code with custom CSS files or JavaScript code.

Controls layout is achieve by wrapping the controls’ code inside a div element, named after the control (ComponentName_outer), which is then positioned using CSS.

Absolute

This (ABS_XY_LAYOUT) is the default layout. Controls are arranged with absolute CSS positioning, using coordinates (top and left) to indicate where the controls should be on the page.

Relative

When using the relative layout (REL_XY_LAYOUT), controls are arranged with relative CSS positioning, using coordinates (top and left) to indicate how the controls should be displaced from their natural (without CSS) place on the page.

For example, if you have a page with two buttons, their natural position — without CSS — would be one below the other, on the top-left corner of the page. If you change the position of the first button using relative CSS positioning, the top and left values you use would work the same way as in absolute positioning, since the button was in the top-left corner (0, 0) — the point of reference for absolute positioning. But the second button would not take the position of the first one — now moved —, it would continue located below the former position of the first button, as if the latter were still on its original position, occupying the space. So, when you change the position of the second button, you can’t move from (0, 0), but from (0, first button height). This is what HTML5 Builder does for you in the underlying CSS code when you use the relative layout.

The most common use of the relative layout is to center a page:

• Layout.Type = REL_XY_LAYOUT
• Alignment = agCenter

Flow

When using the flow layout (FLOW_LAYOUT), controls are not arranged at all. Their code is printed without positioning, so they end up displayed in their natural position.

This type of (lack of) layout is specially useful when you want to arrange your controls yourself (e.g. when implementing an adaptive layout).

Adaptive Layout

An adaptive layout is a layout that changes to accomodate itself to the circumstances surrounding the page: the available space, the type of device, etc.

HTML5 Builder does not provide a built-in adaptive layout; there are just too many possibilities, both in the ways a page can change and the circumstances it should adapt itself to. Instead, you can implement adaptive layouts yourself, the way you want. This section will help you do that.

When implementing an adaptive layout, you might want to use the flow layout as the base layout of the pages. However, nothing prevents using a different built-in layout, and it might make things easier for you.

jQuery

jQuery is included by default in any HTML5 Builder page, and it can be used to dynamically rearrange the controls of a page.

The code to rearrange the controls must be associated to the window‘s resize event, and must also be run once when the page is loaded. You can do both things from a client-side event that gets executed as soon as the jQuery framework has been properly loaded:

• Page’s OnReady.
• MPage’s OnPageCreate.

For example, the following code would keep ComponentName on the center of the page:

// Function to apply the layout dynamically.
applyLayout = function() {
    $("#ComponentName_outer").css("position", "absolute");
    $("#ComponentName_outer").css({
        "top": ( ( $(window).height() - $("#ComponentName_outer").height() ) / 2 ) + "px",
        "left": ( ( $(window).width() - $("#ComponentName_outer").width() ) / 2 ) + "px"
    });
}

// Get the function called each time the browser window gets resized.
$(window).resize(applyLayout);

// Apply the layout already now that the page has been loaded.
applyLayout();

The code above (the applyLayout() function, its association with the window resize event and its first call) is everything you need to define the layout dynamically. Now you only need to modify and extend the applyLayout() definition so it does whatever you want.

For help on modifying the controls, see jQuery.

Help Resources

Tutorials

• Learn CSS Positioning in Ten Steps, by BarelyFitz Designs.