Andy Hulstkamp

about creating online experiences

26. February 2009

Flex 4 custom Knob Button - Part 2

This post looked at creating a custom Flex 4 component from scratch. The Knob Button defined there had a min/max-value for the range and the rotation. The user could adjust the value by pressing the knob and then dragging the mouse. Now, we would like to extend the control a bit by adding a text input-field where the value of the Button is reflected. Likewise a value can be entered into the textfield and the rotation of the Button would reflect this.

Flex Custom Knob Button Component

Demo

[SkinPart(required="true")]
public var knobButton:AhFxKnobButton;

[SkinPart(required="true")]
public var textField:FxTextInput;

//TODO: Expose knobValue

Likewise the Skin for this control needs to define those parts (knobButton and textField)

<VGroup horizontalCenter="0" gap="10" verticalCenter="0" width="50" height="70" horizontalAlign="center">
    <ah:AhFxKnobButton 
        id="knobButton" 
        minKnobValue="0" 
        maxKnobValue="180" 
        minRotation="0" 
        maxRotation="180" 
        knobValue="{Number(textField.text)}">    
    </ah:AhFxKnobButton>

    <FxTextInput id="textField" text="{fm.format(knobButton.knobValue)}" widthInChars="6" fontSize="10" textAlign="center">

    </FxTextInput>
</VGroup>

As you can see the bindings between the knobValue and the textfield text is done in the skin. For this little example I think it is ok to do this here, although it might be better to set this up in the control itself, since this logic belongs to the controller.

Source updated to flex 4 release sdk.

further reading

Flex Component Lifecycle

The Flex Spark Component Lifecycle might be hard to grasp at first. I created an App that interactively visualizes the Flex Spark Lifecycle.

Flex 4 custom Knob Button - Part 1

Custom Component in Flex 4. First Part in creating an Knob Button with custom LAF.