Until now I have never needed to do a lot with meta data except making items bindable or creating custom events. Recently I wanted to create a limitation on a custom property. Here’s the code:

private var _iconPosition:String = "left";
[Bindable]
public function set iconPosition( value:String ):void
{
_iconPosition = value;
}
public function get iconPosition():String
{
return _iconPosition;
}

In order to add default values you have to make the property inspectable. This affects the compiler and provides code hints for the property. See the Live Docs for a full description of “Inspectable”. In my example, I wanted to simply limit my “iconPosition” property to either left or right. Here is the updated code:

private var _iconPosition:String = "left";
[Bindable]
[Inspectable(enumeration="left,right")]
public function set iconPosition( value:String ):void
{
_iconPosition = value;
}
public function get iconPosition():String
{
return _iconPosition;
}

I ran across this problem recently…

I needed to create a slider that didn’t change in a uniform way. It was different for each third of the slider. The first third changed evenly from 0 - 25,000. The second third from 25,000 - 100,000. The last third from 100,000 - 10,000,000.

Here are the basic steps that I took:

1. Create a slider with minimum 0 and maximum 10,000,000
2. Create a handler for the change event
3. Write a whole lot of math in the change event

I’ll let you read over the application code at the link below. Here’s a really quick view of the function that handles the slider changing:

private function handleSliderChange():void
{
var thumbPercentage:Number = slider.value / slider.maximum;
var newTextInputText:String = '';
var multiplier:Number;
if( thumbPercentage <= GraduatedSlider.ONE_THIRD )
{
newTextInputText = numberFormatter.format((thumbPercentage / GraduatedSlider.ONE_THIRD) * GraduatedSlider.SLIDER_ONE_THIRD_VALUE);
}
else if( thumbPercentage > GraduatedSlider.ONE_THIRD && thumbPercentage <= GraduatedSlider.TWO_THIRDS )
{
multiplier = ((GraduatedSlider.TWO_THIRDS - thumbPercentage) / GraduatedSlider.ONE_THIRD);
newTextInputText = numberFormatter.format((((thumbPercentage / GraduatedSlider.TWO_THIRDS) * GraduatedSlider.SLIDER_TWO_THIRDS_VALUE) - (multiplier * GraduatedSlider.SLIDER_ONE_THIRD_VALUE)));
}
else
{
multiplier = ((thumbPercentage - GraduatedSlider.TWO_THIRDS) / GraduatedSlider.ONE_THIRD);
//trace(multiplier);
newTextInputText = numberFormatter.format(((multiplier * GraduatedSlider.SLIDER_FULL_VALUE) + ((1 - multiplier) * GraduatedSlider.SLIDER_TWO_THIRDS_VALUE)));
}
this.sliderValue = newTextInputText;
slider.dataTipFormatFunction = sliderDataTip;
setTextInputValue();
}

View Application     View Source

I’ve recently been tasked with figuring this out so I thought I’d share my results with everyone.

The Problem:

Create a Flash/Flex horizontal menu that will overlap the content below it. We don’t know how big the menu might get or what kind of content might end up below it. We do know that layering HTML and Flash does not always work as expected based on which browser you use. Sure, you can use the wmode=”transparent” and put the flash on top of the HTML, but it doesn’t allow you to hover over or click items under the flash.

The Solution:

Use Flex to interface with Javascript to change the SWF Object as needed based on events being listened to inside that same SWF Object. See http://reynacho.com/2008/08/12/flex-calls-to-javascript/ for a tutorial on how to get Flex to call javascript functions.

Read on for the code and example…

continue reading "Flex Menu Expanding Over HTML content"

Modifying your default build template is quite simple. There is a template file that is used when building your project. It should reside in the html-template directory at the root of your project in Flex Builder. In Flex Builder 3, the template is named “index.template.html”.

Let’s say you want to modify default parameters in the flash object (one I use is wmode=”transparent” for flex widgets). You would add this to the AC_FL_RunContent() function call (around line 80) and to the noscript block (around line 101). 95% of people hitting the page will hit the AC_FL_RunContent() call so here’s an example of how to modify that:

continue reading "Flex - Modify your default build template"

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.