Layout

A page is divided into number of Components and there Layout which give an arrangement to your components. When components are streamed they are rendered on the client depending on its position in the Layout.

The Layout Class

Layout is a class that holds the information which is used for rendering it on client. To be more precise, it stores the function and arguments that when called returns the DOM string which will then be used as a wireframe where all your components are rendered.

class flasksr.Layout(render_function, *args, **kwargs)

Parameters:

• render_function: is the function that returns the DOM String for the layout. There are some spcification of on this DOM string which can be found below. In case there are any args or kwargs to the render_function, you can directly pass them into constructor of Layout. Thus we say that, the constructor also accepts args and kwargs which are passed directly to the render_function.

Sample Layout:

def render_layout():
    return """
        <div style="width: 100%;">
            <div ref-sr-id="left-side" style="float:left; width: 45%"></div>
            <div ref-sr-id="right-side" style="float:right; width: 45%"></div>
        </div>
    """

l = Layout(render_top_menu)

Specification to Layout's DOM String

1. The function passed to Layout's constructor should return a DOM string having placeholders for your components.
2. The references/placeholders for your component references can be any elements having attribute ref-sr-id. The value of this attribute is the component_id that is to be rendered inside this reference.
3. Component references cannot be nested.
4. Component references should be empty div tags.

A sample layout for Github Profile looks something like this

def render_component_layout():
    return """
        <div ref-sr-id="top-menu"></div>
        <div class="ui sixteen column grid very padded">
            <div class="four wide column">
                <div ref-sr-id="user-profile"></div>
            </div>
            <div class="six wide column">
                <div ref-sr-id="user-repos"></div>
            </div>
            <div class="six wide column">
                <div ref-sr-id="user-events"></div>
            </div>
        </div>
    """

l = Layout(render_component_layout)

For better clarification you can checkout Complete Github Profile Example.