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 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.

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 articles 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 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 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.

At first there were not too many explorers out there, back in 2005-2006. Flex 2 had just been released, and Adobe Consulting 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 2 Component Explorer 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 also features components which are new to Flex 3, such as the Advanced 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. The Flex 2 Style Explorer and theFlex 3 Style Explorer 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.

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, 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. The Flex 3 Style Explorer and the Flex 3 Component Explorer are also both listed in the Adobe Flex 3 Getting Started Documentation menu under Resources.

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

The Flex 2 Dashboard, otherwise known as the Flex 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 on View Source in 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 handy charting sampler explorer 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 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.

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 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.

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

Image 7: ScaleNine.com.

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

Two other Flex theme sites of interest are FillColors and Fleksray, 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 in part 1 and part 2 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.

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, the Flex 2 Filter Explorer 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.

Image 9: The Flex 2 Filter Explorer.

The Flex 2 Primitive Explorer allows 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 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.

Image 10: The Flex 2 Primitive Explorer.

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

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

Image 11: The Flex Distortion Effects Explorer.

James Ward 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 as described 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 another Flex 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 the Custom Easing Function Explorer by 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 handy audio visualization explorer which demonstrates various sound visualization techniques (description here).

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 (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.

BlazeBench is a BlazeDS benchmarking 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 the application 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. Thebloggosphere 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 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 (docs) is a prime example of how to use Adobe LiveCycle Data Services ES 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.

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 the Internal Web Browser built into Eclipse.

1. In Flex Builder (2 or 3) select the menu Window > 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 articles part 1 part 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 (blog english)
• Ben Stucki's Audio Visualization Explorer (blog)

Benchmark Explorers

• James Ward's Census Benchmark Explorer (blog)
• James Ward's BlazeBench (blog)

Application Explorers

• Adobe Developer Center Flex 3 Sample Applications
• Adobe Labs Flex 3 Network Monitor (docs)