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.

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.

This time one more assignment to integrate Spring APIs with Jboss MQ. After reading through Spring documentation, I found its pretty easy to integrate any Messaging Provider solution into Spring application.

Configuring JMS Topic in JBoss

To create new JMS Topic destination you should configure new topic destination in [deploy_directory]/deploy/jms/jbossmq-destinations-service.xml. Following code snippet creates new Topic Destination.

jboss.mq:service=DestinationManager
jboss.mq:service=SecurityManager

Well in actual production system you should not configure guest role access with Read/write permission. Add above XML code snippet below <server> tag and save it. Start JBoss console and you should notice that JBoss will create new topic and bind it to JNDI with name as “topic/MyTopic” (Note this is generic JMS client configuration and doesn’t use any properitory JMS provider APIs. You will have to change the properties of jndiTemplate based on your Messaging Service Provider.)

Using Spring API

Now lets create client code to send messages. I assume that you are using Spring – BlazeDs integration project and aware of how to configure Spring configuration file with BlazeDS. The following code snippet must be defined in Spring configuration file. Make sure you have also imported Spring-Flex namespace.

org.jnp.interfaces.NamingContextFactory
localhost
 org.jnp.interfaces:org.jboss.naming 

java:/XAConnectionFactory

topic/MyTopic

Now you can expose jmsDestination using flex:jms-message-destination tag. (Available with Spring-BlazeDS integration jar.)

Creating Flex Client

We are done with the server side configuration and now its time to define Flex Client to subscribe to JMS topic. Flex comes with a handy tag as MX:Consumer and MX:Producer. MX:Consumer is useful to subscribe to JMS topics and queues, while MX:Producer by the name itself it is quite clear that this tag is used to publish messages to JMS. Declare following tag to subscribe to JMS topic

Note that in above example the value of destination attribute is exactly same as the value of id attribute defined for jms-message-destination tag. This still won’t start subscription to JMS topic and in order to start subscription you must explicitly subscribe to JMS topic by calling subscribe method  on MX:Consumer instance. Let assume that following function is invoked on “CreationComplete” event of application.

private function subscribeTopic():void
{
messageConsumer.subscribe();
}

This will start subscription to JMS topic destination and keep on polling to message server for any new message. OK! but how you will receive message notification, notice there are two event handler defined with MX:Consumer tag declaration. And here is the code snippet of “message” event handler.

private function consumerMessageHandler(event:MessageEvent):void
{

var msg:AsyncMessage = new AsyncMessage(event.message);
Alert.show(ObjectUtil.toString(msg.body));
}

This function just prints all the contents of the Message. If you are accessing Object style JMS message, the properties of such message can be accessed using “.” notation.

Deployment

Package all the generated SWFs and copy all the required files (JAR, XML configuration files etc) to a WAR file and deploy it on JBoss server. Hit your application URL and you should be able to receive any messages sent to JMS topic.

Known Issue

At the time of deployment, you might come across following exception being thrown by JBoss

: Failed to convert property value of type [org.jboss.mq.SpyXAConnectionFactory] to required type [javax.jms.ConnectionFactory] for property ‘connectionFactory’

Make sure that the deployed WAR file doesn’t contain and JMS-API library file. The above error is occurring due to ClassLoader issue but the error message is misleading.