28 Replies Latest reply on Nov 11, 2009 11:37 PM by Peter deHaan

    ButtonBar and latest nightly build - disable FocusRect

    jdesko Level 2

      I just updated to SDK 11566.  I have a ButtonBar w/custom skin in my app.  After updating to the latest nightly I now am getting the FocusRectangle around the button in focus, whether I mouse click or keyboard arrow,  didn't have this before.  In MXML properties for ButtonBar I tried focusRect="false", in the custom skin ButtonBarButtonSkin MXML property I set showCaret="false" and focusRect="false" - I still get the focusRect.  In ButtonBar I do not see the drawFocus() method anymore.

       

      My question would be, what changed with ButtonBar and how can I either disable the Focus Rectangle or customize it?

       

      I noticed this change in the nightly's - [svn:fx-trunk] 11467: Corrected ButtonBarBase drawFocus() method, set the depth of the ItemRenderer at caretIndex, not just the showsCaret flag.

       

      What happened to putting visuals in a skin?

       

      Thanks in advance,

      John

        • 1. Re: ButtonBar and latest nightly build - disable FocusRect
          Peter deHaan Level 4

          I dont know about changes to focus/ButtonBar, but does the following work for you? (Set the ButtonBarButton focus skin to null)

           

          <?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">
              <s:controlBarContent>
                  <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
              </s:controlBarContent>
              <fx:Style>
                  @namespace s "library://ns.adobe.com/flex/spark";
                  @namespace mx "library://ns.adobe.com/flex/halo";
                  s|ButtonBarButton {
                      focusSkin: ClassReference(null);
                  }
              </fx:Style>
              
              <fx:Declarations>
                  <s:ArrayList id="arrList">
                      <fx:Object label="Spark ButtonBar"/>
                      <fx:Object label="Second"/>
                      <fx:Object label="Third" />
                      <fx:Object label="Fourth"/>
                      <fx:Object label="The quick brown fox" />
                      <fx:Object label="Jumps ove the lazy dev" />
                  </s:ArrayList>
              </fx:Declarations>
              <s:VGroup x="20" y="20">
                  <s:ButtonBar id="sparkBtnBar"
                               dataProvider="{arrList}" />
              </s:VGroup>
          </s:Application>
          

           

          Peter

          • 2. Re: ButtonBar and latest nightly build - disable FocusRect
            jdesko Level 2

            Hello Peter;

             

            I forgot to put originally that I did try your suggestion already in my external style sheet and it did not work. 

             

            The buttonbar is in a module and when I put a style in the module I get this warning -

            Picture 3.png

            This is what I tried in the external style sheet (the rest of the style is working)

            Picture 5.png

            I have another problem after updating the SDK, if I can ask w/o doing a new discussion, dealing with TLF and a text editor I borrowed from you (your simple text editor - with modifications).  I export the text editor textflow to SQL and when it comes back it looks like below, before the update to the latest nightly it worked great, now as you can see there are strike thru's on anything that is not unformatted text.

            Picture 4.png

            I've asked this before in other discussions, am I having problems because this project was started in early FB Beta, it seems like within the last week or two of nightly updates I'm running into a lot of issues, some work in simple test cases but not in this project.

             

            Thanks, John

            • 3. Re: ButtonBar and latest nightly build - disable FocusRect
              David_F57 Level 5

              Hi,

               

              The style thing worked for me on build 11600, also in a custom skin setting focuswidth to 0 on the button declarations also 'hides' the focus rect(not a very elegant solution )

               

              Prior to setting the focus style the focusrect only displayed when using navigation keys not when using the mouse.

               

              @Peter - is there a way to display the build number when using the svn SDK as it only reports 4.0.0.0

               

              @John - With out seeing your skinning code(seems like your custom skins are giving you a bit of grief) it does make it difficult for anyone to help as any suggestions have to be based on guess work.

               

              David.

              • 4. Re: ButtonBar and latest nightly build - disable FocusRect
                Peter deHaan Level 4

                John,

                 

                If you try my example in a new project, does it fail there also? Or is this just because you're using a module? I'm not a module expert, but if this is module specific I can try asking the correct internal folks.

                 

                As for the strikethrough, I don't know off the top of my head. I'd need to see a simple test case.

                 

                As for seeing these issues in your application but not in simple test cases... It may be because it was started in an old version of Builder/SDK. Almost all my work is just smaller examples using the latest version of the SDK. I'd probably try creating a new project in a new workspace and copy your code over manually into new files. That way you can try and eliminate odd/stale workspace or project config settings.

                 

                Peter

                • 5. Re: ButtonBar and latest nightly build - disable FocusRect
                  Peter deHaan Level 4

                  @David_F57,

                   

                  I use {mx_internal::VERSION} to get my SDK build number. But I usually download nightly builds from the opensource.adobe.com site and dont compile the source myself from SVN.

                  <?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"> 
                      <s:controlBarContent>
                          <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
                      </s:controlBarContent>
                      
                  </s:Application> 
                   

                   

                   

                  Peter

                  • 6. Re: ButtonBar and latest nightly build - disable FocusRect
                    jdesko Level 2

                    Hello David;

                     

                    I attached the skins for MenuButtonBarSkin and MenuButtonBarButtonSkin.  Also, where do you get your nightly's?  The latest that I've found was 11566 at http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

                    Prior to setting the focus style the focusrect only displayed when using navigation keys not when using the mouse.

                    Again, now the focusrect is showing with mouse,  my previous SDK was 11385, everything worked well before this.

                     

                    Thanks,

                    John

                    • 7. Re: ButtonBar and latest nightly build - disable FocusRect
                      jdesko Level 2

                      Errors uploading my files, I took out all references that I tried for focusRect or caret.

                       

                      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

                      minWidth="21" minHeight="21"

                      alpha.disabledStates="0.5" xmlns:mx="library://ns.adobe.com/flex/halo">

                       

                      <!-- host component -->

                      <fx:Metadata>

                      <![CDATA[

                      /**

                      * @copy spark.skins.spark.ApplicationSkin#hostComponent

                      */

                      [HostComponent("spark.components.ToggleButton")]

                      ]]>

                      </fx:Metadata>

                       

                      <fx:Script>

                      <![CDATA[

                       

                      /* Define the skin elements that should not be colorized.

                      For toggle button, the graphics are colorized but the label is not. */

                      static private const exclusions:Array = ["labelDisplay"];

                       

                      /**

                      * @copy spark.skins.SparkSkin#colorizeExclusions

                      */    

                      override public function get colorizeExclusions():Array {return exclusions;}

                       

                      ]]>

                      </fx:Script>

                       

                      <!-- states -->

                      <s:states>

                      <s:State name="up" />

                      <s:State name="over" stateGroups="overStates" />

                      <s:State name="down" stateGroups="downStates" />

                      <s:State name="disabled" stateGroups="disabledStates" />

                      <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />

                      <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />

                      <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />

                      <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />

                      </s:states>

                       

                      <s:Group left="-1" right="0" top="-1" bottom="-1"

                      scaleGridLeft="4" scaleGridTop="11" scaleGridRight="67" scaleGridBottom="17">

                       

                      <!-- layer 2: fill -->

                      <s:Path left="2" right="1" top="2" bottom="-2"

                      data="M 67 0 l 0 18 l -65.2 0 C 0.8 18 0 17.2 0 16.2 L 0 1.8 C 0.8 0 0 0.8 1.8 0 L 67 0 z">

                      <s:fill>

                      <s:BitmapFill source="@Embed('assets/images/buttonBarBack.gif')"/>

                      </s:fill>

                      </s:Path>

                       

                      </s:Group>

                       

                      <!-- layer 8: text -->

                      <!--- The defines the appearance of the label for the first button in the ButtonBar component. -->

                      <s:Label id="labelDisplay"

                      textAlign="center"

                      verticalAlign="middle"

                      maxDisplayedLines="1"

                      horizontalCenter="0" verticalCenter="1"

                      left="10" right="10" top="2" bottom="2"

                      color.overStates="#FF1111"

                      color.selectedStates="#0000CC">

                      </s:Label>

                       

                      </s:SparkSkin>

                       

                       

                      -----------------------

                      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

                          alpha.disabled="0.5" blendMode.disabled="layer">

                       

                          <fx:Metadata>

                          <![CDATA[

                          /**

                           * @copy spark.skins.spark.ApplicationSkin#hostComponent

                           */

                              [HostComponent("spark.components.ButtonBar")]

                          ]]>

                          </fx:Metadata>

                       

                          <s:states>

                              <s:State name="normal" />

                              <s:State name="disabled" />

                          </s:states>

                       

                          <fx:Declarations>

                              <!---

                                  Specifies the skin class for the first button on the ButtonBar.

                                  @default spark.skins.spark.ButtonBarFirstButtonSkin

                              -->

                              <fx:Component id="firstButton">

                                  <s:ButtonBarButton skinClass="skins.components.MenuButtonBarButtonSkin" mouseOver="toolTip=data.label"/>

                              </fx:Component>

                       

                              <!---

                                  Specifies the skin class for the middle button(s) on the ButtonBar.

                                  @default spark.skins.spark.ButtonBarMiddleButtonSkin

                              -->

                              <fx:Component id="middleButton">

                                  <s:ButtonBarButton  skinClass="skins.components.MenuButtonBarButtonSkin" mouseOver="toolTip=data.label"/>

                              </fx:Component>

                       

                              <!---

                                  Specifies the skin class for the last button on the ButtonBar.

                                  @default spark.skins.spark.ButtonBarLastButtonSkin

                              -->

                              <fx:Component id="lastButton" >

                                  <s:ButtonBarButton skinClass="skins.components.MenuButtonBarButtonSkin" mouseOver="toolTip=data.label"/>

                              </fx:Component>

                       

                          </fx:Declarations>

                       

                          <!---

                              @copy spark.components.SkinnableDataContainer#dataGroup

                          -->

                          <s:DataGroup id="dataGroup" width="100%" height="100%">

                              <s:layout>

                                  <s:ButtonBarHorizontalLayout gap="-1"/>

                              </s:layout>

                          </s:DataGroup>

                       

                      </s:Skin>

                      • 8. Re: ButtonBar and latest nightly build - disable FocusRect
                        David_F57 Level 5

                        hi John,

                         

                        I just download from svn and compile the sdk myself, takes about 5 minutes to compile and run checktests,  plus downloading a few hundred k  through svn is better than downloading 100mb. I'll have a look through the skins see if  anything stands out.

                         

                        You also mentioned issues in the other post about always having to clean, are you getting a lot of internal build errors ?

                         

                        David.

                        • 9. Re: ButtonBar and latest nightly build - disable FocusRect
                          jdesko Level 2

                          Hello Again David;

                           

                          Thanks for the reply.

                          You also mentioned issues in the other post about always having to clean, are you getting a lot of internal build errors ?

                          No errors at all, I wish, that way it would give me something easier to troubleshoot.

                           

                          This is a large project and I'd hate to do it, but with all of these little issues popping up in the last week or two of updating nightly's, I'm going to uninstall FB and try to clean all references to it, reinstall, and create the project over, this time instead of importing the project I will create new files and copy and paste.  If you have any helpful suggestions please let me know.

                           

                          Thanks Again,

                          John

                          • 10. Re: ButtonBar and latest nightly build - disable FocusRect
                            Peter deHaan Level 4

                            Another thing is you may want to look at recreating your custom skins. If you have a custom ButtonBar skin or ButtonBarButton skin from earlier builds, there may have been issues that we've fixed in newer versions of the skin. So you may want to copy the default skin again and reapply your changes.

                             

                            Peter

                            • 11. Re: ButtonBar and latest nightly build - disable FocusRect
                              jdesko Level 2

                              Peter;

                               

                              Good point, I'm going to do that after I kick myself.

                               

                              John

                              • 12. Re: ButtonBar and latest nightly build - disable FocusRect
                                David_F57 Level 5

                                Hi John,

                                 

                                I just pasted your skins straight into empty mxml files (you didn't include the header  <?xml version="1.0" encoding="utf-8"?> i assume its in your files) used Peters code as below and everything worked like a charm so the skins are not causing the issue (again latest build I don't see the point in reverting to the original FB build), just one thing I removed the embedded gif do you want to email( david_at_flashhub_dot_net) me the gif or try yours without the gif

                                 

                                <?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">

                                <s:controlBarContent>

                                <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />

                                </s:controlBarContent>

                                 

                                <fx:Declarations>

                                <s:ArrayList id="arrList">

                                <fx:Object label="Spark ButtonBar"/>

                                <fx:Object label="Second"/>

                                <fx:Object label="Third" />

                                <fx:Object label="Fourth"/>

                                <fx:Object label="The quick brown fox" />

                                <fx:Object label="Jumps ove the lazy dev" />

                                </s:ArrayList>

                                </fx:Declarations>

                                <s:VGroup x="20" y="20">

                                <s:ButtonBar id="sparkBtnBar" skinClass="johnsSkin"

                                dataProvider="{arrList}" />

                                </s:VGroup>

                                </s:Application>

                                • 13. Re: ButtonBar and latest nightly build - disable FocusRect
                                  Peter deHaan Level 4

                                  @John,

                                   

                                   

                                   

                                  That's just the price of playing with beta software. You always know there will be changes throughout the product's beta lifecycle that will mean you need to go back and update code/skins. Heck, a bunch of my blog examples still need to be updated to remove Fx prefixes, updated skins, and dozens of other API changes.

                                   

                                  But on a serious note, we all really appreciate all the great work you guys do in helping us catch bugs as early as possible in the Flex SDK.

                                   

                                  (group hug)

                                   

                                  Thanks, and keep on Flexing!

                                  Peter

                                  • 14. Re: ButtonBar and latest nightly build - disable FocusRect
                                    David_F57 Level 5

                                    Hi John,

                                     

                                    Been there done that with beta FB3 the prerelease broke everything drag and drop which was only about 90% of a scrapbooking application

                                     

                                    I got smarter with 4 I have been using svn from june and even when I switched to beta2 things went reasonably well. Any files that even had a whiff of evilness to them just got re-written using the 2 critical development tools  ctrl-C and crtl-V.

                                     

                                    David.

                                    • 15. Re: ButtonBar and latest nightly build - disable FocusRect
                                      David_F57 Level 5

                                      Hi Peter

                                      Thanks, and keep on Flexing!

                                      Last time I did that it sent a group of highly desirable females into fits of hysterical laughter, I might just hide in my cave and do coding .

                                       

                                       

                                      David.

                                      • 16. Re: ButtonBar and latest nightly build - disable FocusRect
                                        jdesko Level 2

                                        Hello David,

                                         

                                        Yes I didn't include header, since I couldn't upload the files wanted to paste as little as possible.

                                         

                                        Like I had mentioned earlier, before I troubleshoot this problem and the others further, I'm going to uninstall, reinstall, and start the project/code over.

                                         

                                        Thanks,

                                        John

                                        • 17. Re: ButtonBar and latest nightly build - disable FocusRect
                                          jdesko Level 2

                                          Hello Peter;

                                           

                                          Great answer, thanks.  I did know what I was getting myself into with Beta, it's definitely frustrating and costly time wise, but the price to pay when trying to keep up to date.

                                           

                                          Thanks again for your help,

                                          John

                                           

                                          @David - thanks for the laugh I needed that

                                          • 18. Re: ButtonBar and latest nightly build - disable FocusRect
                                            mewk Level 3

                                            LOL -- you guys are having too much fun around here!

                                             

                                            I remember discussing modules with jdesko a few months back and now I'm kinda glad I deferred some of the module coding until later. Ideally, modules should be easier to decode (because you can debug discretely), but at the same time I'm vaguely aware that the module architecture has undergone some major changes during the beta development.

                                             

                                            Maybe module coding wasn't the best place to end up?!? (although we thank you for your sacrafice )

                                             

                                            - e

                                            • 19. Re: ButtonBar and latest nightly build - disable FocusRect
                                              HansMuller Level 1

                                              I made the change you're referring to - "Corrected ButtonBarBase drawFocus()...".   That change restored ButtonBar behavior which has existed for some time: the button at caretIndex is always "raised" above the others by setting its depth=1.

                                               

                                              I wasn't able to reproduce your focus highlight problem (as I understand it) with the two skins you provided.   The focus highlight does disappear if a MenuButtonBar button is selected with the mouse.   ButtonBars do take the focus if you click on them, but only show the focus highlight if the caretIndex is moved with the keyboard, or if the ButtonBar gets the focus via the keyboard, i.e. if the user tabs into the button bar.   All of that appears to be working as expected. 

                                               

                                              If you have a complete test case that demos the problem, I'd like to see it.

                                              • 20. Re: ButtonBar and latest nightly build - disable FocusRect
                                                jdesko Level 2

                                                Hello Hans;

                                                 

                                                Thanks much for the reply.  Like I had mentioned everything was working as expected up until SDK 11566 from 113??, then the focus rect. showed up on mouse and keyboard.  Looking thru the SDK changes I found the reference to your change (sorry didn't mean to pick on you).

                                                 

                                                As I mentioned in this discussion I've been having many new issues from the last week or two of nightly updates, so I am recreating the project, modules, components, skins, etc. and then see what happens.  If I still have the ButtonBar issue I would be very happy to send you everything, thanks for the offer.

                                                 

                                                John

                                                • 21. Re: ButtonBar and latest nightly build - disable FocusRect
                                                  jdesko Level 2

                                                  First, I would like to again thank everyone for their help and timeliness on helping me troubleshoot this.

                                                   

                                                  To update - the problem was that the default blue focus rectangle was showing on a buttonbarbutton with mouse and key, this happened somewhere between sdk 113?? and 11566.

                                                   

                                                  For the mouse showing the rect., I admit user error, but in my defense remember after sdk 113??.  In the buttonbarbutton skin I was only using layer 2 with a custom fill and layer 8 modified label properties, the rest I removed (as seen in previous post).  So to fix - I went back to the original skin modified layer 2 and 8 as needed and made a new stateGroup called 'all' and excluded unneeded layers in the 'all' stateGroup.  When time allows I would again like to make the skin as lightweight as possible.

                                                   

                                                  Peter D. - the focus rect. is still showing on key arrow after making the following style change (the rest of the style is working)

                                                  Picture 1.png

                                                  this is not a problem though; but I would like to customize the default blue rect. if anyone can point me to where to do this (I'm not lazy, just busy).

                                                   

                                                  Thanks,

                                                  John

                                                  • 22. Re: ButtonBar and latest nightly build - disable FocusRect
                                                    Peter deHaan Level 4

                                                    How/where are you setting that custom "menuButtonBarButton" style on a ButtonBar?

                                                     

                                                    Peter

                                                    • 23. Re: ButtonBar and latest nightly build - disable FocusRect
                                                      jdesko Level 2

                                                      Hello Peter,

                                                       

                                                      Above was the style in an external style sheet, and here is the MXML

                                                       

                                                      Picture 2.png

                                                      Rather than turning off the rect. do you have an example on your blog on how to customize the look?

                                                       

                                                      Thanks again,

                                                      John

                                                      • 24. Re: ButtonBar and latest nightly build - disable FocusRect
                                                        Peter deHaan Level 4

                                                        Well, that's yer problem right there...

                                                         

                                                        I was setting it on ButtonBarButton, and you're setting it on ButtonBar.

                                                         

                                                        Use my code and it "should" work (or your money back!):

                                                         

                                                                s|ButtonBarButton {
                                                                    focusSkin: ClassReference(null);
                                                                }

                                                         

                                                         

                                                        Peter

                                                        • 25. Re: ButtonBar and latest nightly build - disable FocusRect
                                                          jdesko Level 2

                                                          Peter;

                                                           

                                                          I knew that was the problem ... I was hired to test you.

                                                           

                                                          My rear is getting sore from kicking it.

                                                           

                                                          Thanks again,

                                                          John

                                                          • 26. Re: ButtonBar and latest nightly build - disable FocusRect
                                                            Peter deHaan Level 4

                                                            Or if you want a really neat CSS trick, and only wanted to change/remove the focus skin for that ONE ButtonBar (without having to reskin anything), you could try something like the following*:

                                                             

                                                            s|ButtonBar#my_ButtonBar s|ButtonBarButton {
                                                                focusSkin: ClassReference(null);
                                                            }
                                                            

                                                             

                                                            Basically it's saying "style the Spark ButtonBar component with the id 'my_ButtonBar', and if it has any Spark ButtonBarButton decendents, set their focusSkin's to null". (or something like that)

                                                             

                                                             

                                                            * -- this is completely untested, but it "should" work.

                                                             

                                                            Peter

                                                            • 27. Re: ButtonBar and latest nightly build - disable FocusRect
                                                              jdesko Level 2

                                                              Peter;

                                                               

                                                              I tried your "untested" suggestion (every which way but loose) and this was the error

                                                               

                                                              Picture 4.png

                                                              Looking at Adobes CSS Advance selectors, http://opensource.adobe.com/wiki/display/flexsdk/CSS+Advanced+Selectors,

                                                              like you said, it should work. 

                                                               

                                                              But, what is working is this (I changed the name of my class selector)

                                                               

                                                              Picture 3.png

                                                              When time allows I will probably end up with a custom focusSkin for the ButtonBarButton's.

                                                               

                                                              Again, thanks much for your help and time,

                                                              John

                                                              • 28. Re: ButtonBar and latest nightly build - disable FocusRect
                                                                Peter deHaan Level 4

                                                                Heh, and that's why I should test code in Builder instead of coding directly into the forums.

                                                                 

                                                                http://bugs.adobe.com/jira/browse/SDK-24190

                                                                 

                                                                 

                                                                The workaround is to not use underscores in your component ID:

                                                                <?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:Style>
                                                                        @namespace s "library://ns.adobe.com/flex/spark";
                                                                        @namespace mx "library://ns.adobe.com/flex/halo";
                                                                
                                                                        s|ButtonBar#myButtonBar s|ButtonBarButton {
                                                                            baseColor: red;
                                                                        }
                                                                    </fx:Style>
                                                                
                                                                    <s:VGroup x="20" y="20">
                                                                        <s:ButtonBar id="myButtonBar">
                                                                            <s:dataProvider>
                                                                                <s:ArrayList source="[One two three,Four five six,Seven eight nine]" />
                                                                            </s:dataProvider>
                                                                        </s:ButtonBar>
                                                                        <s:ButtonBar id="yourButtonBar">
                                                                            <s:dataProvider>
                                                                                <s:ArrayList source="[The quick brown,Fox jumps over,The lazy dog]" />
                                                                            </s:dataProvider>
                                                                        </s:ButtonBar>
                                                                    </s:VGroup>
                                                                
                                                                </s:Application>