Posts Tagged ‘Label’

Flash Builder 4- Controls-Part 2

January 7th, 2011 by aabhaanjan

flex_cert3

OLAPDataGrid

Component Type : spark.components

Important points :

1. Its support for the display of the results of OLAP queries.

2. differences with AdvancedDataGrid control:

  • Column dragging is not allowed in the OLAPDataGrid control.
  • You cannot edit cells in the OLAPDataGrid control because cell data is a result of a query and does not correspond to a single data value in the OLAP cube.
  • You cannot sort columns by clicking on header in the OLAPDataGrid control. Sorting is supported at the dimension level so that you can change the order of members of that dimension.

PopUpButton

Component Type : mx.control

important points :

1. It contains a main button and a secondary button, called the pop-up button, which pops up any UIComponent object when a user clicks the pop-up button.

2 It can have a text label, an icon, or both on its face.

3. One common use for the PopUpButton control is to have the pop-up button open a List control or a Menu control that changes the function and label of the main button.

Default Characteristics:

Characteristic Description
Default size Sufficient width
Minimum size 0 pixels
Maximum size Undefined

Example :

PopUpMenuButton

Component Type : mx.control

important points :

1.The PopUpMenuButton control creates a PopUpButton control with a main sub-button and a secondary sub-button.

  1. Clicking on the secondary (right) sub-button drops down a menu that can be popluated through a dataProvider property.
  2. Difference with Menu and MenuBar controls : the PopUpMenuButton control supports only a single-level menu.
  3. It cannot contain cascading submenus.

Default characteristics:

Characteristic Description
Default size Sufficient
Minimum size 0 pixels.
Maximum size 10000 by 10000.

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”>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.MenuEvent;

public function itemClickHandler(evt:MenuEvent):void {
}
]]>
</fx:Script>
<fx:Declarations>

<fx:XMLList>
<node label=”Inbox”/>
</fx:XMLList>
</fx:Declarations>
<s:Panel title=”PopUpMenuButton ”
width=”75%” height=”75%”
horizontalCenter=”0″ verticalCenter=”0″>
<s:VGroup left=”10″ right=”10″ top=”10″ bottom=”10″>
<s:Label width=”100%” color=”blue”
text=”Click the down arrow to open the menu.”/>
<mx:PopUpMenuButton
dataProvider=”{treeDP2}”
labelField=”@label”
itemClick=”itemClickHandler(event);”/>
</s:VGroup>
</s:Panel>
</s:Application>

[/xml]

ProgressBar

Component Type : mx.control

important points :

1. There are two types of ProgressBar controls: determinate and indeterminate.

  1. A determinate ProgressBar control is a linear representation of the progress of a task over time.
  2. Used determinate ProgressBar when the scope of the task is known. It displays when the user has to wait for an extended amount of time.

4. An indeterminate ProgressBar control represents time-based processes for which the scope is not yet known.

Default characteristics:

Characteristic Description
default size 150 pixels X 4 pixels
Minimum size 0 pixels
Maximum size Undefined

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”>
<fx:Script>
<![CDATA[
private var j:uint = 0;

private function runit():void
{
if (j < 100) {
j += 10;
} else if (j >= 100) {
j = 0;
}
bar.setProgress(j, 100);
bar.label = “Current Progress: ” + j + “%”;
}
]]>
</fx:Script>
<s:Panel title=”Halo ProgressBar Control Example”
width=”75%” height=”75%”
horizontalCenter=”0″ verticalCenter=”0″>
<s:VGroup left=”10″ right=”10″ top=”10″ bottom=”10″>
<s:Label width=”100%” color=”blue”
text=”Click the button to increment the progress bar.” />
<s:Button label=”Run” click=”runit();”/>
<mx:ProgressBar labelPlacement=”bottom” chromeColor=”red”
minimum=”0″ visible=”true” maximum=”100″ label=”CurrentProgress 0%”
direction=”right” mode=”manual” width=”100%”/>
</s:VGroup>
</s:Panel>
</s:Application>

[/xml]

RadioButton

Component Type : spark.components

important points :

1. Difference with RadioButtonGroup

A RadioButtonGroup is composed of two or more RadioButton components with the same groupName property.

2

The RadioButton group can refer to the a group created by the <s:RadioButtonGroup> tag.

3. The user selects only one member of the group at a time. Selecting an unselected group member deselects the currently selected RadioButton component within that group.

Default characteristics:

Characteristic Description
Default size Wide enough
Minimum size 18 pixels X 18 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin class spark.skins.spark.RadioButtonSkin

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”>
<fx:Script>
import mx.controls.Alert;
</fx:Script>
<s:Panel title=”Halo RadioButton Control Example”
width=”75%” height=”75%”
horizontalCenter=”0″ verticalCenter=”0″>
<s:VGroup left=”10″ right=”10″ top=”10″ bottom=”10″>
<s:Label width=”100%” color=”blue”
text=”What year were women first allowed to compete in the Boston Marathon?”/>
<mx:RadioButton groupName=”year” label=”1942″/>
<mx:RadioButton groupName=”year” label=”1952″/>

<s:Button label=”Check Answer”
click=”Alert.show(option4.selected ? ‘Correct Answer!’:’Wrong Answer’, ‘Result’);”/>
</s:VGroup>
</s:Panel>
</s:Application>

[/xml]

RadioButton

Component Type : spark.components

Default characteristics:

Characteristic Description
Default size Wide enough
Minimum size 18 pixels X18 pixels
Maximum size 10000 X 10000 pixels
Default skin class spark.skins.spark.RadioButtonSkin

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”>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import  mx.events.ItemClickEvent;

private function handleItem(evt:ItemClickEvent):void {
switch (evt.currentTarget.selectedValue) {
case “one”:
Alert.show(“You selected one”);
break;
case “two”:
Alert.show(“You selected Two”);
break;

}
}
]]>
</fx:Script>
<fx:Declarations>
<mx:RadioButtonGroup itemClick=”handleItem(event);”/>
</fx:Declarations>
<s:Panel title=”Halo RadioButtonGroup ”
width=”75%” height=”75%”
horizontalCenter=”0″ verticalCenter=”0″>
<s:VGroup left=”10″ right=”10″ top=”10″ bottom=”10″>
<s:Label width=”100%” color=”blue”
text=”Select a type of credit card.”/>
<mx:RadioButton groupName=”type” value=”one”
label=”oneExpress” width=”150″ />
<mx:RadioButton groupName=”type” value=”two”
label=”two” width=”150″ />

</s:VGroup>
</s:Panel>
</s:Application>

[/xml]

RichEditableText

Component Type : spark.components

important points :

1. The rich text can contain clickable hyperlinks and inline graphics .

  1. RichEditableText does not have scrollbars,
  2. It implements the IViewport interface for programmatic scrolling .
    1. RichEditableText uses the Text Layout Framework (TLF) library.
    2. The Spark architecture provides three text “primitives” — Label, RichText, and RichEditableText.
    1. Label is the fastest and most lightweight because it uses only FTE, not TLF.

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”>
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
]]>
</fx:Script>
<fx:Declarations>
<fx:XML source=”externalTextFlow.xml” />
</fx:Declarations>
<s:Panel title=”RichText textFlow test”
width=”90%” height=”90%”
horizontalCenter=”0″ verticalCenter=”0″>
<s:Scroller width=”100%” height=”100%”>
<s:VGroup paddingLeft=”20″ paddingRight=”20″ paddingTop=”20″ paddingBottom=”20″>
<s:RichEditableText textAlign=”justify” percentWidth=”100″>
<s:textFlow>
<s:TextFlow>
<s:p fontSize=”24″>Inline TextFlow</s:p>
<s:p>1) text-text </s:p>

</s:TextFlow>
</s:textFlow>
</s:RichEditableText>
<s:RichEditableText textAlign=”justify” width=”100%”
textFlow=”{TextConverter.importToFlow(extTxtFlow, TextConverter.TEXT_LAYOUT_FORMAT)}” />
</s:VGroup>
</s:Scroller>
</s:Panel>
</s:Application>

[/xml]

RichText

Component Type : spark.components

important points :

1. RichText is a low-level UIComponent that can display one or more lines of richly-formatted text and embedded images.

2 It does not support scrolling, selection, editing, clickable hyperlinks, or images loaded from URLs.

  1. RichText uses the Text Layout Framework (TLF) library
  2. Difference with Text :
  • RichText offers better typography, better support for international languages, and better text layout than Text.
  • RichText has an object-oriented model of what it displays, while Text does not.
  • Text is selectable, while RichText does not support selection.

Default MXML property: content

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”>
<s:Panel title=”Spark RichText ”
width=”75%” height=”75%”
horizontalCenter=”0″ verticalCenter=”0″>
<s:Group left=”10″ right=”10″ top=”10″ bottom=”10″>
<s:RichText x=”0″ y=”0″ width=”75″ fontFamily=”Times” fontSize=”15″ textRotation=”rotate90″>
<s:content>Hello World!</s:content>
</s:RichText>
<s:Group x=”100″ y=”0″>
<s:RichText width=”100″ textAlign=”justify” paddingTop=”5″ paddingLeft=”5″ paddingRight=”5″ paddingBottom=”5″>
<s:content>Text-text-text</s:content>
</s:RichText>
<s:Rect width=”100%” height=”100%”>
<s:stroke>
<s:SolidColorStroke color=”red”/>
</s:stroke>
</s:Rect>
</s:Group>
<s:Group x=”225″ y=”0″>
<s:RichText width=”140″ height=”120″ columnCount=”2″ columnGap=”10″>
<s:content><s:span fontWeight=”bold”>Hello World!</s:span> Text-text-text</s:content>
</s:RichText>
<s:Rect width=”100%” height=”100%”>
<s:stroke>
<s:SolidColorStroke color=”red”/>
</s:stroke>
</s:Rect>
</s:Group>
</s:Group>
</s:Panel>
</s:Application>

[/xml]

Spinner

Component Type : spark.components

important points :

  1. A Spinner component selects a value from an ordered set.
  2. It uses two buttons that increase or decrease the current value .

Default characteristics:

Characteristic Description
Default size 19 pixels X 23 pixels
Minimum size 12 pixels X 12 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin class spark.skins.spark.SpinnerSkin

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

<mx:Panel title=”Spinner Control ” height=”75%” width=”75%” paddingTop=”10″
paddingLeft=”10″ horizontalCenter=”0″ verticalCenter=”0″>
<s:Group>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<mx:Text text=”Use the arrows to change tabs”/>
<s:Spinner maximum=”3″/>
</s:Group>

<mx:TabNavigator width=”75%” height=”75%” selectedIndex=”@{mySpinner.value}” >
<mx:HBox label=”Tab 1″>
<mx:Text text=”Text on Tab 1″ fontSize=”14″ color=”red”/>
</mx:HBox>
<mx:HBox label=”Tab 2″>
<mx:Text text=”Text on Tab 2″ fontSize=”16″ color=”blue”/>
</mx:HBox>

</mx:TabNavigator>

<mx:Label color=”purple” text=”Current Tab = {mySpinner.value+1}”/>
</mx:Panel>
</s:Application>

[/xml]

SWFLoader

Component Type : mx.controls

important points :

  1. The SWFLoader control loads and displays a specified SWF file.
  2. It is used for loading one Flex application into a host Flex application.

3. we can use the SWFLoader control to load a GIF, JPEG, or PNG image file at runtime, to load a ByteArray representing a SWF, GIF, JPEG, or PNG image at runtime, or load an embedded version of any of these file types, and SVG files, at compile time by using @Embed(source=’filename’).

4. The SWFLoader control lets you scale its content and set its size.

5. A SWFLoader control cannot receive focus. However, the contents of a SWFLoader control can accept focus and have its own focus interactions.

Default characteristics:

Characteristic Description
Default size enough for the loaded content
Minimum size 0 pixels
Maximum size Undefined

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”>
<s:VGroup>
<mx:SWFLoader source=”FlexApp.swf”/>
</s:VGroup>
</s:Application>

[/xml]

TextArea

Component Type : spark.components

important points :

1. The Spark version of TextArea uses the Text Layout Framework (TLF) library,

  • Spark TextArea offers better typography, better support for international languages, and better text layout.
  • Spark TextArea has an object-oriented model of rich text, while the MX version does not.
  • Spark TextArea has better support for displaying large amounts of text.
  • Spark TextArea requires that fonts be embedded differently than the MX version. To learn how to use the embedAsCFF attribute when you embed a font, see the font documentation.

The Spark TextArea control uses the TLF object-oriented model of rich text.

Default characteristics:

Characteristic Description
Default size 188 pixels X149 pixels
Minimum size 36 pixels X 36 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin class spark.skins.spark.TextAreaSkin

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”>
<s:layout>
<s:BasicLayout />
</s:layout>
<s:Panel title=”Spark TextArea Control ”
horizontalCenter=”0″
verticalCenter=”0″>
<s:VGroup left=”10″ right=”10″ top=”10″ bottom=”10″>
<s:TextArea width=”400″ height=”100″>
<s:text>Text-Text-Text.</s:text>
</s:TextArea>

</s:VGroup>
</s:Panel>
</s:Application>

[/xml]

TextInput

Component Type : spark.components

important points :

1. This Spark version of TextInput makes use of the Text Layout Framework (TLF) library.

2.The widthInChars property provides a convenient way to specify the width in a way that scales with the font size.

  1. This control dispatches a FlexEvent.ENTER event when the user pressed the Enter key .
  2. rather than inserting a line break, because this control does not support entering multiple lines of text.
  3. By default, this control has explicit line breaks.

6. As a result of RichEditableText using TLF, the Spark TextInput control supports displaying left-to-right (LTR) text.

Default characteristics:

Characteristic Description
Default size 128 pixels X 22 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin class spark.skins.spark.TextInputSkin

Example :

[xml]

<?xml version=”1.0″?>

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:s=”library://ns.adobe.com/flex/spark”>
<s:layout>
<s:BasicLayout />
</s:layout>
<s:Panel title=”Spark TextInput Control ”
horizontalCenter=”0″ verticalCenter=”0″>
<s:VGroup left=”10″ right=”10″ top=”10″ bottom=”10″>
<s:TextInput text=”Hello World!” />
<s:Button label=”Copy Text” click=”dest.text = src.text” />
<s:TextInput />
</s:VGroup>
</s:Panel>
</s:Application>

[/xml]

ToggleButton

Component Type : spark.components

Default characteristics:

Characteristic Description
Default size Wide enough
Minimum size 21 pixels X 21 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin class spark.skins.spark.ToggleButtonSkin

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”>
<fx:Script>
<![CDATA[

private function printMessage(evt:Event):void  {
if (evt.target.selected){
message.text += “fontWeight: bold” + “\n”;
lbl.setStyle(“fontWeight”, “bold”);
togBtn.label = “Bold”;
} else{
message.text += “fontWeight: normal” + “\n”;
lbl.setStyle(“fontWeight”, “normal”);
togBtn.label = “Normal”;
}
}
]]>
</fx:Script>
<s:Panel title=”Spark ToggleButton Control ”
width=”75%” height=”75%”
horizontalCenter=”0″ verticalCenter=”0″>
<s:VGroup left=”10″ right=”10″ top=”10″ bottom=”10″>
<s:ToggleButton label=”Normal” click=”printMessage(event);” />
<s:Label text=”Label” />
<s:TextArea height=”100%” width=”100%” color=”#0000FF” />
</s:VGroup>
</s:Panel>
</s:Application>

[/xml]

Tree

Component Type : mx.controls

important points :

1 The Tree class uses an ITreeDataDescriptor or ITreeDataDescriptor2 object to parse and manipulate the data provider.

2. The default tree data descriptor, an object of the DefaultDataDescriptor class, supports XML and Object classes; an Object class data provider must have all children in children fields.

Default sizing characteristics:

Characteristic Description
Default size Wide enough to accommodate the icon, label, and expansion triangle, if any, of the widest node in the first 7 displayed (uncollapsed) rows, and seven rows high, where each row is 20 pixels in height. If a scroll bar is required, the width of the scroll bar is not included in the width calculations.
Minimum size 0 pixels.
Maximum size 5000 by 5000.

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”>
<fx:Script>
<![CDATA[
[Bindable]
public var selectedNode:XML;

public function treeChanged(evt:Event):void {
selectedNode = Tree(evt.target).selectedItem as XML;
}
]]>
</fx:Script>
<fx:Declarations>
<fx:XMLList>
<node label=”Mail Box”>
<node label=”Inbox”>
<node label=”XYZ”/>

</node>

</node>
</fx:XMLList>
</fx:Declarations>
<s:Panel title=”Halo Tree Control Example”
width=”75%” height=”75%”
horizontalCenter=”0″ verticalCenter=”0″>
<s:VGroup left=”10″ right=”10″ top=”10″ bottom=”10″>
<s:Label width=”100%” color=”blue”
text=”Select a node in the Tree control.”/>
<mx:HDividedBox width=”100%” height=”100%”>
<mx:Tree width=”50%” height=”100%” labelField=”@label”
showRoot=”false” dataProvider=”{treeData}” change=”treeChanged(event);”/>
<s:TextArea height=”100%” width=”50%”
text=”Selected Item: {selectedNode.@label}”/>
</mx:HDividedBox>
</s:VGroup>
</s:Panel>
</s:Application>

[/xml]

VideoDisplay

Component Type : spark.components

important points :

1. The VideoDisplay class is chromeless video player that supports progressive download, multi-bitrate, and streaming video.

  1. It does not support skinning.

Default characteristics:

Characteristic Description
Default size 0 pixels wide by 0 pixels high with no content, and the width and height of the video with content
Minimum size 0
Maximum size 10000 pixels X 10000 pixels

VideoPlayer

Component Type : spark.components

important points :

  1. The VideoPlayer control is a skinnable video player that supports progressive download, multi-bitrate streaming, and streaming video.
  2. It supports playback of FLV and F4v files. The VideoPlayer control contains a full-featured UI for controlling video playback..

Default characteristics:

Characteristic Description
Default size 263 pixels X 184 pixels
Minimum size 0
Maximum size 10000 pixels X 10000 pixels high
Default skin class spark.skins.spark.VideoPlayerSkin

VScrollBar

Component Type : spark.components

important points :

1. we can use the VScrollBar control as a stand-alone control, we usually combine it as part of another group of components to provide scrolling functionality.

Default characteristics:

Characteristic Description
Default size 15 pixels X 85 pixels
Minimum size 15 pixels X 15 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin classes spark.skins.spark.VScrollBarSkin

spark.skins.spark.VScrollBarThumbSkin

spark.skins.spark.VScrollBarTrackSkin

VSlider

Component Type : spark.components

important points :

1. The slider can allow a continuous range of values between its minimum and maximum values

Default characteristics:

Characteristic Description
Default size 11 pixels X 100 pixels
Minimum size 11 pixels X 11 pixels
Maximum size 10000 pixels X 10000 pixels high
Default skin classes spark.skins.spark.VSliderSkin

spark.skins.spark.VSliderThumbSkin

spark.skins.spark.VSliderTrackSkin

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

Flash Builder 4- Controls-Part 1

December 22nd, 2010 by aabhaanjan

flex_cert3

AdvancedDataGrid

Component Type : mx. controls

Important point :

  1. Difference with DataGrid : added data visualization features
  2. Difference with List : it can show more than one column of data, making it suited for showing objects with multiple properties.

3. The AdvancedDataGrid control features:

  • Columns of different widths or identical fixed widths.
  • Columns that the user can resize at run time.
  • Columns that the user can reorder at run time.
  • Optional customizable column headers.
  • Ability to use a custom item renderer for any column to display data other than text.
  • Support for sorting the data by clicking on a column.
  1. The AdvancedDataGrid control is intended for viewing data, and not as a layout tool like an HTML table.
  2. The mx.containers package provides those layout tools.

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

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var myDP:ArrayCollection = new ArrayCollection([ {Name:“cvc”, Age:26}, ]);

]]>

</fx:Script>

<mx:Panel title=”AdvancedDataGrid Control Example” height=”75%” width=”75%” layout=”horizontal” paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″>

<mx:AdvancedDataGridfont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>myADG”  width=”100%” height=”100%”  initialize=”gc.refresh();”>

<mx:dataProvider>

<mx:GroupingCollection2 id=”gc” source=”{ myDP }”>

<mx:Grouping>

<mx:GroupingFieldfont-size:10.0pt;font-family:”Courier New”;mso-fareast-font-family:”Times New Roman”; color:#990000;mso-font-kerning:0pt;mso-fareast-language:EN-US;mso-bidi-language: AR-SA”>Name”/>

</mx:Grouping>

</mx:GroupingCollection2>

</mx:dataProvider>

<mx:columns>

<mx:AdvancedDataGridColumn dataField=”Name”/>

<mx:AdvancedDataGridColumn dataField=”Age”/>

</mx:columns>

</mx:AdvancedDataGrid>

</mx:Panel>

</s:Application>

[/xml]

Button

Component Type : spark. components

Important point :

Default characteristics:

Characteristic Description
Default size Wide enough to display the text label of the control
Minimum size 21 pixels X 21 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin class spark.skins.spark.ButtonSkin

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

<fx:Script>

<![CDATA[

import flash.events.Event;

private function printMessage(evt:Event):void {

message.text += evt.target.label + ” pressed” + “\n”;

}

]]>

</fx:Script>

<s:Panel title=”Button”  width=”75%” height=”229″  horizontalCenter=”0″ verticalCenter=”-118″>

<s:HGroup left=”10″ right=”10″ top=”10″ bottom=”264″>

<s:VGroup height=”116″>

<s:Label width=”100%” color=”blue”  text=”Select  Button “/>

<mx:Buttonfont-size:10.0pt;font-family:”Courier New”;

mso-fareast-font-family:”Times New Roman”;

color:#990000;

mso-font-kerning:0pt;

mso-fareast-language:EN-US;mso-bidi-language: AR-SA”>iconButton” icon=”@Embed(‘assets/logo.gif’)” label=”Button with Icon”  paddingLeft=”12″ paddingRight=”18″ labelPlacement=”right” color=”#993300″ click=”printMessage(event);”/>

<mx:Button label=”Customized Button” color=”#993300″ toggle=”true” selected=”true”  textAlign=”left” fontStyle=”italic” fontSize=”13″ width=”{iconButton.width}”

click=”printMessage(event);”/>

<mx:Button label=”Default Button” click=”printMessage(event);”/>

</s:VGroup>

<s:TextAreafont-size:10.0pt;font-family:”Courier New”;mso-fareast-font-family:”Times New Roman”; color:#990000;mso-font-kerning:0pt;mso-fareast-language:EN-US;mso-bidi-language: AR-SA”>message” text=”” editable=”false” height=”126″ width=”173″

color=”#0000FF”/>

</s:HGroup>

</s:Panel>

</s:Application>

[/xml]

CheckBox

Component Type : spark. components

Default characteristics:

Characteristic Description
Default size Wide enough to display the text label of the control
Minimum size 18 pixels X 18 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin class spark.skins.spark.CheckBoxSkin

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

<fx:Script>

<![CDATA[

private function modifyCart():void {

cartItems.text = “”;

if(item1CB.selected) {

cartItems.text += “item1” + “\n”;

}

if(item2CB.selected) {

cartItems.text += “item2” + “\n”;

}

if(item3CB.selected) {

cartItems.text +=“item3” + “\n”;

}

}

private function sendMessage():void {

}

]]>

</fx:Script>

<s:Panel title=”CheckBox”

width=”371″ height=”202″

horizontalCenter=”0″ verticalCenter=”-131″>

<s:HGroup left=”10″ right=”195″ top=”10″ bottom=”62″>

<s:VGroup>

<mx:CheckBoxfont-size:10.0pt;font-family:”Courier New”;mso-fareast-font-family:”Times New Roman”; color:#990000;background:silver;mso-highlight:silver;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>item1CB” label=”item1″ click=”modifyCart();”/>

<mx:CheckBoxfont-size:10.0pt;font-family:”Courier New”;mso-fareast-font-family:”Times New Roman”; color:#990000;mso-font-kerning:0pt;mso-fareast-language:EN-US;mso-bidi-language: AR-SA”>item2CB” label=”item2″ click=”modifyCart();”/>

<mx:CheckBoxfont-size:10.0pt;font-family:”Courier New”;mso-fareast-font-family:”Times New Roman”; color:#990000;mso-font-kerning:0pt;mso-fareast-language:EN-US;mso-bidi-language: AR-SA”>item3CB” label=”item3″ click=”modifyCart();”/>

</s:VGroup>

<s:VGroup>

<s:Label text=”Items “/>

<s:TextAreafont-size:10.0pt;font-family:”Courier New”;mso-fareast-font-family:”Times New Roman”; color:#990000;mso-font-kerning:0pt;mso-fareast-language:EN-US;mso-bidi-language: AR-SA”>cartItems” width=”227″ height=”50″ verticalScrollPolicy=”off”/>

</s:VGroup>

</s:HGroup>

</s:Panel>

</s:Application>

[/xml]

ColorPicker

Component Type : mx.controls.

Default characteristics:

Characteristic Description
Default size ColorPicker: 22 by 22 pixels Swatch panel: Sized to fit the ColorPicker control width
Minimum size 0 pixels by 0 pixels
Maximum size Undefined

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

<s:Panel title=”ColorPicker”

width=”374″ height=”338″

horizontalCenter=”0″ verticalCenter=”-63″>

<s:VGroup left=”10″ right=”171″ top=”10″ bottom=”173″>

<s:Label width=”100%” color=”blue”

text=”Select the background color “/>

<mx:ColorPickerfont-size:10.0pt;font-family:”Courier New”;mso-fareast-font-family:”Times New Roman”; color:#990000;mso-font-kerning:0pt;mso-fareast-language:EN-US;mso-bidi-language: AR-SA”>cp” showTextField=”true” selectedColor=”0xFFFFFF”/>

<mx:VBox width=”320″ height=”180″ backgroundColor=”{cp.selectedColor}” borderStyle=”solid”/>

<s:Label color=”blue” text=”selectedColor: 0x{cp.selectedColor.toString(16)}”/>

</s:VGroup>

</s:Panel>

</s:Application>

[/xml]

ComboBox

Component Type : spark.components

Important points :

    1. The ComboBox control is a child class of the DropDownListBase control.
    2. Difference with DropDownList : the ComboBox control is implemented by using the TextInput control, instead of the Label control. So it is not predefined.
    3. The ComboBox control lets the user either select a predefined item, or enter a new item into the prompt area.
    4. The ComboBox control also searches the item list as the user enters characters into the prompt area.
    5. The Spark list-based controls (the Spark ListBase class and its subclasses such as ButtonBar, ComboBox, DropDownList, List, and TabBar) do not support the
    6. BasicLayout class as the value of the layout property.
    7. Do not use BasicLayout with the Spark list-based controls.

Note: Default characteristics:

Characteristic Description
Default size 146 pixels X 23 pixels
Minimum size 20 pixels X 23 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin class spark.skins.spark.ComboBoxSkin

spark.skins.spark.ComboBoxTextInputSkin

Example :

[xml]

<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/halo” width=”752″ height=”340″>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

public var complexDP:ArrayCollection = new ArrayCollection(

[    {Name:“Dav”, category:“Male”},

{Name:“Maria”, category:“Female”},

]

);

private function myLabelToItemFunction(input:String):*

{

return {Name:input, category:“—“};

}

]]>

</fx:Script>

<s:Panel title=”ComboBox” width=”592″ height=”124″>

<s:layout>

<s:VerticalLayout paddingTop=”10″ paddingLeft=”10″/>

</s:layout>

<s:Label text=”Index : {cb.selectedIndex}

Name : {cb.selectedItem.Name}

Type : {cb.selectedItem.category}”/>

<s:ComboBox

id=”cb”

dataProvider=”{complexDP}”

width=”150″

labelToItemFunction=”{myLabelToItemFunction}”

selectedIndex=”0″

labelField=”ingredient”/>

</s:Panel>

</s:Application>

[/xml]

DataGrid

Component Type : mx.controls

Important points :

  1. The DataGrid control is like a List except that it can show more than one column of data.
  2. Columns of different widths or identical fixed widths
  3. Columns that the user can resize at runtime
  4. Columns that the user can reorder at runtime
  5. Optional customizable column headers
  6. Ability to use a custom item renderer for any column to display data other than text
  7. Support for sorting the data by clicking on a column
  8. The DataGrid control is intended for viewing data, and not as a layout tool like an HTML table.
  9. The mx.containers package provides those layout tools.

Default characteristics:

Characteristic Description
Default size If the columns are empty, the default width is 300 pixels. If the columns contain information but define no explicit widths, the default width is 100 pixels per column. The DataGrid width is sized to fit the width of all columns, if possible. The default number of displayed rows, including the header is 7, and each row, by default, is 20 pixels high.
Minimum size 0 pixels.
Maximum size 5000 X 5000.

Default MXML property: dataProvider

Example :

[xml]

<?xml version=”1.0″?>

<!– dpcontrols/DataGridSimple.mxml –>

<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:DataGrid>

<mx:ArrayList>

<fx:Object>

<fx:Book>FL1 </fx:Book>

<fx:Price>11.99 </fx:Price>

</fx:Object>

<fx:Object>

<fx:Book>FB2</fx:Book>

<fx:Price>11.99</fx:Price>

</fx:Object>

</mx:ArrayList>

</mx:DataGrid>

</s:Application>

[/xml]

DateChooser

Component Type : mx.controls

Important points :

1. The DateChooser control displays the name of a month, the year, and a grid of the days of the month, with columns labeled for the day of the week.

Default characteristics:

Characteristic Description
Default size A size large enough to hold the calendar, and wide enough to display the day names
Minimum size 0 pixels
Maximum size No limit

Example :

[xml]

<?xml version=”1.0″?>

<!– controls\date\DateChooserEvent.mxml –>

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

<fx:Script>

<![CDATA[

import mx.events.CalendarLayoutChangeEvent;

private function useDate(eventObj:CalendarLayoutChangeEvent):void {

// Make sure selectedDate is not null.

if (eventObj.currentTarget.selectedDate == null) {

return

}

//Access the Date object from the event object.

day.text=eventObj.currentTarget.selectedDate.getDay();

}

]]>

</fx:Script>

<mx:DateChooserfont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>date1″ change=”useDate(event)”/>

<mx:Form x=”200″>

<mx:FormItem label=”Day of week”>

<mx:TextInputfont-size:10.0pt;font-family:”Courier New”;mso-fareast-font-family:”Times New Roman”; color:#990000;mso-font-kerning:0pt;mso-fareast-language:EN-US;mso-bidi-language: AR-SA”>day” width=”100″/>

</mx:FormItem>

</mx:Form>

</s:Application>

[/xml]

DateField

Component Type : mx.controls

Important points :

  1. The DateField control is a text field that shows the date with a calendar icon on its right side.
  2. The user can also type the date in the text field if the editable property of the DateField control is set to true.

Default characteristics :

Characteristic Description
Default size A size large enough to hold the calendar, and wide enough to display the day names
Minimum size 0 pixels
Maximum size No limit

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

<!– Use tags.–>

<mx:DateField>

<mx:disabledDays>

<fx:Number>0</fx:Number>

<fx:Number>6</fx:Number>

</mx:disabledDays>

</mx:DateField>

<!– Use tag attributes.–>

<mx:DateField disabledDays=”[0,6]”/>

</s:Application>

[/xml]

DropDownList

Component Type : spark.components

Important points :

  1. If the requireSelection property is false, clicking on a data item while pressing the Control key deselects the item and closes the drop-down list.
  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.
  3. Do not use BasicLayout with the Spark list-based controls.

Default characteristics:

Characteristic Description
Default size 112 pixels X 21 pixels
Minimum size 112 pixels X 21 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin class spark.skins.spark.DropDownListSkin

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:DropDownList width=”140″>

<mx:ArrayCollection>

<fx:String>item1</fx:String>

<fx:String>item2</fx:String>

</mx:ArrayCollection>

</s:DropDownList>

</s:Application>

[/xml]

HScrollBar

Component Type : spark.components

Important points :

1 The HScrollBar (horizontal scrollbar) control lets you control the portion of data that is displayed when there is too much data to fit horizontally in a display area.

2. you can combine it as part of another group of components to provide scrolling functionality.

Default characteristics:

Characteristic Description
Default size 85 pixels X 15 pixels
Minimum size 35 pixels X 35 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin classes spark.skins.spark.HScrollBarSkin

spark.skins.spark.HScrollBarThumbSkin

spark.skins.spark.HScrollBarTrackSkin

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

<fx:Script>

<![CDATA[

import mx.events.ScrollEvent;

// Event handler function to display the scroll location.

private function myScroll():void {

}

]]>

</fx:Script>

<s:VGroup>

<s:VScrollBarfont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>bar”

height=”100%”

minimum=”0″

maximum=”{this.width – 30}”

stepSize=”50″

pageSize=”100″

repeatDelay=”1000″

repeatInterval=”500″

change=”myScroll();”/>

</s:VGroup>

</s:Application>

[/xml]

HSlider

Component Type : spark.components

Important points :

1. The HSlider control has a horizontal direction. The slider track stretches from left to right.

Default characteristics:

Characteristic Description
Default size 100 pixels X 11 pixels
Minimum size 100 pixels X 100 pixels
Maximum size 10000 pixels X 10000 pixels high
Default skin classes spark.skins.spark.HSliderSkin

spark.skins.spark.HSliderThumbSkin

spark.skins.spark.HSliderTrackSkin

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

<s:Group>

<s:layout>

<s:HorizontalLayout paddingTop=”10″

paddingLeft=”10″/>

</s:layout>

<s:HSliderfont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>horizontalBar”

snapInterval=”.25″/>

</s:Group>

</s:Application>

[/xml]

Image

Component Type : mx.controls

Important points :

  1. The Image control lets you import JPEG, PNG, GIF, and SWF files at runtime.
  2. You can also embed any of these files and SVG files at compile time by using @Embed(source=’filename’).
  3. Flex also includes the SWFLoader control for loading Flex applications.
  4. The Image control is also designed to be used in custom item renderers and item editors.
  5. Embedded images load immediately, because they are already part of the Flex SWF file.

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:Imagefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>loader” source=”@Embed(source=’logo.jpg’)”/>

</s:Application>

[/xml]

Label

Component Type : spark.components.

Important points :

  1. Label is a low-level UIComponent that can render one or more lines of uniformly-formatted text.
  2. The text to be displayed is determined by the text property inherited from TextBase.
  3. Label uses of the Flash Text Engine (FTE) in Flash Player to provide high-quality international typography.
  4. Differences  with  mx.controls.Label
  • Spark Label uses FTE, the player’s new text engine, while MX Label uses the TextField class.
  • Spark Label offers better typography, and better support for international languages, than MX Label.
  • Spark Label can display multiple lines, which MX Label cannot.
  • MX Label can display a limited subset of HTML, while Spark Label can only display text with uniform formatting.
  • MX Label can be made selectable, while Spark Label cannot.

Default characteristics:

Characteristic Description
Default size 0 pixels wide by 12 pixels high if it contains no text, and large enough ti display the text if it does
Minimum size 0 pixels
Maximum size 10000 pixels X 10000 pixels

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

<s:Panel title=”Label Example”

width=”290″ height=”195″

horizontalCenter=”0″ verticalCenter=”-135″>

<s:Group left=”10″ right=”313″ top=”10″ bottom=”282″>

<s:Label x=”0″ y=”0″ height=”75″ width=”75″>

<s:text>This is a Label control.</s:text>

</s:Label>

</s:Group>

</s:Panel>

</s:Application>

[/xml]

LinkButton

Component Type : mx.controls

Important points :

1.  you must specify a click event handler, as you do with a Button control.

Default characteristics:

Characteristic Description
Default size Width and height large enough for the text
Minimum size 0 pixels
Maximum size Undefined

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:HBox>

<mx:LinkButton label=”link1″/>

</mx:HBox>

</s:Application>

[/xml]

List

Component Type : spark.components

Important points :

  1. The List control displays a vertical list of items.
  2. The user can select one or more items from the list, depending on the value of the allowMultipleSelection property.

Default characteristics:

Characteristic Description
Default size 112 pixels X 112 pixels
Minimum size 112 pixels X 112 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin class spark.skins.spark.BorderContainerSkin

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

</s:layout>

<s:List>

<mx:ArrayCollection>

<fx:String>a1</fx:String>

<fx:String>a2</fx:String>

<fx:String>a3</fx:String>

<fx:String>a4</fx:String>

</mx:ArrayCollection>

</s:List>

</s:Application>

[/xml]

NumericStepper

Component Type : spark.components

Important points :

  1. The NumericStepper control lets you select a number from an ordered set.
  2. Difference with Spinner component : adds a TextInput control so that you can directly edit the value of the component, rather than modifying it by using the control’s arrow buttons.
  3. The Up Arrow and Down Arrow keys and the mouse wheel also cycle through the values. An input value is committed when the user presses the Enter key, removes focus from the component, or steps the NumericStepper by pressing an arrow button or by calling the changeValueByStep() method.

Default characteristics:

Characteristic Description
Default size 53 pixels X 23 pixels
Minimum size 40 pixels X 40 pixels
Maximum size 10000 pixels X 10000 pixels
Default skin classes spark.skins.spark.NumericStepperSkin

spark.skins.spark.NumericStepperTextInputSkin

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

<s:NumericStepperfont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;background:silver; mso-highlight:silver;mso-font-kerning:0pt;mso-fareast-language:EN-US; mso-bidi-language:AR-SA”>ab”

value=”6″

stepSize=”2″

maximum=”100″/>

</s:Application>

[/xml]

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