Follow the project here and check out the first demo vid on Vimeo.

Sure enough the entries were there:

<compilerSourcePath>
      <compilerSourcePathEntry kind="1" linkType="1" path="properties"/>
      <compilerSourcePathEntry kind="1" linkType="1" path="locale/{locale}"/>
</compilerSourcePath>

At this point I’m not really sure what the kind and linkType properties are for other than the fact that 1 is the default for both of them. I’ll post back as I found out more. In the meantime this has allowed me to add build paths to my projects with Flex Builder 3 on Windows 7 x64.

UPDATE.

Seems turning off the Logitech software I use for my mouse and keyboard resolves this problem altogether.

You can read the full article here: Creating Application Menus in Mac OSX with Adobe AIR.

To change the font size in Flex Builder click Window > Preferences…. In the dialog that pops up click General > Appearance > Colors and Fonts and expand the Basic rollout. In the Basic rollout there are a bunch of options, click Text Font and then click the Change… button that appears. It should be smooth sailing from here.

With the disclaimer out of the way we’ll get down to business.  Our goal here is to produce a close confirmation popup when a user accidentally attempts to navigate away from our Flex app.  Examples of “navigating away from our Flex app” include: clicking the refresh, back or forward button, clicking a bookmark or favorite, or typing a new url in the address bar.  Additionally we’ll disable the prompt when the user intentionally navigates away from our Flex app; when logging out for example.  To accomplish this we’ll make use of the Javascript onbeforeunload event and Flex/Flash’s ExternalInterface package.

At this point I feel it’s important to note that doing what are about to implement is generally considered bad form for websites.  If I, as a user, want to leave a page I’d damn well better be able to with no hassle.  A Flex app is usually not a typical website however, rather it is an application running inside a web browser and when you close an application like Word with unsaved data you always get a confirmation dialog.

It’s my opinion that displaying a close confirmation for a Flex app is good form for two reasons.  The first is that RIAs are meant to be similar to desktop applications and any half decent desktop application is going to have you confirm closing the application if you have unsaved information.  The second is that, in being more like a desktop app, an RIA subverts the way users typically interact with web sites and web apps.  For most Flex apps the back and refresh buttons can cause havoc so throwing up a confirmation dialog when these buttons are clicked can enhance your application.

So we’ve made up our minds that we’re adding the close confirmation popup now lets get to it!

The Javascript

The first thing we need is some Javascript that will allow us to work with the onbeforeunload event.  Specifically we’ll need:

• A flag to indicate whether or not the popup should be displayed
• A variable to hold the text we want displayed in the popup
• A function to set the flag
• A function to set the prompt text

Here’s my Javascript object, FlexOnBeforeUnload that encapsulates all of this:

var FlexOnBeforeUnload = {

   /**
    * Flag indicating the user should be prompted each
    * time they attempt to navigate away from or refresh
    * the Admin HTML page.
    */
   prompt: true,

   promptText: "Refreshing or leaving this page will cause you "
             + "to lose any unsaved data.\n"
             + "Are you sure you want to leave?",

   /**
    * Sets the value of "prompt"
    */
   setPrompt: function (value) {
      if (value) {
         FlexOnBeforeUnload.prompt = true;
      } else if (!value) {
         FlexOnBeforeUnload.prompt = false;
      }
   }

   /**
    * Sets the value of "promptText"
    */
   setPromptText: function (value) {
      FlexOnBeforeUnload.promptText = value;
   }
};

Using Javascript we can access prompt and priompText directly however the ExternalInterface package in Flex only allows you to make calls to Javascript functions — you cannot use it to access variables directly. Besides accessor functions are good practice.

SetPrompt will take a boolean value and assign it to prompt. Setting prompt to true will cause the close confirmation to be displayed when a user attempts to navigate away from your Flex app. Setting prompt to false will allow users to navigate away without any nagging.

SetPromptText will allow you to change the text displayed in your confirmation dialog. Unfortunately you have very little control over the text displayed in the confirmation dialog. The dialog will always display “Are you sure you want to navigate away from this page?” and “Press OK to continue, or Cancel to stay on the current page.” along with the OK and Cancel buttons. The only thing you can customize is the text that appears between “Are you sure…” and “Press OK…”.

In the above pic you can see that “Refreshing or leaving this page will cause you to lose any unsaved data. Are you sure you want to leave?”, the default promptText, is displayed in the close dialog. Now that we have our Javascript object we’ll save it in a file called flex-onbeforeunload.js.

Now open up your HTML wrapper (the HTML page that loads your Flex app) and include flex-onbeforeunload.js in the head:

<!-- Assumes the JS file is located in the same folder as the wrapper. -->
<script src="flex-onbeforeunload.js" language="javascript">
</script>

After that you are ready to setup the onbeforeunload event handler.  In a script block beneath the include we just added add the following:

window.onbeforeunload = function(e) {
   if (FlexOnBeforeUnload.prompt) {
      return FlexOnBeforeUnload.promptText;
   }
}

This code will be executed prior to the page being unloaded (onbeforeunload even). If FlexOnBeforeUnload.prompt is true the close confirmation will be displayed with our promptText. If FlexOnBeforeUnload.prompt is false the function returns nothing and no confirmation will be shown.

The Actionscript

Since the default for FlexOnBeforeUnload.prompt is true the close confirmation dialog will always be shown unless we take some action to prevent it. Enter ExternalInterface, a class used to facilitate communication between Actionscript and Flash Player and the HTML wrapper. In other words, ExternalInterface allows Actionscript to talk with Javascript and vice versa, though in our situation we’ll only being going from Actionscript to Javascript.

For our purposes we are interested in two parts of ExternalInterface, the call method and the available property.  ExternalInterface.available “[i]ndicates whether this player is in a container that offers an external interface.”  In English, if ExternalInterface.available is true we can use ExternalInterface.  ExternalInterface.call allows us to call Javascript functions in the wrapper.  To use ExternalInterface.call you pass in the name of the Javascript function as a string and then any parameters the Javascript function takes as a comma-separated list.

Earlier I gave the example of logout as a situation where you would probably not want to show a close confirmation popup.  Using ExternalInterface you can disable the confirmation for situations such as this.  To disable the confirmation popup add the following to your logout code in Flex Builder:

// Make sure ExternalInterface is available
if (ExternalInterface.available)
{
   // Set prompt to false, disabling the close confirmation
   ExternalInterface.call("FlexOnBeforeUnload.setPrompt", false);
}
else
{
   // Optionally handle the situation where ExternalInterface
   // is not available.
}

This will set the value of FlexOnBeforeUnload.prompt to false, disabling the close confirmation. Similarly you can change the prompt text:

// Make sure ExternalInterface is available
if (ExternalInterface.available)
{
   // Set prompt to false, disabling the close confirmation
   ExternalInterface.call("FlexOnBeforeUnload.setPromptText",
                                "Different prompt text.");
}
else
{
   // Optionally handle the situation where ExternalInterface
   // is not available.
}

The component has a robust feature set providing multiple move options and customization for nearly everything.  I’ve created a project page for this component here.  There you can find a demo and download the source for use in your own projects.

Now I’m going to share the love so no one else has to suffer through a mess of convoluted code.

The Classes

My form class libary has seven classes.  Each distinct form element type (e.g., <input>, <select>, etc.) is represented by its own class.  All these elements are then pulled together in the Form class that handles the actual construction and ouputting of the form to the screen.

Download the Form class library here.

See the complete documentation for the Form class library here.

Download the examples here.

The Examples

So, you’re thinking, “this is cool, but can I see it in action?” Just read on.

A Simple Form

The first example is a simple form with one text input and a submit button.

// Create a new Form object

$form = new Form("ExampleForm");

// Add a text input

$form->addField(new FormInput("", "text", "firstname", "What is your name?"));

// Add a submit button

$form->addField(new FormInput("Submit", "submit", "submit"));

// Print the form to the screen

$form->printForm();

See the example in action.

A Simple Form with a Select

The second example adds a form select (drop down) menu, sets the default item in the select menu and shows off a different way to print forms.

// Create a new Form object
$form = new Form("ExampleForm");

// Add a text input
$form->addField(new FormInput("", "text", "firstname", "What is your name?"));

// Create some data for our select.
$genders = array();

$genders[] = array("value" => "M", // The value your script will see when the form is submitted.
"name" => "Man", // The name that will be displayed to users.
"selected" => false);

$genders[] = array("value" => "W",
"name" => "Woman",
"selected" => true); // Set this item to be selected by default

// Create a select.
$genderSelect = new FormSelect($genders, "gender", "Your are a: ");

// Add our select
$form->addField($genderSelect);

// Add the submit button.
$form->addField(new FormInput("Submit", "submit", "submit"));

// Save the form as an HTML string.
$html = $form->buildForm();

// Print the form later.
echo $html;

See the example in action.

A Less Simple Form with TextArea

This next example adds a textarea and provides some default text for it as well as the number of columns and rows.

// Create the text area.
$defaultText = "Tell us about yourself.  In 500 words or less.";
$textarea = new FormTextArea($defaultText, "biography");

// You can also set properties like this.
$textarea->setColumns(20);
$textarea->setRows(5);

// Add the text area.
$form->addField($textarea);

See the example in action.

Organize Things with Separators

Our example form is starting to get big.  Time to bring some organization into the mix.  Enter separators.  Separtors are purely organizational elements and will not be submitted along with your form.  They simple allow us to visually break up the form so it’s easier to use.

// Add a separator with the text "Bio"

$form->addField(new FormSeparator("Bio")); // Want the separator without any text?  Just take out "Bio" and you've got it.

See the example in action.

Block Bots with CAPTCHA

The final example adds CAPTCHA to our form.  This class uses Securimage CAPTCHA and you’ll need to download it from here if you want to use the CAPTCHA features of this class library.  The FormCaptcha object is a little more complicated than the rest so it’s easier to create a new object and set the properties afterward.

// Create a new FormCaptcha object.
// NOTE: the source you pass to the contructor is the URI.  In other words,
// you could slap http://www.seanmonahan.org on front of the source and find that script.
$captcha = new FormCaptcha("/code/php/examples/form/Captcha/securimage_show.php");

// Position the reload text to be placed after the image.
$captcha->setReloadLocation("AfterImage");

// Set the label for the CAPTCHA input field.
$captcha->setLabel("Prove you aren't a bot.");

// Add the CAPTCHA to the form.
$form->addField($captcha);

See the example in action.