Flex is great! Javascript can be great! What if two great things got together?

This is a simple code hint which shows how to call javascript functions from Flex and pass data back and forth:

MXML Button:

<mx:Button
id = "button"
label = "Click Me!"
click = "handleButtonClick(event:MouseEvent)
/>

Flex Function:

private function handleButtonClick(event:MouseEvent):void
{
var functionName:String = "handleButtonClick";
var returnData:String = ExternalInterface.call(f, "You clicked the button!");
}

Javascript Function:

function handleButtonClick(message)
{
alert(message);
}

That’s really all there is to it. the ExternalInterface.call() handles everything for you.

By the way, if you wanted to actually return data from the javascript function, you’d just do a standard return and it’d be available in the returnData variable in Flex:

function handleButtonClick(message)
{
alert(message);
return "success";
}

I have been doing some work with AIR and SQLite recently and came across and issue that had to be solved. The issue was that most everything is a VARCHAR in SQLite and I was not able to insert apostrophes (‘) into any string field because that is the string delimiter.

A quick Google search revealed that escaping an apostrophe is as simple as putting two of them together (i.e. “Jake’s Blog” becomes “Jake”s Blog”). Quotation marks remain the same.

Now that I knew what the solution was, I had to implement it. I had about 10 custom VO objects, all with different numbers and kinds of properties. I needed a way to dig into each of them and do a quick string replace on String properties only.

continue reading "Custom Object Parsing Function"

I ran into a situation recently which required me to parse a string into a Date object in Flex. After some searching I found that there’s a wonderful little method in the DateFormatter class called parseDateString. Unfortunately, that method is protected and I couldn’t gain access to it. Luckily, I came accross a blog post that provided a wonderful solution: http://flex2colombia.wordpress.com/2007/02/18/dateformatter-parsedatestring-replacement/

The basis is that the Date class has a static method for parsing dates (parse()) which accepts a single String as a parameter. Here is an example:

var dateString:String = "Tue Jul 29 13:40:56 GMT-0500 2008";
var d:Date = new Date(Date.parse(dateString));

Just like that, you have a Date object to work with in Flex.

The following string formats are acceptable (all of which are recognized by Flex as a Date)

• MM/DD/YYYY HH:MM:SS TZD
• HH:MM:SS TZD Day Mon/DD/YYYY
• Mon DD YYYY HH:MM:SS TZD
• Day Mon DD HH:MM:SS TZD YYYY
• Day DD Mon HH:MM:SS TZD YYYY
• Mon/DD/YYYY HH:MM:SS TZD
• YYYY/MM/DD HH:MM:SS TZD

I’ve been helping out with a flex project at work and have been learning some really cool things about it. Coming from a java background a lot of this is familiar but Flex has some really neat features built in.

One that I found recently is the Sort class in the collections package. Pretty much all UI components (Lists, Datagrids, etc) take some kind of collection as their data provider. The question came up, “How do you sort a datagrid manually?” We all know you can click the labels and the grid will sort itself but how do you do that in code. Here’s how:

// Create a new Sort Object
mySort = new Sort();

// Create a SortField Object
// The paramater is the field in the Array Collection to sort on
sortByLabel = new SortField("labelField");

// add Fields to your Sort Object.
// This is standard array notation so multiple sorts would be [sort1,sort2,sort3]
mySort.fields=[sortByLabel];

// set the sort object as the Array Collections sort
myArrayCollection.sort=mySort;

// refresh the Array Collection
myArrayCollection.refresh();

Now, assuming you have bound your data provider in your datagrid (i.e. dataProvider=”{myArrayCollection}”) the datagrid will sort as soon as the Array Collection is refreshed.

A big thanks to Bruce Phillips’ post for pointing me in the right direction.