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 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:

override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
{
var background:Shape;
if (rowIndex < s.numChildren)
{
background = Shape(s.getChildAt(rowIndex));
}
else
{
background = new FlexShape();
background.name = "background";
s.addChild(background);
}

background.y = y;

// Height is usually as tall is the items in the row, but not if
// it would extend below the bottom of listContent
var tempHeight:Number = height;
var height:Number = Math.min(height,
s.height -
y);
if( height < 0 )
height = tempHeight;

// set the row color to what was passed in
var rowColor:uint = color;
// if the row is selected, override the row color with the selectionColor from the stylesheet
if( this.selectedIndices.indexOf(rowIndex) != -1 )
{
rowColor = getStyle("selectionColor");
}
var g:Graphics = background.graphics;
g.clear();
g.beginFill(rowColor, getStyle("backgroundAlpha"));
g.drawRect(0, 0, this.width, height);
g.endFill();
}

The main addition here is the check for this.selectedIndices.indexOf(rowIndex) != -1. This checks to see if the row is selected or not. If it is, it gets the selectionColor from the styles and uses that instead of the default color that was passed in.

This might not be the most elegant solution but in my case it worked.

Oh yeah, here are the styles for the DataGrid that I referenced:

.QuoteList
{
backgroundAlpha: 1;
backgroundColor: #000000;
alternatingItemColors: #000000, #040084;
headerColors: #ebe9ee, #cccccc;
horizontalGridLines: true;
horizontalGridLineColor: #ffffff;
verticalGridLineColor: #ffffff;
rollOverColor: #4844c8;
textRollOverColor: #ffffff;
borderThickness: 0;
selectionColor: #4844c8;
color: #ffffff;
textSelectedColor: #ffffff;
headerStyleName: "QuoteListHeaderStyle";
}

.QuoteListHeaderStyle {
color: #000000;
fontWeight: bold;
textDecoration: none;
}

• 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;
}
}
}

Servers give you the option to reboot so I thought, why not PCs?

Well, there is a way and you don’t have to jump through any major hoops to do it. Simply open the run dialog or a command shell and type
shutdown -r

the -r is VERY important here, otherwise, you’ll just shutdown your computer.

I hope that helps someone.

EDIT: Please not this is on Windows XP Pro. I’m not sure about other Operating Systems

EDIT 5/20/2009: The easiest way yet is to hit Alt+F4 and select “Restart”

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.

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.

In farcry sites, there is a navigation.js or hover.js file that is loaded which provides a nice *hack* for IE6. The purpose of this is that for multi-level navigations, the dropdown/flyout appears when you hover over an LI tag. IE6 only recognizes the seudo element (:hover) on A tags so this javascript file manually adds a class to every LI tag that is a child of a particular element. I.E. if your outer UL has an ID of “menu” this class will be added to all sub-elements.

Here’s what the basic javascript looks like:

hover = function() {
var nav = document.getElementById("menu");
if(nav){
var nodes = nav.getElementsByTagName("li")
for (var i=0; i<nodes.length; i++) {
nodes[i].onmouseover=function() {
this.className+=" hover";
}
nodes[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", hover);

I know, not necessarily that “basic” but all it’s doing is attaching an “onMouseOver” and “onMouseOut” event handler to all LI tags under the element with ID “menu”.

Now, back to the original problem… The dropdown/flyout menus don’t always layer OVER the content in the page. This is thanks to IE rendering all elements with a z-index of 0. Regardless of what you set this to in your CSS (generally z-index of the flyout is higher than the z-index of the page) IE will make it all 0 at the time of loading.

I dealt with this problem for months always hacking my way through a fix depending on the site until it finally dawned on me. I can use this javascript to my advantage because this code runs “onload” (once the page has loaded). Conveniently, this is also after z-indexes have been butchered by IE. So, here is a quick alteration to that javascript that has fixed every problem I’ve run into thusfar:

hover = function() {
var nav = document.getElementById("menu");
nav.style.zIndex = 100;
if(nav){
var nodes = nav.getElementsByTagName("li")
for (var i=0; i<nodes.length; i++) {
nodes[i].onmouseover=function() {
this.className+=" hover";
}
nodes[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", hover);

Notice the line “nav.style.zIndex = 100;”. That’s all it took. Of course, your situation may be much more complex than this and may require more layering of elements. Using this same example you can simply reset z-indexes even if you don’t have a complex menu. Here would be an example of that:

resetZIndexes= function() {
var nav = document.getElementById("menu").style.zIndex = 100;
// other elements would go here
}
if (window.attachEvent) window.attachEvent("onload", resetZIndexes);

I really hope this helps someone avoid the agonizing pain that I had to endure prior to figuring this out.

This contains Eclipse 3.3, CFEclipse, Subclipse and Remote Directory Browsing packages (FTP)

Download Now

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

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;
}