Flex Spark TextArea pinch&zoom?

Question

My 1st question here...

Spark component TextArea does have a gestureZoom event property, but it seems that it has no functionality?

I would like to implement a simple zoom feature in my TextArea, which simply increases or decreases fontSize property, making text appear larger or smaller.

After implementing all the necessary code (and it works if instead of TextArea I use Image), pinch&zoom does not trigger the gestureZoom event on TextArea object.

Any suggestions? (I don't insist on using pinch&zoom, it just seems appropriate...)

Here 's the code:

<?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"
    applicationComplete="application1_applicationCompleteHandler(event)">

<fx:Script>
<![CDATA[
    import mx.binding.utils.BindingUtils;
    import mx.events.FlexEvent;

    [Bindable]
    public var currFontSize:int = 24;

protected function application1_applicationCompleteHandler(event:FlexEvent):void {

    Multitouch.inputMode = MultitouchInputMode.GESTURE;
    if(Multitouch.supportsGestureEvents){
        txtbox.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onGestureZoom);
    } else {
        status.text="gestures not supported";
    }
}

// THIS NEVER GETS CALLED?
private function onGestureZoom( event : TransformGestureEvent ) : void {
    info.text = "event = " + event.type + "\n" +
    "scaleX = " + event.scaleX + "\n" +
    "scaleY = " + event.scaleY;

    // Zomm in/out simply by increasing/decreasing font size
    if (event.scaleX <1 || event.scaleY <1){
        if (currFontSize > 12) currFontSize -=2;
    }
    else{
        if (currFontSize < 64) currFontSize +=2;
    }
}

protected function button1_clickHandler(event:MouseEvent):void {
    info.text = "";
    currFontSize = 24;
}
]]>
</fx:Script>

<s:Label id="status" top="10" width="100%" text="Transform Gestures on TextArea"
     textAlign="center"/>
<s:HGroup left="12" right="12" top="40">
    <s:TextArea id="info" width="100%" height="117" editable="false"/>
    <s:Button label="Reset" click="button1_clickHandler(event)"/>
</s:HGroup>

<s:TextArea id="txtbox" left="12" right="12" bottom="12" height="400" 
    fontSize="{currFontSize}"
    gestureZoom="onGestureZoom(event)"
    text="Here is some sample text I want enlarged or shrunk."/>
</s:Application>

Answer 1

If the TextArea doesn't need to be editable.. see if you can use a Label. that should work with the pinch and zoom.