Teoti Graphix, LLC

Hello,

Teoti Graphix, LLC offers another open source component for those who wish to dive into the new Flex 4 Spark framework.

The DockBar component could be considered cliche like, um well reflections on images but, this component shows you a lot about the inner workings of a Flex 4 Spark component.

One aspect that makes this bar a little different is it’s parented by the systemManager and allows for 4 placements, top, right, bottom and left. It also has a property that will autoHide the bar and show it when the autoHide thickness is reached around the edge of the screen.

The component uses a Rectangle mouseMove calculation so there is no display object getting in the way of mouse events underneath the hit area.

Comments & Criticism always welcome.

Tips to look for;

• IDockBar interface for polymorphism in an alternate implementation.
• ButtonBarBase subclass shows how to override some common ListBase methods.
• A default itemRendererFunction.
• systemManager child list usage.
• Application popup layout logic.
• Hit Rectangle hide/show logic.
• Use of ui.common vertical and horizontal ButtonBarLayout.

Functionality;

• Custom DockBarSkin.
• Custom DockBarButtonSkin.
• DataGroup in bar with vertical and horizontal layout.
• rollOver and rollOut skin part itemRenderer effects.
• autoHide – constantly show the bar or hide it until the mouse is within a correct show distance.

The Code

<fx:Declarations>
	<s:Fade id="showEffect" alphaFrom="0" alphaTo="1" />
	<s:Fade id="hideEffect" alphaFrom="1" alphaTo="0" />
</fx:Declarations>
 
<components:DockBar id="dockBar" 
					skinClass="org.teotigraphix.ui.skins.DockBarSkin"
					autoHideThickness="10"
					showEffect="{showEffect}"
					hideEffect="{hideEffect}"
					change="dockBar_changeHandler(event)">
 
	<components:dataProvider>
 
		<s:ArrayList>
			<fx:Object label="One" toolTip="ToolTip One" icon="{theIcon}"/>
			<fx:Object label="Two" toolTip="ToolTip Two" icon="{theIcon}"/>
			<fx:Object label="Three" toolTip="ToolTip Three" icon="{theIcon}"/>
			<fx:Object label="Four" toolTip="ToolTip Four" icon="{theIcon}"/>
		</s:ArrayList>
 
	</components:dataProvider>
 
</components:DockBar>

When the application starts up, the dock bar is removed from Application and added to the systemManager.

The library ui.common;

• teotios component library
• DockBar class

Sample MXML

• DockBar01_Sample

I have not uploaded a new zip distro yet with this component available.

Bugs

There are still some issues with effects and the zoom effect glitching once and awhile.

I’m also working on a build file that will add all of the examples into the ui.common.zip distribution file. So when you download the zip library, there will be a Flash Builder project ready to test out like a turnkey.

Mike