Custom Component in Flex 4 (Gumbo). A 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 knob is reflected. Likewise a value can be entered into the textfield and the rotation of the knob would reflect this.

Instead of extending the knob I decided to create another control that is a composition of a knob and a textfield. So there are to SkinParts:

[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.

Here is the demo and here the source . (Flex SDK 4.0.0.4932)

Source updated to flex 4 release sdk.

Follow any responses through RSS 2.0 feed. Leave a response, or trackback from your own site.