mx:ApplicationControlBar with a "true" dock to the bottom

There has been a thread on Flexcoders recently, asking how to dock a component to the bottom of a Flex application, specifically a mx:ApplicationControlBar.

For all components, there is an easy way: Just use css positioning to set bottom="0".

For a mx:ApplicationControlBar, there is an easy way, and a hard way to do this. The easy way is to not use a "true" dock to the application. Do not set dock="true" on the mx:ApplcationControlBar. As mentioned above, use css positioning to set bottom="0" left="0" and right="0". This will give the illusion that the ApplicationControlBar is docked to the bottom of the application. This will work for most people.

The hard way is to extend the mx.core.Application class and override the layoutChrome and get viewMetrics methods so that the ApplicationControlBar is truly docked at the bottom of the screen. You can just create an instance of an ApplicationControlBar and set docked="true".

What are the benefits of this approach? ... Extending the mx.core.Appliation class allows you to dock the control bar without using any css positioning tricks. Therefore, all componets inside of the application use the default layout of the application container. You won't need to do any positioning tricks to prevent your components from overlapping. Setting bottom="0" on a component within the application will render the bottom of the component directly above the ApplicationControlBar that is docked to the bottom of the screen.

Take a look at this example:



I started with the example from the ApplicationControlBar Flex 2 API documentation. I extended the mx.core.Application class and overrode the layoutChrome and get viewMetrics to change the border/view metrics for the application instance, and "physically" moved the controlBar location. I based this off of the framework SDK source, which everyone can view. On a default windows installation, this can be found in C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\source\mx\core.

• View Application
• View Full Application Source
• Download Full Application Source

package components
{
	import mx.core.Application;
	import mx.core.EdgeMetrics;
	import mx.core.IInvalidating;

	public class BottomDockApplication extends Application
	{
		override public function get viewMetrics():EdgeMetrics
		{
			var vm:EdgeMetrics = super.viewMetrics;
			
			var thickness:Number = getStyle("borderThickness");
			vm.top = thickness;
			
			if (controlBar && controlBar.includeInLayout)
			{
				vm.bottom += thickness;
				vm.bottom += Math.max(controlBar.getExplicitOrMeasuredHeight(), thickness);
			}
	
			return vm;
		}
		
		override protected function layoutChrome(unscaledWidth:Number,
											 unscaledHeight:Number):void
		{
			super.layoutChrome(unscaledWidth, unscaledHeight);
	
			var bm:EdgeMetrics = borderMetrics;
			var thickness:Number = getStyle("borderThickness");
	
			var em:EdgeMetrics = new EdgeMetrics();
	
			em.left = bm.left - thickness;
			em.top = thickness;
			em.right = bm.right - thickness;
			em.bottom = unscaledHeight - Math.max(controlBar.getExplicitOrMeasuredHeight(), thickness);
	
			if (controlBar && controlBar.includeInLayout)
			{
				if (controlBar is IInvalidating)
					IInvalidating(controlBar).invalidateDisplayList();
				controlBar.setActualSize(width - (em.left + em.right), controlBar.getExplicitOrMeasuredHeight());
				controlBar.move(em.left, em.bottom);
	 		}
		}
		
	}
}