Components in Flex4 is the simple extension of the components of Flex3.
Components in Flex4 is the simple extension of the components of Flex3. In this section, you will learns different types of spark components to be used in Flex4. Here is the list of spark components
Button in Flex4
The rectangular button is usually used by the Button component in Flex 4 which looks like to be suppressed.
Button in Flex4
The rectangular button is usually used by the Button component in Flex 4 which looks like to be suppressed.
ButtonBar in Flex4
The ButtonBar Control is comprises from the components of both the MX and the Spark and defines a horizontal group of logically allied buttons with a familiar look and navigation.
Label in Flex4
In Flex4 Label is a lightweight and low level UI-component that is known as Spark Component in FLex4.
CheckBox in Flex4
In Flex 4 the CheckBox Control is comprises from the components of both the MX and the Spark. We can use either MX CheckBox or Spark CheckBox both are same thing.
ComboBox in Flex4
In Flex4 Combobox is called a spark Combobox control. DropDownListBase control is the base class of the combobox control.
RadioButton in Flex4
In Flex4 RadioButton is a spark component. You can use two or more RadioButton components with in a RadioButtonGroup and select only one RadioButton at one time and if one stands in selected mode then all will be in deselected state because it is mutually exclusive with in a group
TextInput in Flex4
TextInput control is a Text entry control that allows the user to enter and edit the uniformatted text in a single line
Visual Component in Flex4
Flex 4 provide component based development model which is use to develop application and it is used to generate application user interface
Set the size of visual component in Flex4
Flex 4 provide mechanism to set Size of the visual components. There are two different ways to set Size for visual components.
Set the size of visual components using action script in Flex4
In this tutorial you can see how to set Size for a visual component in action script code in Flex 4
Event handler for Visual Component in Flex 4
Flex are provide event driven application. When a programmer interact with the application interface and after that something change occur in the appearance of the component life cycle or change in the Interface.
Spark Container in Flex 4
The container provides content area that contains its child component. The size of the content area is set by the container.
Spark Application Container in Flex4
Spark container is define in the spark.components package. The application container is the first container of the spark components. Basically it is layout container. you can start adding the contents without using another container or adding another containers in your application.
Application Object in Flex4
In Flex development, your application have
. In most cases your application have one application object if you do not use SWF loader in your application.
Spark BorderContainer in Flex4
It is a spark container in Flex 4. If user want to add a border for a component or want to change the background of the content area then Flex 4 provide a container for this requirement.
Set background image for Spark BorderContainer in flex 4
In this example you can see how to set background image for BorderContainer container in Flex 4. The BorderContainer container give property to set image as background in the BorderContainer content area.
Spark BorderContainer Properties in Flex4
BorderContainer container define two properties, one is backgroundFill and other is borderStroke property. The backgroundFill property is IFill type. If user define this property then container dismiss the style properties like backgroundAlpha, backgroundColor, backgroundImage etc.
Spark DataGroup Container in Flex4
DataGroup container is Spark container in Flex 4 hold components that implements IVisualElement interface and subclasses of DisplayObject.
RichText in Flex4
In Flex4 RichText Control is a Spark Control and it is a middleweight Component. The text shown in richly-formatted text, with multiple character and paragraph formats.
RicheditableText in Flex4
In Flex4 The RichEditableText control is just like a RichText control in which the text display in richly-formatted text, with multiple character and paragraph formats
DropDownList in Flex4
The DropDownList control contains a drop-down list. You can select only one item at a time. Its functionality is very similar to that of the SELECT form element in HTML.
Panel Container in Flex4
A Panel container can contain many components. It include a title bar, a title, a border, and a content area for its children components.
Group Container in Flex4
The Spark Group containers take any components as a child which implement the IVisualElement interface. When you want to manage visual children component (both visual components and graphical components) you can use Group container.
TextArea in Flex4
The TextArea control is a component of both the MX and Spark component sets and it is recommended to developers to use Spark Components while developing any program in Flex4.
WindowedApplication Container in Flex4
The WindowedApplication container is an application container which is use to create Flex applications for AIR. The WindowedApplication container is used in desktop and window based applications.
List Control in Flex4
Flex 4 List control is also called a Spark List control which displays a list of data items. The user can select one or more item from the list at a time by using the allowmultipleselection property.
Scroller control in Flex4
The Scroller control is the Spark component. It have scrollbars and a viewport. A viewport displays a rectangular area for displaying the component. The tag of scroller is ...
TabBar in Flex4
The Spark TabBar control defines a horizontal row of related buttons. This Control uses a itemClickevent event which is used to select a tab from TAbBar.
Spinner in Flex4
Flex4 introduced a new a Spinner control which was not available in MX. In Flex4 Spinner control is called a Spark component.
Slider in Flex4
Flex4 Slider control is also called a Spark Slider control. You can select a value by moving a slider thumb between two end points of the Slider track. There are two types of Slider control.
TitleWindow in Flex4
Spark TitleWindow is a layout container that is created by used pop-up window. The TitleWindow container have a content area for own Childs, border, title bar etc. It is also have a close button that's working to close this TitleWindow.
Window Container in Flex4
This container are use window applications in flex 4. Spark Window container is provide a way if user want to create own window.
VScrollBar in Flex4
The VScrollBar controls is used both in the MX and Spark's component. The VScrollBar control can work as a stand-alone controls, it works combinedly with other compentents as a custom component to provide scrolling functionality.
HScrollBar in Flex4
The HScrollBar controls is used both in the MX and Spark's component. The HScrollBar control can work as a stand-alone controls, it works combinedly with other compentents as a custom component to provide scrolling functionality.
NumericStepper in Flex4
The NumericStepper control is used both in MX and Spark's component. It uses the number of an ordered list. It has the single-line input text field and a pair of arrow for increase or decrease the valid values.
VideoPlayer in Flex4
The VideoPlayer control is used for playing downloaded or streaming video. The VideoPlayer control supports multibit rate streaming and live video.It contains a scrub bar.
SkinnableContainer in Flex4
The SkinnableContainer container is a Flex container that hold components as children. It contain only those components that implement IVisualElement interface. It's contain both visual and graphical components.
SkinnableDataContainer in Flex4
SkinnableDataContainer Container is a Flex4 container hold and lays out data items and supports virtualization.
NavigatorcontentContainer in Flex4
The NavigatorContent Container is a Flex4 container that's used to switch between multiple children which are other containers.
ColorPicker in Flex4
The ColorPicker control is a MX component not a Spark component. When you can choose a color from it the swatch panel expands upward the application and after the selection of a color the swatch panel will be closed.
ViewStack in Flex4
The ViewStack container is called Spark ViewStack container. It is made up of a collection of child containers.
Accordion Navigator Container in Flex4
The Accordion Navigator container is used for Form navigation. You can make many Forms in a single screen and navigate from one form to another form very easily by clicking on navigation button.
LinkButton in Flex4
The LinkButton is a MX component. It has no Spark component. The LinkButton in Flex is much like the hyperlink option of HTML.
DateChooser in Flex4
The DateChooser control is a MX component. It has no Spark component. The DateChooser control contains the year, a month and a grid of the day of the month.
DateField control in Flex4
The DateField control is a MX component. It has no Spark component.
It has a text field control and a calendar icon on its right side.
Grid Layout Container in Flex4
The Grid Layout Container is a MX container. There is no Spark equivalent.
It's like an HTML Table. You can arrange children(Component) in a row and column format.
Tile Layout Container in Flex4
The Tile Layout Container is a MX container. You can arrange the components in horizontal rows and vertical columns.
Form Layout Container in Flex4
The Form Layout container is a MX container. There is no Spark equivalent.
Flex uses the Form Layout container for making a Form.
Tree Control in Flex4
The Tree control is used for a hierarchical data which is expandable in tree format. It has a leaf or branch node of the item.
VideoDisplay in Flex4
The VideoDisplay control is used in both the MX and Spark components. You can use the MX VideoDisplay control for live streaming video.
PopUpAnchor Control in Flex4
The PopUpAnchor control is a Spark component. This new component added in Flex4. The PopUpAnchor control is used to a pop-up component in a layout.
HRule Control in Flex4
The HRule control is a MX component. It has no Spark component. The HRule is used to create a single horizontal line.
VRule Control in Flex4
The VRule control is a MX component. It has no Spark component. The VRule is used to create a single vertical line.
PopUpButton Control in Flex4
The PopUpButton control is a MX component. It has no Spark component.
It contains a two horizontal button: main button and a small button or pop-up button.
SWFLoader Control in Flex4
The SWFLoader control is a MX component. It has no Spark component. The SWFLoader control loads one application into another application as a swf file.
Image Control in Flex4
The Image Control is a MX component. It has no Spark component. Flex Supports different types of file format like JPEG, GIF, SVG, PNG and SWF file. You can import these files in your application using Image control.
LinkBar Control in Flex4
The LinkBar control is a MX component. It has no Spark component. The LinkBar control sets to Link Buttons in a horizontal and vertical layout.
ToggleButtonBar Control in Flex4
The ButtonBar control and the ToggleButtonBar control both are same. The ToggleButtonBar control is a MX component.
Alert Control in Flex4
The Alert control is a MX component. It has no Spark component. The Alert control contains a message, icon, title, and buttons.
Menu Control in Flex4
The Menu contol is a pop-up control. It containes a submenu. You can select a indivisual item from menu control. You use only Actionscript for create a pop-up Menu control.
MenuBar Control in Flex4
A MenuBar control displays a horizontal bar of menu items. The menu item has a pop-up sub menu(optional). It is a static control. It does not work as a pop-up menu control.
FlexNativeMenu Control in Flex4
The FlexNativeMenu is a MX component. It's provide a data for menu control.
It has no visual representation.
PopUpMenuButton Control in Flex4
The PopUpMenuButton control is a MX component. It is a pop-up Button control. It contains two buttons. First one is small button contains a icon and other is main button.
CreditCardValidator in Flex4
The CreditCardValidator class is used for validate a credit card number. It checks the length and correct prefix of the credit card number and check the number is currently active or not.
CurrencyValidator in Flex4
The CurrencyValidator class validates the currency format. You can set the precision property in it.
DateValidator in Flex4
The DateValidator class validates the string and date format. You can enter the single or two digit for month and day.
EmailValidator in Flex4
The EmailValidator class validates the string, @ sign and a period character(.) in the domain.
NumberValidator in Flex4
The NumberValidator class validates a number. You can specify the minimum and maximum range of value by using the minValue and maxValue property.
RegExpValidator in Flex4
The RegExpValidator class uses a regular expression to validate a field. You can define a regular expression to the validator using expression property.
SocialSecurityValidator in Flex4
The SocialSecurityValidator class is used for validate a string Which has a valid United States Social Security Number or not.
StringValidator in Flex4
The StringValidator class validates a string Which is in a specified range or not.
ZipCodeValidator in Flex4
The ZipCodeValidator class validates the correct length of the numeric value.
Validator in Flex4
The Validator class validates the text field value. If the text is blank it will give an error message.
PhoneNumberValidator in Flex4
The PhoneNumberValidator class is used for a valid phone number. A valid phone number has a 10 digits.
Validators with DataModel in Flex4
In the following example you can see how we can use validators with DataModel.
VBox Container in Flex4
The VBox container is a MX component. There is no Spark Component. The VBox container is used for vertical layout in which the children components are arrange vertically.
HBox Container in Flex4
The HBox container is a MX component. There is no Spark Component. The HBox container is used for horizontal layout in which the children components are arranged in horizontal manner.
Box Container in Flex4
The Box container is a MX component. There is no Spark Component. The Box container is used for both horizontal and vertical layout in which the children components are arrange in horizontal and vertical manner respectively.
HDivideBox Container in Flex4
The HDividedBox container is a MX component. There is no Spark Component.
The HDividedBox container is used for horizontal layout in which the children components are arrange in horizontal manner.
VDividedBox Container in Flex4
The VDividedBox container is a MX component. There is no Spark Component.
The VDividedBox container is used for vertical layout in which the children components are arrange in vertical manner.
DividedBox Container in Flex4
The DividedBox container is a MX component. There is no Spark Component.
The DividedBox container is used for both horizontal and vertical layout in which the children components are arrange in horizontal and vertical manner respectively.
DataGrid Control in Flex4
The DataGrid control is a MX component. There is no spark component.
HorizontalList Control in Flex4
The HorizontalList control is a MX component. There is no spark component.
Canvas Layout Container in Flex4
The Canvas layout Container is used for define a rectangular region in which the user can place child component or controls.
TileList Control in Flex4
The TileList control displays a component in tile form vertically. The item will be displayed in vertical columns or horizontal rows.
ProgressBar Control in Flex4
The ProgressBar Control is a MX component. It has no Spark Component.
Data Binding With fx:Model tag in Flex4
The tag represent a data in XML format. It is a MXML based tag.
Data Binding with XML Data Model in Flex4
The tag contains a data in tree format. It is just like a tag.
Returning data from an MX item editor in Flex4
The ItemEditor control is a MX component. It has no spark component. The ItemEditor control is used for return a single value to the control.
CurrencyFormatter in Flex4
The CurrencyFormatter class formats a number in a currency value.
DateFormatter in Flex4
The DateFormatter class formats a date in month, day, year format.
NumberFormatter in Flex4
The NumberFormatter class formats the decimal rounding and precision, thousand separator and negative sign.
PhoneFormatter in Flex4
The PhoneFormatter class changes a number into a phone number format.
SwitchSymbolFormatter in FLex4
The SwitchSymbolFormatter Class is used for creating custom Formatters.
ZipCodeFormatter in Flex4
The ZipCodeFormatter class is used for format a zip code. You can use formatString property for formatting a zip code.
Chart Series Class in Flex4
The chart series classes are used for render a data in a chart control.
Chart Axis Class in Flex4
The Axis class is used for set of values such as state name, stock ticker symbols, hours and days etc.
Create Chart using Action script in Flex4
In this section you will see how we can create a chart using action script.
we have to need some classes in action script For create a chart.
AreaChart Control in Flex4
The AreaChart Control is a MX Component. There is no Spark component.
BarChart control in Flex4
The BarChart Control is a MX Component. There is no Spark component.
BubbleChart Control in Flex4
The BubbleChart Control is a MX Component. There is no Spark component.
ColumnChart Control in Flex4
The ColumnChart Control is a MX Component. There is no Spark component.
CandleStick Control in Flex4
The CandlestickChart Control is a MX Component. There is no Spark component.
HLOCChart Control in Flex4
The HLOCChart Control is a MX Component. There is no Spark component.
LineChart Control in Flex4
The LineChart Control is a MX Component. There is no Spark component.
PieChart Control in Flex4
The PieChart Control is a MX Component. There is no Spark component.
PlotChart Control in Flex4
The PlotChart Control is a MX Component. There is no Spark component.
Multiple Data Series in Chart in Flex4
In This example you can see how we can use multiple data series in a single chart. Every chart has a its own data series.
MultipleAxes in Chart in Flex4
When we use different(Unmatched) data in single chart so it will not be possible to represent multiple series in a single chart.
Chart Style in Flex4
In this section we will discuss the chart style. You can provide the style by using CSS.
Skinning Data Item in Chart in Flex4
In this section you can see how we can provide the skin to data item in chart control.
Formatting Legend in Chart in Flex4
In this section we will discuss the formatting of the Legend in the Chart control.
Change Mouse sensitivity in Chart in Flex4
You can change the mouse sensitivity by using mouseSensitivity property. The value of mouseSensitivity property is numeric.
Chart Event in Flex4
Chart uses the chartEvent when you perform the operation click and doubleclick on the chart.
Chart Item Event in Flex4
Chart uses the ChartItemEvent when you perform the operation click on the chart Item. This event is the part of chart package.
Chart Effect in Flex4
Chart uses the standard Flex effect like Zoom and Fade.
AdvancedDataGrid Control in Flex4
The AdvancedDataGrid control is same as a DataGrid control. It has a functionality of the standard DataGrid control.
Displaying Hierarchical data in AdvancedDataGrid in Flex4
Hierarchical data is a structure of parent and child data items.
Column Group in AdvancedDataGrid
In this example you can see how we can create a column group for two or more then two columns.
Sorting by multiple columns in AdvancedDataGrid in Flex4
In this example you can see how we can sort a AdvancedDataGrid control using multiple column .
Navigation Tree icon and labels in AdvancedDataGrid
In this example you can see how we can change the label and icon of the navigation tree in AdvancedDataGrid control.
Hierarchical Data using Array Collection in AdvancedDataGrid
Hierarchical data is a structure of parent and child data. You can use the ArrayCollection for creating a hierarchical data.
Displaying hierarchical XML data in AdvancedDataGrid
Hierarchical data is a structure of parent and child items.
DataFormatter in Column in AdvancedDataGrid
In this example you can see how we can use a dataFormatter in AdvancedDataGrid.
Selecting multiple cells and rows in AdvancedDataGrid
In this example you can see how we can select the multiple rows and cells from AdvancedDataGrid control.
groupIconFunction in AdvancedDataGrid
In this example you can see how we can control the display of the leaf nodes of the navigation tree.
Separate column for the navigation tree in AdvancedDataGrid
In this example display a hierarchical data in AdvancedDataGrid but the navigation tree has a separate column.
Displaying grouped data in AdvancedDataGrid
Grouped data is used the place of hierarchical data. Basically it is a flat data in which you can arrange it in hierarchical data.
Displaying grouped data using Action script in AdvancedDataGrid
In this example you can see how we are create a Grouped Data using Action script in AdvancedDataGrid.
Item Renderer in AdvancedDataGrid
In this example you can see how we can use a item renderer property in AdvanceddataGrid control.
Style in AdvancedDataGrid
We use a inline style for AdvancedDataGrid. In this example you can see how we can use a style in AdvanceddataGrid control.
How to create a OLAP DataGrid in Flex4
The following figure shows the procedure for create a OLAPDataGrid control.
About OLAP Cube in OLAP DataGrid in Flex4
OLAP cube have many dimensions. Dimensions of an OLAP cube represent the field of the flat data. for example:
About OLAP Schemas in OLAP DataGrid in Flex4
OLAP Schema is used for to convert a flat data in to an OLAP cube.
Create OLAPQuary in OLAPDataGrid control in Flex4
There are the following procedure for creating a query:
OLAPDataGrid control in Flex4
The full form of OLAP is online analytical processing. OLAPDataGrid control contains a large amount of data in many dimensions.
Differences between OLAPDataGrid and AdvancedDataGrid
There are several differences which are following.
Style in Flex4
In this section you will introduce to applying style to controls. You can change the appearance of components using style properties.
External style sheets in Flex4
In this example you can see how we can use external style sheet.
Local style sheets in Flex4
You can set the style of components in