Archive for the ‘FLEX’ Category

Flash Player 11 Incubator Program (Flash Player 11 孵化器计划)

Did you see the news yesterday? Flash Player 11 which includes the Molehill 3D apis, is now available to the general public as part of Adobe’s new incubator program. Get Flash Player 11 here now!.

你是否看了昨天的新闻(抱歉,我才看到,所以昨天应该就是2011.2.27)?包含Molehill 3D  api的Flash Player 11现在可以作为Adobe 新的孵化器计划的公开部分下载。Get Flash Player 11 here now!.

Then experience it within the links below:下面是一些它的表现例子

3D Racer

3D MAX Racer Game

Zombie Tycoon

Zombie Tycoon Game.

Shallow Water Demo

Away3D Shallow Water Demo

Quake 3 demo

Quake 3 demo

What is the incubator program? Here are some FAQ’s from Adobe.  //什么是孵化计划?这里是来自 Adobe的关于此孵化器计划的答疑。

FAQ: Adobe® AIR® and Flash® Player Incubator // 常见问题:关于Adobe® AIR® 和 Flash® Player 孵化器

1. What is the Adobe AIR and Flash Player Incubator? //什么是关于Adobe® AIR® 和 Flash® Player 孵化器?
The Adobe AIR and Flash Player Incubator is a place for our runtimes product teams to share new features that are either under development or under consideration for inclusion in future versions of the runtimes. Unlike our beta releases, capabilities that you see in the Incubator builds may or may not be supported in future releases of the runtimes.

关于Adobe® AIR® 和 Flash® Player 孵化器 是一个我们运行环境团队用于展示未来有可能会考虑添加的功能的地方,这不同于测试版本,因为现在我们添加的功能,在未来的运行环境中未必会加入

2. Who is this Incubator program for?  //孵化器计划针对谁?
This program is especially suitable for more adventurous developers who are willing to experiment with software features in early development stages and may or may not be included in future product releases.

这一方案是专为那些具有冒险精神的开发者,这些开发者将这些功能用于早期开发阶段的实验,可能不会在未来的产品版本中包含。

 

3. Why does Adobe have an Incubator program? //为什么Adobe要有这样一个计划
Adobe’s product development philosophy is to engage in an open exchange and involve our community of passionate developers in early stages of the development cycle. Your feedback is critical to our on-going innovation efforts for the Flash Platform.

Adobe的产品开发理念需要在开发周期的早期阶段进行公开交流,我们社区热情的开发人员,您的反馈意见对于我们正在进行的Flash平台创新有很大帮助和影响。

4. What’s the difference between the Incubator program and the beta program? //孵化计划与测试计划有什么不同
While the goals of both programs are similar — get early feedback from the developer community, the key differences include:

大的方面来说它们类似-都需要开发者的反馈意见,关键的不同点在于:

– The Incubator program allows us to get a community of developers involved in a much earlier development stage than what we do in the beta program.

-孵化计划让我们在早期的开发阶段就与我们社区开发者进行交流,而不是在测试阶段。
– The Incubator program will be focused on a collection of new features that may or may not make into any future releases, where as the beta program allows developers to experience and evaluate an upcoming release that has reached the feature-complete stage.

-孵化计划的重点放在一些新功能是否适合加入到将来的正式版本,而测试计划仅仅允许开发者体验新功能。

5. What should I expect from the Incubator program? //我应该对孵化计划有什么期待
We plan to release new Flash Player or AIR Incubator builds on a regular basis. To get updates on new builds and features, please subscribe to the RSS feed on Adobe runtimes release blog. These are early builds of AIR or Flash Player and may not be as stable as a final release. However, the current released features should still work as expected. Please file bugs for new features highlighted in the Incubator and new bugs for current released features. The availability of AIR and Flash Player and supported OS and platforms may vary on the downloads page between updates to this program.

我们计划定期推出新的Flash Player或AIR孵化器。要获取新版本和功能,请订阅及更新在Adobe的运行时版本博客的RSS。这是早期版本的AIR或Flash Player,不会想最终版本那么稳定。然而,目前发布的功能仍然正常工作。请在提交的时候标明孵化器的BUG,以及当前发布的功能的新功能的bug。AIR和Flash Player的可用性和支持的操作系统都会在下载页面做更新。

6. Why should I participate in the Incubator program?//为什么我要参与孵化计划
The Incubator program provides you the opportunity to get an early look at what our engineers are developing for two of the most ubiquitous runtime technologies in the world. By being an active participant in the program, you’ll be able to influence the future of the leading runtime technologies with the Adobe engineering team.

孵化器计划提供您有机会获得我们最早期的技术资料。通过在计划中的积极参与,您将能够影响和改变Adobe的工程团队关于runtime技术的未来。

7. Who will read my comments and answer my questions?//有人读我的意见和回答我的问题吗?
Your feedback is very important to us. Your comments and questions will be read and answered by Adobe engineers who are responsible for these features.

你的反馈对于我们是非常重要的。你的意见和问题,将会被我们负责未来发展的工程师阅读和回复。

8. What will happen to these features?//未来将会发生什么?
These features are under development or under consideration for future releases. Depending on the feedback we get from the community, some of these features will be incorporated into future releases of the runtimes.

这些功能正在开发或正在考虑放到将来的版本中。根据我们从社会得到的反馈,其中的一些功能将被纳入未来版本的运行时。

9. I have ideas for new features, who do I talk to? //我有一个好点子,我跟谁说?
We welcome new ideas from the community. Please submit your ideas to us athttp://bugs.adobe.com/flashplayer/

我们欢迎新来自社区的新点子。请发布你的点子到我们的http://bugs.adobe.com/flashplayer/

68 小但是却很有用的开源 ActionScript 类库,他们可以提高FLASH/FLEX开发的速度

1. appcorelib


Open Source Flex Application Core Library, AppCoreLib is a collection of useful classes that facilitate easy RIA development with regards to XML based data being pulled in. The general approach is that an application needs to load various content/setting files prior to loading the UI. Through a series of simple checks, an application can then load the UI once those dependencies have been loaded or alert the user if they have not.

AppCoreLib provides simple XMLDataBroker classes with convenience methods that allows easy traversal of the XML data using simple IDs.

 

2. as3awss3lib


as3awss3lib is an AS3 library for accessing Amazon’s S3 service. It only works in Apollo because of restrictions in the browser player. It supports managing buckets and objects.

 

3. as3barcodelib


as3barcodelib is a library for reading and decoding barcodes in Actionscript 3. Initially it will be able to read and decode the one-dimensional EAN 13 symbology from bitmaps.

 

4. as3bloggerlib


AS3BloggerLib is an Actionscript 3.0 library that allows installed (AIR) applications to access the Blogger Data API. This library also contains functionality to authenticate a Google account using Google’s ClientLogin protocol.

 

5. as3cannonball


Cannonball is an implementation of the DOM Level 3, HTML and CSS3 core specifications written in ActionScript 3.0.

 

6. as3csslib


as3csslib is an CSS engine separated from as3cannonball for ActionScript 3.0

 

7. as3corelib


as3corelib is an ActionScript 3 Library that contains a number of classes and utilities for working with ActionScript 3. These include classes for MD5 and SHA 1 hashing, Image encoders, and JSON serialization as well as general String, Number and Date APIs.

 

8. as3crypto


As3 Crypto is a cryptography library written in Actionscript 3 that provides several common algorithms.

 

9. as3ebaylib


The eBay ActionScript 3.0 library provides an interface between the eBay XML API and ActionScript 3.0. This open-source library will allow developers to create novel and innovative applications leveraging both eBay’s marketplace services and Adobe’s Flash Player 9 runtime!

 

10. as3facebooklib


The Facebook API provides an ActionScript 3.0 for interacting with the Facebook Platform API.

 

11. as3fedexlib


This is an ActionScript 3.0 wrapper on top of the FedEx XML APIs. It also provides a solid framework on top of which you can easily add additional functionality.

 

12. as3flexdb

 


AS3FlexDB project is a open source lib that allows Adobe Flex applications to connect to a MySQL server.

 

 

13. as3flickrlib


The Flickr library is an ActionScript 3.0 API for the online photo sharing application, Flickr. It provides access to the entire Flickr API.

 

14. as3gamelib


Library of useful gaming classes for game development on the actionscript/flash platform

 

15. as3isolib


As3isolib (v1.0) is an open-source ActionScript 3.0 Isometric Library developed to assist in creating isometrically projected content (such as games and graphics) targeted for the Flash player platform. As3isolib includes utilities, primitives and views. As3isolib was developed with simplicity, speed and performance in mind so that developers can focus on actual implementations rather than having to learn a complex API.

 

16. as3mathlib


The Flex/Actionscript Math Library (as3mathlib) is intended to provide a rudimentary numerical analysis toolkit for the Actionscript/Flex programming environment.

 

17. as3mp3streamplayer


This project requires Flash player 10 and allows you to play shoutcast mp3 streams without memory problems.

 

18. as3nativealertlib


as3nativealertlib is an AIR alert that appears in a native window.

In Flex, we have alerts, but they are Flex windows rather than native OS windows. This is fine in the browser, but doesn’t make much sense in AIR (Adobe Integrated Runtime). In AIR, we want our alerts to show up in their own native windows. This project creates Flex-like alerts, but they are native windows.

 

19. as3notificationlib


as3notificationlib is a notification framework written in AS3 for the Adobe Integrated Runtime (AIR).

This project makes it easy to add cross-platform notifications to your AIR application. It handles “native system notifications” like the dock icon bouncing and the taskbar icon flashing, and it allows you to easily create alert “pop-ups”.

 

20. as3plsreader


as3plsreader is a PLS (Playlist) reader for Adobe AIR / Actionscript 3 which allows you to read and write PLS and M3U files.

PLS files and M3U Files are Playlist files used by alot of audio programs. Programs like iTunes, Real player, Winamp, VLC media player and Foobar play these formats without any extra codecs required.

 

21. as3powncelib


The as3powncelib is an interface between the Pownce API and ActionScript 3. It does all the grunt work of parsing the XML from the API and turning it in to AS3 objects.

 

22. as3scribdlib


The Scribd library is an ActionScript 3.0 API for the online document sharing application, Scribd. It provides access to the entire Scribd API.

 

23. as3soundeditorlib


as3soundeditorlib is an Actionscript 3.0 library for sound playback, spectrum display, and cue point display.

 

24. as3syndicationlib


as3syndicationlib is an ActionScript 3.0 library for handling syndication feeds.

Use the syndication library to parse Atom and all versions of RSS easily. This library hides the differences between the formats so you can parse any type of feed without having to know what kind of feed it is.

 

25. as3webservice


as3webservice is an open-source Webservice class implementation in AS3 for Flash CS3 IDE.

 

26. as3xls


as3xls is an library which allows you to read and write Excel files in Flex.

 

27. as3youtubelib


as3YoutubeLib is an ActionScript 3.0  library which provides an interface to search videos from YouTube.

 

28. as3-bits(prior version: adobe-air-util)


Miscalleneous AS3 bits, Adobe AIR AS3 utility classes

 

29. as3-rpclib


As3 RPC lib is a set of libraries that can be used with Flex 2 or AS 3 to invoke remote procedure calls using:

  • AMF0 (Flash Remoting MX)
  • XML-RPC
  • JSON-RPC (Coming Soon)

 

30. ascollada


ascollada is an actionscript library for parsing Collada files.

 

31. assql


asSQL is an Actionscript 3 Mysql Driver aimed towards AIR projects to allow Mysql database connectivity directly from Actionscript.

 

32. assqliteutils


assqliteutils is an actionscript 3 SQLite utils library.

 

33. beziercurve


beziercurve is an ActionScript 3 library which lets you create and on the fly edit bezier curves with an easy syntax. You can add as many anchor and control points as you want.

 

34. bigroom


bigroom is an actionscript 3 library from Big Room. Various Flash/Flex Actionscript 3 source code released to the community by Richard Lord of Big Room

 

35. birdeye

 


BirdEye is a community project to advance the design and development of a comprehensive open source information visualization and visual analytics library for Adobe Flex. The actionscript-based library enables users to create multi-dimensional data visualization interfaces for the analysis and presentation of information.

 

 

36. bulk-loader


BulkLoader is a minimal library written in Actionscript 3 (AS3) that aims to make loading and managing complex loading requirements easier and faster.

 

37. csvlib


csvlib is a csv parser for actionscript 3.

 

38. degrafa


Degrafa is a declarative graphics framework for Flex, which allows you to use MXML markup to draw shapes, make complex graphics, create skins and also includes advanced CSS support.

 

39. displaylistmonitor


dispalylistmonitor is a panel for use inside of the Flash IDE to monitor objects within the display list.

 

40. efflex


efflex is an Designer Effects library for Flex.

 

41. everythingflexairlib


These free components and classes will help with your development of AIR applications. EverythingFlexAIR1.swc includes the ContextWindow, AlertWindow, NativeAlertWindow, SuperWindow, ConnectionManager, and UpdateManager classes.

 

42. facebook-as3


facebook-as3 provides AS3 API to access Facebook’s Platform API(Implementation of Facebook’s REST API in Actionscript 3.).

 

43. fastas3


FastAS3 is an ActionScript 3.0 Library inspired by jQuery which is a new type of JavaScript library for fast and fun development.

 

44. flexfiltering


FlexFiltering is an Controls and Collections for AS3 and Flex that support fast filtering across large datasets.

 

45. flexircclient


FlexIRCClient is an ActionScript 3 based IRC library which aims to be a Flex / Flash based IRC Client.

 

46. flexwires


FlexWires is a Wires UI control library for Adobe Flex.

 

47. flexlib


flexlib is an Open Source Flex Component Library which efforts to create open source user interface components for Adobe Flex 2, 3 and 4.

48. flexsurverylibrary


flexsurverylibrary is an ActionScript 3 library which allows you create survey for Flex applications.

 

49. flvplayerlite


FLVPlayerLite is a simple and lightweight FLV Player.

 

50. flvrecorder


FLVRecorder is an library which record BitmapData to an FLV-encoded file for Adobe AIR.

The class offers the user to record via inputting BitmapData, Bitmaps and even your custom components, Flex component, like your VideoDisplay and also Flash components, like the FLVPlayBack or your custom Sprites and MovieClips.

 

51. foam-as3


FOAM is a two-dimensional rigid body physics engine written in ActionScript 3.0.

 

52. googleas3api


GoogleAS3API is a simple collection of Google’s API features, there is a class per feature, like Google Web search, Images Search, Google Suggest etc which help you to integrate the power of Google in your Flash/Flex/AIR application (searches, translation, suggest, weather, feeds).

 

53. icodecoder


icodecoder is an ActionScript 3.0 library(one class) icon file decoder.

 

54. lastfm-as3


lastfm-as3 is an Actionscript 3.0 API to access all the available Last.fm web services.

 

55. masapi


The target of the Masapi is to provide a complete framework dedicated to the management of the massive loading into a flash/flex application. It is designed to be as easy as possible to use but also to be as flexible as possible.

 

56. MinimalComps


MinimalComps are a set of minimal user interface components for use in ActionScript 3.0 based projects.

 

57. openzoom


open-zoom is an open source Toolkit for Multiscale Images and Zoomable User Interfaces (ZUI).

 

58. PdfUtil


PdfUtil is a simple AS3 library based on AlivePDF, which helps to create PDF out of a complex component, Parse HTM.

 

59. popforge


The Popforge library is the sum of several free time and research activities. Each piece in its own a project itself.

 

60. queueloader-as3


QueueLoader is an actionscript library for sequential asset loading and monitoring which designed to be used with Actionscript 3.0.

 

61. redherring


RedHerring is a light duty HTTP proxy for AS3.

 

62. reflexutil


This open source utility allows Adobe Flex developers to debug and alter properties of components while running an application.

 

63. snackr


Snackr is an RSS feed ticker for Windows/Mac/Linux built with Adobe AIR and Flex.

 

64. splinklibrary


splinklibrary is an actionscript 3 library to ease the daily work.

 

65. splinkresource


splinkresource is an actionscript 3 resource loading framework which aims to ease the workflow with resources in actionscript3 multilanguage applications.

 

66. swfin


swfIN is a javascript toolkit for flash developers.

 

67. swiz


Swiz is a framework for Adobe Flex that aims to bring complete simplicity to RIA development. Swiz provides Inversion of Control, event handing, and simple life cycle for asynchronous remote methods. In contrast to other major frameworks for Flex, Swiz imposes no JEE patterns on your code, no repetitive folder layouts, and no boilerplate code on your development.

 

68. urlkit


UrlKit supports Adobe Flex applications that need to expose URLs and window titles in the browser to represent their state. These URLs can be bookmarked, accessed via the Back button, etc.

 

Screen Capture with Flash (屏幕捕捉与FLASH)

原文出处:http://cookbooks.adobe.com/post_Screen_Capture_with_Flash-18504.html

Problem 问题

While working on numerous projects I often had requirements for doing screen capture in AS3.0. Unfortunately I found none in Google search, but got some resources which helped me to develop a component for screen capture. With the hope that this will help someone out there, I have posted it here.

在工作中,我经常遇到一些在AS3.0中使用屏幕捕捉需求的项目。不幸的是我无法在Google搜索引擎中找到答案,但是我找到一些资源可以帮助我开发屏幕捕捉组件。希望我发布的这篇文章能够帮助一些人。

Solution 解决

The SWC takes snapshots of each frames and converts it to bytesArray for storing and displaying in the end as an FLV bytes stream.

SWC为每一祯进行照相并且转化这些内容为bytesArray以便于存储和显示在最终的FLV字节流当中。

Detailed explanation 详细解释

Below is the Main mxml page developed using Adobe Flash Builder, SDK 4.1, Flash Player version 10.1.0. In this example I am doing a screen capture of the stage.  I have added a video and placed 3 buttons, Record, Stop and Play.

下面是使用Adobe Flash Builder, SDK 4.1开发的Main mxml页面,需要Flash Player 版本 10.1.0。在这个例子中我使用了一个屏幕捕捉舞台。我添加了一个视频和3个按钮,分别是录制,停止,以及播放。

On clicking on the Record button, the recording of the page starts. Once you click on stop, it stops recording.

当点击录制按钮,这个页面开始被录制。一旦点击停止按钮,将会停止录制。
Then click on Play button to see the recorded version. You may have other things/animations on stage for recording too, I have just tried with an FLV.

然后点击播放按钮去查看录制的版本。你也可以录制舞台上的其它东西以及动画,我尝试录制FLV。

The recording play is basically bytesArray of an FLV created on run-time. You can save it to your server by passing this binary data to any back-end technology – ASP.Net or PHP, etc.

录制播放是基于一个实时创建的FLV中的字节流。你也可以通过传送二进制数据到任何后台技术例如ASP.net 或者 PHP等,将它存储到自己的服务器,

//Main.mxml

01 <?xml version="1.0" encoding="utf-8"?>
02 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
05 width="955" height="600"
06 addedToStage="onInit();"
07 frameRate="24" >
08
09 <fx:Script>
10 <![CDATA[
11 import com.dd.screencapture.ScreenCapture;
12 import com.dd.screencapture.SimpleFlvWriter;
13
14 private var screenCapture:ScreenCapture;
15
16 private function onInit():void
17 {
18 screenCapture = ScreenCapture.getInstance();
19 screenCapture.source = stage;
20 screenCapture.fps = 12;
21 screenCapture.size( 400, 300 );
22 screenCapture.x = 400;
23 screenCapture.y = 250;
24 stage.addChild( screenCapture );
25 }
26
27 private function startRecord( event:MouseEvent ):void
28 {
29 screenCapture.record();
30 }
31
32 private function stopRecord( event:MouseEvent ):void
33 {
34 screenCapture.stop();
35 }
36
37 private function playVideo( event:MouseEvent ):void
38 {
39 screenCapture.play();
40 }
41 ]]>
42 </fx:Script>
43 <s:VideoDisplay width="400" height="300" source="assets/myVideo.flv" />
44
45 <mx:HBox >
46 <s:Button label="Record" click="startRecord( event );" />
47 <s:Button label="Stop" click="stopRecord( event );" />
48 <s:Button label="Play" click="playVideo( event );" />
49 </mx:HBox>
50 </s:Application>

Place the ScreenCapture.swc in lib folder of the flex project. You may also use this swc for any ActionScript 3.0 projects. Kindly note that this requires Flash Player 10.1 to run properly. No audio capabilities here.

放置ScreenCapture.swc 到flex项目中的lib文件夹中。你也可以在任何ActionScript 3.0中使用这个swc。请注意,其中项目需求在Flash Player 10.1下运行,并且无法使用音频捕捉。

Interestingly, you can save the screen capture as FLV format by using this piece of code below:

感兴趣的话,你可以保存屏幕捕捉文件作为FLV格式到本地通过下面的代码:

var saveFile:FileReference = new FileReference();
saveFile.save( screenCapture.data, "video.flv" );//screenCapture is the ScreenCapture instance created in the above code block.

Resources used: http://www.zeropointnine.com/blog/simpleflvwriteras-as3-class-to-create-flvs/

可用的资源:http://www.zeropointnine.com/blog/simpleflvwriteras-as3-class-to-create-flvs/
The links shows how to save BitmapData to an FLV in binary format and then save to dish using Adobe AIR, using FileStream. I have taken the part of writing the binary data for FLV and playing that FLV as stream on run-time

这个链接显示如何存储BitmapData到一个二进制的FLV格式,然后通过ADOBE AIR存储,使用FileStream。在代码中,我已经写了如何转换二进制数据到FLV并且如何实时播放FLV流媒体。

 

用FLASH录制来至麦克风的声音(MicRecorder,一个微型麦克风类库)

MicRecorder.png
当我在写第二章 “字节可以做什么的时候?”,我想出了一个微型的帮助类,可以帮助开发者在他们的程序中轻松地从麦克风中录制音频。 

这就是MicRecorder,通过Flash Player 10.1中介绍的Microphone对象派发的Event.SAMPLE_DATA事件处理内部的ByteArray,并将WAV打包。 Wav解码器已被嵌入到其中,不过不久以后其他解码器也将可以被使用。

以下是一个小小的演示:
“http://bytearray.org/wp-content/projects/micrecorder/TestRecorder.swf
从应用程序中的录制麦克风音频,只需要以下几行代码:

  1. // volume in the final WAV file will be downsampled to 50%
  2. var volume:Number = .5;
  3. // we create the WAV encoder to be used by MicRecorder
  4. var wavEncoder:WaveEncoder = new WaveEncoder( volume );
  5. // we create the MicRecorder object which does the job
  6. var recorder:MicRecorder = new MicRecorder( wavEncoder );
  7. // starts recording
  8. recorder.record();
  9. // stop recording
  10. recorder.stop();

复制代码

当开始录制时,RecordingEvent.RECORDING事件被触发,并给出时间的信息。 当它停止录音时,Event.COMPLETE事件触发,你可以使用一个简单 的FileReference 对象将Micorder.output字节保存成音频流(作为一个wav):

  1. recorder.addEventListener(RecordingEvent.RECORDING, onRecording);
  2. recorder.addEventListener(Event.COMPLETE, onRecordComplete);
  3. private function onRecording(event:RecordingEvent):void
  4. {
  5. trace ( event.time );
  6. }
  7. private function onRecordComplete(event:Event):void
  8. {
  9. fileReference.save ( recorder.output, “recording.wav” );
  10. }

复制代码

您还可以重播录制好的WAV文件,通过使用非常优秀的as3wavsound库将原始的wav文件传递给WavSound对象:

  1. private function onRecordComplete(event:Event):void
  2. {
  3. var player:WavSound = new WavSound(recorder.output);
  4. player.play();
  5. }

复制代码

MicRecorder对象默认依赖于默认的麦克风设备,但在创建MicRecorder对象时,你可以更换Microphone实例:

  1. // a specific Microphone instance can be passed
  2. var recorder:MicRecorder = new MicRecorder( wavEncoder, microphoneDevice );

复制代码

您可以在这里下载到所有东西。

在ActionScript 3中动态加载类

Loading
classes dynamically in ActionScript 3 is easy, but there are a couple of tricks
to keep in mind.

ActionScript 3动态加载类很容易。有一些窍门便于使用。

First of all, to load a
class dynamically, use the
 flash.utils.getDefinitionByName function.
Be sure to pass in the fully qualified class name, like this:

首先,加载一个动态类可以使用flash.utils.getDefinitionByName
方法。确保使用的是完整的类名,例如:

var MyClass:Class =
getDefinitionByName("com.mydomain.package.MyClass") as Class;

var myInstance:MyClass = new MyClass();

 

Easy enough. But there’s
something to watch out for. Class definitions only get compiled into your SWF
if they’re declared somewhere in your code. In other words, if
 MyClass was never declared, the class definition wouldn’t be included in your SWF,
and you would get a runtime error when trying to load it dynamically. (Note
that this is not the case for classes native to the runtime — only your own
custom classes.) Even importing the class isn’t enough to get it included — it
must actually be declared.

很容易做到。但是有一些需要注意。如果他们使用在代码的某个地方,类的声明只编译到您的SWF中。换句话说,当它试图动态加载时,如果MyClass从未引用,类定义将不包括在您的SWF,你会得到一个运行时错误。 (请注意,这不是对原生类(即FLASH PLAYER自带的)情况只有你自己的自定义类。)即使引入类是不够的,得将它包含进去它实际上必须调用。

There
are two ways to work around this issue:

有两种方法解决这个问题:

1.          
Declare the class somewhere
in the code
.
在代码中的某个位置声明这个类

2.          
Use a command line
argument to force the class definition to be included.
Below
is an example of declaring the class before loading it dynamically:
使用命令行参数来强制类定义应包括在内。

下面是一个动态加载它之前宣布的类的例子:

MyClass;

// or

var mc:MyClass;

var MyClass:Class =
getDefinitionByName("com.mydomain.package.MyClass") as Class;

var myInstance:MyClass = new MyClass();

This
works fine, but in my opinion, it may defeat the purpose of loading a class
dynamically. Usually you want to load classes dynamically because you’re not
sure until runtime which class you’re going to want. If you knew which classes
you wanted before you loaded them dynamically, you could just instantiate them
directly.

The other option is to use
the mxmlc
 -includes compiler argument like
this:

这个工作得很好,但在我看来,它可以达到动态加载一个类的目的。通常你要动态加载的类,因为不是在你当前的代码中,直到运行时你会想知道。如果你想知道哪些类,然后再加载它们的动态,你可以只直接实例。
另一种选择是使用mxmlc –includes 编译器这样:

-includes=com.mydomain.package.MyClass

 

Now,
the class definition will be compiled into your SWF, and you can load it
dynamically anytime you want without ever having to declare it.

现在定义的类被编译到你的SWF中,你可以在任何没有声明他的情况下,随时动态加载它。

To
specify compiler arguments in Flash Builder, follow these steps:

具体在Flash Builder中的编译参数,遵循下列步骤:

1.          
Right-click on your
project.
右键你的项目

2.          
Choose “Properties”.选择“属性”

3.          
Select “Flex
Compiler”
.
选择“Flex 编译”

4.          
Enter your arguments
in the “Additional compiler arguments” section.
输入你的参数在“Additional compiler arguments”选项中

As an aside, you can use
the
 flash.utils.getQualifiedClassName andflash.utils.getQualifiedSuperclassName functions
to get the fully qualified class name of an object instance.

同时你可以使用

flash.utils.getQualifiedClassName flash.utils.getQualifiedSuperclassName
方法获得完整的类名和对象实例。

Flex技术在企业级开发中的应用

作者 池建强 发布于 2010年6月21日 下午8时59分


从我个人的从业经历来看,在长达十几年的软件研发过程中,无论是研发的产品或实施的项目,大部分是在为企业客户提供服务。当然,期间我还从事过两年左右的互联网应用的开发。早期的互联网应用开发和企业级应用开发的区别还是很明显的,无论是技术、架构、业务和用户体验,都有很大的不同。举个简单的例子,比如开发语言,最早在2000年左右,大家都用Perl和Asp做网站,后续陆续开始使用PHP、Ruby和Python这样的动态语言来构建丰富多彩的互联网应用,当然这其中也少不了Flex技术。而为企业客户构建的应用,则更多地倾向于静态语言,比如Java和C#等。当然随着技术的发展,这两者之间的交集越来越多,大家会越来越多的发现,很多大规模的互联网站点是基于Java或C#构建的,也有一些企业应用开始使用动态语言。这一点也很明显地展示了企业级应用与互联网的融合。


说了这么多,需要为企业级应用系统做一个定位。事实上这个概念在业界并不是十分清晰,没有一个明确的定义,什么是企业级,为什么叫企业级呢?有的观点是从系统规模上划分,有的是从团队规模上划分,有的是从开发周期上划分。我个人对企业级应用系统的定义比较简单,主要是用来区分互联网应用和个人软件。什么是互联网应用呢,四大门户(如新浪、网易等)、百度和淘宝、各种SNS网站、博客系统和微博系统等等;个人软件呢,就是指安装在个人PC上的客户端软件,例如编辑器、绘图软件、开发工具等。这两种类型的应用和软件受众都是普通大众,而企业级应用系统的受众是企业客户,是为企业服务的,企业级应用系统的使用者是企业内外部客户以及与企业业务关联的人员。

什么是企业级应用?

2009年,在技术层面可以说是一个风起云涌的年份,互联网像一条巨大而充满吸力的纽带,把各种IT服务相关的技术、应用和实现都吸引过来,形成了一个完整而庞大的互联网生态圈。那身处其中的我们认识到了什么呢?随着我们持续的通过技术、平台、产品和项目为企业客户提供服务,我们发现企业应用不再局限在Intranet内部,企业应用系统的互联网化趋势越来越明显,主要体现在以下三个方面:

  1. Intranet到Internet的转变:企业应用系统由局域网转到互联网,企业应用开始要求多浏览器支持,国际化的支持,全球业务的互联互通。同时企业应用不再满足简单的表单和表格界面,富互联网应用(RIA)的需求应运而生,企业客户越来越倡导用户体验,RIA也是我们后续要重点讨论的话题。
  2. 企业应用的内容转变:除了企业的核心业务系统,这样一些需求渐渐浮出水面:交互性门户系统、电子商务平台、企业级2.0(博客、Wiki、RSS和微博等)、企业级SNS(社区平台)和无线企业应用等。
  3. 需求的转变:除了功能需求,客户对于安全、性能、大容量和大并发等特性愈发关注,在可预见的未来,企业应用一定是构建在互联网而非局域网,可能是在云端,也可能在其他的新技术上实现

作为现阶段的IT服务提供商,必须从技术层面和业务层面去适应和支撑这样的趋势变化,否则我们会变得步履艰难。
好了,谈了这么多,主要讲了一个趋势的变化。下面我们来看一下在互联网和企业应用中都能发挥巨大作用的RIA技术。

RIA简介和选择Flex的原因

RIA技术的全称是富互联网应用(Rich Internet Application),RIA首先应该是一个网络应用程序,其次它还要具有桌面应用程序的特征和功能。可以这样理解,如果你的桌面程序能在网络上(目前主要是基于浏览器)运行,并且能保持其原来的功能和特征,那么我们就可以称它们为RIA应用(富互联网客户端应用)。

目前RIA的主流技术主要包括Adobe公司的Flex,微软公司的Silverlight和Java阵营的JavaFX。Flash由于Flex SDK的支撑,很早就从单纯的动画展示转入RIA领域,而且由于Flash的普及,Flex目前应该是三大技术体系中市场份额最大、应用最广泛的技术;Silverlight是微软推出的跨浏览器和跨平台的插件,能在微软的.NET上交付炫目的多媒体体验和有丰富交互功能的Web应用,已经对Flex有了很大的冲击;JavaFX是未被收购前的Sun公司在2007年推出的用来对抗Flex和Silverlight的桌面应用,但由于起步较晚,目前应用并不广泛,但其Java的原生性和开源性质对Java社区的开发人员还是有很大的吸引力。

基于以上三种技术,我们最终选了Flex做企业级的富客户端应用开发,虽然苹果公司的CEO乔布斯老师已经开始公开表示不在苹果的移动设备上支持Flash,尽管HTML5和CSS3来势汹汹,但是在企业应用开发这样一个不是非常激进的领域,考虑到Flash广泛的群众基础,最终我们还是选择了Flex。

事实上在互联网应用中,RIA技术早已散发出夺目的光辉和迷人的魅力,无论是电子商务中的产品展示,还是SNS网站上的交友游戏,亦或是游戏和教育领域里的交互性设计,已经为广大互联网用户带来了无以伦比的客户体验。那么在企业应用系统中,企业客户还在满足于呆板的树形结构、简单的表格和文字性质的描述吗?就我们的经验来说,2008年开始,企业客户就开始向我们提出这样的需求了,例如操作复杂的表单、图形化内容展示、动态报表绘图、图形化流程配置、流媒体视频播放和文档播放等,这一切都是在浏览器上进行的。对于大部分这样的需求,我们都是笨手笨脚的使用了Javascript、Extjs、Jquery和Activex等前端技术勉强实现了,对于不能实现的需求,我们只能腼腆的告诉客户,这些功能我们还实现不了,或者说浏览器不应该有这样的操作等等,当然这种话事实上也很难说服我们自己。

直到我们决定采用Flex技术来实现富客户端操作之后,我们才发现很多问题在Flex面前迎刃而解了。在Full-Stack系统中,如果Ajax技术和Flex技术配合形成前端组件体系,将大大提高开发效率、系统性能和改进客户体验。

Flex是Adobe公司开发的可以输出成基于Flash Player来运行的互联网应用程序。Flex 基于标准的语言,与各种可扩展用户界面及数据访问组件结合起来,使开发人员能够快速构建具有丰富数据演示、强大客户端逻辑和集成多媒体的应用程序。Flex目前最新版本是4,一个Flex应用程序应该有两种语言代码完成,那就是ActionScript和MXML。ActionScript是一种面向对象的脚本语言,MXML则是一种标记语言,非常类似于大家所熟悉的超文本标记语言(HTML),扩展标记语言(XML)。简单来说MXML用来描述界面,ActionScript用来处理业务逻辑。

以下是Flex的一些基本特点,也是我们采用Flex的重要原因之一:

  1. 可视化开发,通过拖拽方式开发界面
  2. 对于有XML和脚本开发经验的人员,很容易上手
  3. 可实现表现层与后台的真正分离
  4. 丰富的媒体支持和动画效果,良好的用户体验
  5. 支持多种通讯方式和数据格式
  6. 同时支持客户端和浏览器模式
  7. 跨平台,支持各种操作系统和浏览器

基于Flex构建企业级应用开发平台

与普通开发者使用Flex技术不同的是,我们采用了一种组件化的方式引入Flex,这是因为我们对这部分技术的引入并不是从零开始,为了应对企业级应用开发的需求,我们很早就构建了一个企业级应用开发平台——GAP(Global Application Platform)平台,这是一个Full-Stack的应用开发平台,除了底层框架、组织权限、工作流引擎、数据字典等等,还包括界面框架、通用Web控件,Ajax控件等,Flex的引入是对现在平台的补充和完善。

基于以上考虑,我们对Flex的应用分为三个阶段。

首先,进行Flex与GAP平台的整合,包括组件化集成、前后台通信机制的设计,在这一阶段我们主要采用了ant和xdoclet技术进行组件的打包、资源文件的合并,采用Spring BlazeDS Integration技术与GAP平台框架进行交互访问,通信方式采用了Felx提供的RemoteObject。(Spring BlazeDS Integration是Adobe与Spring共同联合开发一个开源项目,其目标是开发者可以利用Spring开发模型通过Flex、BlazeDS、Spring以及Java技术创建RIA )。

其次,构建Flex图形组件框架,对Flex提供的控件进行封装、扩展,形成针对企业应用的个性化RIA控件库。在这一阶段我们主要是基于Adobe的开源项目Cairngorm进行构建的。Cairngorm是一个基于Flex技术的微内核的MVC框架,设计简洁而易于扩展,非常适合构建自己的RIA控件库。

第三,使用Flex技术解决企业应用中的实际问题。

下面我们主要从实际应用的角度来看一下Flex在企业级系统开发中能够做什么。

一、企业组织结构的图形化展示

凡是为企业开发过系统的人都知道,企业的组织结构管理和权限管理几乎是每个项目或产品不可或缺的基础组件之一。从功能角度分析,GAP平台的组织权限系统已经非常完善了,无论是多关系的组织结构、细粒度的权限控制,都可以非常好地满足客户对于组织管理和安全的需求。直到有一天一个客户提出,能不能把那棵呆板的组织机构树变成组织结构图,如果能支持图形化操作就更好了。听到项目组给我们反馈的这个需求,第一个反应就是拒绝,因为实现起来太麻烦了。

原有的组织结构树如下图所示:

客户需要的展示方式可能是:

也可能是:

同时企业客户还希望能够进行图形化操作管理,这种功能如果通过Javascript来实现无疑是困难的,而Flex技术在处理类似的功能时则具备先天的优势。首先Flex是一种可以运行在网络上的客户端技术,它提供了一套成熟的图形化控件和类库,可以很容易的实现图形和布局控制。同时,Flex可以通过多种通讯方式(HttpService、RemoteObject、WebService)与Server端的服务进行数据交互,使得图形化操作变得非常简单,例如把人员拖到另一部门,双击显示该机构的详细信息等。最终我们也是通过Flex技术实现了客户的需求。

二、表单操作

Flex同样可以构造出复杂的表单功能,操作便捷,响应迅速,适应企业不同场景的需求。例如这样一个基于Flex技术的表格,看似简单,实际上是包含了排序、过滤、表头拖拽、表头固定、合并等功能,类似的功能如果用Ajax的方式来实现代码量会很大,但是在Flex中,这些特性基本上是原生的,或经过简单开发即可实现,代码量非常小,而且性能远远超过普通列表控件和Ajax列表控件。经测试,在同一场景下,通过Flex列表控件加载1000条数据,平均响应时间是0.1秒,Ajax控件0.5秒,普通刷新页面的方式最慢,从发出请求到返回并显示数据,大概需要1秒钟。

三、流程设计器

2004年我们开始研发工作流平台,其核心功能是工作流引擎和流程设计器。为了开发出Web-Based(基于Web)的流程设计器,我们投入了极大的人力物力,最终采用ActiveX控件实现了复杂的流程设计、流程监控等功能。到目前为止基于浏览器的流程设计和监控仍然是我们的功能特色之一。但是随着技术的发展,基于Activex控件的流程设计器越来越显示出局限性,例如不支持多浏览器,不支持国际化,在各种Windows和IE版本中的自动安装经常会出现问题,最重要的是扩展起来比较复杂。

下图就是基于ActiveX技术的流程设计器。看上去很美,但的确存在着问题。事实上我们正在积极准备基于Flex技术对流程设计器进行改造,改造完成后,上面提到的问题即可迎刃而解。技术的进步带来应用的改进,所以我一直强调,技术创新才是软件企业的原动力。

四、动态图表

通过图表描述业务数据,加强数据的展现能力。每个图表都可以支持参数的动态变化,响应点击事件,实现动态效果,而这些几乎不需要额外编写代码。传统的报表工具或制图工具,例如BIRT或JFreeChart等,处理报表图片时都是通过流的方式输入静态图片,一旦生成,就是静态页面,用户无法与之交互。而使用Flex进行图表的开发,则可以轻易突破 这一障碍,Flex提供了大量内置的图表控件,用来进行图表展示,在浏览器上的表现方式为Flash,可以在生成图表之后,继续实现前后台数据的交互和展示。例如使用CandlestickChart控件来实现蜡烛图的动态展示。从一下两张图可以很清楚的看出,通过选择不同的选项,可以显示不同的趋势变化,点击图元还可以显示该图元的相关数据。这些复杂的数据操作基本上是由CandlestickChart控件完成的,开发者只需要组装数据即可。事实上要实现这个功能样例,只需要100行左右的代码。

五、知识管理

企业信息化10年,积累了大量的数据、文件、视频需要进行展示,通过Flex可以构建通用的播放器,利用流媒体技术、全文检索技术实现企业内部的知识管理。类似的技术和功能在互联网上已经不是什么新鲜事了,例如slideshare、youtube,国内的豆丁、优酷等,这些网站要么是基于文档的管理,要么是基于视频的处理,但它们的共同点是核心技术都采用了Flex。对于互联网领域,领域的细分无疑是非常明智的,但是在企业级应用领域,企业客户更关注的是应用的整合,我们拟基于Flex技术开发通用的前台播放器,可以同事播放视频和文档,后台采用Flash Midea Server和文件服务器,结合内容管理、全文检索和标签云技术,实现企业信息数据的全流程管理。

六、动态商品展示

基于Flex技术的动态商品展示已经在很多中大型电子商务公司应用,通过Flex可以实现很多眩目的效果来进行商品展示,同时可以动态设置商品的属性,让客户更好的了解商品细节,增加客户粘度。这样的技术在企业级应用中同样适用,主要业务领域应该是企业的电子商务平台。

七、全键盘操作

某些特殊领域的客户,比如要快速录入大量数据,就会对全键盘操作有需求,要求在浏览器做的应用要能像Excel一样全键盘操作,除了支持Tab加Enter键之外,还需要能够支持四个方向键的操作支持,就像是Excel一样,当单元格中的文字处于全选状态的时候可以通过方向键进行导航。这样的功能用普通的Javascript实现一个是复杂,而是会降低网页性能。但用Flex来实现这种特殊场景就完全没由这些问题,本质上来说Flex还是客户端技术,可以很好的提供键盘支持。

结束语

企业客户越来越认识到RIA技术对于企业应用的重要性,而Flex就是实现RIA重要的选择之一。但是,无论技术也好,创新也好,有用的才是好的,不能因为技术而使用技术,因为创新而创新。就Flex而言,从根本上说它还是一个客户端程序,所以一定会比普通的Web页面更多的占用更多的客户端资源,所以我不建议大家在构建企业应用时大量采用Flex技术,一定要用其所长。Flex在互联网领域早已大放异彩,那么它是否能成功应用于企业应用的开发呢?不必拭目以待,我想这个答案无疑是肯定的。

关于作者

池建强,12年软件从业经验,先后在洪恩软件和用友集团任职。目前在用友集团瑞友科技IT应用研究院任副院长,负责公司基础应用平台的研发和整个公司的技术管理。主要关注领域:企业应用软件平台研发、领域驱动设计,OSGi,动态语言应用、云计算、移动互联等相关技术。

Flex 3 与 Flex 4 beta 之间的区别

Flex 4(代码名:Gumbo)beta 发行版在 Flex 3 基础上做出重大改动。Flex 4 beta 引入了一个新的组件和外观架构。但是作为 Flex 3 开发人员,您在使用 Flex 4 beta 编译 Flex 3 应用程序时可能不会遇到太多难题,因为新发行版的目的之一是保持与 Flex 3 的向后兼容性。

在本文中,我将 简要概述 Flex 4 beta 的主要目的和架构区别并介绍组件、布局、状态使用和效果方面的变化。我还将针对使用 Flex 4 beta 编译 Flex 3 应用程序时遇到的情况回答一些提问。本文无法涵盖 Flex 4 的所有新增功能。有关这些信息,请参阅 Matt Chotin 的Flex 4 SDK beta 的新增功能*一文。

本文中的术语 Halo 组件是指 Flex 3 原先包含的组件。术语 Spark 组件是指 Flex 4 beta 中的一套新组件。

要求

为了充分利用本文,您需要

Flex 4 SDK beta

必备知识

本文假设您熟悉 Flex 3 Framework。

将应用程序迁移到 Flex 4 beta

将 Flex 3 应用程序迁移到 Flex 4 beta 时,步骤并不复杂。除了一些缺陷修复以及默认主题稍有变化,您的应用程序通常可以像 Flex 3 中那样正常运行(或更好)。但您必须注意几点。

播放器依赖性

请务必针对 Flash Player 10 进行编译。Flex 4 beta 需要 Flash Player 10 支持。

字体选择器需要一个名称空间

CSS 字体选择器将 Flex 类命名为 style。例如,以下是 Button 和 DateField 的字体选择器:

Button {
    cornerRadius: 10;
}
DateField {
   color: #780800;
}

从 Flex 4 beta 开始,当应用程序使用字体选择器时,需要名称空间。如果您只在 Flex 应用程序中使用 MXML 2006 名称空间,请将以下默认名称空间声明添加到 CSS 中:

<mx:Style>
    
@namespace "http://www.adobe.com/2006/mxml";
…
</mx:Style>

如果在应用程序中使用多个名称空间,您需要在 CSS 中提供各个名称空间。有关示例,请参阅本文稍后部分中的 Flex 4 beta 中的名称空间与包

此 外,如果应用程序使用 StyleManager.getStyleDeclaration("Button") 等方法,字体选择器必须包含它的包。例如,对 getStyleDeclaration() 的调用将改为 StyleManager.getStyleDeclaration("mx.controls.Button")。

主题更改

Flex 3 (Halo) 组件的默认主题目前是 Spark 主题。因此,当您使用 Flex 4 beta 编译应用程序时,它可能会自行调整外观和大小。但是,如果要使用 Flex 3 的外观,您还是可以做到的,因为 Flex 4 beta 包含 Flex 3 的 Halo 主题。要使用 Halo 主题进行编译,您可以使用-compatibility-version=3.0 标志或使用 -theme 作为附加编译器参数来编译应用程序。在 Flash Builder 4 beta 中,您可以通过更改“Properties”(属性)面板的“Flex Compiler”(Flex 编译器)部分中的“Additional Compiler Arguments”(其他编译器参数)设置做到这一点(请参阅图 1)。如果要使用其他编译器参数,请确保 framework/themes/Halo 目录包含在您的源路径中。

propertiesPanel.JPG

图 1.设置其他编译器参数

如果您选择使用新的 Spark 主题,请注意许多可用于 Halo 主题的样式无法用于 Spark 主题。Spark 主题只支持数量有限的样式,包括baseColorcolorcontentBackgroundColorfocusColorsymbolColorselectionColor 和 rollOverColor。要使用 Spark 主题更改组件上的边框或圆角等可视部分,您需要创建一个自定义外观。Flex 4 beta 还加入了一种设计用于快速模型的线框外观。

除了主题更改外,Flex 4 beta 应用程序的默认预下载器也已经改为 mx.preloaders.SparkDownloadProgressBar。这个更轻量级的预下载器可以缩短一些启动时间。如果要使用 Flex 3 预下载器,您只需更改一行代码。在 Application 标签中添加以下内容:preloader="mx.preloaders.DownloadProgressBar"

如 果要将应用程序从 Flex 3 迁移到 Flex 4 beta,我不建议将各个 Flex 3 Halo 组件替换为它们对应的 Flex 4 beta 组件。这样投入时间可能并不是一个好方法。您应当为新的应用程序转而使用 Flex 4 beta 组件架构。

Flex 4 beta 架构变化概述

Flex 4 beta 的重要主题之一是“用心设计”。这个目标涉及在设计人员和开发人员之间创造一个更顺畅的工作流程。为了帮助实现这一点,该框架将组件可视部分与其剩余行为 明确划分开。在 Flex 3 中,组件的代码包括以其行为、布局和可视变化为中心的逻辑。在 Flex 4 beta 中,组件被划分为不同的类,各个类负责处理特定的行为。

Gumbo 架构文档*中的说明如下:

主组件类,即类名与组件的 MXML 标签名匹配的那个类封装了组件的核心行为。这包括定义组件调度的事件、组件表示的数据、接通作为主组件组成部分的任何子组件以及管理和跟踪内部组件状态(稍后我们将详细讨论状态)。

与 之相应的组件类是一个外观类,它负责管理与组件的可视外观相关的一切内容,包括图形、布局、表示数据、更改不同状态中的外观以及从一个状态过渡到另一个状 态。在 Halo 模型中,Flex 组件外观是只负责组件的某个图形部分的资源。更改组件外观的任何其他方面,如布局或状态可视化,需要将组件子类化并直接编辑 ActionScript 代码。在 Gumbo 模型中,所有这一切都在外观类中以声明方式进行定义,并且主要通过名为 FXG 标签的新图形标签进行定义。”

要进一步了解 Flex 4 beta 中新的图形标签,您可以阅读 FXG 1.0 规范*

作为上述架构的示例,您可以参考 spark.components.Button 类的代码。这个类只包含以组件行为为中心的逻辑。在外观类 spark.skins.default.ButtonSkin 中定义这个恶组件的所有可视部分。

考虑到性能,Flex 4 beta 为开发人员提供了构造块,可供他们根据需要选择功能。默认情况下,关闭并非所有应用程序都需要的重量级功能,如滚动和虚拟化。

Flex 4 beta 中的名称空间与包

在将 Flex 3 类原封不动地保留在同一 mx.* 包中的同时,Flex 4 beta 为组件、核心类、效果、滤镜、布局、基元、外观和 utils 引入了 spark.* 包。

Flex 4 beta 提供一套新的组件和效果,它们与 Flex 3 组件共享许多相同类名。为了避免 MXML 中出现名称冲突,Flex 4 beta 随附四个独特的名称空间:MXML 2006、MXML 2009、Spark 和 Halo。

MXML 2006:之前版本的 Flex 中使用的旧版 MXML 语言名称空间。使用 Flex 4 beta 编译的 Flex 3 应用程序可以继续使用这个名称空间。

URI:http://www.adobe.com/2006/mxml

默认前缀:mx

MXML 2009:新的 MXML 语言名称空间。这纯粹是一个语言名称空间,包含组件标签。

URI:http://ns.adobe.com/mxml/2009
默认前缀:fx

Spark:这个名称空间包含所有新的 Spark 组件。它应当与 MXML 2009 语言名称空间一起使用。

URI:library://ns.adobe.com/flex/spark
默认前缀:s

Halo:这个名称空间包含所有 Halo 组件。它应当与 MXML 2009 语言名称空间一起使用。

URI:library://ns.adobe.com/flex/halo
默认前缀:mx

以下是使用 MXML 2009、Spark 和 Halo 名称空间创建一个简单的 Flex 4 beta 应用程序的简明示例。它使用一个 Halo DateChooser 和一个 Spark Button。

<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"  
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo">
    
    <mx:DateChooser id="main_calendar" x="20" y="20"/>
    <s:Button label="submit" x="220" y="20"/>
 
</s:Application>

Flex 4 beta 还在 CSS 中加入了多名称空间支持。如果将 MXML 2009、Spark 和 Halo 名称空间与字体选择器一起使用,您需要在 CSS 定义中定义一组名称空间以避免名称冲突。

以下是一个将字体选择器用于 Halo 和 Spark 组件的 CSS 示例:

<fx:Style>
 
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/halo";
 
    s|Button {
        color: #FF0000;
    }
 
    mx|DateChooser {
        color: #FF0000;
    }
 
</fx:Style>

默认 Property 和 Declarations 标签

在 Flex 4 beta 发布之前,Flex 语言允许 Application 根标签包含可视子代和非可视子代。可视子代与 addChild() 一起添加到Application,非可视子代则作为属性声明。随后,表示新属性声明的非可视子代不可以作为 Application 的直接子代。您可以将这些非可视子代添加到 <fx:Declarations> 标签下。这包括效果、验证程序、格式化程序、数据声明和 RPC 类等非可视子代。以下是一个简短的示例:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
  xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Declarations>
        <s:Fade id="fadeEffect" target="{targetButton}" alphaFrom="1" alphaTo="0" />       
    </fx:Declarations>
    <s:Button id="targetButton" />
    <s:Button label="play effect" click="fadeEffect.play()" x="80" />
</s:Application>

新增组件和容器

如前所述,Flex 4 beta 引入了许多使用新架构的新组件类,它们应当可以令外观和其他自定义操作更简单。下表列出了 Flex 3 Halo 组件及其 Flex 4 beta Spark 对应组件:

Flex 3 Halo 组件 Flex 4 beta Spark 组件
mx.controls.Button spark.components.Button
mx.controls.ButtonBar spark.components.ButtonBar
mx.controls.CheckBox spark.components.CheckBox
mx.controls.ComboBox spark.components.DropDownList(不可编辑)
mx.controls.HorizontalList spark.components.List(带一个 HorizontalLayout)
mx.controls.HRule spark.primitives.Line
mx.controls.HScrollBar spark.components.HScrollBar
mx.controls.HSlider spark.components.HSlider
mx.controls.Image spark.primitives.BitmapImage
mx.controls.LinkBar spark.components.ButtonBar(带一个自定义外观)
mx.controls.LinkButton spark.components.Button(带一个自定义外观)
mx.controls.List spark.components.List
mx.controls.NumericStepper spark.components.NumericStepper
mx.controls.RadioButton spark.components.RadioButton
mx.controls.RadioButtonGroup spark.components.RadioButtonGroup
mx.controls.TextArea spark.components.TextArea
mx.controls.TextInput spark.components.TextInput
mx.controls.TileList spark.components.List(带一个 TileLayout)
mx.controls.ToggleButtonBar spark.components.ButtonBar
mx.controls.VideoDisplay spark.components.VideoPlayer
mx.controls.VRule spark.primitives.Line
mx.controls.VScrollBar spark.components.VScrollBar
mx.controls.VSlider

spark.components.VSlider

mx.core.Application spark.components.Application
mx.core.Window spark.components.Window
mx.core.WindowedApplication spark.components.WindowedApplication
mx.containers.Canvas spark.components.Group
mx.containers.HBox spark.components.HGroup
mx.containers.Panel spark.components.Panel
mx.containers.Tile spark.components.Group(带一个 TileLayout)
mx.containers.VBox spark.components.VGroup

Adobe 鼓励您与 Spark 组件一起使用 Halo 组件和容器。由于 Adobe 在同一基类 (UIComponent) 上构建组件,Spark 与 Halo 之间应当可以实现全面的可互操作性。下表列出了目前没有 Spark 直接等效类的组件和容器。

Flex 3 类,没有直接的 Flex 4 beta 对应类
mx.controls.Alert
mx.controls.ColorPicker
mx.controls.DataGrid
mx.controls.DateChooser
mx.controls.DateField
mx.controls.Menu
mx.controls.MenuBar
mx.controls.PopUpButton
mx.controls.PopUpMenuButton
mx.controls.ProgressBar
mx.controls.RichTextEditor
mx.controls.TabBar
mx.controls.Tree
mx.containers.Accordion
mx.containers.ApplicationControlBar
mx.containers.ControlBar
mx.containers.DividedBox
mx.containers.Form
mx.containers.Grid
mx.containers.TabNavigator
mx.containers.TitleWindow
mx.containers.ViewStack

状态语法中的变化

Flex 4 beta 将状态功能升级为一个全面的 MXML 语言功能。因此,您可能会发现状态更灵活、更直接。新的状态语法内联程度更高,允许在上下文中指定状态特定变化。以下是 Flex 4 beta 语法中的主要区别:

  • 只有状态是在状态阵列中定义的。
  • 在新的状态语法中,不能使用 AddChild 和 RemoveChild。您必须使用 includeIn 和 excludeFrom 属性在组件上定义组件在特定状态中的角色。

在以下 Flex 3 示例中,仅当文档的 currentState 为 submitState 时,才使用状态包含一个 Button 并删除一个 TextInput。对于较复杂的状态,这种方法可以做到十分详细。

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:AddChild relativeTo="{loginForm}" >
           <mx:Button label="submit" bottom="10" right="10"/>
        </mx:AddChild>
        <mx:RemoveChild target="{firstTextInput}"/>
    </mx:State>
</mx:states>
 
<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />

以下是一段使用 includeIn 和 excludeFrom、更简单的 Flex 4 beta 代码。

<s:states>
    <s:State name="submitState" />
</s:states>
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
    <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>
</s:Group>
  • SetPropertySetStyle 和 SetEventHandler 已替换为新的语法,它允许您限定具备特定状态标识符的 MXML 属性值。

在以下 Flex 3 示例中,代码为 submitState 中的一个 Button 定义了属性、样式和事件。

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="submit" />
        <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
        <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>
    </mx:State>
    <mx:State name="clearState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="clear" />
        <mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" />
    </mx:State>
</mx:states>
 
<mx:Button id="submitButton" />

在 Flex 4 beta 中,代码如下:

<s:states>
    <s:State name="submitState" />
    <s:State name="clearState" />
</s:states>
 
<s:Button label.submitState="submit" textDecoration.submitState="underline"
   click.submitState="trace('done')" click.clearState="emptyDocument()"
   label.clearState="clear" textDecoration.clearState="none"/>
  • 组件不能再处于未定义状态或空状态。默认情况下,声明的第一个状态是组件的初始状态。
    当文档使用 MXML 2009 语言名称空间时,可以使用新语法。可以混合使用旧版语法和新版状态语法。只有 MXML 2006 名称空间中可以使用旧版语法。

此外,各个组件现在支持外观类中定义的一组状态,这使得根据组件状态应用可视变化更加简单。例如,如果查看 Spark Button 的外观,您会发现已定义以下状态:

<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states> 

ButtonSkin 类定义了各个状态中 Spark Button 在可视方面的变化。

以上只是简要介绍了新的 Flex 4 beta 状态语法。有关更多详细信息,请参阅增强的状态语法规范*

效果中的变化

Flex 4 beta 的效果架构改进显著。虽然 Halo 效果只能用于不基于 UIComponent 的控件,Spark 效果可用于任何目标,包括框架中的新图形基元。所有这些效果类都包含在 spark.effects.* package 中。由于 Spark 效果可用于 Halo 组件、Spark 组件和图形基元,Adobe 建议您在今后的应用程序中使用 Spark 效果类。

我并未赘述这一问题,因为您可以通过 Chet Haase 的 Adobe Flex 4 SDK beta 中的效果一文了解效果类中新增功能的更多详细信息。

布局中的变化

之 前的 Flex 版本在各个控件中定义组件和容器布局。因此,List、TileList 和 HorizontalList 等组件都共享布局以外的相同功能。而它们的布局逻辑仍在这些组件类中进行定义。在 Flex 4 beta 中,布局已与组件剥离开来。现在,Application、List、ButtonBar 和 Panel 等 Spark 组件可以通过声明方式定义布局。在所有组件中,Group 类负责管理包含,而 Group 的子代的布局则委派到相关的布局对象。布局除了 FXG 图形基元,还支持 Spark 和 Halo 组件。甚至可以在运行时更改布局。

作为开发人员,您可以轻松编写自定义布局并将它们切入或切出个别组件。以下是定义垂直 List、水平 List 和拼贴 List 的一个示例。

垂直 List(Spark List 的默认布局是 VerticalLayout):

<s:List />

水平 List:

<s:List>
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>
</s:List>

拼贴 List:

<s:List>
    <s:layout>
        <s:TileLayout />
    </s:layout>
</s:List>

如前所述,Flex 4 beta 架构旨在为开发人员提供构造块,供他们根据需要选择功能。默认情况下,关闭虚拟化和滚动。要增加 Group 上的滚动栏选项并开启虚拟化,您需要:

1) 在布局对象上将 useVirtualLayout 设为 true 2) 将一个 Scroller 组件添加到 Group。

以下是对 Spark Panel 使用虚拟化和滚动的一个示例:

<s:Panel title="Horizontal Panel" width="300" height="220" left="20" top="20">
    <s:Scroller width="100%" height="100%">
        <s:Group>
           <s:layout>
               <s:HorizontalLayout useVirtualLayout="true" />
           </s:layout>
           <s:TextInput />
           <s:Button label="clear" />
           <mx:DateChooser />
           <s:Button label="submit" />
        </s:Group>
    </s:Scroller>
</s:Panel>

有关 Flex 4 beta 中的所有布局增强(包括对变换的更好支持)的更多信息,请参阅 Spark 布局规范*

使用文本

所有 Spark 组件都使用 Flash Player 10 中的新文本引擎。这些新类为控制文本度量标准、垂直文本以及连字、双向文本等字形元素提供了低级支持。并且,设备字体现在具备嵌入字体的大部分功能,可以 对这些字体消除锯齿、旋转和设置样式。Flex 4 beta 在使用文本的所有 Spark 组件中用到了这一功能。有关 Flex 4 beta 提供的文本基元和文本组件的更多信息,请参阅 Flex 4 功能和迁移指南*中的“文本基元”部分。

Spark 组件现在还使用 Flash Player 10 和 AIR 1.5 中的 DefineFont4 嵌入字体格式。从最新的 beta 版开始,Halo 组件无法再使用 DefineFont4 格式。将 Spark 和 Halo 组件混合在一个应用程序中并嵌入字体时,这会造成一些开销。就目前而言,如果要对所有组件使用同一种嵌入字体,您需要嵌入字体两次,即使用针对 Spark 组件的 DefineFont4 和针对 Halo 组件的 DefineFont3 各嵌入一次。

以下是一个为使用 Spark TextInput 和 Halo DataGrid 的 Flex 4 beta 应用程序嵌入字体 Arial 的示例。

<fx:Style>
 
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/halo";
 
    @font-face {
        src: url("arial.ttf");
        fontFamily: "ArialDF3";
    }
 
    @font-face {
        src: url("arial.ttf");
        fontFamily: "ArialDF4";
        cff: true;
    }
 
    s|TextInput {
        fontFamily: "ArialDF4";
        fontAntiAliasType: "normal";
    }
    mx|DataGrid {
        fontFamily: "ArialDF3";
        fontAntiAliasType: "normal";
    }
</fx:Style>

请注意,为 Spark 组件嵌入字体时,您需要在字体定义中指定 cff: true。

为 Spark 和 Halo 组件嵌入字体的解决方案仍处于开发阶段,因此今后这个过程应该会更简单。

与 Flex 3 的向后兼容性

与 Flex 3 一样,您可以使用其他编译参数编译应用程序:

-compatibility-version=3.0.0. 

这个编译器参数允许应用程序使用某些 Flex 3 行为,而不是新的 Flex 4 beta 行为。要获得 Flex 4 beta 中支持使用-compatibility-version 参数的向后兼容性变化的完整列表,请参阅向后兼容性文档*

注意:调用 Flex 3 兼容性时,无法选择性地保留一个 Flex 4 beta 行为变化子集。如果使用参数 -compatibility-version=3.0.0 进行编译,您将获得文档中描述的所有 Flex 3 行为。

后续工作

从 Flex 3 迁移到 Flex 4 beta 有可能没那么痛苦。这个框架旨在尽可能地向后兼容。并且,当您熟悉新架构后,您会发现它其实更“灵活”!有关 Flex 4 beta 功能的更多信息,请访问 Web 帮助*