2 Replies Latest reply on Jul 20, 2010 8:28 AM by subverdotcom

    Flex 4: Custom ScrollBar not working in Custom DropDownList

    subverdotcom

      Hello,

      I'm having an odd issue that I just cannot figure out. I have a custom DropDownList .as component (to pass color values) and a custom skin. In this skin I am using a custom Scroller (same AS file component with mxml skin). When I use this configuration, clicking on the scrollbar just closes the DropDown. If I remove the skin from my custom scrollbar it works, which leads me to believe it has something to do with the DropDown skin. Even if I revert my custom Scroller to the spark Scroller, it still doesn't work. I've narrowed it down to what seems like a problem with my DropDownList skin.

       

      Not really sure what code to put here, but all I've been doing is right clicking my project and making new ActionScript components and MXML skins from the default skin. Here is my DropDownList skin, not sure if I should paste any other code? I have no idea what would be causing this, so I don't really know what code to place.

       

            [HostComponent("ccm.DropDown.DropDownList")]          

        • 1. Re: Flex 4: Custom ScrollBar not working in Custom DropDownList
          subverdotcom Level 1

          Woops, the code didn't place correctly, here it is:

          <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" alpha.disabled=".5" xmlns:Scroller="ccm.Scroller.*" xmlns:DropDown="ccm.DropDown.*"> 
              <fx:Metadata>
                    [HostComponent("ccm.DropDown.DropDownList")]
               </fx:Metadata>
          
              <!-- host component -->
               <fx:Script fb:purpose="styling">
                    <![CDATA[            
                         import flash.filters.BitmapFilterQuality;
                         import flash.filters.BitmapFilterType;
                         
                         import mx.controls.Alert;
                         
                         import spark.filters.*;
                         /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
                         static private const contentFill:Array = [];
                         
                         /**
                          * @private
                          */
                         override public function get contentItems():Array {return contentFill};
                         /**
                          * @private
                          */
                         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                         {
                              openButton.setStyle("cornerRadius", getStyle("cornerRadius"));
                              super.updateDisplayList(unscaledWidth, unscaledHeight);
                         }
                    ]]>
               </fx:Script>
               
               <s:states>
                    <s:State name="normal" />
                    <s:State name="open" />
                    <s:State name="disabled" />
               </s:states>
               
               <!--- 
               The PopUpAnchor control that opens the drop-down list. 
               
               <p>In a custom skin class that uses transitions, set the 
               <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
               -->
               <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
                                 left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
                                 popUpPosition="below" popUpWidthMatchesAnchorWidth="true" >
                    
                    <!--- 
                    This includes borders, background colors, scrollers, and filters.
                    @copy spark.components.supportClasses.DropDownListBase#dropDown
                    -->
                    <s:Group maxHeight="134" minHeight="22" >
                         
                         <s:Rect id="fill" left="1" right="1" top="1" bottom="0" bottomLeftRadiusX="16.5" bottomRightRadiusX="16.5" topLeftRadiusX="16.5" topRightRadiusX="16.5" >
                              <s:fill>
                                   <s:SolidColor color="0xFFFFFF" />
                              </s:fill>
                              <s:filters>
                                   <s:GlowFilter 
                                        color="0x000000" 
                                        alpha=".35" 
                                        blurX="6" 
                                        blurY="6" 
                                        strength="1" 
                                        quality="{BitmapFilterQuality.HIGH}"
                                        inner="true" 
                                        knockout="false"/>
                              </s:filters>
                         </s:Rect>
                         
                         <!--- @private -->
                         <Scroller:Scroller id="scroller" left="8" top="8" right="8" bottom="8" hasFocusableChildren="false" minViewportInset="1"
                                                showButtons="false" 
                                                trackColor="{hostComponent._trackColor}" 
                                                thumbColor="{hostComponent._thumbColor}" 
                                                skinClass="ccm.Scroller.ScrollerSkin">
                              
                              <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                              <s:DataGroup id="dataGroup" itemRenderer="ccm.DropDown.DropDownItemRenderer"> 
                                   <s:layout>
                                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                                   </s:layout>
                              </s:DataGroup>
                         </Scroller:Scroller>
                    </s:Group>
               </s:PopUpAnchor>
               
               <!---  The default skin is DropDownListButtonSkin. 
               @copy spark.components.supportClasses.DropDownListBase#openButton
               @see spark.skins.spark.DropDownListButtonSkin -->
               <DropDown:DropDownButton id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" 
                                              skinClass="ccm.DropDown.DropDownButtonSkin" 
                                              buttonColor="{hostComponent._buttonColor}"
                                              />  
               
               <!--- @copy spark.components.DropDownList#labelDisplay -->
               <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" 
                          mouseEnabled="false" mouseChildren="false"
                          left="12" right="30" top="2" bottom="2" width="75" verticalCenter="1" /> 
               
          </s:SparkSkin>
          
          • 2. Re: Flex 4: Custom ScrollBar not working in Custom DropDownList
            subverdotcom Level 1

            Oh, wow, I overlooked the fact that the group holding the popup content didn't have id="dropDown", once I added that, it works fine

            I can't believe I spent a couple hours on this!