New Features in Flex 4.0

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?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

1
2
3
4
5
6
7
8

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

Comments

comments