s:DropDownList component issue to set property "textSelectedColor"

[usmanashraf]

I am using s: DropDownList component in flash builder 4.6. I have to set property "textSelectedColor" which is given in mx: ComboBox but not given in s: DropDownList. So can anyone help me please to fix this issue.

Thanks.

[RobertScheitlin__GISP · Accepted solution]

usmanashraf88,

   You will have to use a custom skin for the spark.components.DropDownList that points to a custom item renderer.

MyDropDownListSkin.mxml

<?xml version="1.0" encoding="utf-8"?> <!--      ADOBE SYSTEMS INCORPORATED     Copyright 2008 Adobe Systems Incorporated     All Rights Reserved.      NOTICE: Adobe permits you to use, modify, and distribute this file     in accordance with the terms of the license agreement accompanying it.   -->  <!--- The default skin class for the Spark DropDownList component.        The skin for the anchor button for a DropDownList component        is defined by the DropDownListButtonSkin class.                <p>In a custom skin class that uses transitions, set the        <code>itemDestructionPolicy</code> property to <code>never</code>       for the PopUpAnchor defined by the popUp property.</p>                      @see spark.components.DropDownList               @see spark.skins.spark.DropDownListButtonSkin                @langversion 3.0       @playerversion Flash 10       @playerversion AIR 1.5       @productversion Flex 4 --> <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">       <!-- host component -->     <fx:Metadata>     <![CDATA[          /**           * @copy spark.skins.spark.ApplicationSkin#hostComponent          */         [HostComponent("spark.components.DropDownList")]     ]]>     </fx:Metadata>       <fx:Script fb:purpose="styling">         <![CDATA[                                      /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */             static private const contentFill:Array = ["bgFill"];                          /**              * @private              */             override public function get contentItems():Array {return contentFill};                         /**              * @private              */             override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void             {                 if (getStyle("borderVisible") == false)                 {                     if (border)                         border.visible = false;                     if (background)                     {                         background.left = background.top = background.right = background.bottom = 0;                     }                     if (scroller)                         scroller.minViewportInset = 0;                 }                 else                 {                     if (border)                         border.visible = true;                     if (background)                     {                         background.left = background.top = background.right = background.bottom = 1;                     }                     if (scroller)                         scroller.minViewportInset = 1;                 }                                  if (dropShadow)                     dropShadow.visible = getStyle("dropShadowVisible");                                  openButton.setStyle("cornerRadius", getStyle("cornerRadius"));                                  if (borderStroke)                 {                     borderStroke.color = getStyle("borderColor");                     borderStroke.alpha = getStyle("borderAlpha");                 }                 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>never</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 id="dropDown">                      <!--- @private -->             <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7"                   angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>                      <!--- @private -->             <s:Rect id="border" left="0" right="0" top="0" bottom="0">                 <s:stroke>                     <!--- border stroke @private -->                     <s:SolidColorStroke id="borderStroke" weight="1"/>                 </s:stroke>             </s:Rect>              <!-- fill -->             <!--- Defines the appearance of drop-down list's background fill. -->             <s:Rect id="background" left="1" right="1" top="1" bottom="1" >                 <s:fill>                 <!---                       The color of the drop down's background fill.                     The default color is 0xFFFFFF.                 -->                     <s:SolidColor id="bgFill" color="0xFFFFFF" />                 </s:fill>             </s:Rect>                          <!--- @private -->             <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">                 <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->                 <s:DataGroup id="dataGroup" itemRenderer="com.esri.viewer.skins.DDLItemRenderer">                     <s:layout>                         <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>                     </s:layout>                 </s:DataGroup>              </s:Scroller>         </s:Group>     </s:PopUpAnchor>          <!---  The default skin is DropDownListButtonSkin.              @copy spark.components.supportClasses.DropDownListBase#openButton             @see spark.skins.spark.DropDownListButtonSkin -->     <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" tabEnabled="false"         skinClass="spark.skins.spark.DropDownListButtonSkin" />                <!--- @copy spark.components.DropDownList#labelDisplay -->     <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"          mouseEnabled="false" mouseChildren="false"         left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" />   </s:SparkSkin>

DDLItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?> <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"                  xmlns:s="library://ns.adobe.com/flex/spark"                  xmlns:mx="library://ns.adobe.com/flex/mx"                  autoDrawBackground="true">     <s:states>         <s:State name="normal" />         <s:State name="hovered" />         <s:State name="selected" />     </s:states>     <s:Label id="labelDisplay"              color="#333f28"              color.hovered="#ffffff"              color.selected="#ffffff"              left="3" right="3" top="4" bottom="3" />      </s:ItemRenderer>

default.css entry

s|DropDownList {     color: #333f28;     symbolColor: #333f28;     skinClass:ClassReference("com.esri.viewer.skins.MyDropDownListSkin"); }

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow these steps as shown in the below graphic:

[usmanashraf]

nice 🙂  . really helpful for me.

Thanks.   🙂

[RobertScheitlin__GISP]

usmanashraf88,

   Glad to help. Now it is your turn. Please follow the steps in the graphic in my above post.