I recently posted a solution about the DataGrid in Flex 2 not highlighting rows correctly after certain events (specifically double-clicking a row). You can read that post here.

I wanted to simply update the code sample that I gave for the overridden drawRowBackground() method. The code I had before was from Flex 3 and introduced a bug that I (for the life of me) couldn’t find. So, I re-wrote it much more simply and this time it takes full advantage of the super class’s implementation rather than using Flex 3′s source. Here you go:

override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
{
var rowColor:uint = color;
if( this.selectedIndices.indexOf(rowIndex) != -1 )
{
rowColor = getStyle("selectionColor");
}
super.drawRowBackground(s, rowIndex, y, height, rowColor, dataIndex);
}

You can see, I’m simply overriding the color which is all I wanted to do in the first place. I don’t know why the best solutions always come after you leave and revisit the code but so be it.

I had an issue in a Flex 2 project yesterday where a Datagrid would not highlight the selected row. All the styles were set up for this but it still would not work. The unfortunate matter is that this project (at least for the time being) is stuck in Flex 2 which is not open source.

I dug into the Flex 3 source code for Datagrid (I don’t recommend this unless you need to). I found a method called drawSelectionIndicator() which gets called to set up the selection. There are several methods that get called overall but the one that finally does the background color is drawRowBackground(). Somewhere down the line, the color being passed to drawRowBackground was not what was set in the stylesheet (see below). So, I created a custom DataGrid class that extended the original and overrode the drawRowBackground method. The source code is from Flex 2 so I made a few changes to make it work in Flex 2. Here it is:

continue reading "Flex 2 Datagrid not highlighting row"

I have been playing around with an AIR application which stores data to a local SQLite DB. I have a very basic settings table which is nothing more than a key/value paring of settings. The keys all match up with variables in the Model. So, there’s a setting for “fontFamily” which is both the key and the Model variable name. I had the following basic settings:

• fontFamily (String)
• fontColor (uint)
• backgroundColor (uint)
• startAtLogin (Boolean)

The way SQLite works, it is just easier to store things as VARCHARs and convert them as needed, so how was I going to convert all of these?

My initial thought was to use a switch statement. That way I could cast each variable based on the key. That wouldn’t be so bad for this small amount of settings but it simply would not do for a larger application. I know that the data stored in the DB is going to be able to be converted to whatever data type I need (i.e. “true” can be converted to Boolean, “#FFFFFF” can be converted to uint, etc). So, I came up with this snippet of code that’s been working great for me so far. All settings are loaded into an acSettings ArrayCollection in the model initially so that is what I’m looping over:

if( Model.getInstance().acSettings.length )
{
var settingVO:SettingVO;
var className:Class;

for( var i:int = 0; i < Model.getInstance().acSettings.length; i++ )
{
settingVO = Model.getInstance().acSettings.getItemAt(i) as SettingVO;
className = Class( getDefinitionByName( getQualifiedClassName( Model.getInstance()[settingVO.key] ) ) );
Model.getInstance()[settingVO.key] = settingVO.value as className;
}
}

Piece by piece, here’s what happens:

• I first get the variable in the model correponding with the current setting key: Model.getInstance()[settingVO.key]
• Then I get the class name of the model variable with this: getQualifiedClassName( Model.getInstance()[settingVO.key] )
• Then I get the class definition with this: getDefinitionByName( getQualifiedClassName( Model.getInstance()[settingVO.key] ) )
• Finally, I cast that as a Class using Class( getDefinitionByName( getQualifiedClassName( Model.getInstance()[settingVO.key] ) ) );

The result is that I get whatever the classname of the variable is stored as a class in my “className” variable which I use in casting in a loop.

Just so you know there’s nothing else going on, my SettingVO class is nothing more than this:

package com.reynacho.Reminder.vo
{
[Bindable]
public class SettingVO
{
public var settingID : Number; // primary key
public var key : String;
public var value : String;

public function SettingVO (settingID:Number, key:String, value:String)
{
this.settingID = settingID;
this.key = key;
this.value = value;
}
}
}

I ran into a problem today where the most elegant solution was to dynamically instantiate a class. However, I couldn’t for the life of me figure out how to do that. Basically, the situation was this:

1. Dispatch Event A
2. If Event A Fails, Dispatch Event B, then re-dispatch Event A.

This dealt with a SQLite database and query statements. I want to run a Select query but if the table has not yet been created, I need to create the table then re-try the query. Here’s what I ended up doing…

In the fault of the select statement I dispatch the create table event and pass it an optional string (the class that I want to instantiate). In the create table command, I then dynamically create that class and instantiate it. Here’s the code:

Fault of Select Command:
new CreateTableEvent("com.test.cairngorm.events.SelectAllEvent").dispatch();

Create Table Event:
package com.test.cairngorm.events
{
import com.adobe.cairngorm.control.CairngormEvent;

public class CreateTableEvent extends CairngormEvent
{
public static const CREATE_TABLE_EVENT:String = "com.test.cairngorm.events.CreateTableEvent";
public var nextAction:String;
// constructor
public function CreateTableEvent(nextAction:String='')
{
this.nextAction = nextAction;
super( CREATE_TABLE_EVENT );
}
}
}

Result of Create Table Command:
// sourceEvent.nextAction is the string that I passed in
if( sourceEvent.nextAction.length )
{
// dynamically create a class based on the string
var c:Class = Class( getDefinitionByName( sourceEvent.nextAction ) );
// instantiate that class into a generic Object
var o:Object = new c();
// test if the object is a CairgormEvent.
// if so, dispatch that event
if( o is CairngormEvent )
CairngormEventDispatcher.getInstance().dispatchEvent(CairngormEvent(o));
}

Thank you very much to http://thillerson.wordpress.com/2007/03/01/runtime-class-instantiation-in-actionscript-30/ for pointing me in the right direction.

I had been searching for a custom preloader that did not require a SWF for a while and finally found my answer from i am josh: http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/.

His source code got me on the right path. A simple preloader with a logo and a progress bar. I modified the code that handles the manual drawing to draw a border around the loader component and pad it a bit for visual purposes. Here’s my modified code: Download preloader.zip.

The original can be found at i am josh’s blog.

I had an issue recently during remoting which when debugged resulted in the following message:

Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Status 200

It took me forever to figure this one out but it results from IE caching things differently than other browsers and my debug settings use IE as the default browser. To fix it do the following:

1) add the following line to your services-config.xml file in the “channel-definition” tags. I did this for the first 2 listed which are http and https based AMF endpoints.


<channel-definition id="my-cfamf" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://{server.name}:{server.port}{context.root}/flex2gateway/" class="flex.messaging.endpoints.AMFEndpoint"/>
<properties>
<add-no-cache-headers>false</add-no-cache-headers>
<polling-enabled>false</polling-enabled>
<serialization>
<instantiate-types>false</instantiate-types>
</serialization>
</properties>
</channel-definition>

<channel-definition id="cf-polling-amf" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://{server.name}:{server.port}{context.root}/flex2gateway/cfamfpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
<properties>
<add-no-cache-headers>false</add-no-cache-headers>
<polling-enabled>true</polling-enabled>
<polling-interval-seconds>8</polling-interval-seconds>
<serialization>
<instantiate-types>false</instantiate-types>
</serialization>
</properties>
</channel-definition>

2) restart the CF server

I hope this helps someone not spend an entire day trying to fix a problem

I have to give serious credit to 2 blogs for this solution:

• http://www.d-p.com/Internet-Development-Blog/article/Generation-Flex.cfm
• http://weblogs.macromedia.com/lin/archives/2006/08/flex_app_works.html

Until now I have never needed to do a lot with meta data except making items bindable or creating custom events. Recently I wanted to create a limitation on a custom property. Here’s the code:

private var _iconPosition:String = "left";
[Bindable]
public function set iconPosition( value:String ):void
{
_iconPosition = value;
}
public function get iconPosition():String
{
return _iconPosition;
}

In order to add default values you have to make the property inspectable. This affects the compiler and provides code hints for the property. See the Live Docs for a full description of “Inspectable”. In my example, I wanted to simply limit my “iconPosition” property to either left or right. Here is the updated code:

private var _iconPosition:String = "left";
[Bindable]
[Inspectable(enumeration="left,right")]
public function set iconPosition( value:String ):void
{
_iconPosition = value;
}
public function get iconPosition():String
{
return _iconPosition;
}

I ran across this problem recently…

I needed to create a slider that didn’t change in a uniform way. It was different for each third of the slider. The first third changed evenly from 0 – 25,000. The second third from 25,000 – 100,000. The last third from 100,000 – 10,000,000.

Here are the basic steps that I took:

1. Create a slider with minimum 0 and maximum 10,000,000
2. Create a handler for the change event
3. Write a whole lot of math in the change event

I’ll let you read over the application code at the link below. Here’s a really quick view of the function that handles the slider changing:

private function handleSliderChange():void
{
var thumbPercentage:Number = slider.value / slider.maximum;
var newTextInputText:String = '';
var multiplier:Number;
if( thumbPercentage <= GraduatedSlider.ONE_THIRD )
{
newTextInputText = numberFormatter.format((thumbPercentage / GraduatedSlider.ONE_THIRD) * GraduatedSlider.SLIDER_ONE_THIRD_VALUE);
}
else if( thumbPercentage > GraduatedSlider.ONE_THIRD && thumbPercentage <= GraduatedSlider.TWO_THIRDS )
{
multiplier = ((GraduatedSlider.TWO_THIRDS - thumbPercentage) / GraduatedSlider.ONE_THIRD);
newTextInputText = numberFormatter.format((((thumbPercentage / GraduatedSlider.TWO_THIRDS) * GraduatedSlider.SLIDER_TWO_THIRDS_VALUE) - (multiplier * GraduatedSlider.SLIDER_ONE_THIRD_VALUE)));
}
else
{
multiplier = ((thumbPercentage - GraduatedSlider.TWO_THIRDS) / GraduatedSlider.ONE_THIRD);
//trace(multiplier);
newTextInputText = numberFormatter.format(((multiplier * GraduatedSlider.SLIDER_FULL_VALUE) + ((1 - multiplier) * GraduatedSlider.SLIDER_TWO_THIRDS_VALUE)));
}
this.sliderValue = newTextInputText;
slider.dataTipFormatFunction = sliderDataTip;
setTextInputValue();
}

View Application     View Source

I’ve recently been tasked with figuring this out so I thought I’d share my results with everyone.

The Problem:

Create a Flash/Flex horizontal menu that will overlap the content below it. We don’t know how big the menu might get or what kind of content might end up below it. We do know that layering HTML and Flash does not always work as expected based on which browser you use. Sure, you can use the wmode=”transparent” and put the flash on top of the HTML, but it doesn’t allow you to hover over or click items under the flash.

The Solution:

Use Flex to interface with Javascript to change the SWF Object as needed based on events being listened to inside that same SWF Object. See http://reynacho.com/2008/08/12/flex-calls-to-javascript/ for a tutorial on how to get Flex to call javascript functions.

Read on for the code and example…

continue reading "Flex Menu Expanding Over HTML content"

Modifying your default build template is quite simple. There is a template file that is used when building your project. It should reside in the html-template directory at the root of your project in Flex Builder. In Flex Builder 3, the template is named “index.template.html”.

Let’s say you want to modify default parameters in the flash object (one I use is wmode=”transparent” for flex widgets). You would add this to the AC_FL_RunContent() function call (around line 80) and to the noscript block (around line 101). 95% of people hitting the page will hit the AC_FL_RunContent() call so here’s an example of how to modify that:

continue reading "Flex – Modify your default build template"