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. 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.
also read:
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:
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
<?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.
Component Layout
Layout determines how the child components have to be sized and placed in a Parent Component. In Spark Component architecture the Layout mechanism is decoupled from the individual component. ie.we can set the layout of the component declaratively in MXML or can be modified at runtime. All the predefined layouts can be found in the package Spark.layouts.package.
Some examples of Layouts are
- BasicLayout
- HorizontalLayout
- VerticalLayout
- TileLayout
Example:Let us look at how we can modify the Layout of a Group to Vertical
<?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>
<fx:Script>
<![CDATA[
import spark.layouts.HorizontalLayout;
import spark.layouts.VerticalLayout;
var vert:Boolean=false;
function callme()
{
if(vert==true)
{
mygroup.layout=new VerticalLayout();
}
if(vert==false)
{
mygroup.layout=new HorizontalLayout();
}
}
]]>
</fx:Script>
<s:Group x="10" y="20" width="200" height="200" id="mygroup">
<s:Label x="10" y="10" text="A group whose Layout is changed to Vertical or Horizontal on clicking the Buttons"/>
<s:Button x="10" y="50" label="Vertical" click="vert=true;callme()"/>
<s:Button x="90" y="50" label="Horizontal" click="vert=false;callme()"/>
</s:Group>
</s:Application>
Output:The initial Screen.The component placed as per the x,y coordinates mentioned.
Output:On Clicking the Button with label Vertical</p>
Output:On Clicking the Button with label Horizontal
Themes
A theme defines the appearance of an application built in Flex.The default theme for all Flex 4 components is called Spark.In the earlier version the default theme was called Halo. In Flex 4, MX components also use the Spark theme by default. In case the older theme has to be used we can do it in 2 ways.
- need to use the theme compiler option to point to the Halo theme swc file or
- Set the compatibility-version compiler option to 3.0.
If you use the Halo theme, the theme is applied to all Halo components in your application.
The Spark components continue to follow the Spark theme unless specifically not overridden
Skinning
In Flex 4 every Spark Components encapsulates the functional behavior of a Component and associated with those Spark Component is a Skin which controls the Visual element of a component including layout.This gives the developer a greater control of how their components look like.Earlier MX components that used the Halo theme for their skins defined their look and feel mostly through style properties. Spark skin classes are written in MXML When creating skins, there is no need to subclass existing skin classes. Instead, copy the source of an existing skin class and create a new class.
Let us look at an example where we are changing the Skin of a Button.
a)Button1.mxml-The Skin being defined
<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5"> <!-- states --> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <!-- border and fill --> <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0"> <s:fill> <s:SolidColor color="0xff22ff" color.down="0x11ff11"/> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="3"/> </s:stroke> </s:Rect> <!-- text --> <s:Label text="Button!" color="0x131313" textAlign="center" verticalAlign="middle" horizontalCenter="0" verticalCenter="1" left="12" right="12" top="6" bottom="6" /> </s:Skin>
b)Applying the skin
<?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:Group x="115" y="55" width="200" height="115"> <s:Button skinClass="Buttonskin1" x="10" y="10"/> <s:Button label="A Normal Button" x="10" y="66"/> </s:Group> <s:Label x="194" y="23" text="A Skin Demo" width="183" height="24"/> </s:Application>
Flash XML Graphics (FXG)
Flex 4 support FXG(Flash XML Graphics) a XML syntax to define vector graphics in applications. It is an interchange format with other Adobe tools. i.e using a graphics tool, such as Adobe PhotoShop,Adobe Illustrator, or Adobe Flash Catalyst, we can design and then export as an FXG document, and then use the FXG document as the property of a skin class for a component.
Conclusion
The article was about some of the new features of Adobe Flex 4.There are plenty more new and exciting features in Flex 4 that helps in building RIA in an easy and simple manner.
JSTL Configuration Error