This article explains the new features introduced in the latest version Flex 4.0. Initial version of Adobe Flex has been released in 2004. In 2008 Adobe has released the version Flex 3.0. But, the latest version of Flex has many improvements compare to its previous releases. If you are not familiar with developing applications using the Flex framework,
please read our previous article on Creating RIA with Adobe Flex framework
by Raja. That article explains more about the setting up the flex environment and writing the simple hello world example. It is recommended to read before jumping into this article. You can buy Flex Books for complete reading of the topic.
In this article, we will go through the following new features in detail:
- Spark component architecture
- Component layout
Spark component architecture
Flex 4 has introduced new skinning and component architecture called Spark. Most of the components from the previous version has been reimplemented using this architecture. In the previous version Flex 3.0, the underlying component architecture was Halo. In the Flex 4, it has been replaced by Spark. The main intention of creating Spark is to seperate the Themes, Skin, etc from its core logic.Spark component set includes a drastically redesigned component skinning architecture that combines the ease of MXML-based programming with the power of Flash Player’s visual rendering capabilities.
The following are few important points about the spark component:
- Spark component architecture is based on existing Flex classes, such as mx.core.UIComponent and mx.effects.Effect.
So we can have an application developed with the old components with the new architecture.
- Separate the appearance and the functional logic of the component.
- A set of components that can be easily customized rather than reimplementing it.for e.g. If the layout of a container
has to be changed we need to just change the layout property of the container rather than creating a custom container.
- These components are found in the spark.* package.
- Some components found in the mx package has not been reimplemeted in the new version. Those components are:
1 2 3 4 5 6 7 8
mx.controls.Alert mx.controls.OLAPDataGrid mx.containers.Accordion mx.controls.AdvancedDataGrid mx.controls.PopUpButton mx.containers.DividedBox mx.controls.ColorPicker mx.controls.PopUpMenuButton mx.containers.Form mx.controls.DataGrid mx.controls.ProgressBar mx.containers.Grid mx.controls.DateChooser mx.controls.RichTextEditor mx.containers.TabNavigator mx.controls.DateField mx.controls.Tree mx.containers.ViewStack mx.controls.Menu All chart classes in the mx.charts.* packages mx.controls.MenuBar All Flex AIR components in the mx.controls package
Let us look at our first example using the new Spark components
1 2 3 4 5 6 7 8 9 10 11 12
<?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" minWidth="955" minHeight="600"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Panel x="103" y="75" width="387" height="200" title="FirstPanel"> <s:Label x="21" y="29" text="My First Program" width="157" height="24"/> </s:Panel> </s:Application>
- fx namespace to reference top-level ActionScript elements, such as Object and Array, and for tags built in to the MXML compiler, such as <fx:Style>
- The s namespace is used to reference the spark components .s defines the below mentioned namespace library://ns.adobe.com/flex/spark
- mx namespace is used refers to the mx components.