Creating a Scroller for a UIElement

A UIElement has a scrolling component which can either be a vertical, horizontal or a custom scroller. 


Create a basic scroller with the default style
I'm going to show you how to create a horizontal scroller as an example so create a UIElement and set its background like below, ensure you specify the width and height:

carousel = new UIElement();

carousel.background=new ShapeRectangle(carousel);

carousel.background.colours=[0xFF0000,0xFF0000];

carousel.background.alphas=[1,1];

carousel.background.width=200;

carousel.background.height=50;

Now we have to provide is with our layout decorators, the first is a horizontal layout and the second is a padded layout. Both of these layouts must be added to the element and in the order shown in the example for this to work. Make sure you set all the padded layout properties as shown below.

carousel.layout = new HorizontalLayout(carousel);

carousel.layout.horizontalGap=5;

carousel.layout = new PaddedLayout(carousel.layout);

carousel.layout.top=10;

carousel.layout.left=10;

carousel.layout.right=10;

carousel.layout.bottom=10;

The next thing to do is to create all the objects which will be in the scrollable area. I created a function to create 20 dummy UIElements via a function, below is the function call and the functions which are executed..

createBoxes();
/////

private function createBoxes():void{
for(var a:int=0; a < 20;a++)
{
   addElement();
}
}
////
private function addElement():void{
        var element:UIElement = new UIElement();
element.background=new ShapeRectangle(carousel);
element.background.colours=[0x000000,0x000000];
element.background.alphas=[1,1];
element.background.width=50;
element.background.height=50;
element.build();
element.setStyle();
element.arrange();
carousel.addChild(element);
}



Finally we create the scroller then set its properties and build the UIElement. You need to provide the scroller with either the scrollHeight or scrollWidth depending on the scroller you have created.


 carousel.scroll = new ScrollHorizontal(carousel);
carousel.scroll.scrollWidth =200;
carousel.scroll.verticalGap  = 5;
carousel.build();
carousel.setStyle();
carousel.arrange();
addChild(carousel);

To Hide Scroller
You need to set the scrollBarVisible to false but after the arrange of the element.


Full code:

private var carousel : UIElement;
public function TestCarousel() {

carousel = new UIElement();
carousel.background=new ShapeRectangle(carousel);
carousel.background.colours=[0xFF0000,0xFF0000];
carousel.background.alphas=[1,1];
carousel.background.width=200;
carousel.background.height=50;
carousel.layout = new HorizontalLayout(carousel);
carousel.layout.horizontalGap=5;
carousel.layout = new PaddedLayout(carousel.layout);
carousel.layout.top=10;
carousel.layout.left=10;
carousel.layout.right=10;
carousel.layout.bottom=10;
createBoxes();
carousel.scroll = new ScrollHorizontal(carousel);
carousel.scroll.scrollWidth =200;
carousel.scroll.verticalGap  = 5;
carousel.build();
carousel.setStyle();
carousel.arrange();
addChild(carousel);

}
private function createBoxes():void{
for(var a:int=0; a < 20;a++)
{
trace("building");
addElement();
}
}
private function addElement():void{
var element:UIElement = new UIElement();
element.background=new ShapeRectangle(carousel);
element.background.colours=[0x000000,0x000000];
element.background.alphas=[1,1];
element.background.width=50;
element.background.height=50;
element.build();
element.setStyle();
element.arrange();
carousel.addChild(element);
}
}