Kusunam's Blog

I was a Developer, Lead, Architect for last 10 years and all my career i was concentrating mostly on how to design, architect, code and complete the given project. My teams never cared for writing Test Cases even JUnit Tests. I tried to write some JUnit Tests for my last 2-3 projects for 2 yrs but i was distracted quickly from keeping them up to date (I know this is shame on me). I was realized that even though I am becoming experienced day by day i was not becoming a good programmer. Recently i have decided to leave my current job and to go in to an Agile Team (eXtreme Programming). This post will talk about my first week experience in this Agile team.

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.

Problem
In traditional HTML page where we need to display list of values in a Drop Down there is always a limitation of size of Combo box and also its content i.e. if you have a value whose length is greater than Combo box length value will be truncated showing only the text up to which it can accommodate in Combo box.

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

Problem
Flex combobox by default do not support “selectedItem” where “dataProvider” is not one of the primitive data types (String). This gets more hairy if you have list of VO’s as it’s Data Provider.

Solutions
In my case my Data Provider is list of ValueVO’s which consists of two properties i.e. code (type: String) and description (type: String). We need to select one of the VO’s based on matching Code.

I have implemented a custom Combobox which extends Flex default Combobox and provides a method for “selectedItem”. This method loops through the list of ValueVO’s and checks for matching “code” property.

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;

Background

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>

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