1 of 18

Flex Powertools: Explorers

By: Joseph Balderson

Whether you are learning Flex and looking for examples to try out, or you are an experienced developer

looking for ways to shave extra time off your development cycle, you've come to the right place. In this

article we will review my favourite Flex Explorers: Flex applications which allow you to explore

various techniques for building Flex applications.

From component explorers which show you sample code, style explorers which help you configure the

CSS to style your application, or more exotic utilities which enable you explore visual effects or data

transfer benchmarks, Flex Explorers are a developers' best kept secret. Now you don't have to spend

hours hunting for them all : this article reviews over 20 Flex 2 and 3 explorer utilities and resources

— a must have for any serious Flex developer. In addition, we'll show you a trick to load and use your

explorers right from inside Flex Builder.

Explorers to The Rescue

In my day-to-day work as a Flash developer, I would on occasion stumble upon a useful utility that would

make my life as a developer much less tedious. This type of utility would be built in Flash, and have a UI

interface which enabled me to explore various permutations of code-based effects such as filters, or

tweening, or gradients. In addition, these explorers would show me the code necessary to achieve the

desired effect in a text window. All I had to do in most cases was cut and paste the code into my FLA,

and voila! Some of these utilities have been reviewed in prior

(http://www.communitymx.com/abstract.cfm?cid=1ACBC) articles

(http://www.communitymx.com/abstract.cfm?cid=AA071) at Community MX.

As I began to do more Flex development, I kept my eye out for similar "helper" applications. And there

have been some great ones over the past few years. As Flex 2 has exploded onto the Adobe development

scene, making it so much easier to build component-based applications, so too have its utilities, its

explorers. And now that Flex 3 is released, with all of its new features, Flex developers have even more

tools to help us and teach us to build better Flex applications.

With the View Source context menu option now available for Flex applications, a whole new category of

explorers have also emerged. Most Flash development explorers would spit out some code into a

textfield, to be pasted into your application. Now, not only can you examine the code used to produce a

certain effect or style in the explorer application UI, but you can examine the code used to build the

explorer itself, right in the browser, because a Flex application is not closed like an FLA. This has

presented enormous learning opportunities for Flex developers, and much of the knowledge I have gained

2 of 18

in developing Flex applications came about by rooting through the source code of various Flex explorers.

Another type of explorer is a sample application exemplifying a certain type of application or

development methodology. Using the View Source feature activated for the explorer, a developer can

navigate through the application's code structure and glean some very useful techniques on how practical

Flex applications are built.

So many times, the Flex explorers examined in this article have made my job as a "perpetual student" and

a developer much more enjoyable, and even saved my bacon on a project once or twice. Some have even

been a great adoption argument for prospective clients on the fence about using Flex as a technology.

The Trailblazers

At first there were not too many explorers out there, back in 2005-2006. Flex 2 had just been released,

and Adobe Consulting (http://weblogs.macromedia.com/mc/) led the way in providing the developer

community with tools to help people learn Flex and build applications with even greater ease.

These three Flex explorers are the trailblazers, some of which have been updated for Flex 3.

The Flex Component Explorer

The Flex 2 Component Explorer (http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html) by

Adobe Consulting allows the user to select any visual component available in the Flex Framework,

examine a mini-application demonstrating its use, and then examine the MXML code used to create the

mini-app. I highly recommend this application as a first stop on the road to learning Flex.

The Flex 3 Component Explorer (http://examples.adobe.com/flex3/componentexplorer/explorer.html) also

features components which are new to Flex 3, such as the Advanced DataGrid

(http://livedocs.adobe.com/flex/3/langref/mx/controls/AdvancedDataGrid.html) .

3 of 18

Image 1: The Flex 2 Component Explorer.

The Flex Style Explorer

This is the application that put Flex explorers on the map, so to speak, and is the most widely used. The

Flex 2 Style Explorer (http://www.adobe.com/go/flex_styles_explorer_app/) and the Flex 3 Style Explorer

(http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html) allow the user to select any

component in the Flex Framework, and style it with the aid of a UI interface instead of code. Four

vertical panels divide the interface: the left-most panel enables selection of the component in question;

the panel to the right of this enables styling selection; the second-to-right-most panel displays the results

of the styling selection, and the right-most panel displays the CSS styling tags necessary to achieve the

desired effect. Each subsequent component styling accrues in the CSS panel, and the user may export the

entire CSS stylesheet to their clipboard by clicking the Export All CSS button to the bottom left of the

application.

4 of 18

Image 2: The Flex 2 Style Explorer.

The most recent upgrade also includes an advanced, Photoshop-style colour picker. The advanced colour

picker, including the Export All CSS feature, makes this a truly powerful utility in any Flex developer's

toolkit. I have saved hours and hours of manual compiling by trying out a few styles and pasting the

resulting CSS into my application.

This tool is also available as a Fireworks extension

(http://weblogs.macromedia.com/mc/archives/2007/04/designing_flex.cfm) , further facilitating the workflow

between the Flex Builder and Fireworks, between designer and developer.

Flex Builder 3 has introduced Design View for CSS files, which functions as a sort of Flex Builder 3

CSS Explorer. More information on this feature can be had in the Adobe Flex 3 Documentation

(http://livedocs.adobe.com/labs/flex3/html/working_comps_07.html) . The Flex 3 Style Explorer and the Flex 3

Component Explorer are also both listed in the Adobe Flex 3 Getting Started Documentation

(http://learn.adobe.com/wiki/display/Flex/Getting+Started) menu under Resources.

5 of 18

Image 3: The Flex Builder 3 CSS Design View Editor.

The Flex Dashboard

The Flex 2 Dashboard, otherwise known as the Flex 2 Charting Components Explorer

(http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html) , exemplifies a simple application

using the Flex 2 charting components. This is a "sample application" type of explorer: rather than show

the code necessary to achieve a certain effect in a code window, the entire application is open for

introspection by right-clicking on View Source in the Flash Player context menu.

6 of 18

Image 4: The Flex 2 Charting Components Explorer.

Despite having the honour of being one of the few and the first charting explorers for Flex 2, many

developers found this application to be a tad simplistic in its implementation of the charting components'

capabilities. To that end a developer in the community named Ely Greenfield

(http://www.quietlyscheming.com/blog/) (now an Adobe employee) developed a very handy charting sampler

explorer (http://demo.quietlyscheming.com/ChartSampler/app.html) which shows off the charting components

to their potential.

Image 5: Ely Greenfield's Charting Sampler.

An updated version of the classic charting explorer, the Flex 3 Charting Components Explorer

(http://examples.adobe.com/flex3/labs/dashboard/main.html) has been created to highlight some of the newer

features of Flex 3 charting capability. Like other explorer applications, the complete source code can be

viewed by right-clicking and selecting View Source.

7 of 18

Image 6: The Flex 3 Charting Components Explorer.

The Designer's Revenge

Shortly after Flex 2 was released and the three basic explorers relatively well known in the Flex

developer community, designers and Visual Flex Developers began saying things like, "The Style

Explorer is great, but what about skinning? What about themes? What about UI design? What about

visual effects? " Developers wanted more visual expressiveness and the tools to help make this happen.

Adobe and the developer community responded to this need.

Theme Explorers

First a few theme-based portals appeared. Although not explorers per se, these resources are invaluable

for any Flex developer or UI designer looking for inspiration, or as an outright visual "quick fix" to

spruce up the design of a Flex application so it doesn't look quite so... flexy.

ScaleNine (http://scalenine.com/) is the first of the Flex theme portals reviewed here, with the largest

number of featured skins and themes. Some themes may be previewed using a site "template" application

similar to the idea of CSS Zen Garden (http://www.csszengarden.com/) , but for Flex apps. An invaluable

resource.

8 of 18

Image 7: ScaleNine.com.

Of special note, and my personal favourite for certain applications, is the Yahoo Flex Theme

(http://www.yswfblog.com/blog/2007/12/13/yahoo-and-flex-feel-good-in-your-own-skin/) .

Two other Flex theme sites of interest are FillColors (http://www.fillcolors.com/) and Fleksray

(http://fleksray.org/) , both of which also feature a preview application for the available themes.

Adobe Kuler

And a mention of Flex visual styling tools would not be complete without Adobe's answer to a certain

problem facing designers the world over: swatch, palette and colour theme creation. The solution: Adobe

Kuler (http://kuler.adobe.com/) .

Kuler is an extremely versatile and sophisticated colour theme creation and sharing portal. It even has a

downloadable Adobe AIR widget. Even though I no longer consider myself a designer, I use this nifty

application often to help me in choosing colour themes for my Flex apps. More details on this incredible

application can be found in part 1 (http://www.communitymx.com/content/article.cfm?cid=3A527) and part 2

(http://www.communitymx.com/content/article.cfm?cid=B8343) of the Flash Powertools series at Community

MX. Even though we are discussing this in the context of Flex explorers, its use is not limited to any

particular development technology, and can be used for design in general.

9 of 18

Image 8: Adobe Kuler.

Flex Goes Disco

Of course an exploration of the visual capabilities of Flex would not be complete without a look at some

of Flash's ability to produce animations and far-out effects. To this end we will take a look at five "effects

explorers" for Flex.

Filter Explorer

The Flash ActionScript 3.0 API enables users to add filter effects to Flex components. Rather than

struggling with a tweak-paste-compile-run cycle for each and every visual test, the Flex 2 Filter Explorer

(http://www.merhl.com/flex2_samples/filterExplorer/) enables the exploration of the various filter settings for

Flex components, which include bevel, blur, drop shadow and glow filters. This application allows the

developer to explore filter effect deployment in MXML. Selecting View Source for the application

enables developers to examine some of the ActionScript used to build the filters used by the explorer.

10 of 18

Image 9: The Flex 2 Filter Explorer.

Primitive Explorer

The Flex 2 Primitive Explorer

(http://www.flexibleexperiments.com/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html) allows the user to

explore custom components which draw "primitives" (i.e. simple shapes), using the Flash Drawing API

(http://livedocs.adobe.com/labs/flex3/html/help.html?content=Drawing_Vector_Graphics_1.html) . The explorer UI

functions much the same way that the Flex Component Explorer, so it's a very well thought out interface.

In addition to showing the MXML implementation of the primitive component, this explorer also shows

the user how to use the primitive object classes in ActionScript 3.0, which is very useful. And the

developer can see for themselves how the primitive components were created by right-clicking View

Source to get a peak at the entire explorer application source code.

11 of 18

Image 10: The Flex 2 Primitive Explorer.

What's really interesting is that the Flex 2 Primitive Explorer(http://www.flexibleexperiments.com/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html)

(http://www.flexibleexperiments.com/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html) later inspired Juan Sanchez (creator

of ScaleNine (http://scalenine.com/) ) and Jason Hawryluk (creator of the Flex 2 Primitive Explorer) — among others

(http://www.degrafa.com/team/) — to create Degrafa (http://www.degrafa.com/2008/03/05/origins-of-a-graphics-framework/) ,

otherwise known as the Declarative Graphics Framework (http://www.degrafa.com/about/) , which next to Papervision3D

(http://www.papervision3d.org/) is an open source project of such scope and ambition that it has prompted Adobe to get

their input on the upcoming Flex 4 MXML-G graphics markup format.

Distortion Effects Explorer

Alex Uhlman of Adobe Consulting (http://www.adobe.com/consulting/) , the company which created the first

Flex 2 explorers, has also written a custom Distortion Effects Explorer

(http://weblogs.macromedia.com/auhlmann/archives/2007/03/distortion_effe.cfm) , which create some rather nice

effects. Source and description here

(http://weblogs.macromedia.com/auhlmann/archives/2007/03/distortion_effe.cfm) .

12 of 18

Image 11: The Flex Distortion Effects Explorer.

Tweening/Easing Explorers

James Ward (http://www.jamesward.org/wordpress/) from Adobe has created a really great way to explore

easing functions used to tween motion in Flex with his Fun with Easing Functions Demo

(http://www.jamesward.org/easingFunctionFun/easingFunctionFun.html) as described here

(http://www.jamesward.org/wordpress/2007/02/16/fun-with-easing-functions-in-flex/) . The application

demonstrates usage of eleven types of easing functions, and it's even a great example of the Flex 2

charting components, so it could also be regarded as another Flex 2 charting components explorer.

13 of 18

Image 11: The Fun With Easing Functions Explorer.

Custom easing functions are not something that you might use everyday, but when you need one, it's

nearly impossible to create one from scratch without some form of visual guide. Which is where the

Custom Easing Function Explorer (http://www.madeinflex.com/img/entries/2007/05/customeasingexplorer.html)

by Spanish-speaking blogger Raul Diaz comes in very handy (description here

(http://www.madeinflex.com/2007/06/03/custom-easing-function-explorer/) /english version

(http://translate.google.com/translate?hl=en&sl=es&u=http://www.madeinflex.com/2007/06/03/custom-easing-function-explorer/)

). It has lots of sliders to create custom "nodes" in the curvature, and outputs the resulting equation into a

text window ready to copy into a custom easing class.

14 of 18

Image 13: The Custom Easing Function Explorer.

Audio Visualization Explorer

Ever since Flash Player 9 and ActionScript 3 came out, it has been possible to read the frequency output

of a sound file via the SoundMixer.computeSpectrum() method. Ben Stucki has come out with a

very handy audio visualization explorer (http://lab.benstucki.net/archives/visualizationexplorer/) which

demonstrates various sound visualization techniques (description here (http://blog.benstucki.net/?id=18) ).

Benchmarking Flex

Another category of explorer altogether is what I call the Benchmark Explorer. This is an application

with viewable source code which does performance tests on some aspect of Flex. In the case of the two

we'll review here, it's backend communications performance.

James Ward, a Technical Evangelist for Flex at Adobe, has come up with two amazing applications for

benchmarking Flex performance.

The Census Benchmark Explorer (http://www.jamesward.org/census/) (description here

(http://www.jamesward.org/wordpress/2007/04/30/ajax-and-flex-data-loading-benchmarks/) ), will test the

performance of various methods of loading data into a Flex application, using everything from XML &

JSON, to Web Services and AMF. This is incredibly useful for weighing the pros and cons of various

data communications methods with Flex, and actually makes a great case for certain protocols such as

AMF.

15 of 18

Image 14: The Census Benchmark Explorer.

BlazeBench (http://www.jamesward.org/blazebench/) is a BlazeDS

(http://opensource.adobe.com/wiki/display/blazeds/BlazeDS) benchmarking application that compares the

performance of JSON, XML and AMF3 data transfer methods side by side (description here

(http://www.jamesward.org/wordpress/2007/12/12/blazebench-why-you-want-amf-and-blazeds/) ). This allows for a

very handy guide for picking out which communications method is best suited to a particular project

when using BlazeDS.

Image 15: The BlazeBench Benchmark Explorer.

The most important thing about these two applications, in the context of this article, are that they also

provide an invaluable learning tool via the source code on how to hook up a Flex app to almost any kind

of data.

Here Come The Apps

And last but not least are the application explorers, in which the two previously mentioned explorers

16 of 18

could qualify. These are usually full blown applications built for the sole purpose of teaching what can

be done in Flex, complete with viewable source code. The bloggosphere

(http://weblogs.macromedia.com/mxna/) is replete with demo applications: tutorials, mashups, demos,

experiments, far too many to mention here.

But two stand out on my a-list. The first is not actually an application but a list, a repository of

applications. The Adobe Developer Center Flex 3 Sample Applications

(http://www.adobe.com/devnet/flex/?navID=samples) page contains dozens of sample applications from which

to learn invaluable insights on building Flex applications. And they are all View Source-enabled, ready to

be taken apart and examined.

The second on my list in this category is a prime example of using the data components, charting and

RPC services to create a very powerful application. The Flex 3 Network Monitor

(http://examples.adobe.com/flex3/labs/networkmonitor/main.html) (docs

(http://labs.adobe.com/wiki/index.php/Flex_3:Demo_Network_Monitor) ) is a prime example of how to use

Adobe LiveCycle Data Services ES (http://www.adobe.com/go/trylivecycle_dataservices/) for RemoteObject

calls from client to server and using server push to update data on the client. In addition, it's not only a

really good example of how to use LCDS in a live application, but also in using the Cairngorm

architecture (http://labs.adobe.com/wiki/index.php/Cairngorm) .

Image 16: The Flex 3 Network Monitor Application Explorer.

Using The Explorers in Flex Builder

Since Flex Builder is built on top of Eclipse, one neat way to keep all your explorers handy is to load

them into the Internal Web Browser built into Eclipse.

In Flex Builder (2 or 3) select the menu Window > Other Views > General > InternalWeb Browser

1.

17 of 18

Unfortunately there is no way to bookmark a page using eclipse's internal web browser, so we'll need to come up

with another solution:

In the address bar, copy and paste address of this article: http://www.communitymx.com/content/article.cfm?cid=0A055

(http://www.communitymx.com/content/article.cfm?cid=0A055 )

2.

Navigate/scroll to the end of the article, and the links to all the aforementioned explorers are there. Simply click on one of the links and explore away!

3.

Click the back button in the internal web browser to get back to the list of links.4.

And that's all there is to it! Now you can use all of the explorers mentioned right inside Flex Builder!

In Summary

Here is a list of all the explorers we have looked at in this article:

Component Explorers:

Flex 2 Component Explorer (http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html)

Flex 3 Component Explorer (http://examples.adobe.com/flex3/componentexplorer/explorer.html)

Flex 2 Charting Components Explorer (http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html)

Flex 3 Charting Components Explorer (http://examples.adobe.com/flex3/labs/dashboard/main.html)

Ely Greenfield's Charting Sampler (http://demo.quietlyscheming.com/ChartSampler/app.html) (blog

(http://www.quietlyscheming.com/blog/charts/chart-sampler/) )

Style Explorers:

Flex 2 Style Explorer (http://www.adobe.com/go/flex_styles_explorer_app/) (using this in Fireworks

(http://weblogs.macromedia.com/mc/archives/2007/04/designing_flex.cfm) )

Flex 3 Style Explorer (http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html)

Flex Builder 3 CSS Explorer (http://livedocs.adobe.com/labs/flex3/html/working_comps_07.html)

Getting Started With Flex 3 (http://learn.adobe.com/wiki/display/Flex/Getting+Started)

Theme portals: ScaleNine (http://scalenine.com/) , FillColors (http://www.fillcolors.com/) , Fleksray

(http://www.fleksray.org/)

Adobe Kuler (http://kuler.adobe.com/) (CMX articles part 1

(http://www.communitymx.com/content/article.cfm?cid=3A527) part 2

(http://www.communitymx.com/content/article.cfm?cid=B8343) )

Effects Explorers:

Flex 2 Filter Explorer (http://www.merhl.com/flex2_samples/filterExplorer/)

Flex 2 Primitive Explorer (http://www.flexibleexperiments.com/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html)

Distortion Effects Explorer (http://www.alex-uhlmann.de/flash/adobe/blog/distortionEffects/effectCube/)

James Ward's Easing Function Fun (http://www.jamesward.org/easingFunctionFun/easingFunctionFun.html) (blog

(http://www.jamesward.org/wordpress/2007/02/16/fun-with-easing-functions-in-flex/) )

Custom Easing Function Explorer (http://www.madeinflex.com/img/entries/2007/05/customeasingexplorer.html) (blog

(http://www.madeinflex.com/2007/06/03/custom-easing-function-explorer/) english(http://translate.google.com/translate?hl=en&sl=es&u=http://www.madeinflex.com/2007/06/03/custom-easing-function-explorer/)

)

Ben Stucki's Audio Visualization Explorer (http://lab.benstucki.net/archives/visualizationexplorer/) (blog

(http://blog.benstucki.net/?id=18) )

18 of 18

Benchmark Explorers

James Ward's Census Benchmark Explorer (http://www.jamesward.org/census/) (blog

(http://www.jamesward.org/wordpress/2007/04/30/ajax-and-flex-data-loading-benchmarks/) )

James Ward's BlazeBench (http://www.jamesward.org/blazebench/) (blog

(http://www.jamesward.org/wordpress/2007/12/12/blazebench-why-you-want-amf-and-blazeds/) )

Application Explorers

Adobe Developer Center Flex 3 Sample Applications (http://www.adobe.com/devnet/flex/?navID=samples)

Adobe Labs Flex 3 Network Monitor (http://examples.adobe.com/flex3/labs/networkmonitor/main.html) (docs

(http://labs.adobe.com/wiki/index.php/Flex_3:Demo_Network_Monitor) )

Keywords

powertools, flex, flash, actionscript, explorer, view source, style, skin, primnitive, drawing api, blazeds,

charting, css, themes, kuler, filters, easing, tweens, visualization, benchmark, monitor, cairngorm, eclipse

All content ©Community MX 2002-2008. All rights reserved.