AdvancedDataGrid
Component Type : mx. controls
Important point :
- Difference with DataGrid : added data visualization features
- 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.
- The AdvancedDataGrid control is intended for viewing data, and not as a layout tool like an HTML table.
- 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 :
-
- The ComboBox control is a child class of the DropDownListBase control.
- Difference with DropDownList : the ComboBox control is implemented by using the TextInput control, instead of the Label control. So it is not predefined.
- The ComboBox control lets the user either select a predefined item, or enter a new item into the prompt area.
- The ComboBox control also searches the item list as the user enters characters into the prompt area.
- 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.
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 :
- The DataGrid control is like a List except that it can show more than one column of data.
- Columns of different widths or identical fixed widths
- Columns that the user can resize at runtime
- Columns that the user can reorder at runtime
- 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
- The DataGrid control is intended for viewing data, and not as a layout tool like an HTML table.
- 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 :
- The DateField control is a text field that shows the date with a calendar icon on its right side.
- 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 :
- 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.
- 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 | 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 :
- The Image control lets you import JPEG, PNG, GIF, and SWF files at runtime.
- You can also embed any of these files and SVG files at compile time by using @Embed(source=’filename’).
- Flex also includes the SWFLoader control for loading Flex applications.
- The Image control is also designed to be used in custom item renderers and item editors.
- 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 :
- Label is a low-level UIComponent that can render one or more lines of uniformly-formatted text.
- The text to be displayed is determined by the text property inherited from TextBase.
- Label uses of the Flash Text Engine (FTE) in Flash Player to provide high-quality international typography.
- 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 :
- The List control displays a vertical list of items.
- 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 :
- The NumericStepper control lets you select a number from an ordered set.
- 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.
- 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: AdvancedDataGrid, Button, CheckBox, ColorPicker, ComboBox, data visualization features, DataGrid, DateChooser, DateField, Difference with DataGrid, Difference with DropDownList, Difference with List, Difference with Spinner component, DropDownList, DropDownListBase control, Flash Text Engine, HScrollBar, HSlider, Image, Label, LinkButton, List, NumericStepper, Spark list-based controls