Rich Internet Applications using Flex

Rich Internet Applications using Flex

Prepared By – Naresh Chowdary

 

Flex is a free, open source framework for building highly interactive, expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. Flex technology is Adobe’s development toolset enables developers to create expressive Rich Internet Applications (RIA’s).

 

Flex is totally independent to server side technology used.

 

Adobe Flex is an adept cross platform solution, embraces Windows, Mac OS X, and Linux- so a Flex developer can be confident in reaching the entirety of the potential audience of users. With the Flex Builder IDE of Flex3, Linux will now also be supported as a development platform (this is terrific news for java-centric developers that are moving more and more to Linux as a software development OS).

 

Definitions, Acronyms, and Abbreviations

 

SI. No.	Definition / Acronym	Description
1	RIA	Rich Internet applications - combine the flexibility, responsiveness, and ease of use of desktop applications with the broad reach of the web. RIA’s provide a dynamic web experience that is rich and engaging, as well as interactive.
2	AIR	The abbreviation AIR stands for Adobe Integrated Runtime and enables applications to run on a variety of platforms (Mac OS X, Windows, and Linux).
3	ActionScript	ActionScript™ 3, a powerful object-oriented programming language, is used to create client logic
4	SOAP	Simple Object Access Protocol (SOAP) compliant web services by using the WebService component
5	AMF	Adobe Action Message Format (AMF) remoting services by using the RemoteObject component
6	AMP	Adobe® Media Player software, which enables viewers to interact with their favorite content in exciting new ways. Helps viewers to have controlled and flexibility to watch what they want, when they want - whether online or offline
7	RSLs	Use Flex 3 Runtime-shared-libraries (RSLs) to reduce the size of your applications and thereby reduce the time required to download the application. RSLs are just SWF files whose code is used as a shared library between different application SWF files.
8	TCO	Total cost of ownership is a financial estimate designed to help consumers and enterprise managers assess direct and indirect costs.
9	RPC	Remote Procedure Call (RPC) is a protocol that one program can use to request a service from a program located in another computer in a network without having to understand network details.

Use Flash and the Flex framework to create applications. Flash Player and AIR are the runtimes for the complied Flash and Flex applications and are targeted to the browser and desktop, respectively.

 

Adobe Flex technology provides developer with a framework of extendable classes, including visual components, and an IDE, called Flex Builder, which allows them to quickly build RIA’s using the ActionScript and MXML. Variable names in MXML and ActionScript are case sensitive.

 

Typically, Flex developers will use the XML-based tag library MXML programming languages to build the user-interface visual layout, and the ECMA-4-complaint ActionScript code to create classes and business logic. Writing ActionScript within the MXML tag is known as “Inline ActionScript”.

 

When you compile your application, the Flex compiler creates a single SWF file from all of the application files (Adobe® MXML™, AS, RSL, SWC, and asset files), as the following example shows:

 

 

Alternatively, Adobe Flex Framework is available for free in an open source SDK that includes extensive AS3 and MXML class libraries, pre-built component and a command-line complier.

With Flex you can compile applications using an open source SDK or use Flex Builder, an IDE based on Eclipse which works like a charm! The end result is an SWF-file, which runs in any browser-based Flash player, or in a desktop application using Adobe Integrated Runtime (AIR). Completely cross-platform.

 

Adobe AIR is Adobe runtime for desktop applications. With AIR, user can create RIAs with web technologies like Flash, Flex and Ajax, but deploy them outside of a browser as a desktop application.

 

Unlike PHP, ColdFusion, ASP.NET, and JSP applications, Flex applications are run on the client, not the server.

 

Flex Applications can work with server technologies to increase the functionality and power of RIA:

1.    The Flex application requests data from the application server

2.    The application server sends the request to the database

3.    The database returns data to the server program

4.    Which returns the data to the Flex application

5.    The RIA updates seamlessly for the end user.

 

Flex Events: A Flex event is dispatched when something happens in an application. Events (keyboard and mouse) are processed by listener objects which are registered by the GUI elements.

 

The Flex framework provides many built-in Flex events, which are divided into two types of events: user events and system events.

1.    User events are fired as users interact with the application; for instance, when they click on a button or mouseover an object.

2.    System events are fired as a result of code execution. For instance, when an application initializes, when a component is added dynamically, or when data is returned from an external data source.

 

System Event Types

1.   initialize event of the Application tag will send the request as the application is initializing, before the layout is finalized. The initialize event is useful for configuring a container's children.

2.   Flex dispatches the creationComplete event for a container when those children that are initially required are fully processed and drawn on the screen, including all required children of the children and so on.

 

Accessing Data in Flex Framework

 

Flex data access components are based on a service-oriented architecture. They use remote procedure calls to interact with server environments, such as PHP, Adobe ColdFusion, Microsoft ASP.NET and Java.

 

The Flex framework allows you to create these data access components in MXML or ActionScript.

 

Three types of Flex data access components (RPC services):

Depending upon the types of interfaces you have to a particular server-side application, you can connect to a Flex application by using one of the following methods.

1.    Retrieve and send data via HTTP using the HTTPService component.

2.    Retrieve and send data via SOAP, web services by using the WebService component.

3.    Retrieve and send data via AMF, remoting services by using the RemoteObject component.

 

Process for making HTTP requests:

1.    To request data over HTTP, first create an HTTPService object by defining an instance name and assigning a URL for the data retrieval.

2.    Note that a request is not made for the data when the object is created.

3.    You make a request for the data as a separate step in the process.

4.    Once the remote data is retrieved, you can use it in your application.

 

Microsoft Silverlight

 

Using Microsoft Silverlight, developers can provide their users with content-rich web applications that are not limited to text and images. Microsoft Silverlight includes:

• Cross-browser, cross-platform plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web

• Offers a flexible programming model that supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications

• Supports fast, cost-effective delivery of high-quality video, better video streaming and complex graphics to all major browsers running on the Mac OS or Windows

 

Silverlight uses a declarative XML-based language called XAML and you code the entire thing in .NET.

 

One of the capabilities built-into Silverlight 2 is its support for "Adaptive Streaming" - which enables video to be delivered at multiple bitrates (400Kbits, 800Kbits, 1.5Mbits, 2Mbits) with Silverlight dynamically choosing the optimal bitrates to be used depending on the network bandwidth and CPU capability of the client (it can also automatically switch bitrates seamlessly if conditions change later). 

 

Cross-Platform User Experiences

 

•Deliver media experiences and rich interactive applications for the Web that incorporate video, animation, interactivity and stunning user interfaces.

•Seamless, fast installation for users, thanks to a small, on-demand, easy-to-install plug-in that is under 2 megabytes (MB) in size and works with all leading browsers.

•Consistent experiences between Windows-based and Macintosh computers without any additional installation requirements.

•Stunning vector-based graphics, media, text, animation, and overlays that enable seamless integration of graphics and effects into any existing Web application.

•Enhance existing standards/AJAX-based applications with richer graphics and media, and improve their performance and capabilities by using Silverlight.

 

Microsoft Silverlight Overview: High Quality, Low Cost Media

 

•Unified media format that scales from high definition (HD) to mobile with Windows Media Video (WMV), also support for Windows Media Audio (WMA) and MP3 audio.

•Flexible ad-insertion solutions with video and animation, ability to deliver fluid, broadcast-style video or animated adv without loss of visual fidelity or motion quality.

•Rapidly scale applications with Silverlight Streaming by Windows Live to host and integrate software services and media content

 

Advantages of Microsoft Silverlight over Adobe Flash

 

Microsoft Silverlight	Adobe Flash
Developer can use JavaScript as well as managed code VB.Net, C# for Silverlight development.	Only Action Script can be used as programming tool in Flash.
Debugging is Simpler.	Debugging with flash is harder than SL.
SL does not require video codec to run industry standard videos like .WMV	Flash requires video codec to run .WMV videos.
Supports scalable video formats from HD to mobile.	Flash does not support scalable video formats from HD to mobile.
Silverlight supports Hardware-assisted editing and encoding solutions.	Flash does not support Hardware-assisted editing and encoding solutions.
Silverlight can share objects and files between applications.	The Adobe suite of products, especially CS3 can also share objects and files between applications (Photoshop, Illustrator, Flash, and Dreamweaver).
Web Services support for SL Streaming.	No Web Services for streaming.
Silverlight applications and media streaming can be run on a mobile phone.	Flash requires Flash Lite preinstalled on mobile devices.

 

 

Advantages of Adobe Flash over Microsoft Silverlight

 

Microsoft Silverlight	Adobe Flash
Missing Linux support.	No such limitations.
Missing support for control library e.g. checkboxes, list boxes, list views, grids etc.	Flash has rich set of control libraries.
Support only JPG and PNG formats.	Flash support almost all image formats.
Cannot do sound processing.	Sound processing is possible with some media files.
Socket programming is not possible.	Flash allows creating XML socket obj.
Per pixel bitmap editing, bitmap filters, bitmap effects cannot be done.	Possible in Flash.
No Webcam/Microphone support.	Flash supports Webcam/Microphone.
No built-in support for file upload/download.	Inbuilt file upload/download support.
Larger size of SL components.	Size of Flash components is smaller than SL.
To deploy Silverlight to client browser more than one components ship. (1) XAML files (2) .dll if using C# (3) Silverlight.js (4) Custom JavaScript file. Images/videos/ sounds also required deploy separately.	Flash ships in single component that is .swf. Images/video/sounds also incorporated in single .swf package.

 

Usability Websites

1.    Websites using Flex application: Yahoo Maps, Sony Ericsson

2.    A number of customers have already launched Internet-facing Silverlight 2 RIA solutions.

a.               AOL launched their new AOL Mail RIA using Silverlight 2.

b.               The NBC Olympics site used Silverlight 2 to serve more than 3,500 hours of live and on-demand Olympic coverage to over 60 million unique visitors this summer. 

c.                Blockbuster is replacing Flash with Silverlight for its MovieLink application.

 

And the Winner is..?

 

When accessing the web, these days’ people expect a universal experience – regardless of what operating system or browser they use. It matters with which technology is better/most productive to work and commercial RIA’s cost money to make.

 

Currently Flex/Flash is the best choice over Silverlight. There are more 96% of browsers having installed Flash plug-in while Silverlight is still in Beta version. Comparing the performance, Flex is more smoothie than Silverlight, showing Flex is more proven technology in RIA area. Flex Builder 3 is also an easy tool for average developers too. But in few months time, with new Silverlight version even pushed out to Windows-users through Windows Update, things could look different.

 

The main focus and areas of Silverlight and Flex target the same markets like business or/and enterprise apps, streaming and entertainment market and consumer apps.

 

Microsoft Silverlight Achievement:

1.    In the August 2008 edition of Web Designer Magazine (a Dutch publication) a NOS (Netherlands) representative reported that they were able to serve 100,000 concurrent users using Silverlight and 40 Windows Media Servers, whereas it would have required 270 servers if they had used Flash Media Servers.

2.    In addition to video quality, a big reason behind these broadcasters decision to use Silverlight was the TCO and streaming cost difference Silverlight provided. 

3.    The NBC Olympics site used Silverlight adaptive streaming capability to support 1.5Mbit bitrates - which helped deliver an awesome video experience:

 

 

What do I need to buy?

Building Flex applications can be free. All you need is the free, open source Flex SDK, which includes:

1.      The Flex Framework - the predefined class libraries and application services

2.      The standalone compiler

 

The Adobe Flex technologies that cost money are:

1.    Flex Builder - The Eclipse-based IDE which includes the Flex SDK and other development tools like a debugger and visual designer.

2.    Flex Charting - A library of interactive charting components that can be bound to data from your Flex applications.

 

How do I build Flex applications?

If you are using the Free SDK, you will use the standalone compiler to compile your code into a SWF file. Flex Builder can be set to compile your code automatically and also create the necessary browser detection and other relevant client-side code.

 

During compilation, your MXML code is translated into ActionScript code and then all the ActionScript code is compiled into binary SWF files. The SWF file can be uploaded to the web server, where it is then served up based on user request.

 

 

 

 

 

Free License and Downloads

 

Silverlight: Install Microsoft Silverlight 2 now for a better Web experience.

 

http://microsoftsilverlight.com/

 

 

Flex 3 SDK: The Adobe® Flex™ 3 Software Development Kit (SDK) includes the Flex framework (component class library) and Flex compiler, enabling you to freely develop and deploy Flex applications using an IDE of your choice.

 

Download the Flex 3.2 SDK for all Platforms (ZIP, 118 MB)

 

Flex Builder: A professional Eclipse based developer tool enabling intelligent coding, interactive step-through debugging, and visual design of the user interface and behavior for Flex applications. Includes support for building desktop applications with Adobe AIR.

 

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email (EXE, 438MB)

 

Note: 60 day trial begins when you first launch the software, after installing it.