Welcome to Kap Lab Store

Topic "Panel chromeColor"


5 Item(s)

per page
Hello,

is there a way to change the PanelHeader chromeColor? I've tried to change it both in the Panel and in the PanelHeader but i get always the "gray" color. Insted i can change without any problem the title color and the background color.

Another thing i've seen is that if i create the panel with the collapsed property to true, the arrow is drawn in the opened state instead of the closed one.

Thank you
Posted : 09 January 2012 12:53
You're right, the default skin we provide for the Panel doesn't handle the chromeColor style.
If you want chromeColor applied to the header, copy/paste these 2 skins in your project :

PanelSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
 
Kap IT  -  Copyright 2011 Kap IT  -  All Rights Reserved.
 
This component is distributed under the GNU LGPL v2.1
(available at : http://www.hnu.org/licences/old-licenses/lgpl-2.1.html)
 
-->
 
 
<!--- The default skin class for the Panel component.
Skin mostly ripped from the spark Panel Skin
 
@see fr.kapit.flex.ui.spark.panel.Panel
 
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
		xmlns:panel="fr.kapit.flex.ui.spark.panel.*"
		alpha.disabledGroup="0.5">
 
	<fx:Metadata>[HostComponent("fr.kapit.flex.ui.spark.panel.Panel")]</fx:Metadata>
 
	<fx:Declarations>
		<s:Sine id="tweenEaser" easeInFraction="{EasingFraction.OUT}"/>
	</fx:Declarations>
 
	<fx:Script fb:purpose="styling">
		import spark.effects.easing.EasingFraction;
 
		private var cornerRadius:Number;
 
 
		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");
 
			if (cornerRadius != cr)
			{
				cornerRadius = cr;
 
				dropShadow.tlRadius = cornerRadius;
				dropShadow.trRadius = cornerRadius;
				dropShadow.blRadius = 0;
				dropShadow.brRadius = 0;
 
				setPartCornerRadii(topMaskRect);
				setPartCornerRadii(border);
				setPartCornerRadii(background);
			}
 
 
			borderStroke.color = getStyle("borderColor");
			borderStroke.alpha = getStyle("borderAlpha");
			backgroundFill.color = getStyle("backgroundColor");
			backgroundFill.alpha = getStyle("backgroundAlpha");
 
			if (contentGroup.measuredHeight > hostComponent.maxContentHeight)
			{
				contentGroup.right = vScrollBar.measuredWidth;
				vScrollBar.visible = true;
			}
			else
			{
				contentGroup.right = 0;
				vScrollBar.visible = false;
			}
 
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
 
		/**
		 * @private
		 */
		private function setPartCornerRadii(target:Rect):void
		{
			target.topLeftRadiusX = cornerRadius;
			target.topRightRadiusX = cornerRadius;
			target.bottomLeftRadiusX = 0;
			target.bottomRightRadiusX = 0;
		}
	</fx:Script>
 
	<s:states>
		<s:State name="normal" />
		<s:State name="collapsed" stateGroups="collapsedGroup" />
		<s:State name="collapsedAndDisabled" stateGroups="collapsedGroup, disabledGroup" />
		<s:State name="disabled" stateGroups="disabledGroup" />
	</s:states>
 
	<s:transitions>
		<s:Transition>
			<s:Parallel>
				<s:Resize target="{allContent}" duration="200" easer="{tweenEaser}"/>
			</s:Parallel>
		</s:Transition>
	</s:transitions>
 
	<!-- 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" distance="11"
							 angle="90" color="#000000" 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>
 
		<!-- layer 1: 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>
 
		<!-- layer 2: background fill -->
		<!--- Defines the appearance of the PanelSkin class's background. -->
		<s:Rect id="background" left="1" top="1" right="1" bottom="1">
			<s:fill>
				<!--- @private
				Defines the  PanelSkin 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 header content. -->
		<s:Group left="1" right="1" top="1" bottom="1" id="contents">
			<s:layout>
				<s:VerticalLayout gap="0" gap.collapsedGroup="-1" horizontalAlign="justify" />
			</s:layout>
 
			<panel:PanelHeader id="header" mask="{topGroupMask}"
							   width="100%" height="31" buttonMode="{hostComponent.collapsible}"
							   color="{hostComponent.getStyle('titleColor')}"
							   icon="{hostComponent.getStyle('titleIcon')}"
							   chromeColor="{hostComponent.getStyle('chromeColor')}"
							   skinClass="PanelHeaderSkin"
							   />
 
			<s:Group id="allContent" width="100%"
					 height.collapsedGroup="0" maxHeight="{hostComponent.maxContentHeight}"
					 clipAndEnableScrolling="true">
				<s:Group id="contentGroup"
						 left="0" right="0" top="0" bottom="0"
						 minWidth="0" minHeight="0">
					<s:layout>
						<s:BasicLayout/>
					</s:layout>
				</s:Group>
				<s:VScrollBar id="vScrollBar" top="0" bottom="0" right="0" viewport="{contentGroup}"/>
			</s:Group>
		</s:Group>
 
	</s:Group>
 
</s:Skin>
 
PanelHeaderSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
 
Kap IT  -  Copyright 2011 Kap IT  -  All Rights Reserved.
 
This component is distributed under the GNU LGPL v2.1
(available at : http://www.hnu.org/licences/old-licenses/lgpl-2.1.html)
 
-->
 
 
<!--- The default skin class for the PanelHeader component.
	  Skin mostly ripped from the spark Panel Skin
 
@see fr.kapit.flex.ui.spark.panel.PanelHeader
 
@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"
		xmlns:panel="fr.kapit.flex.ui.spark.panel.*"
		alpha.disabled="0.5">
 
	<fx:Metadata>[HostComponent("fr.kapit.flex.ui.spark.panel.PanelHeader")]</fx:Metadata>
 
	<s:states>
		<s:State name="normal" />
		<s:State name="collapsed" stateGroups="collapsedGroup" />
		<s:State name="over" stateGroups="overGroup" />
		<s:State name="overAndCollapsed" stateGroups="overGroup, collapsedGroup" />
		<s:State name="disabled" />
	</s:states>
 
 
	<fx:Script fb:purpose="styling">
		import spark.effects.easing.EasingFraction;
 
		[Bindable] private var _icon:Class;
 
		override protected function initializationComplete():void
		{
			useChromeColor = true;
			super.initializationComplete();
		}
 
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			_icon = hostComponent.getStyle('icon');
 
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
	</fx:Script>
 
	<s:transitions>
		<s:Transition>
			<s:Parallel>
				<s:Rotate target="{arrow}" duration="200" />
			</s:Parallel>
		</s:Transition>
	</s:transitions>
 
	<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xE2E2E2" />
				<s:GradientEntry color="0xD9D9D9" />
			</s:LinearGradient>
		</s:fill>
		<s:fill.overGroup>
			<s:LinearGradient rotation="270" scaleX="29" x="229.5" y="29">
				<s:GradientEntry color="#D9D9D9" ratio="0"/>
				<s:GradientEntry color="#EBEBEB" ratio="0.5"/>
				<s:GradientEntry color="#F2F2F2" ratio="0.5"/>
				<s:GradientEntry color="#FFFFFF" ratio="1"/>
			</s:LinearGradient>
		</s:fill.overGroup>
	</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="0xEAEAEA" />
				<s:GradientEntry color="0xD9D9D9" />
			</s:LinearGradientStroke>
		</s:stroke>
	</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="0xC0C0C0" />
		</s:fill>
	</s:Rect>
 
	<!--
	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" left="0" right="0" top="0" bottom="0"
			 minWidth="0" minHeight="0">
 
		<s:layout>
			<s:HorizontalLayout gap="5" paddingLeft="10" paddingRight="2" verticalAlign="middle" />
		</s:layout>
 
		<s:Group width="16" includeInLayout="{hostComponent.collapsible}" visible="{hostComponent.collapsible}">
			<s:Path id="arrow" data="M 8 0 L 4 6 L 0 0 L 8 0 Z" winding="nonZero"
					horizontalCenter="0" verticalCenter="0"
					rotation="0" rotation.collapsedGroup="270">
				<s:fill>
					<s:SolidColor color="{hostComponent.getStyle('color')}"/>
				</s:fill>
			</s:Path>
		</s:Group>
 
		<s:BitmapImage source="{_icon}" includeInLayout="{_icon != null}" visible="{_icon != null}" />
 
		<panel:AutoToolTipLabel id="labelDisplay" color="{hostComponent.getStyle('color')}" fontWeight="bold"
								text="{hostComponent.label}"
								lineBreak="toFit" width="100%" maxDisplayedLines="1" />
	</s:Group>
 
</s:SparkSkin>
 
Concerning the bug on the collapsed property, I'm looking at it right now... will keep you informed
Posted : 09 January 2012 14:58
yes,

indeed. I've found that the problem was on skinClass of Panel skin that loads always the default one. I've put both skins on my project and now it renders correctly.

Is there a way to fix the arrow problem?
Posted : 09 January 2012 15:03
That's a bug.

Actually, I don't even understand why your application doesn't crash when setting thsi property to true because this is what happens on my computer :)

I've just checked the code and there is no way to override some methods to make it work so you have to modify the original source code (I'll let you know when it's fixed in our codebase with the download package updated)

In Panel.as

method partAdded, add this line :
if (instance == header)
{
	header.label = title;
	header.collapsible = collapsible;
[b]header.collapsed = collapsed;[/b]
	header.addEventListener(MouseEvent.CLICK, headerGroup_clickHandler);
	header.addEventListener(Event.OPEN, headerGroup_openHandler);
	header.addEventListener(Event.CLOSE, headerGroup_closeHandler);
	updateAllContentHeight();
}
 
method close, add this line
public function close():void
{
	if (!_collapsible || !enabled)
		return;
 
	_collapsed = true;
 
[b]if (header)[/b]
		header.collapsed = true;
 
	invalidateSkinState();
}
 
Let me know it that works for you
Posted : 09 January 2012 15:17
ok, perfetct. now all it is working correctly.
Thank you
Posted : 09 January 2012 15:24

5 Item(s)

per page