Kusunam's Blog

I was wondering why people do not use these Utility projects from Apache. Probably I have seen 1-2 projects which utilize org.apache.commons.beanutils. Even I was not using these until 2006-2007. In any application which is in Test or Prod I see ‘NullPointerExceptions’ at least once. So what is the problem we write all these boiler code to check for NULL then call some function on it like trim(), length, size() or any public methods. Sometimes we miss first NULL check and I have seen myself missing these repeatedly before I started using Apache Common Utility methods. Now I make use of these utility classes very often which are ‘Null safe’ and protects my code from any ‘Null Pointers’. Here are some of the Utility projects I use on daily basis and recommend any one to use these if you are not using these already.

Apache Commons Bean Utils

    BeanUtils    MethodUtils

Apache Commons Lang

    ArrayUtils    DataUtils    DataFormatUtils    ObjectUtils    StringUtils

Apache Commons Collections

    This has many classes useful on operating on Collections.

I am sure many people who often involve with open source projects use these on regular basis.

I started this journey a month back or so and here is how it was and how it is now.

 Back Ground
 I am working on developing web Enterprise applications using Java J2EE technologies for last 10 years. All the time my biggest complaint was why do I need to write everything by myself i.e. HTML (first design the page) then use some framework like Struts Spring as MVC and other stuff. Before I came in to Java I was a Visual Basic developer and it was cool in developing desktop applications by just dragging and dropping and defining the events. My biggest belief is as an Application Developer I should be worrying about my business logic and rest should be taken care by framework or technology. This is exactly what J2EE addressed on Server side when it was released i.e. it takes care of Deployment, Resource Management, Connection pooling, Transaction Management etc and I just need to work on my business logic.

FLEX

Flex seems to be addressed some of these very well on the client side i.e. provide a working area where we can just drop existing components and start defining what they do and how they do. We can also reuse some of the custom components. I feel learning Flex is little bit steep in the beginning especially for someone like me, who has not worked on even driven applications for a long time. I started my first Flex screen by just looking at some of the examples from Adobe @ http://livedocs.adobe.com/flex/3/html/index.html and luckily this screen was simple one with no Commits to database i.e. just read from Database and display on the screen. I have used XML communication between Flex and Java deployed as a WAR project on JBoss application server. This worked perfectly fine for my screen requirement. During this screen development I was spending most of time on Google and Adobe in searching how to construct XML on the server and also how to read it in Flex and also how to display collections in a drop down, Grid. First screen gave me some opportunity to learn how Flex works and also experiment different layouts, containers, components and also some Action Script.

After I finished this screen I have to work on my 2^nd screen which is more complex to me with 2 dropdowns, Tree component, editing tree nodes, screen modes (view, edit) and many more. I thought I can never finish this screen looking at my limited flex knowledge and also screen complexity. But as an applications Architect I had to approach it organized and iteratively and this worked (working) perfectly to me. I am still working on this screen and so far I do not have any road blocks.

Flex Learning Resources:
A simple Getting Started    http://learn.adobe.com/wiki/display/Flex/E4X

Adobe Resource Center    http://livedocs.adobe.com/flex/3/html/index.html

 Flex in a week from Adobe    http://www.adobe.com/devnet/flex/videotraining/

Flex Learning Path – Programmer    http://www.adobe.com/devnet/flex/learn/programmer/

A must to have AIR for every Flex newbie “Tour de Flex Component Explorer”    

http://www.adobe.com/devnet/flex/tourdeflex/

XML over HTTP (or) Remoting using AMF

XML seems to be tempting and easier approach when you are beginning with Flex but as the application gets complex XML seems to be painful. First thing is we need to do 2 time XML parsing i.e. one on server and one on client and 2nd thing how do we manage XML when we need to do some heavy CUD operations? I ran in to this issue when I started my 2^nd screen which has lot of CRUD operations and immediately I started looking out for some alternatives to this XML. First thing I ran in to is ‘BlazeDS’ from Adobe which seems to be addressing ‘Remoting’ perfectly for my needs. Also Adobe claims (I have also seen someone posted these performance numbers on web) that it is faster using AMF (Action Message Format) comparing to XML communication. Learning BlazeDS is easy and straight forward for any Java Developer (May be I will write another post on BlazeDS). There are other alternative to BlazeDS like GraniteDS and other claiming that they are better than BlazeDS but I will experiment with them once I get comfortable with all these new technologies (to me).

Flex MVC Framework (Cairngorm)

Currently 80% of my UI and Action Script code are on same MXML file and this is growing day by day and I started hating my code. Next question is how I refactor this code to put it in a nice MVC style framework. Cairngorm seems to be a nice one for a starter like me. I experimented with it yesterday only and also I have applied it to my 2^nd screen and most of it is simple and easy but I hit a road-block in it i.e. how do I enable disable UI components based on events and their response (result fault). I will look in to it more in next couple of days (May be another post on Cairngorm). There are other frameworks like PureMVC, Swiz and Mate. I hear lot of good about Mate and this will be the next in my list to experiment.

Maven2

I hate Ant and a big fan of Maven even though it has some drawbacks. But I can be up and running with Maven in 5-10 minutes for any project. Flex do not have good support for Maven and this was the task I have spent overall a week or so (bad part is I have started on it before I started on developing Flex so I did not had any idea about what is SWC, SWF, RSL etc). There is an open source project called “flex-mojos’ lead by Marvin Froeder (Velo) and it is the best plug-in available for Flex-Maven. Please look at Google groups http://groups.google.com/group/flex-mojos for further details also here is the latest wiki for it @ https://docs.sonatype.org/

As always drop me a message for any questions or suggestions….

I thought it is just setting a property in default Flex Grid with something like ‘defaultSort” but i seems to be wrong. Flex default Grid do not support something like this but Adobe recommends sorting List on the server side and sent it back to Flex. But, this may not be possible all the times. In my case I am extracting ArrayCollection from XML and need to do this sorting on the client side. There are multiple ways you can do this on client side. Here is the one I started using couple of days back and you can see the original post here.

Solution-1:


Here is the Source for the Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">

<mx:Script>
	<![CDATA[
		import mx.events.DataGridEvent;

	    /* Function to do default sort on Data Grid in ascending order. */
        public function sortAC():void {
			dgSort(dg, 0);
        }

 		private function dgSort(dgName:Object, dgColumn:int):void{
	        dgName.dispatchEvent(
				new DataGridEvent
				(
					DataGridEvent.HEADER_RELEASE,
					false,
					true,
					dgColumn,
					null,
					0,
					null,
					null,
					0
				)
			)
		}

	]]>
</mx:Script>

    <mx:XMLList id="employees">
        <employee>
			<id>2</id>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
        </employee>
        <employee>
        	<id>3</id>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
        </employee>
        <employee>
        	<id>1</id>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
        </employee>
    </mx:XMLList>
    <mx:Panel title="DataGrid Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="500"
         paddingTop="5" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">

         <mx:Label width="100%" color="0x323232"
            text="Select a row in the DataGrid control."/>

        <mx:DataGrid id="dg" color="0x323232" width="100%" rowCount="3" s
        	dataProvider="{employees}"
        	creationComplete="sortAC()">
            <mx:columns>
                <mx:DataGridColumn dataField="id" headerText="Id"/>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Panel>
</mx:Application>

Solution-2:
Here is another way i found on Adobe website.

Here is the Source for the Code:

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

<mx:Script>
	<![CDATA[
		    import mx.collections.*;

            /* Function to sort the ICollectionView
               in ascending order. */
            public function sortAC():void {
                var sortA:Sort = new Sort();
                sortA.fields=[new SortField("label")];
                myAC.sort=sortA;
                //Refresh the collection view to show the sort.
                myAC.refresh();
            }
	]]>
</mx:Script>

    <!-- An ArrayCollection with an array of objects. -->
    <mx:ArrayCollection id="myAC">
        <mx:Array id="myArray">
            <mx:Object label="LA" data="Baton Rouge"/>
            <mx:Object label="NH" data="Concord"/>
            <mx:Object label="TX" data="Austin"/>
            <mx:Object label="MA" data="Boston"/>
            <mx:Object label="AZ" data="Phoenix"/>
            <mx:Object label="OR" data="Salem"/>
            <mx:Object label="FL" data="Tallahassee"/>
            <mx:Object label="MN" data="Saint Paul"/>
            <mx:Object label="NY" data="Albany"/>
        </mx:Array>
    </mx:ArrayCollection>

    <mx:DataGrid id="myDG" dataProvider="{myAC}" creationComplete="sortAC()" />

</mx:Application>

Recently I have started working on my first Flex project. It is been 2 weeks or so and first question came to my mind was how do I structure my project so that I can build it using Maven? I have decided to use ‘info.flex-mojos‘ project and also seriously considered his suggestion about one single Flex project should not generate multiple SWF files read it at his blog “Multiple SWF from same Sources“.

Requirement

• Need to build 2 WAR files, one WAR file need to have 2 main application MXML files which are accessed through a direct URL (one for each) and 2nd one with a single MXML application file
  

Setup

Here is the structure I have setup for this project:

MyProjectName

– model (Hibernate model classes common for both exceptionsweb and formsweb)

– exceptions_web (web project which needs to have 2 main SWF files from modules screen1_module and screen2_module)

– forms_web (web project which contains 1 main SWF file from forms_module)

– ria

– shared_module_lib (This is the shared library or RSL used in all the 3 Flex main modules)

– screen1_module

– screen2_module

– forms_module


Build process
With this project structure Flex modules always generate new version with every build and we need to make sure that HTML or JSP file which wraps corresponding SWF file needs to be updated dynamically during the maven build process. Luckily we have ‘html-wrapper-mojo’ plugin available from the same project ‘info.flex-mojos’. As the requirement is to have 2 SWF files in ‘exceptionsweb’ WAR file, this plugin has a limitation of allowing only 1 SWF. This made me to spend more 8-20hrs and build it through a workaround i.e. using ‘maven-assembly-plugin’ build 2nd flex project (screen1_module) as ZIP and unpack it in to ‘exceptions_web’ war file.

Here is the order of the build:

• Build flex projects first
  • Build ’shared_module_lib’ project as ‘SWC’ i.e. <packaging>swc</packaging> which will be referred as RSL in other projects
  • Build ’screen1_module’ project as regular SWF
    • This project also needs to use ‘html-wrapper-mojo‘ plugin to dynamically creating ${project.build.finalName}.html (eg: screen1_module-1.0.0-SNAPSHOT.swf) with a link to current version of SWF file it is building
    • Next use ‘maven-antrun-plugin‘ to move above generated file (eg: screen1_module-1.0.0-SNAPSHOT.html) to the name by which users access i.e. Screen1.html
      
    • Use ‘maven-assembly-plugin‘ to generate a zip file which will have Screen1.html, Screen1-1.0.0.swf and any history and player files which will be extracted in to WAR project
  • Build ’screen2_module’ project as regular SWF
  • Build ‘forms_module’ project as regular SWF
• Build ‘model’ project as ‘jar’ project
• Build ‘exceptions_web’ project as ‘war’
  • Add screen2_module files – We need to generate Screen2-1.0.0-SNAPSHOT.html which will be used to access the corresponding SWF file. For this we need to use ‘html-wrapper-mojo’ plugin to dynamically creating ${project.build.finalName}.html with a link to current version of SWF file it is building
  • Next use ‘maven-antrun-plugin’ to move above generated file (eg: Screen2-1.0.0-SNAPSHOT.html) to the name by which users access i.e. Screen2.html
  • Use ‘maven-dependency-plugin’ to unpack the ’screen1_module’ zip file
  • Use ‘maven-dependency-plugin’ to copy player Adobe framework SWF and SWZ files to the WAR build
• Build ‘forms_web’ project as ‘war’
  • Add forms_module files – We need to generate Forms-1.0.0-SNAPSHOT.html which is a wrapper to corresponding SWF file. For this we need to use ‘html-wrapper-mojo’ plugin
  • Next use ‘maven-antrun-plugin’ to move above generated file (eg: Forms-1.0.0-SNAPSHOT.html) to the name by which users access i.e. Forms.html
  • Use ‘maven-dependency-plugin’ to copy player Adobe framework SWF and SWZ files to the WAR build

** This is my first attempt of building Flex with Maven. Any suggestions or questions are welcome.
Top Level POM which builds all the sub projects.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.company.project</groupId>
	<artifactId>multimodule</artifactId>
	<name>Multi module Parent project</name>
	<packaging>pom</packaging>
	<version>1.0.0-SNAPSHOT</version>
	<modules>
		<module>ria</module>
		<module>model</module>
		<module>exceptions_web</module>
		<module>forms_web</module>
	</modules>
</project>

Download complete project structure with Maven scripts here

For the latest release of flex-mojos please access this wiki and also there is a very good example there in building Flex / Java and BlazeDS  i.e.  Reference application.
If you have any questions use this friendly group @ http://code.google.com/p/flex-mojos/