DataGrid Headerrenderer - Header Tooltip


package mypackage
{
import mx.controls.Text;

public class DGHeaderRenderer extends Text
{
public function DGHeaderRenderer()
{
height = 20;
}


override public function set data(value:Object):void {
super.data = value;

this.toolTip = "Click to sort by this column or reverse sort order.";
super.invalidateDisplayList();
}
}
}

and use the above as
<mx:DataGridColumn id="mycol" headerText="Col" dataField="col1" headerRenderer="mypackage.DGHeaderRenderer"/>




http://www.cflex.net/showFileDetails.cfm?ObjectID=443&Object=File&ChannelID=1

View Demo

Opening .rar files on Mac OS

You can use one of the following to open rar files on Mac OS

http://www.unrarx.com/

http://www.xs4all.nl/~gp/MacPAR_deLuxe/

Key Codes

BACKSPACE - 8.
CAPSLOCK - 20
CONTROL - 17
DELETEKEY - 46
DOWN - 40
END - 35
ENTER - 13
ESCAPE - 27
HOME - 36
INSERT - 45
LEFT - 37
PGDN - 34
PGUP - 33
RIGHT - 39
SHIFT-16
SPACE-32
TAB - 9
UP - 38

Refer following link for all the keycodes:
http://livedocs.adobe.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00001113.html

Expo9 — free ad server for online publishers

http://www.exponential.com/news-events/no-cost-ad-serving-solution.jsp

http://venturebeat.com/2007/06/20/expo9-another-free-ad-server-for-online-publishers/

ActionScript 3 Books

• ActionScript 3 Cookbook : Download here
• Programming ActionScript 3 : Download here

Adobe Flex 2.0 Developer Certification Examination

1. Flex2 exam prep guide
http://partners.adobe.com/public/en/ace/Exam_Guide_Flex2.pdf

2. Flex2 examination specifications - Flex20Blueprint.pdf
http://www.geocities.com/bhuvangupta/flexblog/certification/flex20blueprint.pdf

Increasing FlexBuilder heap size on Mac OS

Increasing FlexBuilder heap size on Mac OS

• Go to Applications -> Adobe Flex Builder 2
• Right click on "Flex Builder" app
• Click "Show Package Contents"
• Browse to 'Contents->MacOS'
• Open 'FlexBuilder.ini'
• Increase values of 'Xmx' and 'Xms'

You can also watch a screencast on a similar issue at http://www.brooksandrus.com/blog_assets/screencasts/eclipsejvmheap/

Passing parameters to SWF

• Open index.template.html (embed html)

• Browse to function "AC_FL_RunContent" under "else if (hasRequestedVersion) "
  
• Update 'flashvars' to pass appropriate parameters

1. Passing static parameters
AC_FL_RunContent(

"src", "${swf}",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"flashvars",'param1=value1&historyUrl=history.htm%3F&lconid=' + lc_id + '',
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer",
"wmode", "opaque"

);

Inside your flex application you can access the above as:

Application.application.parameters.param1

This will give you the result : 'value1'

2. Passing dynamic parameters or parameters typed in the url
e.g. http://localhost:8080/flextest/DirectLinks.html?a=b&c=d

AC_FL_RunContent(
"src", "${swf}",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"flashvars",'urlparams='+escape(window.location.search)+'&historyUrl=history.htm%3F&lconid=' + lc_id + '',
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer",
"wmode", "opaque"
);

Inside your flex application you can access the above as:

Application.application.parameters.urlparams

This will give you the result : '?a=b&c=d'

Flex3 beta released

Important links:

• Flex3 release notes

• Flex3
• Flex3 wiki
  
• FlexBuilder3
• AIR aka Apollo3
• Flex-Bug Management system

ButtonBar Panel

ButtonBarPanel : This is an extension of Panel in which a set of buttons can be added either on the header or footer.
Features:

• Extension of mx.controls.Panel , so it inherits all the properties of a Panel
  
• The buttons can be added either to the header or on the footer
• separate ClickHandler can be specified for each button.

Look at the ButtonBarPanelTest.mxml in the source for usage.



View Demo
Download Source

Extending FlexBuilder Trail License

Not sure why Adobe has made licensing check in FlexBuilder so simple.
Currently FlexBuilder stores the timestamp in a temporary file.
So if someone just deletes that file, the flexbuilder trail license is reset.
I don't think I should be revealing the name of the file, its for you to find out ;-)

Enabling both HTTP and HTTPS access to your Flex Application

To enable both HTTP and HTTPS access to you Flex app, you need to do the following:


1. Open remoting-config.xml (can be located at /WEB-INF/flex)

2. Look for <default-channels>

3. Add reference to the secure channel
<default-channels>
<channel ref="my-amf"/>
<channel ref="my-secure-amf"/>
</default-channels>


4. Define "my-secure-amf" in "services-config.xml" if not aleady defined.
<channel-definition id="my-secure-amf" class="mx.messaging.channels.SecureAMFChannel">
<endpoint uri="https://{server.name}:{server.port}/{context.root}/messagebroker/amfsecure" class="flex.messaging.endpoints.SecureAMFEndpoint"/>
</channel-definition>

Single ItemRenderer for Multiple Columns in a DataGrid

Many a times we have similar columns in a datagrid and are required to be rendered in a similar manner with only little variations like formatting of the column. It is redundant in such a case to write a separate ItemRenderer per column. A better approach would be to write single ItemRenderer and pass properties to the ItemRenderer to identify a particular column.


This can be achieved by settings the ItemRenderer to column using Actionscript.
The catch is to pass properties to ItemRenderer using ClassFactory.properties method.

http://livedocs.adobe.com/flex/2/langref/mx/core/ClassFactory.html

Here's the sample code:

---

var colRendererFactory:ClassFactory = new ClassFactory(columnRendererClass);
colRendererFactory.properties = {columnName:"mycol1"};
column1.itemRenderer = colRendererFactory

var colRendererFactory2:ClassFactory = new ClassFactory(columnRendererClass);
colRendererFactory2.properties = {columnName:"mycol2"};
column2.itemRenderer = colRendererFactory2;

---

This way you can have the same itemrenderer for multiple columns and can do different styling for each column based on the properties passed.

Adding Total Row at the end of DataGrid

Algo:
====

1. Create two datagrids and put both in a VBox. Set the 'verticalGap' of the VBox to zero.
2. First datagrid contains all the rows while the second one contains only the total row.
3. Second datagrid has
a) showHeaders = false
b) rowCount = 1
4. Dataprovider of the First datagrid is the arraycollection containing the Objects/data representing various rows
5. Dataprovider of the Second datagrid is the arraycollection containing ONLY one item which contains the total dataobject.

e.g.
The code would be something like :


Click here for demo
Click here for the source code

Approach 2
Another approach has been mentioned at:
http://blogs.adobe.com/aharui/2007/04/datagrid_footers.html

But the above implementation doesn't take care of resizing columns. In order to add that support:
1. add following function to FooterDataGrid
public function recreateBorder() : void
{
removeChild(DisplayObject(border));
border = null;
createBorder();
}

2. call this function on the "columnStretch" event i.e.

columnStretch="{dg1.recreateBorder()}" >

Click here to see the demo.

Exporting Datagrid data to excel

This is a updated version of http://www.cflex.net/showFileDetails.cfm?ObjectID=298&Object=File&ChannelID=1

Algo:
===
1. Convert the datagrid data to csv string
2. Post data to a servlet
3. Servlet returns the same csv string back with content -type of the HTTPResponse set to "application/ms-excel"


1. Convert the datagrid data to csv string
This is a generic version and should work with any datagrid.

public class DataGridCSVTransformer
{
private static var csvSeparator : String = "\t";
private static var lineSeparator = "\n";

public static function toCSV(dg : DataGrid) : String
{
var str : String = "";
for(var i : int = 0; i <>
{
var dgc : DataGridColumn = dg.columns[i];
if(!dgc.visible)
continue;
str += "\""+dgc.headerText+"\"";
if(i < (dg.columnCount -1))
str += csvSeparator;
}
str += "\r\n";
var rowCount : int = dg.dataProvider.length;

for(var j:int = 0; j <>
{
for(var k : int = 0; k <>
{
var dgc : DataGridColumn = dg.columns[k];
if(!dgc.visible)
continue;
var obj : Object = null;
if(dg.dataProvider is ArrayCollection)
obj = (dg.dataProvider as ArrayCollection).getItemAt(j);
else
obj = (dg.dataProvider as Array)[j];

str += "\""+dgc.itemToLabel(obj)+"\"";
if(k < (dg.columnCount -1))
str += csvSeparator;
}
if(j < (rowCount - 1))
str += lineSeparator;
}

Alert.show("String :: "+str);
return str;
}
}

2. Post the CSV data to servlet
private function doPost(event:Event) : void
{
var csvConverter : DataGridCSVTransformer = new DataGridCSVTransformer();
var dgCSV : String = csvConverter.toCSV(dg);
var url : String = "http://localhost:8080/flextest/reports/genreport";
var urlr : URLRequest = new URLRequest(url);
urlr.method = "POST";
var urlv : URLVariables = new URLVariables();
urlv.reportdata = dgCSV;
urlr.data = urlv;
navigateToURL(urlr,"_blank");
}

3. Servlet returns the same csv string back with content -type of the HTTPResponse set to "application/ms-excel"

public void generateReport(HTTPServletRequest req, HTTPServletResponse res)
throws ServletException, IOException
{
String csvData = req.getParameter("reportData");
res.setContentType("application/ms-excel");
res.getOutputStream().print(csvData);
}

Open source flex projects and 3rd Party Flex Components

There are a number of useful Flex projects and components being developed by various Flex gurus for the Flex community.
This post is an attempt to list them down at a single place:


1. Flex ANT Tasks
http://labs.adobe.com/wiki/index.php/Flex_Ant_Tasks

2. Flex Lib : A combination of various flex components

http://code.google.com/p/flexlib/

AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, Flex Scheduling Framework

3. FlexUnit : U testing framework for Flex
http://code.google.com/p/as3flexunitlib/

Specifying Flex component's width and height in 'percent' ActionScript

Instead of using 'width' and 'height' attributes, use 'percentWidth' and 'percentHeight' field.

e.g.
var btn : Button = new Button();
btn.percentWidth = 90;

the above snip sets the percentage width of the button to 90%

Rendezvous with Adobe Flex2

Rendezvous with Adobe Flex2

Now its been about 5 months since I have been working on Adobe's Flex2.
Its really an awesome technology to develop RIA.
Since I had some good Java Swing experience, it wasn't very difficult to learn it.
Having learnt lot of things about Flex in past months, I am now planning to share my learnings with Flex developer community.
So keep a watch...see you all soon !!!

cheers