flex 开发工具

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 favouriteFlex 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 youa trick to load and use your explorers right from inside Flex Builder.

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 inpriorarticlesat 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 theView Source context menu optionnow 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 canexamine 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 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 theView Sourcefeature 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.

At first there were not too many explorers out there, back in 2005-2006. Flex 2 had just been released, andAdobe Consultingled 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.

TheFlex 2 Component Explorerby 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.

TheFlex 3 Component Exploreralso features components which are new to Flex 3, such as theAdvanced DataGrid.

Image 1:The Flex 2 Component Explorer.

This is the application that put Flex explorers on the map, so to speak, and is the most widely used. TheFlex 2 Style Explorerand theFlex 3 Style Explorerallow 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 theExport All CSSbutton to the bottom left of the application.

Image 2:The Flex 2 Style Explorer.

The most recent upgrade also includes an advanced, Photoshop-style colour picker. The advanced colour picker, including theExport All CSSfeature, 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 asa Fireworks extension, further facilitating the workflow between the Flex Builder and Fireworks, between designer and developer.

Flex Builder 3has introducedDesign View for CSS files, which functions as a sort ofFlex Builder 3 CSS Explorer. More information on this feature can be had in theAdobe Flex 3 Documentation. TheFlex 3 Style Explorerand theFlex 3 Component Explorerare also both listed in theAdobe Flex 3 Getting Started Documentationmenu underResources.

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

The Flex 2 Dashboard, otherwise known as theFlex 2 Charting Components Explorer, 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 onView Sourcein the Flash Player context menu.

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 namedEly Greenfield(now an Adobe employee) developed a very handycharting sampler explorerwhich shows off the charting components to their potential.

Image 5:Ely Greenfield's Charting Sampler.

An updated version of the classic charting explorer, theFlex 3 Charting Components Explorerhas 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 selectingView Source.

Image 6:The Flex 3 Charting Components Explorer.

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 aboutskinning? What aboutthemes? What aboutUI design? What aboutvisual effects? " Developers wanted more visual expressiveness and the tools to help make this happen. Adobe and the developer community responded to this need.

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.

ScaleNineis 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 ofCSS Zen Garden, but for Flex apps. An invaluable resource.

Image 7:ScaleNine.com.

Of special note, and my personal favourite for certain applications, is theYahoo Flex Theme.

Two other Flex theme sites of interest areFillColorsandFleksray, both of which also feature a preview application for the available themes.

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.

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 inpart 1andpart 2of theFlash Powertools seriesat 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.

Image 8:Adobe Kuler.

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.

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, theFlex 2 Filter Explorerenables the exploration of the various filter settings for Flex components, which includebevel,blur,drop shadowandglowfilters. This application allows the developer to explore filter effect deployment in MXML. SelectingView Sourcefor the application enables developers to examine some of the ActionScript used to build the filters used by the explorer.

Image 9:The Flex 2 Filter Explorer.

TheFlex 2 Primitive Explorerallows the user to explore custom components which draw "primitives" (i.e. simple shapes), using theFlash Drawing API. The explorer UI functions much the same way that theFlex 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-clickingView Sourceto get a peak at the entire explorer application source code.

Image 10:The Flex 2 Primitive Explorer.

What's really interesting is that theFlex 2 Primitive Explorerlater inspired Juan Sanchez (creator ofScaleNine) and Jason Hawryluk (creator of the Flex 2 Primitive Explorer) —among others—to create Degrafa, otherwise known as theDeclarative Graphics Framework, which next toPapervision3Dis 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.

Alex Uhlman ofAdobe Consulting, the company which created the first Flex 2 explorers, has also written a customDistortion Effects Explorer, which create some rather nice effects.Source and description here.

Image 11:The Flex Distortion Effects Explorer.

James Wardfrom Adobe has created a really great way to explore easing functions used to tween motion in Flex with hisFun with Easing Functions Demoasdescribed here. 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 anotherFlex 2 charting components explorer.

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 theCustom Easing Function Explorerby Spanish-speaking blogger Raul Diaz comes in very handy (description here/english version). 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.

Image 13:The Custom Easing Function 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 theSoundMixer.computeSpectrum()method. Ben Stucki has come out with a very handyaudio visualization explorerwhich demonstrates various sound visualization techniques (description here).

Another category of explorer altogether is what I call theBenchmark 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.

TheCensus Benchmark Explorer(description here), 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.

Image 14:The Census Benchmark Explorer.

BlazeBenchis aBlazeDSbenchmarking application that compares the performance of JSON, XML and AMF3 data transfer methods side by side (description here). 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.

And last but not least are theapplication explorers, in which the two previously mentioned explorers 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. Thebloggosphereis 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 CenterFlex 3 Sample Applicationspage contains dozens of sample applications from which to learn invaluable insights on building Flex applications. And they are allView 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. TheFlex 3 Network Monitor(docs) is a prime example of how to useAdobe LiveCycle Data Services ESfor 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 theCairngorm architecture.

Image 16:The Flex 3 Network Monitor Application Explorer.

Since Flex Builder is built on top of Eclipse, one neat way to keep all your explorers handy is to load them into theInternal Web Browserbuilt into Eclipse.

1. In Flex Builder (2 or 3) select the menuWindow > Other Views > General > Internal Web Browser

   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:

2. In the address bar, copy and paste address of this article:http://www.communitymx.com/content/article.cfm?cid=0A055
3. 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!
4. Click the back button in the internal web browser to get back to the list of links.

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

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

Component Explorers:

• Flex 2 Component Explorer
• Flex 3 Component Explorer
• Flex 2 Charting Components Explorer
• Flex 3 Charting Components Explorer
• Ely Greenfield's Charting Sampler(blog)

Style Explorers:

• Flex 2 Style Explorer(using this in Fireworks)
• Flex 3 Style Explorer
• Flex Builder 3 CSS Explorer
• Getting Started With Flex 3
• Theme portals:ScaleNine,FillColors,Fleksray
• Adobe Kuler(CMX articlespart 1part 2)

Effects Explorers:

• Flex 2 Filter Explorer
• Flex 2 Primitive Explorer
• Distortion Effects Explorer
• James Ward's Easing Function Fun(blog)
• Custom Easing Function Explorer(blogenglish)
• Ben Stucki's Audio Visualization Explorer(blog)

Benchmark Explorers

• James Ward'sCensus Benchmark Explorer(blog)
• James Ward'sBlazeBench(blog)

Application Explorers

• Adobe Developer CenterFlex 3 Sample Applications
• Adobe LabsFlex 3 Network Monitor(docs)