I have a SkinnableContainer that I would like to add a border to. I have already created a skin class that creates a 1 pixel border around all four sides of the container successfully, however, I would like the border to only be for the top and bottom of the container, not the sides (left, right). How can I achieve such a thing? I have attached my current skin class. Please help! Thanks in advance.
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\mySkins\MyBorderSkin.mxml -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Metadata>
[HostComponent("spark.components.SkinnableContainer")]
</fx:Metadata>
<!-- Define the skin states. -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!-- Define a Rect to fill the area of the skin. -->
<s:Rect x="0" y="0"
height="100%" width="100%">
<s:stroke>
<s:LinearGradientStroke weight="1"/>
</s:stroke>
</s:Rect>
<!-- Define the content area of the container. -->
<s:Group id="contentGroup"
left="5" right="5" top="2" bottom="2">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:Group>
</s:Skin>
Use something like:
<s:Line left="0" top="0" right="0">
<s:stroke>
<s:LinearGradientStroke weight="1"/>
</s:stroke>
</s:Line>
<s:Line left="0" bottom="0" right="0">
<s:stroke>
<s:LinearGradientStroke weight="1"/>
</s:stroke>
</s:Line>
instead of your Rect declaration.
Related
I want to remove (hide) some controls of my videoPlayer on my flex project.
They just Marked in this picture:
For example I can use videoPlayer.scrubBar.visible = false to hide the scrubBar, but if I use it for fullScreenButton although this will hide it, but the place of button will remain empty! Or I don't know how remove or hide currentTime / duration.
P.S: prefer to don't use the skin, because it's a pretty simple project and I don't want to increase my classes and etc...
You could extend the VideoDisplay component--and create a custom skin--to make these skin Parts easily hidden / displayed at runtime if you wish. Or you could access the skin parts directly and change the visibility property.
But, the best way to do this is to build a custom skin. Here is one that took me a couple of minutes and accomplishes everything you ask.
<?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 VideoPlayer component.
#see spark.components.VideoPlayer
#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.disabledStates="0.5"
chromeColor.fullScreenStates="0xCCCCCC">
<!-- A chrome color of 0xCCCCCC in the fullScreenStates means we ignore the chromeColor property
all together as 0xCCCCCC is essentially just a no-op color transform -->
<!-- host component -->
<fx:Metadata>
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.VideoPlayer")]
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
/* Define the skin elements that should not be colorized. */
static private const exclusions:Array = ["videoDisplay", "playPauseButton", "scrubBar",
"currentTimeDisplay", "timeDivider", "durationDisplay",
"volumeBar", "fullScreenButton"];
/**
* #private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* #private
*/
override public function get colorizeExclusions():Array
{
return exclusions;
}
/**
* #private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
dropShadow.visible = getStyle("dropShadowVisible");
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="uninitialized" stateGroups="uninitializedStates, normalStates" />
<s:State name="loading" stateGroups="loadingStates, normalStates" />
<s:State name="ready" stateGroups="readyStates, normalStates" />
<s:State name="playing" stateGroups="playingStates, normalStates" />
<s:State name="paused" stateGroups="pausedStates, normalStates" />
<s:State name="buffering" stateGroups="bufferingStates, normalStates" />
<s:State name="playbackError" stateGroups="playbackErrorStates, normalStates" />
<s:State name="disabled" stateGroups="disabledStates, normalStates"/>
<s:State name="uninitializedAndFullScreen" stateGroups="uninitializedStates, fullScreenStates" />
<s:State name="loadingAndFullScreen" stateGroups="loadingStates, fullScreenStates" />
<s:State name="readyAndFullScreen" stateGroups="readyStates, fullScreenStates" />
<s:State name="playingAndFullScreen" stateGroups="playingStates, fullScreenStates" />
<s:State name="pausedAndFullScreen" stateGroups="pausedStates, fullScreenStates" />
<s:State name="bufferingAndFullScreen" stateGroups="bufferingStates, fullScreenStates" />
<s:State name="playbackErrorAndFullScreen" stateGroups="playbackErrorStates, fullScreenStates" />
<s:State name="disabledAndFullScreen" stateGroups="disabledStates, fullScreenStates"/>
</s:states>
<!-- drop shadow -->
<!--- #private -->
<s:RectangularDropShadow id="dropShadow" blurX="17" blurY="17" alpha="0.32" distance="4"
angle="90" color="#131313" left="0" top="0" right="0" bottom="0"
excludeFrom="fullScreenStates"/>
<!--- Video and player controls are clipped if they exceed the size of the
component, but the drop shadow above is not clipped and sizes to the component.
We also set verticalScrollPosition so that when we do clip, rather than clipping
off the bottom first, we clip off the top fist. This is so the player controls
are still visible when we start clipping. -->
<s:Group id="clippedGroup" clipAndEnableScrolling="true" left="0" top="0" right="0" bottom="0"
verticalScrollPosition="{Math.max(0, 184-clippedGroup.height)}">
<!-- There's a minimum size for the video and controls. If we go below that
we are clipped. -->
<s:Group minWidth="263" minHeight="184" left="0" right="0" top="0" bottom="0">
<!-- background when the videoDisplay doesn't fill its whole spot -->
<s:Rect bottom="1" left="1" right="1" top="1"
bottom.fullScreenStates="0" left.fullScreenStates="0"
right.fullScreenStates="0" top.fullScreenStates="0">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>
<!--- #copy spark.components.VideoPlayer#videoDisplay -->
<s:VideoDisplay id="videoDisplay" bottom="24" left="1" right="1" top="1"
bottom.fullScreenStates="0" left.fullScreenStates="0"
right.fullScreenStates="0" top.fullScreenStates="0" />
<!-- video player controls -->
<s:Group left="0" right="0" height="24" bottom="0" bottom.fullScreenStates="150">
<!-- actual controls with a maxWidth in non-fullScreen mode -->
<!--- #copy spark.components.VideoPlayer#playerControls -->
<s:Group bottom="0" horizontalCenter="0" left="0" right="0" maxWidth.fullScreenStates="755" id="playerControls">
<!--- #copy spark.components.VideoPlayer#playPauseButton -->
<s:ToggleButton id="playPauseButton" left="0" bottom="0"
skinClass="spark.skins.spark.mediaClasses.normal.PlayPauseButtonSkin"
skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.PlayPauseButtonSkin"
layoutDirection="ltr"
focusIn="event.target.depth=1" focusOut="event.target.depth=0" />
<!-- scrubbar + the currentTime/duration labels -->
<s:Group left="39" right="75" top="0" bottom="0">
<!-- background for scrubbar + the currentTime/duration -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF" color.fullScreenStates="0x585858" alpha.fullScreenStates="0.55"/>
<s:GradientEntry color="0xDCDCDC" color.fullScreenStates="0x1E1E1E" alpha.fullScreenStates="0.55"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- fill highlight (exclude in fullScreen) -->
<s:Rect left="1" right="1" top="1" height="11" excludeFrom="fullScreenStates">
<s:fill>
<s:SolidColor color="0xFFFFFF" alpha="0.3" />
</s:fill>
</s:Rect>
<!-- one pixel border -->
<s:Rect left="1" right="1" top="1" bottom="1">
<s:stroke>
<s:LinearGradientStroke weight="1" rotation="90">
<s:GradientEntry color="0xFEFEFE" color.fullScreenStates="0xFFFFFF" alpha.fullScreenStates="0.12" />
<s:GradientEntry color="0xEAEAEA" color.fullScreenStates="0xFFFFFF" alpha.fullScreenStates="0.09" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- border for the scrubbar/time label controls -->
<s:Rect left="-1" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="0x131313" color.fullScreenStates="0x222222" alpha.fullScreenStates="0.66" />
</s:stroke>
</s:Rect>
<!-- scrub bar + currentTime/duration in a HorizontalLayout -->
<s:Group left="0" right="0" height="23" bottom="0">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" gap="1" />
</s:layout>
<!-- spacer -->
<s:Rect width="7" height="1" />
<!--- #copy spark.components.VideoPlayer#scrubBar -->
<!-- <s:ScrubBar id="scrubBar" width="100%" liveDragging="true"
skinClass="spark.skins.spark.mediaClasses.normal.ScrubBarSkin"
skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.ScrubBarSkin" />
-->
<!-- spacer -->
<s:Rect width="8" height="1" />
<!--- #copy spark.components.VideoPlayer#currentTimeDisplay -->
<!-- <s:Label id="currentTimeDisplay" color.fullScreenStates="0xFFFFFF" />
-->
<!--- #private -->
<!-- <s:Label id="timeDivider" text="/" color.fullScreenStates="0xFFFFFF" />
-->
<!--- #copy spark.components.VideoPlayer#durationDisplay -->
<!-- <s:Label id="durationDisplay" color.fullScreenStates="0xFFFFFF" />
-->
<!-- spacer -->
<s:Rect width="8" height="1" />
</s:Group>
</s:Group>
<!--- #copy spark.components.VideoPlayer#volumeBar -->
<s:VolumeBar id="volumeBar" snapInterval=".01" stepSize=".01" liveDragging="true"
right="37" bottom="0"
layoutDirection="ltr"
skinClass="spark.skins.spark.mediaClasses.normal.VolumeBarSkin"
skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.VolumeBarSkin"
focusIn="event.target.depth=1" focusOut="event.target.depth=0" />
<!--- #copy spark.components.VideoPlayer#fullScreenButton -->
<!-- <s:Button id="fullScreenButton" right="0" bottom="0" label="Fullscreen"
skinClass="spark.skins.spark.mediaClasses.normal.FullScreenButtonSkin"
skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.FullScreenButtonSkin"
focusIn="event.target.depth=1" focusOut="event.target.depth=0" />
-->
</s:Group>
</s:Group>
<!-- border -->
<s:Rect left="0" right="0" top="0" bottom="0" excludeFrom="fullScreenStates">
<s:stroke>
<s:SolidColorStroke color="0x131313" />
</s:stroke>
</s:Rect>
</s:Group>
</s:Group>
</s:SparkSkin>
I am trying to skin buttons in Flex, but after I skinned a button the icon that I had linked in it disappeared. I know I can add the icon into the skin, but that would mean I have to create lots of different skins.
Any EASY way to fix this?
mxml file:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ns1="*"
xmlns:packageservice="services.packageservice.*"
title="My Dish"
fontSize.Beef="10" textAlign.Beef="center">
<fx:Script>
<![CDATA[
import com.adobe.serializers.utility.TypeUtility;
import mx.events.FlexEvent;
protected function list_creationCompleteHandler(event:FlexEvent):void
{
my_get_beef_dishResult.token = packageService.my_get_beef_dish();
}
protected function list2_creationCompleteHandler(event:FlexEvent):void
{
my_get_pork_dishResult.token = packageService.my_get_pork_dish();
}
protected function list3_creationCompleteHandler(event:FlexEvent):void
{
my_get_chicken_dishResult.token = packageService.my_get_chicken_dish();
}
protected function list4_creationCompleteHandler(event:FlexEvent):void
{
my_get_fish_dishResult.token = packageService.my_get_fish_dish();
}
protected function list5_creationCompleteHandler(event:FlexEvent):void
{
my_get_vegetables_dishResult.token = packageService.my_get_vegetables_dish();
}
]]>
</fx:Script>
<s:states>
<s:State name="Beef"/>
<s:State name="Pork"/>
<s:State name="Chicken"/>
<s:State name="Fish"/>
<s:State name="Vegetables"/>
<s:State name="Other"/>
</s:states>
<s:navigationContent>
<s:Button label="Back" click="navigator.popView();"/>
</s:navigationContent>
<fx:Declarations>
<s:CallResponder id="my_get_beef_dishResult"/>
<packageservice:PackageService id="packageService"/>
<s:CallResponder id="my_get_pork_dishResult"/>
<s:CallResponder id="my_get_chicken_dishResult"/>
<s:CallResponder id="my_get_fish_dishResult"/>
<s:CallResponder id="my_get_vegetables_dishResult"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup x="0" y="0" width="245" height="364" contentBackgroundColor="#E6E6E6">
<s:List id="MyDishOther" includeIn="Other" width="245" height="364" contentBackgroundColor="#E6E6E6"></s:List>
<s:List id="list" includeIn="Beef" width="245" height="365"
creationComplete="list_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_beef_dishResult.lastResult}"/>
</s:List>
<s:List id="list2" includeIn="Pork" width="245" height="365"
creationComplete="list2_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_pork_dishResult.lastResult}"/>
</s:List>
<s:List id="list3" includeIn="Chicken" width="245" height="365"
creationComplete="list3_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_chicken_dishResult.lastResult}"/>
</s:List>
<s:List id="list4" includeIn="Fish" width="245" height="365"
creationComplete="list4_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_fish_dishResult.lastResult}"/>
</s:List>
<s:List id="list5" includeIn="Vegetables" width="245" height="365"
creationComplete="list5_creationCompleteHandler(event)" labelField="name">
<s:AsyncListView list="{my_get_vegetables_dishResult.lastResult}"/>
</s:List>
</s:VGroup>
...
<s:Button includeIn="Beef" width="70" icon="assets/beef.png" skinClass="components.Stab"/>
<s:Button includeIn="Beef" width="60" click="currentState='Chicken'" icon="assets/chicken.png"/>
<s:Button includeIn="Beef" width="60" click="currentState='Fish'" icon="assets/fish(1).png"/>
<s:Button includeIn="Beef" width="60" click="currentState='Pork'" icon="assets/porktest(1).png"/>
<s:Button includeIn="Beef" width="60" icon="assets/t_vegetables.png" click="currentState='Vegetables'"/>
.....
</s:VGroup>
</s:View>
SkinClass:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- layer 2: fill -->
<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.over="0xBBBDBD"
color.down="0xAAAAAA"
alpha="0.85" />
<s:GradientEntry color="0xD8D8D8"
color.over="0x9FA0A1"
color.down="0x929496"
alpha="0.85" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: border -->
<s:Rect left="0" right="0" top="0" bottom="0" width="60" height="45" radiusX="2" radiusY="2">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
alpha="0.5625"
alpha.down="0.6375" />
<s:GradientEntry color="0x000000"
alpha="0.75"
alpha.down="0.85" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
</s:Skin>
As I could guess the problem is that your skin is not inherited from SparkButtonSkin.
Icon functionality is implemented in it and default button skin inherited SparkButtonSkin.
I want to change the alpha of Rect when list item is clicked but I could not solve that. And I don't know how exactly do this as I'm doing it on Rectangle inside item renderer, is there any suggestion?
CODE:
<s:List id="list" labelField="name" dataProvider="{items}" top="20" bottom="20" left="20" right="20"
contentBackgroundAlpha="0"
change="list_changeHandler(event)">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="100%" height="200" autoDrawBackground="false" contentBackgroundAlpha="0">
<s:Group width="100%" height="100%">
<s:Rect id="rect" left="0" right="0" top="0" bottom="0" alpha="0.3">
<s:fill>
<s:SolidColor color="#FFFFFF"
/>
</s:fill>
</s:Rect>
<s:Image source="{data.icon}" top="30" horizontalCenter="0"/>
<s:Label text="{data.name}" top="100" horizontalCenter="0" color="#101010" fontWeight="bold" fontSize="16"/>
<s:Label text="{data.line1}" top="130" horizontalCenter="0" color="#343434" fontSize="14"/>
<s:Label text="{data.line2}" top="150" horizontalCenter="0" color="#343434" fontSize="14"/>
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:layout>
<s:TileLayout requestedColumnCount="3" requestedColumnCount.landscape="4" columnAlign="justifyUsingWidth"/>
</s:layout>
</s:List>
You can use the ItemRenderer's states for this. Add these states to your ItemRenderer:
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color.normal="0x0000ff"
color.hovered="0x00ff00"
color.selected="0xff0000" />
</s:fill>
</s:Rect>
With this code your renderer will be blue by default; it will turn green when you hover over it; and red when you select it. The same can of course be done with the alpha value.
I'm using a combobox with a custom item renderer, each item containing a "delete" button to remove the corresponding item from the list. The problem is that when I click on this button, the combobox popup automatically closes, how can I force it to stay open when I click on the button ?
This is how is declared my ComboBox :
<s:ComboBox id="addressIn" width="150" height="23" skinClass="maincomponents.ServerAddressComboBoxSkin" dataProvider="{this._servers}" enabled="true" enabled.loading="false" />
The corresponding skin :
<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.ComboBox")]
]]>
</fx:Metadata>
<!--
NOTE: this skin file contains sub-parts that may continue to react to
Style code. To remove this behavior create new copies of those skins
and remove the styles.
-->
<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 id="dropDown">
<!-- drop shadow -->
<!--- #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"/>
<!-- border -->
<!--- #private -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0">
<s: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>
<!---
#private
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" horizontalScrollPolicy="off" skinClass="fbcomponents.skinScrollSettingsDD">
<!--- #copy spark.components.SkinnableDataContainer#dataGroup-->
<s:DataGroup id="dataGroup" clipAndEnableScrolling="true" itemRenderer="maincomponents.DataList_ServerRepeatedItem">
<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 ComboBoxButtonSkin.
#copy spark.components.supportClasses.DropDownListBase#openButton
#see spark.skins.spark.ComboBoxButtonSkin -->
<s:Button id="openButton" width="20" right="0" top="0" bottom="0" focusEnabled="false"
skinClass="maincomponents.ServerAddressComboBoxButtonSkin" tabEnabled="false" />
<!--- #copy spark.components.ComboBox#textInput -->
<s:TextInput id="textInput" enabled.disabled="false"
left="0" right="19" top="0" bottom="0"
skinClass="maincomponents.ServerAddressComboBoxTextInputSkin"/>
</s:SparkSkin>
And the item renderer :
<s:ItemRenderer xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
xmlns:ai="http://ns.adobe.com/ai/2009"
xmlns:d="http://ns.adobe.com/fxg/2008/dt" dataChange="onDataChangeHandler(event)" valueCommit="adaptBg()"
xmlns:flm="http://ns.adobe.com/flame/2008"
minWidth="161" height="20" autoDrawBackground="false" fc:resizable="true">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.StateChangeEvent;
import spark.components.List;
protected function onDataChangeHandler(event:FlexEvent):void
{
this.title.text = this.data as String;
this.adaptBg();
}
protected function adaptBg():void
{
this.bg.color = (itemIndex % 2 == 0) ? 0xEFEFEF : 0xE0E0E0;
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
<s:Rect x="0" y="0" width="161" height="20">
<s:fill>
<s:SolidColor id="bg" color="#EFEFEF"/>
</s:fill>
</s:Rect>
<s:Rect x="0" y="0" width="161" height="20"
visible.normal="false">
<s:fill>
<s:LinearGradient x="137" y="0" scaleX="31" rotation="90">
<s:GradientEntry ratio="0" color="#FFEDD1"/>
<s:GradientEntry ratio="0.5" color="#FFD180"/>
<s:GradientEntry ratio="0.51" color="#EBAA1D"/>
<s:GradientEntry ratio="1" color="#CF951A"/>
</s:LinearGradient>
</s:fill>
<s:fill.hovered>
<s:SolidColor alpha="0.24" color="#000000"/>
</s:fill.hovered>
</s:Rect>
<s:Button x="5" y="2" width="20" height="16" buttonDown="trace('ok');" />
<s:RichText id="title" d:id="103" d:userLabel="caldera0003" x="32" verticalCenter="1" ai:aa="2" color="#292929"
columnCount="1" fontFamily="HelveticaNeueLT Pro 57 Cn" fontSize="14"
kerning="on" tabStops="S36" flm:variant="34"
whiteSpaceCollapse="preserve"/>
<s:Rect width="274" height="31"
visible="false" alpha.hovered="0.3"
alpha.normal="0"
alpha.selected="0.5">
<s:fill>
<s:SolidColor color="0xCED7EE"/>
</s:fill>
</s:Rect>
</s:ItemRenderer>
I've mentioned it in the comments, but you pointed out there is a difference with your situation. First read my answer to this question about adding a 'delete' button to DropDownList items: Create dropdownlist with delete button in this itemrenderer
There is only one thing you need to change from that code to get what you want, i.e. the popup must stay open when an item is removed. Go to the custom ItemRenderer, find the 'delete' Button tag and just prevent the event from propagating. If the event doesn't propagate, the DropDownList will never catch it and the popup will never close when the user clicks on the Button.
<s:Button verticalCenter="0" right="10" width="16" height="16"
mouseDown="event.stopImmediatePropagation(); remove()" />
Maybe I'm understanding something wrong, but can't you just add mouseDown handler on your delete button and stop event propagation in it? Like
<s:Button x="5" y="2"
width="20" height="16"
mouseDown="button1_mouseDownHandler(event)" buttonDown="trace('ok');"
/>
and
protected function button1_mouseDownHandler(event:MouseEvent):void
{
event.stopPropagation();
...
}
Maybe you should extend your combobox to stay open when it loses focus or closes? Pressing delete button causes focus lost event to your combobox.
I have a drop down list for selecting the titles for a person, I want to employ smooth drop down when i select the drop down menu, i am new to flex, can some please help me.
Thanks and Regards,
Ravi.
You will have to use a resize transition in the place of the fade transition in the following code:
<s:DropDownList id="dropDownList"
dataProvider="{arrList}"
requiresSelection="true"
skinClass="skins.CustomDropDownListSkin"
horizontalCenter="0"
top="20" />
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/28/setting-a-fade-transition-on-a-spark-dropdownlist-component-in-flex-gumbo/ -->
<s:SparkSkin name="CustomDropDownListSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">
<s:states>
<s:State name="normal" />
<s:State name="open" />
<s:State name="disabled" />
</s:states>
<s:transitions>
<s:Transition fromState="normal" toState="open">
<s:Fade target="{popup}" duration="3000" />
</s:Transition>
</s:transitions>
<!-- host component -->
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.DropDownList")]
]]>
</fx:Metadata>
<!--- Defines the appearance of the DropDownList component's drop down area. -->
<s:PopUp id="popup"
open.normal="false" open.open="true"
includeIn="open"
left="0" right="0" top="0" bottom="0"
visible.open="true" visible.normal="false"
placement="below">
<s:Group id="dropDown"
maxHeight="134" minHeight="22"
visible.open="true" visible.normal="false">
<!-- border -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="0x686868" weight="1"/>
</s:stroke>
</s:Rect>
<!--- fill --->
<s:Rect id="background" left="1" right="1" top="1" bottom="1" >
<s:fill>
<s:SolidColor id="bgFill" color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Scroller left="1" top="1" right="1" bottom="1" >
<s:DataGroup id="dataGroup" itemRenderer="spark.skins.default.DefaultItemRenderer">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
</s:layout>
</s:DataGroup>
</s:Scroller>
<s:filters>
<s:DropShadowFilter blurX="20" blurY="20" distance="5" angle="90" alpha="0.6" />
</s:filters>
</s:Group>
</s:PopUp>
<s:Button id="button" left="0" right="0" top="0" bottom="0" focusEnabled="false"
skinClass="spark.skins.default.DropDownListButtonSkin" />
<s:SimpleText id="labelElement" verticalAlign="middle"
left="7" right="30" top="2" bottom="2" verticalCenter="1" />
</s:SparkSkin>