Thursday, November 27, 2008

Flex embed an image as a Class

// Embed the image once and refer to the Class
[Bindable]
[Embed(source="../assets/images/myImageFile.png")]
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;

 [Bindable]
 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
  //One
  [Embed(source="/assets/images/myImages.swf#one")]
  public var imgOne:Class;

  //Two
  [Embed(source="/assets/images/two.png")]
  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":

http://bugs.adobe.com/jira/browse/FLEXDMV-1789

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"
 else
  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?


<mx:AdvancedDataGrid
 id="mainADG"
 width="100%" height="100%"
 dataTipFunction="testTip">
[...]
 <mx:AdvancedDataGridColumn
  dataField="Name"
  headerText="Name"
  itemRenderer="com.view.renderers.myRenderer"
  showDataTips="true"
 />
[...]


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
icon="@Embed('images/add.png')"

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


https://www.adobe.com/livedocs/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=charts_formatting_110_11.html

Here is an example using chart gutters.