6 Replies Latest reply on Oct 30, 2006 12:21 PM by dimival

    CUSTOM COMPONENTS

    Sa6k0o0
      I have a project in flex, I have a designs that I have to follow in order to to the application I am supposed to.

      I just want the scrollbar to have specific Scroll Track and specific Scroll Thumb, and to get rid of the buttons up and down (arrows).I found the way how to get rid of the arrows, but there is a small gap which I still don't know exactly how to remove.

      I am also trying to get rid of the the five lines in the middle of the scrollthumb.
      I tryed to remove them but they are not in the classes for skinning , so they are in a button class which I could not find , I don't know it is very strange. If somebody has any idea how to do that I will really appreciate it.

      Here is the image of what I am trying to get rid of:
      http://code-craft.net/Sa6k0o0/test/flex/2/img.jpg


      If somebody knows how exactly I am supposed to make a scrollbar that I could apply to VBox, It would be also great. I have made scrollbar in AS2 very easly to customize, so I can rewrite it in flex if there is no way to use the already existing, but I still don't know how exactly is supposed to function the scrollbar I could write.What I mean is how exactly are supposed to be the functions and is it required all the names of the function to be the same like the already existing. And which functions are required just to work.And the most important is how to apply it to the actual VBox ?
        • 2. Re: CUSTOM COMPONENTS
          Sa6k0o0 Level 1
          leotemp , I don't see how this http://www.adobe.com/devnet/flex/articles/flex_skins.html is goint to help me to make the scrollbar more custom
          • 3. Re: CUSTOM COMPONENTS
            dimival Level 1
            Actually i think it might work using skins, check out the ScrollBar Documentation:

            http://livedocs.macromedia.com/flex/2/langref/mx/controls/scrollClasses/ScrollBar.html

            On the styles section, there are the default skins used for the ScrollBar, these styles are the ones that give the ScrollBar its look and feel, so you should modify them in order to have your own ScrollBar.
            Now you need to let the VBox know you want to use your own ScrollBar instead of the default one, for this you use the verticalScrollBar and horizontalScrollBar properties of the VBox, so you just need to pass your own ScrollBar object to these properties.

            <namespace:CustomScrollBar id=myScroll/>

            <mx:VBox verticalScrollbar = {myScroll}>
            </mx:VBox>


            • 4. Re: CUSTOM COMPONENTS
              Sa6k0o0 Level 1
              Well I have checked very cearfuly the documentation and I have made a css file like this

              fillColors: #8B8081, #8B8081, #ffffff, #ffffff;
              fillAlphas: 1, 1, 1, 1;
              themeColor: #8B8081;
              trackColors: #685c5d, #685c5d;
              highlightAlphas: 0, 0;
              cornerRadius: 0;
              downArrowDisabledSkin : ClassReference('scrollbarSkin.CustomScrollArrowSkin' );
              downArrowDownSkin : ClassReference('scrollbarSkin.CustomScrollArrowSkin' );
              downArrowOverSkin : ClassReference('scrollbarSkin.CustomScrollArrowSkin' );
              downArrowUpSkin : ClassReference('scrollbarSkin.CustomScrollArrowSkin' );
              upArrowDisabledSkin : ClassReference('scrollbarSkin.CustomScrollArrowSkin' );
              upArrowDownSkin : ClassReference('scrollbarSkin.CustomScrollArrowSkin' );
              upArrowOverSkin : ClassReference('scrollbarSkin.CustomScrollArrowSkin' );
              upArrowUpSkin : ClassReference('scrollbarSkin.CustomScrollArrowSkin' );
              trackSkin:ClassReference('scrollbarSkin.CustomTrackSkin');
              thumbDownSkin:ClassReference('scrollbarSkin.myScrollThumb');
              thumbOverSkin:ClassReference('scrollbarSkin.myScrollThumb');
              thumbUpSkin:ClassReference('scrollbarSkin.myScrollThumb');

              Where myScrollThumb ,, CustomScrollArrowSkin and CustomTrackSkin are my specific classes that extend the regular , but override some of the functions so that I have very custom scrollbar. However there some things like the five lines of the scrollthumb , which are not in the classes for skinning. And if somebody knows how I am supposed to remove this five lines of the scroll thumb of the scrollbar I will appreciate it.
              • 5. Re: CUSTOM COMPONENTS
                Sa6k0o0 Level 1
                It is okay for me tho write my custom scrollbar from scratch
                like this
                <namespace:CustomScrollBar id=myScroll/>
                but the thing is that I don't want to make it exactly like the build in.
                And I don't know which functions are totally required for the scrollbar and what could be missed so that it will work with Vbox or whichever component that uses scrollbar
                • 6. Re: CUSTOM COMPONENTS
                  dimival Level 1
                  In the folder where you installed Flex, there is the source code for many classes, you can check them out to find out which functions you need to make it work.
                  The ScrollBar classes are in this path inside your flex installation directory:
                  flex_sdk_2\frameworks\source\mx\controls\scrollClasses