FlexWheel Tutorial 1

Usage. 1

Custom Wheels. 1

Sub Classing. 1

Using FlexWheel Class Directly. 2

Sizing the FlexWheel (Height and Width). 2

Usage

Let’s take the NumericWheel class as an example. Following are the steps needed to use it in applications:

<components:NumericWheel id="numericWheel" x="781" y="29" minVal="50" maxVal="200"

wheelChangeEnd="onWheelChangeEnd(event)" />

1. put the component in you application like above
2. some components have properties that you can set (overriding the defaults) such as minVal and maxVal
3. hook to the wheelChangeEnd event which is fired when a spin ends and a new value is under the focusbar.

private function onWheelChangeEnd(event:WheelChangeEvent):void

{

//some wheels have more than one column to spin in them,

//such as the AppointmentWheel.

//the event.selectedItems array holds each columns selected

//value at the matching index

Alert.show(event.selectedItems[0]);

}

Custom Wheels

There are 2 paths to creating your custom wheel.

Sub Classing

Let’s continue with the NumericWheel example.

1. sub class the FlexWheel like so

public class NumericWheel extends FlexWheel

{

…

2. override the handleSpinBoxCreation() function. This function is called by FlexWheel when the creation of spinBoxes (column) is required. In our case just add one with a dataProvider consisting of an array of integer values like so:

/**override parent to create the spin wheel with minVal..maxVal items**/

override protected function handleSpinBoxCreation():void

{

//create dp with values from min val to max val

var arr:ArrayCollection = new ArrayCollection();

for(var i:int = _minVal;i<=_maxVal;i++)

{

arr.addItem(i);

}

//addSpinBox receives a dataProvider and an Item renderer

//in my case I wrote a simple renderer that inherits from

//label and centers text.

//I could have used mx.components.Label as well.

addSpinBox(arr,flexWheel.components.CenteredLabelRenderer,

_itemHeight,_itemWidth);

}

Using FlexWheel Class Directly

You can put the FlexWheel directly in your application and call the addSpinBox whenever you want

Sizing the FlexWheel (Height and Width).

Important: In order for FlexWheel to work well some special consideration is to be taken when setting the height and widths.

FlexWheel visible area should fit a whole number of item renderer in height to work at its best, meaning there should be no partial visible renderers.

Set the height of the component to:

itemHeight*{num required visible items} + 2*wheelBorderThickness..

Let’s say:

You have 10 items in your data provider = ArrayCollection([1,2,3,4,5,6,7,8,9,10])

Your renderer is a Label with (20px height)

You want to only 3 items to be visible at a time.

Your height would be 20*3 + 2*1 = 62

Partial Items: if don’t set the height as shown above you will see partial items, it will still work good and there should be no problems.

However there might be 1 or 2 items in the whole list that over them you will need 2 small drags to get them to move a whole item instead of one.

Defaults:

Since most of the FlexWheel subclasses have textual renderers the defaults are:

Height = 146

ItemHeight = 24

(ItemWidth = 24)

wheelBorderThickness = 1

Meaning 6 visible items.