LonePalm Flex Library

So I finally started my own library to contribute back to the community. I’ll be adding some of my personally developed components to a Google Code repository starting with today’s: KeyBoardInputMonitory.

If you ever wanted to use a mag-strip or barcode scanner, check it out.

http://code.google.com/p/lonepalmflexlib/

Disabling the Default Flex Validador Error Tooltips

Let’s just say you have this crazy requirement to validate Flex TextInputs and TextAreas, they have to indicate that they are invalid while using them (i.e. turn red), but NOT use that nifty little mouse-over tooltip that describes why it’s invalid.  Ok well here’s how you can stop it:

textInput.addEventListener(ToolTipEvent.TOOL_TIP_SHOWN, hideToolTip);

private function hideToolTip(event : ToolTipEvent) : void
{
     ToolTipManager.currentToolTip.visible = false;
}

or

<mx:TextInput toolTipShown=”ToolTipManager.currentToolTip.visible = false“/>

Universal Mind

After a seemingly brief stay with Highwinds in Winter Park, FL, I’ve decided to become an independent consultant working with Universal Mind.  I’ve known these guys for a long time now and they are steadily growing as the premiere Rich Internet Application development house.

More here: www.UniversalMind.com

I will really miss my friends at Highwinds, but I left StrikeTracker in some very capable hands and I’m not going far.

StrikeTracker Unveiled

This press release gives a great description of what we’re up to in the new product:

http://www.cnbc.com/id/24723705/

A Little Recognition

I haven’t posted much about my new position at Highwinds yet, but there have been quite a few articles from local newspapers, the associated press, and industry magazinges about my latest project, StrikeTracker:

Streaming Media Magazine, May 19, 2008

More here on the Highwinds website

Salsa T-shirt for a Software Engineer

I saw this shirt at Flava Invasion 3 in Atlanta… how appropriate is this for me?!?!?!

Scrolling Containers, IE, wmode=”transparent” PROBLEM

This makes TWO Flex bugs in one day… damn I’m handy:

http://bugs.adobe.com/jira/browse/SDK-14738

Making Flash/Flex Video More Efficient

Submitted an issue to the Flex Bug Tracking DB today:

http://bugs.adobe.com/jira/browse/SDK-14732

This is a result of some performance tuning an application that needs to connect to FMS for video using mx.controls.videoClasses.VideoDisplay

Read the issue for details.

Firefox and WMP Plugin Issue

I have an issue that only occurs using the Firefox version of the WMP plugin. The intent is to change the video programatically. The following scenario causes 2 problems:

1) The video is not visible even though the player is. The audio stream is playing.

2) Subsequent attempts to set the content of the player cause the video to display, but the internal content stretches to the previous dimensions of the player. (I’m handling the PlayStateChange event.. see below) The first one I play is 360×240 and the second is 320×240.

On an html page I have the plugin created with javascript to handle cross-browser differences:

<script language="JavaScript" type="text/javascript" for="windowsMediaPlayerInstance" event="PlayStateChange(newState)">
  <!--
    onWmpPlayStateChange(newState);
  // -->
</script>

<div style="position: absolute; overflow: hidden; display: none;" id="windowsMediaPlayerHost">
  <script type="text/javascript" language="Javascript">
    <!--
      var player = createWindowsMediaPlayer();
      document.write(player);
    // -->
  </script>
</div>

The player HTML is returned from:

function createWindowsMediaPlayer()
{
  var target;

  if (isIE)  // isIE is provided by the AC_OETags.js script
  {
    target = "IE";
  }
  else
  {
    target = "FF";
  }

  if (isIE)
  {
    content = "<object id='windowsMediaPlayerInstance' classid='CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6' width='320' heigh='240'";
    content += " codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701' type='application/x-oleobject'>";
    content += " <param name='url' value=''>";
    content += " <param name='uiMode' value='none'>";
    content += " <param name='autoStart' value='true'>";
    content += " <param name='enableContextMenu' value='true'>";
    content += "</object>";
  }
  else
  {
    content = "<object id='windowsMediaPlayerInstance' type='application/x-ms-wmp' data='' width='320' heigh='240'>";
    content += " <param name='url' value=''>";
    content += " <param name='uiMode' value='none'>";
    content += " <param name='autoStart' value='true'>";
    content += " <param name='enableContextMenu' value='true'>";
    content += "</object>";
  }

  return content;
}

I set the content:

var player = document.getElementById("windowsMediaPlayerInstance");
player.URL= url;
player.FileName  = url;
player.autoSize  = "0";
player.autoStart = "true";
var host = document.getElementById("windowsMediaPlayerHost");
host.style.display = "block";

Here is how I handle the state change and look for the video to start playing so I can grab the imageSourceWidth and Height:

function onWmpPlayStateChange(newState)
{
  if (newState == 3)
  {
    if (sizeUpdated == false)
    {
      sizeUpdated = true;
      var player = document.getElementById("windowsMediaPlayerInstance");

      if (player == null)
      {
        alert("Error: The Windows Media player control could not be not found.");
      }
      else
      {
        var currentMedia = player.currentMedia;
        var w = currentMedia.imageSourceWidth;
        var h = currentMedia.imageSourceHeight;
        setPlayerSize(w, h);
        updateAppPlayerSize(player.width, player.height);
      }
    }
  }
}

DataGrid Item Renderers… Think outside the <mx:Box/>

Ok… so I think I’m funny. This is more about thinking OF the <mx:Box/>

Let’s say you want to create a custom ItemRenderer for a Datagrid that has layout control like the HBox container. You cannot simply write a custom component and assign that to a DataGridColumn. You’ll find out that in order to get access to data being assigned to your formatted column at runtime, you need to implement IDropInListItemRenderer. The only components useful to DataGrid that already implement that interface are: Button, ComboBox, DataGridItemRenderer, DateField, Image, Label, ListBase, ListItemRenderer, NumericStepper, TextArea, and TextInput.

This is fairly easy to overcome. All you have to do to a container like HBox would be to define that interface to implement, create a getter and setter for the listData property, and handle the dataChange event so when this class is reused as a renderer in a list, we appropriately set the property that stores our DataGrisListData:

<mx:HBox
    implements="mx.controls.listClasses.IDropInListItemRenderer"
    dataChange="onDataChange">

private var _listData : BaseListData;
private var _dgListData : DataGridListData;

public function get listData() : BaseListData{
return _listData;
}

public function set listData(value : BaseListData) : void{
this._listData = value;
}

public function onDataChanged(event : Event) : void{
_dgListData = listData as DataGridListData;
}

When the item renderer is used at runtime and the data property is set to the item in the grid, you can access the appropriate datafield which you intend to format. In this case I’m setting a private [Bindable] variable that a label is listening to:

public override function set data(value : Object) : void{
    super.data = value;
    _theLabelText = value[_dgListData.dataField] as String;
    super.invalidateDisplayList();
}

Now you can use the HBox to do this:

<mx:DataGridColumn
    datafield="myfield"
    itemrenderer="myHBoxRenderer"/>

I’ve used this method to create an Excel-style Accounting Renderer. It will be posted shortly here in this blog.