1.4. Making User Interfaces Engaging and Effective

In this part of the chapter, we explore a few subjects that facilitate sprucing up of user interfaces to make them more productive. By no means are these either exhaustive or detailed.

1.4.1. Exploring Effects

An effect is a dynamic behavior that is applied to a target component when an effect is triggered. Therefore, a trigger and a target are the two complementary parts of an effect. An effect is activated or triggered in the same manner as an event, although it is distinct from it. For example, both a creationCompleteEvent and a creationCompleteEffect are activated when an application is created, initialized, and set up. On an effect trigger, a specific effect is applied to a target. As an example, you may want a label to glow when the mouseDownEffect is triggered on that label. The label in this case is the target for the effect. Listing 1-7 shows how to accomplish such an effect.

Example 1.7. Glow on a Mouse Down Effect

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="0xFFFFFF">
    <mx:Glow id="glowEffect" duration="1000"/>

    <mx:Label id="firstLabel" text="First Label"
        mouseDownEffect="{glowEffect}"/>
    <mx:Label id="secondLabel" text="Second Label"/>

</mx:Application>

A few common effects available in Flex are:

• AnimateProperty

• Blur

• Dissolve

• Fade

• Glow

• Iris

• Move

• Pause

• Resize

• Rotate

• SoundEffect

• WipeLeft

• WipeRight

• WipeUp

• WipeDown

• Zoom

In addition, to these built-in effects, one can also create custom effects if desired. Effects have a duration property that determines the time for which the effect is applied to a component.

I mentioned earlier that this section explores a few features that make a user interface more responsive. However, the one thing I did not say then was that these features are a random selection from an exhaustive lot and may not necessarily relate directly to each other. The next feature that we look at is validators, which allow for quick feedback to users during data entry.

1.4.2. Validating User Input

Validating input data is critical for maintaining data quality. Over the last few years, web applications have used both client-side and server-side validation to achieve this. Flex, being a client-centric technology, validates data right at the user end. This allows for rapid feedback when a user inputs data.

Flex comes with a few ready to use validators. These are as follows:

• CreditCardValidator

• CurrencyValidator

• DateValidator

• EmailValidator

• NumberValidator

• PhoneNumberValidator

• RegExpValidator

• SocialSecurityValidator

• StringValidator

• ZipCodeValidator

Their names are descriptive enough for you to get a sense of what they validate. Their usage is fairly straightforward, too. For example, you could implement an EmailValidator as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="0xFFFFFF">
    <mx:EmailValidator id="anEmailValidator"
        source="{emailInput}" property="text"/>
    <mx:TextInput id="emailInput"/>
    <mx:TextInput id="anotherTextInput"/>

</mx:Application>

When you navigate away from the first text input, where you enter the email address, the email validator kicks in. It verifies validity by checking for the "@" and the "." (period) symbols in the text.

You can also create custom validators and define your own custom constraint and rules to validate input data.

Next, we look at another feature for increasing richness, and this time it's for customizing the look and feel.

1.4.3. Customizing the Look and Feel

The look and feel of a Flex application can be customized using styles and skins. Web developers familiar with CSS (Cascading Style Sheets) can style Flex applications the same way they style their HTML-technologies–based web applications. Styles are defined declaratively in a CSS file. In Flex, the style can reside in an external file or can be inline. For example the font size, color, letter spacing, and font weight of a Label can be specified in an external file called myStyle.css as follows:

Label {
            fontSize: 15;
            color: #FFFF00;
            letterSpacing: 2;
            fontWeight: bold;
      }

This external file is imported into a Flex application using the Style tag:

<mx:Style source="../assets/myStyle.css"/>

Instead of an external file, the same style can be declared within a Flex application inline as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="0xFFFFFF">

<mx:Style>
        Label {
                  fontSize: 15;
                  color: #FFFF00;
                  letterSpacing: 2;
                  fontWeight: bold;
              }

    </mx:Style>

    <mx:Label id="aLabel" text="This is a label"/>

</mx:Application>

When using either of these techniques, the style is applied to all instances of type Label. This is convenient because most often a uniform look and feel is what you desire. However, at times you may want a certain Label to override the style attribute. You can do this by using the style properties within a label component. For example, you could create a Label with fontSize 18 instead of 15 using the following code:

<mx:Label id="anotherLabel" text="This is another label"
    fontSize="18"/>

Styles can also be defined programmatically using the StyleManager class or using the getters and setters for styles of a component. Again, because we want to keep things simple we won't cover these here.

In addition to styles the look and feel can also be defined in terms of aggregations of styles, skins, and associated artwork. Such aggregations are called themes. The default Halo theme that comes with the Flex framework is one such theme.

Using styles and customizing the look and feel is one way to create custom components. There are many more ways to customize components though. That's what you'll learn next.