4 Replies Latest reply on May 28, 2009 6:36 AM by john isaacks

    Make parent highlight instead of self when self has focus?

    john isaacks Level 1

      I have a TextInput and a Canvas object both inside an HBox object. When the input text field has focus it highlights, I would like to change this to be the containing HBox that highlights when the Input Text has focus.

       

      Does anyone have any ideas on how I can do that?

       

      Here is my code:

       

      <mx:HBox 
             
      keyDown="checkKey(event)"
             
      horizontalGap="0">
             
      <mx:TextInput
                     
      id="searchBox"
                     
      width="500"
                     
      fontSize="25"
                     
      backgroundColor="#F0F0F0"
                     
      borderThickness="2"
                     
      borderColor="#666666"
                     
      borderStyle="solid"/>
             
      <mx:Canvas
                     
      borderThickness="2"
                     
      borderColor="#666666"
                     
      borderStyle="solid"
                     
      backgroundColor="#666666">
                     
      <mx:Button
                             
      label="Search"
                             
      click="searchInputText()"
                             
      fontSize="21"
                             
      styleName="primaryButton"/>
             
      </mx:Canvas>
         
      </mx:HBox>

       

       

      Thanks!

        • 1. Re: Make parent highlight instead of self when self has focus?
          Flex harUI Adobe Employee

          I don't recommend using Containers as Controls, but if you must try something like:

           

          <mx:HBox tabChildren="false" tabEnabled="true" focusEnabled="true" ...

               <mx:TextInput focusEnabled="false"

           

          You'll probably need to override setFocus() to pass focus to the TextInput and you may also need

               implements IFocusManagerComponent

          and implement some properties on the HBox.

           

          If you look at ComboBox you can see how it is done by subclassing UIComponent.

           

          Containers are heavy and will try to put up scrollbars and do other things that you probably don't want or need and if you have enough of them you'll feel it at startup time or in memory usage.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          1 person found this helpful
          • 2. Re: Make parent highlight instead of self when self has focus?
            john isaacks Level 1

            Well, instead then how can I just make the TextInput not highlight when it is selected?

             

            ...I tried setting focusEnabled="false" but that didn't change anything.

             

            Thanks.

            • 3. Re: Make parent highlight instead of self when self has focus?
              Flex harUI Adobe Employee

              There are some old posts in this forum and FlexCoders about shutting off the TextInput's highlight.  I think showFocusIndicator is involved.

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: Make parent highlight instead of self when self has focus?
                john isaacks Level 1

                Thanks for all your help FlexUI, I figured it out...to make the highlight not happen you set focusThickness to 0. I also used a glow filter to add the highlist to the HBox when the TextInput has focus. Here is the updated code that does what I wanted:

                 

                <mx:HBox

                id="search_form"

                keyDown="checkKey(event)"

                horizontalGap="0">

                <mx:filters>

                        <mx:GlowFilter id="HBoxGlowFilter" alpha="0.0"/>

                    </mx:filters>

                <mx:TextInput

                id="searchBox"

                width="500"

                fontSize="25"

                backgroundColor="#F0F0F0" focusThickness="0"

                focusIn="{HBoxGlowFilter.alpha = 0.3; search_form.filters = [HBoxGlowFilter]}"

                            focusOut="{HBoxGlowFilter.alpha = 0.0; search_form.filters = [HBoxGlowFilter]}"

                borderThickness="2"

                borderColor="#666666"

                borderStyle="solid"/>

                <mx:Canvas

                borderThickness="2"

                borderColor="#666666"

                borderStyle="solid"

                backgroundColor="#666666">

                <mx:Button

                label="Search"

                click="searchInputText()"

                fontSize="21"

                styleName="primaryButton"/>

                </mx:Canvas>

                </mx:HBox>