<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">

<mx:Script>
	<![CDATA[

private function init():void
{
	systemManager.stage.displayState=flash.display.StageDisplayState.FULL_SCREEN_INTERACTIVE
}
	]]>
</mx:Script>

</mx:WindowedApplication>

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.

In my application and the main WindowedApplication contains a ViewStack and a ViewController. Inside the ViewStack are the various MXML views which make up the application. When my application was just a Flex app I sized the application to 100% width/height in the html-template file. However for my Air application it is necessary to set a minimum width/height on launch and let the user decide if they want to maximize the window or set a custom size.

The gotcha came when I set minWidth and minHeight on the new WindowedApplication. This apparently sets the creationPolicy to ‘ ALL ‘ on the parent and thus is inherited by the ViewStack.

If no creationPolicy is specified for a container, that container inherits its parent’s creationPolicy. If no creationPolicy is specified for the Application, it defaults to ContainerCreationPolicy.AUTO.

So the moral of this story is. If you set minHeight/minWidth on a WindowedApplication consider the desired creationPolicy for children. If you don’t want all children to be automatically created when the application is launched then you’ll need to adjust the creationPolicy for child containers manually to ‘ auto ‘ or ‘ none ‘.

Click here to view the demo application

Click here to view the demo source

The demo application starts out by displaying a form which has 2 input fields.  When submitted the value of the form is submitted to the PHP service which validates the submission and returns a response.  If there are no errors the results are displayed.

ClaireKerkness.mxml

The main application MXML file contains the ViewController and a ViewStack with both our FormView and ResultView as children. When the view controller dispatches the mainViewChange event a handler function changes the displayed view.

model/Views.as

This is a very simple Actionscript class which defines a couple of static constants to use as the names for our two views.

model/NameModel.as

A simple Actionscript class which we use as a data model.  When a response is returned we update this model.

NOTE: In this example our NameModel is a Singleton Class because we only want one instance.  This doesn’t have to be the case. You might want to create many instances of a data model if you expect many records of similar data.

views/FormView.mxml

FormView is an MXML component that contains a couple of form elements and a ClaireService component which is used to send a HTTPService request to the Kerkness backend. If an error is returned the error message is displayed.  If a response is returned we update the NameModel and change the currentView to our ResultView.

views/ResultView.mxml

ResultView is a simple MXML component which displays content from the NameModel.

kerk/module/demo/submitform.php

This is the PHP file which accepts our form submission. Check out the kerkness tutorials for details on how the kerkness framework handles requests.

PHP Source Code

if( ! $_POST['firstname'] || ! $_POST['lastname'] )
{
 	$kerk->throwError('Incomplete Submission...', true );
}

$fullName = $_POST['firstname']. ' ' .$_POST['lastname'];

$kerk->addContent('fullName', $fullName); 

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

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.

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. 

Click here to view a demo
(demo lets you upload up to 3 files at a time with a max size of 4 megs each)

Click here to view the source

The usage of the component is pretty straight forward. You can set some properties to define what types of files can be uploaded and you direct the ‘upload’ towards a server side script. In my demo I send the files to a basic PHP script ( which I’ve included below ). The script handles one file at a time and is expected to report back either the string ’successful’ or an error message which is displayed.

Properties

The following public properties can be set to customize the use of this component

• uploadButtonLabel : String = ‘Upload’
  This is the label used for the ‘upload’ button.
• selectButtonLabel : String = ‘Select File(s)’
  This is the label used for the ’select’ button.
• removeButtonLabel : String = ‘Remove Selected File’
  This is the label used for the ‘remove’ button.
• maxFileCount : Number = 3
  This sets the number of files a user is allowed to upload
• maxFileSize : Number = 1
  This sets the maximum file size (in megs) for each individual file. Default is 1 meg.
• requestUrl : String = ”
  This is the URL for your PHP/ASP/ColdFusion/Other script which you will send the uploaded files to. THIS PROPERTY MUST BE SET !
• allowOnlyImages : Boolean = false
  If set to ‘true’ the user will only be able to select image files
• allowOnlyText : Boolean = false
  If set to ‘true’ the user will only be able to select text files.
• allowAllFiles : Boolean = true
  If set to ‘true’ the user can upload images or text files.
• barColor : String
  Allows you to style the progress bar

Events

The component has one event ‘uploadComplete’ which is triggered if all files are uploaded successfully.

The PHP Handler

Following is the source for the simple PHP script which I am using in the demo. In this script I am just confirming that the file was uploaded successfully and then I am deleting it. Since this is a public demo I don’t want people filling up my server with unwanted images. In your script you would most likely copy the FILE to a more permanent location and possibly do a little more validation. The script needs to echo the string ’success’ or echo an error message.

$hasError = false;foreach( $_FILES as $i=>$file ){
   if ( $file['error'] ){
      $hasError = true;
  }
  /**
    * Because this is a public example. I am just going to immediately delete
    * the file which was uploaded.  In a regular application you would copy the file
    * from it's temporary location to it's permament location.
    */
   unlink( $file['tmp_name'] );
 }
if ( ! $hasError ){
  echo('success');
} else {
  echo('Stick custom error message here');
}

Jen Krause has posted a modified version of the component which allows the user to press ENTER, TAB or click their mouse button to select the first selected item. This is a very nice modification.

A problem I ran into however was using multiple AutoComplete components in the same Flex form. If you try and put more than one AutoComplete component in the form, the first component looses the label of the selected item when you begin using the second component. I wasn’t able to determine the cause of this problem but I was able to provide a simple work around.

If you’ve run into a same problem, you can fix it by making the following change to the class’ focusOutHandler method.

// Change this method ...override protected function focusOutHandler(event:FocusEvent):void{super.focusOutHandler(event)if(keepLocalHistory && dataProvider.length==0)  addToLocalHistory();}

// To this ....override protected function focusOutHandler(event:FocusEvent):void{super.focusOutHandler(event)if(keepLocalHistory && dataProvider.length==0)  addToLocalHistory();_typedText = textInput.text;   // replace typedText with textInput.text}

I’m not sure if there are any ramifications to this fix but I haven’t found any additional problems in my own application.

UPDATE
Turns out there are numberous implications when using multiple AutoComplete Input controls in the same form specifically when you want to try and set the value of the controls with actionscript. If you only need one AutoComplete input control then this component works really well and is very user friendly. However if you need multiple controls you may want to re-consider your form design choices.