1. Make sure you have the debugger version of the flash player installed
2. Add  trace(”your test message or details”);  to your code where appropriate
3. Open Applications/Utilities/Terminal
4. Go to the location of the Flash log file..
   /Users/[username]/Library/Preferences/[App Name]/Local Store/
   
5. Type the following command
   tail -f flashlog.txt
   
6. Launch your application.

package my.renderer
{
 import my.model.DataModel;

 import mx.controls.Label;
 import mx.controls.listClasses.IListItemRenderer;
 import mx.controls.listClasses.ListBase;
 import mx.core.UIComponent;

 public class ArtListRenderer extends UIComponent implements IListItemRenderer
 {
  public function ArtListRenderer()
  {
   super();
  }

     [Bindable] public var myData:DataModel = new DataModel();

     // Internal variable for the property value.
     private var _data:Object;

     // Make the data property bindable.
     [Bindable("dataChange")]

     // Define the getter method.
     public function get data():Object {
         return _data;
     }

     // Define the setter method, and dispatch an event when the property
     // changes to support data binding.
     public function set data(value:Object):void {
         _data = value;

         myData = new DataModel();
         myData.firstname = value.firstname;
         myData.lastname = value.lastname;

         invalidateProperties();
         dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
     }

     private var hBox:HBox;
     private var firstnameLabel:Label;
     private var lastnameLabel:Label;

     override protected function createChildren():void
     {
      super.createChildren();

      hBox = new HBox();

      firstnameLabel = new Label();
      lastnameLabel = new Label();
      hBox.addChild( firstnameLabel );
      hBox.addChild( lastnameLabel );

     }  

     override protected function commitProperties():void
     {
      super.commitProperties();

      hBox.horizontalScrollPolicy = 'off';
      hBox.verticalScrollPolicy = 'off';

      hBox.percentWidth = 100;

      firstnameLabel.text = myData.firstname;
      lastnameLabel.text = myData.lastname;
     }

     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
     {
      super.updateDisplayList(unscaledWidth,unscaledHeight);
      hBox.move(0,0);
      hBox.setActualSize( (unscaledWidth-4), unscaledHeight);
     }
 }
}

Here is an example Flex application which pulls values from the URL Query String.

<mx:Application creationcomplete="init()" layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private function init():void
{
  var qstr:String = ExternalInterface.call("window.location.search.substring", 1) as String;
  var qarr:Array = qstr.split('&');

  var pairs:Array;
  for( var i:Number = 0 ; i < qarr.length; i++ ){
     pairs = String( qarr[i] ).split('=');
     if( pairs[0] == 'myName' ){
           myName = pairs[1] as String;
     }
  }
}
]]>
</mx:Script>
<mx:Label text="{myName}" />
</mx:Application>

After you build the application and and Flex Builder has generated the .html file that displays your Flex app  you can rename the file .php and then add the following to the top of the file.

&lt?php $_GET['myName'] = 'Hi I am Kerk'; ?>

Now if you upload your SWF file and PHP file to a server that is running PHP and you open it in your browser you’ll  see your value from PHP displayed in your Flex app.

I don’t know if that is a clear explanation or not,  or if this is the best way to pass dynamic variables at load time into your flex application but it works for me.  Comments or alternative solutions welcome.

Problem with this approach is that the default value of a Container’s creationPolicy is ‘auto‘.  This means child components are only created when they are needed.  If your user never looks at the extra tabs/view stack layers then these form elements are not available if you need to get values or set values for them.

The Solution is to simple set the creationPolicy for your ViewStack or TabNavigator to ‘all‘.  This will ensure that all child elements are created up front and are available when needed regardless if the user looks at them or not.

Two of those methods are ObjectUtil.stringCompare and ObjectUtil.numericCompare. These methods make it simple to provide intelegent sorting on DataGrid columns.

Let’s say you have a DataGrid that has one column full of ID# and another column full of people’s names including both first and last names. Chances are the default sorting abilities of the DataGrid will not properly sort either column. The ID# would be sorted 1,10,11,12… instead of 1,2,3,4,5… and the column of names would sort by the first name and not the last name.

Lucky the DataGridColumn allows you to set a custom sort function via the property sortCompareFunction. For example look at these two DataGridColumns.

<mx:DataGridColumn headerText="ID#" dataField="contactid" sortCompareFunction="sortContactId"/>
<mx:DataGridColumn headerText="Name" dataField="full_name" sortCompareFunction="sortLastName">
 <mx:itemRenderer>
  <mx:Component>
    <mx:Label paddingLeft="5" text="{data.firstname} {data.lastname}" />
  </mx:Component>
 </mx:itemRenderer>
</mx:DataGridGolumn>

The first column is for the ID# of a contact, the second column uses an itemRenderer and displays both the firstname and lastname for the contact. Each column defines it’s own sortCompareFunction. Both functions make use of methods from mx.utils.ObjectUtil.

private function sortLastName(obj1:Object,obj2:Object):int
{
   var value1:String = (obj1.lastname == '' || obj1.lastname == null) ? null : new String(obj1.lastname);
   var value2:String = (obj2.lastname == '' || obj2.lastname == null) ? null : new String(obj2.lastname);
   return ObjectUtil.stringCompare( value1, value2, true );
}
private function sortContactId(obj1:Object,obj2:Object):int
{
   var value1:Number = (obj1.contactid == '' || obj1.contactid == null) ? null : new Number(obj1.contactid);
   var value2:Number = (obj2.contactid == '' || obj2.contactid == null) ? null : new Number(obj2.contactid);
   return ObjectUtil.numericCompare( value1, value2 );
}

These functions are pretty straight forward.  sortLastName function uses stringCompare method to compare the lastname from two objects. The flag ‘true’ is set to make sure that the comparison is case insensitive. The sortContactId function uses the numericCompare method to compare the contactid from two objects.

Today I needed a panel which had a button in the top right corner of the header. Where the ’status’ text is normally is. I wanted to put a ’save’ button there. One problem, the mx.containers.Panel component does not have a button in the header.

Solution. Make a new component which extends all the functions of the Panel and stick a button in the top corner where I want.

Click here to see a demo

Click here to view the source

My new ButtonPanel component extends Panel and adds 2 new properties and 1 event.

Properties

buttonLabel : String – Defines the label for the button in the top corner
buttonPadding : Number – Defines how much padding to provide in the header

Event

buttonClick : Event – Dispatched when the button is clicked

So next time you’re looking to replace an item in an ArrayCollection and wishing there was a replaceItemAt method, look no further than setItemAt. 

The one of the elements in the string contained ‘ &quote; ‘ which when being encoded by php and sent as a HTTPService response back to my Flex application was being converted back into double quotes ( “ ). When Flex JSON.decode attempted to decode the string it would silently fail. No errors or anything.

In my case my JSON string was already pretty complicated with lots of variable content so it took a while to figure this out. Hopefully someone else finds this post and saves themselves some time.

Scenario: You have a DataGrid which uses an ItemRenderer to display the contents of a cell and you need this DataGrid to respond to DoubleClick events.

Problem: The DoubleClick does not fire when the clicking occures in the white space of the item renderer.

Solution: Enable DoubleClick in the itemRenderer as well and send the event to a dummy event handler.

Here’s an example to clarify. First a MXML component containing the DataGrid.

<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function dblClickHandler(event:ListEvent):void
{
  Alert.show("Double your fun");
}
]]></mx:Script>
<mx:DataGrid id="myGrid" width="100%" dataProvider="{myArrayCollection}"
doubleClickEnabled="true" itemDoubleClick="dblClickHandler(event)">
 <mx:columns>
  <mx:DataGridColumn headerText="Col1" itemRenderer="claire.renderer.myCol" />
  </mx:columns>
</mx:DataGrid>

Here is the itemRenderer claire.renderer.myCol. Basically we enable double click and for the doubleClick event and we send the event to a dummy handler

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" doubleClickEnabled="true"
 doubleClick="dummyClickHandler(event)">
<mx:Script>
<![CDATA[
private function dummyClickHandler(event:Event):void
{
  // do nothing
}
]]>
</mx:Script>
<mx:Label text="{data.artistName}" fontWeight="bold"/>
<mx:Label text="{data.artworkMedium}" fontStyle="italic"/>
<mx:Label text="{data.artworkSize}"/>
</mx:VBox>

This version of the component is a little more tailored for a touch screen kiosk and is modled a little after the soft-touch keyboard you see on Apples’ iPhone. The main new features are shortcut buttons for typing ‘.com’ and ‘.ca’ (cause I’m Canadian) as well as a ‘Tab’ button for tabbing through form fields.

You can view a demo of the updated component here.

You can view the source code for the updated component here.

How to Customize this Component

I’ve had a few comments and questions about how to customize this component. It should be fairly straight forward to do if all you want to do is add or modify how a button works. Here are instructions on how to add an ‘Enter’ or ‘Return’ button to the keyboard.

1. First step is to physically add the button to the keyboard. This can be done by adding a new object to one of the keyRow arrays in the qwerty.mxml file. Adding the following object to the end of the keyRowC array will add the button to the end of row 3 of the keyboard.

   {label:'Return',w:100}

   The property ‘w’ specifies that the button should be 100 pixels wide. Alternatively you could set the property ‘flex’ to ‘true’ which would make the button take up as much available space as is available.

2. Next you need to instruct the component on how to handle the click event for this new button. You do this by adding a condition to the switch statement in the function handleKeyClick(). Add the following condition for the new Return button.

   case 'Return': this.inputControl.text += "n";break;

3. Finally we need to modify the function which handles toggling between Upper and Lower case on the keyboard. We don’t want our new button to be affected by this toggling so we will adjust this function to bypass our new button.

   In the function toggleUpperLower() edit the following line from this…

   if ( kidLabel == 'Tab' || kidLabel == 'Delete' ) continue;

   to this…

   if ( kidLabel == 'Tab' || kidLabel == 'Delete' || kidLabel == 'Return' ) continue;

There you go, you should have a functional return button. If you have any problems with this example please let me know in the comments.