Flex @ Fun

flex custom contextMenu class

Hi,

I have created a custom class which can be used for handling context menu functionality in flex using this class you can add context menu on any data UIComponent in flex.

Using this class you can copy DataGrid or List component data by right click on that component and selection a context menu item you displayed datagrid or list data will be copy in excel or default dataprovider format.

I have pasted both the class one for custom contextMenu and another is user to export data in execl or default format.

 
Currently I implemented only on Datagrid and list component you can customize it as per you requirement.

to use just add

contextMenu=”{IplantContextMenu.instance.IplantDgContextMenu(“DataGrid/List id-ref”)}”

in you UIComponent

package com.sanjeev.net.utils {
import flash.events.ContextMenuEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import flash.system.System;
import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;

import mx.controls.Alert;
import mx.controls.ComboBox;
import mx.controls.DataGrid;
import mx.controls.Label;
import mx.controls.List;
import mx.core.UIComponent;

/**
* A Util call provides contextmenu controls for some specific UIComponent
*
* */

public class CustomContextMenu {

private var _cm : ContextMenu = null;
private var _ui : UIComponent = null;
private var _uiType : String = null;
private var _xmlFormat : Boolean = false;

public function IplantContextMenu() : void {

// _cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
}

/**
* @public
* @param – [Nothig]
* @return – [Object - CustomContextMenu ]
* @des – API will return each time a new object of CustomContextMenu class and will provide
* contextmenu action controls
*
* */

public static function get instance() : CustomContextMenu {
return new CustomContextMenu ();
}

/**
* @private
* @param – [Nothing]
* @return – [Nothing]
* @des – API maps ui type and assign contextmenu time and events
*
* */

private function initContextMenu() : void {
if(_ui is DataGrid) _uiType = “DataGrid”;
if(_ui is List) _uiType = “List”;
if(_ui is ComboBox) _uiType = “Combobox”;
if(_ui is Label) _uiType = “Label”;

var cmClipBoard : ContextMenuItem = new ContextMenuItem(“Copy ” + _uiType +” data to clipboard”, true);
cmClipBoard.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, copyUiDataToClipBoardHandler);
_cm = new ContextMenu();
_cm.hideBuiltInItems();
if(_ui is DataGrid){
var cmExportExl : ContextMenuItem = new ContextMenuItem(“Export data to excel”);
_cm.customItems = [cmClipBoard, cmExportExl];
cmExportExl.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, exportDataGridToExlHandler);
}else{
_cm.customItems = [cmClipBoard];
}

}

/**
* @private
* @param – [Event - ContextMenuEvent]
* @return – [Nothing]
* @des – event handler for copy to clipboard action
*
* */

private function copyUiDataToClipBoardHandler(event : ContextMenuEvent) : void {
if(_ui is DataGrid) System.setClipboard(DataExporter .exportDataGridToCSV(DataGrid(_ui), _xmlFormat));
if(_ui is List) System.setClipboard(DataExporter .exportListToString(List(_ui), _xmlFormat));
Alert.show(_uiType + ” Data is copied to clipboard”, “Alert”);
/* _cm = null;
_ui = null;
_uiType = null; */
}

/**
* @private
* @param – [Event - ContextMenuEvent]
* @return – [Nothing]
* @des – API will call a server url and will pass excel format data as string
* Tightly coupled with datagrid component
*
* */

private function exportDataGridToExlHandler(event : ContextMenuEvent) : void {
var url : URLRequest = new URLRequest(“http://www.google.com”);
navigateToURL(url, “_blank”);
}

/**
* @public
* @param – [Object - DataGrid]
* @return – [Object - ContextMenu]
* @des – API returns contextmenu for datagrid component
*
* */

public function IplantDgContextMenu(dg : DataGrid, xmlFormat : Boolean = false) : ContextMenu {
_ui = dg;
_xmlFormat = xmlFormat;
initContextMenu();
return _cm;
}

/**
* @public
* @param – [Object - Label]
* @return – [Object - ContextMenu]
* @des – API returns contextmenu for Label component
*
* */

public function IplantLblContextMenu(lbl : Label, xmlFormat : Boolean = false) : ContextMenu {
_ui = lbl;
_xmlFormat = xmlFormat;
initContextMenu();
return _cm;
}

/**
* @public
* @param – [Object - List]
* @return – [Object - ContextMenu]
* @des – API returns contextmenu for List component
*
* */

public function IplantLstContextMenu(lst : List, xmlFormat : Boolean = false) : ContextMenu {
_ui = lst;
_xmlFormat = xmlFormat;
initContextMenu();
return _cm;
}

/**
* @public
* @param – [Object - ComboBox]
* @return – [Object - ContextMenu]
* @des – API returns contextmenu for ComboBox component
*
* */

public function iPlantCbContextMenu(cb : ComboBox, xmlFormat : Boolean = false) : ContextMenu {
_ui = cb;
_xmlFormat = xmlFormat;
initContextMenu();
return _cm;
}
}
}

//——————-Data Exporter class————————————

package com.sanjeev.net.utils {
import mx.collections.IViewCursor;
import mx.controls.DataGrid;
import mx.controls.List;
import mx.controls.dataGridClasses.DataGridColumn;

/**
* DataExporter is a util-class to export DataGrid’s or UIComponent data into desired format.
* */

public class DataExporter {

/**
* @public
* @param – [Object - DagaGrid, Boolean - true is required XML format]
* @return – [String - cvs data]
* @des – API export datagrid data in csv (not truly) format
* tightly coupled with datagrid component
*
* */

public static function exportDataGridToCSV(dg : DataGrid, xmlFormat : Boolean) : String {

if(xmlFormat){
return dg.dataProvider.toString();
}

var csvSeparator : String=”\t”;
var lineSeparator : String=”\n”;
var data : String = “”;
var columns : Array = dg.columns;
var columnCount : int = columns.length;
var column : DataGridColumn;
var header : String = “”;
var headerGenerated : Boolean = false;
var dataProvider : Object = dg.dataProvider;

var rowCount : int = dataProvider.length;
var dp : Object = null;

var cursor : IViewCursor = dataProvider.createCursor();
var j : int = 0;

//loop through rows
while (!cursor.afterLast){
var obj:Object = null;
obj = cursor.current;

//loop through all columns for the row
for(var k:int = 0; k < columnCount; k++){
column = columns[k];

//Exclude column data which is invisible (hidden)
if(!column.visible) {
continue;
}

data += “\”"+ column.itemToLabel(obj)+ “\”";

if(k < (columnCount -1)){
data += csvSeparator;
}

//generate header of CSV, only if it’s not genereted yet
if (!headerGenerated){
header += “\”" + column.headerText + “\”";
if (k < columnCount – 1){
header += csvSeparator;
}
}
}

headerGenerated = true;

if (j < (rowCount – 1)) {
data += lineSeparator;
}
j++;
cursor.moveNext ();
}

//set references to null:
dataProvider = null;
columns = null;
column = null;
return header + “\r\n” + data; ;
}

/**
* @public
* @param – [Object - List, XMLFormat/ string format - Boolean]
* @return – [String - data]
* @des – API export List data in string format
*
* */

public static function exportListToString(lst : List, xmlFormat : Boolean) : String {
var xdata : String = ”;
var lstLblField : String = lst.labelField;

if(xmlFormat){
xdata = lst.dataProvider.toString();
}else{
for each (var i:Object in lst.dataProvider){
xdata += i[lstLblField]+’\n’
}
}
return xdata;
}
}
}

I’ll love to here form you.

2 Responses

Subscribe to comments with RSS.

  1. tom said, on November 4, 2009 at 4:46 pm

    Does this custom class remove (or avoids) the “settings & About Flash Player” menu items?

    • skr4u said, on January 26, 2010 at 1:58 pm

      no it does not remove “”settings & About Flash Player” menu item.


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 )

Connecting to %s

Follow

Get every new post delivered to your Inbox.