Google Mail like header component for Datagrid/AdvancedDatagrid in flex4

This post has been moved to http://srinichekuri.com/2011/04/23/google-mail-like-header-component-for-datagridadvanceddatagrid-in-flex4/

********************************************************************

I have tried to look around on web for a opensource component that simulates google mail(gmail) header like behavior in flex but couldn’t find one. As any other developer I have built my own component and am posting for the online community to make use of it.

You can have a look at the component here:

View Component

You can download the source code for this component here:

Download source code

As you can see I have customized the options that appears in the menu when you click on the arrow of the header. I will explain the behavior of the component before I take a deep drive into the code.

  • You can click on the arrow to select any one of the options given. I have put in 3 options:
    • All: Selects all the columns in the datagrid
    • None: Selects none of the rows and deselects rows if there are any already selected
    • Top 5: Select top 5 columns in the grid
  • Click on the checkbox on the header either select/deselects all the rows.

Here are few screen shots:

Click on the ‘Top5’ Option in the Header:

Component when top5 option is selected

 

Click on the CheckBox in the Header:
Component when the checkbox is clicked

Explanation of the code:
There are two main files that contribute as Datagrid’s header renderer:
DropDownButton:

package com.customization.controls
{
import com.customization.event.DropDownEvent;
import com.customization.skin.DropDownButtonSkin;

import flash.events.MouseEvent;

import mx.controls.Alert;
import mx.controls.Menu;
import mx.core.FlexGlobals;
import mx.core.mx_internal;
import mx.events.MenuEvent;
import mx.styles.CSSStyleDeclaration;
import mx.styles.IStyleManager2;
import mx.styles.StyleManager;

import spark.components.Button;

/**
 * Event dispatched when an option is selected from the dropdown menu.
 *
 * @eventType com.customization.event.DropDownEvent.OPTION_SELECTED
 */
[Event(name="optionSelected", type="com.customization.event.DropDownEvent")]
/**
 * DropDownButton extends <code>Button</code> component. When the button is clicked menu is
 * shown with options that can be selected.
 *
 * @author Srinivas Chekuri
 * @see DropDownSelector
 */
public class DropDownButton extends Button
{
/**
 * XML that defines the menu that should be displayed when clicked on the button.
 *
 * @default <xml></xml>
 */
public var myMenuData:XML=<xml></xml>;
private var menu:Menu;

public function DropDownButton()
{
super();
}

/**
 * overrides the initialize method of <code>mx.controls.Button</code>. EventListener are added to
 * <code>MouseEvent.CLICK</code> on this component and <code>MenuEvent.ITEM_CLICK</code> on Menu.
 * <code>skinClass</code> is set to <code>com.customization.skin.DropDownButtonSkin</code>.
 *
 */
override public function initialize():void {
super.initialize();
this.addEventListener(MouseEvent.CLICK,buttonMouseClickHandler);
this.setStyle("skinClass",com.customization.skin.DropDownButtonSkin);
menu = Menu.createMenu(null, myMenuData, false);
menu.labelField="@label";
menu.addEventListener(MenuEvent.ITEM_CLICK,menuClickHandler);
}

/**
 * Handler methos for mouse click on the button. This shows the menu.
 *
 * @param event MouseEvent
 *
 */
private function buttonMouseClickHandler(event:MouseEvent):void{
menu.show(this.x,20);
}

/**
 * Handler method that will be called when option is selected in the menu by a mouse click.
 *
 * @param event MenuEvent
 *
 */
private function menuClickHandler(event:MenuEvent):void{
var dropDownButtonEvent:DropDownEvent = new DropDownEvent(DropDownEvent.OPTION_SELECTED);
dropDownButtonEvent.selectedOption=event.item.@label;
dispatchEvent(dropDownButtonEvent);
}
}
}

DropDownSelector:

package com.customization.controls
{
import com.customization.event.DropDownEvent;

import flash.events.MouseEvent;

import mx.containers.HBox;
import mx.controls.Alert;

import spark.components.CheckBox;
import spark.components.HGroup;

/**
 * Event that is thrown when the checkbox is checked or unchecked.
 *
 * @eventType com.customization.event.DropDownEvent.CHECKBOX_STATUS_CHANGE
 */
[Event(name="checkBoxStatusChange", type="com.customization.event.DropDownEvent")]
/**
 * DropDownSelector is a class that hosts a google mail like header component that will allow us
 * to select the options from the drop down menu.
 *
 * @author Srinivas Chekuri
 * @see DropDownButton
 */
public class DropDownSelector extends HBox
{
private var checkBox:CheckBox;
private var button:DropDownButton;
private var myMenuData:XML=<XML>
<menuitem label="All"/>
<menuitem label="None"/>
<menuitem label="Top 5"/>
</XML>;
/**
 * Constructor.
 *
 */
public function DropDownSelector()
{
super();
intializeView();
}

/**
 * Method that initialize the views by instantiating the checkbox and the DropDownButton component.
 * This also adds event listeners to clicks on both these components.
 *
 * @private
 */
private function intializeView():void{
this.setStyle("horizontalGap",0);
this.setStyle("verticalGap",0);
this.setStyle("horizontalAlign","center");
this.setStyle("verticalAlign","center");
//Initializing CheckBox
checkBox = new CheckBox();
checkBox.horizontalCenter=0;
checkBox.verticalCenter=0;
checkBox.addEventListener(MouseEvent.CLICK,checkboxMouseClickHandler);
checkBox.horizontalCenter=0;
checkBox.verticalCenter=0;

//Initializing DropDownButton
button = new DropDownButton();
button.myMenuData=myMenuData;
button.width=15;
button.horizontalCenter=0
button.verticalCenter=0;
button.addEventListener(DropDownEvent.OPTION_SELECTED,optionSelectHandler);

this.addChild(checkBox);
this.addChild(button);
}

/**
 * Handler method when checkbox is clicked. When ever this method is called
 * <code>DropDownEvent.CHECKBOX_STATUS_CHANGE</code>id dispatched.
 *
 * @param e MouseEvent dispatched.
 * @eventType com.customization.event.DropDownEvent.CHECKBOX_STATUS_CHANGE
 */
protected function checkboxMouseClickHandler(e:MouseEvent):void{
var event:DropDownEvent = new DropDownEvent(DropDownEvent.CHECKBOX_STATUS_CHANGE);
event.checkBoxSelectStatus=e.target.selected;
dispatchEvent(event);
}

/**
 * Handler method when a option gets selected from dropdown menu.
 *
 * @param event DropDownEvent dispatched.
 *
 */
protected function optionSelectHandler(event:DropDownEvent):void{
if(event.selectedOption!=null){
checkBox.selected=true;
}
}
}
}

Apart from this you might also want to look at DropDownButtonSkin.mxml for skinning and Customization.mxml on how the events were handeled.

Advertisements

3 thoughts on “Google Mail like header component for Datagrid/AdvancedDatagrid in flex4

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s