Now that the industry has turned its attention to the  client-side and the user experience, the quality of web user interfaces can be expected to improve at a very fast pace after ten years of virtual hibernation.

In that context, Flex offers a series of unique features that  can profoundly transform the way people interact with web applications. These features include:

  • Expressiveness (vector graphics)
  • Performance (JIT compiler)
  • Real time (binary sockets and pub/sub messaging)
  • Rich media (video and audio streaming)
  • Offline support (local storage and desktop  client)

None of these features is unique in itself. What is unique  is that all of them are available together in a ubiquitous and extremely lightweight  runtime environment (the Flash virtual machine) that is available today in all  major browsers across all major operating systems.

Expressiveness

One feature that sets Flex apart in terms of expressiveness is  the availability of vector graphics. Using vector graphics, lines, shapes and  images can be represented using geometrical formulas instead of bitmaps. Using  Flex, you have full access to the vector graphics API, but most of the time you  simply use the components in the Flex framework which already leverage vector  graphics extensively.

For example, if you need to draw a red, semi-transparent panel  with rounded corners, all you need to code is:

<Panel backgroundColor="#FF0000" backgroundAlpha="0.5" cornerRadius="6"/>

Although nice and concise, this first example is not revolutionary:  You could get the same result by slicing images. Vector graphics, however, can have  a more transformative impact on user interfaces: they allow you to stretch,  shrink, rotate, flip, or change the shape of objects in any possible way. In  other words, they allow you to make user interface objects behave like real life  objects.

A simple example of an application leveraging vector  graphics to make a user interface element look like a real life object is the  Flickr roulette built by Ely Greenfield:

http://bridge.quietlyscheming.com/flickr/ajax

This is a proof-of-concept, but it shows the potential. Vector  graphics are helpful in a wide variety of applications. For example, in a visual  dashboard, they allow charting components to be redrawn and animated at the  client-side, helping the end-user to better understand data trends and transitions.  Check out a simple example here:

http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html

Imagine the user experience if every click or drill-down required  the charting components to be regenerated at the server-side and then brought  back to the client.
Vector graphics make these smooth and animated transitions  possible. But again, you don’t have to deal with a low level drawing API: these  behaviors are encapsulated in the charting components.

Performance

Poor performance and the lack of a just-in-time compiler are  often pointed to as major shortcomings of the browser. This is another area  where Flex and the Flash Virtual machine can make a difference. Flex  applications are delivered to the client as bytecode, which is executed by the  Flash Virtual Machine with the help of a JIT compiler. This can make a  significant difference in code execution and enable “desktop applications”-like  performance on the web.

Performance is critical for both consumer and business  applications. In a consumer application, it helps produce a fluid user  experience. In business applications, it can for example help process large  amounts of data with “desktop applications”-like responsiveness while  preserving the benefits of the web deployment model.

Real Time

The browser’s request/response model is not great at listening  for events initiated by server processes or by other clients. The Flash Player  supports binary sockets, enabling real time bi-directional communication with  any socket server.

The Flex Message Service builds on top of this  infrastructure and provides a complete publish/subscribe messaging solution, allowing  messages to be exchanged, in real time, between thin clients and servers. The  Flex Message Service also integrates with existing Enterprise solutions systems such as  JMS-based systems.

The messaging and real time infrastructure available in Flex enables collaboration  and data push applications to be built in a scalable and reliable manner while  preserving the lightweight web deployment model.

Rich Media

Video and audio are fast becoming key components of many business  and consumer applications. Video on the web is not new. However the user  experience is often far from optimal: wrong version of the media player  installed, disruptive multi-megabytes download to install the right version, limited  options to interact with the video (beyond the traditional VCR buttons),  limited interactions between the video and the rest of the application.

The Flash Player includes media playing and streaming  capabilities. Because it is available on about 98% of computers connected to  the Internet, it is in fact (and by far) the most ubiquitous media player on  the web, which is why it is being adopted by the major video sites such as  Google Video and YouTube.

Using Flex, video can be a lot more than the passive  streaming experience we are often exposed to on the web… it can be tightly  integrated with the rest of the application. The video can trigger events  during playback, and drive the behavior of other components of the user interface. These  capabilities enable a broad range of new innovative and highly interactive  applications (interactive video tutorials, interactive “ask-the-expert” series,  media portals, in-context videoconferencing/videochat, etc.)

Local Storage and Offline Support

Flex applications can store data at the client-side in a  local data store (known as local shared object). The application can access  (read/write) the local data store while disconnected from the network.

The lightweight desktop player currently under development (and  code named Apollo) will also allow you to run Flex applications outside the  browser. (You can find more information about Apollo here.)

Transforming the developer experience

There is one more aspect of Flex that deserves to be talked about. This one is not about transforming the user experience, but transforming the developer experience…   Developing applications including the innovative capabilities listed above is actually easy. The Flex programming model is  both powerful and elegant: a combination of an XML declarative language to  layout the user interface of the application, and ActionScript, an  ECMAScript-compliant programming language. The Flex programming model also  includes a class library of 100  components.

It’s hard to describe the productivity of a programming model with words, so here are a few examples:

You need to invoke a method in a Java object deployed in the  middle tier and display the result in a DataGrid?

<mx:RemoteObject id="ro" destination="portfolio"/><mx:DataGrid dataProvider="{ro.getStocks.lastResult}" /><mx:Button label="Get Data" click="ro.getStocks()"/>

You need to generate a line chart using data retrieved from a  Web service?

<WebService id="ws" wsdl="sales.wsdl"/><Button label="Get Data" click="ws.getData()"/><LineChart dataProvider="{ws.getData.lastResult}">  <horizontalAxis>    <CategoryAxis categoryField="name"/>  </horizontalAxis>  <series>    <LineSeries yField="revenue"/>  </series></LineChart>

You need to stream video?

<VideoDisplay id="videoFMS" autoBandWidthDetection="true" source="streamName"/>

You need to parse an XML document and grab the value of the zip node in the 6th employee node? Simply use the following E4X (ECMAScript for XML) expression:

employees.employee[5].address.zip

You need to create an panel that can be expanded (using an animation)? Simply create a panel with multiple states:

<states>  <State name="expanded">    <SetProperty target="{myPanel}" name="height" value="100%"/>  </State></states><Panel id="myPanel" width="100%" height="50%" resizeEffect="Resize"/><Button label="Button" click="currentState='expanded'"/>

You need to subscribe to a JMS topic and execute a method every time a message is published?

<Consumer destination="myJMSTopic" message="myHandler()"/>


Summary

There are many other and more granular reasons to use Flex for building rich internet applications (Richard Ziade has a good list here), but at a high level, I think of expressiveness, performance, rich media, real time, and offline as the Flex features that can profoundly transform the user experience on the web.


            


作者:gdgzboy@牛C网
地址:http://www.niuc.net/post/285/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!



Tags: ,
评论(0) | 引用(0) | 阅读(304)
发表评论
昵称 [注册]
密码 游客无需密码
网址
电邮
打开HTML 打开UBB 打开表情 隐藏 记住我