Layouts

Layouts is a very important topic in LudoJS.

view.layout is an Object({}) describing the size and position of a Views in a View hierarchy.

This is an example:

new ludo.View({
    layout:{
        left:100,top:100, width:200,height:200, // Rules for this view
        type:'linear', orientation:'horizontal', // Type of layout for child views.
        ...
     },
     children:[ /** Array of child views */
        { html: 'View A', layout: { width: 100 }}, { html: 'View B', layout: { weight: 1 }}
     ]
 }

Properties such as left, top, width, height and weight are used for positioning and sizing of this view.

layout.type is used to specify which layout to use when rendering child views. The name refers to a layout renderer inside ludoJS. The supported layout types are:

• Linear - Renders child views side by side or below each other.
• Relative - Renders child views relative to each other.
• Table - Renders child views inside a table. Useful for forms.
• Tab - Navigate between child views using tabs.
• Docking - Collapsible tab layout.
• ViewPager - Displays one child view at a time. You swipe to move between child views.
• NavBar - Child View will slide into view on demand.
• Menu - Used for rendering Menus in ludoJS.
• Accordion - Renders child views in an accordion.
• Popup - Child View will be rendered on demand with specified position and size.
• Fill - One Child view using all available space inside parent view.

Below, you can find documentation for each of the layouts.

Layout Events

A View's layout fires a rendered event when all child views has been resized. This is an event you can listen to by creating a listeners object:

layout:{
    type:'ViewPager',
    listeners:{
        'showpage': function(layout, view){
            // Do something           
        }
    }
}

Or during runtime with

ludo.$('<id-of-view>').getLayout().on('showpage', function(layout, view){ 
    // do something
});