Component News

Stay informed on our latest component releases and specials.

Home » containers » RotatingListFX 1.x » Help Books » Examples

Understanding the PodListPane

‹ IntheFlexCommunityupTaskPaneFX Book ›
Table of contents

The PodListPane is an mxml subclass of the ListPaneFX component. The LisPaneFX class is a subclass of PaneFX which is used in valious components such as the TaskPaneFX and TaskListFX. The PaneFX class adds the ability to use a bar renderer that implements the ITitleBarControl interface.

The image above shows the component in it's minimized state where the bar instance of the list pane class is visible, all children are hidden.

The image above shows the component in it's maximized state where the bar and the list pane's children are visible.

What's involved

To create this very graphic component, the steps are simple;

  • Set the titleIcon property to an embedded icon graphic. (ITitleBarControl)
  • Create a custom minimizeButtonRenderer. (ITitleBarControl)
  • Set the includeChildrenInTransition property to allow for custom transitions of the children.
  • Set the childrenShowEffect and childrenHideEffect effects to the custom dissolve effects defined in mxml.
  • Set all of the css styleNames of the component.
    • barStyleName
    • labelStyleName
    • styleName
  • Create the <mx:Dissolve> effects.
  • Define the styleNames.
  • Create the children of the component.

Defining the ListPaneFX mxml subclass

<ListPaneFX 
	xmlns="com.teotiGraphix.containers.*" 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	titleIcon="{logoIcon}"
	minimizeButtonRenderer="components.buttons.MinimizePlusButton"
	includeChildrenInTransition="true"
	childrenShowEffect="{showDissolve}"
	childrenHideEffect="{hideDissolve}"
	barStyleName="barStyles"
	labelStyleName="titleStyles"
	styleName="paneStyles"
	layout="vertical"
	width="400" height="300">

Defining the dissolve effects

<mx:Dissolve id="showDissolve" 
	startDelay="0" duration="2000"
	alphaFrom="0" alphaTo="1"/>
<mx:Dissolve id="hideDissolve" 
	startDelay="0" duration="500"
	alphaFrom="1" alphaTo="0"/>

Defining the barStyles

.barStyles {
	borderAlpha:1;
	borderSkin:ClassReference("components.skins.TitleBarBackground");
	borderColor:#3A75A6;
 
	headerColors:#59A4DF,#82BBE7;
 
	highlightAlphas:0.1,0.5;
 
	cornerRadius:5;
 
	textRollOverColor:#FFFFFF;
 
	paddingTop:0;
	paddingLeft:4;
	paddingBottom:1;
	paddingRight:0;	
}

This styleName will theme the bar of the ListPaneFX instance.

  • See the RotatingListFXExample/components/skins/TitleBarBackground.as class for source.

To achieve this border we set alpha, border color, header colors and highlights. There are also some styles set for the bar itself, textRollOverColor and padding.

The TitleBarBackground class takes care of the heavy lifting. In this class we access the parent.parent.isOpen property of the ListPaneFX to find out if we need to draw bottom radii.

When the textRollOverColor style is a applied to a bar control, if true the mouse over will create an underline of the title and show the hand cursor. This in effect creates the whole bar as clickable, whereas setting this to false, the minimizeButton will be the only control that will activate the isOpen property.

Defining the labelStyleName

.titleStyles {
	fontWeight:"bold";
	fontSize:11;	
}

The labelStyleName applies styles to the bar's title textfield label.

Defining the styleName

.paneStyles {
	borderColor:#3A75A6;
	backgroundColor:#FFFFFF;
	dropShadowEnabled:true;
	borderStyle:"solid";
	cornerRadius:7;
 
	paddingTop:0;
	paddingLeft:0;
	paddingBottom:10;
	paddingRight:0;
 
	verticalGap:0;
}

This styleName applies to the ListPaneFX instance itself.

Here we set the border and background colors, add a drop shadow, set the border style, add corner radius and gap and padding.

Conclusion

You can see that all of this graphic styling takes place within css selectors. This means you can easily set up themes for any number of content panes for the rotating list component.

MXML Code 

< ?xml version="1.0" encoding="utf-8"? >
<ListPaneFX 
	xmlns="com.teotiGraphix.containers.*" 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	titleIcon="{logoIcon}"
	minimizeButtonRenderer="components.buttons.MinimizePlusButton"
	includeChildrenInTransition="true"
	childrenShowEffect="{showDissolve}"
	childrenHideEffect="{hideDissolve}"
	barStyleName="barStyles"
	labelStyleName="titleStyles"
	styleName="paneStyles"
	layout="vertical"
	width="400" height="300">
 
	<mx:Dissolve id="showDissolve" 
		startDelay="0" duration="2000"
		alphaFrom="0" alphaTo="1"/>
	<mx:Dissolve id="hideDissolve" 
		startDelay="0" duration="500"
		alphaFrom="1" alphaTo="0"/>
 
	<mx:Style>
/*
	Here is an example of using a barderSkin that uses a scale 9 grid
	and uses a shadow.
 
	Insert in the .barStyles selector
 
	borderSkin:ClassReference("com.teotiGraphix.skins.ShadowGraphicBorder");
	backgroundSkin:Embed(source="../../assets/greyBackground.png",
		scaleGridTop="7", scaleGridLeft="7", 
		scaleGridBottom="23", scaleGridRight="44");	
*/
 
.barStyles {
	borderAlpha:1;
	borderSkin:ClassReference("components.skins.TitleBarBackground");
	borderColor:#3A75A6;
 
	headerColors:#59A4DF,#82BBE7;
 
	highlightAlphas:0.1,0.5;
 
	cornerRadius:5;
 
	textRollOverColor:#FFFFFF;
 
	paddingTop:0;
	paddingLeft:4;
	paddingBottom:1;
	paddingRight:0;	
}
 
/* uncomment to change look
.barStyles {
 
	borderColor:#DEDEDE;
	headerColors:#DEDEDE,#DEDEDE;
 
	highlightAlphas:0.0,0.0;
 
	textRollOverColor:#FF4242;
}
*/
 
.paneStyles {
	borderColor:#3A75A6;
	backgroundColor:#FFFFFF;
	dropShadowEnabled:true;
	borderStyle:"solid";
	cornerRadius:7;
 
	paddingTop:0;
	paddingLeft:0;
	paddingBottom:10;
	paddingRight:0;
 
	verticalGap:0;
}
 
/* uncomment to change look
.paneStyles {
	borderColor:#DEDEDE;
}
*/
.listStyles {
	backgroundAlpha:0;
 
	borderStyle:"none";
}
 
.titleStyles {
	fontWeight:"bold";
	fontSize:11;	
}
 
.toolBarStyles {
	backgroundColor:#FFC671;
	borderColor:#3A75A6;
	borderStyle:"solid";
	borderSides:"bottom";	
}
 
/* uncomment to change look
.toolBarStyles {
	backgroundColor:#F3F3F3;
}
*/
 
	</mx:Style>			
 
	<mx:Script>
		<![CDATA[
			import assets.AssetsLibrary;
 
			// set the titleIcon for the list pane
			[Bindable]
			private var logoIcon:Class = AssetsLibrary.getInstance().logoteofxSmall;
 
			// set the dataProvider for the list pane
			[Bindable]
			private var dp_list:Array = 
			[
				{label:"List Item 1"},
				{label:"List Item 2"},
				{label:"List Item 3"},
				{label:"List Item 4"},
				{label:"List Item 5"},
				{label:"List Item 6"},
				{label:"List Item 7"},
				{label:"List Item 8"},
				{label:"List Item 9"},
				{label:"List Item 10"},
				{label:"List Item 11"},
				{label:"List Item 12"},
				{label:"List Item 13"},
				{label:"List Item 14"},
				{label:"List Item 15"},
				{label:"List Item 16"},
				{label:"List Item 17"},
				{label:"List Item 18"},
				{label:"List Item 19"}
			];
 
		]]>
	</mx:Script>
 
	<mx:HBox
		styleName="toolBarStyles"
		width="100%" height="23">
 
	</mx:HBox>
 
	<mx:List
		rowHeight="30"
		dataProvider="{dp_list}"
		styleName="listStyles"
		width="100%" height="100%" minHeight="0"/> 
 
</ListPaneFX>
‹ IntheFlexCommunityupTaskPaneFX Book ›
Privacy Policy | Copyright Notice| Disclaimer| Product EULA
©2003-2008 Teoti Graphix, LLC - All rights reserved.