I was looking for a way to change the default orientation of Tabs displayed in TabNavigator and couldn’t find one. So I thought of looking into the code of mx.containers.TabNavigator to see if it provides any hook to extend the functionality and luckily, I found its possible to change the orientation.

Check below sample Code

package component
{
    import mx.containers.BoxDirection;
    import mx.containers.TabNavigator;
    import mx.core.INavigatorContent;
    import mx.core.UIComponent;
    import mx.core.mx_internal;

    use namespace mx_internal;

    public class MyTabComponent extends TabNavigator
    {
        public function MyTabComponent()
        {
            //TODO: implement function
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(tabBar!=null)
            {
                tabBar.direction = BoxDirection.VERTICAL;

                for (var i:int = 0; i < numChildren; i++)
                {
                    var containerChild:INavigatorContent =
                        getChildAt(i) as INavigatorContent;

                    if (containerChild)
                    {
                        containerChild.move(tabBar.width, 0);
                        containerChild.setActualSize(unscaledWidth - tabBar.width, unscaledHeight);
                    }
                }
                border.move(tabBar.width, 0);
                border.setActualSize(unscaledWidth - tabBar.width, unscaledHeight);
            }
        }
    }
}

Note that this isn't final code and will definately require changes to expose its properties and fine-tune it further, but one can get heads on how to customize tabNavigator. Here is the preview of above component

There is no doubt Flash Builder is one of those IDE, built on top of Eclipse helps you to stop worrying about design time issues and gives a nice editor to paint your application screen. Over last few years, Flash Builder has got rich in functionality and now it provides so many utilities that aid developers to build applications quickly. Though this article is not meant for details about the features like Web Service binding, Integration with Server Side Technology like BlazeDS, ColdFusion, Managing DataGrid and DataGrid columns etc., one must have a look at it before spending effort on coding it manually. Well the Aim of this article is not about giving details about what utilities Flash Builder offers to ease development, but one of the strong feature meant for designers/developers which is quite not so popular. – Design View Extensibility Kit for Flex X.X. (yes the version is marked as X.X, because it has been there for long time.:)

In day to day application development, most of the Flex developers create custom components and most of them are meant for visual interaction. While you may have encountered that, the custom components work pretty well at Runtime, there is hardly any design time interaction that you can do. (Ability to interact with component at Design Time – Flash Builder Design Mode.)
While in most cases, it won’t look as a constraint, but from User experience point of view, most would like to have that feature incorporated in their component.

So, is thre really an option to interact with components at Design Time, the answer is Yes. Adobe has developed Design View Extensibility Kit for Flex which one can use to provide live preview of the components – Yes you can interact with the components in Design Mode.

The above URL provides quite few sample applications, that one can use to experiment and understand how Design View Extensions work in Flash Builder. The sad part is there is no much information available about this Kit (not even enough documentation) and it has been mostly remain hidden, apart from one page article on Adobe site.

Flex Builder (now known as Flash Builder) is definitely a good tool to design and develop Flex applications. It has been quite a while, I have been using Flex Builder And till now my experience says that It is the best tool to develop UI. One having no prior knowledge of designing can still develop pleasant looking UI without a need of putting fancy stuffs. With rich features, Flex makes sure that you spend less time in developing UI.

Apart from fancy stuffs, the more important feature of Flex Builder is its debugging capability. Those who have worked with Visual Studio or Eclipse Debugger while developing solution, would feel right at the home. But there is only one problem, you can’t view AMF messages sent by Flash Player. The time from the AMF message is sent by the Flash Player till it reaches to the Server side object, developers are helpless. Sometimes its very much needed to understand what is being really transmitted over the wires.
While I was also in search of such a tool to track the AMF messages, I stumbled upon – AMF Explorer (a FireFox Add-on). Those who are using FireBug Add-on, will find it is one more feature available in various options of FireBug. Just search for “AMF Explorer” add-on in “Search” box of Add-on window, Click “Add to firefox” button and you can get started.
Here is the screenshot of a sample application developed using Flash Builder 4 & Flex SDK 4.5 (Hero)
AMF Request (Notice the tab “AMF Request”)

AMF Response (Notice the tab “AMF Response”)

Here is the URL for “AMF Explorer”

https://addons.mozilla.org/en-US/firefox/addon/78928/

While migrating Flex 3 (SDK 3.4) based project to Flex 4 (SDK 4.5 – Hero), I came across an issue “Cannot access properties of null object” (I don’t remember the exact error message, but it is somewhat similar). After running the application in debug mode, we found that a variable “_nonInheritingStyle” [array] declared in UIComponent is null and ActionScript tried to retrieve value from it. At first instance we thought that the problem could be related to the way stylesheet is loaded and hence instead of loading stylesheet dynamically, we added mx:style tag to the Application. But the problem remained as it is.

The next thought was to find out a solution on internet and specific steps to be followed for migration of Flex 3 project to Flex 4. We came across an article from Adobe which has detailed explaination for steps to be followed for various scenarios. Though we followed all the steps mentioned in the Article, we continued to experience the same error.

The next step was to put various breakpoints into internal code of framework and findout what is really causing an issue. Finally we found that the problem was specifically occurring when we tried to load a module into Moduleloader (We are having custom moduleloader). After digging more, we found that the StyleManager instance assigned to the newly loaded module factory was differing from the Application and one of its inherited property stylesRoot is having value as null.

Now we found out the problem, the next step was to put an appropriate fix. But I didn’t found any solution for this and hence I applied following code at the module load to make it working.

var b:IStyleManager2 = StyleManager.getStyleManager(IFlexModule(a).moduleFactory); //a is instance of the module loaded
b.stylesRoot = styleManager.stylesRoot;

Above script must immediately be called once module is loaded.

Though this resolved the problem and application started working, we didnt find any reason for such a behavior. Hence not sure if this is an appropriate fix. Note that the source code we were trying to migrate was written using SDK 3.4 and we didnt check the SDK compatibility checkbox available in Flash Builder 4. There is no error reported if this checkbox is turned on, but we were more interested in leaving it unchecked.

No it’s not one more hate post against IBM websphere, but this time the target is BlazeDS. Few days back, we were facing problem while deploying Flex application on SSL. The environment used for the deployment was IBM websphere 6.1 with IBM JDK and windows 2008. As per BlazeDS documentation, there are very minimal configuration changes required to be done in services-config.xml and other XXX-config.xml files to use secure-amf channel.

As per the instruction the configuration was modified to use secure amf channel and the SWF files were recompiled with modified configuration settings. No error messages were displayed at the time of deployment and application startup, but we found strange error message after accessing the application URL. The browser was able to load the SWF and wrapper html file, but it was throwing an error message indicating that SunX509 trust manager is not available.
After enabling BlazeDS logging and careful observation of java stacktrace we found that the actual problem was with the TrustManager implementation of BlazeDS. The default implementation available with BlazeDS is – EasyX509TrustManager and have a look at the code defined for its constructor

public EasyX509TrustManager(KeyStore keystore)
    throws NoSuchAlgorithmException, KeyStoreException
  {
    TrustManagerFactory factory = TrustManagerFactory.getInstance("SunX509");
    factory.init(keystore);
    TrustManager[] trustmanagers = factory.getTrustManagers();
    if (trustmanagers.length == 0)
    {
      throw new NoSuchAlgorithmException("SunX509 trust manager not supported");
    }
    this.standardTrustManager = ((X509TrustManager)trustmanagers[0]);
    this.trustStore = (System.getProperty("flex.trustStore") != null);
  }

From above code it is quite clear that above code assumes that whole world uses only Sun JVM. While we found the culprit, the next step was to find a fix, so I simply googled “EasyX509TrustManager IBMX509″ and Voila, google returned only one entry with link to a java code

public EasyX509TrustManager(KeyStore keystore) throws NoSuchAlgorithmException, KeyStoreException
    {
        super();
        TrustManagerFactory factory = null;
        try
        {
            factory = TrustManagerFactory.getInstance("SunX509");
        }
        catch (NoSuchAlgorithmException nsae)
        {
            // Fallback attempt - try for an IbmX509 factory in case we're running in WAS with no Sun providers registered.
            try
            {
                factory = TrustManagerFactory.getInstance("IbmX509");
            }
            catch (NoSuchAlgorithmException nsae2)
            {
                throw new NoSuchAlgorithmException("Neither SunX509 nor IbmX509 trust manager supported.");
            }
        }

This code is part of latest BlazeDS distribution, so anyone facing above problem make sure that you upgrade the BlazeDS project to latest version. Hope this helps!

Flex datagrid is nice option to display data in tabular format and with built-in features like sort, rearrange column position and customize each columns with renderers/editors, it makes developers life easy to built user friendly application in quick time.  But most of the time, those who have coded in Flex, must have noticed that the datagrid just doesnt work properly when row information is updated. Consider following scenario.

1. Datagrid uses ItemEditor to update Collection bound as dataprovider.
2. A change in value of one of the column, involves updates to values displayed in other columns.

In 2nd step, user may change value in one of the column, which will internally result in change in value displayed in other columns. One can easily achieve that using itemEditEnd event but most of the time the updates are not reflected. Consider following code

Above code just binds one ArrayCollection to datagrid and editable values are displayed in textboxes. The basic requirement is that whenever user enters “Gross” and “Commission %”, the “Commission” and “Net” column should be updated. The logic to achieve this is defined in following function

private function calculateCommission(evt:AdvancedDataGridEvent):void
{
	if(evt.reason == DataGridEventReason.CANCELLED)
		return;
	var dtIndex:int = evt.currentTarget.selectedIndex;
	var dtField:String = evt.dataField;

	var gross:*, commPer:*, comm:*, net:*;
	var dataGross:* = evt.itemRenderer.data.gross;
	var dataCommPer:* = evt.itemRenderer.data.commPer;
	var dataComm:* = evt.itemRenderer.data.comm;
	var dataNet:* = evt.itemRenderer.data.net;
	switch(dtField)
	{
		case "gross":
			trace("gross column edited.");
			gross = evt.currentTarget.itemEditorInstance.text;
			if( (dataCommPer != null) && (dataCommPer!="") )
			{
				comm = (gross * dataCommPer) / 100;
				net = gross - comm;
			}else if( (dataComm != null) && (dataComm!=""))
			{
				commPer = (dataComm * 100) / gross;
				net = gross - dataComm;
			}else{
				net = gross;
			}
			break;
		case "commPer":
			trace("comm % column edited.");
			commPer = evt.currentTarget.itemEditorInstance.text;
			if( (dataGross != null) && (dataGross!="") )
			{
				comm = dataGross * (commPer / 100);
				net = dataGross - comm;
			}
			break;
		case "comm":
			trace("comm column edited.");
			comm = evt.currentTarget.itemEditorInstance.text;
			if( (dataGross != null) && (dataGross!="") )
			{
				commPer = (100 * comm) / dataGross;
				net = dataGross - comm;
			}
			break;
		case "net":
			trace("net column edited.");
			net = evt.currentTarget.itemEditorInstance.text;
			break;
		}

		var item:Object = evt.currentTarget.dataProvider.getItemAt(dtIndex);

		if(gross!=null)
			item.gross = gross;
		if(commPer!=null)
			item.commPer = commPer;
		if(comm!=null)
			item.comm = comm;
		if(net!=null)
			item.net = net;
		evt.currentTarget.dataProvider.itemUpdated(item);
		}

(Note that above code is not completed but used for illustration purpose). Above code updates values in respective properties of given item and invokes itemUpdated function on underlying ArrayCollection. If you run the application, you might notice that the application behaves unexpectadly. Sometimes the values are updated and sometimes it wont update value. To resolve this issue, comment “itemUpdated” function call and add following code.

var colEvent:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE,
true,false, CollectionEventKind.UPDATE);
colEvent.items = [item];
colEvent.location =  dtIndex;
(evt.currentTarget.dataProvider as ArrayCollection).dispatchEvent(colEvent);

You will now notice that everytime you update the column values, the changes are reflected properly. Above code will work in all scenarios, except one. To simulate that issue, perform following steps

1. Enter some values in all the rows.
2. Click on textbox displayed for “Commission” column of 1st row.
3. Without changing any value, now select “Gross” column textbox of 2nd row with left button of mouse.
4. Change the value displayed in “Gross” textbox of 2nd row and tab out. You will notice that tab will focus on 1st row rather than moving to next textbox.

The reason behind such unexpected behavior is that when user directly selects the value in any of the editable column, the datagrid controls is not able to track the event and hence the itemEditedPosition property is not set.
To make above code work, you should modify the itemRenderer attribute in above code and create one mxml renderer component. Refer to following code.

I would name this file as “AmountInput.mxml” and change itemRenderer Attribute of the datagridcolumn to point this new component.
Build the project and run it. Now you would notice that the data updations are reflected properly.

Hope this helps !

Updated : Thought of putting source code for this example, to download the source code just click here. I am using Flex SDK 3.4 with target flash player version as 10.0.0.

As mentioned in earlier post, I have been playing with FLEX builder and understand its extensibility APIs. After spending almost day crawling through various search engines and websites I couldn’t find a single site giving me details about how to work with MXML design editor APIs, I thought of giving up. But fortunately I could able to figure out how things actually work in FLEX Builder, and then I thought of publishing some of the details through the blog.

The next few paragraphs will talk about various APIs and options available in FLEX builder which can be used by anyone to build their own plugin in Flex Builder. While the title of the post says that “Building eclipse plugin”, it surely doesn’t describe basic steps required to build eclipse plugin. To learn basics of building eclipse plugin, you should visit other sites like java2s and yeah offcourse eclipse itself has plethora of information on building plugin.

The aim of this article is to give details about the editor used to design Flex layouts. You must have used plugins which can generate AS code, ident XML code etc in Flex builder but there are very few plugins which actually work on design editor.
Before writing any plugin code you need to make sure that you have the required environment set for plugin development. Though Eclipse comes with built in feature of plugin development, Flex builder doesn’t have built-in support for Java and plugin development project. So to get started with plugin development you need to first install plugin development and Java development feature into Flex builder. Keep it in mind that we need to build plugin inside Flex Builder, the simple reason behind this is to test your plugin code we will require sample workspace of Flex builder and that can be easily started through Flex builder. The installation of Java and Plugin development feature is only required if Flex Builder is installed as Standalone version. If you have installed Flex Builder in Eclipse you can skip this installation.

The next step is to add required Extensions and Jar files in plugin project. Make sure that you have added extensions listed in following image.

Apart from adding above extensions you will need 3 additional Jar files which contain useful APIs. The filenames are derived.jar, mxml.jar and mxmlmodel.jar. You need to search these files in Flex plugins. Now create a default “view” using Plugin wizard available in Eclipse.
The wizard should create all the files required to build plugin.

Lets directly jump into java code and see how you can get the reference of MXML editor itself

MXMLEditor a = (MXMLEditor)getSite().getPage().getActiveEditor();

Above statement will give you the reference of current MXML editor. You need to be bit careful while using this statement as user may not always work with MXML editor (There is action script editor or user may switch from one MXML file to another or may even switch from design view to source code). So you need to logically place this code to get reference of MXML editor.
(Hint: Try to find out details about IPartListener.)

The editor object is pretty much useful to listen to the events raised in editor. An editor instance has a method called getMXMLModel which represents an MXML instance for the editor. You can use the IMXMLModel instance returned by getMXMLModel method to manipulate MXML code. The reference also provides a convenient method to listen to the user selection in design view.
Just place below code after getting IMXMLModel reference

mm.getSelectionProvider().addSelectionChangedListener(new SelectionChangeListener())

Note that the SelectionChangeListener is custom class implementing an interface ISelectionChangedListener. A method “selectionChanged” will be invoked on the above instance whenever user select control in MXML design editor. The method has one argument of “SelectionChangedEvent” which can be used to get the reference of the component selected. I leave the part of getting reference of control using instance of “SelectionChangedEvent” to you.
For demonstration, I have created a sample plugin which displays component selected in “Sample View”, check below images.

The story doesnt end here, I would be revealing more details about API – watch this space.

One of the best feature (yes there are many more) of Eclipse is extensibility. While it has been a most preferred IDE, not just for the development in Java, but for other languages like PHP, XML, HTML etc. building plugin for eclipse is pretty easy. The readymade wizards and built-in plugin templates makes life easier of developers. There are many other IDE built on top of eclipse and one amongst them – Flex Builder (or should I call it Flash Builder – version 4 has launched in market) is fantastic example of showing what eclipse is capable of.

While Eclipse is being so developer friendly with extensions and plethora of information available on how to extend it further, I am somewhat disappointed with Flex Builder extension. Well there are few reasons behind this
1. There is no enough information OR documentation available on internet on how to extend Flex Builder.
2. Though Flex Builder help contains couple of pages documentation about its extensibility features, it doesn’t seems to be enough and informative for the developers.

I am in the process of extending Flex Builder and after spending few hours in understanding how different editors – MXML, AS work within Flex Builder, I could able to get some insight of Flex Builder.

It seems I would be spending few more days (or may be weeks) in finding some secrets of FlexBuilder. Keep watching this space and I would publish my research on Flex Builder.

Most of you, must have customized Flex DataGrid using custom item editors, may be to format an information or to group multiple controls in one column. Customizing appearance of DataGrid cells is one of the powerful feature of Flex and comes to the rescue of developer. This article discusses one of the problem faced by the developers while implementing customized item editor.

Consider an example where in 3 columns are added to DataGrid as
1. Customer ID
2. Customer Name
3. No. of Orders

All of these columns should be editable and a search icon should be placed next to customer name textbox. Users should be able to search customer name by clicking on search icon.

Usually, developers tend to use custom item editor along with HBox or Canvas to achieve this requirement. But there are problems of using HBox or Canvas as a root tag for Item Editor. If your users mostly like to use Keyboard over mouse, you will notice that “Tab” do not work as per expectation. Users will find your application keyboard-unfriendly and may get frustrated due to forceful use of mouse. Compile following code and just tab through grids, you will notice the problem.

Well does that mean, there is no way to achieve perfect tabbing in DataGrid, aha – thats not true at all. You can certainly tweak Flex framework and achieve the desired functionality by adding few lines of ActionScript and changing the root tag.

Here is the working version of same.

You will require serach.gif image in order to run this sample program.

Updated: To download above source code, please click here.

If Flex is dominting RIA world, CXF is dominating SOA world with its feature rich framework. CXF not only makes developers life easy by abstracting many complex task through a set of APIs but also adheres to WS-* standards without a need to having dependency on other frameworks.

On an average to develop a webservices using CXF, would hardly require 5 minutes (If developers use Code First Approach). Developer need to declare a business interface, implementation class for same and annotate both these entities with JAX-WS annotation, configure the webeservice and pufff, you are done. You don’t even need to run Webservices, plug the configuration with built-in web container and you can test Webservices right from your IDE.

Well to explain all the features of CXF, this articles won’t be enough (I would rather end up writing 1000′s of pages.). While working on one of the project involving CXF, Blaze DS, Spring and Flex, we faced one problem and that turned out to be worst nightmare. We had created a set of webservices exposed through CXF and deployed with its own WAR file. On the other hand, we had created one more application, holding Flex SWF files, JAX-WS client configured through CXF – Spring configuration in XML. The clients were injected in Remoting Destination, using SPRING dependency injection feature. Finally the remoting destinations were exposed through SPRING – Blaze DS integration project.

So far, everything worked well except one problem, each time remoting destination invokes webservice operation, a new session was getting created and hence webservices were not able to maintain state of the Client.

After visiting to various forums and going through the CXF documentation we found that, CXF does provide a way to maintain session and same is explained at

• http://stackoverflow.com/questions/1741314/jaxwsproxyfactorybean-sharing-http-session (Check first reply, second reply provided by me for handler does work perfectly.)
• http://www.theserverside.com/news/thread.tss?thread_id=40839

While both the approach are able to maintain session at client side, it requires that the client code should be aware of webservices API. In our case, since JAXWS:Client was injected through SPRING configuration, making beans aware of WS API would break the architecture. Also using both the above discussed approach are having there own problem, first solution will not be suitable if the number of webservices is huge. This means it would require tracking all the webservices in application. Second approach works well for a single webservice, the moment you use another webservice of same application, voilaaa.. you will see a new session is again created.

Well, we didnt had an option but to somehow maintain session between WS-Client and WS. A thought came in my mind to check how CXF maintains session for a single webservice using BindingProvider, I started going through HTTPConduit.

After carefully reading the source code, I realised that if I could able to add Message.PROTOCOL_HEADERS to every webservice context in a generic way, my job is done. Adding Message.PROTOCOL_HEADERS to webservice context, gives developer a chance to play with HTTP headers. I developed a JAX-WS handler and tracked the request/response for every webservice invocation and added a logic to cofigure Message.PROTOCOL_HEADERS. And yippy!!! my webservice clients are now able to maintain session and that too without a need of modifying webservice client.

All I need to do is,

1. Create JAX-WS handler and configure it in SPRING configuration file.
2. Add handler to Webservice client.
3. Use BlazeDS API to hold/retrieve reference of WS session cookies and play with Message.PROTOCOL_HEADERS.

I like the extension points provided by CXF to accomplish tasks which are not so easily available in other frameworks.