Share on Google+Share on Google+

Scroller control in Flex4

Advertisement
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

Advertisements

Posted on: May 12, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.