New Features in Flex 4.0

Introduction

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
• Themes
• Skinning
• FXG

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>

Notes:

• 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.

Comments

comments