6 Replies Latest reply on Jul 14, 2009 9:10 AM by Peter deHaan

    TextArea focusSkin problem

    cdman522 Level 1

      Hi All,

       

      I'm having a problem that from what I can tell has been a problem since before flex 3. I don't want my TextArea to glow blue or anyother color when the user selects it. I've tried setting the focusSkin to null and that just causes problems. This is a large app and overhead is important so I don't want to create another skin if I can help it. I tried setting the base RichEditableTextArea's focusEnabled=false and focusThickness=0 and those didn't get rid of the blue glow.

       

      Is there something I'm missing? One of FlashBuilder's new themes is design in mind and the blue glow around text areas and inputs isn't part of the design the artist here had in mind.

       

      Please, if anyone knows how to get around this I would be greatful.

        • 1. Re: TextArea focusSkin problem
          Flex harUI Adobe Employee

          That's been a "feature" of Flex since the beginning.  I think folks have figured out how to turn it off.  Search the web for examples with the old TextArea.  They should apply to the Spark TextArea as well.  I don't remember if they shutdown the drawFocus method or turn off showFocusIndicator.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

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

          1 person found this helpful
          • 2. Re: TextArea focusSkin problem
            cdman522 Level 1

            Thanks for the suggestions, I searched the web and found some promising looking info. Unfortunately none of it seemed to work.

             

            I tried the following with no success:

             

            textArea.focusManager.showFocusIndicator = false;
            textArea.drawFocus(false);
            textArea.focusRect = false;
            textArea.focusManager.hideFocus();

             

            Any other ideas?

            • 3. Re: TextArea focusSkin problem
              Peter deHaan Level 4

              cdman,

               

              I tested this in a very recent version of the Flex 4 SDK (4.0.0.8520), but does this work for you?

              <?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"
                      xmlns:mx="library://ns.adobe.com/flex/halo">
                  <fx:Script>
                      <![CDATA[
                          import mx.core.FlexGlobals;
                      ]]>
                  </fx:Script>
                  <s:VGroup x="20" y="20">
                      <mx:ColorPicker id="cp"
                              selectedColor="white"
                              change="FlexGlobals.topLevelApplication.backgroundColor = event.color;" />
                      <mx:TextArea id="ta1"
                              text="Halo TextArea"
                              focusAlpha="0.0" />
                      <s:TextArea id="ta2"
                              text="Spark TextArea"
                              focusEnabled="false" />
                  </s:VGroup>
              </s:Application> 
                
              

              Peter

              • 4. Re: TextArea focusSkin problem
                Peter deHaan Level 4

                I filed a bug at http://bugs.adobe.com/jira/browse/SDK-22217

                Apparently you should be able to set the focusSkin style to null for Halo and Spark controls.

                 

                My other solution was to create a custom FocusSkin based on spark.skins.spark.FocusSkin, setting the private FOCUS_THICKNESS const to 0 and then setting the focusSkin style globally for all Spark controls, as seen in the following snippet:

                <fx:Style>
                    @namespace s "library://ns.adobe.com/flex/spark";
                    global {
                        focusAlpha: 0.0; /* Halo controls only */
                    }
                    
                    s|SkinnableComponent {
                        focusSkin: ClassReference("skins.NoFocusSkin"); /* Spark controls only */
                    }
                </fx:Style>
                

                Peter

                • 5. Re: TextArea focusSkin problem
                  cdman522 Level 1

                  Thanks Alex and Peter for your help with this issue. I learned a lot investigating the answers you gave.

                   

                  Peter, Your first answer of setting the focusEnabled to false worked. The second answer that had to do with setting the styles didn't work for me. It didn't like the skins.NoFocusSkin, it said it couldn't find that anywhere. Also it said I coulnd't set type selectors on the SkinnableComponent.

                   

                  As for the bug report, thanks, I would like to see that fixed. Setting the focusSkin to null makes sense as a way to get rid of the blue glow.

                   

                  Finally, if the standard way of getting rid of the blue glow is to set the focusEnabled to false then I think either the name of that property should be changed or the API description of it should be fixed because the API description led me to believe that if the focusEnabled was set to false then the text area wouldn't work at all. It sounded like nothing would be able to select or modify the text area.

                   

                  Thanks again for your help.

                  • 6. Re: TextArea focusSkin problem
                    Peter deHaan Level 4

                    Sorry, skins.NoFocusSkin was a custom component based on <Flex SDK>\frameworks\projects\spark\src\spark\skins\spark\FocusSkin.as

                     

                    Basically I just copy-pasted that file and changed this:

                     

                        private const FOCUS_THICKNESS:int = 2;
                    

                     

                    to this:

                     

                        private const FOCUS_THICKNESS:int = 0;
                    

                     

                     

                    As for my original focusEnabled suggestion, it does work, but I believe it breaks the ability to tab through your application (if that is important to you).

                     

                    Sorry for the confusion,

                    Peter