Link to home
Start Free TrialLog in
Avatar of miProgrammer
miProgrammer

asked on

Contents of TitleWindow Not Displayed Correctly When Adding Components Through Actionscript

Working with Flex 4.0 and FlashBuilder

When adding an mx:DataGrid to the contents of a TitleWindow, the grid does not display all of the columns available. However, when defining the TitleWindow using .mxml, the DataGrid is displayed correctly. I'm obviously missing something in my Actionscript method that instantiates the TitleWindow.

Here is the sample Application using .mxml:

<?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"
			   xmlns:enhancedtitlewindow="com.ninem.components.enhancedtitlewindow.*"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		@namespace enhancedtitlewindow "com.ninem.components.enhancedtitlewindow.*";
		
		enhancedtitlewindow|EnhancedTitleWindow{
			skin-class:ClassReference("com.ninem.skins.EnhancedTitleWindowSkin");
			show-expand-indicator:true;
		}
		</fx:Style>	
	<fx:Script>
		<![CDATA[
			import com.ninem.components.enhancedtitlewindow.EnhancedTitleWindow;
			
			import mx.collections.ArrayCollection;
			
			import spark.layouts.VerticalLayout;
			[Bindable]
			private var initDG:ArrayCollection = new ArrayCollection([
				{label1: "Order #2000", Contact: "Jane Smith", 
					Confirmed: false,  Processed:false, Sent: false, Delivered: false},
				{label1: "Order #2100", Contact: "Sue Jones", 
					Confirmed: true, Processed:true, Sent: false, Delivered: false}
			]);
			

		]]>
	</fx:Script>
	<s:VGroup id="mainGroup" gap = "20">
		<s:Button label="Add Title Window" click="addTitleWindow(event)" />
		
		
		<s:VGroup id="localesContainer"  gap="0" >
			
			
			<enhancedtitlewindow:EnhancedTitleWindow id="panel2" width="100%" title="Panel 2" collapsible="true" titleBarHeight="30">
			<enhancedtitlewindow:layout>
			  <s:VerticalLayout paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"/>
			</enhancedtitlewindow:layout>	
				<mx:DataGrid id="myDG" 
							 width="100%" height="250" 
							 dataProvider="{initDG}" 
							 variableRowHeight="true"  
							 editable="true">
					<mx:columns>
						<mx:DataGridColumn dataField="Contact" 
										   editable="false"/>
						
						<mx:DataGridColumn dataField="Confirmed" 
										   editable="true" 
										   rendererIsEditor="true" 
										   itemRenderer="mx.controls.CheckBox" 
										   editorDataField="selected"/>
						<mx:DataGridColumn dataField="Processed" 
										   editable="true" 
										   rendererIsEditor="true" 
										   itemRenderer="mx.controls.CheckBox" 
										   editorDataField="selected"/>
						<mx:DataGridColumn dataField="Sent" 
										   editable="true" 
										   rendererIsEditor="true" 
										   itemRenderer="mx.controls.CheckBox" 
										   editorDataField="selected"/>
						<mx:DataGridColumn dataField="Delivered" 
										   editable="true" 
										   rendererIsEditor="true" 
										   itemRenderer="mx.controls.CheckBox" 
										   editorDataField="selected"/>
						
					</mx:columns>
				</mx:DataGrid>		
			
				
			
				
			
			<enhancedtitlewindow:titleBarContent>
			<s:CheckBox label="Checkbox"/>
			<s:Button label="Button"/>
			</enhancedtitlewindow:titleBarContent>
			<enhancedtitlewindow:titleBarLayout><s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/></enhancedtitlewindow:titleBarLayout>
			</enhancedtitlewindow:EnhancedTitleWindow>
		
		</s:VGroup>
		
		
		
	</s:VGroup>	
	
</s:Application>

Open in new window


Here is the application attempting to add the TitleWindow through Actionscript (which is the task that I will face):


<?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"
			   xmlns:enhancedtitlewindow="com.ninem.components.enhancedtitlewindow.*"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		@namespace enhancedtitlewindow "com.ninem.components.enhancedtitlewindow.*";
		
		enhancedtitlewindow|EnhancedTitleWindow{
			skin-class:ClassReference("com.ninem.skins.EnhancedTitleWindowSkin");
			show-expand-indicator:true;
		}
		</fx:Style>	
	<fx:Script>
		<![CDATA[
			import com.ninem.components.enhancedtitlewindow.EnhancedTitleWindow;
			
			import mx.collections.ArrayCollection;
			
			import spark.layouts.VerticalLayout;
			[Bindable]
			private var initDG:ArrayCollection = new ArrayCollection([
				{label1: "Order #2000", Contact: "Jane Smith", 
					Confirmed: false,  Processed:false, Sent: false, Delivered: false},
				{label1: "Order #2100", Contact: "Sue Jones", 
					Confirmed: true, Processed:true, Sent: false, Delivered: false}
			]);
			

			
		
			public function addTitleWindow(event:Event):void {
				var enhancedTitleWindow:EnhancedTitleWindow = new EnhancedTitleWindow();			
				enhancedTitleWindow.layout = new VerticalLayout();				
				
				
				enhancedTitleWindow.collapsible = true;
				enhancedTitleWindow.headerClickable = true;
				enhancedTitleWindow.showCloseButton = true;
				enhancedTitleWindow.percentWidth=100;
				enhancedTitleWindow.setStyle("titleBarHeight", 22);
				enhancedTitleWindow.expanded = false;
				
				enhancedTitleWindow.title= "Panel 2";
				
				
			
				var customerGrid:CustomerDataGrid = new CustomerDataGrid();
				customerGrid.dataProvider = initDG;				
			
				
				
				
				
				enhancedTitleWindow.addElement(customerGrid);
				
				mainGroup.addElement(enhancedTitleWindow);
				
			}
		]]>
	</fx:Script>
	<s:VGroup id="mainGroup" gap = "20">
		<s:Button label="Add Title Window" click="addTitleWindow(event)"/>	
		
		
	</s:VGroup>	
	
</s:Application>

Open in new window


Following are the custom components used in the application:

EnhancedTitleWindow.as:
package com.ninem.components.enhancedtitlewindow
{
	import flash.events.MouseEvent;
	
	import mx.core.UIComponent;
	import mx.events.CloseEvent;
	
	import spark.components.Button;
	import spark.components.Group;
	import spark.components.TitleWindow;
	import spark.layouts.HorizontalLayout;
	import spark.layouts.supportClasses.LayoutBase;
	
	[Style(name="titleBarHeight", type="Number", inherit="no", theme="spark")]
	[Style(name="showExpandIndicator", type="Boolean", inherit="no", theme="spark")]
	
	

	
	public class EnhancedTitleWindow extends TitleWindow
	{
		public static const EXPANDED:String = "EnhancedTitleWindow:expanded";
		public static const COLLAPSED:String = "EnhancedTitleWindow:collapsed";
		
		public var headerClickable:Boolean;		
		
		[Bindable]
		public var collapsible:Boolean;
		
		[Bindable]
		public var showCloseButton:Boolean;
		
		[SkinPart(required="false")]
		public var expandIndicator:UIComponent;
		
		[SkinPart(required="false")]
		public var topGroup:Group;
		
		[SkinPart(required="false")]
		public var titleBarContentGroup:Group;
		
		protected var expandedChanged:Boolean;
		protected var _expanded:Boolean = true;
		protected var _titleBarContent:Array;
		protected var _titleBarLayout:LayoutBase;
		
		public function EnhancedTitleWindow()
		{
			super();
		}
		
		[Bindable]
		public function get expanded():Boolean
		{
			return _expanded;
		}
		
		public function set expanded(value:Boolean):void
		{
			if(value != _expanded){
				expandedChanged = true;
				_expanded = value;
				invalidateProperties();
				invalidateSkinState();
			}
		}
		
		public function set titleBarContent(value:Array):void
		{
			_titleBarContent = value;
		}
		
		public function get titleBarLayout():LayoutBase
		{
			return _titleBarLayout;
		}
		
		public function set titleBarLayout(value:LayoutBase):void
		{
			_titleBarLayout = value;
			if(titleBarContentGroup)
				titleBarContentGroup.layout = _titleBarLayout;
			
		}
		
		protected function onExpandIndicatorClick(event:MouseEvent):void
		{
			if(!headerClickable && collapsible) 
				expanded = !expanded;
		}
		
		protected function onCloseClick(event:MouseEvent):void
		{
			event.stopImmediatePropagation();
			dispatchEvent(new CloseEvent(CloseEvent.CLOSE));
		}
		
		protected function onHeaderClicked(event:MouseEvent):void
		{
			if(headerClickable && collapsible)
				expanded = !expanded;
		}
		
		override protected function partAdded(partName:String, instance:Object) : void
		{
			super.partAdded(partName, instance);
			
			if(instance == expandIndicator){
				expandIndicator.addEventListener(MouseEvent.CLICK, onExpandIndicatorClick);
			}else if(instance == topGroup){
				topGroup.addEventListener(MouseEvent.CLICK, onHeaderClicked);
			}else if(instance == titleBarContentGroup){
				if(_titleBarContent)
					titleBarContentGroup.mxmlContent = _titleBarContent;
				if(_titleBarLayout)
					titleBarContentGroup.layout = _titleBarLayout;
			}
		}
		
		override protected function partRemoved(partName:String, instance:Object) : void
		{
			super.partRemoved(partName, instance);
			
			if(instance == expandIndicator){
				expandIndicator.removeEventListener(MouseEvent.CLICK, onExpandIndicatorClick);
			}else if(instance == topGroup){
				topGroup.removeEventListener(MouseEvent.CLICK, onHeaderClicked);
			}
		}
		
		override protected function commitProperties() : void
		{
			super.commitProperties();
			if(expandedChanged){
				expandIndicator.currentState = _expanded ? "expanded" : "collapsed";
				if(_expanded)
					dispatchEvent(new Event(EXPANDED));
				else
					dispatchEvent(new Event(COLLAPSED));
				
				expandedChanged = false;
			}
		}
		
		override protected function getCurrentSkinState():String
		{
			var state:String = super.getCurrentSkinState(); 
			if(collapsible){
				if(!_expanded){
					if(enabled)
						state = "collapsed";
					else
						state = "disabledCollapsed";
				}
			}
			return state;
		}
	}
}

Open in new window


TriangleIndicator.mxml: ( in com.ninem.components.enhancedtitlewindow package)
 
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 width="8" height="8">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			[Bindable]
			public var fillColor:uint = 0;
			[Bindable]
			public var fillAlpha:Number = 1;
		]]>
	</fx:Script>
	<s:states>
		<s:State name="expanded"/>
		<s:State name="collapsed"/>
	</s:states>
	<s:transitions>
		<s:Transition fromState="expanded">
			<s:Rotate target="{triangle}" duration="400"/>
		</s:Transition>
		<s:Transition fromState="collapsed">
			<s:Rotate target="{triangle}" duration="400"/>
		</s:Transition>
	</s:transitions>
	<s:Path id="triangle" data="M 6.10 10.50 L 0.04 0.00 12.16 -0.00 Z " y="-1" height="8" width="8" transformX="4" transformY="4" rotation.expanded="0" rotation.collapsed="-90">
		<s:fill>
			<s:SolidColor color="{fillColor}" alpha="{fillAlpha}"/>
		</s:fill>
	</s:Path>
</s:Group>

Open in new window


CustomerDataGrid.mxml: (in default package)
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
			 xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
		
	<mx:columns>
		<mx:DataGridColumn dataField="Contact" 
						   editable="false"/>
		
		<mx:DataGridColumn dataField="Confirmed" 
						   editable="true" 
						   rendererIsEditor="true" 
						   itemRenderer="mx.controls.CheckBox" 
						   editorDataField="selected"/>
		<mx:DataGridColumn dataField="Processed" 
						   editable="true" 
						   rendererIsEditor="true" 
						   itemRenderer="mx.controls.CheckBox" 
						   editorDataField="selected"/>
		<mx:DataGridColumn dataField="Sent" 
						   editable="true" 
						   rendererIsEditor="true" 
						   itemRenderer="mx.controls.CheckBox" 
						   editorDataField="selected"/>
		<mx:DataGridColumn dataField="Delivered" 
						   editable="true" 
						   rendererIsEditor="true" 
						   itemRenderer="mx.controls.CheckBox" 
						   editorDataField="selected"/>
	
		</mx:columns>
</mx:DataGrid>

Open in new window


EnhancedTitleWindowSkin.mxml: (in com.ninem.skins package)
<?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 a Spark TitleWindow container.  

@see spark.skins.spark.TitleWindowCloseButtonSkin
@see spark.components.TitleWindow

@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" blendMode="normal" mouseEnabled="false"
			 minWidth="76" minHeight="0" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5" xmlns:enhancedtitlewindow="com.ninem.components.enhancedtitlewindow.*">
	<fx:Metadata>[HostComponent("com.ninem.components.enhancedtitlewindow.EnhancedTitleWindow")]</fx:Metadata>
	
	<fx:Script fb:purpose="styling">
		/* Define the skin elements that should not be colorized. 
		For panel, border and title background are skinned, but the content area and title text are not. */
		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup"];
		
		/**
		 * @private
		 */  
		override public function get colorizeExclusions():Array {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");
			
			expandIndicator.visible = expandIndicator.includeInLayout = getStyle("showExpandIndicator");
			var barHeight:Number = getStyle("titleBarHeight");
			titleBarGroup.height = isNaN(barHeight) ? 20 : barHeight;
			
			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:State name="collapsed" stateGroups="collapsedStates"/>
		<s:State name="disabledCollapsed" stateGroups="collapsedStates,disabledStates"/>
	</s:states>
	
	<s:transitions>
		<s:Transition fromState="normal">
			<s:Resize target="{contentGroup}" duration="400"/>
		</s:Transition>
		<s:Transition fromState="normalWithControlBar">
			<s:Resize target="{contentGroup}" duration="400"/>
		</s:Transition>
		<s:Transition fromState="collapsed">
			<s:Resize target="{contentGroup}" duration="400"/>
		</s:Transition>
		<s:Transition fromState="disabled">
			<s:Resize target="{contentGroup}" duration="400"/>
		</s:Transition>
		<s:Transition fromState="disabledWithControlBar">
			<s:Resize target="{contentGroup}" duration="400"/>
		</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" 
							 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" bottom.collapsedStates="1">
			<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 4: moveArea -->
				<!--- @copy spark.components.TitleWindow#moveArea -->
				<s:Group id="moveArea" left="0" right="0" top="0" bottom="0" />
				
				<!-- layer 3: text -->
				<!--- @copy spark.components.Panel#titleDisplay -->
				<s:Group id="titleBarGroup" left="6" right="1" top="1">
					<s:layout><s:HorizontalLayout verticalAlign="middle" gap="4"/></s:layout>
					<enhancedtitlewindow:TriangleIndicator id="expandIndicator"/>
					<s:Label id="titleDisplay" maxDisplayedLines="1"
							 height="100%"
							 verticalAlign="middle" fontWeight="bold">
					</s:Label>
					<s:Group id="titleBarContentGroup" width="100%" height="100%">
						<s:layout><s:HorizontalLayout/></s:layout>
					</s:Group>
					
					<!--- @copy spark.components.TitleWindow#closeButton -->
					<s:Button id="closeButton" skinClass="spark.skins.spark.TitleWindowCloseButtonSkin"
							  width="15" height="15" visible="{hostComponent.showCloseButton}" includeInLayout="{hostComponent.showCloseButton}"/>
				</s:Group>
				
			</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%" height.collapsedStates="0" minWidth="0" minHeight="0" clipAndEnableScrolling="true">
			</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>

Open in new window



CloseButtonSkin.mxml: (in com.ninem.skins package)
<?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="0.5">
	<fx:Metadata><![CDATA[
		[HostComponent("spark.components.Button")]
	]]></fx:Metadata>
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
		<s:State name="down"/>
		<s:State name="disabled"/>
	</s:states>
	<s:Rect height="17" id="rect1" radiusX="2" radiusY="2" width="17" x="-0.5" y="-1.5">
		<s:stroke>
			<s:SolidColorStroke color="#333333" weight="1"/>
		</s:stroke>
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry alpha="1.0" color="#ededed" ratio="0" color.over="#d1d1d1" color.down="#d1d1d1"/>
				<s:GradientEntry alpha="1.0" color="#c9c9c9" ratio="1" color.over="#b2b1b1" color.down="#b2b1b1"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	<s:Group x="2" y="1" id="group1">
		<s:Line id="line1" x="1" xFrom="0" xTo="10" y="12" yFrom="-11" yTo="-1">
			<s:stroke>
				<s:SolidColorStroke caps="none" color="#000000" joints="miter" miterLimit="4" weight="2"/>
			</s:stroke>
		</s:Line>
		<s:Line id="line0" rotation="90" x="0" xFrom="0" xTo="10" y="1" yFrom="-11" yTo="-1">
			<s:stroke>
				<s:SolidColorStroke caps="none" color="#000000" joints="miter" miterLimit="4" weight="2"/>
			</s:stroke>
		</s:Line>
	</s:Group>
</s:Skin>

Open in new window

Avatar of dgofman
dgofman
Flag of United States of America image

Did you duplicate your question?
Avatar of miProgrammer
miProgrammer

ASKER

No, I did not duplicate. After I posted the original question, I realized where the true issue was. I deleted the non-relevant post.I submitted a new post that was relevant to the true issue.  My question for this post still requires an answer
Please can you ZIP and attach your project
Attempting to attach project but getting "An error occurred with the server. Please try again later". I'll heed the advice in the message and try later
hmm .. I tried to create a .zip file from my project and than error trying to attach "The extension of one or more file in the archive is not in the list of allowed extensions: uu/actionScriptProperties. Should I delete that file from project and attempt to rezip?
Please install WinRaR and archive to rar extension
ok ... may take awhile to get company approval to download WinRaR. Will post when more information becomes available
You can download on your personal machine or share link on FTP host
attaching.zip file
[Flex project zip]the .rar extension is not recognized by this site as a valid extension. I created the archive and renamed the extension from .rar to .zip and it seems to have accepted this. However, let me know if there are issues w/ the attachment
expertsExchangeNew.zip
What columns are missing?

User generated image
sent and delivered
ASKER CERTIFIED SOLUTION
Avatar of dgofman
dgofman
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial