9 Replies Latest reply on Nov 5, 2009 12:01 PM by Handycam

    Replace horizontal scroll in a spark list?

    Handycam Level 1

      I've gotten myself confused...

       

      1. I create a new component based on Spark List, "MyList.mxml"

       

      2. I open it, and in design view I say "create copy of skin"

       

      3. I open ListSkin1.mxml.

       

      I want to replace the scroll bar with a custom skinned one. I am not sure where to do this...

       

      1. I create a new component based on HScrollBar "MyScrollbar.mxml"

       

      Now what?  Where so I specify in the List component -- or its skin -- do I specify the new scroll bar?

        • 1. Re: Replace horizontal scroll in a spark list?
          Peter deHaan Level 4

          @Steve,

           

          I haven't tried this yet, so this may not be 100% right, but I believe the Scroller owns the scroll bars. So I'd look at making a custom Scroller skin which specifies your custom HScrollBar/VScrollBar skin.

           

          Peter

          • 2. Re: Replace horizontal scroll in a spark list?
            Handycam Level 1

            what property?  although code hints horizontalScrollBar, if I specify my

            skin or component it complains that this value "can't be represented in

            text"

            • 3. Re: Replace horizontal scroll in a spark list?
              Peter deHaan Level 4

              This is all just lies and speculation on my part, I can try and play with this tonight after work and see how to do it properly, but for a Spark List I was ssuming you could do the following:

               

              (1) Create a custom Spark List skin, wherein you specify a custom skinClass for the <s:Scroller> (see line 134 of spark/skins/spark/ListSkin.mxml).

              (2) In your custom Scroller skin, you have a VScrollBar (line 70 of spark/skins/spark/ScrollerSkin.mxml) and an HScrollBar (line 73 of ScrollerSkin.mxml). I'd specify your custom skin classes there.

               

              Step 1 may not even be needed. I dont see a <s:Scroller> skinClass hardcoded into the ListSkin.mxml. You may be able to get away with specifying the Scroller's skinClass style using Advanced CSS like this:

               

              s|List s|Scroller {

                  skinClass: ClassReference("CustomScrollerSkin.mxml");

              }

               

              Heck, you may be able to do the same with the VScrollBar and HScrollBar skins also. Again, I'd need to roll up the sleeves and actually check it out to give a definitive answer (unless David_F57 comes in and corrects me).

               

              Peter

              • 4. Re: Replace horizontal scroll in a spark list?
                Peter deHaan Level 4

                OK, this is a little crude, but seems to work (and was a lot less complex than I initially thought). My main app looks like this:

                 

                <?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";
                        s|List s|Scroller {
                            horizontalScrollPolicy: on;
                            verticalScrollPolicy: on;
                        }
                        s|List s|HScrollBar {
                            skinClass: ClassReference("TrackThumbOnlyHSBSkin");
                        }
                    </fx:Style>
                    <s:List id="list" width="100" height="100" horizontalCenter="0" verticalCenter="0">
                        <s:dataProvider>
                            <s:ArrayList>
                                <fx:Object label="The quick brown fox jumps over the lazy dog" />
                                <fx:Object label="One" />
                                <fx:Object label="Two" />
                                <fx:Object label="Three" />
                                <fx:Object label="Four" />
                                <fx:Object label="Five" />
                                <fx:Object label="Six" />
                                <fx:Object label="Seven" />
                                <fx:Object label="Eight" />
                                <fx:Object label="Nine" />
                            </s:ArrayList>
                        </s:dataProvider>
                    </s:List>
                </s:Application>
                
                

                 

                 

                And my custom HScrollBar skin, TrackThumbOnlyHSBSkin.mxml, is as follows:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark"
                             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                             minWidth="35" minHeight="15"
                             alpha.disabled="0.5" alpha.inactive="0.5">
                    <s:states>
                        <s:State name="normal" />
                        <s:State name="disabled" />
                        <s:State name="inactive" />
                    </s:states>
                    <fx:Metadata>
                        <![CDATA[ 
                        [HostComponent("spark.components.HScrollBar")]
                        ]]>
                    </fx:Metadata> 
                    <fx:Script fb:purpose="styling">
                        <![CDATA[
                            /* Define the skin elements that should not be colorized. 
                            For scroll bar, the skin itself is colorized but the individual parts are not. */
                            static private const exclusions:Array = ["track", "thumb"];
                            override public function get colorizeExclusions():Array {
                                return exclusions;
                            }
                            override protected function initializationComplete():void {
                                useBaseColor = true;
                                super.initializationComplete();
                            }
                        ]]>
                    </fx:Script>
                    <!--- Defines the skin class for the HScrollBarSkin's track. The default skin class is HScrollBarTrackSkin. -->
                    <s:Button id="track" left="0" right="0" width="54" 
                              focusEnabled="false"
                              skinClass="spark.skins.spark.HScrollBarTrackSkin"
                              baseColor="haloGreen"/>
                    <!--- Defines the skin class for the HScrollBarSkin's thumb. The default skin class is HScrollBarThumbSkin. -->
                    <s:Button id="thumb" 
                              focusEnabled="false" visible.inactive="false"
                              skinClass="spark.skins.spark.HScrollBarThumbSkin"
                              baseColor="haloBlue"/>
                </s:SparkSkin>
                
                

                 

                So I was wrong. I didnt need a custom List skin, or Scroller skin... just the one custom HScrollBar skin (and presumably a custom VScrollBar skin -- and possibly more skins depending on how custom you want the scrollbar left/right top/bottom buttons and/or thumb/track skins).

                 

                Peter

                • 5. Re: Replace horizontal scroll in a spark list?
                  Peter deHaan Level 4

                  Meh. This is probably a lot easier to read: http://blog.flexexamples.com/2009/11/04/setting-a-custom-horizontal-scroll-bar-skin-on-a-s park-list-control-in-flex-4/

                   

                  Peter

                   

                  Message was edited by: Peter deHaan (Adobe) -- added a SWF. OH BOY!

                  • 6. Re: Replace horizontal scroll in a spark list?
                    Handycam Level 1

                    Thanks so much Peter I will try this tomorrow.

                    • 7. Re: Replace horizontal scroll in a spark list?
                      Handycam Level 1

                      Thanks. I discovered two things, though:

                       

                      1. the style definition has to be in the main app, it won't work in the

                      component where the list lives

                       

                      2. I can't target a specific List:

                       

                      .choiceList s|HScrollBar

                       

                      does not work.

                      • 8. Re: Replace horizontal scroll in a spark list?
                        Peter deHaan Level 4

                        Steve,

                         

                        I'm not sure about #1, but if you have a simple test case it may be worth filing a bug at http://bugs.adobe.com/flex/ and somebody can take a look.

                        As for #2, apparently it is a known/open issue: http://bugs.adobe.com/jira/browse/SDK-23213, the workaround seems to be to set s|List.choiceList s|HScrollBar. For more examples of setting styles based on a List component's id or styleName property, see http://blog.flexexamples.com/2009/11/05/applying-styles-to-specific-spark-list-controls-in -flex-4/.

                         

                        Peter

                        • 9. Re: Replace horizontal scroll in a spark list?
                          Handycam Level 1

                          Thank you, that workaround does indeed work(around)