Monthly Archives: January 2008

Creating a tool tip on a Flex TextInput control with password masked text

The following example shows you how you can use a tool tip on a Flex TextInput control with its displayAsPassword property set to true. By mousing over the credit card number field in the form below, you can see your credit card number in a readable tool tip.

Want the short version? Use a simple binding to bind the tool tip text to the TextInput control’s text, as seen in the following snippet:

<mx:TextInput id="ccNumber"
        text="4111111111111111"
        displayAsPassword="true"
        toolTip="{ccNumber.text}" />

Looking for a longer version? Read on!

Full code after the jump.

Continue reading Creating a tool tip on a Flex TextInput control with password masked text

Using a CheckBox control as a list item renderer in Flex

The following example will show you how you can use a CheckBox control as a custom item renderer in a List control in Flex.
I haven’t done a lot of testing yet, so if you have any tips/suggestions/improvements, please, share them in the comments.

Full code after the jump.

Continue reading Using a CheckBox control as a list item renderer in Flex

Displaying a TextInput control’s text as a password in Flex (redux)

We’ve already seen how to get a TextInput control to display its text as a masked password field before in an earlier example, “Displaying a TextInput control’s text as a password in Flex” by setting the displayAsPassword property to true.
The following example will show you how you can listen for the focusIn and focusOut events to toggle the displayAsPassword property so that when the password field has focus the text is displayed as plain text, and when the password field does not have focus the text is displayed as masked text.

Full code after the jump.

Continue reading Displaying a TextInput control’s text as a password in Flex (redux)

Truncating text in the Flex Label control using the truncateToFit property

The following example shows how you can use the truncateToFit property in the Label control in Flex to truncate strings if they exceed a specified width. The label control will terminate the string with “…” and allow you to roll over the text and read the entire (non-truncated) text in a tool tip, as seen in the following snippet:

<mx:Label text="The quick brown fox jumped over the lazy dog."
        truncateToFit="true"
        maxWidth="200" />

Full code after the jump.

Continue reading Truncating text in the Flex Label control using the truncateToFit property

Listening for the link event in a Flex Label control

The following example shows how you can use the link event with the Label control in Flex to handle hyperlinks embedded within a string of text. By using the “event:” prefix in the href property of an anchor (<a />) tag, you can handle links within your Flex application, use the ExternalInterface API to call JavaScript from Flex, or do pretty much whatever else you want.

Full code after the jump.

Continue reading Listening for the link event in a Flex Label control

Displaying item tool tips in a Flex ComboBox control

The following example shows how you can truncate long item labels in a ComboBox control by setting a custom item renderer. In this example we’re using the Label control we’re using the Label control and taking advantage of the Label control’s truncateToFit property which truncates the string with an “…” and displays a tool tip showing the entire, non-truncated string when the truncateToFit property is set to true (which is the default value).

Full code after the jump.

Continue reading Displaying item tool tips in a Flex ComboBox control

Removing leaf icons from the Flex Tree control

In a previous example, “Removing folder icons from the Flex Tree control”, we saw how to remove the folder icons from a Tree control in Flex so only the disclosure (arrow) icons were visible. In the following example we look at a similar technique for removing the default leaf icons from the Tree control in Flex.

The short answer, set the defaultLeafIcon style to null using CSS, as shown in the following snippet:

<mx:Style>
    Tree {
        defaultLeafIcon: ClassReference(null);
    }
</mx:Style>

The long answer? Keep reading!

Full code after the jump.

Continue reading Removing leaf icons from the Flex Tree control

Getting specific camera instances using the static Camera.getCamera() method

The following example shows how you can get the array of available cameras in ActionScript by using the static Camera.names property, which returns an array of camera names. You’ll also see how you can get a specific camera instance (in case users have multiple cameras installed, which may be the case if they have a laptop with a built in webcam as well as an external USB/Firewire webcam) by passing a parameter to the static Camera.getCamera() method.

Continue reading Getting specific camera instances using the static Camera.getCamera() method