incubator-flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From t...@apache.org
Subject svn commit: r1233864 - in /incubator/flex/whiteboard/tink/navigators/src: ./ ws/tink/spark/controls/ ws/tink/spark/itemRenderers/ ws/tink/spark/skins/controls/ ws/tink/spark/skins/itemRenderers/
Date Fri, 20 Jan 2012 11:11:02 GMT
Author: tink
Date: Fri Jan 20 11:11:01 2012
New Revision: 1233864

URL: http://svn.apache.org/viewvc?rev=1233864&view=rev
Log:
Initial import of MenuBar and its dependencies.

Added:
    incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/controls/MenuBar.as
    incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/itemRenderers/
    incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/itemRenderers/MenuBarItemRenderer.as
    incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/ArrowDownToggleButtonSkin.mxml
    incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/ArrowRightToggleButtonSkin.mxml
    incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/MenuBarSkin.mxml
    incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/itemRenderers/
    incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/itemRenderers/DropDownMenuBarItemRendererSkin.mxml
    incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/itemRenderers/DropRightMenuBarItemRendererSkin.mxml
Modified:
    incubator/flex/whiteboard/tink/navigators/src/defaults.css
    incubator/flex/whiteboard/tink/navigators/src/manifest.xml

Modified: incubator/flex/whiteboard/tink/navigators/src/defaults.css
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/tink/navigators/src/defaults.css?rev=1233864&r1=1233863&r2=1233864&view=diff
==============================================================================
--- incubator/flex/whiteboard/tink/navigators/src/defaults.css (original)
+++ incubator/flex/whiteboard/tink/navigators/src/defaults.css Fri Jan 20 11:11:01 2012
@@ -32,6 +32,21 @@ DataNavigator
 	skinClass: ClassReference("ws.tink.spark.skins.controls.DataNavigatorSkin");
 }
 
+MenuBar
+{
+	skinClass: ClassReference("ws.tink.spark.skins.controls.MenuBarSkin");
+}
+
+MenuBarItemRenderer
+{
+	skinClass: ClassReference("ws.tink.spark.skins.itemRenderers.DropRightMenuBarItemRendererSkin");
+}
+
+MenuBar MenuBarItemRenderer
+{
+	skinClass: ClassReference("ws.tink.spark.skins.itemRenderers.DropDownMenuBarItemRendererSkin");
+}
+
 Navigator
 {
 	skinClass: ClassReference("ws.tink.spark.skins.containers.NavigatorSkin");

Modified: incubator/flex/whiteboard/tink/navigators/src/manifest.xml
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/tink/navigators/src/manifest.xml?rev=1233864&r1=1233863&r2=1233864&view=diff
==============================================================================
--- incubator/flex/whiteboard/tink/navigators/src/manifest.xml (original)
+++ incubator/flex/whiteboard/tink/navigators/src/manifest.xml Fri Jan 20 11:11:01 2012
@@ -12,7 +12,11 @@
 	<component id="DataAccordion" class="ws.tink.spark.controls.DataAccordion"/>
 	<component id="DataNavigator" class="ws.tink.spark.controls.DataNavigator"/>
 	<component id="DataNavigatorGroup" class="ws.tink.spark.controls.DataNavigatorGroup"/>
+	<component id="MenuBar" class="ws.tink.spark.controls.MenuBar"/>
     
+    <!-- itemRenderers -->
+	<component id="MenuBarItemRenderer" class="ws.tink.spark.itemRenderers.MenuBarItemRenderer"/>
+	
 	<!-- layouts -->
 	<component id="AccordionLayout" class="ws.tink.spark.layouts.AccordionLayout"/>
 	<component id="CarouselLayout" class="ws.tink.spark.layouts.CarouselLayout"/>

Added: incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/controls/MenuBar.as
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/controls/MenuBar.as?rev=1233864&view=auto
==============================================================================
--- incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/controls/MenuBar.as (added)
+++ incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/controls/MenuBar.as Fri Jan 20 11:11:01 2012
@@ -0,0 +1,607 @@
+/*
+
+Copyright (c) 2011 Tink Ltd - http://www.tink.ws
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO 
+THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+package ws.tink.spark.controls
+{
+	import flash.events.Event;
+	import flash.events.MouseEvent;
+	
+	import mx.collections.IList;
+	import mx.core.ISelectableList;
+	import mx.core.IVisualElement;
+	import mx.core.mx_internal;
+	import mx.events.FlexEvent;
+	
+	import spark.components.ButtonBar;
+	import spark.components.IItemRenderer;
+	import spark.components.List;
+	import spark.components.supportClasses.ListBase;
+	import spark.events.IndexChangeEvent;
+	import spark.events.RendererExistenceEvent;
+	
+	import ws.tink.spark.itemRenderers.MenuBarItemRenderer;
+	
+	use namespace mx_internal;
+	
+	public class MenuBar extends ButtonBar
+	{
+		
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		public function MenuBar()
+		{
+			super();
+		}
+		
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 *  Flag to indicate that the renderers need updating.
+		 */
+		private var _renderersInvalid:Boolean;
+		
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties
+		//
+		//--------------------------------------------------------------------------
+		
+		//----------------------------------
+		//  closeOnSelection
+		//----------------------------------
+		
+		/**
+		 *  @private
+		 *  Storage for the closeOnSelection property. 
+		 */
+		private var _closeOnSelection:Boolean = true;
+		
+		/**
+		 *  Specifies whether the menu bar should close all its
+		 *  dropdowns immediately after the user has selected an item.
+		 *  
+		 *  @default true
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		public function get closeOnSelection():Boolean
+		{
+			return _closeOnSelection;
+		}
+		/**
+		 *  @private
+		 */
+		public function set closeOnSelection(value:Boolean):void
+		{
+			if( _closeOnSelection == value ) return;
+			
+			_closeOnSelection = value;
+			_renderersInvalid = true;
+			invalidateProperties();
+		}
+		
+		
+		//----------------------------------
+		//  allowBranchSelection
+		//----------------------------------
+		
+		/**
+		 *  @private
+		 *  Storage for the allowBranchSelection property. 
+		 */
+		private var _allowBranchSelection:Boolean = true;
+		
+		/**
+		 *  Whether or not a branch in the hierarchical data can be selected.
+		 *  If set to false, only leaves can be selected.
+		 *  
+		 *  @default true
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		public function get allowBranchSelection():Boolean
+		{
+			return _allowBranchSelection;
+		}
+		/**
+		 *  @private
+		 */		
+		public function set allowBranchSelection( value:Boolean ):void
+		{ 
+			if( _allowBranchSelection == value ) return;
+			
+			_allowBranchSelection = value;
+			_renderersInvalid = true;
+			invalidateProperties();
+		}
+
+		
+		//----------------------------------
+		//  selectedIndices
+		//----------------------------------
+		
+		/**
+		 *  @private
+		 *  Storage for the selectedIndices property before they are commited. 
+		 */
+		private var _proposedSelectedIndices:Vector.<int>;
+		
+		/**
+		 *  @private
+		 *  Storage for the selectedIndices property. 
+		 */
+		private var _selectedIndices:Vector.<int>;
+		
+		[Bindable("change")]
+		[Bindable("valueCommit")]
+		/**
+		 *  A Vector of ints representing the indices of the currently selected  
+		 *  item or items. 
+		 *
+		 *  <p>The first int represents the selectedIndex of this DropDownList and each further
+		 *  int represents the selectedIndex of the selectedItem.</p>
+		 *  
+		 *  @default []
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		public function get selectedIndices():Vector.<int>
+		{
+			return _proposedSelectedIndices ? _proposedSelectedIndices : _selectedIndices;
+		}
+		/**
+		 *  @private
+		 */		
+		public function set selectedIndices( value:Vector.<int> ):void
+		{
+			const indices:Vector.<int> = selectedIndices;
+			
+			if( !indices && !value )
+			{
+				return;
+			}
+			else if( !indices && value ||
+					 indices && !value )
+			{
+				_selectedIndices = value ? value.concat() : null;
+			}
+			else if( indices.toString() != indices.toString() )
+			{
+				_selectedIndices = value.concat();
+			}
+			else
+			{
+				return;
+			}
+			
+			selectedIndex = _selectedIndices && _selectedIndices.length ? _selectedIndices[ 0 ] : -1;
+		}
+		
+		
+		[Bindable("change")]
+		[Bindable("valueCommit")]
+		/**
+		 *  A Vector of strings representing the labels of the currently selected  
+		 *  item or items. 
+		 *
+		 *  <p>The first string represents the selectedIndex of this DropDownList and each further
+		 *  string represents the selectedIndex of the selectedItem.</p>
+		 *  
+		 *  @default []
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		public function get selectedLabels():Vector.<String>
+		{
+			if( selectedIndices && selectedIndices.length )
+			{
+				var item:Object;
+				var dp:IList = dataProvider;
+				var labels:Vector.<String> = new Vector.<String>();
+				const indices:Vector.<int> = selectedIndices;
+				const numItems:int = indices.length;
+				for( var i:int = 0; i < numItems; i++ )
+				{
+					item = dp.getItemAt( indices[ i ] )
+					labels.push( itemToLabel( item ) );
+					if( i < numItems - 1 ) dp = IList( item );
+				}
+				
+				return labels;
+			}
+			
+			return null;
+		}
+		/**
+		 *  @private
+		 */
+		public function set selectedLabels( value:Vector.<String> ):void
+		{
+			if( value && dataProvider )
+			{
+				var dp:IList = dataProvider;
+				var indices:Vector.<int> = new Vector.<int>();
+				var index:int;
+				var item:Object;
+				var numLabels:int = value.length;
+				var numDPItems:int;
+				for( var i:int = 0; i < numLabels; i++ )
+				{
+					numDPItems = dp.length;
+					for( var d:int = 0; d < numDPItems; d++ )
+					{
+						item = dp.getItemAt( d );
+						if( itemToLabel( item ) == value[ i ] )
+						{
+							indices.push( d );
+							if( i < numLabels - 1 && item is IList )
+							{
+								dp = IList( item ); 
+							}
+							break;
+						}
+					}
+				}
+				
+				selectedIndices = indices;
+			}
+		}
+		
+		
+		
+		
+		
+//		private var _itemMouseDowns:Boolean;
+		
+		
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 *  Util function to recurse through the hierarchical dataProvider
+		 *  and find the selectedIndices if items implement ISelectableList.
+		 */
+		private function recurseDataProviderSelectedIndices( dp:IList, indices:Vector.<int> = null ):Vector.<int>
+		{
+			if( dp is ISelectableList )
+			{
+				const index:int = ISelectableList( dp ).selectedIndex;
+				if( index != -1 )
+				{
+				const item:Object = dp.getItemAt( index );
+				if( !indices ) indices = new Vector.<int>();
+				indices.push( index );
+				if( item is IList ) return recurseDataProviderSelectedIndices( IList( item ), indices );
+				}
+			}
+			else if( selectedIndex != -1 )
+			{
+				if( !indices ) indices = new Vector.<int>();
+				indices.push( selectedIndex );
+			}
+			return indices;
+		}
+		
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden Methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 */
+		override public function updateRenderer( renderer:IVisualElement, itemIndex:int, data:Object ):void
+		{
+			super.updateRenderer( renderer, itemIndex, data );
+			
+			var listBase:ListBase = renderer as ListBase; 
+			if( listBase ) 
+			{
+				if( dataProvider && dataProvider.getItemAt( itemIndex ) is IList )
+				{
+					listBase.labelField = labelField;
+					listBase.labelFunction = labelFunction;
+					
+					if( renderer is List && selectedIndex == itemIndex && selectedIndices && selectedIndices.length > 1 )
+					{
+						List( renderer ).selectedIndices = selectedIndices.slice( 1 );
+					}
+					
+					if( renderer is MenuBarItemRenderer )
+					{
+						MenuBarItemRenderer( renderer ).allowBranchSelection = allowBranchSelection;
+						MenuBarItemRenderer( renderer ).closeOnSelection = closeOnSelection;
+					}
+				}
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function commitProperties():void
+		{
+			super.commitProperties();
+			
+			if( _renderersInvalid )
+			{
+				_renderersInvalid = false;
+				if( dataGroup )
+				{
+					var renderer:IVisualElement;
+					for( var i:int = 0; i < dataGroup.numElements; i++ )
+					{
+						renderer = dataGroup.getElementAt( i )
+						if( renderer ) updateRenderer( renderer, i, dataProvider.getItemAt( i ) );
+					}
+				}
+			}
+		}
+		
+		
+//		/**
+//		 *  @private
+//		 */
+//		protected function onRendererClick(event:MouseEvent):void
+//		{
+//			const renderer:List = List( event.currentTarget );
+//			if( renderer.dataProvider && renderer.dataProvider.length > 1 && !allowBranchSelection ) return;
+//			
+//			var newIndex:int
+//			if (event.currentTarget is IItemRenderer)
+//				newIndex = IItemRenderer(event.currentTarget).itemIndex;
+//			else
+//				newIndex = dataGroup.getElementIndex(event.currentTarget as IVisualElement);
+//			
+//			
+//			
+////			_proposedSelectedIndices = renderer.selectedIndices ? Vector.<int>( [ newIndex ] ).concat( renderer.selectedIndices ) : Vector.<int>( [ newIndex ] );
+//			
+////			_itemMouseDowns = true;
+//			//			_itemMouseDowns = true;
+////			super.item_mouseDownHandler(event);
+////			_itemMouseDowns = false;
+//			//dispatchEvent( event );
+//		}
+		
+		
+		
+		
+		
+		
+		/**
+		 *  @private
+		 *  Used internally to specify whether the selectedIndex changed programmatically or due to 
+		 *  user interaction. 
+		 * 
+		 *  @param dispatchChangeEvent if true, the component will dispatch a "change" event if the
+		 *  value has changed. Otherwise, it will dispatch a "valueCommit" event. 
+		 */
+		override mx_internal function setSelectedIndex( value:int, dispatchChangeEvent:Boolean = false, changeCaret:Boolean = true ):void
+		{
+			var changed:Boolean;
+			if( !_proposedSelectedIndices && !_selectedIndices && value > -1 )
+			{
+				_proposedSelectedIndices = recurseDataProviderSelectedIndices( dataProvider );
+				changed = true;
+			}
+			else if( _selectedIndices && _proposedSelectedIndices )
+			{
+				changed = _selectedIndices.join() != _proposedSelectedIndices.join()
+			}
+			else if( !_selectedIndices && _proposedSelectedIndices ||
+				_selectedIndices && !_proposedSelectedIndices )
+			{
+				changed = true;
+			}
+			
+			if( changed )
+			{
+				if( !_proposedSelectedIndices ) _proposedSelectedIndices = recurseDataProviderSelectedIndices( dataProvider );
+				
+				_selectedIndices = _proposedSelectedIndices;
+				_proposedSelectedIndices = null;
+				
+				if( _selectedIndices )
+				{
+					var item:Object;
+					var dp:IList = dataProvider;
+					const indices:Vector.<int> = _selectedIndices;
+					const numItems:int = _selectedIndices.length;
+					for( var i:int = 0; i < numItems; i++ )
+					{
+						if( dp is ISelectableList ) ISelectableList( dp ).selectedIndex = indices[ i ];
+						if( i < numItems - 1 ) dp = IList( dp.getItemAt( indices[ i ] ) );
+					}
+				}
+			}
+			
+			if( value == selectedIndex )
+			{
+				if( changeCaret ) setCurrentCaretIndex( selectedIndex );
+				
+				if( changed )
+				{
+					if( dispatchChangeEvent )
+					{
+						
+						dispatchEvent(new IndexChangeEvent(IndexChangeEvent.CHANGE, false, false, selectedIndex, selectedIndex));
+					}
+					else
+					{
+						dispatchEvent(new FlexEvent(FlexEvent.VALUE_COMMIT));
+					}
+				}
+			}
+			else
+			{
+				super.setSelectedIndex( value, dispatchChangeEvent );
+			}
+		}
+		
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Event Listeners
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 *  Called when contents within the dataProvider changes.  
+		 *
+		 *  @param event The collection change event
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		override protected function dataProvider_collectionChangeHandler(event:Event):void
+		{
+			_renderersInvalid = true;
+			super.dataProvider_collectionChangeHandler( event );
+		}
+		
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden Event Listeners
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 */
+		override protected function dataGroup_rendererAddHandler( event:RendererExistenceEvent ):void
+		{
+			super.dataGroup_rendererAddHandler( event );
+			
+			const renderer:IVisualElement = event.renderer; 
+			if( renderer )
+			{
+				renderer.addEventListener( IndexChangeEvent.CHANGE, onRendererChange, false, 0, true );
+				renderer.addEventListener( MouseEvent.CLICK, onRendererClick, false, 1, true );
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function dataGroup_rendererRemoveHandler( event:RendererExistenceEvent ):void
+		{
+			super.dataGroup_rendererRemoveHandler( event );
+			
+			const renderer:IVisualElement = event.renderer; 
+			if( renderer )
+			{
+				renderer.removeEventListener( IndexChangeEvent.CHANGE, onRendererChange, false );
+				renderer.removeEventListener( MouseEvent.CLICK, onRendererClick, false );
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		protected function onRendererChange( event:IndexChangeEvent ):void
+		{
+			var renderer:List = List( event.currentTarget );
+			
+			var newIndex:int
+			if (event.currentTarget is IItemRenderer)
+				newIndex = IItemRenderer(event.currentTarget).itemIndex;
+			else
+				newIndex = dataGroup.getElementIndex(event.currentTarget as IVisualElement);
+			
+			
+//			_itemMouseDowns = true;
+			_proposedSelectedIndices = renderer.selectedIndices ? Vector.<int>( [ newIndex ] ).concat( renderer.selectedIndices ) : Vector.<int>( [ newIndex ] );
+			
+			// Single selection case, set the selectedIndex 
+			var currentRenderer:IItemRenderer;
+			if (caretIndex >= 0)
+			{
+				currentRenderer = dataGroup.getElementAt(caretIndex) as IItemRenderer;
+				if (currentRenderer)
+					currentRenderer.showsCaret = false;
+			}
+			
+			setSelectedIndex( newIndex, true);
+			
+//			_itemMouseDowns = false;
+		}
+		
+		/**
+		 *  @private
+		 */
+		private function onRendererClick( event:MouseEvent ):void
+		{
+			const renderer:List = List( event.currentTarget );
+			if( renderer.dataProvider && renderer.dataProvider.length > 1 && !allowBranchSelection ) event.stopImmediatePropagation();
+		}
+		
+	}
+}
\ No newline at end of file

Added: incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/itemRenderers/MenuBarItemRenderer.as
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/itemRenderers/MenuBarItemRenderer.as?rev=1233864&view=auto
==============================================================================
--- incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/itemRenderers/MenuBarItemRenderer.as (added)
+++ incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/itemRenderers/MenuBarItemRenderer.as Fri Jan 20 11:11:01 2012
@@ -0,0 +1,741 @@
+/*
+
+Copyright (c) 2011 Tink Ltd - http://www.tink.ws
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO 
+THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+package ws.tink.spark.itemRenderers
+{
+	import flash.display.DisplayObject;
+	import flash.events.Event;
+	import flash.events.IEventDispatcher;
+	import flash.events.MouseEvent;
+	
+	import mx.collections.IList;
+	import mx.core.IVisualElement;
+	import mx.core.mx_internal;
+	import mx.events.FlexEvent;
+	import mx.events.IndexChangedEvent;
+	
+	import spark.components.DropDownList;
+	import spark.components.IItemRenderer;
+	import spark.components.List;
+	import spark.components.supportClasses.DropDownController;
+	import spark.components.supportClasses.ListBase;
+	import spark.components.supportClasses.ToggleButtonBase;
+	import spark.events.DropDownEvent;
+	import spark.events.IndexChangeEvent;
+	import spark.events.RendererExistenceEvent;
+	
+	use namespace mx_internal;
+	
+	public class MenuBarItemRenderer extends DropDownList implements IItemRenderer
+	{
+
+		
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Constructor
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  Constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		public function MenuBarItemRenderer()
+		{
+			super();
+			
+			allowMultipleSelection = false;
+			dropDownController.rollOverOpenDelay = 5;
+		}
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Variables
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 *  Flag to indicate that selection is taking place.
+		 */
+		private var _itemMouseDowns:Boolean;
+		
+		
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Properties
+		//
+		//--------------------------------------------------------------------------
+		
+		//----------------------------------
+		//  data
+		//----------------------------------
+		
+		/**
+		 *  @private
+		 *  Storage for the data property. 
+		 */
+		private var _data:Object;
+		
+		/**
+		 *  @inheritDoc
+		 */
+		public function get data():Object
+		{
+			return _data;
+		}
+		/**
+		 *  @private
+		 */
+		public function set data(value:Object):void
+		{
+			if( _data == value ) return;
+			
+			_data = value;
+			
+			if( _data is IList ) dataProvider = _data as IList;
+			invalidateSkinState();
+		}
+		
+		
+		//----------------------------------
+		//  itemIndex
+		//----------------------------------
+		
+		/**
+		 *  @private
+		 *  Storage for the itemIndex property. 
+		 */
+		private var _itemIndex:int;
+		
+		/**
+		 *  @inheritDoc
+		 */
+		public function get itemIndex():int
+		{
+			return _itemIndex;
+		}
+		/**
+		 *  @private
+		 */
+		public function set itemIndex(value:int):void
+		{
+			_itemIndex = value;
+		}
+		
+		
+		//----------------------------------
+		//  label
+		//----------------------------------
+		
+		/**
+		 *  @inheritDoc
+		 */
+		public function get label():String
+		{
+			return prompt;
+		}
+		/**
+		 *  @private
+		 */
+		public function set label( value:String ):void
+		{
+			if( prompt == value ) return;
+			
+			prompt = value;
+		}
+		
+		
+		//----------------------------------
+		//  selected
+		//----------------------------------
+		
+		/**
+		 *  @private
+		 *  Storage for the selected property. 
+		 */
+		private var _selected:Boolean;
+		
+		/**
+		 *  @inheritDoc
+		 */
+		public function get selected():Boolean
+		{
+			return _selected;
+		}
+		/**
+		 *  @private
+		 */
+		public function set selected(value:Boolean):void
+		{
+			if( _selected == value ) return;
+			
+			_selected = value;
+
+			if( openButton && openButton is ToggleButtonBase ) ToggleButtonBase( openButton ).selected = _selected;
+			
+			if( !_selected )
+			{
+				selectedIndices = null;
+			}
+		}
+		
+		
+		//----------------------------------
+		//  closeOnSelection
+		//----------------------------------
+		
+		/**
+		 *  @private
+		 *  Storage for the closeOnSelection property. 
+		 */
+		private var _closeOnSelection:Boolean = true;
+		
+		/**
+		 *  @copy ws.tink.spark.controls.MenuBar#closeOnSelection
+		 * 
+		 *  @default true
+		 */
+		public function get closeOnSelection():Boolean
+		{
+			return _closeOnSelection;
+		}
+		/**
+		 *  @private
+		 */
+		public function set closeOnSelection(value:Boolean):void
+		{
+			if( _closeOnSelection == value ) return;
+			
+			_closeOnSelection = value;
+		}
+		
+		
+		//----------------------------------
+		//  dragging
+		//----------------------------------
+		
+		/**
+		 *  Ths property cannot be set and will always remain false.
+		 * 
+		 *  @default false
+		 */
+		public function get dragging():Boolean
+		{
+			return false;
+		}
+		/**
+		 *  @private
+		 */
+		public function set dragging(value:Boolean):void
+		{
+		}
+		
+		
+		//----------------------------------
+		//  showsCaret
+		//----------------------------------
+		
+		/**
+		 *  Ths property cannot be set and will always remain false.
+		 * 
+		 *  @default false
+		 */
+		public function get showsCaret():Boolean
+		{
+			return false;
+		}
+		/**
+		 *  @private
+		 */
+		public function set showsCaret(value:Boolean):void
+		{
+		}
+		
+		
+		//----------------------------------
+		//  selectedIndices
+		//----------------------------------
+		
+		/**
+		 *  @private
+		 *  Storage for the selectedIndices property before they are commited. 
+		 */
+		private var _proposedSelectedIndices:Vector.<int>;
+		
+		/**
+		 *  @private
+		 *  Storage for the selectedIndices property. 
+		 */
+		private var _selectedIndices:Vector.<int>;
+		
+		/**
+		 *  A Vector of ints representing the indices of the currently selected  
+		 *  item or items. 
+		 *
+		 *  <p>The first index represents the selectedItem of this DropDownList and each further
+		 *  index represents the selectedItem of the selectedItem.</p>
+		 *  
+		 *  @default []
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		override public function get selectedIndices():Vector.<int>
+		{
+			return _proposedSelectedIndices ? _proposedSelectedIndices : _selectedIndices;
+		}
+		/**
+		 *  @private
+		 */		
+		override public function set selectedIndices(value:Vector.<int>):void
+		{
+			if( _selectedIndices == value ) return;
+			
+			_selectedIndices = value;
+			
+			selectedIndex = _selectedIndices && _selectedIndices.length ? _selectedIndices[ 0 ] : -1;
+			if( dataGroup && _selectedIndices && _selectedIndices.length > 1 )
+			{
+				 const list:List = List( dataGroup.getElementAt( _selectedIndices[ 1 ] ) );
+				 list.selectedIndices = _selectedIndices.slice( 1 );
+			}
+		}
+		
+		
+		//----------------------------------
+		//  allowBranchSelection
+		//----------------------------------
+		
+		/**
+		 *  @private
+		 *  Storage for the allowBranchSelection property. 
+		 */
+		private var _allowBranchSelection:Boolean = true;
+		
+		/**
+		 *  Whether or not a branch in the tree can be selected.
+		 *  If set to false, only leaves can be selected.
+		 *  
+		 *  @default true
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		public function get allowBranchSelection():Boolean
+		{
+			return _allowBranchSelection;
+		}
+		/**
+		 *  @private
+		 */		
+		public function set allowBranchSelection( value:Boolean ):void
+		{ 
+			if( _allowBranchSelection == value ) return;
+			
+			_allowBranchSelection = value;
+			invalidateSkinState();
+		}
+
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden Methods
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @inheritDoc
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		override public function get isDropDownOpen():Boolean
+		{
+			if (dropDownController && dataProvider && dataProvider.length)
+				return dropDownController.isOpen;
+			else
+				return false;
+		}
+		
+		/**
+		 *  @inheritDoc
+		 * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		override public function closeDropDown(commit:Boolean):void
+		{
+			// If the mouse is down (our custom flag)
+			// and _closeOnSelection is false, do not close.
+			if( _itemMouseDowns && !_closeOnSelection ) return;
+			dropDownController.closeDropDown(commit);
+		}
+		
+		/**
+		 *  @private
+		 */
+		override public function updateRenderer( renderer:IVisualElement, itemIndex:int, data:Object ):void
+		{
+			super.updateRenderer( renderer, itemIndex, data );
+			
+			var listBase:ListBase = renderer as ListBase; 
+			if( listBase ) 
+			{
+				prompt = itemToLabel( dataProvider );
+				if( dataProvider && dataProvider.getItemAt( itemIndex ) is IList )
+				{
+					listBase.labelField = labelField;
+					listBase.labelFunction = labelFunction;
+					
+					if( renderer is List && selectedIndex == itemIndex && selectedIndices && selectedIndices.length > 1 )
+					{
+						List( renderer ).selectedIndices = selectedIndices.slice( 1 );
+					}
+					
+					if( renderer is MenuBarItemRenderer )
+					{
+						MenuBarItemRenderer( renderer ).allowBranchSelection = allowBranchSelection;
+						MenuBarItemRenderer( renderer ).closeOnSelection = closeOnSelection;
+					}
+				}
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function partAdded( partName:String, instance:Object ):void
+		{
+			super.partAdded( partName, instance );
+			
+			if( instance == openButton )
+			{
+				openButton.addEventListener( Event.CHANGE, onOpenButtonChange, false, 0, true );
+				openButton.label = prompt;
+			}
+		}
+		
+		
+		/**
+		 *  @private
+		 */
+		override protected function partRemoved( partName:String, instance:Object ):void
+		{
+			super.partRemoved( partName, instance );
+		
+			if( instance == openButton )
+			{
+				openButton.removeEventListener( Event.CHANGE, onOpenButtonChange, false );
+			}
+		}
+		
+		/**
+		 *  @private
+		 */ 
+		override protected function getCurrentSkinState():String
+		{
+			var branch:String = "";
+			if( !_allowBranchSelection && 
+				dataProvider && 
+				dataProvider.length )
+			{
+				branch = "Branch";
+			}
+			return super.getCurrentSkinState() + branch;
+		} 
+		
+		/**
+		 *  @private
+		 *  Used internally to specify whether the selectedIndex changed programmatically or due to 
+		 *  user interaction. 
+		 * 
+		 *  @param dispatchChangeEvent if true, the component will dispatch a "change" event if the
+		 *  value has changed. Otherwise, it will dispatch a "valueCommit" event. 
+		 */
+		override mx_internal function setSelectedIndex( value:int, dispatchChangeEvent:Boolean = false, changeCaret:Boolean = true ):void
+		{
+			var changed:Boolean;
+			
+			if( _itemMouseDowns )
+			{
+				if( _selectedIndices && _proposedSelectedIndices )
+				{
+					changed = _selectedIndices.join() != _proposedSelectedIndices.join()
+				}
+				else if( !_selectedIndices && _proposedSelectedIndices ||
+					_selectedIndices && !_proposedSelectedIndices )
+				{
+					changed = true;
+				}
+				
+				if( changed )
+				{
+					_selectedIndices = _proposedSelectedIndices;
+					_proposedSelectedIndices = null;
+				}
+			}
+			
+			if( value == selectedIndex )
+			{
+				if( changeCaret ) setCurrentCaretIndex( selectedIndex );
+				
+				if( changed )
+				{
+					if( dispatchChangeEvent )
+					{
+						dispatchEvent( new IndexChangeEvent( IndexChangeEvent.CHANGE, false, false, selectedIndex, selectedIndex ) );
+					}
+					else
+					{
+						dispatchEvent( new FlexEvent( FlexEvent.VALUE_COMMIT ) );
+					}
+				}
+			}
+			else
+			{
+				super.setSelectedIndex( value, dispatchChangeEvent );
+			}
+			
+			_proposedSelectedIndices = null;
+		}
+		
+		/**
+		 *  @private
+		 *  Called whenever we need to update the text passed to the labelDisplay skin part
+		 */
+		override mx_internal function updateLabelDisplay( displayItem:* = undefined ):void
+		{
+			// Stops the openButton displaying the label of the selectedItem.
+			if( openButton ) openButton.label = prompt;
+		}
+		
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Event Listeners
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 *  Hack to make sure the ToggleButtonBase stays selected
+		 *  after it has been clicked on. Due to <code>selected</code>
+		 *  getting set to true, when it is clicked on it's <code>selected</code>
+		 *  is then set to not <code>selected</code>
+		 * 
+		 *  <code>selected = !selected</code>
+		 * 
+		 *  @see spark.components.supportClasses.ToggleButtonBase#buttonReleased
+		 */
+		private function onOpenButtonChange( event:Event ):void
+		{
+			if( openButton is ToggleButtonBase ) ToggleButtonBase( openButton ).selected = selected;
+		}
+		
+		/**
+		 *  @private
+		 */
+		protected function onRendererOpen( event:DropDownEvent ):void
+		{
+			var renderer:MenuBarItemRenderer = MenuBarItemRenderer( event.currentTarget );
+			
+			if( !renderer ) return;
+			var controller:DropDownController = DropDownController( event.currentTarget[ "dropDownController" ]  );
+			var dropDown:DisplayObject = DisplayObject( event.currentTarget[ "dropDown" ] );
+			
+			if( controller.hitAreaAdditions )
+			{
+				dropDownController.hitAreaAdditions = Vector.<DisplayObject>( [ dropDown ] ).concat( controller.hitAreaAdditions );
+			}
+			else
+			{
+				dropDownController.hitAreaAdditions = Vector.<DisplayObject>( [ dropDown ] );
+			}
+			
+			dispatchEvent( event );
+		}
+		
+		/**
+		 *  @private
+		 */
+		protected function onRendererClose( event:DropDownEvent ):void
+		{
+			dropDownController.hitAreaAdditions = null;
+		}
+		
+		/**
+		 *  @private
+		 */
+		protected function onRendererChange( event:IndexChangeEvent ):void
+		{
+			var renderer:List = List( event.currentTarget );
+			
+			var newIndex:int
+			if (event.currentTarget is IItemRenderer)
+				newIndex = IItemRenderer(event.currentTarget).itemIndex;
+			else
+				newIndex = dataGroup.getElementIndex(event.currentTarget as IVisualElement);
+			
+			
+			_itemMouseDowns = true;
+			_proposedSelectedIndices = renderer.selectedIndices ? Vector.<int>( [ newIndex ] ).concat( renderer.selectedIndices ) : Vector.<int>( [ newIndex ] );
+			
+			// Single selection case, set the selectedIndex 
+			var currentRenderer:IItemRenderer;
+			if (caretIndex >= 0)
+			{
+				currentRenderer = dataGroup.getElementAt(caretIndex) as IItemRenderer;
+				if (currentRenderer)
+					currentRenderer.showsCaret = false;
+			}
+			
+			setSelectedIndex( newIndex, true);
+			
+			userProposedSelectedIndex = selectedIndex;
+			closeDropDown( true );
+			
+			_itemMouseDowns = false;
+		}
+		
+		
+		
+		//--------------------------------------------------------------------------
+		//
+		//  Overridden Event Listeners
+		//
+		//--------------------------------------------------------------------------
+		
+		/**
+		 *  @private
+		 */
+		override protected function dataGroup_rendererAddHandler(event:RendererExistenceEvent):void
+		{
+			super.dataGroup_rendererAddHandler( event );
+			const renderer:IVisualElement = event.renderer; 
+			if( renderer )
+			{
+				renderer.addEventListener( DropDownEvent.OPEN, onRendererOpen, false, 0, true );
+				renderer.addEventListener( DropDownEvent.CLOSE, onRendererClose, false, 0, true );
+				renderer.addEventListener( IndexChangeEvent.CHANGE, onRendererChange, false, 0, true );
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function dataGroup_rendererRemoveHandler( event:RendererExistenceEvent ):void
+		{
+			super.dataGroup_rendererRemoveHandler( event );
+			const renderer:IVisualElement = event.renderer; 
+			if( renderer )
+			{
+				renderer.removeEventListener( DropDownEvent.OPEN, onRendererOpen, false );
+				renderer.removeEventListener( DropDownEvent.CLOSE, onRendererClose, false );
+				renderer.removeEventListener( IndexChangeEvent.CHANGE, onRendererChange, false );
+			}
+		}
+		
+		/**
+		 *  @private
+		 */
+		override protected function item_mouseDownHandler(event:MouseEvent):void
+		{
+			// Hack to get round that fact that ButtonBase now calls event.preventDefault()
+			// on MouseEvent.MOUSE_DOWN (see spark.components.supportClasses.ButtnBase line 1345 )
+			// and List checks event.isDefaultPrevented() and returns out of this method before
+			// preforming any selection (see spark.components.List line 1745).
+			// To get around this a clone of the event is dispatched from the currentTarget,
+			// which will generate the required event without default preventDefault() being
+			// invoked on it.
+			if( event.isDefaultPrevented() )
+			{
+				IEventDispatcher( event.currentTarget ).dispatchEvent( MouseEvent( event.clone() ) );
+				return;
+			}
+			
+			const renderer:List = List( event.currentTarget );
+			if( renderer.dataProvider && renderer.dataProvider.length > 1 && !allowBranchSelection ) return;
+			
+			var newIndex:int
+			if (event.currentTarget is IItemRenderer)
+				newIndex = IItemRenderer(event.currentTarget).itemIndex;
+			else
+				newIndex = dataGroup.getElementIndex(event.currentTarget as IVisualElement);
+			
+			
+			_proposedSelectedIndices = renderer.selectedIndices ? Vector.<int>( [ newIndex ] ).concat( renderer.selectedIndices ) : Vector.<int>( [ newIndex ] );
+			
+			_itemMouseDowns = true;
+			//			_itemMouseDowns = true;
+			super.item_mouseDownHandler(event);
+			_itemMouseDowns = false;
+			//dispatchEvent( event );
+		}
+		
+		/**
+		 *  @private
+		 *  Hack to prevent setSelectedIndex being invoked when the dropdown is closed.
+		 */
+		override protected function dropDownController_closeHandler(event:DropDownEvent):void
+		{
+			event.preventDefault();
+			super.dropDownController_closeHandler(event);
+		}
+		
+		
+		/**
+		 *  @private
+		 *  Called when contents within the dataProvider changes.  
+		 *
+		 *  @param event The collection change event
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10
+		 *  @playerversion AIR 1.5
+		 *  @productversion Flex 4
+		 */
+		override protected function dataProvider_collectionChangeHandler(event:Event):void
+		{
+			invalidateSkinState();
+			super.dataProvider_collectionChangeHandler( event );
+		}
+		
+	}
+}
\ No newline at end of file

Added: incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/ArrowDownToggleButtonSkin.mxml
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/ArrowDownToggleButtonSkin.mxml?rev=1233864&view=auto
==============================================================================
--- incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/ArrowDownToggleButtonSkin.mxml (added)
+++ incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/ArrowDownToggleButtonSkin.mxml Fri Jan 20 11:11:01 2012
@@ -0,0 +1,267 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+
+Copyright (c) 2011 Tink Ltd - http://www.tink.ws
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO 
+THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-->
+
+<!--- A skin class that displays an arrow pointing down for a Spark ToggleButton component.  
+
+      @see spark.components.ToggleButton
+        
+      @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" minWidth="21" minHeight="21" alpha.disabledStates="0.5">
+
+    <!-- host component -->
+    <fx:Metadata>
+    <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.ToggleButton")]
+    ]]>
+    </fx:Metadata>
+    
+    <fx:Script fb:purpose="styling">
+        /* Define the skin elements that should not be colorized. 
+           For toggle button, the graphics are colorized but the label is not. */
+        static private const exclusions:Array = ["labelDisplay","arrow"];
+
+        /**
+         * @private
+         */    
+        override public function get colorizeExclusions():Array {return exclusions;}
+        
+		/* Define the symbol fill items that should be colored by the "symbolColor" style. */
+		static private const symbols:Array = ["arrowFill1", "arrowFill2"];
+		
+		/**
+		 * @private
+		 */
+		override public function get symbolItems():Array {return symbols};
+		
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+        
+        /**
+         * @private
+         */
+        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
+        {
+            var cr:Number = getStyle("cornerRadius");
+            
+            if (cornerRadius != cr)
+            {
+                cornerRadius = cr;
+                shadow.radiusX = cornerRadius;
+                fill.radiusX = cornerRadius;
+                lowlight.radiusX = cornerRadius;
+                highlight.radiusX = cornerRadius;
+                border.radiusX = cornerRadius;
+            }
+            
+            if (highlightStroke) highlightStroke.radiusX = cornerRadius;
+            if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
+            if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
+            
+            super.updateDisplayList(unscaledWidth, unscaledHeight);
+        }
+        
+        private var cornerRadius:Number = 2;
+    </fx:Script>
+    
+    <!-- states -->
+    <s:states>
+        <s:State name="up" />
+        <s:State name="over" stateGroups="overStates" />
+        <s:State name="down" stateGroups="downStates" />
+        <s:State name="disabled" stateGroups="disabledStates" />
+        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
+        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
+        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
+        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
+    </s:states>
+    
+    <!-- layer 1: shadow -->
+    <!--- @private -->
+    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                    <s:GradientEntry color="0x000000" 
+                                   color.downStates="0xFFFFFF"
+                                   alpha="0.01"
+                                   alpha.downStates="0" />
+                    <s:GradientEntry color="0x000000" 
+                                   color.downStates="0xFFFFFF" 
+                                   alpha="0.07"
+                                   alpha.downStates="0.5" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 2: fill -->
+    <!--- @private -->
+    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                <s:GradientEntry color="0xFFFFFF" 
+                               color.selectedUpStates="0xBBBDBD"
+                               color.overStates="0xBBBDBD" 
+                               color.downStates="0xAAAAAA" 
+                               alpha="0.85" 
+                               alpha.overAndSelected="1" />
+                <s:GradientEntry color="0xD8D8D8" 
+                               color.selectedUpStates="0x9FA0A1"
+                               color.over="0x9FA0A1" 
+                               color.overAndSelected="0x8E8F90"
+                               color.downStates="0x929496" 
+                               alpha="0.85"
+                               alpha.overAndSelected="1" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 3: fill lowlight -->
+    <!--- @private -->
+    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
+        <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 4: fill highlight -->
+    <!--- @private -->
+    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                <s:GradientEntry color="0xFFFFFF"
+                                 ratio="0.0"
+                                 alpha="0.33" 
+                                 alpha.selectedUpStates="0.22"
+                                 alpha.overStates="0.22" 
+                                 alpha.downStates="0.12"/>
+                <s:GradientEntry color="0xFFFFFF"
+                                 ratio="0.48"
+                                 alpha="0.33"
+                                 alpha.selectedUpStates="0.22"
+                                 alpha.overStates="0.22" 
+                                 alpha.downStates="0.12"/>
+                <s:GradientEntry color="0xFFFFFF"
+                                 ratio="0.48001"
+                                 alpha="0" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 5: highlight stroke (all states except down) -->
+    <!--- @private -->
+    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="downStates">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0xFFFFFF" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
+                <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    
+    <!-- layer 6: highlight stroke (down state only) -->
+    <!--- @private -->
+    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2"
+            includeIn="downStates, selectedUpStates, overAndSelected">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
+                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
+                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
+                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
+                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    <!--- @private -->
+    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2"
+            includeIn="downStates, selectedUpStates, overAndSelected">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
+                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    
+    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+    <!--- @private -->
+    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0x000000" 
+                               alpha="0.5625"
+                               alpha.down="0.6375"
+                               alpha.selectedStates="0.6375" />
+                <s:GradientEntry color="0x000000" 
+                               alpha="0.75" 
+                               alpha.down="0.85"
+                               alpha.selectedStates="0.85" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    
+    <!-- layer 8: text -->
+    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
+    <s:Label id="labelDisplay"
+             textAlign="center"
+             verticalAlign="middle"
+             maxDisplayedLines="1"
+             horizontalCenter="0" verticalCenter="1"
+             left="10" right="23" top="2" bottom="2">
+    </s:Label>
+    
+	<!-- layer 8: arrow -->
+	<!--- The arrow graphic displayed in the anchor button. -->
+	<s:Path right="6" verticalCenter="0" id="arrow"
+			data="M 4.0 4.0 L 4.0 3.0 L 5.0 3.0 L 5.0 2.0 L 6.0 2.0 L 6.0 1.0 L 7.0 1.0 L 7.0 0.0 L 0.0 0.0 L 0.0 1.0 L 1.0 1.0 L 1.0 2.0 L 2.0 2.0 L 2.0 3.0 L 3.0 3.0 L 3.0 4.0 L 4.0 4.0">
+		<s:fill>
+			<s:RadialGradient rotation="90" focalPointRatio="1">   
+				<!--- @private
+				The first part of the arrow's gradient fill. 
+				The default alpha is .6. The default color if 0x000000. -->
+				<s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
+				<!--- @private
+				The second part of the arrow's gradient fill. 
+				The default alpha is .6. The default color if 0x000000. -->
+				<s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
+			</s:RadialGradient>
+		</s:fill>
+	</s:Path>
+	
+</s:SparkSkin>

Added: incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/ArrowRightToggleButtonSkin.mxml
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/ArrowRightToggleButtonSkin.mxml?rev=1233864&view=auto
==============================================================================
--- incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/ArrowRightToggleButtonSkin.mxml (added)
+++ incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/ArrowRightToggleButtonSkin.mxml Fri Jan 20 11:11:01 2012
@@ -0,0 +1,267 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+
+Copyright (c) 2011 Tink Ltd - http://www.tink.ws
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO 
+THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-->
+
+<!--- A skin class that displays an arrow pointing right for a Spark ToggleButton component.   
+
+      @see spark.components.ToggleButton
+        
+      @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" minWidth="21" minHeight="21" alpha.disabledStates="0.5">
+
+    <!-- host component -->
+    <fx:Metadata>
+    <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.ToggleButton")]
+    ]]>
+    </fx:Metadata>
+    
+    <fx:Script fb:purpose="styling">
+        /* Define the skin elements that should not be colorized. 
+           For toggle button, the graphics are colorized but the label is not. */
+        static private const exclusions:Array = ["labelDisplay","arrow"];
+
+        /**
+         * @private
+         */    
+        override public function get colorizeExclusions():Array {return exclusions;}
+        
+		/* Define the symbol fill items that should be colored by the "symbolColor" style. */
+		static private const symbols:Array = ["arrowFill1", "arrowFill2"];
+		
+		/**
+		 * @private
+		 */
+		override public function get symbolItems():Array {return symbols};
+		
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+        
+        /**
+         * @private
+         */
+        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
+        {
+            var cr:Number = getStyle("cornerRadius");
+            
+            if (cornerRadius != cr)
+            {
+                cornerRadius = cr;
+                shadow.radiusX = cornerRadius;
+                fill.radiusX = cornerRadius;
+                lowlight.radiusX = cornerRadius;
+                highlight.radiusX = cornerRadius;
+                border.radiusX = cornerRadius;
+            }
+            
+            if (highlightStroke) highlightStroke.radiusX = cornerRadius;
+            if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
+            if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
+            
+            super.updateDisplayList(unscaledWidth, unscaledHeight);
+        }
+        
+        private var cornerRadius:Number = 2;
+    </fx:Script>
+    
+    <!-- states -->
+    <s:states>
+        <s:State name="up" />
+        <s:State name="over" stateGroups="overStates" />
+        <s:State name="down" stateGroups="downStates" />
+        <s:State name="disabled" stateGroups="disabledStates" />
+        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
+        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
+        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
+        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
+    </s:states>
+    
+    <!-- layer 1: shadow -->
+    <!--- @private -->
+    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                    <s:GradientEntry color="0x000000" 
+                                   color.downStates="0xFFFFFF"
+                                   alpha="0.01"
+                                   alpha.downStates="0" />
+                    <s:GradientEntry color="0x000000" 
+                                   color.downStates="0xFFFFFF" 
+                                   alpha="0.07"
+                                   alpha.downStates="0.5" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 2: fill -->
+    <!--- @private -->
+    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                <s:GradientEntry color="0xFFFFFF" 
+                               color.selectedUpStates="0xBBBDBD"
+                               color.overStates="0xBBBDBD" 
+                               color.downStates="0xAAAAAA" 
+                               alpha="0.85" 
+                               alpha.overAndSelected="1" />
+                <s:GradientEntry color="0xD8D8D8" 
+                               color.selectedUpStates="0x9FA0A1"
+                               color.over="0x9FA0A1" 
+                               color.overAndSelected="0x8E8F90"
+                               color.downStates="0x929496" 
+                               alpha="0.85"
+                               alpha.overAndSelected="1" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 3: fill lowlight -->
+    <!--- @private -->
+    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
+        <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 4: fill highlight -->
+    <!--- @private -->
+    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
+        <s:fill>
+            <s:LinearGradient rotation="90">
+                <s:GradientEntry color="0xFFFFFF"
+                                 ratio="0.0"
+                                 alpha="0.33" 
+                                 alpha.selectedUpStates="0.22"
+                                 alpha.overStates="0.22" 
+                                 alpha.downStates="0.12"/>
+                <s:GradientEntry color="0xFFFFFF"
+                                 ratio="0.48"
+                                 alpha="0.33"
+                                 alpha.selectedUpStates="0.22"
+                                 alpha.overStates="0.22" 
+                                 alpha.downStates="0.12"/>
+                <s:GradientEntry color="0xFFFFFF"
+                                 ratio="0.48001"
+                                 alpha="0" />
+            </s:LinearGradient>
+        </s:fill>
+    </s:Rect>
+    
+    <!-- layer 5: highlight stroke (all states except down) -->
+    <!--- @private -->
+    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="downStates">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0xFFFFFF" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
+                <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    
+    <!-- layer 6: highlight stroke (down state only) -->
+    <!--- @private -->
+    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2"
+            includeIn="downStates, selectedUpStates, overAndSelected">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
+                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
+                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
+                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
+                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    <!--- @private -->
+    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2"
+            includeIn="downStates, selectedUpStates, overAndSelected">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
+                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    
+    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
+    <!--- @private -->
+    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
+        <s:stroke>
+            <s:LinearGradientStroke rotation="90" weight="1">
+                <s:GradientEntry color="0x000000" 
+                               alpha="0.5625"
+                               alpha.down="0.6375"
+                               alpha.selectedStates="0.6375" />
+                <s:GradientEntry color="0x000000" 
+                               alpha="0.75" 
+                               alpha.down="0.85"
+                               alpha.selectedStates="0.85" />
+            </s:LinearGradientStroke>
+        </s:stroke>
+    </s:Rect>
+    
+    <!-- layer 8: text -->
+    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
+    <s:Label id="labelDisplay"
+             textAlign="center"
+             verticalAlign="middle"
+             maxDisplayedLines="1"
+             horizontalCenter="0" verticalCenter="1"
+             left="10" right="20" top="2" bottom="2">
+    </s:Label>
+    
+	<!-- layer 8: arrow -->
+	<!--- The arrow graphic displayed in the anchor button. -->
+	<s:Path right="6" verticalCenter="0" id="arrow"
+			data="M 4.0 4.0 L 3.0 4.0 L 3.0 5.0 L 2.0 5.0 L 2.0 6.0 L 1.0 6.0 L 1.0 7.0 L 0.0 7.0 L 0.0 0.0 L 1.0 0.0 L 1.0 1.0 L 2.0 1.0 L 2.0 2.0 L 3.0 2.0 L 3.0 3.0 L 4.0 3.0 L 4.0 4.0">
+		<s:fill>
+			<s:RadialGradient rotation="90" focalPointRatio="1">   
+				<!--- @private
+				The first part of the arrow's gradient fill. 
+				The default alpha is .6. The default color if 0x000000. -->
+				<s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
+				<!--- @private
+				The second part of the arrow's gradient fill. 
+				The default alpha is .6. The default color if 0x000000. -->
+				<s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
+			</s:RadialGradient>
+		</s:fill>
+	</s:Path>
+	
+</s:SparkSkin>

Added: incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/MenuBarSkin.mxml
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/MenuBarSkin.mxml?rev=1233864&view=auto
==============================================================================
--- incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/MenuBarSkin.mxml (added)
+++ incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/controls/MenuBarSkin.mxml Fri Jan 20 11:11:01 2012
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+
+Copyright (c) 2011 Tink Ltd - http://www.tink.ws
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO 
+THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-->
+
+<!--- The default skin class for the Spark MenuBar component.
+	  The default item renderer for the MenuBar component is a MenuBarItemRenderer.  
+    
+      @see ws.tink.controls.MenuBar
+      @see ws.tink.spark.itemRenderers.MenuBarItemRenderer   
+        
+      @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:st="library://ns.tink.ws/flex/spark"
+        alpha.disabled="0.5"
+		>
+	
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("ws.tink.spark.controls.MenuBar")]
+		]]>
+	</fx:Metadata> 
+	
+    <s:states>
+        <s:State name="normal" />
+        <s:State name="disabled" />
+    </s:states>
+    
+    <fx:Declarations>
+        <!--- 
+            @copy spark.components.ButtonBar#firstButton
+            @default ws.tink.spark.skins.itemRenderers.DropDownMenuBarItemRendererSkin
+            @see spark.skins.spark.ButtonBarFirstButtonSkin
+        -->
+        <fx:Component id="firstButton">
+			<st:MenuBarItemRenderer/>
+        </fx:Component>
+
+        <!--- 
+            @copy spark.components.ButtonBar#middleButton
+            @default ws.tink.spark.skins.itemRenderers.DropDownMenuBarItemRendererSkin
+            @see spark.skins.spark.ButtonBarMiddleButtonSkin
+        -->
+        <fx:Component id="middleButton" >
+			<st:MenuBarItemRenderer/>
+        </fx:Component>
+
+        <!--- 
+            @copy spark.components.ButtonBar#lastButton
+            @default ws.tink.spark.skins.itemRenderers.DropDownMenuBarItemRendererSkin
+            @see spark.skins.spark.ButtonBarLastButtonSkin
+        -->
+        <fx:Component id="lastButton" >
+			<st:MenuBarItemRenderer/>
+        </fx:Component>
+
+    </fx:Declarations>
+
+    <!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
+    <s:DataGroup id="dataGroup" width="100%" height="100%">
+        <s:layout>
+            <s:ButtonBarHorizontalLayout gap="-1"/>
+        </s:layout>
+    </s:DataGroup>
+
+</s:Skin>

Added: incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/itemRenderers/DropDownMenuBarItemRendererSkin.mxml
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/itemRenderers/DropDownMenuBarItemRendererSkin.mxml?rev=1233864&view=auto
==============================================================================
--- incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/itemRenderers/DropDownMenuBarItemRendererSkin.mxml (added)
+++ incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/itemRenderers/DropDownMenuBarItemRendererSkin.mxml Fri Jan 20 11:11:01 2012
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+
+Copyright (c) 2011 Tink Ltd - http://www.tink.ws
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO 
+THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-->
+
+<!--- One of the default skin classes for the Spark MenuBarItemRenderer component. 
+      The skin for the anchor button for a MenuBarItemRenderer component 
+      is defined by the ToggleButtonSkin class when the item is selectable
+	  and DropDownMenuBarItemRendererToggleButtonSkin when the item isn't selectable,
+	  usually due to the item being a branch, not a leaf.  
+      
+      <p>In a custom skin class that uses transitions, set the 
+      <code>itemDestructionPolicy</code> property to <code>none</code>
+      for the PopUpAnchor defined by the popUp property.</p>      
+        
+	  @see spark.skins.spark.ToggleButtonSkin
+      @see ws.tink.spark.controls.itemRenderers.MenuBarItemRenderer  
+      @see ws.tink.spark.skins.controls.DropDownMenuBarItemRendererToggleButtonSkin
+	  @see ws.tink.spark.skins.controls.DropRightMenuBarItemRendererSkin
+        
+      @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:st="library://ns.tink.ws/flex/spark"
+			 alpha.disabledStates=".5" xmlns:itemRenderers="ws.tink.spark.itemRenderers.*" xmlns:local="*"> 
+
+    <!-- host component -->
+    <fx:Metadata>
+    <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("ws.tink.spark.itemRenderers.MenuBarItemRenderer")]
+    ]]>
+    </fx:Metadata> 
+
+	<!-- states -->
+	<s:states>
+		<s:State name="normal" stateGroups="selectableStates,closedStates"/>
+		<s:State name="open" stateGroups="selectableStates,openStates"/>
+		<s:State name="disabled" stateGroups="selectableStates,disabledStates"/>
+		<s:State name="normalBranch" stateGroups="nonSelectectableStates,closedStates" />
+		<s:State name="openBranch" stateGroups="nonSelectectableStates,openStates"/>
+		<s:State name="disabledBranch" stateGroups="nonSelectectableStates,disabledStates"/>
+	</s:states>
+    
+    <!--- 
+        The PopUpAnchor control that opens the drop-down list. 
+        
+        <p>In a custom skin class that uses transitions, set the 
+        <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
+    -->
+    <s:PopUpAnchor id="popUp"  displayPopUp.closedStates="false" displayPopUp.openStates="true" includeIn="openStates"
+        left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
+        popUpPosition="below" popUpWidthMatchesAnchorWidth="false">
+        
+        <!--- 
+              This includes borders, background colors, scrollers, and filters.
+              @copy spark.components.supportClasses.DropDownListBase#dropDown
+        -->
+        <s:Group id="dropDown" minHeight="22" >
+        
+            <!--- @private -->
+			<s:RectangularDropShadow id="dropShadow" blurX="10" blurY="10" alpha="0.45" distance="7" 
+                 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+            
+            <!--- @private -->
+			
+			<s:DataGroup id="dataGroup" width="100%" itemRenderer="ws.tink.spark.itemRenderers.MenuBarItemRenderer">
+				<s:layout>
+					<s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
+				</s:layout>
+			</s:DataGroup>
+        </s:Group>
+    </s:PopUpAnchor>
+    
+    <!---  The default skin are ToggleButtonSkin and ArrowDownToggleButtonSkin. 
+            @copy spark.components.supportClasses.DropDownListBase#openButton
+			@see spark.skins.spark.ToggleButtonSkin
+            @see ws.tink.spark.skins.controls.ArrowDownToggleButtonSkin -->
+    <s:ToggleButton id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
+					skinClass.selectableStates="spark.skins.spark.ToggleButtonSkin"
+					skinClass.nonSelectectableStates="ws.tink.spark.skins.controls.ArrowDownToggleButtonSkin"/>  
+
+</s:SparkSkin>

Added: incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/itemRenderers/DropRightMenuBarItemRendererSkin.mxml
URL: http://svn.apache.org/viewvc/incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/itemRenderers/DropRightMenuBarItemRendererSkin.mxml?rev=1233864&view=auto
==============================================================================
--- incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/itemRenderers/DropRightMenuBarItemRendererSkin.mxml (added)
+++ incubator/flex/whiteboard/tink/navigators/src/ws/tink/spark/skins/itemRenderers/DropRightMenuBarItemRendererSkin.mxml Fri Jan 20 11:11:01 2012
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+
+Copyright (c) 2011 Tink Ltd - http://www.tink.ws
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO 
+THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-->
+
+<!--- One of the default skin classes for the Spark MenuBarItemRenderer component. 
+	  The skin for the anchor button for a MenuBarItemRenderer component 
+	  is defined by the ToggleButtonSkin class when the item is selectable
+	  and DropRightMenuBarItemRendererToggleButtonSkin when the item isn't selectable,
+	  usually due to the item being a branch, not a leaf.  
+
+	  <p>In a custom skin class that uses transitions, set the 
+	  <code>itemDestructionPolicy</code> property to <code>none</code>
+	  for the PopUpAnchor defined by the popUp property.</p>      
+
+	  @see spark.skins.spark.ToggleButtonSkin
+	  @see ws.tink.spark.controls.itemRenderers.MenuBarItemRenderer  
+	  @see ws.tink.spark.skins.controls.DropDownMenuBarItemRendererSkin
+	  @see ws.tink.spark.skins.controls.DropRightMenuBarItemRendererToggleButtonSkin
+
+	  @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:st="library://ns.tink.ws/flex/spark"
+			 alpha.disabledStates=".5" xmlns:itemRenderers="ws.tink.spark.itemRenderers.*" xmlns:local="*"> 
+
+    <!-- host component -->
+    <fx:Metadata>
+    <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("ws.tink.spark.itemRenderers.MenuBarItemRenderer")]
+    ]]>
+    </fx:Metadata> 
+
+	<!-- states -->
+	<s:states>
+		<s:State name="normal" stateGroups="selectableStates,closedStates"/>
+		<s:State name="open" stateGroups="selectableStates,openStates"/>
+		<s:State name="disabled" stateGroups="selectableStates,disabledStates"/>
+		<s:State name="normalBranch" stateGroups="nonSelectectableStates,closedStates" />
+		<s:State name="openBranch" stateGroups="nonSelectectableStates,openStates"/>
+		<s:State name="disabledBranch" stateGroups="nonSelectectableStates,disabledStates"/>
+	</s:states>
+    
+    <!--- 
+        The PopUpAnchor control that opens the drop-down list. 
+        
+        <p>In a custom skin class that uses transitions, set the 
+        <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
+    -->
+    <s:PopUpAnchor id="popUp"  displayPopUp.closedStates="false" displayPopUp.openStates="true" includeIn="openStates"
+        left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
+        popUpPosition="right" popUpWidthMatchesAnchorWidth="false">
+        
+        <!--- 
+              This includes borders, background colors, scrollers, and filters.
+              @copy spark.components.supportClasses.DropDownListBase#dropDown
+        -->
+        <s:Group id="dropDown" minHeight="22" x="-20">
+        
+            <!--- @private -->
+			<s:RectangularDropShadow id="dropShadow" blurX="10" blurY="10" alpha="0.45" distance="7" 
+                 angle="90" color="#000000" left="-5" top="0" right="0" bottom="0"/>
+            
+            <!--- @private -->
+			<s:DataGroup id="dataGroup" width="100%" x="-5" itemRenderer="ws.tink.spark.itemRenderers.MenuBarItemRenderer">
+				<s:layout>
+					<s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
+				</s:layout>
+			</s:DataGroup>
+        </s:Group>
+    </s:PopUpAnchor>
+	
+	<!---  The default skin are ToggleButtonSkin and ArrowRightToggleButtonSkin. 
+	@copy spark.components.supportClasses.DropDownListBase#openButton
+	@see spark.skins.spark.ToggleButtonSkin
+	@see ws.tink.spark.skins.controls.ArrowRightToggleButtonSkin -->
+	<s:ToggleButton id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
+					skinClass.selectableStates="spark.skins.spark.ToggleButtonSkin"
+					skinClass.nonSelectectableStates="ws.tink.spark.skins.controls.ArrowRightToggleButtonSkin"/> 
+</s:SparkSkin>



Mime
View raw message