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.
- Clicking on the secondary (right) sub-button drops down a menu that can be popluated through a dataProvider property.
- Difference with Menu and MenuBar controls : the PopUpMenuButton control supports only a single-level menu.
- 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.
- A determinate ProgressBar control is a linear representation of the progress of a task over time.
- 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 .
- RichEditableText does not have scrollbars,
- It implements the IViewport interface for programmatic scrolling .
-
- RichEditableText uses the Text Layout Framework (TLF) library.
- The Spark architecture provides three text “primitives” — Label, RichText, and RichEditableText.
-
- 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.
- RichText uses the Text Layout Framework (TLF) library
- 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 :
- A Spinner component selects a value from an ordered set.
- 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 :
- The SWFLoader control loads and displays a specified SWF file.
- 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.
- This control dispatches a FlexEvent.ENTER event when the user pressed the Enter key .
- rather than inserting a line break, because this control does not support entering multiple lines of text.
- 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.
- 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 :
- The VideoPlayer control is a skinnable video player that supports progressive download, multi-bitrate streaming, and streaming video.
- 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: AdvancedDataGrid control, and RichEditableText, Difference with Menu and MenuBar controls, Difference with RadioButtonGroup, differences with AdvancedDataGrid control, groupName property, IViewport interface, Label, low-level UIComponent, OLAPDataGrid, PopUpButton, PopUpMenuButton, ProgressBar, RadioButton, RichEditableText, RichText, scrollbars, secondary button, Spark architecture, Spinner, SWFLoader, Text Layout Framework, TextArea, TextInput, TLF, ToggleButton, Tree, UIComponent, VideoDisplay, VideoPlayer, VScrollBar, VSlider
