文档章节

flex 开发工具

小凯
 小凯
发布于 2015/10/08 14:23
字数 2828
阅读 25
收藏 0

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 bevelblurdrop 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:

Style Explorers:

Effects Explorers:

Benchmark Explorers

Application Explorers

本文转载自:http://blog.csdn.net/fatherican/article/details/6903123

小凯
粉丝 2
博文 92
码字总数 0
作品 0
南京
高级程序员
私信 提问
加载中

评论(1)

小凯
小凯 博主
79
Adobe Flex 4 、Flash Builder 4 正式发布

Adobe Flex SDK 4 、Flash Builder 4 正式发布(中文版同时发布) Flex主要是开发者(程序员)的工具,并且开发Flex应用程序的方式和开发Flash RIA(Rich Internet Application,富互联网应用...

红薯
2010/03/22
671
0
【flex&bison翻译】前言

译者注:去年的时候曾经计划翻译本书,后来终于还是抵不过懒惰,给放下了,有句经典的话:现在的努力,是为了小时候吹过的牛逼。现在体会深刻啊。。。本文是在Ubuntu 12.04.1系统下,使用Lib...

MatthewChie
2012/08/25
743
2
Apache Flex BlazeDS 4.7.2 发布,Web 通讯工具

Apache Flex BlazeDS 4.7.2 发布,Apache Flex BlazeDS 是基于服务器的 Java 远程和 Web 通讯工具,方便开发者连接后端分布式数据和实时推送数据到 Adobe(r) Flex(r) 和 Adobe AIR(tm) 应用,...

oschina
2015/11/21
2.4K
6
看来真的要全面转向HTML5了

据悉,Adobe已经向Apache软件基金会(ASF)提交基于Flash的Flex框架代码,作为一个独立的管理项目。尽管该公司承诺将继续开发Flex,运用到Flash底层技术,但称HTML5是未来,许多Flex工程师已...

DustLeon
2011/11/19
383
0
浅谈 Flash/Flex/HTML5 技术选型

在HTML5发布以前,RIA领域的技术解决方案一直相都是各展所长,并无争议。Adobe体系中,Flash做不了的事情,Flex可以做到;.Net系决策者在选用RIA解决方案时,Silverlight是不二之选。 曾经我...

墙头草
2012/08/14
16.5K
46

没有更多内容

加载失败,请刷新页面

加载更多

移动深度学习:人工智能的深水区

人工智能技术经历6年的快速发展,重新定义了很多行业的用户体验,而这仅是开始。 随着5G商用大规模落地,以及智能手机硬件性能越来越强、AIoT设备的快速普及,基于云-边缘-端算法和算力结构的...

博文视点Bv
14分钟前
1
0
vim 分屏 操作

$vim -On file file2 #大写O垂直分屏打开文件 $vim -on file file2 #小写水平打开 # n 表示分屏数,直接n等于文件个数 如果n小于文件,按顺序打开前面的n个,如果大于,打开空编辑页面 分屏快...

突突突酱
16分钟前
1
0
MySQL/Mariadb设置中文字符集(linux)

编辑/etc/my.cnf,添加以下设置 [mysql]default-character-set=utf8[mysqld]character_set_server=utf8[mysqld.safe]default-character-set=utf8[client]default-chara...

编程老陆
19分钟前
2
0
关于linux常用的挂载命令

挂载:就把一块磁盘(可以是光盘,U盘)绑定到一个空目录下面 一般情况下会挂载到mnt目录下面 挂载光盘(把光盘挂载到/mnt/cdrom这个目录中) mount -t iso9660 /dev/cdrom /mnt/cdrom 退出当前目录...

chenhongjiang
20分钟前
2
0
如何分享brain内容外部共享?几个需要知道的TheBrain问答

TheBrain(点击下载)是一款与众不同的思维导图软件,其所有信息通过一个又一个的节点进行联系,最终形成一个杂而不乱的网状结构。从头开始设计,让您捕获您的想法和信息在一个网络的联想,匹...

mnrssj
20分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部