7. Using Layouts

You can automatically add layouts to your UIElement which will effect all the children. You pass in the type of layout into the element's layout function. You can use more than one layout.

Types of Layouts:

• HorizontalLayout
• PaddedLayout
• VerticalLayout
• GridLayout

They Extend Layout

Example of use:

var View = function() {
this.build = function() {
	Class._super(this, "build");
	
	this.layout(new HorizontalLayout());
	this.layout().horizontalGap=30;
	
	this.layout(new PaddedLayout());
	this.layout().top=30;
	this.layout().left=30;
     }
}
Class.extend(View, UIElement);  

##Setting Variables
Currently you need have to define layout variables after declaring the layout. If you define another layout and try to set variables related to the previous layout it won't apply to it but it will apply to the current layout.

##Getting a Layout Once you set a few layouts to your Class you can get a particular layout in two ways.

###1. Get the last layout.

//create an new Instance of UIElement and added two layouts.
test = new UIElement();
test.layout(new PaddedLayout());
test.layout().left=30;
test.layout(new VerticalLayout());
test.layout().verticalGap=10;
test.width(50);
test.height(50);
test.build();
test.setStyle();
test.x(100);
test.y(200);
Utensil.stage().appendChild(test.display);

//To return the last layout just call layout().
console.log(test.layout());//returns the VerticalLayout.

###2. Get a Particular Layout

//Call layout() but pass in the Layout Class (not a new instance) that you are looking for.
console.log(test.layout(PaddedLayout));

##Remove a Layout To remove a layout call 'removeLayout' and pass in the Layout Class (not a new instance).

console.log( test.removeLayout(PaddedLayout));