Sunday, January 13, 2008

Flex - Whats the hype all about ???!!!!

Though I couldn't make it to Java Polis in Belgium , my friends did and they had just one mantra when they came back 'FLEX' . We were in the planning stages of our new project for Source Governance and except for me everyone what we were going to use for the User Interface.
Its almost been an year around in Competence Center , we always make it a point that the chosen technology is based on our business needs but making sure that we are always are aligned with the industry . With my Mac IBook G4 I started my journey and at this point I was reminded of the famous lines
"The Woods are dark and lovely
and miles to go before I sleep "

My idea was very clear , I was planning to work on a prototype where I could use Hibernate and a quick search in google (we all know the obvious choice but I also would recommend Live Search) gave me the answer to what I wanted "Flex Data services with Spring and Hibernate
The eclipse builder for Flex also amazing , one can start with the examples immediately . It would create an .mxml file and we will be using this to develop a prototype . Once we are ready with the design and the mxml just needs to be imported to the tomcat folder (Lets start with tomcat , I know you would be thinking about Transactions . Dont worry jta is always there for the rescue).

At this point it becomes very important for me tell you why Flex-Spring is such a lovely combination .

RemoteObject component directly invokes methods of Java objects deployed in your application server, and consume the return value. The return value can be a value of a primitive data type, an object, a collection of objects, an object graph, etc. In distributed computing terminology, this approach is generally referred to as remoting. This is also the terminology used in Spring to describe how different clients can access Spring beans remotely.

Best part about Spring is that , Spring IoC is to let the container instantiate components (and inject their dependencies). By default, however, components accessed remotely by a Flex client are instantiated by Flex destinations at the server side. The Flex Data Services support the concept of factory to enable this type of custom component instantiation. The role of a factory is simply to provide ready-to-use instances of components to a Flex destination, instead of letting the Flex destination instantiate these components itself.

In just five steps , I will tell you how to integrate Flex with Spring .

Step 1: Install the supporting files
  1. Download flex-spring.zip from coenraets.org.
  2. Expand the ZIP file.
Step 2: Install Flex Data Services

To use the Remoting and Data Management Services data access strategies described above, you need to install the Flex Data Services.

Step 3: Install Spring
  1. Expand the downloaded file.
  2. Locate spring.jar in the dist directory and copy it in the {context-root}\WEB-INF\lib directory of your web application.
  3. Modify the web.xml file of your web application. Add the context-param and listener definitions as follows:
  4. contextConfigLocation
      /WEB-INF/applicationContext.xml
    org.springframework.web.context.ContextLoaderListener
Step 4: Register the Spring factory
  1. Copy SpringFactory.class and SpringFactory$SpringFactoryInstance.class from flex-spring-sdk\bin\flex\samples\factories to {context-root}\WEB-INF\classes\flex\samples\factories.
  2. Register the Spring factory in {context-root}\WEB-INF\flex\services-config.xml:

Step 5:
In Main.mxml(our sample mxml file) with this new destination:


private var _order : Order;



/** **/
private function onCreationComplete() : void
{
CursorManager.setBusyCursor();
this.orderService.addEventListener(ResultEvent.RESULT, removeBusyCursor);

// call the method we want from the OrderAssembler (our service)
this.orderService.fill(this._orders);
this.productService.fill(this._products);
this.orderService.addEventListener(ResultEvent.RESULT, lookAtResults);
}

private function lookAtResults(event : ResultEvent) : void
{
var order : Order = this._orders.getItemAt(0) as Order;
var item : LineItem = order.lineItems.getItemAt(0) as LineItem;
}

private function createOrder() : void
{
CursorManager.setBusyCursor();
var order : Order = new Order();
this.orderService.createItem(order);
}

private function addItemToOrder() : void
{
CursorManager.setBusyCursor();
// create new LineItem object to add to Order
var item : LineItem = new LineItem();
item.product = Product(this.productsGrid.selectedItem);
//item.order = this._order;
item.quantity = int(this.productQuantity.text);
item.unitPrice = item.product.price;

this._order.lineItems.addItem(item);
}

private function removeItemFromOrder() : void
{
CursorManager.setBusyCursor();
var item : LineItem = LineItem(this.lineItemGrid.selectedItem);
var index : int = this._order.lineItems.getItemIndex(item);
this._order.lineItems.removeItemAt(index);
}

private function removeBusyCursor(event : ResultEvent) : void
{
CursorManager.removeBusyCursor();
}

private function formatCurrency(item : Object, col : DataGridColumn) : String
{
return this.usdFormatter.format(item[col.dataField]);
}

private function handleFault(event : FaultEvent) : void
{
Alert.show(event.message.toString());
}
]]>


I would like end my blog by saying that this entire prototype took not more than 3 hours from scratch . The coing has been reduced drastically with Flex on the User Interface front . Remoting has taken Flex to the next level where in one can easily connect to the back end for any database operation . Lets move to Web2.0 , its going to be FLASHY here after !!!!










1 comment:

Unknown said...

Hello Sir ,

Could you send the complete code ?

This is where I belong

This is where I belong