Create a custom headerRender for the AdvancedDataGrid column with a checkbox control embeded and adhering to the following functional requirements

• support(retain) the column sort functionality
• must be a reusable component (no tight coupling)
• easy to extend and plugin to use in any other grid control

Use Case:

Provide the Select All rowItems functionality for the grid column. Each row item will have a checkbox to allow its (un)selection.

Solution:

The Select All functionality for all the row items in the grid is a very common requirement for any application, but however before implementing we need to be clear about the dataProvider as well.

Will the dataProvider for the grid have dataFields, which can be binded to the state of the checkbox in the column header and for each of the row items?

If the dataProvider contains dataFields which can be binded to the UI it is fairly simple to handle the use case, but if the SelectAll is purely a UI operation for populating the list of selected items for further processing, then it becomes little more challenging.

One more challenge here is to preserve the sort functionality for the column, as any custom implementation of the headerRenderer or any component being used as the headerRenderer will strip off the sort functionality for the column. Check it out for yourself if you dont believe it.

Here is the approach that I followed to address the constraint on

>ReUsability: Program to an interface and avoid tight coupling with the parentDocument while handling the communication and binding with the grid.

>Extensibility: Encapsulate the behaviour in the class as a separate .as file extending UIComponent and provide the customizable behaviour in the  virtual methods which cane be overriden if required by the derived classes.

There are two approaches to implement the checkbox headerRenderer

Appraoch 1: Specify any implementation of UIComponent (say CustomCheckbox) as a headerRenderer for the grid column

But then you need to be prepared to handle the layout and rendering of the sortItemRenderer inorder to provide the sort functionality on the column. Also you need to be prepared to hook onto the instance of the headerRenderer for communication with the grid as you will be stumped to discover that the grid creates a new instance of the headerRenderer every now and then. Possible work around for this is to create the instance of the headerRenderer as an instance of the classFactory and store it as a bindable value in the parentDocument. After managing all of it you still need to be able to differentiate between a click to Sort and click to SelectAll by putting in vague logic based on the position of mouse click. I hope you agree that it cant get simpler than this

Approach 2: Implement the custom headerRenderer by extending the default AdvancedDataGridHeaderRender implementation and specify it in the grid column

This approach looks the obvious natural choice but then you need to know how and where to insert the custom implementation. Refer to my post on creating custom Flex controls for more info on it. Also you need to be able to differentiate between a click to Sort and click to SelectAll, which I managed it by controling the sort property of the column in response to mouse hover . Look below for the OnMouseRollOver method.

Show me the source code:

Here is the code for CheckboxHeaderRender.as:

import flash.display.DisplayObject;
	import flash.events.MouseEvent;

	import mx.controls.AdvancedDataGrid;
	import mx.controls.CheckBox;
	import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
	import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
	import mx.core.UITextField;

	//Customizes the default AdvancedDataGridHeaderRenderer by displaying the checkbox in the header to
	//provide the SelectAll functionality in the grid. It uses the default sortItemRenderer of the grid, if not specified.
	public class CheckboxHeaderRenderer extends AdvancedDataGridHeaderRenderer
	{
		//stores the associated column
		private var _gridColumn:AdvancedDataGridColumn;
		//the checkBox control to be added as a child control
		private var checkBox:CheckBox;
		//stores the parentDocument(HostControl)
		private var _hostControl:IGridHostControl=null;
		//stores the default leftPadding for the checkbox control
		private const LEFT_PADDING:int = 5;

		//constructor
		public function CheckboxHeaderRenderer()
		{

			super();

			this.id = "checkboxHeaderRenderer";
			//initialize the checkbox control
			checkBox = new CheckBox();
			checkBox.label="";		 

			//BindingUtils.bindProperty(checkBox,"selected",HostControl,"allSelected");

			//subscribe to the events of interest...
			checkBox.addEventListener(MouseEvent.CLICK,OnCheckboxClick);
			addEventListener(MouseEvent.ROLL_OVER,OnMouseRollOver);
		}

		//gets the associated dataGrid column
		private function get gridColumn():AdvancedDataGridColumn{
			if(_gridColumn == null){
				_gridColumn = data as AdvancedDataGridColumn;
			}
			return _gridColumn;
		}

		////////////////////// EVENT Handlers ////////////////////////////

		//Response to Mouse RollOver event
		private function OnMouseRollOver(event:MouseEvent):void{

			//control the sortable property of the column
			if(event.localX > checkBox.x + checkBox.measuredWidth){
				if(gridColumn != null){
					gridColumn.sortable = true;
				}
			}
			else{
				if(gridColumn != null){
					gridColumn.sortable = false;
				}
			}
		}

		//response to the click event on the checkbox
		private function OnCheckboxClick(event:MouseEvent):void{

			//(un)select the items
			if(HostControl != null){

				HostControl.ToggleSelectionList(checkBox.selected);
			} 

			//refresh the UI
			if(listData != null){

				var grid:AdvancedDataGrid = listData.owner as AdvancedDataGrid;
				if(grid != null){
					grid.invalidateList();
				}
			}
		}

		////////////////////// VIRTUAL Methods ////////////////////////////

		//gets the associated HostControl(ParentDocument)
		//The ParentDocument control hosting the AdvancedDataGrid must implement IGridHostControl
		//Returns Null, if the HostControl(ParentDocument) doesn't implement IGridHostControl
		public virtual function get HostControl():IGridHostControl{

			if(_hostControl == null){
				_hostControl = this.parentDocument as IGridHostControl;
			}
			return _hostControl;
		}	 

		//gets the left padding for the checkbox in the header
		public virtual function get LeftPadding():int{

			if(HostControl != null){

				return HostControl.LeftPadding_CheckboxHeaderColumn;
			}

			return LEFT_PADDING;
		}

		////////////////////// OVERRIDEN Methods ////////////////////////////

		//overriden to add the custom components
		override protected function createChildren():void{

			super.createChildren();

			addChild(checkBox);

		}

		//performs the layout of the child controls
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

			super.updateDisplayList(unscaledWidth,unscaledHeight);

			var textLabel:UITextField;
			var n:int = numChildren;
            for (var i:int = 0; i < n; i++)
            {
                var c:DisplayObject = getChildAt(i);

                if (c is CheckBox)
                {
                    c.x = LeftPadding;
                    c.y = (unscaledHeight - c.height)/2;                    

                }else if(c is UITextField){

                	textLabel = c as UITextField;
                }
            }

            //check to avoid overllaping of text on the checkbox
            var xMin_text:int = checkBox.x + checkBox.measuredWidth;
            if(textLabel !=null && textLabel.x < xMin_text){

            	textLabel.x = xMin_text;
            	textLabel.truncateToFit();

            }

		}

		//override to bind the checkbox state
		override protected function commitProperties():void{

			//set the properties of the checkBox
			if(HostControl != null){
				checkBox.selected = HostControl.AllSelected;
			}
			super.commitProperties();
		}

	}

Here is the code for IGridHostControl.as:

//Contract that must be implemented by the UIComponent hosting(i.e, acting as a parentDocument for)
 //the AdvancedDataGrid(ADG) control that intends to use the CheckboxHeaderRenderer implementation
 //as a customHeader for its ADG column.
 public interface IGridHostControl
 {

 //gets the value of the Binding variable for the checkBox state in the custom header of the ADG
 function get AllSelected():Boolean;

 //sets the value of the Binding variable for the checkBox state in the custom header of the ADG
 function set AllSelected(value:Boolean):void;

 //Adds/Removes all the items to/from the selection list
 function ToggleSelectionList(selectedState:Boolean):void;

 //synchronize the header checkBox with its binding variable
 //This method is used to synchronize the checkBox in the header, when its binding variable is changed
 function UpdateHeaderSelection(selectedState:Boolean):void;

 //gets the Left padding to be associated with the checkbox control in the column header renderer
 function get LeftPadding_CheckboxHeaderColumn():int;

}

The parentDocument must implement the IGridHostControl interface to use CheckboxHeaderRenderer as the headerRenderer for the grid column.

The first obvious step would be to look at the source code implementation located at <Flex 3.1.0 SDK Installation Directory\frameworks\projects\framework\src\mx\core\UIComponent.as>

In my opinion the most effective approach for creating your own custom controls is to extend them from the base controls and customize by overriding and digging into the source code of the base controls.

Some of the common methods, that you might want to override in your custom component are

Refer to the next post for creating the custom flex UIComponent

• Flex project and workspace:

http://www.adobe.com/devnet/flex/articles/best_practices_pt1.html

• Flex Development:

http://www.adobe.com/devnet/flex/articles/best_practices_pt2.html

• Coding Conventions:

http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions

If you are new to Flex and coming from a .NET background, you might want to map the coding guidelines and FlexBuilder(eclipse) environment to that of the msdn guidelines and VS IDE.

Best Practices help you in getting the fundamentals right and are extremely useful especially when you are just getting started with flex. Also clarity in concepts related to workspace and flex project environment  will save you a lot of effort in overcoming the small yet annoying problems.

If you have the FlexBuilder already installed, you would be pleasantly surprised to discover it on your hard disk

All the action script files for flex controls can be found at

• <FlexBuilder installation directory\ Flex Builder 3\sdks\3.1.0\frameworks\projects\framework\src\mx\controls>
• <FlexBuilder installation directory\Flex Builder 3\sdks\3.1.0\fbpro\projects\datavisualization\src\mx\controls>

If you want to start using and customizing the flex controls, the source code of the base controls is your saviour.

In my opinion, reference to the source code of the base controls must be the first step for anybody trying to customize the base controls. It was really surprising that I have not come across any documentation or pointers for locating the source code of the flex controls or probably I havent spent enough time in exploring what packages along with the flex sdk.

Initial feeling is that it is really cool technology for web development because

>of its very rich UI

>its open source, the entire source code is available

>development is independent of the browser, as the Flash player takes care of all the issues relating to the  browser

But then the not so attractive things are

>its not as developer friendly as the tools from Microsoft

>Flex 3 doesnt have the strong type casting

>the UI controls are not as intutive and object oriented as the windows controls. Dont be surprised to find out that the Tree control doesnt really have any nodes and the Grid doesnt have any rows.

>the documentation and IDE, when compared to msdn and VS.NET IDE

But the availability of the source code makes it comforting for you to dig down and get the job done.

• Undo/Redo is an EDIT operation

Operation1 + Undo(on Operation1) = 2 Edit operations.

This will mean that the state of the object(lastModified) is changed even though there is no change in the content.

Hence any mechanism to know whether there are any changes made to the ObjectModel state must be based on the difference in the content and cannot just be based on its lastModified info.

• Maintaining the edits in a Stack(FirstInLastOut behaviour) will enforce the undo/redo implementation to be sequential in the reverse order in which the operations were performed. It cannot offer the flexibility to offer the undo/redo functionality for the edits which need not correspond to the latest edit operation.

• Each edit must implement the CanUndo() and CanRedo() to validate the undo/redo operation. This is very essential to ensure that the object model on which edit operation is performed via the undo/redo implementation does not push the underlying object model to an Invalid state.

Each edit might have a cached object instance associated with it when the edit is initialized. When trying to perform the Undo/Redo operation using the cached object, validation is must to ensure that using the cached object doesnt push the underlying object model to an Invalid State, resulting in a total disaster.

• Each edit must implement Dispose() to ensure that objects cached in the edit are disposed and they don’t eat up the memory.

In addition to all these, for a robust implementation of undo/redo here are some tips

1. Undo Redo for an edit operation on the objectModel should only be dependent on the objects in the objectModel. It should never be dependent on the objects used in the UI which are used for displaying the content of the objectModel.

2.  Always update the object model before updating the UI, so that the UI displayed will always truly represents the object model.

3. The undo/redo implementation will deal with cached instance of the object model but working with caching instances of the UI objects should be avoided and instead the UI objects which represent the object model must be retreived at run time.

Sample Code

</pre>
//interface defining the edit
 <strong> public interface IUndoableEdit</strong>
 {

//Perform the Undo operation
 bool Undo();

//Perform the Redo operation
 bool Redo();

//validates whether Undo operation can be performed on this edit   //in the current context
 bool CanUndo();

//validates whether Redo operation can be performed on this edit   //in the current context
 bool CanRedo();

void Dispose();

}

//Class providing the infrastructure for manging the IUndoableEdits
 <strong> public class UndoStack</strong>
 {
 //stack is used to store the edits..First In Last Out

private Stack undoStack;
 private Stack redoStack;

public UndoStack()
 {
 //initialize the stack
 redoStack = new Stack(100);
 undoStack = new Stack(100);
 }

public void AddEdit(IUndoableEdit  edit)
 {
 //validate input arguments
 undoStack.Push(edit);
 }

//Clear all the edits stored in the Stack.
 public void ClearAll()
 {
 undoStack.Clear();
 redoStack.Clear();
 }

public void Undo()
 {
 if(undoStack.Count == 0)
 {
 Console.Beep();
 return;
 }

IUndoableEdit edit = undoStack.Pop();

if(edit.CanUndo() && edit.Undo())
 {
 if(edit.CanRedo() )
 {
 redoStack.Push(edit)
 }
 }
 else
 {
 edit.Dispose();
 }

}

public void Redo()
 {
 if(redoStack.Count == 0)
 {
 Console.Beep();
 return;
 }

IUndoableEdit edit = redoStack.Pop();

if(edit.CanRedo() && edit.Redo())
 {
 if(edit.CanUndo() )
 {
 undoStack.Push(edit)
 }
 }
 else
 {
 edit.Dispose();
 }

}

}
<pre>

1.Blind Undo/Redo

The Undo/Redo functionality without specifying the operation which will be performed.

2.Instructional Undo/Redo

The menu item offering the Undo/Redo functionality also displays the operation which will performed. This makes use of the DisplayName of the edit to be performed.

3.Single Undo/Redo

The typical notepad style supporting Undo/Redo only for the last operation performed.

4.Multiple Undo/Redo

Multiple Undo/Redo supports unlimited no of edits for all the opertaions performed.

5.Multiple Undo/Redo with the UI to choose the number of edits.

Its the typical MS word style. The UI(toolBar Button) shows the DisplayName of  all the edits in the Undo/Redo stack providing the option to choose the multiple edits to be performed. This provides the option of performing Undo on the last N opertaion at one shot.

More sophisticated implementation would be allow the user to choose the edit which need not correspond to the last edit operation.

For Eg:

Operation 1- Delete a line

OPeration2- Find Replace operation performed for a particular word

What if user wants to perform Undo for operation1 but NOT for operation2?

My next post will be on the Challenges that I faced in implementing Multiple (Instructional) Undo/Redo .

That’s the power of Undo/Redo. We take it for granted in any standard, user-friendly software.

• It acts as a Saviour, during the times of distress
• It makes the learning process like a ride on a Highway.
• It allows the users to explore the software with a confidence that he can always recover easily from the mistakes, during the learning process.

Q. But why does a computer application need the Undo/Redo functionality, when the underlying piece of code will never ever go wrong it its output. You run the same operation 1000 times with the same inputs you are guaranteed to get the same output every time?

Ans. The Undo/Redo is meant for the User and not the application itself. Yes the computer program never makes a mistake but humans do. They are by default error prone.

What the designed applications treats as an invalid input for an operation might be a perfectly valid input from the users side.

The role of Undo/Redo comes into picture when an error(s) is made and the user realises it and express a strong intent to recover from the mistake(s) made.

The application must always assume that the user is always right.