Flexing My Kerkness

Creating an ItemRenderer in ActionScript

2008-11-06T08:17:00.000-08:00

I'm posting this for my benefit as much as anyone else. Here is a very basic ItemRenderer done in ActionScript. Something you might come across when building Flex/Air applications is errand problems with ItemRenderer's not performing as expected, sucking up lots of memory, or throwing errors. Many times these problems can be solved by building your renderer in ActionScript. Here is the source for a basic item renderer which can be scaled up as needed.

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

Get PHP dynamic variables inside Flex

2008-10-16T12:52:00.000-07:00

Let's say that before you load your flex application you want to pass some dynamic variables from PHP for it to act upon. This can be done pretty easily by slipping the values into PHP's $_GET array and using Flex's ExternalInterface class to get access to them from inside the Flex app.

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.

<?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.

Force creation of complete ViewStack with creationPolicy when building a form across multiple views : Flex Tip

2008-10-03T09:23:00.000-07:00

Here's a tip which might be useful for some people. Sometimes when building a Flex/Adobe Air interface you may want to have form elements which are built across multiple views of a ViewStack, or TabNavigator. For example I have a contact form which has some rarely used fields contained in a secondary Tab in my form.

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.

Flex Tip : Use ObjectUtil for Alpha and Numeric sorting on a DataGrid

2008-10-02T08:13:00.000-07:00

If you haven't taken the time to look at the features of Flex's ObjectUtil you should. Inside are a few handy methods which I see getting over looked.

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.

Flex Component : ButtonPanel puts a button in your panel header

2008-10-01T19:21:00.000-07:00

It's always a joy when you need something and after writing a few lines of code, you have it. Such is the beauty of nice extendable components and the Flex architecture.

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

Flex Tip: ArrayCollection replace an item with setItemAt

2008-10-01T14:55:00.000-07:00

One thing which might not be clear when working with ArrayCollections in Flex is how to replace an item in the collection. The methods getItemAt and addItemAt are pretty clear in their purpose, but one method which I found myself over looking is the setItemAt method which could be more aptly named replaceItemAt as that is exactly what it does. It replaces an item in the collection.

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.

PHP json_encode() and Flex JSON.decode Gotcha

2008-09-13T11:19:00.000-07:00

I came across a little 'gotcha' when trying to get Flex JSON.decode to properly decode a JSON string I was producing with PHP.

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.

PHP trim() function in Actionscript for Flex

2008-09-06T11:23:00.001-07:00

Here is PHP's trim() function reproduced in Actionscript for use in a Flex application

public function trim(str:String):String
{
    for(var i:Number = 0; str.charCodeAt(i) < 33; i++);    
    for(var j:Number = str.length-1; str.charCodeAt(j) < 33; j--);
    return str.substring(i, j+1);
}

UPDATE: Thanks to Almog Kurtser, I now know that Flex has a utility to handle trimming strings. Here is an alternative example

import mx.utils.StringUtil;

public function trim(str:String):String
{
   return StringUtil.trim(str);
}

Of course it is redundant to actually create a function called trim just to call the method StringUtil.trim() but you get the idea.

GmailReader.php : A PHP IMAP Class for Reading your Gmail Account

2008-09-05T13:09:00.000-07:00

One of the requirements I had for a recent project involved keeping track of email communication from multiple Gmail users. My first thought was to simply forward a copy of all incoming and outgoing email to an email account on my server and accessing the email that way. There was one problem with this approach. Gmail only allows you to forward a copy of incoming email somewhere else. Emails composed in Gmail stay in Gmail.

My solution: Use Gmail's IMAP capabilities and monitor the accounts using PHP-IMAP. This turned out to be a fairly easy to implement solution but I thought I would post my GmailReader class to save other people some initial headaches of getting things rolling.

First of all you'll need to enable IMAP for you Gmail Account. Log into Gmail and goto Settings > Forwarding and POP/IMAP

Next you'll need to make sure php is compiled with IMAP enabled. This can be done on ubuntu with the following command and then restart apache for good measure.

sudo apt-get install php5-imap
sudo /etc/init.d/apache2 restart

In my particular scenario I run a script every so often to look for new emails since the last time I checked. So the class file is structured to check for new emails since a specific date string.

Usage Example

include_once( 'GmailReader.php' );
$gmail = new GmailReader( 'username@gmail.com', 'password' ); 
$email = $gmail->getEmailSince('Fri, 5 Sep 2008 9:00:00');

print_r($email);

The above example will print out an array of all emails ( still in the Inbox ) which arrived no earlier than 9am on the 5th of September.

You can also check your sent mail using the following example.

$gmail = new GmailReader( 'username@gmail.com', 'password' );
$gmail->openSentMail(); 
$email = $gmail->getEmailSince('Fri, 5 Sep 2008 9:00:00');

Also, if you use Gmail to apply labels to certain email you can monitor just these emails as well.

$gmail = new GmailReader( 'username@gmail.com', 'password' );
$gmail->openMailBox( 'MYLABEL' ); 
$email = $gmail->getEmailSince('Fri, 5 Sep 2008 9:00:00');

Here is the full GmailReader Class File.

class GmailReader
{
var $mbox;

function GmailReader( $user, $pass )
{
 $this->mbox = imap_open("{imap.gmail.com:993/imap/ssl}INBOX",$user,$pass)
  or die("can't connect: " . imap_last_error());
}

function openSentMail()
{
 imap_reopen($this->mbox, "{imap.gmail.com:993/imap/ssl}[Gmail]/Sent Mail" )
  or die("Failed to open Sent Mail: " . imap_last_error());
}

function openMailBox($mailbox)
{
 imap_reopen($this->mbox, "{imap.gmail.com:993/imap/ssl}$mailbox" )
  or die("Failed to open $mailbox: " . imap_last_error());
}

function getMailboxInfo()
{
 $mc = imap_check($this->mbox);
 return $mc;
}

/**
 * $date should be a string
 * Example Formats Include:
 * Fri, 5 Sep 2008 9:00:00
 * Fri, 5 Sep 2008
 * 5 Sep 2008
 * I am sure other's work, just test them out.
 */
function getHeadersSince($date)
{
 $uids = $this->getMessageIdsSinceDate($date);
 $messages = array();
 foreach( $uids as $k=>$uid )
 {
  $messages[] = $this->retrieve_header($uid);
 }
 return $messages;
}

/**
 * $date should be a string
 * Example Formats Include:
 * Fri, 5 Sep 2008 9:00:00
 * Fri, 5 Sep 2008
 * 5 Sep 2008
 * I am sure other's work, just test them out.
 */
function getEmailSince($date)
{
 $uids = $this->getMessageIdsSinceDate($date);
 $messages = array();
 foreach( $uids as $k=>$uid )
 {
  $messages[] = $this->retrieve_message($uid);
 }
 return $messages;
}

function getMessageIdsSinceDate($date)
{
 return imap_search( $this->mbox, 'SINCE "'.$date.'"');
}

function retrieve_header($messageid)
{
   $message = array();
  
   $header = imap_header($this->mbox, $messageid);
   $structure = imap_fetchstructure($this->mbox, $messageid);

   $message['subject'] = $header->subject;
   $message['fromaddress'] =   $header->fromaddress;
   $message['toaddress'] =   $header->toaddress;
   $message['ccaddress'] =   $header->ccaddress;
   $message['date'] =   $header->date;

   return $message;  
}

function retrieve_message($messageid)
{
   $message = array();
  
   $header = imap_header($this->mbox, $messageid);
   $structure = imap_fetchstructure($this->mbox, $messageid);

   $message['subject'] = $header->subject;
   $message['fromaddress'] =   $header->fromaddress;
   $message['toaddress'] =   $header->toaddress;
   $message['ccaddress'] =   $header->ccaddress;
   $message['date'] =   $header->date;

  if ($this->check_type($structure))
  {
   $message['body'] = imap_fetchbody($this->mbox,$messageid,"1"); ## GET THE BODY OF MULTI-PART MESSAGE
   if(!$message['body']) {$message['body'] = '[NO TEXT ENTERED INTO THE MESSAGE]\n\n';}
  }
  else
  {
   $message['body'] = imap_body($this->mbox, $messageid);
   if(!$message['body']) {$message['body'] = '[NO TEXT ENTERED INTO THE MESSAGE]\n\n';}
  }
 
  return $message;
}

function check_type($structure) ## CHECK THE TYPE
{
  if($structure->type == 1)
    {
     return(true); ## YES THIS IS A MULTI-PART MESSAGE
    }
 else
    {
     return(false); ## NO THIS IS NOT A MULTI-PART MESSAGE
    }
}


}

Flex : DataGrid ItemRenderer and DoubleClick Oh My !!

2008-08-29T14:32:00.000-07:00

I love it when you come across those little 'gotchas' when programming. Today I found one and it took a while to figure out a solution/hack so I thought I would post my findings and save someone else a little 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>

Kerkness, A PHP Framework for RIA Development

2008-08-20T10:06:00.000-07:00

For the past seven or eight years I've been developing and re-developing a PHP framework which I use as a backend model for almost all of my professional and personal projects. Currently I'm in the process of finishing a re-built from the ground up version that has been tailored for RIA development.

The new version is suitable for supporting the backend functionality of any Ajax or HTTP Request type application or web site. I currently use the framework as a backend for Adobe Flex/Air projects as well as a backend for modular web development.

With this new version I am also finally making a concious effort to release the framework in under a GNU General Public License as published by the Free Software Foundation.

How Kerkness Works

Kerkness is a MVC ( module, view, controller ) framework for php specifically designed to provide back end functionality for dynamic web sites and rich internet applications.

The Kerkness framework contains several core modules and class objects that aid developers when building custom modules and web services.

Making Requests

By default the Kerkness framework receives requests via HTTP and returns a JSON formatted response. However it also has the ability to return a response based on a custom designed template such as HTML or XML.

A typical request could look like this.
http://kerkness.ca/request.php?kr=pages.home

or like this with clean URLs enabled
http://kerkness.ca/pages.home

This request is asking for the ' home ' view from the ' pages ' module. When this request is received the Kerkness framework creates a request object and will execute the script ../kerk/modules/pages/home.php. The response is returned as a JSON formatted string or designated HTML template.

Request Chain

Requests can be linked together to create a Request Chain so that multiple requests can be called one after another. Kerkness remains flexible and is able to respond to simple AJAX type requests but can also serve complete web pages showing many dynamic content blocks.

Getting Started

Click here for a simple tutorial to get up and running quickly.

Click here to see the Kerkness Wiki

Watch this blog for more information and tutorials as I have time to write them. If you wish to get involved or have questions about the framework please leave me a comment.

Updated Flex Qwerty Component

2008-07-31T12:24:00.000-07:00

I've made some updates and improvements to my Flex Qwerty Keyboard Component.

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.

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.
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;
```
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.

Flex Component : Yet Another Flex File Upload Component

2008-06-26T14:42:00.000-07:00

There are several Flex upload components floating around and I gave most of them a good look over but I was not able to find one which suited my needs so I decided to make my own. Here it is for you to enjoy.

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

Locking Down the Ubuntu Log-In Screen

2008-06-20T15:33:00.000-07:00

One of the requirements I have for a kiosk project is to use a timed login instead of an automatic log in when the server boots. This is required so that some special drivers for the touchscreen have time to load and also gives an admin time to log-in using their profile if need be.

When the computer boots the Ubuntu login screen is displayed for 10 seconds before the limited user account is automatically logged in and the kiosk application is automatically launched.

The problem with this process is that during this 10 second window someone could change the login session from the default ( I normally use blackbox ) to something else by using the little "options" button in the bottom left corner. ( or at least it's in the bottom left corner of the default Ubuntu login theme 'human' ).

If you want to lock down or even just customize the login screen to suit your needs an easy way to do this is to edit the XML file which defines and places the elements on the login window. You can edit the main file for the default human theme with gedit.

cd /usr/share/gdm/themes/Human
sudo cp Human.xml Human.xml.backup
sudo gedit Human.xml

In my file I just commented out the <item> element which defined the option button. Voila ! No more option button.

Something I need to remember about ItemRenderers and the TileList control

2008-06-04T09:10:00.001-07:00

From a high level perspective, scrolling is moving data through fixed itemRenderers, not by actually moving renderers off the visible area of
the screen.

I found this little bit of information hidden in this thread. After trying to extensively use my PageList component in a large application and with a dataProvider that had the potential of providing hundreds of items needing rendering I was noticing a very bad side effect. My application would continue to create a new instance of the itemRenderer for every item in the dataProvider and if the dataProvider was emptied ( ie: arrayCollection.removeAll() ) the itemRenderers would remain.

Back to the drawing board on that one. I hope to post a new PageList component soon as my application is not usable in it's current state.

Multiple AutoComplete Input Controls in a single Flex Form

2008-05-20T13:20:00.001-07:00

A very nice component which is available from Adobe is their AutoComplete ComboBox. The AutoComplete Combo box looks like a regular TextInput component but will provide suggestions to the user as they type. This is very handy when you want to let users select from a long list of options ( such as a list of Countries ).

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.

Running Adobe Air for Linux on Ubuntu

2008-05-14T07:38:00.001-07:00

If you know what an RIA is then you know what Adobe Air is. If you don't know what either of them are, then you really shouldn't need to read this post.

I need to find out what type of performance boost their is running a desktop Flex application as an Adobe Air application compared to running it using FireFox with Flash Player 9. So in order to do that I need to make sure I can get Adobe Air for Linux ( currently in Alpha ) working. I need to do this because my application needs to run off a linux desktop environment.

First download Adobe Air for Linux runtime environment from the following link. You don't need to install the SDK unless you plan on developing Air applications using a linux desktop. I've started using OSX myself so I'm only going to install the runtime environment.

http://labs.adobe.com/downloads/air_linux.html

I moved my bin file to /usr/share/air and then changed the permissions.

sudo mkdir /usr/share/air
sudo mv adobeair_linux_al_******.bin
chmod +x adobeair_linux_al_******.bin

Then from the desktop go to Places > Computer > usr > share > air and double click on the bin file.
Follow the prompts and you're done installing the runtime environment.
Now let's see if we can get a fancy Air Application running. Go to the Sample application section at Adobe Labs and download an application that interests you. I downloaded Signet which gives you the ability to take your del.icio.us bookmarks to the desktop (whatever that means).

http://labs.adobe.com/technologies/air/samples/
When you click on the download link you should be presented with the option to open the link with the Adobe Air Application Installer. Choose OK and follow the prompts. Make sure to select the option to install an icon on your desktop so that the app will be easy to find once installed.

There you go. Go and explore the world of Adobe Air applications. Good times.

Setting up a Kiosk Watchdog for your Ubuntu Blackbox Kiosk

2008-05-08T14:36:00.000-07:00

Previously I put together a post which describes how to build a Kiosk computer using Ubuntu, Blackbox and Firefox. I'm following that up with details on how to monitor the kiosk so that you can be notified when/if the computer or services fail. I'll break this post into two sections.

1) Monitoring the computer services and network
2) Monitoring FireFox performance

Monitoring the computer services and network

Because our Kiosk computer is an Ubuntu server and running apache/php/mysql locally there are several open source network and service monitoring programs. The one I found most suitable for my solution is called Monit and I found a very good post at Ubuntu Geek describing how to install monit on ubuntu and configure it. I basically followed the Ubuntu Geek tutorial but made some modifications to the config file. My revised process is below.

Install Monit
```
sudo apt-get install monit
```

Configure Monit. Open /etc/monit/monitrc in your favorite text editor. Below is an example of how I set up my own configuration file. It should be pretty self explanatory.

## Start monit in background (run as daemon) and check the services at 2-minute
## intervals.
set daemon  120

## Set syslog logging with the 'daemon' facility.
set logfile syslog facility log_daemon

## Set list of mailservers for alert delivery.
## I use my ISP's SMTP server for better reliability and means
## I don't need an smtp server running on my Kiosk
set mailserver mail.shawcable.com

## Use event queue if mailserver unavailable
set eventqueue
basedir /var/monit  # set the base directory where events will be stored
slots 100           # optionaly limit the queue size

## You can set the alert recipient here
set alert someone@domain.com

# Monitor Apache
check process apache2 with pidfile /var/run/apache2.pid

# Action to be taken when apache fails
start program = "/etc/init.d/apache2 start"
stop program = "/etc/init.d/apache2 start"
# Admin will notify by mail if below the condition satisfied below
if cpu is greater than 60% for 2 cycles then alert
if cpu > 60% for 5 cycles then restart
if children > 10 then alert
if children > 50 then restart
if loadavg(5min) greater than 10 for 8 cycles then stop
if 3 restarts within 5 cycles then timeout
group servers

# Monitor MySQL
check process mysql with pidfile /var/run/mysqld/mysqld.pid
group database
start program = "/etc/init.d/mysql start"
stop program = "/etc/init.d/mysql stop"
if failed host 127.0.0.1 port 3306 then restart
if failed host 127.0.0.1 port 3306 then alert
if 5 restarts within 5 cycles then timeout

# Monitor SSH Service
check process sshd with pidfile /var/run/sshd.pid
start program = "/etc/init.d/ssh start"
stop program = "/etc/init.d/ssh stop"
if failed port 22 protocol ssh then restart
if failed port 22 protocol ssh then alert
if 5 restarts within 5 cycles then timeout
group programs

# Check services
check system localhost
if loadavg (1min) > 4 then alert
if loadavg (5min) > 2 then alert
if memory usage > 75% then alert
if cpu usage (user) > 70% then alert
if cpu usage (system) > 80% then alert
if cpu usage (wait) > 20% then alert

Set Monit to start automagically. Open the file /etc/default/monit and change the startup value to 1. You can now start monit with the following command.
```
sudo /etc/init.d/monit start
```

If you want to be able to access Monit's web based interface remotely then check out the Ubuntu Geek tutorial for more information. I am not enabling this ability in my kiosk at present.

Monitoring FireFox performance

By using Monit we are able to get good alerts regarding the overall health of our Kiosk. But Monit doesn't tell us is how our Kiosk client (Firefox) is behaving. If Firefox starts to eat up a percentage of your kiosk's available memory or CPU power you should be notified early.

I myself am not that great at building BASH scripts so I opted to create a PHP script which tests a few conditions and sends an email if Firefox isn't running or is using too many resources. This script can be run as a cron job every few minutes. My PHP script requires the open source class PHPMailer which makes sending email from PHP a snap.

Here is my php script.

 /**
* This script gets the CPU and MEM usage of Firefox
*/
$cpu = 0;
$mem = 0;
$failed = false;

// Get the PID of firefox
$pid = exec('pidof firefox-bin');

// If firefox is running get memory
if ( $pid )
{
$status_str = exec('ps aux | grep "'. $pid .'" | grep -v grep');
$status = explode( ' ', $status_str );
// Strip blanks
foreach( $status as $k=>$v )
{
  if ( trim($v) == '' ) unset($status[$k]);
}
$status = array_values($status);

$cpu = $status[2];
$mem = $status[3];

if ( $cpu >= 60 || $mem >= 60 )
{
   $failed = true;
   $message = "Firefox is using $cpu% of CPU and $mem% of MEM";
}

} else {

// Firefox is not running
$failed = true;
$message = "Firefox is NOT running";

}

if ( $failed )
{
$body = date('l jS \of F Y h:i:s A',time() )."\n\n";
$body .= $message;

// Create and Send Email
require_once( "/class/phpmailer/class.phpmailer.php");

$mail = new PHPMailer();
$mail->From     = ' firefox@mykiosk ';
$mail->FromName = " Firefox Status ";
$mail->Host     = 'mail.shawcable.com';
$mail->Mailer   = "smtp";

$mail->Subject = "Firefox Issue on ArtTouch";
$mail->AddAddress(" someone@domain.com ");

$mail->IsHtml(0);
$mail->Body    = $body;

// LOG RESULTS
if(! $mail->Send() ) {
   error_log("There was an error ending Firefox Performance Alert " . $mail->ErrorInfo );
}
}

If anyone wants to turn this into a bash script instead of PHP and share it that would be great.

Accessing Ubuntu Gnome Applications from Mac OSX without using a Remote Desktop

2008-05-07T10:49:00.000-07:00

99% of the work I do is done on an Ubuntu server but I'm not always using an Ubuntu desktop. Recently I just bought myself a nice 24" iMac to use as my main workstation. Most of the time when I need to do something on the Ubuntu server I just open a terminal use ssh. However sometimes I find this approach a little cumbersome. When making large edits to config files on the server I find using a terminal based text editor to be a pain in the ass. Lucky for me there are a few ways to remotely access an Ubuntu desktop.

The most common approach is to use a VNC client. For Mac OSX there is a client called Chicken which seems to be the most popular. This approach is easy to set up but for me I found it to be dreadfully slow and requires that the user is already logged onto the server.

Using X11 to access Gnome Applications on a Remote Ubuntu Server

The process which I've found to suit my needs to a tea, is using the X11 utility which comes with Leopard and can be easily installed in Tiger or Panther. Here is an example of how to log into a remote Ubuntu server and use gEdit to modify a text file. It works really fast and doesn't require a complete remote desktop type solution.

Start up an X11 terminal. You can find it at Applications > Utilities > X11
Use SSH to log into the remote Ubuntu machine using the -Y option
```
ssh -Y user@192.168.1.3
```
Use a terminal command to open a file in gEdit
```
sudo gedit /etc/php5/apache2/php.ini
```
Make changes to the file and close gEdit using the menu File > Quit

UPDATE:
I can confirm that at least with Leopard you don't need to start by opening an X11 terminal. You can log into the remote server using your default OSX Terminal as long as you use the Y option OSX will automatically start x11 when you try and launch a Gnome application.

Nice!

Integrating Grand Theft Auto IV with PHP and Flex Applications

2008-05-07T08:32:00.000-07:00

It can't be done. I've tried.

I haven't posted any good tips or code snippets in the past week as I've been a little focused on opening up Manhattan in GTA. Managing priorities has never really been my problem.

Getting a performance boost from MySQL

2008-04-25T13:07:00.000-07:00

I have to admit I am no database guru but I do know how to organize my information into a decent set of tables. Every table has a primary key and every field is just large enough and the right type for the data it needs to hold. In general my databases always perform well (enough) and I have little issue.

Then while reading up on how to properly configure replication with MySQL I stumbled upon some information on Indexes and I realized that I wasn't using my database as best I could.

If you asked me a week ago what an 'Index' was in relation to a MySQL table I would have told you it was the 'primary key'. Which is only partially true. While the primary key is automatically used as an Index for a table it doesn't have to be the only Index for the table.

What is an Index

An Index is basically a method MySQL (and other databases) use to organize a table to make it easier to search. For example, because the primary key for any table is indexed (and unique) when you search the table for a record matching a primary key value, the database knows it only needs to find 1 matching record. If there was no primary key the database doesn't know how many possible matches it needs to find so it will have to look at every single record to try and find all possible matches.

Knowing this, if you create Indexes for your table on all fields which are frequently searched or are used in Join statements you'll help your database find records more easily.

An Example

I typically use a lot of joins when I query the database. Let's look at how one of these join queries perform without any Indexing ( apart from the default indexing of my primary keys ).

In my database there is a table called 'artist' which contains the names, biography and details on different artists. The artist table has a primary key field call artistid. In the same database there is another table called artwork which contains details on individual pieces of art. The artwork table has a primary key field called artid, but it also contains its own artistid field. The artist and artwork tables have a one-to-many relationship, meaning that a single artist can have many works of art.

Using this database design, you can load a complete listing of works of art by a single artist with the following query.

SELECT artwork.*, artist.* FROM artwork
 LEFT JOIN artist ON artwork.artistid=artist.artistid WHERE artwork.artistid=46;

This query will work just fine. However if we want to gain some insight into how much information MySQL needs to process to perform this query we can add the EXPLAIN declaration to the front of the query.

EXPLAIN SELECT artwork.*, artist.* FROM artwork
 LEFT JOIN artist ON artwork.artistid=artist.artistid WHERE artwork.artistid=46;

When we run this query at the command prompt MySQL gives the following response.

+----+-------------+---------+-------+---------------+----------+---------+-------+------+-------------+
| id | select_type | table   | type  | possible_keys | key      | key_len | ref   | rows | Extra       |
+----+-------------+---------+-------+---------------+----------+---------+-------+------+-------------+
|  1 | SIMPLE      | artwork | ALL   | NULL          | NULL     | NULL    | NULL  | 3106 | Using where |
|  1 | SIMPLE      | artist  | const | artistid      | artistid | 4       | const |    1 |             |
+----+-------------+---------+-------+---------------+----------+---------+-------+------+-------------+

This tells us that when looking up information from the artist table the database was able to use the primary key index and looked at a total of 1 rows in the table in order to find the information it needed. That seems pretty efficient. However when looking in the artwork table the database had do a full table scan and looked at 3106 rows to find matching records.

Let's see what happens when we add an Index on artistid to the artwork table.

ALTER TABLE artwork ADD INDEX( artistid );

Now when we run the same EXPLAIN query we get the following details from MySQL

+----+-------------+---------+-------+---------------+----------+---------+-------+------+-------------+
| id | select_type | table   | type  | possible_keys | key      | key_len | ref   | rows | Extra       |
+----+-------------+---------+-------+---------------+----------+---------+-------+------+-------------+
|  1 | SIMPLE      | artwork | ref   | artistid      | artistid | 5       | const |    4 | Using where |
|  1 | SIMPLE      | artist  | const | artistid      | artistid | 4       | const |    1 |             |
+----+-------------+---------+-------+---------------+----------+---------+-------+------+-------------+

Now doesn't that look much more efficient. This time because the database is keeping an Index on the artistid field in both tables. It only needed to look at 4 rows from the artwork table to find the matching results.

I did some additional performance testing to see how much of a boost adding this one extra Index provided during peak times of database use. Prior to the indexing the query on average took 0.06 seconds, after the indexing it took 0.00. That's just on one tiny little query on a database that has only 3000 records. If you start adding extra indexes to all the tables in your database you should notice a nice boost in speed and performance.

Flex Tip: Publicly Accessible Private Variables in a Flex Class Or Another Reason to use Getters and Setters

2008-04-19T07:59:00.001-07:00

I've really fallen in love with using Getters and Setters for requesting and updating variable values in my flex classes. The most obvious reason for using Getters and Setters is having the ability to run some logic each time the value of a variable is updated or requested.

Another elegant reason to use Getters and Setters which I've just stumbled upon is the ability to have a variable which is bindable and can be accessed publicly but can only be modified privately. I'll let you come up with your own reasons why this is useful. For me I wanted a custom component to be responsible for managing it's own state but needed the ability for other components to determine it's current state.

Here's an example of how you might be used to working with variables. You have one variable which can be accessed or updated publicly and another which is just for internal use.

// a publicly accessible variable with binding
[Bindable] public var currentState:String;
// a private variable
private var internalState:String;

// You could use a private function to update both variables.
private function updateCurrentState(value:String):void
{
  this.currentState = value;
  this.internalState = value;
}

The above code would work to meet my requirements but it's an obviously flawed and confusing approach. However without using Getters or Setters it would be the easiest way to meet the requirements.

Here is how you can use Setters and Getters which let you use one variable that can be accessed publicly but only updated internally. Just use a public scope declaration on the get function and a private scope declaration on the set function. Easy and elegant.

private var _currentState:String;

[Bindable] public function get currentState():String
{
  return this._currentState;
}
private function set currentState(value:String):void
{
  this._currentState = value;
}

PHP explode() function in Actionscript for Flex

2008-04-17T12:40:00.000-07:00

If you're a long time PHP programmer who has made the leap to building Flex based RIA applications in Flex you are probably asking yourself from time to time "how do I do a xxxxx function in actionscript". Well if you were recently wondering this about the PHP explode() function, here's your answer.

public function explode( delimiter:String, str:String ):Array
{
 return str.split( delimiter );
}

warning: unable to bind to property 'XX' on class 'Object' (class is not an IEventDispatcher)

2008-04-17T11:15:00.000-07:00

When working with data pulled in from an HTTPService in Flex you may find that at run time your application spits out a bunch of warnings that it is unable to bind to a property.

If you want to prevent these warnings from occuring you should process your the data for your in actionscript instead of MXML.

Change this ...

<mx:Label text="{myresults.dynamiclabel}"/>

To this ... ( calling the function init() with the creationComplete event )

<mx:Script>
[Bindable] private var dynamiclabel:String;
private function init():void
{
 this.dynamiclabel = myresults.dynamiclabel;
}
</mx:Script>
<mx:Label text="{this.dynamiclabel}"/>

I know this approach requires a little bit more code and the first approach works, but this way it doesn't result in any warnings. I'll make the assumption that no run-time warnings means more compliant code.

Another approach to solving the problem is by wrapping Arrays in ArrayCollection and Objects in ObjectProxy wrappers. I got the following example from here.

function resultHandler(result:Array)
{
for(var i:String in result)
  {result[i] = new ObjectProxy(result[i]);}
targetArrayCollection = new ArrayCollection(result);
}

What about using ItemRenderer(s)?

If you are combining the use of an ItemRenderer and data from an HTTPService in your application you may find that neither of the above solutions fully work. What you really need is a modification of the first solution. Collecting your data in response to the creationComplete event will only collect data when the itemRenderer is first created. The event is not called when dynamically change the dataProvider. An approach to solving this scenario is the create a ChangeWatcher in the ItemRenderer to respond to changes to the data property of said ItemRenderer.

<mx:Script>
import mx.binding.utils.ChangeWatcher;
import mx.events.PropertyChangeEvent;

private var dataWatcher:ChangeWatcher;

[Bindable] private var dynamiclabel:String;

// ** Call this function from creationComplete event **
private function init():void
{
   this.dataWatcher = ChangeWatcher.watch( this, 'data', dataChangeHandler );
   this.dataChangeHandler(); 
}

private function dataChangeHandler(event:Event=null):void
{
   this.dynamiclabel = data.dynamiclabel;
}
</mx:Script>
<mx:Label text="{this.dynamiclabel}"/>

Upgrading to FlexBuilder Linux Alpha 3 on Ubuntu 7.10 after Flexbuilder Alpha 2 expires

2008-04-16T12:12:00.001-07:00

This post is probably a month overdue but I've been working on a Mac OSX workstation for the last month ( my Dad has a nice new Mac so while he was on vacation I used his computer ). Anyway, my dad came back so I moved back to my trusty Ubuntu workstation at my own desk. To my surprise the Alpha version of the Adobe Flex Builder Linux had expired. I have licensed copies for Flex Builder for both Windows and Mac but there is no release for Linux yet so I'm left using alpha versions.

The good news is that if your copy of Flex Builder Alpha 2 has expired (which I think everyone's did on March 15th) all you need to do is uninstall Flex Builder Alpha 2 and install Flex Builder Alpha 3. There are some new requirements however which makes this process a little more complicated if you're running Ubuntu. Mainly, Flex Builder Alpha 3 requires Eclipse 3.3 and the version of Eclipse which can be installed from Ubuntu repository is only version 3.2

So here are the steps you need to follow if you want to get Flex Builder Alpha 3 installed on Ubuntu after Flex Builder Alpha 2 has expired. Instead of writing a full howto I'm going to link you to the different blogs/pages which have the instructions you'll need.

(Optional) If you haven't already upgraded to Ubuntu 7.10 now would be a good time. I was running Fiesty Fawn (which is 7.04 I think). View this link to get that done.
Next you need to install Eclipse 3.3 on your system. Follow the instructions at this link but be insure to install 3.3 to a different location than 3.2. After you have 3.3 running you can copy the contents to the eclipse folder to the location where you have 3.2 installed. Mine was located at ~/.eclipse
Before installing Flex Builder Alpha 3 you'll need to uninstall Flex Builder Alpha 2. To do this you need to run the script Uninstall_Adobe_Flex_Builder_Linux. This will be located in the directory Uninstall Adobe_Flex_Builder_Linux which in turn exists in the Flex Builder Linux installation directory. For full details see the Uninstall section of the release notes for alpha 3.
Download Flex Builder Alpha 3
Open your terminal and run the downloaded .bin file. For me I typed the following.
```
cd /home/ryan/Desktop
sh flexbuilder_linux_install_a3_033108.bin
```
Follow the onscreen instructions.
When finished you should be able to fire up Alpha 3. You may find that you get an error when opening older project files saying that the file is out of sync. Just right-click on the project and select the 'Refresh' option.
If you need to add a launcher for the Flex Builder Alpha 3 program, the default location of the command to launch the program is
```
/home/ryan/Adobe_Flex_Builder_Linux/Adobe_Flex_builder.sh
```
Assuming of course that you're user name is 'ryan' like mine is.

Setting up a PHP IDE for Ubuntu 7.10

2008-04-13T19:07:00.000-07:00

I'm just posting this so that I have a record of it. I found myself building a new workstation at home and found this info scattered across several blogs when I looked for a refresher on setting up everything I normally use.

First step. Install Eclipse.

sudo apt-get install eclipse
sudo apt-get install sun-java6-jre
sudo update-java-alternatives -s java-6-sun

Next install PHPEclipse. you can go to Help > Software Updates > Find and Install and install new features located at the following URL

http://phpeclipse.sourceforge.net/update/releases

Finally. Install the RSE (remote system explorer) Plug In so you can easily access a remote Unix server and edit files willy-nilly. Note you don't need to install everything in the TM project.

http://download.eclipse.org/dsdp/tm/updates/

Creating a Touch Screen Kiosk using Firefox, Ubuntu and Blackbox

2008-04-09T11:15:00.001-07:00

Several of the components and posts on this web site have revolved around a business project I've been working on which involves creating a touch screen kiosk for use in a public space. I thought it might be beneficial (at least from my own documenting needs) to provide a post covering the overall process of getting a secure touch screen system up running.

The easiest way to build a kiosk application is to customize a web page to serve as the kiosk interface. Launch the web page in a browser and set the browser to run in full screen mode and voila, instant kiosk. To turn it into a touch screen kiosk all you need to do is buy an LCD touch screen monitor and your all set.

This basic solution might work fine if you're always standing next to the computer and can enable full screen mode every time it reboots and also stop anyone from mucking around with your computer should the browser crash and they get access to the desktop.

Setting up a kiosk which can run in a public space and have reasonable enough security to prevent someone from mucking around with it should the browser crash or computer crash takes a little more thought.

I've addressed the overall solution in two parts.

1) The server/host computer
2) The browser

1) The Server / Host Computer

The computer used to host a touch screen application needs some thoughtful consideration. You want something that will offer good reliable performance and also prevent anyone who might be feeling a little malicious from causing the computer or your application any harm. My touch screen system does NOT have a keyboard attached to it which certainly helps in providing a certain level of security but I still need to take steps to make sure the user cannot get access to the desktop, general file system or any application other than the Firefox browser.

For my solution I decided to run Ubuntu 7.10 and use Blackbox as the default desktop environment. Ubuntu allows me to run an apache http server as well as mysql locally. This keeps the application running very fast, provides me with dynamic data and requires no internet connection. Your kiosk application could be simple straight HTML running locally or running off a remote web server whatever suits your needs. Using Ubuntu (or really any flavor of linux you're comfortable with) keeps your kiosk highly customizable.

Using the Blackbox windows manager instead of the default Gnome or KDE desktop environment allows me to lockout the user from accessing anything other than Firefox and keeps your kiosk as a light weight, fast computer with a single focus.

How to set up the server/host computer

Download and install Ubuntu 7.10
A default install is fine. The main user you will create during install will be considered a super user. You'll later create a user account specifically for accessing the touch screen application. Click here to get Ubuntu
Install Apache, PHP5 and MySQL (Optional)
My specific application uses dynamic data and requires both Apache and PHP. Using an Ubuntu computer makes it easy to run these services locally and means my computer doesn't require a dedicated internet connection. Although having one makes remote administration and updates easier. To install these on the computer just reference the UbuntuGuide.org wiki
Create a limited user account
While your touch screen application is running you'll want to have a limited user account logged into the computer.

To create this account log into Ubuntu using the account you created during install and select :

System > Administration > Users and Groups

From the User settings window select:

Add User

From the New User Account window fill in the Basic Settings for your user. For the purpose of this example we will use the username: touchuser. After you've provided a user name and and password select the User Privileges tab. Unselect all options which are not a requirement of your touch screen application. For my application I blocked access to all external hard drives, cdroms, floppies and log monitors.
Install Blackbox Window Manager
Blackbox is a fast, lightweight and minimal windows manager for the X Window System. You can learn more about it here. Blackbox will be setup as the default desktop for our host computer. I use Blackbox because it helps prevent the touch screen user from having access to any applications unless they are specifically enabled via Blackbox.

To install blackbox open up the terminal and type the following command.
```
sudo apt-get install blackbox blackbox-themes
```
Next we need to create a .blackboxrc file and a .blackbox directory. These will be used to define our configuration settings for our desktop and define what applications touchuser has access to. Note: we are going to do this in the home directory of the touchuser account not the account we are logged in as. After we create the file and directory we set permissions on them.
```
sudo mkdir /home/touchuser/.blackbox
sudo touch /home/touchuser/.blackboxrc
sudo chown touchuser /home/touchuser/.blackbox
sudo chown touchuser /home/touchuser/.blackboxrc
sudo chgrp touchuser /home/touchuser/.blackbox
sudo chgrp touchuser /home/touchuser/.blackboxrc
```
Define the .blackboxrc File
Using your favorite text editor add the following definitions to the .blackboxrc file. Note the reference to /home/touchuser/.blackbox/menu. This file will be created in the next step.

session.styleFile: /usr/share/blackbox/styles/Gray
session.menuFile: /home/touchuser/.blackbox/menu
session.screen0.workspaces: 1
session.screen0.workspaceNames: My Touch Screen
session.fullMaximization: True

NOTE:

Create the Blackbox menu file
By default the Blackbox desktop provides no icons. To launch a program the user needs to right-click on the desktop to see a menu of available applications. We want to provide our own menu settings so that the only application available to our user is Firefox. This is really only of limited use as right-clicking on a touch screen is impossible as far as I know, but in case someone figures out how to do it we don't want them to have access to anything other than the browser.

Enter the following commands into the terminal to create the menu file and set appropriate permissions.
```
sudo touch /home/touchuser/.blackbox/menu
sudo chgrp touchuser /home/touchuser/.blackbox/menu
sudo chown touchuser /home/touchuser/.blackbox/menu
```
To limit our menu to only provide access to Firefox open up the menu file and add the following.
```
[begin] (ArtTouch)
[exec] (firefox) {firefox}
[end]
```
For more details on configuring blackbox and creating menus see the blackbox wiki
Install iDesk
Blackbox doesn't by default support desktop icons which is okay since we are building a minimal system. Well what if the Firefox browser crashes and the touch screen user is left starting at an empty desktop with no ability to right-click and relaunch the browser. To provide a solution to this problem we are going to install iDesk which adds icon support to minimal window managers such as Blackbox.

To install iDesk open a terminal and provide the following command
```
sudo apt-get install idesk
```
Once iDesk is installed we need to create an .ideskrc file for configuration settings and create an .idesktop folder where we can define our icons.
```
sudo touch /home/touchuser/.ideskrc
sudo mkdir /home/touchuser/.idesktop
sudo chgrp touchuser /home/touchuser/.ideskrc
sudo chgrp touchuser /home/touchuser/.idesktop
sudo chown touchuser /home/touchuser/.ideskrc
sudo chown touchuser /home/touchuser/.idesktop
```
Next open up the .ideskrc file and add the following
```
table Config
Background.Color: #C2CCFF
end
table Actions
Execute[0]: left singleClk
end
```
This is a very minimal use of iDesk configuration options for more see the iDesk Usage Wiki
Create an Icon and define icon commands
Next we need to create an icon for our desktop. You could use the standard Firefox icon but you're probably best to create a PNG specifically for your touch screen application. Create a PNG file (for example touchicon.png) and stick it in the .idesktop directory. To add the icon to the desktop we need to create a file with a .lnk extension and place it in the .desktop directory also.
```
sudo touch /home/touchuser/.idesktop/touchicon.lnk
sudo chown touchuser /home/touchuser/.idesktop/touchicon.lnk
sudo chgrp touchuser /home/touchuser/.idesktop/touchicon.lnk
```
Open the touchicon.lnk file and add the following. Adjust 'caption', 'tooltip', 'width', 'height' and 'x/y' coordinates to suit your needs.
```
table Icon
Caption: Touch Application
ToolTip.Caption: Touch Me To Launch
Command: firefox
Icon: /home/touchuser/.idesktop/touchicon.png
Width: 400
Height: 275
X: 100
Y: 100
end
```
Create Blackbox startup script
Now that we have a minimal desktop and we also have an icon for our desktop we need to make sure that iDesk is automatically run when Blackbox runs (by default it doesn't). To do this we are going to create a startup script for Blackbox.

Create a file called .bbstartup.sh in your touchuser's home directory
```
sudo touch /home/touchuser/.bbstartup.sh
sudo chgrp touchuser /home/touchuser/.bbstartup.sh
sudo chown touchuser /home/touchuser/.bbstartup.sh
sudo chmod x+ /home/touchuser/.bbstartup.sh
```
Add the following to the .bbstartup.sh file
```
#!/bin/sh
idesk &
exec blackbox
```
Now we need to change the path of exec blackbox in /usr/share/xsessions/blackbox.desktop. Start by making a backup
```
sudo cp /usr/share/xsessions/blackbox.desktop /usr/share/xsessions/blackbox.desktop_backup
```
Edit /usr/share/xsessions/blackbox.desktop and make the following changes to Exec and TryExec definitions
```
[Desktop Entry]
Encoding=UTF-8
Name=BlackBox
Comment=Highly configurable and low resource X11 Window manager
Exec=/home/touchuser/.bbstartup.sh
Terminal=False
TryExec=/home/touchuser/.bbstartup.sh
Type=Application
```
Set Auto-login and define Blackbox as default window manager
The final step in configuring our server/host computer is to set up Ubuntu to automatically log into our touchuser profile and to use Blackbox as the default windows manager. This ensures that if the computer crashes or reboots that it immediately goes into kiosk mode. (note we'll further improve this by making the browser automatically launch later).

Open the Login Window Preferences by selecting:

System > Administration > Login Window

Under the General tab select 'Blackbox' for default session.
Under the Security tab select 'Enable automatic login' and select the user 'touchuser'

Hopefully after all that you should now have a basic set up to run a kiosk. When the computer boots it should load directly to a Blackbox desktop that allows the user to launch Firefox and only Firefox. In the next step of the process we are going to modify a few settings in Firefox to make sure it loads our touch screen application as it's homepage and automatically launches in full screen mode when the computer boots up.

NOTE: If the computer is running in kiosk mode and you want to be able to login as your super user and get back to a fully functional Gnome desktop all you need to do is plug in a keyboard and press CTRL + ALT + BACKSPACE. This will kill the Blackbox session and bring you to the Ubuntu login screen.

2) The Browser

Now that we have our host computer set up and running we'll want to make a few small changes to the preferences of our Firefox browser so that it performs well as a kiosk client.

Set the Home Page
This should be pretty obvious. When the browser launches we want it to automatically load our Kiosk application. For my solution I have the Kiosk application running locally as a Flex/PHP application. Your kiosk doesn't have to be Flex, it could be a Flash or simple HTML web page and it could be running remotely or locally. Whatever the case may be you'll want to set the URL location of your application as the homepage for Firefox.
Disabling session restore
When Firefox crashes or the computer is shutdown before closing the browser, Firefox will by default ask if you want to restore your previous session or start a new one the next time it launches. This is kind of a pointless feature for the kiosk as you'll likely always want it to start a new session. You can disable this feature by logging into your kiosk as 'touchuser' launching Firefox and entering 'about:config' in address bar.

Find the preference settings for browser.sessionstore.resume_from_crash and browser.sessionstore.resume_session_once and set their values to false.
Getting the browser to automatically launch in fullscreen mode.
When the browser is launched in order to provide a true kiosk type environment we want it to load in full screen mode giving the user no access to the navigation bar and locked out of most shortcuts. The easiest way to do this is to install one of the many 'Full Screen' extensions available for Firefox.

The one I recommend is R-Kiosk. For the pure purpose of running a web based Kiosk it does a very good job. While logged in as 'touchuser' Visit this link in Firefox and click the 'Add To Firefox' button.

NOTE: After this component is added to Firefox you'll be unable to make any preference or configuration changes to Firefox unless you launch it in safe mode. For information on how to run Firefox in safe mode, visit this link.
Setting the browser to automatically launch after boot
When our kiosk system is booted it will automatically login as with the touchuser profile and load our Blackbox desktop. Now we also want Firefox to automatically launch so that after the system boots the user is presented with our Kiosk application running in all it's full screen glory.

This is very simple to accomplish by adding one line to the Blackbox startup script we created in step 9 when setting up the host computer. You'll need to log into Ubuntu as the user you defined during install for this step.

Open /user/touchuser/.bbstartup and add the following line
```
#!/bin/sh
idesk &
/usr/bin/firefox &
exec blackbox
```

If everything has gone as I hope, you should have a fully functioning kiosk system. The only thing left to do is buy yourself a fancy touchscreen LCD monitor and plug it in.

References for this setup can be found at the following links.
HOWTO: A Blackbox Guide
Blackbox Wiki
iDesk Wiki

Customizing the Flex ScrollBar with Skins

2008-04-05T13:41:00.000-07:00

One of the things I love about Flex is the smooth and clean look/feel of the default components. With just a little CSS the default look and feel can be customized to fit most web site designs. But what do you do when your requirements are very different from what you can accomplish with CSS? With Flex it's possible to build custom skins and give you're application any look and feel you desire.

While the process to complete this isn't overly complex it probably helps if you come from a Flash background and also have some strong design skills.

There are two ways to build skins. 1) Use images and 2) Use actionscript classes. For my example I have combined both approaches to customize the look/feel of the default Flex scrollbar.

Summary of the solution

- Create a PNG image to use as the background for the scrollbar track.
- Create a PNG image to use as the icon for the scrollbar handle.
- Create an ActionScript class to draw a skin for the scrollbar box.
- Create a CSS Style for the scrollbar which references the new skins
- Apply the StyleName to our scrollbar

The CSS Style

.customScroll
{
  /* remove the arrow skins by referencing a null class */
  upArrowSkin: ClassReference(null);
  downArrowSkin: ClassReference(null);

  /* Embed an image to use as skin for scroll bar track and scroll bar thumbIcon */
  trackSkin: Embed(source="skins/CustomSkinTrack.png");
  thumbIcon: Embed(source="skins/CustomSkinIcon.png");

  /* Reference action script skin for various states of the scroll bar thumb */
  thumbUpSkin: ClassReference('theme.skins.CustomSkinThumb');
  thumbOverSkin: ClassReference('theme.skins.CustomSkinThumb');
  thumbDownSkin: ClassReference('theme.skins.CustomSkinThumb');
}

Click here to view the demo.
Click here to view the source code.

Simple PHP Captcha

2008-04-05T11:40:00.000-07:00

One of the contact forms on a business web site I run has been getting a lot of spam attempts submitted to it. These attempts don't go anywhere but it's becoming a bit of a hassle anyway. Time to add some sort of Captcha to the form.

What is Captcha? (from Wikipedia) A Captcha is a type of challenge-response test used in computing to determine that the user is not run by a computer. The process involves one computer (a server) asking a user to complete a simple test which the computer is able to generate and grade. Because other computers are unable to solve the CAPTCHA, any user entering a correct solution is presumed to be human. A common type of CAPTCHA requires that the user type the letters of a distorted image, sometimes with the addition of an obscured sequence of letters or digits that appears on the screen.

The term "CAPTCHA" was coined in 2000 by Luis von Ahn, Manuel Blum, Nicholas J. Hopper (all of Carnegie Mellon University), and John Langford (then of IBM). It is a contrived acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart", trademarked by Carnegie Mellon University.

Example with code.

Here is a simple PHP script which will generates a Captcha and logs the response in a _SESSION variable. It requires GD support on the server. The script uses a randomly selected background image (img1.jpg, img2.jpg, img3.jpg or img4.jpg) and adds the pass key over top of background.

PHP Captcha Script.

// Start sessions
session_start();

// Create a random string
$fullhash = md5(microtime());

// Select the first 5 characters of string to use as pass code
$captcha = substr($fullhash,0,5);

// Select random image filename for use as background
$imgrand = rand(1,4);
$imgfile = 'img'.$imgrand.'.jpg';

// Create new image using the background image as a template
$image =imagecreatefromjpeg($imgfile);

// Set colors to use for Captcha text
$txtcolor = imagecolorallocate($image, 255, 255, 255);
$shadowcolor = imagecolorallocate($image, 0, 0, 0);

// Layer Captcha text over image
imagestring($image, 6, 21, 11, $captcha, $shadowcolor);
imagestring($image, 5, 20, 10, $captcha, $txtcolor);

// Add pass code to _SESSION variable
$_SESSION['captchakey'] = $captcha;

// Adjust header and output image
header("Content-type: image/jpeg");
imagejpeg($image);

Usage Example

Inside a form add the following image tag along with an input field for the user to enter the pass code into. When validating the form check the user submitted info against the _SESSION variable 'captchakey'

<img src="captcha.php">

Click here to see a demo.
Click here to copy my background images.

Link Fest

2008-04-03T17:02:00.001-07:00

I've been on vacation for the last couple of weeks so there hasn't been any note worthy things to post. So here is a collection of good links I've found recently.

The Flex Drop Shadow Explained

Re CAPTCHA

Backup Gmail on Linux

Create Your Own Cross Platform Backup Server

Actionscript PDF Library

Spliting Flex Application Into Modules

Flex SuperLabel Component : An Easy How To on Extending Flex Components with Custom Events and Effects

2008-03-17T12:15:00.000-07:00

Since I switched from developing XUL/Javascript based RIAs using the Mozilla platform to programming in Flex and Actionscript one of the things I have been most impressed with is how easy it is to extend existing components and customize them to fit my needs perfectly.

Recently (as in 10 minutes ago) I was working on laying out the interface for a new application which displays some dynamically changing content. One part of the interface which was dynamically changing was the page title which I was displaying as a Label component. I thought it would be nice to add a small effect every time the text property for Label changed. Looking at the language reference documentation for the Label component I noticed there was no built in event or effect which could be triggered when the text property is updated.

No problem, I thought. I'll just add that in. So with less than 25 lines of code and in less time than it is taking to type this post I was done.

Here is a summary of the steps I took to create my new SuperLabel Component.

Created a new Actionscript Class
Added Metatags for the new Event and new Effect
Created a function which overrides the text property setter function
done.

Here is the source code for the new component.

package claire.com
{
 import mx.controls.Label;  
 import flash.events.Event; 

 [Event(name="textChange", type="flash.events.Event")]
 [Effect(name="textChangeEffect", event="textChange")]

 public class SuperLabel extends Label
 {
   public function SuperLabel()
   {
      super();
   }
   public override function set text(value:String):void
   {
     if ( value != this.text )
     {
        this.dispatchEvent( new Event('textChange') );
     }
     super.text = value;
   }
 }
}

There you go. It really is that easy.

Just to finish off here is how you use the new component in MXML.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:com="claire.com.*">
<mx:WipeRight id="myEffect" duration="750" />
<com:SuperLabel textChangeEffect="{myEffect}"/>
</Application>

Flex Tip: Positioning components in Adobe Flex with no default gaps, padding or margins

2008-03-13T12:16:00.000-07:00

If you're new to Flex and you've been banging your head against a wall trying to get components to position themselves properly then hopefully this tip will help.

By default Flex adds about a 10px margin around most components. For example if you're trying to create a row of buttons that are all butted right up against each other with no space in between the following code won't cut it.

<!-- these buttons will all have about a 10px gap in between them -->
<mx:HBox>
<mx:Button label='Button 1'/>
<mx:Button label='Button 1'/>
<mx:Button label='Button 1'/>
</mx:Hbox>

To make that gap go away you need to add horizontalGap="0" to the HBox tag as in the following example

<!-- these buttons will have no gap in between them -->
<mx:HBox horizontalGap="0">
<mx:Button label='Button 1'/>
<mx:Button label='Button 1'/>
<mx:Button label='Button 1'/>
</mx:Hbox>

So there you go. horizontalGap="0" and like wise verticalGap="0" is what you're looking for if you can't figure out why your components have a default margin.

Flex Tip: Adding custom events to Actionscript components

2008-03-12T09:16:00.000-07:00

One of the key features of building a Flex application with custom components is being able to define and dispatch custom events. In order to do this you need to add some metadata to your custom component.

If you're creating an actionscript class for your custom component you declare the metadata before defining your class as in the following example.

package claire.libs
{
  ....   
  [Event(name="serviceError", type="flash.events.Event")]
  public class ClaireService extends HTTPService
  {
    .....
  }
}

You will now be able to add an event listener in MXML with the following.

<mycom:ClaireService id="myService" serviceError="handlerFunction(event)"/>

While the above example works it is important to note that the following example will NOT work. Notice the ";" at the end of the Event metatag. Took me about 2 hours to figure this out so hopefully this post will save someone else some time.

package claire.libs
{
  ....   
  [Event(name="serviceError", type="flash.events.Event")];
  public class ClaireService extends HTTPService
  {
    .....
  }
}

Control Access to Flex Components with Group Based Permissions

2008-03-07T14:21:00.000-08:00

When building a large application which has many different views it's likely that you'll want to grant some users more access than others. You might have some components that all guests are permitted to view and also have other components that only admin users are allowed to use.

A common way to accomplish this is to assign all users to different user groups and then control what user groups are allowed to view certain parts of your application.

The example I show here focuses only on controlling the 'visible' property of a component and therefore only addresses what interface elements the user is allowed to see. I plan to expand on this example in the future to also address the user's ability to access specific sets of data.

Permit and PermitCondition Classes

In order to have a central repository of permissions and information on the current user I created a singlton class called Permit and another class called PermitCondition. Using a singlton ensures that only one instance of the class will be created and can still be easily accessible anywhere in your application.

The Permit class keeps information on the current user and is responsible for creating instances of the PermitCondition class.

Each instance of PermitCondition defines a single permission requirement for a single component by declaring if a specific user group is allowed to view the component or is explicitly blocked from viewing the component. Components can have multiple PermitConditions allowing for more complex permissions.

Summary of Example Application

View the demo : View demo source

In my example application I define permissions for 3 sample components in the main MXML application file. I then use a LogIn component which sets the user's group memberships. Both the main MXML application and the LogIn component use the same singlton instance of the Permit class.

For the purpose of keeping this example simple my LogIn component manually sets users group permissions from a couple of simple functions. In a more complete application you would want your LogIn component to accept a username and password and define user groups after calling an HTTPService and likely querying a database.

Creating and Accessing the Permit Class

Use the following code to get access to the Permit singlton.

import claire.libs.Permit;
private var appPermit:Permit = Permit.getInstance();

Defining Component Permissions

Use the following code to define permissions for individual components

appPermit.applyPermit('adminaccess',Permit.ALLOW,'admin',box3);
appPermit.applyPermit('adminaccess',Permit.BLOCK,'guest',box3);

The applyPermit method accepts 4 properties

applyPermit( permitname:String, condition:String, group:String,component:UIComponent)

permitname : A unique identifier for the declared permit.
condition: Accepted values are Permit.ALLOW or Permit.BLOCK. Determines if the supplied group name is granted or blocked access to component.
group: Name of a user group checked in the condition.
component: a UIComponent which the permit is applied against.

Adding User Details to the Permit Class

Use the following code to add user details to the Permit class after successfully validating the user's username and password.

appPermit.loggedIn = true;
appPermit.addGroup('guest') // Adds user to group 'guest'

When a user is added to a group the Permit class will automatically check PermitConditions and update the visible property of components.

Sudoku Updated

2008-03-05T12:28:00.001-08:00

I've had a chance to add some nice features to my Sudoku game. User's can now save their games and return later to pick up where they left off. I've limited each user to 6 saved games and they must register a username/password first. Email is not required for registration because what would be the point.

This whole Sudoku game has basically been an exercise to learn about Flex development and see what it takes to build a full application. I have to say that I am very impressed with what I've been able to accomplish in a short period of time.

Anyway. If you like Sudoku I would appreciate any comments you might have on my game.

http://www.kerkness.ca/sudoku

Searching a complex ArrayCollection in Flex and how I hate the damn IViewCursor

2008-03-04T21:31:00.001-08:00

I'll preface this post as I do many by stating that I'm relatively new to Actionscript and Flex so I'm not really sure if the code I present here is a solution or a hack. In either case it works.

While building a 'Save Game' feature for my Sudoku game I was came across a situation where I needed to search an existing ArrayCollection for the ID of a previously saved game. I knew what the ID was but just needed to locate it's index position in the collection. While looking at the Flex documentation I noticed that the ArrayCollection component has a nice method called getItemIndex. However this wasn't going to be any use to me because getItemIndex only finds exact matches of an entire object and I needed to match only a single value. This lead me to look into the use of an IViewCursor.

While creating a cursor to access and manipulate and ArrayCollection seems like an intuitive concept trying to understand how to use it frankly makes my head spin. So instead I just wrote a simple function. If someone can tell me why using an IViewCursor is better or easier than the following function I would like to hear it ( and see an example ).

// returns the index position of object with matching usid value
private function usidSearch( usid:Number, coll:ArrayCollection ):Number
{
var o:Object;
for ( var i:Number = 0; i<coll.length; i++){
 o = coll.getItemAt(i);
 if( o.usid == usid) return i;
}
return -1;
}

Updated Flex PageList Component and Demo with Google JSON API

2008-03-04T09:19:00.000-08:00

I've had a chance to completely re-write my PageList component so it runs much smoother and provides easier more flexible use.

The PageList component let's a user horizontally page through a TileList. The component binds with a HTTPService to provide a continual flow of data.

Click here to view a demo of the component

Click here for full source code

Things to make note of:

Because the component dynamically adjusts it's own X position it needs to be the child of either an Application, Canvas or Panel.

The component at the moment has a single results handler which handles a JSON response from a Google API. To use this component you can easily add your own handler functions to handle data specific to your own application.

Google JSON API

The demo I've put together for this component makes use of a Google JSON API which is really handy and easy to access if your Flex project uses the Adobe Corelib library.

The Google JSON API can be accessed via the following URLs.

http://www.searchmash.com/results/images:[query]
http://www.searchmash.com/results/blogs:[query]
http://www.searchmash.com/results/video:[query]

The full url I used in the demo is

http://www.searchmash.com/results/images:Apple

In order to access the API remotely and not run into any Flex security issues I used a php proxy. Click here for details

Embedding fonts via CSS in Flex

2008-03-03T06:54:00.000-08:00

Just a handy little reference for embedding fonts via CSS in your Flex applications.

Label
{
embedFonts: true;
color: #FF0000;
fontFamily: YourFontFamily;
}

Display a time counter in flex

2008-03-01T20:50:00.000-08:00

For my Sudoku game I wanted to add a simple counter which shows how much time has passed since a user started their game. Should be simple enough, just create a Timer object and have it update a display every second. The problem I ran into was how to easily display the number of seconds passed as a readable time format (example HH:MM:SS). I searched high and low for any type of formatting function which would help but came up short and had to figure out something on my own.

What I came up with feels like a total hack and I'm certain there has to be a better way to solve this problem. Anyway, here is my code, it appears to work just fine but would appreciate it if anyone knows of a better solution.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
 // Create Timer object to fire every second with no end
 private var myTimer:Timer = new Timer(1000);
 
 private function init():void
 {
   // Add event listener for the time
   myTimer.addEventListener(TimerEvent.TIMER,clockTick);
   myTimer.start();
 }
 // function to update display
 private function clockTick(event:TimerEvent):void
 {
   var fullseconds:Number = Timer( event.currentTarget ).currentCount;
   var fullminutes:Number = Math.floor(fullseconds/60);
   var hours:Number = Math.floor(fullseconds/3600);
   var minutes:Number = ( hours > 1 ) ? Math.round((fullseconds-(hours*3600))/60) : Math.floor(fullseconds/60) ;
   var seconds:Number = ( fullseconds > 60 ) ? fullseconds-(fullminutes*60) : fullseconds;
   var hourstr:String = ( hours < 10 ) ? '0'+hours.toString() : hours.toString();
   var minstr:String = ( minutes < 10 ) ? '0'+minutes.toString() : minutes.toString();
   var secstr:String = ( seconds < 10 ) ? '0'+seconds.toString() : seconds.toString();
   if ( minstr == '60' ) minstr = '00';
   if ( secstr == '60' ) secstr = '00';
   myClock.text = hourstr+':'+minstr+':'+secstr;
 }
]]>
</mx:Script>
<mx:Label id="myClock" />
</mx:Application>

The one part which really bugs me about this is manually adding a '0' to numbers less than 10. If I was working in PHP this would be no problem but being a n00b with actionscript this is the best I could come up with in the hour I had to work on it.

Dynamically moving a Flex Component

2008-03-01T11:07:00.000-08:00

When it takes me more than 4 or 5 searches on google to find a solution to a problem then for me it's worth blogging about. I'm either going to help someone else in the same situation or i'm going to highlight my ineptness a finding solutions.

At any rate I was recently trying to figure out why when moving a component around my application it would snap right back to it's original x/y coordinates. Turns out you can only move a component when it's parent container is a Canvas, Application or Panel with it's layout property set to 'absolute'.

So there you go. Happy flexing.

Binding in Flex with Getters and Setters

2008-03-01T08:53:00.000-08:00

When building a component class and using the recommended method of providing access to properties with getter and setter functions you may find that you are unable to bind to these properties. It's actually rather trivial to enable binding but perhaps not overly obvious. All you need to do is add [Bindable] before the getter function.

 private var _myVar:String;

 [Bindable] public function get myVar():String
 {
   return this._myVar;
 }
 public function set myVar( value:String ):void
 {
   this._myVar = value;
 }

Flex PageList Component Adds Paging Support to TileList

2008-02-28T09:50:00.000-08:00

Using the Flex TileList component is a nice way to display a list of products. The one thing the component lacks is the ability to easily display multiple pages of content which is a typical design requirement of most web based stores or product catalgues. For this reason I extended the TileList component into a PageList component.

The PageList Component works very similar to the TileList but adds PREV/NEXT buttons to the bottom of the list and automatically calls a HTTPService to load it's data. When the User clicks 'next' to view more items the PageList component automatically fetches more records and appends them to the list. This allows the user to browse an entire catalogue of items with a very smooth and transparent process. Page count is calculated based on the viewable area and the width of list items.

UPDATE 2: I've completely re-written this class which works much better. The new PageList component has been published along with source code and demo. Click here for more details

Use a remote HTTPService in Flex with a PHP Proxy

2008-02-27T22:43:00.000-08:00

One way to get around the hassle of a common security error when trying to call a HTTPService running on a different domain than your Flex application is to use a simple and local PHP script as a proxy to call the HTTPService for you. Perhaps not a solution you would want to use if you need to load massive piles of data but in most cases it works just fine and takes seconds to set up.

proxy.php

$content = file_get_contents(str_replace(' ','%20',$_GET['url']));
if ($content !== false) {
   echo($content);
} else {
  // there was an error
}

HTTPService in MXML

<mx:HTTPService id="myService"
url="http://www.localdomain.com/proxy.php?url=http://www.remote.com/api"/>

Free Online Sudoku Game

2008-02-24T23:54:00.000-08:00

Sudoku Online is a simple Sudoku game built using Adobe Flex 3. Play hundreds of puzzles from 4 skill levels. Game supports full pencil marks.

Click here to play online or
Launch the game in a popup

I am working on adding 'Save' game features and a scoreboard. This is my first cut and would appreciate feed back in the comments.

UPDATE: The game has been updated and now allows users to save a game as long as they register a username/password. Each user is allowed to save 6 games.

PHP in_array() function in ActionScript for Flex

2008-02-21T13:10:00.001-08:00

Another common PHP function is in_array() used to determine if a value exsists in an array. Here is the function recreated in actionscript for flex.

public function in_array( needle:*, haystack:Array ):Boolean
{
   var itemIndex:int = haystack.indexOf( needle );
   return ( itemIndex < 0 ) ? false : true;
}

Flex On Screen Qwerty Keyboard Component

2008-02-20T12:30:00.000-08:00

NOTE: I've updated this component. To see the latest version click here.

One of the Flex applications I work on is a touch screen application primarily used to browse a product catalog. Because there is no keyboard physically attached to the touch screen display and it was necessary to have some input from users (primarily for signing up to a mailing list) I built a Qwerty keyboard component for flex.

The component displays a nearly full set of keys found on your standard Qwerty keyboard with a limited set of special characters. You can assign TextInput and TextArea controls to accept the output from the component and there is a handy method for changing focus to different input fields.

Click here to view the example application

Click here to view source

Basic Usage

<mx:Form width="100%">
<mx:FormItem label="Field 1" width="100%">
<mx:TextInput id="field1" focusIn="myQwertyKeypad.newFocus(field1)" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Field 2" width="100%">
<mx:TextInput id="field2" focusIn="myQwertyKeypad.newFocus(field2)" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Field 3" width="100%">
<mx:TextInput id="field3" focusIn="myQwertyKeypad.newFocus(field3)" width="100%"/>
</mx:FormItem>
</mx:Form>
<claire:Qwerty id="myQwertyKeypad" inputControl="{field1}" width="100%"/>

While probably a pointless component for most Flex Applications this component is very handy for touch screen input requirements.

Flex FocusManager and Cursor control

2008-02-20T12:26:00.001-08:00

Working on a component which needs to programatically set focus to a TextInput field and make sure that the cursor is placed at the end of current value. I found this possible by using both the Flex FocusManager and also the setSelection() method of TextInput. Figured the code snippit might be useful to other people so here it is.

//assuming myInputField is the id of a TextInput field
focusManager.setFocus(myInputField);
myInputField.setSelection(myInputField.length, myInputField.length);

AlertTimer Flex Component

2008-02-19T19:41:00.000-08:00

The Flex AlertTimer component displays a pop up alert window which automatically closes and displays a countdown timer to the user.

Click here to view an example
(right click application to view source)

The alert can be called from a 'show' method which accepts the following properties:

parent:DisplayObject = The component the alert displays over most likely the parent application
alertText:String = The message to display in the alert window
alertTitle:String = The title of the alert popup
modal:Boolean = If true the user will not be able to interact with the rest of the application until the alert closes

Example usage

var myAlert:AlertTimer = new AlertTimer();
myAlert.show(this, "my alert message", "my alert title", true);

You can further customize the AlertTimer by setting more properties.

var myAlert:AlertTimer = new AlertTimer();
myAlert.duration = 10;
myAlert.buttonText = "Click here to close now";
myAlert.alertWidth = 200;
myAlert.counterText = "This window will self destruct in ";
myAlert.show(this, "my alert message", "my alert title", true);

While this component serves my purpose just fine it can certainly be expanded upon to include the full set of features available in a regular Flex Alert. For starters I'm pretty new to ActionScript and Flex so I wasn't able to figure out how to actually extend the current Alert class. So instead I just created my own component and therefore their isn't the ability to use multiple buttons like you can with an Alert. That said, if you were going to use multiple buttons you may not want to automatically close the alert on a timer.

I do realize that you can easily close a regular alert using the setTimeout() function and the PopUpManager, but then you can't display a dynamic countdown which I think is more user friendly.

Mac vs PC vs Linux as a development platform

2008-02-18T22:09:00.000-08:00

I've been programming for nearly 15 years. I've been working with both PCs and MACs for about 10 years. Most of my programming exprience has been building web based applications that don't really realy on one platform or the other (from a client perspective at least as the server is usually linux). I feel that I am in a good position to judge what os/hardware set up makes the best workstation.

I've got an Ubuntu desktop, a XP Professional desktop and a new iMac running leopard at work. At home I run an XP professional workstation and G4 10.3 panther laptop. Depending on the workstation I run a variety of IDEs and programming tools including putty, Eclipse, WinScp, SlickEdit and a plain old terminal as the most prominent.

I think I've finally come to the conclusion that OSX Leopard is the definative way to go for the forseable future for one reason and one reason only.

It's quiet. I hate hearing a computer churn.

PHP ucfirst() and ucwords() in Flex

2008-02-18T14:17:00.000-08:00

Another common PHP function converted to ActionScript for use in a Flex application.

public function ucfirst( str:String ):String
{
  return str.substr(0,1).toUpperCase()+str.substr(1);
}
public function ucwords( str:String ):String
{
  var myArr:Array = str.split(' ');
  for (var i:int in myArr ) {
     myArr[i] = ucfirst( myArr[i] );
  }
  return myArr.join(' ');
}

PHP strtoupper() and strtolower() in Flex

2008-02-18T14:07:00.000-08:00

Having been a PHP programmer for many years and only now in the last month started to learn Flex and ActionScript I find I'm always looking for ways to get something done in ActionScript which I know how to do in PHP. These are pretty straight forward and simple functions but sometimes it's nice to have a reference.

PHP strtoupper( $string ) and strtolower( $string ) in Flex

public function strtoupper( str:String ):void
{
 return str.toUpperCase();
}   
public function strtolower( str:String ):void
{
 return str.toLowerCase();
}

Flex htmlText and Word Wrap

2008-02-18T10:37:00.000-08:00

It's a little ridiculous how long it took me to figure this out. I've been trying to layout a block of text in my Flex application and use simple html tags and get word wrapping to display properly. Searching the blogosphere wasn't turning up much solutions. Turns out it's actually rather simple to do but I'm a little surprised no posts or examples anywhere really spells it out.

<mx:Text condenseWhite="true" width="100%">
<mx:htmlText><![CDATA[
  This is some<br>
  text with simple <b>Html Formatting</b>. And this is a really really
really long line of text which we would want to auto wrap nicely.
]]></mx:htmlText>
</Text>

The important thing in this example is condenseWhite="true" and width="100%". If you don't set condenseWhite to true then Flex will render line breaks and white space. If you don't declare the width then long lines will not automatically wrap.

Believe it or not it took me several hours to figure this out. That probably doesn't say much for my own programming skills. Hopefully this post will save other people from waisting time.

Flex / JSON / PHP Example Application

2008-02-17T22:07:00.000-08:00

While trying to teach myself how to best use PHP and Flex together I build the following example application. Source code and details on how the application works are included.

The example application uses JSON (JavaScript Object Notation) to facilitate a smooth and simple way of providing PHP Arrays that can be used by a Flex Application. A more complete HowTo is included in the application.

Click here to launch the application
(right click to view source)

Requirements

This application requires a php class called json.php which encodes a PHP array and the corelib libraries available from Adobe Labs used to decode the array in Flex. You'll also need a mysql database with a single table called 'people' with the fields 'firstname','lastname' and 'category'.

To install the corelib libraries I used a post at Mike Chambers blog.
The json.php class originally comes from M. Migurski.

MXML Summary

Right click the example application to view the MXML source

FlexPhp.mxml : Main Application file. Contains a navigation tab and loads the components PhpDataGrid.mxml and PhpForm.mxml
PhpDataGrid.mxml : Contains a simple DataGrid and ActionScript for calling read.php
PhpForm.mxml : Contains a simple Flex form and ActionScript for calling write.php

Description of PHP Files

read.php : File queries the database and returns a JSON encoded array to the Flex application.
write.php : File accepts data posted from Flex form, updates the database and sends a JSON encoded response back to the flex application.
json.php : Class file used to encode PHP arrays into a JSON formatted string.
mysql.php : Class file for accessing and updating the database.
conf.php : Simple configuration file for keeping database access information and debugging.

String Replace Function in Flex

2008-02-15T14:20:00.001-08:00

I'm not sure if this is a redundant function or not. I know that Flex String objects have a replace() method but as far as I can tell this only replaces the first match and not every match in a string.

Here is an actionscript function for flex which works the same as the php str_replace() function.

str_replace( needle, replacement, haystack ) in ActionScript

public function str_replace(needle:String, replacement:String, haystack:String):String
{
  var strArr:Array = haystack.split(needle);
  return strArr.join(replacement);
}

If this is a pointless function and there is an easier way to accomplish this built into flex I would love to hear about it. I looked over the language reference documents and couldn't find something.

Flex Hint Bubble Component

2008-02-15T11:35:00.001-08:00

Flex makes it very easy to display tooltips associated with buttons, form fields and other interface components in your application. However sometimes a tooltip isn't enough because they only display themselves when a user mouses over a specific button or object. Well what if the user doesn't know where to point their mouse?

For this purpose I created a custom component called a HintBubble. The HintBubble can be triggered by any event using a function called toggleHintBubble. When toggled the Hint Bubble will fly into view displaying whatever hint message you like and then Fade out of view after XX number of seconds have passed. In one of my applications I'm using this remind users of a search button on the screen.

The component is effective for these purposes but could be easily expanded or customized to suit many purposes. Transitions and styles are hard coded but could also easily be customized to suit different needs.

HintBubble.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"
backgroundAlpha="0.0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
import mx.effects.easing.Cubic;
import flash.events.TimerEvent;
import flash.utils.Timer; 
// duration = Number of seconds to display hint bubble
[Bindable]
public var duration:Number = 4; 
// hintText = Main text for hint bubble
[Bindable]
public var hintText:String;
[Bindable]
// hintTitle = Title for the hint bubble
public var hintTitle:String;
[Bindable]
// leftTo = Left position to move hint bubble to on display
public var leftTo:Number;
[Bindable]
// hintIcon = Icon to use for hint bubble.
public var hintIcon:String;
// Hint Timer Object    
private var hintTimer:Timer = new Timer(1000,duration);
// Initiate function adds event to close hintbubble when timer ends
public function init():void
{
 hintTimer.addEventListener(TimerEvent.TIMER_COMPLETE, closeHintBubbleOnTimer);
}
// opens hint bubble and starts timer   
public function toggleHintBubble():void
{
 hintTimer.reset();
 hintTimer.start();    
  openHintBubble();
 }
 // opens hint bubble without starting timer
public function openHintBubble():void
{
 this.currentState = 'ShowHint';
}
// closes hint bubble without transitions. Returns to base state
public function closeHintBubble():void
{
 this.currentState = '';
}
// closes hint bubble with transition. Resets timer.
public function hideHintBubble():void
{
  hintTimer.reset();
 this.currentState = 'HideHint';
}
// closes hint button from event timer
public function closeHintBubbleOnTimer(event:TimerEvent):void
{
 this.currentState = 'HideHint';
}
]]>
</mx:Script>
<mx:states>
<mx:State name="ShowHint">
 <mx:SetStyle target="{this}" name="left" value="{leftTo}"/>
 </mx:State>
<mx:State name="HideHint" basedOn="ShowHint">
 <mx:SetProperty target="{myHintBubble}" name="visible" value="false"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="" toState="ShowHint">
 <mx:Parallel>
  <mx:Move duration="1250" target="{this}" easingFunction="{Cubic.easeOut}"/>
 </mx:Parallel>
</mx:Transition>
<mx:Transition fromState="ShowHint" toState="HideHint">
 <mx:Parallel>
  <!-- ** After HideHint state completes it's transition state is immediately set to default ** -->
  <mx:Dissolve duration="1000" alphaFrom="1.0" alphaTo="0.0" target="{myHintBubble}"
     effectEnd="this.currentState=''"/>
 </mx:Parallel>
</mx:Transition>
<mx:Transition fromState="HideHint" toState="">
 <mx:Parallel>
  <mx:Dissolve duration="1000" alphaFrom="0.0" alphaTo="1.0" target="{myHintBubble}"/>
 </mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:Canvas backgroundAlpha="0.0" visible="true" id="myHintBubble">
<mx:HBox backgroundColor="#F6E285" cornerRadius="16" verticalAlign="middle"
 borderStyle="solid" borderColor="#FFFFFF" themeColor="#FFFFFF" alpha="0.85"
 paddingTop="20" paddingLeft="15" paddingBottom="15" paddingRight="20">
<mx:Image source="{hintIcon}" scaleContent="true" width="50" height="50"/>
<mx:VBox backgroundAlpha="0.0">
<mx:Text color="#000000" text="{hintTitle}" id="myHintTitle" paddingBottom="-10"/>
<mx:Label color="#000000" fontSize="20" id="myHintText" text="{hintText}"/>
</mx:VBox>
</mx:HBox>  
</mx:Canvas>
</mx:Canvas>

HintBubble Usage Example
To use the HintBubble place the component somewhere in an accessible namespace for your application and place a tag similar to the following in your mxml file.


<HintBubble id="myHint" hintIcon="theme/arrow.png"
  hintText="Click 'Search' to find more products." duration="5"
  hintTitle="Help Tip" leftTo="40" bottom="65" left="1200" />

HintBubble Properties

hintIcon : An icon to display in your hint bubble
hintText : Main text of your hint
hintTitle : Title for your hint bubble
left : Starting position of bubble ( ideally set somewhere off screen )
leftTo : Position the hint bubble slides to when toggled
bottom/top : fixed verticle position of bubble
duration : Seconds to display hint before automatically hiding

Auto Reloading a Flex Application

2008-02-14T11:26:00.001-08:00

I have a flex application which runs on a touch screen and I want to have the application reset itself when no one is using it.

To get this done I created a Timer that would reload my Flex app every 5 minutes and an event listener which would reset the timer everytime someone touched the screen (or clicked the app).

Example below.

AppTimer.as ActionScript Class File


package
{
  import flash.events.Event;
  import flash.events.TimerEvent;
  import flash.utils.Timer;
  import flash.net.URLRequest;
  import flash.net.navigateToURL;

  public class AppTimer
  {
   // Create Time Object to fire every minute for 5 minutes
   public var myTimer:Timer = new Timer(60000,5);
   
      public function AppTimer()
      {
          // designates listeners for the completion event
          myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
        
          // starts the timer ticking
          myTimer.start();
      }
    
      // Function restarts the timer.
      public function resetTimer():void
      {
       myTimer.reset();
       myTimer.start();
      }
    
      // Function gets called when timer runs out. Reloads the page
      public function onTimerComplete(evt:Event):void
      {
    var ref:URLRequest = new URLRequest("javascript:location.reload(true)");
    navigateToURL(ref, "_self");      
 }
    
  }
}

Main.MXML File

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 xmlns="*" creationComplete="initApp()"> 
 <mx:Script>
  <![CDATA[
  
  // Creates the AppTimer Object
  public var myTimer:AppTimer = new AppTimer();
   
  // Function to run when app is created
  private function initApp():void
  {
   // Add Event listner to track mouse clicks
   application.addEventListener(MouseEvent.CLICK, globalClickEvent);     
  }
  
  // Everytime a user clicks in the applicatoin run this function.
  private function globalClickEvent(event:MouseEvent):void
  {
   myTimer.resetTimer(); // Call timer reset function
  }

  ]]>
 </mx:Script>
 <mx:Panel width="100%" height="100%" title="My App with Timer"/>
</mx:Application>

If anyone knows a better way to accomplish the same task I would be interested to hear about it.

Form Validation in Flex

2008-02-13T14:13:00.001-08:00

There are many example of how to use Flex built in form validators however most seem incomplete and frankly the basic use of validators in Flex are not the most user friendly.

The best example I've found is over at blog examples. See link.

Click here

ActionScript Class for Global Variables in Flex

2008-02-13T11:48:00.001-08:00

I've been reading several blogs and forums on how to implement global variables in a Flex application. It's tough to find an effective example of how to do this as most threads/comments are flooded with people crying foul that good programming doesn't need global variables.

While I agree for the most part I'm used to having some sort of config file in my applications which hold defined constants that are likely to change depending on the deployment or version of the application. Eg: In my php applications I keep database connection information in a config file so that i can easily switch between a development database or production database.

The best solution I've found to do this in a Flex Application is to include in the root directory of your Flex application a ActionScript class that contains properties for all the constants or global variables you'll need to define.

Action Script : Settings.as


package
{
  public class Settings
  {
    static public var SiteUrl:String="http://www.mydomain.com";
  }
}

Example MXML File Using Settings.as


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns="*">
  <mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    private function testSettings():void
    {
        Alert.show( Settings.SiteUrl );
    }
    ]]>
  </mx:Script>
  <mx:Button label="test" click="testSettings()"/>
</mx:Application>

Important things to make note of in this example you'll need xmlns="*" in the opening tag of any MXML file or component which needs access to the properties of Settings.as. You'll also need to make sure Settings.as is the root folder of your application.

Welcome

2008-02-13T11:24:00.000-08:00

Time to get back into the process of writing, musing and keeping a blog. I hope to provide some good tips regarding PHP, Flex, AJAX and other programming topics I'm working with.