Intro

Purpose of this article

Flex 4 “themes”

Primary “themes”:

• Design in Mind
  Changes are being made to improve the process of enhancing and customizing the appearance and user experience of RIAs developed with Flex 4. States, effects and layout are being enhanced, new components have been created and FXG has been introduced.
• Developer Productivity
  Flex is an awesome framework that expedites RIA development tremendously. Improvements are being made to increase developer productivity even more. This includes an increased speed at compile time!
• Framework Evolution
  Amazing new features are being added to Flash Player all the time, the latest version of the Player is no exception. Flex 4 will take advantage of these new capabilities and updates.

Theme 1: Design in Mind

The Flex-Team has taken the UX and UI integration requests from the community seriously and is making changes to the Flex framework to allow a new approach to designer/developer collaboration. Flash Catalyst is on the horizon and should open the RIA creation process up to more people than before. Flex 4 fosters a new approach to customizing the look and feel of RIAs providing a rich and powerful component architecture and updated skinning capabilities.

The current standing with Flex 3:
In the past there has been complaints that Flex applications look similar. The is typically because the default Halo theme has not been customized or skinned for the application. Because Flex applications run in Flash Player animated graphics can be used for the component “skins”. This advantage differentiates Flex apart from other similar technologies. Creating highly customized Flex component skins and Flex themes is usually easier said than done.  A couple of pretty interesting (if not surprising) statistics from the Adobe open source wiki:

• Only 46% of Flex RIAs are drastically skinned
• Only 22% of Flex RIAs have highly modified styles

That’s less than half. If you haven't taken measures to skin or style your Flex RIA there is a good chance it looks like somebody else's. From a marketing and branding perspective this is pretty bad. Typically speaking RIAs should carry a companies brand through the application. (Think of apps like Pizza Hut's AIR application.)

Theme 2: Developer Productivity

Using the Flex framework and Flex Builder can rapidly expedite the RIA development process. Adobe is working hard on Flex 4 to increase developer productivity. (This is great news for developers and Project Managers.) Compiler performance and data binding are also being updated to refine and speed up the application development process. Automation support for Adobe AIR is being added. ASDoc support is being introduced for MXML documents. Additional CSS selectors are being implemented to offer more styling power for developers to customize the look and feel of Flex 4 RIAs.

Theme 3: Framework Evolution

Each iteration of Flex contains an increasingly powerful and rich set of features and capabilities. In addition to the developer productivity enhancements being made to Flex 4 the Flash Player 10 capabilities will be available. Another important change is the addition of the AIR 1.5 feature set. The HTML publishing template will now use the widely used and open source SWFObject instead of the Adobe Flash Detection Kit. Video component support is also scheduled.

Architecture

Intro

One of the main areas of concentration for the next iteration of Flex is the design to development workflow.  Refinements and changes are being made in an effort to ease the RIA creation process. The result of these updates should make Flex development accessible to more people. There are new components available in Flex 4 based off the existing Flex 3 (Halo) components. (The new components are backwards compatible with Halo.) The new skinning and component architecture is called Spark. Spark contains about 20 new components and primitives that are designed to work hand in hand with Adobe Flash Catalyst. Flash Catalyst is a tool built for designers to participate in the Flex RIA creation workflow.

Goals

There are three goals that Adobe hopes to achieve with Flex 4. They are: Design Friendly, Composition and Extensibility.

Halo components vs. Spark components

The new Flex 4 Spark components are built on top of the existing Flex 3 Halo components and meant to be compatible with Halo. Flex 4 components use base classes and exclusively target Flash Player 10. The process of working with drag and drop functionality and focus management have not changed in the Flex 4 component set. Adobe hopes to ensure cross compatibility between the Spark components and the Halo components so they can be used together.

High level view

Spark components are cleanly separated into discrete layers of responsibility.  The main component class will handle defining core component logic including events, data management, subclass management and state management. The skin class will update the visual appearance of the component. The skin class is also responsible for the layout of the component. The skin class defines its visual content through the use of FXG. The concept of “States” has been modified in Flex 4 to ease the process of working with components and states together. Flex 4 components inform their skins which internal state to use typically based on user events.

Base Classes

As the Flex framework matures functionality is added and enhanced. New classes have been introduced to support the new features and power being integrated into the Flex framework.

New component base classes:

• spark.components.supportClasses.SkinnableComponent
  The SkinnableComponent class defines the base class for skinnable components. The skins used by a SkinnableComponent class are child classes of the Skin class.

• spark.components.Group
  The Group class is the base container class for visual elements. The Group container takes any components that implement the IUIComponent interface or the IGraphicElement interface as children.

• spark.components.MXMLComponent
  The base class for MXML Components in Spark.

• spark.components.supportClasses.core.Skin
  The Skin class defines the base class for all skins used by skinnable components. The SkinnableComponent class defines the base class for skinnable components.

FXG

Flex 4 introduces a new concept known as FXG. It is used to create shapes such as rectangles, ellipses and paths. Shapes in FXG can be filled and stroked with colors, gradients and bitmaps. FXG can be used with MXML. Data binding and states can be used in FXG documents. FXG is rich in capabilities and features. Check out the full FXG specification here:
http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification

Group

Flex 4 introduces the concept of a Group. Groups contain an array of content items that are managed by the Group. Layout within Groups is associated declaratively and can be modified at runtime.

Layout

Flex 4 improves the layout model greatly. The tight coupling found in Flex 3 has been refactored in Flex 4 to allow greater flexibility and control for layout. Groups now use Layout objects in Flex 4. This helps decouple the layout logic for components to add more design flexibility. Multiple layouts can be associated with components and layouts can be replaced and modified at runtime. Layout in Flex 4 addresses deficiencies of the Flex 3 Halo components including 3D, origin, scale and transformations. Flex 4 components add support for new layout types including: BasicLayout ,VeriticalLayout, HorizontalLayout and more. More information about Flex 4 layout can be found in the Layout specification.
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Layout

Lifecycle

Flex 4 components are factored into multiple classes. Each class manages different aspects of the components appearance and functionality.  This helps to define a clear separation between a components main logic code and its skin code.  Skin Parts, Skin States, data and properties are what Flex 4 components consist of. These items are used by components to connect to and communicate with skins.

Skins
Skin class must extend the spark.components.supportClasses.core.Skin class. Skin classes are referenced through the skinClass property. 

Skin classes contain a root element called: “Skin”. FXG is used to define the UI for the component inside of this Skin class.

Parts
Skin classes introduce the concept of Skin Parts. Skin Parts are typically a collection of elements that make up a complete component. These parts are enumerated using the new [SkinPart] metadata. It’s important to note that the parts are declared in the component class however the visual appearance and implementation are defined in the skin class. Skin parts are resolved and assigned to properties in the component at runtime. Skin Parts can be made required if needed.

States
State within components is internally tracked and managed by utilizing the currentState property. Skin classes declare different skin states that represent the various visual appearances often required by a component. Skin classes can define multiple states to convey various meanings correlating to user gestures. A component will instruct the skin to change to different states to modify its appearance.

Lifecycle Methods

Flex 4 components share the same methods used by the Flex 3 Halo components. These methods still perform the same function as the Flex 3 component methods.

commitProperties: sets new properties
measure: determines component size
updateDisplayList: positions and draws subcomponents

Rendering and measurement for Flex 4 components are typically handled by the skin.  Flex 4 introduces new methods for skin management.

Spark Components

There are quite a few new components that will be available in Flex 4. Because “design in mind“ is a primary focus for the next iteration of Flex each of these components support the rich and powerful Flex 4 skinning architecture. Review the source code included with this article for an overview of a couple of the new components and how they work.

Spark Application component
New to Flex 4 is the ability to draw directly into the Spark Application component. The Spark Application component also introduces the new layout capabilities in Flex 4. The default layout is now absolute instead of vertical as traditionally found in Flex 3 applications. The layout is set declaratively through a tag now as seen below. (This is different than the Flex 3 model.)

The Spark Application component supports runtime layout modifications and updates. This is a powerful new concept available to Flex 4. As you can see in the following code example layout is easily changed.

Flex4DynamicLayoutExample (source code):

<?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:layout>
		<s:VerticalLayout />

	</s:layout>
	
	<fx:Script>
		<![CDATA[
			import spark.layouts.HorizontalLayout;
			
			private function updateLayout() : void
			{
 				this.layout = new HorizontalLayout();
 			}
		]]>
	</fx:Script>
	
	<s:Button label="Update Layout" click="{updateLayout()}" />
	<s:TextArea width="350" height="85" text="Spark TextArea" />
	
</s:Application> 

Here is a basic application using a custom skin class with an FXG based fill declared within the skins MXML. (Notice the background gradient has several stops.)

Flex4ApplicationSkinExample (screen capture):

Here is the code for the sample Flex 4 application with a custom application skin. The main runnable MXML is shown first followed by the custom application skin MXML.

Flex4ApplicationSkinExample (source code):

<?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/halo" 
					skinClass="com.seantheflexguy.flex4.skins.CustomApplicationSkin">

	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	
	<s:Button label="Default Spark Button 1" />
	<s:Button label="Default Spark Button 2" />
	<s:CheckBox label="Default Spark CheckBox" />
	<s:TextArea width="350" height="85" text="Spark TextArea" />
	
</s:Application>

Notice the gradient declaration inside the custom application skin, very simple and very effective.

Flex 4 custom FxApplicationSkin example source code (custom application skin):

<?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" 
			xmlns:mx="library://ns.adobe.com/flex/halo">

    <fx:Metadata>
    	[HostComponent("spark.components.Application")]
    </fx:Metadata> 
    
    <s:states>
    	<s:State name="normal" />

    	<s:State name="disabled" />
    </s:states>
    
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0">
        <s:fill>
			<s:LinearGradient rotation="90">				
				<s:GradientEntry color="0xd0d9dc" />
				<s:GradientEntry color="0x8e9799" />
				<s:GradientEntry color="0xc1c9cc" />
				<s:GradientEntry color="0xf1f1f1" />				
				<s:GradientEntry color="0x455e83" />

			</s:LinearGradient>
		</s:fill>
    </s:Rect>
        
    <s:Group id="contentGroup" left="25" right="0" top="25" bottom="0" />

</s:Skin>

Spark Button component
The Spark Button component is a commonly used rectangular button. It looks like it can be pressed. It can have a text label, an icon, or both on its face. It utilizes the new skinning architecture methods and enhanced state syntax. The SkinPart metadata isn’t present for the Spark Button component because it contains no sub-parts.

The Spark Button component defines its look and feel in its skin class: ButtonSkin. The ButtonSkin class declares its user interface using MXML and FXG. ButtonSkin also defines four states that are used to render different visual appearances based upon different user gestures. Following the Spark component standard the Spark Button component contains the logic to manage and update the ButtonSkin class's state.

As you can see in the screen capture and in the following code example Flex 4 can be used to create some pretty good looking UI components without a great deal of time and effort.

Flex 4 custom FxButtonSkin example (screen capture):

Here is the application code for the button. Notice that the Spark Button component is referencing a button skin class through the skinClass attribute. The button skin class code follows.

Flex 4 custom FxButtonSkin example source code (main runnable application):

<?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:layout>
		<s:VerticalLayout />
	</s:layout>

	<s:Button label="Skinned Spark Button" 
		height="50"
		skinClass="com.seantheflexguy.flex4.skins.CustomFxButtonSkin"/>

</s:Application>

Flex 4 custom FxButtonSkin example source code (custom button skin):

<?xml version="1.0" encoding="utf-8"?>

<!--

	ADOBE SYSTEMS INCORPORATED
	Copyright 2008 Adobe Systems Incorporated
	All Rights Reserved.

	NOTICE: Adobe permits you to use, modify, and distribute this file
	in accordance with the terms of the license agreement accompanying it.
	
	UPDATE: Sean Moore: Updated on 05/14/09 to add a glossy button appearance.

-->

<!--- The default skin class for the Spark Button component. -->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
				 xmlns:s="library://ns.adobe.com/flex/spark" 
	  			 minWidth="21" minHeight="21"
	  			 alpha.disabled="0.5">

	<!-- host component -->
	<fx:Metadata>
	    <![CDATA[ 
		/** 
		 * @copy spark.skins.default.ApplicationSkin#hostComponent
		 */
		[HostComponent("spark.components.Button")]
	    ]]>
	</fx:Metadata>

    
    <fx:Script>
	<![CDATA[         
		/* Define the skin elements that should not be colorized. 
		   For button, the graphics are colorized but the label is not. */
		static private const exclusions:Array = ["labelElement"];
                
		/** 
		 * @copy spark.skins.SparkSkin#colorizeExclusions
		 */		
	        override public function get colorizeExclusions():Array {return exclusions;}
        ]]>        
    </fx:Script>
	
	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />

	</s:states>
	
	<!-- layer 1: shadow -->
	<s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
		<s:fill>
			<s:LinearGradient rotation="90">
                    <s:GradientEntry color="0x000000" 
                                   color.down="0xFFFFFF"
                                   alpha="0.01"
                                   alpha.down="0" />
                    <s:GradientEntry color="0x000000" 
                                   color.down="0xFFFFFF" 
                                   alpha="0.07"
                                   alpha.down="0.5" />
			</s:LinearGradient>
		</s:fill>

	</s:Rect>
	
	<!-- layer 2: fill -->
	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
		<s:fill>
			<s:LinearGradient rotation="90">
				
				<!-- begin color customization for button skin example -->
				<s:GradientEntry color="0x0083ae" />
                <s:GradientEntry color="0x005d7f" />
                <s:GradientEntry color="0x236c81" />

                <s:GradientEntry color="0x7eadbc" />
                <!-- end color customization for button skin example -->
                
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 3: fill lowlight -->
	<s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
		<s:fill>
			<s:LinearGradient rotation="90">

				<s:GradientEntry color="0x000000" alpha="0.0099" />
				<s:GradientEntry color="0x000000" alpha="0.0627" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 4: fill highlight -->
	<s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
		<s:fill>
			<s:SolidColor color="0xFFFFFF" 
					    alpha="0.33" 
					    alpha.over="0.22" 
					    alpha.down="0.12" />

		</s:fill>
	</s:Rect>
	
	<!-- layer 5: highlight stroke (all states except down) -->
	<s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
				<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
			</s:LinearGradientStroke>

		</s:stroke>
	</s:Rect>
	
	<!-- layer 6: highlight stroke (down state only) -->
	<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
		<s:fill>
			<s:SolidColor color="0x000000" alpha="0.07" />
		</s:fill>
	</s:Rect>
	<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">

		<s:fill>
			<s:SolidColor color="0x000000" alpha="0.07" />
		</s:fill>
	</s:Rect>
	<s:Rect left="2" top="1" right="2" height="1" includeIn="down">
		<s:fill>
			<s:SolidColor color="0x000000" alpha="0.25" />
		</s:fill>
	</s:Rect>

	<s:Rect left="1" top="2" right="1" height="1" includeIn="down">
		<s:fill>
			<s:SolidColor color="0x000000" alpha="0.09" />
		</s:fill>
	</s:Rect>
	
    <!-- layer 7: border - put on top of the fill so it does not disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">

                <s:GradientEntry color="0x000000" 
                               alpha="0.5625"
                               alpha.down="0.6375" />
                <s:GradientEntry color="0x000000" 
                               alpha="0.75" 
                               alpha.down="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

	<!-- layer 8: text -->
	<!--- 
		@copy spark.components.supportClasses.ButtonBase#labelElement
	-->
	<s:SimpleText id="labelElement"
			 color="#ffffff"
	         textAlign="center"
             verticalAlign="middle"
             lineBreak="toFit"
             truncation="1"
			 horizontalCenter="0" verticalCenter="1"
			 left="10" right="10" top="2" bottom="2">

	</s:SimpleText>
	
</s:SparkSkin>

There are plenty of other Spark components to explore but this should start to give you a pretty good idea of what Flex 4 skinning and FXG looks like. Tools like Fireworks and Flash Catalyst will help facilitate the creation of high expressive and customized user interfaces and components for RIAs built with Flex 4 and Flash Catalyst. This button skin class isn’t too complicated. Skin classes can be far more sophisticated than the examples seen above. Continue to explore the possibilities in Flex 4 and you’ll soon see that each component state can be a totally separate visual representation of its associated data. I'm personally very excited about Flex 4 and I'm sure there are many other developers who are eager to get started in the excited new world of Flex 4 development.

I'd like to thank Matt Chotin for his help making sure the information in this article is accurate. I'd also like to thank Rich Tretola for his help and patience during the process of writing this article. Thanks guys!!

Links

Adobe

Flex 4 Homepage
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo
ASDoc for Flex 4
http://livedocs.adobe.com/flex/gumbo/langref/
Flex Downloads
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

Flex 4: Specifications

More information is available on the Open Source website. Here are direct links to the specifications available at this point in time. It’s really fantastic that Adobe has provided the community with access to this information so early in the development process. Please keep in mind that the best place to find information about Flex 4 is in the nightly builds. The information on the Open source website is subject to change and a significant amount of the information is no longer up to date.

You can help the Flex team by helping them tackle existing bugs in the Flex bug base. This exciting program allows developers to participate in the growth and future of Flex. More information can be found here.
http://bugs.adobe.com/jira/secure/IssueNavigator.jspa?mode=hide&requestId=11085

Here are the links to the specs available on the Open Source Adobe website:

• FXG 1.0

http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification

• Gumbo Skinning (including FxComponent)

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Skinning

• MXML 2009

http://opensource.adobe.com/wiki/display/flexsdk/MXML+2009

• Enhanced States Syntax

http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax

• CSS Advanced Selectors

http://opensource.adobe.com/wiki/display/flexsdk/CSS+Advanced+Selectors

• Group

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Group+Specification

• ItemsComponent and Selector

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+ItemsComponent+and+Selector

• Layout

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Layout

• Viewport

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Viewport

• FxApplication

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+FxApplication

• FxScroller

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+FxScroller

• Text Primitives (TextBox, TextGraphic, and TextView)

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Text+Primitives

• FxTextInput

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+FxTextInput

• FxTextArea

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+FxTextArea

• FxScrollBar

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+FxScrollBar

• FxRange

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+FxRange

• FxTrackBase

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+FxTrackBase

• FxSlider

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+FxSlider

• FxSpinner

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+FxSpinner

• FxNumericStepper

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+FxNumericStepper

• ASDoc in MXML

http://opensource.adobe.com/wiki/display/flexsdk/ASDoc+in+MXML

• Two-way Data Binding

http://opensource.adobe.com/wiki/display/flexsdk/Two-way+Data+Binding

• Pixel Bender Integration

http://opensource.adobe.com/wiki/display/flexsdk/Pixel+Bender+Integration

• Arbitrary Type Interpolation

http://opensource.adobe.com/wiki/display/flexsdk/Arbitrary+Type+Interpolation

• New Effects for Components and Graphics

http://opensource.adobe.com/wiki/display/flexsdk/New+Effects+for+Components+and+Graphics

• 3D Effects Support

http://opensource.adobe.com/wiki/display/flexsdk/3D+Effects+Support

• Notes on Compiler Performance Improvements

http://opensource.adobe.com/wiki/display/flexsdk/Notes+on+Compiler+Performance+Improvements

Read more from Sean Moore.