Flex. Using Checkboxes in a DataGrid to Change a Property's Value

Yesterday, while working on a Flex project, I had to significantly alter how I was using a particular DataGrid in the application. Originally, this DataGrid allowed an authenticated user the opportunity to associate other users in the system with their particular project.

The process was, at the time, simple: adding a user simply meant clicking a button and editing the default information in the grid. Removing was just as easy. Select the user in the grid and press the button for remove.

However, the Web Service on the back-end was not fully designed for this feature and how it would play out in "real life". The documentation indicated that you simply pass in the grid data (converting said data to the appropriate objects for the service to process) and the Service would handle the rest.

As we flushed out this service more (this is the first project where I haven't control the server-side code...it's weird), we decided to make some good changes. The way out changes played out in the DataGrid was that I needed a way to track what users were added to or removed from the grid.

For a newly associated user, the process was easy. I added a property, named "Add", to the Value Object (VO) I use as the basis for the DataGrid. When a new user is added to the grid, I set the value of the "Add" property to "true". An existing user in the grid's value for this property was already set to "false".

But what about removing a user? If I removed them from the grid as in the previous approach (above), I was left with no simple way to track the removed user. So, I decided (in the interest of time) to add a Remove property to the VO. Not surprisingly, the Remove property defaults to "false". This property's value would be best set/unset in the grid itself...but how?

I decided to use an Item Renderer in the grid for this property and chose a checkbox (mx:CheckBox). It seemed easy enough to do this. In fact, the code to use a mx:Checkbox component as an item rendered in the DataGrid is as easy as this:

Pretty easy. However, I needed a way to dispatch an event when the checkbox was clicked/selected. Along with this event, I needed to pass the row number in the grid of the selected item so that I could properly set the Remove property to "true". The Web Service does not accept boolean values, only string, hence why I am using "true" and "false" and not actual boolean values.


 
  
  
           
    
     
     --CDATA opening 'tag' removed for code sample
      import com.nci.asa24.admin.control.events.ColumnSelectedEvent;
      private function sendClick( evt:Event=null ):void
      {
       var event:ColumnSelectedEvent = new ColumnSelectedEvent( ColumnSelectedEvent.COLUMN_SELECTED, this.listData.columnIndex, this.selected );
       dispatchEvent( event ); 
      }
    --CDATA closing tag removed for code sample

An important thing to note is that when you use an item renderer in this way, it runs in its own scope, unaware of what's going on in the containing component (the mx:DataGrid, etc.). This really threw me and is why you see the mx:Script block in the renderer.

Additionally, check out the listData property of "this". I never knew about this property before (the things I don't know and keep learning about Flex/AS3 constantly amaze me!). In short, it references the containing grid and its details. Very, very handy! It's also how we get the currently selected row number to use when updating our property.

You'll also notice in the code above that I imported a custom event (this event was taken from the Flex 3 Cookbook). Here's that event class, for those interested:

package com.
{
 import flash.events.Event;

 public class ColumnSelectedEvent extends Event
 {
  public var colIndex:int;
  public var isSelected:Boolean;
  
  public static const COLUMN_SELECTED:String = "ColumnSelected";
  
  public function ColumnSelectedEvent( type:String, colIdx:int, isSelected:Boolean )
  {
   super(type,true,false);// note that I set bubbles (param 2) to true...this is a must!!   
   this.colIndex = colIdx;
   this.isSelected = isSelected;   
   
  }
  
  override public function clone():Event
  {
   return new ColumnSelectedEvent( type, colIndex, isSelected );
  }
  
 }
}

This event captures two key pieces of data: the currently selected row in the grid and whether or not the checkbox is selected. I'll use the later to determine the correct value to apply to the Remove property.

NOTE In the comments of the code snippet for the custom event above, I note that I set the bubbles property of the event to true. This was crucial for me. Without having the event bubble up, the listener for the DataGrid never heard the event. Do not forget to check that (bubbling property) if you are in this situation!!

In order to "hear" the checkbox being clicked, I added an event listener to the mx:DataGrid element. To do so, I assign a function to the creationComplete handler in the mx:DataGrid's attributes (creationComplete="assignListener()") that will setup the listener. That function follows:

private function assignListener():void
{
 this.dg.addEventListener( ColumnSelectedEvent.COLUMN_SELECTED, removeSelected );
}

Pretty simple, really. Now, here's the "removeSelected" function that gets called when the event is captured.

private function removeSelected( evt:ColumnSelectedEvent ):void
{
 if( evt.isSelected )
 {
  this.dg.dataProvider[evt.colIndex].Remove = "true";
 }
 else
 {
  this.dg.dataProvider[evt.colIndex].Remove = "false";
 }
}

With this code in place, I am able to easily have the value of the VO's remove property set to the strings true or false.

I hope that this post can save someone (anyone, really :) ) a little time if you're in a similar position with your application.

Comments

RichieInOz

Hello,

This is a great example, very easy and the most simple I have found online.

My question is, how do you center a checkbox, using the layout in this fashion? I cannot figure out how to vertically/horizontally align my checkbox inside the datagrid column. Any ideas?

Brooks

Craig, could you show us an example. Also anyway we can get the full source instead of snippets! please help, i have this exact problem!

Craig Kaminsky

Thanks, Rasmus! I'll try that again ... it's been a while since I messed with this but recalled that I could not dispatch the event from the click handler and get the right data passed in, which was why I had the semi-kuldgy mx:Script tag. I probably missed something though :) and will check it out.

Cheers, Craig

Rasmus

cath, code is there - just view page source. seems the brackets throws off Chrome.

Thanks for the first useful implementation of a checkbox column! btw, if you want to get rid of the script block (it aint pretty), you could just fire event from click:
click="dispatchEvent(new ColumnSelectedEvent(blabla))" ...

cath

hi, is it just me or there really is no posted code for the itemRenderer?

PureMVC for Flex. A Flex Builder-induced Gotcha

As I'm working towards the conclusion of my first major PureMVC project, I thought I'd post a few reminders for myself (and anyone else who might stumble upon such posts) for things to watch out and not do.

The following is a little thing that I ran into with PureMVC. It is not noted here as a criticism of the framework or anything of that sort!

Flex Builder-created Mediators and Listing Notifications
When you create a new PureMVC mediator in Flex Builder 3 using the new ActionScript Class 'wizard', you extend the framework's Mediator class and implement its IMediator interface. Flex Builder provides and option, which you can check, to "Generate functions from inherited interfaces". If this options is selected, Flex Builder stubs out the functions from the interface, as you would expect.

The only problem is that it stubs out the method for listNotifications as follows:

public function listNotificationInterests():Array
{
 return null;
}

There are two problems with this auto-generated code. First, if you are going to use this method in your mediator, you need to override it. This isn't a big deal because the compiler will throw an error letting you know you need to override it.

Second, this method has to return an array. It can be an empty array, but it must be an array and not a null value. This is not an error that will get caught in the compiler, so your application will run and then throw an error when you try to register your mediator.

If you include this method, and it's not required in mediators unless you want the mediator to subscribe to be sure to have it stubbed out as follows:

override public function listNotificationInterests():Array
{
 return [];
}

In the scenario where you override the function but return null per the Flex Builder-generated code, the Flash player will throw an error when you go to instantiate (register in PureMVC) the Mediator in question, noting that it can't operate on a null value (Error 1009, if I recall).

The problem is that as the Mediator is being registered, the framework wants to know what notifications this mediator is subscribed to. At the least, it needs an empty array to determine that the Mediator is not interested in any notifications. The returned null value just doesn't do it!

It's little, I know, but it cost me a little time trying to track down a null object.

Comments

James

Oh thank goodness, I spend ages searching for 'PureMVC registerMediator null error in Flex' and finally found this!

Sorted.

Craig Kaminsky

@ashik: What sort of details are you looking for on SOAP Web Services? Consuming them in Flex? Creating them? Let me know & I'm sure I can help out.

redhat linux

hai,

this is ashik

I'm a beginner in flex develop and programming side ..

your post is useful for myself ..

i want details using SOAP webservice ...

Craig Kaminsky

Me, too! I've been using the current prerelease of FB 4 and it's going to be a huge improvement for us. Just wish I had it (FB4 alpha) earlier in this project. Oh well, next time right?!

Joel Hooks

Can't wait for FB4. It is going to allow for user-defined class templates. I make these changes blindly at this point :>

Flex. Using Complex SOAP Headers with Web Service

Because of a known bug in Flex 3's generation of AS3 classes from WSDL files that results in myriad encoding/decoding and type definition problems, my current Flex project has me alternating back and forth between my Flex-generated web service classes and the actual Flex WebService class. I end up having to use Flex's built-in WebService classes for calls to methods that require or return what are loosely termed complex objects.

The process of using the WebService class for these tasks is pretty generic. However, in my case, the Web Services with which I am working require an authenticated Token to be passed in the SOAP header to all methods, save for the one that actually does the authentication.

I've spent a good deal of time scouring the Internet for examples of adding SOAP headers to a Web Service call. Many of the posts and articles I found were been pretty solid. Most, however, dealt with fairly simple headers (i.e., passing in a string or two for a username and password). The Web Services with which I'm dealing require more than a couple of strings. I have to authenticate a user first and then use their authenticated token (which is good for 60 minutes) in my other method calls.

As with a few other posts, none of this is groundbreaking or overly complex. I merely wanted to post my experience in the event someone runs into a similar problem and needs an exampe of how to deal with this.

To start, here is a sample of how my SOAP Header should appear (most namespace crap removed for readability):



689ee0dd-9d27-46c6-bb27-1f29ac4c6d03</s1:Id>
bbd12fa7-f292-4bc5-a37f-06234e877ad8</s1:UserId>
user-name</s1:UserName>
e6b3998c-13d9-49fe-a13e-7af27c8229fd</s1:ApplicationId>
</Token>
</SOAP-ENV:Header></pre>
The Id, UserId, and ApplicationId properties of the Token object (children of the Toeken element in XML parlance) are Guids (Globally Unique Identifiers). A Guid, at its core, is nothing more than a string. However, because it's got a different type/class, I am not able to use a simple string. I have to pass in a string to my Guid constructor to set the Token properties properly.

Setting up the Token in Flex is pretty easy. I actually blogged about it previously on working with SOAP responses. Basically, I just store the token returned from the authentication routine in a globally available Token object (okay, it's not really globally available, this is a PureMVC app, so I get it via a proxy!).

When I use the Flex-built AS3 classes to interact with one of the application's Web Services, I just do something along the lines of the following:

public function getReports( rptReq:ReportRequest ):void
{   
 rs = new ResearcherService();
 rs.addEventListener( FaultEvent.FAULT, oops );
 rs.addrequestReport_header( token );
 rs.addrequestReportEventListener( reportsRequestReceived );
 rs.requestReport( rptReq );
}

Pretty easy. Just create a new service, add a couple of event listeners, and throw the token into the header. So long as the method only returns what Flex considers a "simple" value, I'm good to go. The RequestReport method (above), does just that. It only returns a simple object that has a few properties (strings, numbers and one array). Easy.

However, this same Web Service has another method, GetRequestHistory, that is pretty complex as regards what it returns (strings, numbers, file data, other objects). When I tried to deploy similar code to what's above, I get a SOAP decoding error, as Flex cannot resolve the type of the returned data (Adobe refuses to fix this issue in Flex 3, having said it's fixed in Gumbo, which it is but I can't use alpha software for a this application, the software changes too frequently -- thanks, Adobe!). 

Anyway, in order to get the GetRequestHistory method to work, I need to use the "old school" WebService class (and then manually get to parse the SOAP response...fun!!!!). Here's the code to call GetRequestHistory with the WebService class, including setting up the SOAP header.

public function getRequestHistory():void
{  
 var qname:QName = new QName( "http://tempuri.org/", "Token" );
 var hdr:SOAPHeader = new SOAPHeader( qname, token );   
 ws = new WebService();
 ws.addHeader( hdr );
 ws.wsdl = "http://mydomain.com/MyService.asmx?wsdl";
 ws.addEventListener( FaultEvent.FAULT, oops );
 ws.addEventListener( LoadEvent.LOAD, wsHistoryReady );  
 ws.loadWSDL();   
}

private function wsHistoryReady( evt:LoadEvent ):void
{   
 ws.GetReportHistory.resultFormat = "e4x";
 ws.GetReportHistory.addEventListener( ResultEvent.RESULT, reportHistoryReceivedWS );
 ws.GetReportHistory( studyName );   
}

First, I create two variables, a qname (class: QName) and a header (class: SOAPHeader). The qname is a qualified name for the (SOAP) XML to be sent to the service. It defines a valid identifier for elements and attributes. You pass two attributes to the QName constructor: the URI of the namespace and the local name, both of which you would get from looking at the WSDL file. The local name is, so far as I can tell, the name of the object (or root XML element) you are passing. In my case, it's called Token (see the SOAP Header excerpt above for why/how this is the case).

Second, you pass the QName and object to the SOAPHeader constructor. Flex has now, in theory :), created the appropriate SOAP Header. All that's left is to apply it to the WebService instance, which is quite simple...you just pass the SOAPHeader variable (hdr in the code above) to the addHeader method and you're good to go. 

Finally, load your WSDL and invoke your method! I've seen this step done a variety of ways but I prefer to add a LoadEvent listener to my WebService classes and only call my method once the WSDL has loaded (ws.addEventListener( LoadEvent.LOAD, wsHistoryReady );). Flex loads the WSDL really, really, fast and I've made calls to a WS method immediately after the loadWSDL() statement without any issues but this (waiting for the LoadEvent to fire) just seems a better practice to me.

The final note I'll make is that I had A LOT of trouble making the resultFormat of the WebService instance an "object" when dealing with the encoding/decoding issues I've mentioned. This wasn't really surprising to me because the Flex-generated Web Service classes couldn't decode the object returned from the SOAP, so why should the straight-up WebService class? 

Next up, manually decoding the freaking complex object/XML to the appropriate ActionScript objects so I can use the returned data in my application. Ugh.</div>
Comments

Flex. Using Checkboxes in a DataGrid to Change a Property's Value

Comments

Disclaimer

Comments

Author

Craig Kaminsky

Flex. Using Checkboxes in a DataGrid to Change a Property's Value

Comments

Disclaimer

Older · View Archive (109)

PureMVC for Flex. A Flex Builder-induced Gotcha

Comments

Newer

Flex. Using Complex SOAP Headers with Web Service

Comments

Author

Craig Kaminsky