2 Replies Latest reply on Mar 31, 2008 9:06 AM by TessandraFae

    Need to capture what has focus in a variable

    TessandraFae Level 1
      Hi everyone,
      The documentation is failing me here, but I'm sure you all know how to do this.

      I have an application that has several text areas and shape symbols. I have controls for the user to either: edit text in those textareas (fontfamily, fontsize, color, etc) or modify the shape properties(colors, rotation, scale, etc)

      My problem is that the controls don't know which textarea or shape to apply these changes to. I need a way to capture the focused item in a variable and then have the control buttons use that variable as a reference to the object they're changing.

      For example I borrowed this flex snippet on how to use Text Range:

      ***************************************
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      layout="absolute" width="331" height="389"
      viewSourceURL=
      "/files/Tutorials/Flex/TextRange/TextRangeTutorial.mxml">
      <mx:Script>
      <![CDATA[
      import mx.controls.textClasses.TextRange;
      import mx.events.ColorPickerEvent;

      private var textSelection:TextRange;

      private function initTextArea():void
      {
      textSelection = new TextRange(txtSlate, true); <--- i want to change this to new TextRange({focusedobject}, true);
      }

      private function increaseFontSize():void
      {
      textSelection.fontSize++;
      }
      ******************************

      But how do I capture the focus into some variable?
      I appreciate your help everyone!

      Tessy
        • 1. Re: Need to capture what has focus in a variable
          TessandraFae Level 1
          Ok, as an update, here's how I've modified the code, but I'm getting errors when I click on the textarea box. Look at this:

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
          layout="absolute" creationComplete="initTextArea(txtSlate)"
          viewSourceURL=
          "/files/Tutorials/Flex/TextRange/TextRangeTutorial.mxml">
          <mx:Script>
          <![CDATA[
          import mx.core.UIComponent;
          import mx.controls.textClasses.TextRange;
          import mx.events.ColorPickerEvent;

          private var textSelection:TextRange;

          private function initTextArea(target:UIComponent):void
          {
          textSelection = new TextRange(target, true);
          }

          private function increaseFontSize():void
          {
          textSelection.fontSize++;
          }

          private function decreaseFontSize():void
          {
          textSelection.fontSize--;
          }

          private function
          changeFontColor(eventObj:ColorPickerEvent):void
          {
          textSelection.color = eventObj.color;
          }

          private function changeFontBold():void
          {
          if(textSelection.fontWeight == "bold")
          {
          textSelection.fontWeight = "normal";
          }
          else
          {
          textSelection.fontWeight = "bold";
          }
          }

          private function changeFontItalic():void
          {
          if(textSelection.fontStyle == "italic")
          {
          textSelection.fontStyle = "normal";
          }
          else
          {
          textSelection.fontStyle = "italic";
          }
          }
          ]]>
          </mx:Script>
          <mx:Panel x="0" y="0" width="559" height="389"
          layout="absolute" title="Simple TextRange Usage">
          <mx:TextArea id="txtSlate" x="10" y="10" text="This is a test0"
          width="282" height="82" focusIn="initTextArea(this)" />
          <mx:TextArea id="txtSlate0" x="10" y="100" text="This is a test1"
          width="282" height="82" focusIn="initTextArea(this)"/>
          <mx:TextArea id="txtSlate1" x="10" y="190" text="This is a test"
          width="282" height="82" focusIn="initTextArea(this)" />
          <mx:Button x="10" y="287" label="Increase Font Size"
          width="135" click="increaseFontSize()"/>
          <mx:Button x="10" y="317" label="Decrease Font Size"
          click="decreaseFontSize()"/>
          <mx:ColorPicker x="270" y="287"
          change="changeFontColor(event)"/>
          <mx:Label x="156" y="289" text="Choose Font Color:"/>
          <mx:Button x="241" y="317" label="Bold"
          click="changeFontBold()"/>
          <mx:Button x="177" y="317" label="Italic"
          click="changeFontItalic()"/>
          </mx:Panel>
          </mx:Application>


          The errors I'm getting are:

          ReferenceError: Error #1069: Property http://www.adobe.com/2006/flex/mx/internal::getTextField not found on TextRangeTutorial and there is no default value.
          at mx.controls.textClasses::TextRange()
          at TextRangeTutorial/initTextArea()
          at TextRangeTutorial/__txtSlate0_focusIn()
          at flash.display::Stage/set focus()
          at mx.core::UITextField/setFocus()
          at mx.controls::TextArea/setFocus()
          at mx.managers::FocusManager/setFocus()
          at mx.managers::FocusManager/mouseDownHandler()

          What did I do wrong?
          Tess
          • 2. Re: Need to capture what has focus in a variable
            TessandraFae Level 1
            Aha! Here's how you focus on any textarea without knowing it's ID:


            private function initTextArea(event:Event):void
            {
            textSelection = new TextRange((event.currentTarget)as UIComponent, true);
            }

            private function addToolListener(event:Event):void
            {
            (event.currentTarget).addEventListener(MouseEvent.CLICK, initTextArea);
            }

            Then on the textareas, add the following:

            creationComplete= “addToolListener(event)”

            Hope this helps!