I have a skin class whose host component is a Toggle Button. I need to be able to add a border around it but only on the top, left, and right sides, As I understand it you have to the: <s:Line> component. So I added:
<s:Line left="0" top="0" right="0">
<s:stroke>
<s:LinearGradientStroke rotation="180" weight="2" caps="square">
<s:GradientEntry color="0xffffff"
alpha="0"
alpha.selectedStates="1"/>
<s:GradientEntry color="0xffffff"
alpha="0"
alpha.selectedStates="1" />
</s:LinearGradientStroke>
</s:stroke>
</s:Line>
This worked for the top line , But I can't seem to get the left and right lines. I tried: this for the left side line, but it did not work (no line showed up):
<s:Line left="0" top="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="2" caps="square">
<s:GradientEntry color="0xffffff"
alpha="0"
alpha.selectedStates="1"/>
<s:GradientEntry color="0xffffff"
alpha="0"
alpha.selectedStates="1" />
</s:LinearGradientStroke>
</s:stroke>
</s:Line>
How can I achieve the 3 Lines around the button?
<!-- TOP -->
<s:Line left="0" top="0" right="0">
<s:stroke>
<s:LinearGradientStroke rotation="180" weight="1" caps="round" >
<s:GradientEntry color="0xffffff"
alpha="0"
alpha.selectedStates="1"/>
<s:GradientEntry color="0xffffff"
alpha="0"
alpha.selectedStates="1" />
</s:LinearGradientStroke>
</s:stroke>
</s:Line>
<!-- LEFT -->
<s:Line left="0" top="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="180" weight="1" caps="round" >
<s:GradientEntry color="0xffffff"
alpha="0"
alpha.selectedStates="1"/>
<s:GradientEntry color="0xffffff"
alpha="0"
alpha.selectedStates="1" />
</s:LinearGradientStroke>
</s:stroke>
</s:Line>
<!-- RIGHT -->
<s:Line right="0" top="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="180" weight="1" caps="round" >
<s:GradientEntry color="0xffffff"
alpha="0"
alpha.selectedStates="1"/>
<s:GradientEntry color="0xffffff"
alpha="0"
alpha.selectedStates="1" />
</s:LinearGradientStroke>
</s:stroke>
</s:Line>
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 have a group with inside it 2 Graphics, I set the gap in the vertical layout of the group to 0 but there still is a gap of 1 pixel between the 2 graphics. Any idea how to get rid of 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/mx" minWidth="955" minHeight="600">
<s:Group>
<s:layout>
<s:VerticalLayout gap="0"/>
</s:layout>
<s:Graphic height="100">
<s:Path data="M 50 0 L 50 100 Z" height="100">
<s:stroke>
<s:SolidColorStroke color="#333333"/>
</s:stroke>
</s:Path>
</s:Graphic>
<s:Graphic height="1">
<s:Path data="M 0 0 L 100 0 Z" height="1">
<s:stroke>
<s:SolidColorStroke color="#333333"/>
</s:stroke>
</s:Path>
</s:Graphic>
</s:Group>
</s:Application>
The simple answer to your question is that the gap seems to come from the explicit height you give to the first graphic. Simply remove it and the gap will be gone.
The (IMO) better answer is that this code seems a bit convoluted for creating simple graphics.
There is no reason you should wrap each line in a Graphics class. You can extend Graphic to create a standalone, reusable graphic class though.
There is a Line class for drawing straight lines. Much easier than using Path
If you absolutely need the VerticalLayout, you could rewrite that code like this:
<s:Group>
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="center" />
</s:layout>
<s:Line height="100">
<s:stroke>
<s:SolidColorStroke color="#333333" />
</s:stroke>
</s:Line>
<s:Line width="100">
<s:stroke>
<s:SolidColorStroke color="#333333" />
</s:stroke>
</s:Line>
</s:Group>
But if you don't really need it for some reason, it can even be reduced to this:
<s:Group>
<s:Line height="100" horizontalCenter="0">
<s:stroke>
<s:SolidColorStroke color="#333333" />
</s:stroke>
</s:Line>
<s:Line width="100" bottom="0">
<s:stroke>
<s:SolidColorStroke color="#333333" />
</s:stroke>
</s:Line>
</s:Group>
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>
While I was trying to change the fontSize of titlebar of TitleWindows, the whole container changes to new font Size. But I do not want to achive this. I would like to get it only on the titlebar.
The code I have used (not successful)
<s:TitleWindow name="MyTitleWindow"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
title="Search"
width="1200"
height="800"
fontSize="24"
preinitialize="preInit();"
close="handleCloseEvent(event);" >
---
---
</s:TitleWindow>
I am using Flex4 and Spark.
I suggest you to create your own skin based on spark.skins.spark.TitleWindowSkin and change corresponding attributes of Label with id titleDisplay.
You can read more details about skinning in official documentation.
The sample skin for your window is the following (added just one attribute):
<?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" blendMode="normal" mouseEnabled="false"
minWidth="76" minHeight="76" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<fx:Metadata>
<![CDATA[
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.TitleWindow")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import mx.core.FlexVersion;
/* Define the skin elements that should not be colorized.
For panel, border and title background are skinned, but the content area, background, border, and title text are not. */
static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "border"];
/* exclusions before Flex 4.5 for backwards-compatibility purposes */
static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup"];
/**
* #private
*/
override public function get colorizeExclusions():Array
{
// Since border is styleable via borderColor, no need to allow chromeColor to affect
// the border. This is wrapped in a compatibility flag since this change was added
// in Flex 4.5
if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
{
return exclusions_4_0;
}
return exclusions;
}
/**
* #private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* #private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
if (getStyle("borderVisible") == true)
{
border.visible = true;
background.left = background.top = background.right = background.bottom = 1;
contents.left = contents.top = contents.right = contents.bottom = 1;
}
else
{
border.visible = false;
background.left = background.top = background.right = background.bottom = 0;
contents.left = contents.top = contents.right = contents.bottom = 0;
}
dropShadow.visible = getStyle("dropShadowVisible");
var cr:Number = getStyle("cornerRadius");
var withControls:Boolean =
(currentState == "disabledWithControlBar" ||
currentState == "normalWithControlBar" ||
currentState == "inactiveWithControlBar");
if (cornerRadius != cr)
{
cornerRadius = cr;
dropShadow.tlRadius = cornerRadius;
dropShadow.trRadius = cornerRadius;
dropShadow.blRadius = withControls ? cornerRadius : 0;
dropShadow.brRadius = withControls ? cornerRadius : 0;
setPartCornerRadii(topMaskRect, withControls);
setPartCornerRadii(border, withControls);
setPartCornerRadii(background, withControls);
}
if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls);
borderStroke.color = getStyle("borderColor");
borderStroke.alpha = getStyle("borderAlpha");
backgroundFill.color = getStyle("backgroundColor");
backgroundFill.alpha = getStyle("backgroundAlpha");
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
/**
* #private
*/
private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
{
target.topLeftRadiusX = cornerRadius;
target.topRightRadiusX = cornerRadius;
target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
}
private var cornerRadius:Number;
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="inactive" stateGroups="inactiveGroup" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" stateGroups="withControls" />
<s:State name="inactiveWithControlBar" stateGroups="withControls, inactiveGroup" />
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>
<!--- drop shadow can't be hittable so it stays sibling of other graphics #private-->
<s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32"
alpha.inactiveGroup="0.22" distance="11" distance.inactiveGroup="7"
angle="90" color="0x000000" left="0" top="0" right="0" bottom="0"/>
<!--- drop shadow can't be hittable so all other graphics go in this group -->
<s:Group left="0" right="0" top="0" bottom="0">
<!--- top group mask #private-->
<s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask">
<!--- #private-->
<s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
</s:Group>
<!--- bottom group mask #private-->
<s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask"
includeIn="withControls">
<!--- #private-->
<s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
</s:Group>
<!--- layer 1: border #private -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0" >
<s:stroke>
<!--- Defines the TitleWindowSkin class's border stroke. The default value is 1. -->
<s:SolidColorStroke id="borderStroke" weight="1" />
</s:stroke>
</s:Rect>
<!-- layer 2: background fill -->
<!--- Defines the appearance of the TitleWindowSkin class's background. -->
<s:Rect id="background" left="1" top="1" right="1" bottom="1">
<s:fill>
<!--- Defines the TitleWindowSkin class's background fill. The default color is 0xFFFFFF. -->
<s:SolidColor id="backgroundFill" color="#FFFFFF"/>
</s:fill>
</s:Rect>
<!-- layer 3: contents -->
<!--- Contains the vertical stack of title bar content and control bar. -->
<s:Group left="1" right="1" top="1" bottom="1" id="contents">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<!--- #private -->
<s:Group id="topGroup" mask="{topGroupMask}">
<!--- layer 0: title bar fill #private -->
<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xD2D2D2"
color.inactiveGroup="0xEAEAEA"/>
<s:GradientEntry color="0x9A9A9A"
color.inactiveGroup="0xCECECE"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<!--- layer 1: title bar highlight #private -->
<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xE6E6E6" />
<s:GradientEntry color="0xFFFFFF" alpha="0.22"/>
</s:LinearGradientStroke>
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha="0.15" />
<s:GradientEntry color="0xFFFFFF" alpha="0.15" ratio="0.44"/>
<s:GradientEntry color="0xFFFFFF" alpha="0" ratio="0.4401"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<!--- layer 2: title bar divider #private -->
<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.75" />
</s:fill>
</s:Rect>
<!-- layer 3: text -->
<!--- #copy spark.components.Panel#titleDisplay -->
<s:Label id="titleDisplay" maxDisplayedLines="1"
left="9" right="36" top="1" bottom="0" minHeight="30"
verticalAlign="middle" fontWeight="bold" fontSize="20" />
<!-- layer 4: moveArea -->
<!--- #copy spark.components.TitleWindow#moveArea -->
<s:Group id="moveArea" left="0" right="0" top="0" bottom="0" />
<!--- #copy spark.components.TitleWindow#closeButton -->
<s:Button id="closeButton" skinClass="spark.skins.spark.TitleWindowCloseButtonSkin"
width="15" height="15" right="7" top="7" />
</s:Group>
<!--
Note: setting the minimum size to 0 here so that changes to the host component's
size will not be thwarted by this skin part's minimum size. This is a compromise,
more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-->
<!--- #copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
</s:Group>
<!--- #private -->
<s:Group id="bottomGroup" minWidth="0" minHeight="0"
includeIn="withControls">
<s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
<!-- layer 0: control bar divider line -->
<s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>
<!-- layer 1: control bar highlight -->
<s:Rect left="0" right="0" top="1" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF" />
<s:GradientEntry color="0xD8D8D8" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 2: control bar fill -->
<s:Rect left="1" right="1" top="2" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xEDEDED"/>
<s:GradientEntry color="0xCDCDCD"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:Group>
<!--- #copy spark.components.Panel#controlBarGroup -->
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
<s:layout>
<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
</s:layout>
</s:Group>
</s:Group>
</s:Group>
</s:Group>
</s:SparkSkin>
You can apply it with external CSS file or directly in MXML:
<s:TitleWindow skinClass="MyTitleWindowSkin" />
Or in ActionScript:
myWindow.setStyle("skinClass", MyTitleWindowSkin);
I have managed the above issue by
<s:TitleWindow name="MyTitleWindow"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
title="Search"
width="600" height="800"
creationComplete="complete();"
close="handleCloseEvent(event);">
----
----
Actionscript Part:
private function complete():void {
trace("Style" + this.titleDisplay.getStyle("fontSize"));
this.titleDisplay.setStyle("fontSize", "30");
}
In this way I could change only the titleBar fontSize.
Hope it will help others.
I'm trying to style the Accordion headers using CSS and the headerStyleName property in Flex 4.5, but the CSS styles are not displaying. The accordion headers appear the same as the default style. Here's my current code.
Accordion.css:
.accHeader {
fillColors: #dbf6c6, #e1facd;
fillAlphas: 1.0, 0.5;
}
MXML code from the component (not the main application):
...
<fx:Style source="skins/Accordion.css" />
<mx:Accordion left="0" right="0" top="0" bottom="0" id="geo_accordion"
openDuration="500" headerStyleName="accHeader">
...
I've also tried embedding the CSS inside the style tag instead of linking to an external CSS file, but the results are the same.
Also, if I change a different CSS property, such as color, the change is correctly displayed.
I know about the chromeColor property as well, but it is the not the look I'm trying to achieve. I'm also not completely set on using CSS, so if there another better way to achieve a customizable Accordion header, I'm all for it. I was initially going to make a skin, but stopped when I didn't see the correct host component in the New MXML Skin dialog.
Any information to point me in the right direction would be very much appreciated. Thank you for your time!
Sweet victory!
I was able to successfully skin the Accordion header using flexlib and creating a custom skin based on the AccordionHeaderSkin.mxml found in the source of the Flex 4.5 SDK. I made a CanvasButtonAccordionHeader for the header renderer and set the skin for that to the new custom skin.
Here's the code for the AccordionHeaderSkin.mxml (not my final style, but a working editable skin):
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21" alpha.disabled="0.5">
<fx:Script>
/**
* #private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
<s:State name="selectedUp" />
<s:State name="selectedOver" />
<s:State name="selectedDown" />
<s:State name="selectedDisabled" />
</s:states>
<!-- layer 3: fill -->
<s:Rect left="1" right="1" top="1" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"
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 4: fill lowlight -->
<s:Rect left="1" right="1" top="1" bottom="1">
<s:fill>
<s:LinearGradient rotation="270">
<s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
<s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
<s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 5: fill highlight -->
<s:Rect left="1" right="1" top="1" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.33"
alpha.over="0.22"
alpha.down="0.12"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.48"
alpha="0.33"
alpha.over="0.22"
alpha.down="0.12" />
<s:GradientEntry color="0xFFFFFF"
ratio="0.48001"
alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 6: highlight stroke (all states except down) -->
<s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.07" />
</s:fill>
</s:Rect>
<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.07" />
</s:fill>
</s:Rect>
<s:Rect left="1" top="1" right="1" height="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.25" />
</s:fill>
</s:Rect>
<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.09" />
</s:fill>
</s:Rect>
<!-- layer 2: border -->
<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
<s:stroke>
<s:SolidColorStroke color="0x696969"
alpha="1"
alpha.over="1"
alpha.down="1" />
</s:stroke>
</s:Rect>
Then here's the renderer (AccordionHeader.mxml):
<?xml version="1.0" encoding="utf-8"?>
<CanvasButtonAccordionHeader xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns="flexlib.containers.accordionClasses.*" skin="AccordionHeaderSkin" height="25">
<s:Group height="25">
</s:Group>
</CanvasButtonAccordionHeader>
And here's my Accordion:
<mx:Accordion left="0" right="0" top="0" bottom="0" id="geo_accordion" openDuration="500" headerRenderer="AccordionHeader">