Flex Powertools Explorers
-
Upload
richarth-atausinchi-fernandez -
Category
Documents
-
view
223 -
download
0
description
Transcript of Flex Powertools Explorers
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.