Accordion
Component Type : mx.containers
important points :
1. An MX Accordion navigator container has a collection of child MX containers or Spark NavigatorContent containers, but only one of them at a time is visible.
2. There is one navigator button associated with each child container, and each navigator button belongs to the Accordion container, not to the child.
3. The direct children of an MX navigator container must be MX containers, either MX layout or MX navigator containers, or the Spark NavigatorContent container.
4. The Accordion container does not extend the ViewStack container, but it implements all the properties, methods, styles, and events of the ViewStack container, such as selectedIndex and selectedChild.
Default sizing characteristics:
| Characteristic | Description |
| Default size | According to the currently active child. |
| Container resizing rules | Using resizeToContent property |
| Child sizing rules | Children are sized to their default size. |
| Default padding | -1 pixel for the top, bottom, left, and right values. |
Example :
<?xml version="1.0"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <mx:Accordioncolor: rgb(153, 0, 0);">accordion1" height="250"> <mx:Formcolor: rgb(153, 0, 0);">UserDetail" label="UserDetail"> <mx:FormItemcolor: rgb(153, 0, 0);">sfirstNameItem" label="First Name"> <mx:TextInputcolor: rgb(153, 0, 0);">sfirstName"/> </mx:FormItem> <!-- Additional contents goes here. --> </mx:Form> <mx:Formcolor: rgb(153, 0, 0);">submitOrder" label="Submit Order"> <!-- Form contents goes here. --> </mx:Form> </mx:Accordion> </s:Application>
ButtonBar
Component Type : spark.components
important points :
1. The typical use for a button bar is for grouping a set of related buttons together, which gives them a common look and navigation, and handling the logic for the change event in a single place.
2. The Spark list-based controls (the Spark ListBase class and its subclasses such as ButtonBar, ComboBox, DropDownList, List, and TabBar) do not support the BasicLayout class as the value of the layout property. Do not use BasicLayout with the Spark list-based controls.
Default characteristics:
| Characteristic | Description |
| Default size | Large enough to display all buttons |
| Minimum size | 0 pixels |
| Maximum size | No limit |
| Default skin class | spark.skins.spark.ButtonBarSkin |
Example :
<?xml version="1.0" encoding="utf-8"?> <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"> <s:layout> <s:VerticalLayout paddingLeft="20" paddingTop="20"/> </s:layout> <s:ButtonBar> <mx:ArrayCollection> <fx:String>Name</fx:String> <fx:String>Age</fx:String> <fx:String>Department</fx:String> </mx:ArrayCollection> </s:ButtonBar> </s:Application>
LinkBar
Component Type : mx.controls
important points :
1. we typically use a LinkBar control to control the active child container of a ViewStack container, or to create a stand-alone set of links.
Default characteristics:
| Characteristic | Description |
| Preferred size | A width wide enough to contain all. |
| Control resizing rules | LinkBar controls do not resize by default. |
| Padding | 2 pixels for the top, bottom, left, and right properties. |
Example ;
<?xml version="1.0"?>
<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">
<mx:LinkBar borderStyle="solid"
itemClick="navigateToURL(new URLRequest('http://www.dremsus.com/' +
String(event.label).toLowerCase()), '_blank');">
<mx:dataProvider>
<fx:String>Name</fx:String>
<fx:String>Age</fx:String>
<fx:String>Department</fx:String>
</mx:dataProvider>
</mx:LinkBar>
</s:Application>
MenuBar
Component Type : mx.controls
important points :
1. Clicking on a top-level menu item opens a pop-up submenu that is an instance of the Menu control.
The MenuBar control has the following sizing characteristics:
| Characteristic | Description |
| Default size | Minimum value of 27 pixels for the width. The default value for the height is 22 pixels. |
Example :
<?xml version="1.0"?> <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" > <mx:MenuBarcolor: rgb(153, 0, 0);">myMenuBar" labelField="@label"> <fx:XMLList> <menuitem label="MenuItem A"> <menuitem label="SubMenuItem 1-1" enabled="false"/> <menuitem label="SubMenuItem 1-2"/> </menuitem> <menuitem label="MenuItem1 "/> <menuitem label="MenuItem2 "/> <menuitem label="MenuItem3 "> <menuitem label="SubMenuItem 3-1" type="radio" groupName="one"/> <menuitem label="SubMenuItem 3-2" type="radio" groupName="one" selected="true"/> <menuitem label="SubMenuItem 3-3" type="radio" groupName="one"/> </menuitem> </fx:XMLList> </mx:MenuBar> </s:Application>
TabBar
Component Type : spark.components
important points :
1. The TabBarSkin class arranges the tabs in a single row.
2. Use the TabBar cornerRadius style to configure the corner radius of the tabs.
Default characteristics:
| Characteristic | Description |
| Default size | Large enough to display the tabs |
| Minimum size | 0 pixels |
| Maximum size | 10000 pixels X10000 pixels |
<?xml version="1.0"?> <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"> <mx:TabBar> <mx:dataProvider> <fx:String>item1</fx:String> <fx:String>item2</fx:String> <fx:String>item3</fx:String> </mx:dataProvider> </mx:TabBar> </s:Application>
TabNavigator
Component Type : mx.containers
important points :
1. The MX TabNavigator container extends the MX ViewStack container by including a TabBar container for navigating between its child containers.
2 .Note: The direct children of an MX navigator container must be MX containers,
Default sizing characteristics:
| Characteristic | Description |
| Default size | The default or explicit width and height of the first active child plus the tab. |
| Container resizing rules | By default, TabNavigator containers are only sized once to fit the size of the first child container. |
| Child layout rules | If the child is larger than the TabNavigator container, it is clipped. If the child is smaller than the TabNavigator container, it is aligned to the upper-left corner of the TabNavigator container. |
| Default padding | 0 pixels for the top, bottom, left, and right values. |
Example :
<?xml version="1.0"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <mx:TabNavigator borderStyle="solid" > <mx:VBox label="item1" width="300" height="150"> </mx:VBox> <mx:VBox label="item2" width="300" height="150"> </mx:VBox> </mx:TabNavigator> </s:Application>
ToggleButtonBar
Component Type : mx.controls
important points :
.
| 1. spark.components.ButtonBar class as an alternative to this class. |
2. You can use the ButtonBar control to define a group of push buttons.
3. The typical use for a toggle button is for maintaining selection among a set of options, such as switching between views in a ViewStack container.
Default characteristics:
| Characteristic | Description |
| Preferred size | Wide enough to contain all buttons |
| Control resizing rules | The controls do not resize by default. |
| selectedIndex | The default value is “0″ and selects the leftmost button in the bar. |
| Padding | 0 pixels for the top, bottom, left, and right properties. |
Example :
<?xml version="1.0" encoding="utf-8"?> <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"> <s:Panel title="ToggleButtonBar Control " width="75%" height="75%" horizontalCenter="0" verticalCenter="0"> <s:VGroup left="10" right="10" top="10" bottom="10"> <mx:ToggleButtonBar > <mx:dataProvider> <fx:Array> <fx:String>item1</fx:String> <fx:String>item2</fx:String> <fx:String>item3</fx:String> </fx:Array> </mx:dataProvider> </mx:ToggleButtonBar> </s:VGroup> </s:Panel> </s:Application>
ViewStack
Component Type : mx.containers
important points :
1. An MX ViewStack navigator container consists of a collection of child containers stacked on top of each other, where only one child at a time is visible.
2. The direct children of an MX navigator container must be MX containers, either MX layout or MX navigator containers, or the Spark NavigatorContent container.
Default sizing characteristics:
| Characteristic | Description |
| Default size | The width and height of the initial active child. |
| Container resizing rules | By default, ViewStack containers are sized only once to fit the size of the first child container. |
| Child sizing rules | Children are sized to their default size. |
| Default padding | 0 pixels for top, bottom, left, and right values. |
Example :
<?xml version="1.0"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <s:VGroup> <mx:HBox borderStyle="solid"> <s:Buttoncolor: rgb(153, 0, 0);">searchButton" label="Search Screen" click="myViewStack.selectedChild=search;"/> <s:Buttoncolor: rgb(153, 0, 0);">cInfoButton" label="Customer Info Screen" click="myViewStack.selectedChild=custInfo;"/> <s:Buttoncolor: rgb(153, 0, 0);">aInfoButton" label="Account Info Screen" click="myViewStack.selectedChild=accountInfo;"/> </mx:HBox> <!-- Define the ViewStack and the three child containers and have it resize up to the size of the container for the buttons. --> <mx:ViewStackcolor: rgb(153, 0, 0);">myViewStack" borderStyle="solid" width="100%"> <mx:Canvascolor: rgb(153, 0, 0);">search" label="Search"> <mx:Label text="Search Screen"/> </mx:Canvas> <mx:Canvascolor: rgb(153, 0, 0);">custInfo" label="Customer Info"> <mx:Label text="Customer Info"/> </mx:Canvas> <mx:Canvascolor: rgb(153, 0, 0);">accountInfo" label="Account Info"> <mx:Label text="Account Info"/> </mx:Canvas> </mx:ViewStack> </s:VGroup> </s:Application>
Tags: Accordion, ButtonBar, child MX containers, Child sizing rules, Container resizing rules, LinkBar, Menu control, MenuBar, MX Accordion navigator, mx.containers, navigator button, Spark list-based controls, Spark NavigatorContent, Spark NavigatorContent containers, spark.components, TabBar, TabNavigator, ToggleButtonBar, ViewStack, ViewStack container
Follow us on Twitter
Subscribe to our RSS Feeds