Kalen Gibbons: The Dead Tree

Filtering a Flex Tree using an ArrayCollection

2009-01-06T09:01:38Z

Flex Trees can be difficult to filter because of their hierarchical nature. One possible way to do it is to use an ArraryCollection as your dataProvider, with each node having a "children" property that is also an ArrayCollection.

The tricky part in filtering the Tree is making sure the children are filtered in addition to the root nodes. So, in the example below, I have created a function that will loop through each node and its children recursively.

It is important to note that the filtering takes place from the bottom up, meaning that a node's children are always filtered before the node itself. This is important, because normally a filter removes everything that does not match a certain criteria. In our case, to remain in the collection, a node must match a certain criteria OR have children that do.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute">

<mx:Script>

<![CDATA[
import vo.Person;
import mx.collections.ArrayCollection;

[Bindable]
private var people:ArrayCollection = new ArrayCollection([

new Person("Grandma Susan", new ArrayCollection([

new Person("John", new ArrayCollection([

new Person("Timmy"),
new Person("Sammy"),
new Person("Alan")

])),
new Person("Tiffany", new ArrayCollection([

new Person("Billy"),
new Person("Adam"),
new Person("Graham"),
new Person("Vennesa")

])),
new Person("Michael", new ArrayCollection([

new Person("Jannette"),
new Person("Alan", new ArrayCollection([

new Person("Alice"),
new Person("Jane")

]))

])),
new Person("Peter"),

new Person("Cindy", new ArrayCollection([

new Person("Paul"),
new Person("David"),
new Person("Joseph"),
new Person("Cameron"),
new Person("Debra"),
new Person("Polly")

]))

]);

private function refreshData():void{

//reset the root node to its original unfiltered data
people[0].children = new ArrayCollection(people[0].children.source);
//start the recursion at the root node
refreshRecursiveChildren(people.source[0]);
//update the Tree after the data has been filtered
personsTree.invalidateList();

}

private function refreshRecursiveChildren(person:Person):void{

if(person.children){

//loop through each child and filter its children
for each(var _person:Person in person.children.source){

refreshRecursiveChildren(_person);

}
//reset each "children" ArrayCollection to its original unfiltered data
person.children = new ArrayCollection(person.children.source);
//set the filterfunction for the newly updated node
person.children.filterFunction = filterData;
//run the fitlerFunction
person.children.refresh();

}

}

public function filterData(item:Object):Boolean{

//get the string to filter the nodes by
var searchString:String = iNameFilter.text;
//if string is found in node return true.
//since the recursive filtering takes place from bottom up, if
//a collection still has children after filtering, also return true
if(searchString.length == 0

|| item.name.toLowerCase().indexOf(searchString.toLowerCase()) >= 0)
return true;

else if(item.children != null && item.children.length > 0)

return true;

return false;

}
]]>

</mx:Script>

<mx:VBox width="100%" height="100%"

paddingTop="10"
paddingBottom="10"
paddingLeft="5"
paddingRight="5">

<mx:Tree id="personsTree"

dataProvider="{people}"
labelField="name"
width="100%"
height="100%" />

<mx:HBox>

<mx:Label text="Filter the Tree:" />
<mx:TextInput id="iNameFilter" change="refreshData()" />

</mx:HBox>

</mx:VBox>

</mx:Application>

You may right-click and select "View Source"
to view the full source code for the following example.

Tour de Flex: An amazing learning tool

2008-12-30T01:12:19Z

If you haven't checked out Tour de Flex I suggest you do. It is an Air app that contains over 200 working applications, all with source code. Everything from simple Flex components to advanced filters and working with Air is covered, so there's something for everyone, beginners to advanced developers alike.

Christmas presents from Kap Lab

2008-12-23T01:12:16Z

Just in time for Christmas, Kap Lab has released version 1.1.0 of its data visualization components. In addition, two new developer tools have been released: the Cairngorm Console and the PureMVC Console. All Kap Lab’s components are free and are extremely useful. I suggest you give them a look.

Displaying DataTips when using an itemRenderer

2008-12-13T01:12:28Z

One of the bad things about using itemRenderers in a DataGridColumn is that you lose the dataTip functionality that it normally provides. Well, here is a way to fake that functionality.

First, add the dataTipField or dataTipFunction to the DataGridColumn like you normally would.

<mx:DataGridColumn headerText="DataTip"

dataField="name1"
showDataTips="true"
dataTipField="description1" />

Then, in your itemRenderer add the following code to be able to tap into that information and display a tooltip instead.

private function getToolTip():String{

var dg:DataGrid = listData.owner as DataGrid;
var func:Function = dg.columns[listData.columnIndex].dataTipFunction;

if(func != null){

return func.call(this, this.data);

}else if(dg.columns[listData.columnIndex].dataTipField.length){

return data[dg.columns[listData.columnIndex].dataTipField];

}else{

return "";

}

}

override protected function updateDisplayList(unscaledWidth:Number,

unscaledHeight:Number):void{

super.updateDisplayList(unscaledWidth, unscaledHeight);
this.toolTip = getToolTip();

}

This works with both dataTipFields and dataTipFunctions and lets you treat the dataTips in your columns the same way, regardless of whether you're using an itemRenderer or not. The only minor difference is the positioning of the label, but that can be easily modified with styles. You can download the full source code here, for a functional example of how this works.

Update: Solution to disappearing data in your itemRenderer

2008-12-08T08:12:00Z

In a previous post I explained how a rendering bug in Flex was causing items to disappear in an itemRenderer. In the example below, you can see that when you scroll, the items in the list disappear. This is caused by the varying heights of the elements. If you explicitly set the height for each element or set variableRowHeights to false, then the problem goes away.

What was causing the problem was apparent but the solution was not. Thankfully, Olivier Lalonde was nice enough to shed some light on an easy fix. The itemRenderer needs to be validated as the user scrolls. So, as Olivier suggests, you simply need to listen for the dataChange event and execute the validateNow() function.

You can see in the example below that the list now has varying row heights... and the data no longer disappears. NICE! The key point to focus on here is the following line: <mx:VBox dataChange="validateNow()" verticalGap="0">

<mx:List dataProvider="{myData.item}"

variableRowHeight="true"
alternatingItemColors="['#FFFFFF','#E6EEF3']"
width="100%"
height="100%">

<mx:itemRenderer>

<mx:Component>

<mx:VBox verticalGap="0" dataChange="validateNow()">

<mx:HBox>

<mx:Label text="{data.Label}" fontWeight="bold" />
<mx:Label text="{data.date}" color="#999999" />

</mx:HBox>
<mx:Text text="{data.description}" width="100%" />

</mx:VBox>

</mx:Component>

</mx:itemRenderer>

</mx:List>

Clearing framework RSLs from your Flash Player cache

2008-11-29T09:11:41Z

Runtime Shared Libraries (RSLs) are a good way to reduce the size of your Flex applications. A framework RSL, for example, is an external version of the Flex framework that can be stored in the user's Flash Player cache. The great thing about this is that when a user downloads the RSL the first time it is stored in cache, and no matter what domain it was downloaded from, it can be used by all other Flex applications on the web. The framework RSL is never downloaded again, meaning that your application doesn't need to contain any of the Flex framework code, thus reducing the size of your core application.

But this caching can also cause some difficulties while testing. If you are creating a new application that will use an RSL, you will need to specify the path to it in your build options (of course, this local copy will only be referenced by users who don't already have the RSL in their cache). Well, how do you know if this path is accurate if you already have the RSL in your cache? When you test your application it will not try to access your local RSL if you already have it in cache.

So what you need to do is clear out your Flash Player cache. To do this, go to http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager03.html and uncheck "Store common Flash components to reduce download time." When the pop-up box appears, click "Confirm" and your Flash Player cache will be cleared.

Now that your cache is cleared you may re-check the box to restore your setting and turn caching back on. When you test your application for the first time it will require the framework to load from the RSL path you specified. You’ll know you have a problem if your application fails and gives you a message about unresolved RSL paths.

I prefer to keep caching turned off while testing, to get a better feel for what users will experience on their first visit to the application. However, don't forget to turn it back on after you're done testing.

How to drag, drop, and parse a CSV file in AIR

2008-11-26T08:11:12Z

I've been playing around with Adobe AIR lately and I've really been enjoying it. So I thought I'd put out this quick tutorial on how to drag and drop a file into your AIR application; in this case we will be using a CSV file, and then we will parse that file so that its data can be used in a datagrid. You can download the full source code here.

Dragging a file into AIR:

First, we need to set up handlers to listen for the drag events. We are going to set up two listeners, one for when an item is dragged over the app and one for when that item is dropped.

this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, dragEnterHandler);
this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, dragDropHandler);

Then we'll set up the two handler function. The dragEnterHandler function determines if the item is an acceptable file type. You could use the different constants of the ClipboardFormats class to only accept specific file formats, but for now we will accept any valid file.

private function dragEnterHandler(evt:NativeDragEvent):void{

if(evt.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){

NativeDragManager.acceptDragDrop(this);

}

Next, when the user drops the file, we will copy it from the clipboard, read its contents, and parse its values into a more usable data structure.

private function dragDropHandler(evt:NativeDragEvent):void{

NativeDragManager.dropAction = NativeDragActions.COPY;
//get an array of the files dropped in
var dropFiles:Array = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
//get the content of the file
var fileContent:String = getFileContent(dropFiles[0]);
//parse it to get an array of Orders
orders = parseCSV(fileContent);

}

Reading the content of the dropped file:

For this we will use the FileStream class. The getFileContent function takes a generic file as its only parameter; it opens a FileStream, reads the contents of the file and returns that value as a string.

private function getFileContent(_file:File):String{

//open a fileStream to read the content of the file
var fileStream:FileStream = new FileStream();
fileStream.open(_file, FileMode.READ);
var fileContent:String = fileStream.readUTFBytes(fileStream.bytesAvailable);
fileStream.close();
return fileContent;

}

Parsing the CSV file:

Finally, we are going to take the content of the CSV file, which is now in the form of a string, and parse out its data to populate an Array. We start by using the split() function to create an Array of line items. We use character code 10, which represents carriage returns, and character code 13, which represents new lines. to separate each line item. Then we loop through the newly created array of line items and pull out each comma separated value. At this point we have the information we need to populate the Order object and add that to our Array.

private function parseCSV(_content:String):Array{

//create temporary array to store the Orders
var csvArray:Array = new Array();
//break the csv into individual lines
var csvLines:Array = _content.split(String.fromCharCode(13,10));
//remove title row
csvLines.splice(0,1);
//loop over each line
for each(var s:String in csvLines){

var lineItems:Array = s.split(",");
var transaction:Order = new Order( lineItems[0],

new Date(lineItems[1]),
lineItems[2],
lineItems[3],
lineItems[4]);

csvArray.push(transaction);

}
return csvArray;

}

The data pulled from the CSV file is now in a more manageable form and can be used as a dataProvider for components or to populate AIR's built in SQLite database. Of course, in this tutorial, for simplicity's sake, we assume that the file dropped into the application is a CSV file. In your application you should have some trapping to determine the file type and process it accordingly.

My Flex workshop for the IECFUG

2008-11-14T09:11:14Z

I recently presented a short beginner's workshop for the The Inland Empire ColdFusion User Group. In the workshop we created a simple application that displayed hypothetical tracking data. Through this application we covered many basic Flex topics and techniques, and I thought I would provide the files for anyone who wants them. Download them here.

Here is a list of files you'll find the in ZIP folder, and a brief summary for each:

tracker_start.mxml - view
- This is where to get started. With only 2 lines of mxml code, we create an application that displays all our data to the user. Pretty cool! The sample XML data has been provided for you in the data folder.
tracker_filters.mxml - view
- This is the second file in the workshop. Now that we are displaying the data to the user, we need to make it more usable. We want to make it easy for users to find the information they are looking for. So, in this step we use the ArrayCollection's built in filterFunction capabilities to allow the user to easily and effeciently filter through the data.
tracker_charts.mxml
- This is a charting component that will be used in the next step, the tracker_states application. It charts the popularity of all the processes in our data.
tracker_states.mxml - view
- The third application in the workshop, in which we create a second state. In this new state we add the tracker_charts component, giving users an alternative representation of the data.
tracker_styles.mxml - view
- The final step, in which we turn our bland, boring application into something more presentable. All we do in this step is add a wonderful theme from ScaleNine.
tracker_remoting.mxml
- This file does not actually create a viewable application, it is just a reference file. It is an example of how Flex can connect to ColdFusion; an alternative to using the Model data that we used in the preceeding applications.
data folder
- Contains the XML data used in all applications.
assets folder
- Includes the theme that was used in the tracker_styles application.

Copy the files into the src folder of your project and give it a crack. I hope you find them useful.

Best Optical Illusion... EVER!

2008-10-23T09:10:40Z

I'm a big fan of optical illusions. I love how your eyes and your mind don't always agree on things, and this is a great illustration of that.

In the picture below, square A and square B are the exact same color. You may find this hard to believe; I still do when I look at it, but it's true. To prove it, take any image program or a colorpicker, like ColorZilla, and compare the colors. ColorZilla shows that both cells are the color #787878. Furthermore, I took this image into PhotoShop, cut out square B and overlapped it over square A... guess what? They match. Click here to see the results.

Can you get your eyes to see the truth?

Disappearing data in your itemRenderer?

2008-10-14T08:10:00Z

Note: An update to this post has been posted here. It provides a better solution than the one offered below, so I recommend you check it out.

Although I love Flex, it can still be a bit buggy at times. I was working with an itemRenderer the other day and came across some very odd behavior. I had a list using an itemRenderer and when the data originally loaded everything was fine, but whenever I scrolled some of the data started disappearing. You can see this demonstrated in the sample below.

<mx:List dataProvider="{myData.item}"
      variableRowHeight="true"
      alternatingItemColors="['#FFFFFF','#E6EEF3']"
      width="100%"
      height="100%">
      
   <mx:itemRenderer>
      <mx:Component>
         <mx:VBox verticalGap="0">
            <mx:HBox>
               <mx:Label text="{data.Label}" fontWeight="bold" />
               <mx:Label text="{data.date}" color="#999999" />
            </mx:HBox>
            <mx:Text text="{data.description}" width="100%" />
         </mx:VBox>
      </mx:Component>
   </mx:itemRenderer>
   
</mx:List>

Apparently, Flex likes to have all the items in a list the same height; so when an item such as the Text field in the example causes variation, Flex simply doesn't display it. I found that the easiest way to remedy the issue was to set explicit heights for the items in the renderer. Here is an example of how it works with the height explicitly set:

<mx:List dataProvider="{myData.item}"
      variableRowHeight="true"
      alternatingItemColors="['#FFFFFF','#E6EEF3']"
      width="100%"
      height="100%">
      
   <mx:itemRenderer>
      <mx:Component>
         <mx:VBox verticalGap="0">
            <mx:HBox>
               <mx:Label text="{data.Label}" fontWeight="bold" />
               <mx:Label text="{data.date}" color="#999999" />
            </mx:HBox>
            <mx:Text text="{data.description}" width="100%" height="30" />
         </mx:VBox>
      </mx:Component>
   </mx:itemRenderer>
   
</mx:List>

Now, this isn't a perfect solution. What we are doing here is effectively the same thing as setting variableRowHeight to false; thus making all the items in the List the same height. So if anybody has a better solution for this issue please let me know.

Simple string replacement with RegExp and Apex

2008-10-08T12:10:00Z

Sometimes it's hard to figure out even simple thing in a proprietary language like Apex. So here is a simple solution to a common problem.

How do I replace string elements using Regular Expressions in Apex?

//create expression as Pattern Pattern dollarPattern = Pattern.compile('[,$]'); //replace all occurrences in a string dollarPattern.matcher('$1,250.25').replaceAll('')

You need to use Apex's Pattern class to create the regular expression. Then you can replace all matches in the string using the replaceAll() method.

This example takes a dollar formatted string ($1,250.25) and removes the dollar sign and comma to turn it into a number. The result would be 1250.25, perfect for database insertion or what have you.

How to determine if a DataGrid or List has ScrollBars

2008-10-05T01:10:00Z

There are occasions when you need to programmatically determine if a List or DataGrid has enough rows to require ScrollBars. If your DataGrid, for example, does not have an explicit rowCount or height specified, then it's not as easy as looking at its data provider.

The easiest way I've found it to use the "maxVerticalScrollPosition" property, which the Flex 3 Language Reference describes as:

"The maximum value for the verticalScrollPosition property. Note that this is not the height of the content because the maxVerticalScrollPosition property contains the height of the content minus the height of the displayable area."

So if the the maxVerticalScrollPosition is greater than zero, then scrollbars must be available.

if(myDataGrid.maxVerticalScrollPosition > 0){ // is scrollable }else{ // not scrollable }

If anybody know of an easier or more efficient way of determine if a List has ScrollBars, please let me know.

BlogCFC: Extend the life of your blog posts

2008-07-12T07:07:00Z

If your a BlogCFC user but don't post too often, like me, then you've probably seen the following message pop up on your blog:

Sorry There are no blog entries available.

By default, BlogCFC shows only entries posted within the last 30 days. If you'd like to extend this, simply locate the tags folder in your BlogCFC root and find getmode.cfm. Around line 68 you'll find the following declaration:

params.lastxdays = 30

Simply change 30 to the number of days you'd like new entries to stay on the homepage and you're set, your blog will no longer look sad and abandoned.

Yet another reason for disappearing background images in IE6

2008-06-10T08:06:00Z

I was bit by another IE bug the other day; no matter how much I work with IE I never seem to be immune. That may be due to the fact that IE has sooo many problems. On this occasion several background images were disappearing in IE6. I tried the common solutions first: relative positioning, removing floats, setting widths, etc. and nothing worked. It took me quite a while to uncover the culprit.

href="javascript: void(0);" //I was using it in a common manner: <a onclick="switchTabs('comments')" href="javascript: void(0);">Comments</a>

Once I removed the href="javascript: void(0);" from the link everything worked fine. I had searched the Internet for days trying to find the solution to this bug and never found a thing. This is probably because not too many people use href="javascript: void(0);"... and now I know why.

Verizon Wireless Media Store

2008-06-06T11:06:00Z

The Verizon Wireless Media Store is another pretty impressive website built with Flex. It's nice to see more and more large corporations adopting the technology. In my eyes, the less I have to deal with JavaScript, CSS, and browser incompatibilities, the better. Bravo Verizon.