![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
The number of toolkits and frameworks for RIA development and SaaS has been gradually increasing in recent years. With the 2004 buyout of Macromedia, Adobe Systems inherited Flex, a framework for building what we now refer to as RIAs. Adobe decided to make the Flex SDK an open source framework, while the Eclipse-based tool used for building Flex applications remained a licensable software product, which was recently re-branded from Adobe Flex Builder to Adobe Flash Builder.
With the rapid increase in cloud-based SaaS, it isn't hard to notice that the Flex framework is the most widely adopted tool for RIA development. Flex differentiates itself from other applications because the engine it runs on — the Flash Virtual Machine — was originally written for rich graphics. Richer graphics can be used to maximize what is known as user experience design, which makes Flex a lucrative tool for creating advanced UIs. As part of the Flash platform, Flex is particularly useful for generating impressively smooth data-driven graphics and advanced transitions. There is no denying that the popularity of Flex is largely based on its ability to create a better user experience.
This article takes a close look at the elements of the Flex 4 SDK that can further improve your ability to create advanced RIA UIs.
The first of three major objectives provided to the Flex 4 SDK team was "Design in Mind." As Flex SDK product manager Matthew Chotin explains, "The biggest feature of the Design in Mind theme is our new skinning and component architecture, named Spark. Building on top of the existing Halo architecture, Spark provides a much more expressive mechanism for developers and designers to work together on the appearance of their Flex applications."
Designing RIAs is easier than ever now as a result of this objective, and Adobe's attention to creating a more unified product life cycle means that the user experience can be constantly improved through the product development life cycle. Simply put, the success of SaaS scales exponentially, even with linear increases in user experience design budget spending, as demonstrated below.
Figure 1. Relationship between user experience design and ROI
The Spark library is one of the major proponents to the Design in Mind
initiative. It includes components that manage their own states
internally. You can leverage this functionality by extending
SkinnableComponent (shown in
Listing 1) for controls instead of
UIComponent, as you would when using the Halo
library. Additionally, you can use the
MXMLComponent object for extending MXML
components, the Group object for components
that just wrap an array of components, and
SkinnableContainer for — you guessed
it — container components.
Listing 1.
SkinnableContainer component declared in MXML
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer skinClass="mySkin">
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<s:Rect>
....
</s:Rect>
<s:Button ... />
<s:Button ... />
</s:SkinnableContainer>s
|
Although some may claim that this only complicates things, anyone who has worked on enterprise-level projects will be wholeheartedly grateful for this major architectural design modification because it further separates and abstracts functionality of specific types of components, allowing for further customization.
The code in Listing 2 demonstrates how the
Panel component in the Spark library does
little more than extend the SkinnableContainer
base class. It is a notable point that the
SkinnableContainer class is an extension of the
Group base class in the Spark library, which
can also be extended the same way you did with the
UiComponent in Flex 3.
Listing 2. Flex 4 SDK code for the Spark
Panel component
public class Panel extends SkinnableContainer {
// The content and layout properties are inherited from SkinnableContainer.
// Panel doesn't add much other functionality beyond what's in SkinnableContainer
[SkinPart(required="true")]
/**
* The skin part that defines the appearance of the
* title text in the container.
*/
public var titleField:TextGraphicElement;
/**
* Title or caption displayed in the title bar.
*/
public var title:String;
// This function is called when the skin part is loaded and assigned.
override protected function partAdded(partName:String, instance:*):void
{
// Assign the content to the header and footer. The main content
// assignment is done in the superclass (SkinnableContainer)
super.partAdded(partName, instance);
if (instance == titleField)
{
titleField.text = title;
}
}
}
|
Adobe Flash XML Graphics (FXG) is a declarative syntax for defining graphics in Flex applications. As Adobe's livedocs technical documentation indicates, "FXG is a XML-based language for interchanging graphics among different applications that support it."
You harness the power of FXG by using it to streamline the
application-development workflow. For example, a designer can export an
FXG document from Adobe Photoshop® CS4, Illustrator® CS4,
Fireworks® CS4, or the Flash Catalyst beta, and the exported code
can be used directly in a Flex 4 application. FXG is commonly
used in Spark skins to draw the visual elements of the
skin class. You can use FXG syntax inline or as
custom components. The code sample in Listing 3 demonstrates the addition
of FXG syntax to the Spark skin.
Listing 3. Using FXG with a Spark skin
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
height="200" width="200">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:SkinnableContainer id="myContainer" height="200" width="200" >
<s:Button label="Click Me" skinClass="skins.FXGButtonSkin"/>
</s:SkinnableContainer>
</s:Application>
|
The example shown in Listing 4 demonstrates how you might use an FXG skin as a custom component: This is the preferred method of implementation because the Flex compiler optimizes the FXG code.
Listing 4. Using an FXG skin as a custom component
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ai="http://ns.adobe.com/ai/2008"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
minWidth="21" minHeight="21">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states> |
A third way of using FXG is to load it in as you would with components.
Listing 5. Loading FXG the same way as loading components
<?xml version="1.0" encoding="utf-8"?>
<s:Graphic
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Rect id="rect1" width="200" height="200" >
<s:fill>
<s:SolidColor color="0xFFFFCC" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x660099" weight="2" />
</s:stroke>
</s:Rect>
</s:Graphic>
|
The code for the FXG component is similar to that of an MXML component.
Listing 6. Code for the FXG component
<?xml version="1.0"?>
<!-- Set title of the Panel container based on the view state.-->
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Login" title.Register="Register">
<!-- The states property defines the view states.-->
<s:states>
<s:State name="Login"/>
<s:State name="Register"/>
</s:states>
<mx:Form id="loginForm">
<mx:FormItem label="Username:">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label="Password:">
<s:TextInput/>
</mx:FormItem>
<!-- Add a TextInput control to the form for the Register view state. -->
<mx:FormItem id="confirm" label="Confirm:" includeIn="Register">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<!-- Use the LinkButton to change to the Register view state.-->
<!-- Exclude the LinkButton from the Register view state.-->
<mx:LinkButton id="registerLink"
includeIn="Login"
label="Need to Register?"
click="currentState='Register'"/>
<!-- Add a LinkButton to the form for the Register view state. -->
<mx:LinkButton label="Return to Login"
includeIn="Register"
click="currentState=''"/>
<mx:Spacer width="100%" id="spacer1"/>
<!-- Set label of the control based on the view state.-->
<s:Button id="loginButton"
label="Login" label.Register="Register" />
</mx:FormItem>
</mx:Form>
</s:Panel>
|
The important thing to understand is that FXG does for MXML what CSS did for HTML, but on a much bigger scale. Many of the limitations imposed on CSS do not exist with FXG. Although it may seem strange to compare FXG to CSS, FXG conceptually accomplishes the same exact thing as CSS: It separates the layout code from the style information.
Software that is provided as a service attempts to bridge the gap between software that runs locally and software that runs remotely (that is, "in the cloud"). Therefore, the requirements of SaaS applications invariably require development of custom components.
View states were introduced with the release of V2.0 of the Flex SDK. This addition played a significant role in the introduction of the Flex framework to enterprise-level development. The ability to develop a stateful application with multiple UIs and run it from a remote location through the browser made Flex an attractive alternative to the traditional ways of programming stateless Web interfaces.
One major problem remained, though: The application was now stateful, but navigating through states of a Flex application still often felt more like browsing through the pages of a Web site than working with applications that run from the local drive. Most importantly, a lack of clarity with regard to "proper" design patterns for communication between components that exist in separate states of an application led to complications meeting project deadlines in many cases. The result was the development of a partial stigma toward RIA in the enterprise, which often referred to it as "unproven technology."
The Flex team recognized this gap largely based on feedback from the community, which emphasizes the value of open source technology. The result is a new state engine in Flex 4 and a major advancement in the field of RIA development. This may seem like a bold statement, but components are now responsible for managing their own state, further decoupling them from the parent application.
The example in Listing 7 demonstrates how a parent at any level in the application can control the state of its child component.
Listing 7. Controlling the state of a child component
<?xml version="1.0" encoding="utf-8"?>
<s:Application backgroundColor="0xFFFFFF"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
<comps:GraphicComp id="graphic1"/>
</s:Application>
|
Listing 8 shows the code for declaring the component.
Listing 8. Declaring the component
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:MyComp="myComponents.*">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:SimpleText text="Login or Register"
fontSize="14" fontWeight="bold"/>
<MyComp:LoginComponent currentState="Login"/>
</s:Application>
|
The Spark library also includes a significant upgrade for advocates of user experience design. Considering the size of the new effects collection, Spark effects were divided into categories according to implementation and target type for better manageability, as well as future scalability. These categories include:
- Property effects
- Transform effects
- Pixel shader effects
- Filter effects
- 3-D effects
As expected, property effects modify one or more properties of a target.
This is done by declaring an Animate class for
each property that should be animated. All effects declarations must be
made inside a <fx:Declarations/>
tag, which tells the Flex compiler that you want to make declarations that
are not visible display objects but rather behaviors that may or may not
directly affect one or more visible display objects in the application.
Note that if you use the
<s:Animate/> class, you must
include an instance of the SimpleMotionPath
class within each <Animate> tag.
This category also includes the effects of type
Fade, Resize, and
AnimateColor.
The major characteristic of a transform effect that separates it from property effects is that it forces parallel effects to play nicely together, so you no longer have to find a workaround if your effects conflict with each other, causing random behavior (as was the case with Flex 3). This category causes multiple effects operating in parallel on the same or on related properties of a given display object to meld together, resulting in a more realistic "morphing" of the object. With some creativity, you can come up with unique ways to implement the effects in this category and create transitions that make for a user experience unlike any other Flex application. Listing 9 provides an example of a transform effect.
Listing 9. Example of the transform effect
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<s:Parallel id="parallelRMForward"
target="{myImage}">
<s:Rotate
angleBy="180"/>
<s:Move
xBy="100"
yBy="100"/>
</s:Parallel>
<s:Parallel id="parallelRMBack"
target="{myImage}">
<s:Rotate
angleBy="180"/>
<s:Move
xBy="-100"
yBy="-100"/>
</s:Parallel>
</fx:Declarations>
<s:Button label="Play Effect Forward"
x="10" y="10"
click="parallelRMForward.end();parallelRMForward.play();"/>
<s:Button label="Play Effect Backward"
x="150" y="10"
click="parallelRMBack.end();parallelRMBack.play();" />
<mx:Image id="myImage"
x="10" y="50"
source="@Embed(source='assets/logo.jpg')"/>
</s:Application>
|
The built-in Spark pixel shader effects, CrossFade and Wipe, use their own internal pixel shaders. This type of effect works by capturing a "before" and an "after" bitmap, then blending the two until the "after" is the only one visible. The really cool thing about pixel shader effects is that you can use Adobes Pixel Bender tool to create custom pixel shader effects and use them in your Flex application. Listing 10 demonstrates the use of the built-in Wipe effect.
Listing 10. Wipe effect
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<!-- Define two view states.-->
<s:states>
<s:State name="default"/>
<s:State name="red"/>
</s:states>
<!-- Define the transition that applies the Wipe effect
whenever the view state changes.-->
<s:transitions>
<s:Transition fromState="*" toState="*">
<s:Sequence target="{myB}">
<s:Wipe id="wipeEffect"
direction="right"
duration="1000"/>
</s:Sequence>
</s:Transition>
</s:transitions>
<s:Button id="myB" label="Wipe"
color="black" color.red="red"/>
<!-- Define two buttons to change the view state. -->
<s:Button label="Set Default State"
click="currentState='default'"/>
<s:Button label="Set Red State"
click="currentState='red'"/>
</s:Application>
|
The major differentiating characteristic of filter effects is that the
animated property is one of a Filter object,
rather than animating a property of the display object. You animate the
properties of a filter using the AnimateFilter
class. After declaring AnimateFilter, the
target display object, repeat count, duration, and the exact filter to be
operated on can be declared. The example in
Listing 11 demonstrates how to create an animated
DropShadowFilter.
Listing 11. Animated
DropShadowFilter
<fx:Declarations>
<s:DropShadowFilter id="myDSF"
color="0x0000FF"
distance="5"
angle="315"/>
<s:AnimateFilter id="myFilter"
target="{myB2}"
repeatCount="0"
duration="500"
repeatBehavior="reverse"
bitmapFilter="{new spark.filters.DropShadowFilter()}">
<s:SimpleMotionPath property="color" valueFrom="0" valueTo="0x0000FF"/>
<s:SimpleMotionPath property="distance" valueFrom="0" valueTo="10"/>
<s:SimpleMotionPath property="angle" valueFrom="270" valueTo="360"/>
</s:AnimateFilter>
</fx:Declarations>
|
Comparatively speaking, Spark 3-D effects hardly compare to what is possible with dedicated open source 3-D Adobe ActionScript libraries, such as Papervision3D, Away3D, and Sandy3D. At the same time, the native 3-D effects included are a good starting point and show that Adobe has a genuine interest in 3-D with the Flash Platform. The Spark 3-D effects include Move3D, Rotate3D, and Scale3D. Each of the 3-D effects can be implemented as shown in Listing 12, which uses the Rotate3D effect.
Listing 12. Using native 3-D effects
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Rotate3D Tester"
xmlns="http://ns.adobe.com/mxml/2009">
<layout>
<BasicLayout />
</layout>
<fx:Declarations>
<s:Rotate3D id="x_rotate3d"
target="{image}"
xFrom="0"
xTo="360"
duration="2000" />
<s:Rotate3D id="y_rotate3d"
target="{image}"
yFrom="0"
yTo="360"
duration="2000" />
<s:Rotate3D id="z_rotate3d"
target="{image}"
zFrom="0"
zTo="360"
duration="2000" />
</fx:Declarations>
<s:VGroup id="vGroup" left="10" top="10">
<s:Button id="btnX"
label="Rotate3D X-axis"
click="x_rotate3d.play();" />
<s:Button id="btnY"
label="Rotate3D Y-axis"
click="y_rotate3d.play();" />
<s:Button id="btnZ"
label="Rotate3D Z-axis"
click="z_rotate3d.play();" />
</s:VGroup>
<mx:Image id="image"
source="@Embed('assets/image.jpg')"
horizontalCenter="0"
verticalCenter="0"
width="100"
height="100" />
</s:Application>
|
Adobe Flash Player 10 brought with it a new text engine to provide further
support for enhancements that include multilingual capabilities and print.
The Flex 4 framework includes a new set of classes for text, such as
RichText and
SimpleText. The biggest improvement will come
when the integration of Adobe Labs' Text Layout Framework is complete,
which is expected some time before the framework is in full public release
and out of beta (see Resources for
more information). The Text Layout Framework is intended to give
you the ability to leverage the text engine that was built into
Flash Player 10.
One huge improvement that makes SaaS feel more like a local desktop
application is standard keyboard and mouse gestures for editing text,
including cut, copy, paste, and undo. Also included are rich typographical
controls, including kerning, ligatures, typographic case, and support for
more than 30 multilingual writing systems. Most importantly, the text engine
includes rich developer APIs to manipulate text content, layout, and
markup and create custom text components. The three main text primitives
in the new text engine are SimpleText,
RichText, and
RichEditableText.
Basic HTML markup support, inline graphics, linked containers, and embedded
hyperlinks are some of the hottest new features for text rendering in the
Flex 4 SDK. The default Spark TextInput and
TextArea components use
RichEditableText to provide the editable text
area, so these common components can now do more than ever.
Listing 13 provides a simple example of what is
possible with the RichText component.
Listing 13. Using the new features of the Spark
RichText component
<s:RichText fontSize="12">
<s:content>
<s:TextFlow color="0x222222">
<s:p>
<s:span fontWeight="bold">Hello </span>
<s:spanv World</s:span>
</s:p>
</s:TextFlow>
</s:content>
</s:RichText>
|
It should be reasonably clear now that the success of SaaS is closely related to user experience design. Moreover, now that you have walked through many of the new Flex 4 SDK features centered on enhancing the user experience, you've effectively improved your skill set by learning how to create more advanced SaaS applications. RIA and SaaS are almost one in the same, and both are identified as the new generation of human/computer interaction. Experts believe that the industry will continue in this direction, and rightfully so. With that in mind, I encourage you to continue developing your RIA development skill set.
Learn
-
Learn more about the Text Layout Framework from Adobe Labs.
-
Discover why cloud computing is important,
how to get started, and where to learn more about it in the developerWorks
Cloud computing space.
-
To listen to interesting interviews and discussions for software developers, check out developerWorks podcasts.
-
Stay current with developerWorks' Technical events and webcasts.
-
Follow developerWorks on Twitter.
-
Check out upcoming conferences, trade shows, webcasts, and other Events around the world that are of interest to IBM open source developers.
-
Visit the developerWorks Open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM's products.
-
Watch and learn about IBM and open source technologies and product functions with the no-cost developerWorks On demand demos.
Get products and technologies
-
Play around in the Flex Style Explorer sandbox.
-
Innovate your next open source development project with IBM trial software, available for download or on DVD.
- Download
IBM product evaluation versions
or explore
the online trials in the IBM SOA Sandbox and get your hands on application development tools and middleware products from
DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.
Discuss
-
Participate in developerWorks blogs and get involved in the developerWorks community.
Dan Orlando is a recognized Flash Platform architect and consultant in the enterprise. As an advocate for RIA, Dan has been published in magazines and Web sites such as PHP Architect, Flash and Flex Developer Magazine, IBM developerWorks, Amazon Web Services, and the Adobe Developer Connection. Dan is also co-author of Flex 4 in Action (Manning Press).
Table of contents
Local resources
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
