Environment

This was 360 degree change from what and how i was working for my whole career. Here are the some of the things my new team are following:

• My team consists of Developers (different levels I to IV), Lead, Project Manager, QA Team, Customer (Total around 18-20 people) all sitting at one place around 2 big rectangular tables (20 ft x 6ft)
• On these rectangular tables we have 6 desktop computers with 2 monitors, 2 key boards
• One side we have notice board kind of tables with cloth on it with white and other color papers defining User Stories placed on cloth. They have sections for New Stories, In Development, Ready for QA and QA Complete.
• Stand-up meetings every day for 15 minutes (It doesn’t take more than 15 minutes for 20 people). There is a small base ball which will be thrown in zig-zag order and who ever gets it gives his status like what he/she did yesterday and what he/she will do today. If they are stuck with some task they will ask whole team to help him/her if they have any previous experience on it. At the end you will have opportunity to announce anything.
• Always work in pairs that is why we have 2 monitors and 2 key boards (I paired with 3 people in my first week)
• None of us have any standard place where we sit every day (obviously no desk), no phone and we use our laptop just to check outlook for the office email and yahoo chat and sometime use social networking sites
• Strictly follow TDD (Test Driven Development)
• Few team members follow Ping-Pong style development i.e. one person will write a first test case and other person picks up his keyboard and writes production code to make the test pass and also write the next test case and first person writes production code and write next test case. I kind of love this style.

My Feelings

• So far I love it and excited to take a task all by myself and pick a pair and execute it from end to end.
• Still curious to see why some of my friends hate this methodology
• I am keeping a close eye on XP methodology for last 4 yrs and I always knew this will rock and will become defacto in development. I already see lot of companies adapting to it (except big-3 i guess).
• Practicing XP by yourself alone is not easy as I have tried it myself for last 1 yr or so and you need every one around you to talk, eat and breathe XP.

Keep watching my blog I will post more in coming weeks. My next post would be about the technologies and how I have coded my first task.

History
I have seen many many HTML applications with this problem and there was no easy way to address this unless you use some Java Script trick. It came back to me on my current project and I was sure it should be easy to address in Flex. I thought I might need to write some custom component which handles click event by showing box with list of values. But with some Google search I was able to find an easy solution. Here is the original post.

Solution

Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        width="300"
        height="150"
        backgroundColor="white">

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

            private function comboBox_open(evt:DropdownEvent):void {
                evt.currentTarget.dropdown.variableRowHeight = true;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object name="This is text can't fit in Combobox" abbr="BAL" />
        <mx:Object name="Some Text" abbr="BOS" />
    </mx:Array>

	<mx:Label text="Problemetic Combobox" />
    <mx:ComboBox id="comboBox1"
            dataProvider="{arr}"
            width="150"
            labelField="name"
            open="comboBox_open(event);"/>

	<mx:Label text="Correct Combobox" />
    <mx:ComboBox id="comboBox2"
            dataProvider="{arr}"
            width="150"
            labelField="name"
            open="comboBox_open(event);">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Text selectable="false"
                        toolTip="{data.name} ({data.abbr})" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:ComboBox>
</mx:Application>

I am updating this post after 2 weeks. Silly me I just figured out default combo box property dropdownwidth which seems to be doing the job I need for this. But again above solution is not redundant and it might be useful in cases if you do not want dropdown width to be different than combo box width. I can’t think having such a requirement but we never know

public class CustomSelectedComboBox extends ComboBox
{
     public function CustomSelectedComboBox()
     {
          super();
          this.rowCount = 10;
     }
     // value is the value you input that you want to search for.
     override public function set selectedItem(value:Object):void
     {
          if (value != null && selectedIndex == -1)
          {
               /** do a painful search */
               for each(var item:Object in this.collection)
               {
                    /**Vdata is the Arraycollection item you whant to search in.
                    So VData is the name of the item within the ArrayCollection */
                    if (item.code == value )
                    {
                        super.selectedItem=item;
                        break;
                    }
               }
          }
     }
}

This is how you use this custom combobox in MXML.

<custom:CustomSelectedComboBox     id="vehicleTypeCB"
                           dataProvider="{__model.initializerVO.vehicleTypeList}"
                           labelFunction="displayCodeAndDescription"
                           selectedItem="{__model.updateVO.vehicleType}"
                           prompt="Select one..."/>

 
Everything looks fine as you have added “dataProvider” and “selectedItem” and expects it to work. Guess what this will not work as expected and weird thing is it works sometime and doesn’t work some other time (just random). I was struggling on it for last 8 hrs and identified the problem, but did not find correct answer/ solution. But I have a work around to deal with it. Next question you would ask why is the above code is not working? From the above code in “selectedItem” we are expecting “dataProvider” to be set first as we are looping through it to find the VO which matches our “code” to select. But in this the order in which “dataProvider” and “selectedItem” called is not predictable.

Work around
I took “selectedItem” out of the above MXML and added following call in “creationComplete” method inside a container where I have this “customSelectedComboBox“.

vehicleTypeCB.selectedItem = __model.updateVO.vehicleType;

I am using Maven for build and release management for last 4years or so. But recently when I started using ‘Flex Mojos’ plug-in for building my Flex project I realized that I do not have some of the basic knowledge about the Maven. I have to admit that I had only 30-40% of knowledge. For last few days I started reading “Maven – The Definitive Guide” from Sonatype and thought I will share some of the core concepts. I am planning to split this in to 2 parts. In first part I will cover core concepts about the Maven and in 2^nd part I will cover different useful plug-ins and important commands.

Audience

This article assumes that you have some working knowledge of Maven2 and this should be used as a reference only.

Core Concepts

The core of Maven is pretty dumb, it doesn’t know how to do much beyond parsing few XML documents and keeping track of few lifecycle and few plugins. Most of the stuff is delegated to plugins.

Convention over Configuration    
Systems, libraries, and frameworks should assume reasonable defaults. Without requiring unnecessary configuration, systems should “just work”. Popular frameworks “Ruby On Rails” and EJB3 are based on this concept.

I have seen people breaking this rule and saying Maven is “stupid” it assumes my source files in “src\main\java” directory and I do not want to adhere to this folder structure. That is fine you can use whatever the structure you want and Maven doesn’t put any restriction on this but in your POM, make sure you tell that to Maven. But think again when you break any of these rules. I would do this only if somebody else owns this project and is a legacy code.

Plugins and Goals

A Maven plugin is a collection of one or more goals.

A goal is a “unit of work”. It is a specific task that may be executed as standalone goal or along with other goals as part of larger build.

     mvn archetype:create        (pluginId:goalId)

Maven Lifecycle

The build lifecycle is an ordered sequence of phases involved in building a project. Most often used is the default Maven lifecycle, which begins with a phase to validate the basic integrity of the project and ends with a phase that involves deploying a project to production.

 Plugin goals can be attached to a lifecycle phase. As Maven moves through the phases in a lifecycle, it will execute the goals attached to each particular phase. Each phase may have zero or more goals bound to it.

 mvn install        (install – It is one of lifecycle phase)

Maven Co-ordinates

Maven Coordinates define a set of identifiers which can be used to uniquely identify a project, a dependency, or a plugin in a Maven POM

Maven Repositories

When you run Maven for the first time, you will notice that Maven downloads a number of files from a remote Maven repository. Maven ships with the bare minimum and fetches from a remote repository when it needs to. Maven ships with a default remote repository location (http://repo1.maven.org/maven2)

Maven Dependency (Transitive Dependency)

A dependency in Maven isn’t just a JAR file; it’s a POM file that, in turn, may declare dependencies on other artifacts. These dependencies of dependencies are called transitive dependencies

Optimizing Dependencies

In a multi module project use “dependencyManagement” section to categorize all the common dependency jar’s between projects. This avoids dependency duplication and sibling dependency mis-match.

<project>
…..
 <dependencyManagement>
 <dependencies>
 <dependency>
 <groupId>org.springframework</groupId>
 <artifactId>spring</artifactId>
 <version>2.0.7</version>
 </dependency>
 <dependencies>
 <dependencyManagement>
</project>

Optimizing Plugins

Use “pluginManagement” section in top level POM just like the way we use for Dependency management.

<project>
…..
 <build>
<pluginManagement>
<plugins>
<plugin>
 <groupId> org.apache.maven.plugins </groupId>
 <artifactId>maven-complier-plugin</artifactId>
 <configuration>
 <source>1.5</source>
 <target>1.5</target>
 </configuration>
 </plugin>
 </plugins>
 < pluginManagement >
 </build>
</project>

]]> http://www.srinivaskusunam.com/2009/05/05/maven-introduction-and-concepts-part-%e2%80%93-i/feed/ 0 http://www.srinivaskusunam.com/2009/04/24/flex-object-tree/ http://www.srinivaskusunam.com/2009/04/24/flex-object-tree/#comments Fri, 24 Apr 2009 19:07:46 +0000 Srinivas Kusunam http://www.srinivaskusunam.com/2009/04/24/flex-object-tree/ I am sure you will run in to something like this if you are going to work on Flex for your next 4-5 projects. Luckily \ Un-luckily I ran in to this on my first project itself. This was definitely very complex to me when I started but it does make sense after I finish it. Given the complexity of this I will update it iteratively.

Requirement

• You have a Database table(s) whose data translate to something like Tree with top level is identified using separate column something like ‘isTopLevel’

Assumptions

• You will have 2 Database tables. One is “FolderVO” and other is “FileVO“. These two tables are linked using 3^rd table called “Folder_File_Link”
• FolderVO will have a column to specify ‘isTopLevel’ which will be populated for only top Folder in the tree
• “Folder_File_Link” will have its structure something like following to identify each folder’s children

  linked        folderId        folder_file_Id    
  

• A Folder can have either Folder or File list as its Children based on its property “folderLink” which take “Folder” or “File“
  
• This structure can be in some other formats too and purpose of this post is just to show how to develop Flex screens to handle something like this
  

Explanation

On the server side retrieve Folder with ‘isTopLevel‘ is set to ‘T‘ and go to link table and get all the Folders and Files attached to it. This is a recursive method at the end t will generate “FolderVO” object which will have following properties:

public var folderId:int;

public var folderName:String;

public var folderCode:String;

public var folderDescription:String;

public var folderLink:String;    //—- This will identify whether this folder can have Folder or Files as Children

public var topFolder:String;

public var children:ArrayCollection; //—- This contains FolderVO or FileVO objects    recursively    

Here children is a Collection which contains Folders or Clients based on its property ‘folderLink‘

This Tree will support following features:

1. Create a Folder (either top level or any children)
2. Remove Folder
3. Attach any existing Files
4. Remove any File from the Folder

**** Given the complexity of this form I will try to add details n next few days or weeks (depending on my schedule). But if you ran in to something like this and need any help drop me a message I will definitely help on this as I went through this pain already J

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.

 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….

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>

• 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/