Posts Tagged ‘ViewStack container’

Flash Builder 4- Navigators

January 7th, 2011 by aabhaanjan

navigators_flash_builderflex_cert3

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]

<?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>

[/xml]

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]

<?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>

[/xml]

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]

<?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>

[/xml]

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]

<?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>

[/xml]

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]

<?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>

[/xml]

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]

<?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>

[/xml]

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]

<?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>

[/xml]

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]

<?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>

[/xml]

Tags: , , , , , , , , , , , , , , , , , , ,