Monday, November 17, 2008

Adobe Flex

Adobe Flex

This blog is extracted from my presentations that I gave one and half years ago (May 02, 2007) in my firm to introduce flex technology and make my company realize the importance of flex and its future. I am glad that my prediction made at that time about flex future was right. Rightnow flex is the hottest RIA solution in the market and its hard to find its good developer. I am also glad that there are around more than 4 project in flex that my firm is doing and it has developed good flex expertise developer during last two years that I can bet probably among few excellent flex resource in the world.

Following are the contents of the blog:

Introduction

  • Since the invent of internet and its improvement in the bandwidth endeavors were being made to develop RIA (Rich Internet Application) that would be same as desktop applications. Researches, cientist and developers (especially companies like Adobe and Microsoft) made their efforts to develop a platform that would make RIA dream a reality.
  • There comes the race among different companies for providing a platform for developing RIA. Microsoft made some serious efforts few years ago and come up with RIA and SOA based technology called “Microsoft SilverLight”. Similar effort has been made by Adobe whose outcome is in the form technology called Flex.

Successful stories

Followings are the Flex successfuly implementations:

How RIA Development Challenges resolved in Flex

  • Provide a familiar programming model: Flex provide a familiar programming model for both java and .net Programmers that is based on OOPs.
  • Leverage existing architecture: Flex provide integration with existing application servers and SOAs. So provide organization who have invested heavily on application servers and SOAs to implement RIA.
  • Support standard protocols and application programming interfaces (APIs): Flex has support for Standard Protocol and APIs like HTTP, XML and SOAP/Webservices etc. Flex provides easy integration with famous java frameworks like Hibernet, Xfire and Spring etc.
  • Follow common key design patterns: Flex provide MVC based Framework known as “Cairngorm”/"PureMVC".
  • Integrate with existing processes: Flex can be easily integrated with existing development processes like using automated build script ant for deployment etc..
  • Provide rich tooling: Flex provide rich tools.

Flex Runtime Architecture

What is Flex Programming Model?

The Flex programming model is made of:

  • MXML, an XML language used to declaratively lay out the user interface of your application.
  • ActionScript, an ECMAScript compliant, object-oriented programming model. With some syntactical differences, ActionScript looks and feels similar to Java, and supports the same object-oriented constructs: packages, classes, inheritance, interfaces, strong (but also dynamic) typing etc.
  • An extensive set of class libraries. The online API documentation is available in a Javadoc-like format.

How Flex Code is compiled?

The Flex source code (.mxml and .as files) is compiled into Flash bytecode (.swf) that is executed at the client-side by the Flash virtual machine.

There are different ways you can use the Flex compiler (mxmlc):

  • From the command line
  • As part of an ant script
  • Using FlexBuilder: the compilation process is integrated in the IDE
  • Using the web compiler (available with the Flex Data Services). This is similar to the JSP compilation model: The first time an application is requested it is compiled into bytecode, which is then cached to serve subsequent requests.

Flex product line

  • The Flex product line includes:
    • The Flex SDK which is free and includes the Flex libraries, the compiler (mxmlc), the debugger, and the documentation.
    • Flex Data Services (FDS), an optional set of server-side components deployed in your J2EE application server. FDS includes a Java RPC service, publish/subscribe messaging, and data management services. FDS is free for a single-CPU deployment (FDS Express), and is licensed per CPU when deployed on multiple CPUs.
    • FlexBuilder, an optional IDE for Flex development. Built as an Eclipse plug-in, FlexBuilder includes a design view and a code view, code hinting, visual debugging, etc. FlexBuilder is licensed on a per developer basis.
    • Optional charting components licensed on a per developer basis.
  • We can develop and deploy Flex applications entirely for free using the SDK and the IDE of our choice.

Source Code Example

Examples – 1 Fetching data from webservice

Source Code:

<?xml version=”1.0” encoding=”utf-8”?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”ws.getList()”>

<mx:Style source=”main.css”/> <mx:WebService id=”ws” wsdl=”http://mysite.com/services/CatalogWS?wsdl” >

<mx:operation name=”getList”/>

</mx:WebService> <mx:Panel title=”Product Catalog”>

<mx:DataGrid width=”100%” height=”100%” dataProvider=”{ws.getList.lastResult}”>

<mx:columns> <mx:DataGridColumn dataField=”name” headerText=”Name”/> <mx:DataGridColumn dataField=”price” headerText=”Price”/> </mx:columns>

</mx:DataGrid>

</mx:Panel>

</mx:Application>

Example -2 Accessing data using Java RPC

Source Code:

MXML

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF">

<mx:RemoteObject id="srv" destination="product"/> <mx:DataGrid dataProvider="{srv.getProducts.lastResult}" width="100%" height="100%"/>

<mx:Button label="Get Data" click="srv.getProducts()"/>

</mx:Application>

ProductService.java

public class ProductService {

public List getProducts() {

ArrayList list = new ArrayList(); Connection c = null;

try {

c = ConnectionHelper.getConnection(); Statement s = c.createStatement(); ResultSet rs = s.executeQuery("SELECT * FROM product ORDER BY name"); while (rs.next()) {

list.add(new Product( rs.getInt("product_id"), rs.getString("name"), rs.getString("description"), rs.getString("image"), rs.getString("category"), rs.getDouble("price")));

}

} catch (Exception e) { e.printStackTrace(); } finally { try { c.close(); } catch (SQLException e) { e.printStackTrace(); } } return list; } }

remoting-config.xml:

<?xml version="1.0" encoding="UTF-8"?>

<service id="remoting-service" class="flex.messaging.services.RemotingService"messageTypes="flex.messaging.messages.RemotingMessage">

<adapters> <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/> </adapters>

<default-channels> <channel ref="my-amf"/> </default-channels>

<destination id="product"> <properties> <source>flex.testdrive.store.ProductService</source> </properties> </destination>

<destination id="census">

<properties> <source>flex.testdrive.census.CensusService</source> </properties> </destination>

</service>

Flex 2 Tag Library for JSP:

  • The Flex 2 Tag Library for JSP is a set of JSP tags that you can use to embed Flex applications to a JSP page.

<%@ taglib uri="FlexTagLib" prefix="mm" %> <mm:mxml> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"> <% if (request.isUserInRole("admin")) { %> <AdminConsole/> <% } else { %> <UserConsole/> <% } %> </mx:Application> </mm:mxml>

Flex for Dotnet developer

WebORB for .Net

  • WebORB offers a complete native .NET implementation of Flex Remoting (RPC) and Flex Messaging and in the latest release (3.0) a partial implementation of the Flex Data Management Services capabilities.
  • Flex applications can rely on WebORB to provide functionality similar to that found in Adobe's Flex Data Services product.

How to bind Dotnet Object?

<mx:RemoteObject id="calculatorService" destination="GenericDestination" source="Weborb.Examples.BasicService" fault="gotError(event)">

<mx:method name="Calculate" result="gotCalculationResult(event)" />

</mx:RemoteObject>

Comparing Flex syntax with ASP.net

Comparing syntactical concepts of MXML and ASP.net

Asp.Net code Flex MXML code
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<script runat="server"> void Find_onClick (Object sender, EventArgs e) { String prg = Program_txt.Text; String cat = Type_cbo.SelectedItem.Text; if (prg == "") { Message_txt.Text = "You've chosen to list everything in the " + cat + " category."; } else { Message_txt.Text = "You've chosen to search for '" + prg + "' in the " + cat + " category."; } } </script> <mx:Script> <![CDATA[ private function Find_onClick (event:Event):void { var prg:String = Program_txt.text; var cat:String = Type_cbo.selectedItem.label; if (prg == "") { Message_txt.text = "You've chosen to list everything in the " + cat + " category."; } else { Message_txt.text = "You've chosen to search for '" + prg + "' in the " + cat + " category."; } } ]]> </mx:Script>
<body> <form id="form1" runat="server"> <div align="center"> <asp:Label id="Program_lbl" runat="server" text="Program"/> <asp:TextBox id="Program_txt" runat="server"/> <asp:Label id="Type_lbl" runat="server" text="Type:"/> <asp:DropDownList id="Type_cbo" runat="server"> <asp:ListItem value="1" text="Literature" /> <asp:ListItem value=“2" text="Theater" /> <asp:ListItem value=“3" text="Visual Arts" /> </asp:DropDownList> <asp:Button id="Find_btn" runat="server" text="Find" onclick="Find_onClick" /> </div> <div align="center"> <asp:Label id="Message_txt" runat="server"/> </div> </form> <mx:VBox width="100%"> <mx:HBox width="100%" horizontalAlign="center"> <mx:Label id="Program_lbl" text="Program:"/> <mx:TextInput id="Program_txt"/> <mx:Label id="Type_lbl" text="Type:"/> <mx:ComboBox id="Type_cbo"> <mx:Array> <mx:Object data=“1" label="Literature" /> <mx:Object data=“2" label="Theater" /> <mx:Object data=“3" label="Visual Arts" /> </mx:Array> </mx:ComboBox> <mx:Button label="Find" id="Find_btn" click="Find_onClick(event)"/> </mx:HBox> <mx:HBox width="100%" horizontalAlign="center"> <mx:Label id="Message_txt"/> </mx:HBox> </mx:VBox>
Asp.net Output Flex output

More on Flex

  • There is MVC framework available in Flex called “Cairngorm”.
  • Hibernet and Spring frameworks can be used with Flex.
  • Unit testing framework is available in Flex called FlexUnit.
  • Flex can be integrated with any JSR 168 compatible portal server to develop portlets.
  • A Websphere portal page featuring five Flex-based portlets

Some queries about the technology

  • Would Adobe win RIA race against Microsoft?
    • Adobe made Flex open source. Microsoft is also planning to make Silverlight opensource.
    • Adobe is addressing large enterprise applications as well whereas Microsoft in spite of its struggle didn’t able to penetrate yet in large enterprise apps. For example Microsoft ERP solution Great Plain not warmly welcomed. On the other hand SAP is using Flex. Also Flex provides integration with Message Queue that makes it to be used with any middleware solutions.
    • Adobe has proved about its cross platform claims, whereas Microsoft past has some questions about it.
    • Microsoft Windows XP tour that is available at %SystemRoot %\system32\tourstart.exe is made in flash :)
    • According to Adobe, 97% of internet users have flash player installed in their browser.
  • Would Job market forJ2EE developer give preferences to developers having Flex skills?
    • A/c to a survey there has been an increase of 20% demand for J2EE developers having flex skills.

References:

Posted by Imam Raza at 9:23 PM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)