flex powertools explorers

Download Flex Powertools Explorers

Post on 04-Jan-2016




0 download

Embed Size (px)


Flex power tools, Herramienta para el desarrollo en Flex


  • 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 developerlooking 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 explorevarious 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 wouldmake my life as a developer much less tedious. This type of utility would be built in Flash, and have a UIinterface which enabled me to explore various permutations of code-based effects such as filters, ortweening, or gradients. In addition, these explorers would show me the code necessary to achieve thedesired 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 developmentscene, making it so much easier to build component-based applications, so too have its utilities, itsexplorers. 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 ofexplorers have also emerged. Most Flash development explorers would spit out some code into atextfield, to be pasted into your application. Now, not only can you examine the code used to produce acertain effect or style in the explorer application UI, but you can examine the code used to build theexplorer itself, right in the browser, because a Flex application is not closed like an FLA. This haspresented 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" anda 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 si