Flex4 Panel and controlBar

Nov 30th, 2010 | Posted by Michael

A control bar contains a group of controls outside the main content area of a Spark Panel container. The control bar is always visible at the bottom of the Panel container. You can set controlBarVisible to display or hidden controlBar .

<?xml version="1.0" encoding="utf-8"?>
<!--created:Nov 22, 2010 file:PanelandControlBar.mxml  author:Michael -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   viewSourceURL="srcview/index.html">

	<s:VGroup width="100%"
			  height="100%"
			  horizontalAlign="center"
			  verticalAlign="middle">
		<s:Panel width="50%"
				 height="50%"
				 title="Panel and ControlBar Example"
				 controlBarVisible="{this.cb.selected}">
			<s:controlBarLayout>
				<s:HorizontalLayout horizontalAlign="center"
									verticalAlign="middle"
									paddingTop="10"
									paddingBottom="10"/>

			</s:controlBarLayout>

			<s:controlBarContent>
				<s:Button label="ControlBar ButtonA"/>
				<s:Button label="ControlBar ButtonB"/>
				<s:Button label="ControlBar ButtonC"/>
				<s:Button label="ControlBar ButtonD"/>
			</s:controlBarContent>
			<s:layout>
				<s:HorizontalLayout horizontalAlign="center"
									verticalAlign="middle"/>
			</s:layout>
			<s:Label text="LabelA Inside Panel"/>
			<s:CheckBox id="cb"
						label="Display ControlBar?"
						selected="true"/>

		</s:Panel>

	</s:VGroup>

</s:Application>

Demo and Source

Originally posted 2010-11-22 01:53:03.

No comments yet.
*

Popular Arichives