Tour de Flex: An amazing learning tool

Posted in AIR, Flex, Miscellaneous on December 30th, 2008 by Kalen Gibbons

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.

 


Tags:

Christmas presents from Kap Lab

Posted in Flex on December 23rd, 2008 by Kalen Gibbons

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.

 


Tags: , , , , , , , ,

Displaying DataTips when using an itemRenderer

Posted in ActionScript, Flex, How-To on December 13th, 2008 by Kalen Gibbons

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.



 


Tags: , , , ,

Update: Solution to disappearing data in your itemRenderer

Posted in ActionScript, Bugs, Flex, How-To on December 8th, 2008 by Kalen Gibbons

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>








Tags: , , ,

Clearing framework RSLs from your Flash Player cache

Posted in Flex, How-To on November 29th, 2008 by Kalen Gibbons

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.

Flash Player Setting Manager

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.


Tags: , , , , ,