Thursday, November 27, 2008

Flex embed an image as a Class

// Embed the image once and refer to the Class
public var myImage:Class;

This is helpful if you're using the same image in several places, this way you only have to embed it once, and if you change the image file name you only have to change it in one place.

You can also create a Class that holds all the images and you can get an instance of that Class to refer to your images.

For example:

package com.view
 import mx.binding.utils.BindingUtils;

 public class AssetImporter

  private static var instance : AssetImporter;

  //return singleton instance of AssetImporter

  public static function getInstance() : AssetImporter
   if (instance == null)
   instance = new AssetImporter();
   return instance;

  //put your images here
  public var imgOne:Class;

  public var twoLarge:Class;

Then in your mxml script use the following lines

import assets.AssetImporter;
[Bindable] private var assetImporter:AssetImporter = AssetImporter.getInstance();

then to call an image simply refer to the instance

<mx:Image source="{assetImporter.imgOne}"/>

Here is an example of an AssetImporter with view source enabled.

Tuesday, November 25, 2008

Flex 3 AdvancedDataGrid dataTipFunction mess

Well Flex 3 with it's fancy AdvancedDataGrids is proving to be a little more than frustrating. All I wanted to do was show a dataTip on a hover on the datagrid row. It took me hours of research to figure out that there is a "bug":

So if you have an Advanced Data Grid and you want to show a custom data tip on hover of a row this is basically how you should do it.

private function testTip(item:Object):String
 if (item is AdvancedDataGridColumn)
  return "This is a header tip"
  return "This is a data tip";

OH yes... that's right. It calls this beauty twice. If you don't have the if statement it will error out and your ap won't run. Sweet eh?

 width="100%" height="100%"

NOW.. if you're like me, you might be using an itemRenderer on that column. You try out the datatip stuff above and curse me because it doesn't work. Yeah. I know.

Inside your item renderer you're going to have to set the tooltip (that is if what you're extending has a tooltip). I usually extend label, so it works fine.

package com.view.renderers
 import mx.controls.Label;

 public class MyRenderer extends Label
  override protected function updateDisplayList(unscaledWidth:Number,   unscaledHeight:Number):void
   super.updateDisplayList(unscaledWidth, unscaledHeight);

   //Set the font color based on the item number.
   setStyle("color", (data.myNumber<= 0) ? 'red' : 'green');
   this.toolTip = "Here is my custom data/tool tip!";

Monday, November 17, 2008

embed an image

...also of note...

a Flex embed statement in css looks like this
upSkin: Embed("images/buttonUp.png");

a Flex embed statement inline looks like this

a chart gutter

Note to self... you've seen this before, stop forgetting it...

The area around a Flex chart where the axis lives is called the "gutter". There are 4 properties that control this:

  • gutterLeft

  • gutterRight

  • gutterTop

  • gutterBottom

Here is an example using chart gutters.