A

Anonymous

Answered

Text input not selectable

Forum|Forum|16 years ago
March 17, 2010
1 reply
1579 views

I've made an input TextFlow and populated it with some default text. No matter what size I specify using setCompositionSize, only the area that is populated with text is selectable. This also means that as I add text a greater area is defined and as I remove the area is diminished. If all the text is deleted, and the focus is removed, the flow can no longer detect the mouse.

How can I define a static area for the mouse to detect in order to focus on the TextFlow?

Text layout framework

This topic has been closed for replies.

Correct answer robin_briggs

I played around with this example and changed a few things to get it to work.

First, the way you have it set up the container is auto-sizing to the text. If that's what you want, you can also do that by just setting the container height to NaN. But, if you do that, clicking below the text won't activate the text since the container will be only large enough to fit the text.

If you set the container to a static height, and there is not enough text to fix, then clicking in the whitespace at the bottom should select the end of the text. In your example it is not doing that, I think because the Sprite you are using as the container is also the stage. If you make another sprite, make it the child of the Stage, and make that other sprite the container, it should work. Here's what I'm suggesting:

var sprite:Sprite = new Sprite();

_controller = new ContainerController( sprite, w, h );

addChild(sprite);

instead of :

_controller = new ContainerController( this, w, h );

With those two changes, it should work.

- robin

R

robin_briggs

Adobe Employee

Hard to tell what's going on without some more information, or a code example. However, here's how its supposed to work. There is a transparent background that is drawn behind the text, for the purpose of detecting mouse events in the composition bounds. You can see this in the source code, look in ContainerController for attachTransparentBackground. If this gets turned off, no background is generated, and you get the behavior you note. But by default it is turned on.

A

Anonymous

Hi Thanks for getting back on this.

Here is the code I am using:

public class TextInput extends Sprite 
{

     private var _textFlow : TextFlow;
     private var _controller : ContainerController;
     private var _editManager : EditManager;

     public function TextInput ( text : String, format : String = null, w : int = 0, h : int = 0 )
     {
          _controller = new TextController( this, w, h );
          
          // form source data
          var s : String = "";
          s += "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008' ";
          s += format;
          s += "><p><span id='text'>";
          s += text;
          s += "</span></p></TextFlow>";
          
          // disable enter key
          var c : Configuration = new Configuration( );
          c.manageEnterKey = false;

          _textFlow = TextConverter.importToFlow( s, TextConverter.TEXT_LAYOUT_FORMAT, c );
          _textFlow.flowComposer.addController( _controller );
          _textFlow.lineBreak = LineBreak.TO_FIT;
          
          // auto size height
          var bounds : Rectangle = _controller.getContentBounds( );
          h = bounds.height;
          _controller.setCompositionSize( w, h );
          
          // scroll policy
          _controller.horizontalScrollPolicy = ScrollPolicy.ON;
          _controller.verticalScrollPolicy = ScrollPolicy.OFF;
          
          // edit manager
          _editManager = new EditManager( );
          _textFlow.interactionManager = _editManager;
          
          // add listeners
          _textFlow.addEventListener( FlowOperationEvent.FLOW_OPERATION_BEGIN, onFlowOperationBegin );
          _textFlow.addEventListener( FlowOperationEvent.FLOW_OPERATION_END, onFlowOperationEnd );
          
          // update
          _textFlow.flowComposer.updateAllControllers( );
     }
     
     private function onFlowOperationBegin ( event : FlowOperationEvent ) : void
     {
          var t : String = _textFlow.getText( );
          trace( 'onflowOperationBegin: ' + (t) );
          
          var bounds : Rectangle = _controller.getContentBounds( );
          
          trace( bounds.width );
     }

     private function onFlowOperationEnd (event : FlowOperationEvent) : void
     {
          var t : String = _textFlow.getText( );
          trace( 'onFlowOperationEnd: ' + (t) );
     }
     
}

public class TextController extends ContainerController 
{

     public function TextController ( container : Sprite, compositionWidth : Number = 100, compositionHeight : Number = 100 )
     {
          super( container, compositionWidth, compositionHeight );
     }

     override protected function get attachTransparentBackground () : Boolean
     {
          return true;     
     }
}

The onFlowOperationBegin handler is showing the bounds change as the text is inserted and deleted. I've worked around the issue for now by placing my own transparent button behind the TextFlow container and focusing the edit manager on click. This is a pretty bad workaround, however.

According to the docs the default value of attachTransparentBackground is false.

http://livedocs.adobe.com/labs/textlayout/flashx/textLayout/container/ContainerControllerBase.html#attachTransparentBackground

I extended the ContainerController and set the default to true but am still experiencing the same behaviour.

Thanks again for you help with this issue.

R

robin_briggsCorrect answer