Home Tutorial Flex Flex4 Components Scroller control in Flex4

 
 

Scroller control in Flex4
Posted on: May 12, 2010 at 12:00 AM
The Scroller control is the Spark component. It have scrollbars and a viewport. A viewport displays a rectangular area for displaying the component. The tag of scroller is ....

Scroller component in Flex4:

The Scroller control is the Spark component. It have scrollbars and a viewport. A viewport displays a rectangular area for displaying the component. The tag of scroller is <s:Scroller>...</s:Scroller>. The scrollbars control's the viewport's horizontal and vertical scroll position. You can use the Scroller control as a container that implements the Viewport interface, such as Group, scrollable. You can set the size of Scroller control like width, height with in a tag. You can set vertical and horizontal position using verticalScrollPolicy and horizontalScrollPolicy properties in the Scroller class.

Example:

 <?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<s:Panel title="Scroller component Example" height="218" color="#990000" width="366">

<s:VGroup paddingLeft="10" paddingTop="10" height="166">

<s:Scroller width="328" height="156">

<s:Group id="myGroup" height="154" width="324">

<mx:Form id="from1" x="39" y="0" width="258" height="151">

<mx:FormHeading label="Personal Information" color="Blue"/>

<mx:FormItem label="First name:" color="#051992">

<s:TextInput id="txtinput"/>

</mx:FormItem>

<mx:FormItem label="Last name:" color="#051992">

<s:TextInput id="txtinput1"/>

</mx:FormItem>

<mx:FormItem label="College Name:" color="#051992">

<s:TextInput id="txtinput2"/>

</mx:FormItem>

<mx:FormItem label="Roll No:" color="#051992">

<s:TextInput id="txtinput3"/>

</mx:FormItem>

<mx:FormItem>

<mx:HRule width="130" height="1"/>

<s:Button id="btn" label="Submit"/>

</mx:FormItem>

<mx:FormItem>

<s:Button id="btn1" label="Reset"/>

</mx:FormItem>

</mx:Form>

</s:Group>

</s:Scroller>

</s:VGroup>

</s:Panel>

</s:Application>

In this example you can see how we can use a Scroller control in Flex4.

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Related Tags for Scroller control in Flex4:


Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.