In LudoJS, you create a View Hierarchy.
If you're familiar with development for Android Phones, you will find similarities between View Hierarchies in LudoJS and layout XML files in Android.
A View hierarchy or layout in LudoJS starts with one, and only one parent View. This view is created using code like
new ludo.View({
})I.e. the new keyword, followed by the name fo the LudoJS View Class.
The parent/root View is the only View in a View hierarchy created using the new keyword:
new ludo.View({ /** Place holder view **/
renderTo:document.body,
layout:{
width:'matchParent', height:'matchParent',
type:'linear',
orientation:'horizontal'
},
children:[
// Objects describing children goes here.
]
});The code above is typical what you start with. It creates one View filling the entire browser window(size of the <body> element).
This view does not do much and it never will. It's purpose is to
The layout says that it should use all space of document.body, and it also says that child views should be rendered using the layout.LinearHorizontal layout model. In other words, child views should be rendered horizontally, side by side.
Let's add two child views, one left hand menu and a main view:
new ludo.View({ /** Place holder view **/
renderTo:document.body,
layout:{
width:'matchParent', height:'matchParent',
type:'linear',
orientation:'horizontal'
},
children:[
{
html: 'Menu View',
layout:{
width:100
}
},
{
html: 'Main View'
}
]
});As you can see, we just describe the children using plain Javascript objects without use of new ludo.View.
We now have three views, one parent View with two child views.
In the example above, we have a view hierarchy with a depth of 2(parent<->child).
In more complex layouts, a child will have it's own child views.
Example: Adding child views to the menu view above:
new ludo.View({ /** Place holder view **/
renderTo:document.body,
layout:{
width:'matchParent', height:'matchParent',
type:'linear',
orientation:'horizontal'
},
children:[
{
layout:{
type:'accordion',
width:100,
children:[
{ title: "First Menu View", html: "First" },
{ title: "Second Menu View", html: "Second" }
]
}
},
{
html: 'Main View'
}
]
});We now have a View, Child Views and Grand children views, i.e. a layout with a depth of 3.
There is no layout-depth limit in LudoJS, but for performance, a shallow layout is recommended(max depth of 4-5).
Often, the depth can be reduced by switching to other layout types. Example: Take this nested linear layout
Where you have a parent view with a horizontal linear layout(one left view and one right view). The left view has a vertical linear layout with two child views(top and bottom). So the layout depth is 3.
By using the layout.Relative instead of linear layouts, we can get reduce the layout depth in the example above.
it looks the same, but by using the Relative Layout, we have managed to remove one of the linear layouts, thus reducing the layout depth.
