3.4 Handling slider change events in flex 3 and flex 4  (Page 8/9)

Behavior of the project

If you move the slider with the mouse, you will see that the behavior is essentially the same as the Flex 3 version of the project, including the displayof a tool tip as shown in Figure 2 and the display of the slider value as shown in Figure 3.

The spark s:Application element

The Flex 4 spark s:Application element differs from the Flex 3 mx:Application element in several ways including the following:

• Default layout: Unlike the mx:Application element, the s:Application element does not have a default vertical layout. By default, all components placed in the s:application element are placed in the upper-left corner. (The s:VGroup container element was used in Listing 7 to resolve this issue.)
• Default background color: The default background color of the s:Application element is white, whereas the default background color of the mx:Application element is gray.
• Horizontal positioning: Unlike the mx:Application element which centers it components horizontally by default, the defaultposition of components placed in the s:Application element is the upper-left corner.

The spark s:VGroup element

As shown in Listing 7, the s:VGroup element can be used to arrange the components in a vertical sequence from top to bottom. However,placing components in an s:VGroup element does not cause them to be centered horizontally. Instead, by default, the components end up on theleft side of the container as shown in Figure 7. If you want the components to be centered, you must write additional code to cause that to happen.

The Flash Builder 4 Components tab

When you create a new Flex project in Flash Builder 4, if you specify the use of the Flex 3 compiler, the Components tab in the resulting IDE will look like Figure 4. However, if you specify the Flex 4 compiler when youcreate the new project, the Components tab will look like Figure 8.

Figure

Flex builder 4 components tab exposed.

Numerous differences

If you compare Figure 8 with Figure 4, you will see numerous differences between the two lists. Some of the names are the same and some of the names aredifferent. Even though some of the names are the same, most of the components that you see in Listing 8 are Flex 4 spark components and the components that you see inFigure 4 are Flex 3 mx components and they are represented by different classes in the class library.

However, as you will see later, the Image component in the Flex 4 Component list is actually a Flex 3 mx component. Thatmay also be the case for some of the other components as well.

Same name doesn't guarantee same appearance or same behavior

While the appearance and behavior of a Flex 4 spark component may be the same as the appearance andbehavior of a Flex 3 mx component with the same name, there is no guarantee that will be the case. They are entirely different components and the only way youcan be sure is to study the documentation.

As you saw earlier, the appearance of an mx:HSlider used inside an s:Application element is different from an mx:HSlider used inside an mx:Application element. Therefore, if the appearance and behavior of the components in yourproject are really critical, you should probably avoid mixing Flex 3 and Flex 4 components.