return undefined;


Smart Home functionality in Flex Builder 2

Posted in Flash, Flex by Ben on the July 26th, 2006

One of the simplest yet most important features I require in a code editor is what is generally referred to as ’smart home’ functionality. This is where pressing the home key will move the cursor to the first non-whitespace character on the line, respecting whatever indentation may exist. Well, apparently this is something that did not make the cut for the initial launch of Flex Builder, but it is quite easy (and free) to accomplish.

  1. Install the awesome FDT ActionScript plugin
  2. ‘Activate’ the plugin by opening a file with it:

That’s it! You can now go back to using FB as your AS editor (the one with the black dot in the image above; it will still be set as the default editor for .as files), but now you have smart home functionality!

The FDT plugin does only provide a 30 day trial before you are required to purchase it, but this will work even after the trial expires. You are not actually using FDT for anything, but something happens when you install and ‘activate’ it that gives Flex Builder this functionality. Hopefully others will find this as useful as I did.

QuickDateFormatter - efficient date formatting in AS3

Posted in Flash, Flex by Ben on the July 21st, 2006

I've known that AS3 included some formatter classes, including DateFormatter, for some time now but didn't have cause to use them until today. I'm not sure if its laziness or that I just don't understand some level of abstraction Adobe was striving for with their implementation, but I found it maddeningly complicated to use. I was expecting something like php's date(), which usually looks something like this:

$formattedDate = date($myDateString, 'd/m/Y');

Well, you can imagine my horror (exaggerate much?) when I discovered that the same functionality in AS3 looked like this:

var df:DateFormatter = new DateFormatter();
df.formatString = "MM/DD/YYYY";
var formattedDate:String = df.format(myUnformattedString);

My solution? QuickDateFormatter, whose usage looks like this:

var formattedDate:String = QuickDateFormatter.format(myUnformattedString, "MM/DD/YYYY");

Much quicker and cleaner, specially made for us lazy folk. I suppose to match the robustness of the built-in DateFormatter I would need to add some error handling but I am not really worried about that. This is meant for cases where you know the input is a valid date but you need to alter the formatting. You can grab the source here or simply copy and paste from below.

package com.fmr.utils
{
    import mx.formatters.DateFormatter;

    public class QuickDateFormatter
    {
        public static function format(str_dateString:String, str_dateFormat:String):String
        {
            var f:DateFormatter = new DateFormatter();
            f.formatString = str_dateFormat;
            return f.format(str_dateString);
        }
    }
}

Enjoy!

DataGrid, labelFunction and namespaces

Posted in Flash, Flex by Ben on the July 18th, 2006

In a previous post I talked about my preferred method in Flex 2 for dealing with XML data that contains namespaces. Another task that gets complicated by the presence of 'namespaced XML' is populating a DataGrid with that data. Despite the usefulness of the use namespace directive, I have been unable to populate a DataGrid just by using the dataField attribute, as can be done when your data does not contain namespaces.

<mx:DataGrid x="10" y="291">
    <mx:columns>
        <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
        <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
    </mx:columns>
</mx:DataGrid>

The method I employ uses the labelFunction attribute of DataGridColumn, something that is most commonly used to let you specify a function to handle the formatting of data you would like displayed in that column. This approach allows you to use a single function for both special formatting of data and to gain access to data that resides in a namespace. Here is the basic format of my labelFunction:

private function genericLabelFunction(obj_data:Object, obj_dataGridColumn:DataGridColumn):String
{
    use namespace DOCUMENT_METADATA_NAMESPACE;
    var q:QName = new QName(DOCUMENT_METADATA_NAMESPACE, obj_dataGridColumn.dataField);
    var str_data:String = obj_data[q];
                   
    switch(obj_dataGridColumn.dataField)
    {
        case "Status":
            return (str_data == "InProgress") ? "In Progress" : str_data;
            break;
        case "PlanDataDate":
            return str_data.substr(0, str_data.indexOf(" "))
            break;
        default:
            return str_data;
            break;
    }
}

Another item that has proven useful for dealing with namespaced XML is the QName class. Short for 'qualified name', the QName constructor allows you to specify a namespace and a local name, which it uses to address the data you are targeting. Once we establish our QName object, we use it to reference the desired property of the data object (obj_data) that is passed into our labelFunction. Also notice that the local name is determined by the dataField attribute of the DataGridColumn object that was passed into the function. We now have a variable (str_data) that should contain the data from the node in our XML that has the same name as specified by our dataField attribute.

As shown in the first two cases, you can do further formatting to this data if desired. The default case takes care of all non-special cases, for when you would like to display the data as it exists in the XML and were simply using the labelFunction to get around namespace issues. Finally, here is a simple example of a DataGrid that uses our genericLabelFunction.

<mx:DataGrid dataProvider="{ModelLocator.getInstance().clientPlanList}" id="planList_dg">
    <mx:columns>
        <mx:DataGridColumn headerText="Industry" dataField="Industry" labelFunction="genericLabelFunction"/>
        <mx:DataGridColumn headerText="Plan Date" dataField="PlanDataDate" labelFunction="genericLabelFunction"/>
        <mx:DataGridColumn headerText="Status" dataField="Status" labelFunction="genericLabelFunction"/>
        <mx:DataGridColumn headerText="Group Size" dataField="PlanSizeGroup" labelFunction="genericLabelFunction"/>
    </mx:columns>
</mx:DataGrid>

Flash Extension: Convert Bitmaps to Symbols

Posted in Flash, JSFL by Ben on the July 17th, 2006

A while back I worked on a project that required the conversion of about 100 images to one-frame movieclip symbols. No way was I going to do it by hand, so a friend and I developed this nifty little extension to avoid doing the monotonous task ourselves. I have seen a few similarly capable extensions out there but I think ours offers a few features the others didn't.

From the source: Allows you to convert selected bitmaps from your library to a symbol type of your choice. Other features include: slicing leading/trailing characters of the symbol names, adding a prefix and/or suffix to the symbol names, adding the symbols to a folder, and setting the registration point of the symbols.

Anyhow, if you find it useful post a comment and let us know. Zip includes MXP file and source.

Enjoy!

Dealing with (default) namespaces in Flex 2/AS3

Posted in Flash, Flex by Ben on the July 14th, 2006

Since the release of Beta 2, I have been playing with Flex 2 and AS3 whenever I've had spare moments. Most of my tinkering has been focused around calling SOAP web services as that is what is most applicable to my current work situation. A problem I kept running into was that the data returned contains default namespaces (i.e. no prefix, just xmlns="yaddayadda"), and at present there is a dearth of information on working with them. Long story short, you must specify which namespace you want to use for each and every operation, unless you use this approach:

namespace foo = "http://site.com/foo";
use namespace foo;

I really didn't like the idea of having those directives scattered about in my app, in every file that needed to work with my XML data. Today, guided by an initial tip from Brian, I've got it working. This is more or less a direct implementation of the examples shown in the docs applied to XML, rather than methods.

What follows is my initial take on how to approach the use of several namespaces in a Flex 2 application that uses the Cairngorm framework. I am a Flex and Cairngorm noob, so if someone has suggestions on a better structure, I am all ears. The approach is based around creating package-level namespace files, that you can then import into wherever you need them.

Here is a sample namespace file:

package com.fmr.nstest.business.namespaces
{
    public namespace CLIENT_MEASURES_NAMESPACE = "http://site.com/BackOffice/CMeasures";
}

I decided the most logical place to put these files was in a 'namespaces' package inside the 'business' package, which is where my Delegates and Services.mxml file reside. I am defining them in all caps since they are more or less constants. You can only define one namespace per file, however, because there can only be one externally accessible definition per file in AS3. Using these files is pretty straightforward as well. Simply import the file (it will not show up in the auto-complete list in Flex Builder) and then insert your use namespace directive where appropriate:

import com.fmr.nstest.business.namespaces.CLIENT_MEASURES_NAMESPACE;
...
use namespace CLIENT_MEASURES_NAMESPACE;

This approach is flexible in that if you put the use namespace directive before your actual class declaration starts, it can essentially be used as the default namespace for all the methods of your class. On the other hand, you could also import everything (*) from your namespaces package and place different use namespace directives in your methods so that they can address different sets of data.