CustomGrid v1.0 (or SearchGrid v2.0)

Update: 15 August 2007 – CustomGrid v1.2 released

Last June , when I was just getting my feet wet with Actionscript, I was trying to build a grid component for the project I am working on and the output of that was posted as SearchGrid v1.0 and in July Ted Patrick included it in his blog post about text Based Filtering component.

CustomGrid v1.0 (or SearchGrid v2.0)

Now, here I am back with the search grid with a few more bells & whistles added and rebranded as CustomGrid or CGrid. The CGrid component provides the following out of the box –

  1. Takes in Column names and data as an arraycol
  2. Two kinds of data search – Filtering & Highlighting
  3. Displays a data count
  4. Printing the grid contents
  5. Status area

In the demo you can check out a static example & a dynamic one. In the static example, I am passing in the columns of the grid as one arraycollection and the data as another arraycollection. This example uses the highlighting type of search. In the dynamic example, an RSS feed from MXNA is used as the datasource. The RSS reader uses the filtering mechanism for search.

Implementation of CGrid

<grid:CGrid id="<Grid ID>" printTitle="<GRID PRINT TITLE>" searchType="<SEARCH TYPE – filter | highlight>"/>

First we need to add columns to the grid by using –
public var gridColumns:ArrayCollection = new ArrayCollection([{
colname:"COL NAME",
colwidth:"COL WIDTH",
coldata:"COL DATA",
align:”COL ALIGN”,
labelfunction:”COL DATA MANIPULATION FUNCTION”,
sortable:”TRUE | FALSE”
}]);
gridId.drawColumns(Columns ArrayCollection);

To load data into the grid, use –
gridId.loadData(Data as ArrayCollection);

The caller can add controls near the data count display using –
gridId.addControls(UIbject);

To set text to the status bar, use –
gridId.statusBar.text = “text to be printed in status bar”;

Special Thanks to

  • Thoughtfactory for MXNA Viewer (which started it all)
  • Mike Nimer for RowColorDatagrid
  • My Team @ Work

CGrid Roadmap

  • Export to Clipboard
  • Abililty for user to select columns to view
  • Ability for user to lock columns or rows while viewing
  • To highlight search text in Filter type search
  • Code Optimization & cleanup

Update: Adding an ItemRenderer
As wanted by one of the visitors, I am adding a section to list out how to add an itemRenderer to the CGrid. For this, edit the CGrid.mxml to change the drawColumns() method to add the following as the last if condition –

//setting custom itemrenderer
if (cols[i].renderer != "" && cols[i].renderer != null ) {
column.itemRenderer = new ClassFactory(cols[i].renderer);
}

Now, CGrid is capable of accepting an itemRenderer for a column. Then create an itemRenderer. For this, first create a folder – “renderers” at the same level as the “widgets” folder. Then create a MXML Component – ButtonRenderer.mxml inside this folder. Creating the folder is only for having a cleaner code structure. Add a button inside this component.

Now, in your caller page, when defining the columns array use the following syntax for the column where you want the itemRenderer –

{colname:"Name",coldata:"data",
renderer:renderers.ButtonRenderer}

*Notice that the renderer is reffered to using the complete path and also note that unlike other attributes the renderer shouldnt be passed as string. i.e it should be declared without the quotes.

There you go. Now you can add any itemrenderer to any column by just mentioning it along with the column declarations. I will add this to CGrid in the next version ;).

[ Demo | Source | Sample Printout ]

Copy 2 ArrayCollections

This is actually written by my Colleague – Ajit Parthan. Have modified it a little bit so that it returns an ArrayCollection. This method takes in two ArrayCollections and returns a single ArrayCollection which is a sum of the first two. Ex –

ArrayCollection SRC 1 = A, B, C, D
ArrayCollection SRC 2 = 1, 2, 3, 4

ArrayCollection SUM = A, B, C, D, 1, 2, 3, 4

I hope this makes it clear enough 🙂 . If there are more doubts, try it out 😉 .

private function copyArrayCollection(src1:ArrayCollection,
src2:ArrayCollection):ArrayCollection{
var dest:ArrayCollection = new ArrayCollection();
if(src1 != null && src1.length > 0){
for(var i:int = 0; i<src1.length; i++){
src2.addItem(src1.getItemAt(i));
}
}
dest = src2;
return dest;
}

Am updating this post based on a comment posted by Abdul. There seems to be a better way to achieving this by –

public function copyArrayCollection (src1:ArrayCollection, src2:ArrayCollection):ArrayCollection
{
var result:ArrayCollection = new ArrayCollection(src1.source.concat(src2.source));
return result;
}

Nabble – FlexCoders forum

Check out the FlexCoders mailing list feed here at Nabble. I have been using Mail-Archive for a long time now for searching through FlexCoders. But, today I stumbled across Nabble. Hey! Nabble has a far better usable interface. the fonts are slick. The mail threads are shown beautifully and it allows me to see conversation threads in a much better way than Mail-Archive does.  Plus ! it alos allows users to rate the topics and replies. Which is so cool!!!

[ Check out FlexCoders @ Nabble ]

[Coding Cowboys]Validating forms in Flex 2

There are many different ways to validate forms in Flex. Which can make it hard to know what is the best method to use. Thru trial and error, this is the best and simplest solution for validating forms in most all situations.

[ Read MoreDemo ]

[Coding Cowboys] Uploading Files with Flex and PHP

Check out a quickly-developed Flex application that manages multiple file uploads and processes them through a PHP file (right-click in the application to view the source). Or, you can check out an explanation and strategy we used for the PHP.

[ Read More | Demo ]

Buttons with icons & preset properties

Ever wanted custom buttons in flex with set height & width? Ever wanted buttons with icons in them? If yes, then read on. 🙂 One of the problems I had encountered in my current project is rooted from the philosophy that Flex follows with regards to the height and width of a widget. Coming from a web development background, I am so used to thinking the height and width of a widget as styling attribute than a property. The real problem with this? Developers in the team code in height and width which fits perfectly for the screen they are currently working on. End result? It’s a Usability person’s nightmare.

Ah yes! There is this other problem – Icons. I had to embed icons for the Button which again, I didn’t want all the developers to be doing this and embedding image files across multiple screens. I wanted something that’s generic and usable by everyone. Coming from a JavaScript world my first thought process was to have a mxml with a button in it with set properties. I wasn’t quiet happy with that approach as that might limit the power the Button in many ways. So after discussing with one of my team members, we decided that extending the mx.controls.Button was the way to go.

How did I go about it? Well, it wasn’t as hard I thought it would be 😉 . Lemme list the steps down as a few simple points.

  1. Extending mx.controls.Button
  2. Set preferred height, width etc. here. You can set all the attributes you wish here.
  3. Embed all your icon files here.
  4. Then in the constructor take in a button type and use the required icon class.
  5. Call the custom button in your mxml like the normal button.
  6. That’s it! Still looks complicated? Just check out the sample source files.

So much for being afraid of extending framework widgets for all these days. If you are a newbie, this should help you get over the initial shyness of extending widgets. So, here’s a sample script that does just that. This is for newbies like me who have a clear idea of what they want but not sure how to get there 🙂 . If you are an advanced flex developer, feel free to drop in advice/suggestion/comments on whether this can be done in a better way. Special thanks to Eashwar Natarajan for helping me out.

[Note: What’s with the blinding orange-yellow colour in the sample? Nothing. Just trying to make things colourful 🙂 ]

[ Demo & Source ]

Databinding to read-only properties

This is a very interesting article (posted at Dynamic Flash) related Binding in Flex. [Bindable] is one of the most attractive features of the flex framework. But, there’s a lot more to it than meets the eye. This post should clear up some of those clouds.

Databinding has to be just about one of the coolest features in Flex 2, allowing you to bind a property to the value of a property of another object. When the property of that object is updated, the value of the bound property will automatically be updated. This is mainly used in Flex to update UI components when the data for the model changes.

[ Read more… ]