<< Chapter < Page Chapter >> Page >

The second project

The second project is named SliderChangeEvent02 . This project was developed using the Flex 4 compiler and Flash Builder 4. This is ahybrid project that uses classes from both the Flex 3 (mx) library and the Flex 4 (spark) library. The behavior of this project is similar to the behavior of the other project, but they look different in several ways that I will explain later.

The third project

The third project is named SliderChangeEvent03 . This project is a modification of the hybrid project in which the classes used are drawnexclusively from the Flex 4 spark library.

Order of upcoming explanations

I will explain the Flex 3 project named SliderChangeEvent01 in detail. Then I will explain the differences between that project and the hybrid projectnamed SliderChangeEvent02 . Finally, I will explain the differences between that project and the project named SliderChangeEvent03 .

SliderChangeEvent01 output image at startup

The project named SliderChangeEvent01 starts running in Flash Player with the image shown in Figure 1 appearing in the browser.

Browser image at startup for the flex 3 project.

Missing image.
Browser image at startup for the Flex 3 project.

The image that you see in Figure 1 consists of two Flex 3 Label controls, one Flex 3 HSlider control, and one Flex 3 Image control arranged vertically and centered in the browser window.

The Application container

All XML documents must have a root element. The root of a Flex 3 application is a container element that is oftencalled the Application container. (You can learn all about the Application container class at Adobe Flex 3.5 Language Reference .)

Briefly, the Application container, (which corresponds to the root element in the Flex XML code) , holds all other containers and components.

Vertical layout

By default, the Flex 3 Application container lays out all of its children vertically as shown in Figure 1. (As you will see later, this is not the case for the Flex 4 Application container.) The default vertical layout occurs when the layout attribute is not specified as is the case in this application. According to the Adobe Flex 3.5 Language Reference , the layout property:

"Specifies the layout mechanism used for this application. Applications can use "vertical", "horizontal", or "absolute" positioning.Vertical positioning lays out each child component vertically from the top of the application to the bottom in the specified order. Horizontal positioning lays out each child component horizontally from the left of the application tothe right in the specified order. Absolute positioning does no automatic layout and requires you to explicitly define the location of each childcomponent. The default value is vertical."

A toolTip on the slider

If you point to the slider with your mouse, a tool tip showing the word Height will appear as shown in Figure 2.

A tooltip on the slider.

Missing image.
A toolTip on the slider.

The slider's thumb

The little triangle that you see on the slider in these images is often referred to as the slider's thumb .

As you will see later, the position of the thumb is intended to represent the height of the image below the slider. The left end of the sliderrepresents a height of 100 pixels and the right end represents a height of 250 pixels (which just happens to be the actual height of the raw image) .

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, Introduction to xml. OpenStax CNX. Dec 02, 2014 Download for free at https://legacy.cnx.org/content/col11207/1.18
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Introduction to xml' conversation and receive update notifications?

Ask