layout.RelativeSpec Class
Documentation of available options for the Relative layout. The relative layout is a very flexible layout model. It offers you the possibility of positioning and sizing children relative to each other and relative to the parent View. If also offers the possibility of resizing views as in the linear layout.
Constructor
layout.RelativeSpec
-
config
Parameters:
-
configObject
Example:
new ludo.View({
renderTo:document.body,
width:1000,height:1000,
layout:{
type:'relative' // children will be positioned relatively
},
children:[{
name : 'a', html : 'View A', layout: { width: 'matchParent', height:100, alignParentBottom:true }
},{
name : 'b', html : 'View B', layout: { height:200, above:'a' } // reference to child with name "a"
}]
});
Item Index
Attributes
above
String | View
Render right of this sibling View. Reference can be name, id of a view reference. left edge of this view will match right edge of referenced view.
Example:
children:[{
name : 'a', html : 'View A', layout: { width: '200', height:100, alignParentTop:true, alignParentLeft:true }
},{
name : 'b', html : 'View B', layout: { height:200, rightOf:'a' }
}]
above
String | View
Render above this sibling View. Reference can be name, id of a view reference.
Example:
children:[{
name : 'a', html : 'View A', layout: { width: 'matchParent', height:100, alignParentBottom:true }
},{
name : 'b', html : 'View B', layout: { height:200, above:'a' }
}]
alignBottom
String | View
Align bottom edge of this View with bottom edge of references View.
Example:
children:[{
name : 'a', html : 'View A', layout: { width: '200', height:300, alignParentTop:true, alignParentLeft:true }
},{
name : 'b', html : 'View B', layout: { height:200, width:100, alignBottom:'a', rightOf:'a' }
}]
will set bottom edge of "b" to bottom edge of "a"
alignLeft
String | View
Align left edge of this View with left edge of references View.
Example:
children:[{
name : 'a', html : 'View A', layout: { width: '200', height:100, alignParentTop:true, alignParentRight:true }
},{
name : 'b', html : 'View B', layout: { height:200, width:150, alignLeft:'a', below:'a' }
}]
will set left edge of "b" to left edge of "a"
alignParentLeft
Boolean
Left align inside parent view, i.e. css "left" set to "0px"
Default: undefined
alignParentRight
Boolean
Right align inside parent view, i.e. css "right" set to "0px"
Default: false
alignParentTop
Boolean
Bottom align inside parent view, i.e. css "bottom" set to "0px"
Default: false
alignRight
String | View
Align right edge of this View with right edge of references View.
Example:
children:[{
name : 'a', html : 'View A', layout: { width: '200', height:100, alignParentTop:true, alignParentLeft:true }
},{
name : 'b', html : 'View B', layout: { height:200, width:100, alignRight:'a', below:'a' }
}]
will set right edge of "b" to right edge of "a"
alignTop
String | View
Align top edge of this View with top edge of references View.
Example:
children:[{
name : 'a', html : 'View A', layout: { width: '200', height:300, alignParentBottom:true, alignParentLeft:true }
},{
name : 'b', html : 'View B', layout: { height:200, width:100, alignTop:'a', rightOf:'a' }
}]
will set top edge of "b" to top edge of "a"
below
String | View
Render below this sibling View. Reference to sibling can be done using name, id or a direct reference to the View.
Example:
children:[{
name : 'a', html : 'View A', layout: { width: 'matchParent', height:100, alignParentTop:true }
},{
name : 'b', html : 'View B', layout: { height:200, below:'a' }
}]
centerHorizontal
Boolean
Center horizontally inside parent view
Default: false
Example:
new ludo.Window({
left:600, top:100, height:300, width:300,
title:'Sign In',
layout:{
type:'relative'
},
css:{
'background-color':'#FFF'
},
children:[
{
layout:{
type:'linear',
orientation:'vertical',
centerInParent:true,
width:200,
height:130
},
css:{
border:'1px solid #C0C0C0',
'background-color':'#f5f5f5',
padding:3
},
children:[
{
height:25, html:'Box centered in parent'
},
{
type:'form.Text', label:'Username', name:'username'
},
{
type:'form.Password', label:'Password', name:'password'
},
{
type:'form.Button', value:'Sign In'
}
]
}
]
});
fillDown
Boolean
Fill down inside parent view.
Default: false
Example:
layout:{
below:'nameOfOtherView',
fillDown:true
}
will set top edge of view to bottom edge of "nameOfOtherView" and set height to parent height - top edge.
fillLeft
Boolean
Fill left inside parent view.
Default: false
Example:
layout:{
leftOf:'a',
sameHeightAs:'a',
fillLeft:true
}
will render the child left of sibling "a" and it will fill up all remaining
fillRight
Boolean
Fill right inside parent view.
Default: false
Example:
layout:{
rightOf:'nameOfOtherView',
fillRight:true
}
will set left edge of view to right edge of "nameOfOtherView" and set width to parent width - left edge.
fillUp
Boolean
Fill upwards inside parent view (i.e. "top" attribute set to 0).
Default: false
Example:
layout:{
above:'nameOfOtherView',
fillUp:true
}
will set bottom edge of view to top edge of "nameOfOtherView" and set height to parent height - bottom edge.
height
String | Number
height of child inside a relative layout in pixel value, percent, "wrap" or "matchParent". "wrap" will render the view in the height needed for it's content. "matchParent" is equivalent to height: "100%".
Example:
height:200
height:'matchParent'
height:'wrap'
height:'40%'
left
Number
Render at this x position inside parent
Default: undefined,
Example:
children:[ { name : 'a', layout:{ width:200,height:20, left:20, top : 20 } }
]
leftOf
String | View
Render left of this sibling View. Reference can be name, id of a view reference.
Example:
children:[{
name : 'a', html : 'View A', layout: { width: '200', height:100, alignParentTop:true, alignParentRight:true }
},{
name : 'b', html : 'View B', layout: { height:200, leftOf:'a' }
}]
offsetX
Number
Offset left position with this number of pixels.
Default: undefined,
Example:
children:[
{
name : 'a', layout:{ alignParentLeft:true, width:200, height:200, top: 0 }
},{
name : 'b', layout: { rightOf:'a', alignParentTop:true, offsetX:20, height:200,width:200 }
}
]
will render child "b" 20 pixels to the right of child "a"
offsetY
Number
Offset top position with this number of pixels.
Default: undefined,
Example:
children:[
{
name : 'a', layout:{ alignParentLeft:true, width:200, height:200, top: 0 }
},{
name : 'b', layout: { below:'a', alignParentLeft:true, offsetY:20, height:200,width:200 }
}
]
will render child "b" 20 pixels below child "a"
resize
String | Array
Add resize handles for resize in these directions, possible values: 'up','down','left','right'.
Example:
layout:{
height:200,
width:150,
alignParentLeft:true,
resize:['below','right'],
maxHeight:300
}
sameHeightAs
String | View
Render with the same height as this sibling
Example:
children:[{ name : 'a', html : 'View A', layout: { width: 200, alignParentRight:true, alignParentBottom:true } },{ name : 'b', html : 'View B', layout: { leftOf:'a', sameHeightAs:'a', fillLeft:true } }] will render "b" left of "a". It will use all space to the left edge and the height will be the same as for "a"
sameWidthAs
String | View
Render with the same width as this sibling
Example:
children:[{ name : 'a', html : 'View A', layout: { width: 200, alignParentRight:true, alignParentTop:true } },{ name : 'b', html : 'View B', layout: { below:'a', sameWidthAs:'a', fillDown:true } }] will render "b" left of "a". It will use all space to the left edge and the height will be the same as for "a"
top
Number
Render at this y position inside parent
Default: undefined,
Example:
children:[ { name : 'a', layout:{ width:200,height:20, left:20, top : 20 } }
]
type
String
If the child has it's own children, the type attribute specifies the layout model for these children.
Example:
children:[{
name:'a', layout:{ type:'menu', orientation:'vertical' }
}]
width
String | Number
Width of child inside a relative layout. The value can be a pixel, percentage value of parent width or the one of the keywords "wrap" or "matchParent". "wrap" will render the child with the width required for it's content. "matchParent" is equivalent to height:"100%"
Example:
width:200
width:'matchParent'
width:'wrap'
width:'40%'