Tuesday, 20 November 2007

How to color Datagrid cells/rows in flex 2

I have been looking for a easy and neat way to color a single cell or a complete row in flex 2.

Google brought me two interesting links:

1. How opaqueBackground can be used to color the background of a label itemRenderer
The comment posted by Dallas at 11/10/06 8:01, shows a way of highlighting a cell. Very simple implementation - the only problem is that the background color won't react on mouseover after the opaqueBackground is set.

2. How do you change the background cell color in a DataGrid?
Shows how to implement a colored background that react upon mouseover and selection. The implementation extends a label and overrides the 'updateDisplayList' method to draw some graphics as the background.
The last solution seems to be the one I preferred - because of the ability to see mouse effects applied to the cell. But still I liked the cleen implementation of the first one.

I couldn't resist of bringing combined solution, where I extends a Label, but listens for a Event.RENDER events instead of overriding the updateDisplayList method.

Sample Application

Demonstrates how to use the renderer as a drop-in and inline itemRenderer.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" verticalAlign="middle" xmlns:tmp="component.dashboard.*"

private function init() : void {
<mx:XML id="itemsXML">
<item name="Item 1" state="1" />
<item name="Item 2" state="0" />
<item name="Item 3" state="0" />
<item name="Item 4" state="1" />
<item name="Item 5" state="0" />

.centered {
text-align: center;

<mx:DataGrid id="myGrid" dataProvider="{itemsXML.item}" editable="true">
<mx:DataGridColumn dataField="@name" headerText="Name"

<mx:DataGridColumn dataField="@state" headerText="Price"
textAlign="right" headerStyleName="centered">


Following is a CustomItemRenderer that can be extended to apply logic to decide if a cell is to be styled.

package dk.jacobve {

import mx.controls.Label;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.*;
import mx.events.FlexEvent;
import flash.events.Event;

public class CustomItemRenderer extends Label {

public function CustomItemRenderer {
//listen for render events
addEventListener(Event.RENDER, renderListener);

public function styleIt() : Boolean {
return false;

public function styleTrue() : void {

public function styleFalse() : void {

protected function renderListener(event:Event) : void {
if (listData != null) {
var grid:DataGrid = DataGrid(DataGridListData(listData).owner);
if (!grid.isItemHighlighted(data) && grid.selectedItem != data) {
if (styleIt()) {
} else {
} else {

CustomItemRenderer extension
Shows an implementation using E4X on a xml data element to deside if the cell is to be colored red.

package dk.jacobve {

import mx.controls.Label;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.*;
import mx.events.FlexEvent;
import flash.events.Event;

public class TestItemRenderer extends CustomItemRenderer {
public override function styleIt() : Boolean {
return data.@state == "0";

public override function styleTrue() : void {
this.opaqueBackground = 0x33CC33;

public override function styleFalse() : void {
this.opaqueBackground = null;

Wednesday, 7 November 2007

5 ways to measure your popularity

Do you have a blog or are you considering creating one? Sooner or later you get curious about how popular your blog is.

I will present the 5 tools I use to measure my popularity:

1. Google Analytics
Google Analytics can tell you nearly everything about the traffic on your site.
Nice graphs and maps describes in detail what content on your blog that is popular, who visits your blog and when they do it.
It is a very easy way to measure your traffic and a "must have" if you don't use a similar tool already.
You need a google account to use this tool.

2. Feedburner
Blogs are often read from a rss/atom feed and your readers may not even hit your blog for google analytics to catch them.
Luckily Feedburner provides thorough statistics about how many readers you have of your feed.
Paste your rss/atom feed into feedburner and use the url they give you as your new feed url. This will give you the statistic information you need about your readers.

3. Google webmaster tools
Like analytics, webmaster tools is provided by google. This tool is focused around how you can optimize your site.
It provides comprehensive statistics about who links to your blog and what search queries has led to you.

4. Technorati
Technorati is a index based searchengine for user-generated content like weblogs. Besides having a place to add your blog they operate with a term called “Authority”.
Authority is represented as a number your blog gets based upon how many people are linking to you and how popular they are.
It is always fun to follow your authority and see it rise as your content gets popular and people adds a link to you.

5. Del.icio.us url checker
Many people uses delicious to bookmark content they find popular.
You can check how popular your blog is at del.icio.us here.

This is the tools I find useful. Let me know if I am missing some.

Thursday, 1 November 2007

Quickstart flex development with this maven archetype

Have you considered starting some flex development, but haven´t found out where to start? Or are you already flex'ing but could use some easy way to quickstart new flex projects in java?

I have created a maven archetype called maven-archetype-flex and distributed it to ibiblio for all to use.
It will quickly get you up and running.

Here is how you do it:

1. Download flex sdk
Download the flex sdk from adobe, if you haven't got it already.

1b. Minor change to flex-config.xml
You have to uncomment the following in your flex-config.xml located in:

Otherwise the compiler will complain as Matt mentions in his comment.

2. Create flex project
Running the following maven command will create a flex project called my-flex having groupId my.group. Feel free you change these to what ever you like:
mvn archetype:create
Note: it is important that you remember the -DpackageName= as the Main.mxml flex file in the archetype is to be kept in the root of your source dir and not in some subpackage.

3. Set flex.home property
In the newly created project pom.xml you should change the flex.home property to fit your flex.home path.

4. Build flex project
Now you are ready to build the flex project:
mvn install
Running this command inside your project will build the project and create a swf file in the target directory.

Viola! You have just created a simple flash application ready to use.

Where to go from here
To see the result of the work you can do one of the following things:
  • Open the flash file with your favorite browser.
  • Download the standalone player for your operating system ().
  • Deploy the swf file to a webserver. Maybe you can get inspiration on how to do it from this maven flex template.