Kusunam's Blog

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>