Using the Spinner control in flex 4

by

The Spinner control is an alternate to NumericStepper’s in Flex 4. The advantage is while it works with ranges, it is not hard bound to a numeric input. You can choose to step through a collection and display images or any other content.

Spinner Control Sample App

Spinner Control Example in Flex 4

Below is some code which associates text from a collection to the numeric stepper as seen in image above.

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"  width="350" height="150">

<fx:Script>
<![CDATA[

import mx.collections.ArrayCollection;
[Bindable] private var dataColl:ArrayCollection = new ArrayCollection
(["Flex","Flash","Catalyst","Slider","FlashLite","DeviceCentral"])
]]>
</fx:Script>

<s:HGroup x="50" y="58" verticalAlign="middle" >
<s:RichText textAlign="right" width="200" text="{dataColl.getItemAt(spinner.value)}"/>
<s:Spinner id="spinner" minimum="0" maximum="{dataColl.length - 1}"/>
</s:HGroup>


<s:Label x="78" y="38" text="Click on the arrows to change values"/>
</s:Application>

Advertisements

Tags: ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: