3.4 Handling slider change events in flex 3 and flex 4

Table of contents

• Preface
  • General
  • Viewing tip
    • Figures
    • Listings
  • Supplemental material
• General background information
• Preview
• Discussion and sample code
  • The Flex 3 project named SliderChangeEvent01
  • The hybrid Flex3-4 project named SliderChangeEvent02
  • The Flex 4 project named SliderChangeEvent03
• Run the programs
• Resources
• Complete program listings
• Miscellaneous

Preface

General

This lesson is part of a series of tutorial lessons dedicated to programming with Adobe Flex. The material in this lesson applies to both Flex 3 and Flex 4.

Viewing tip

I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the figures andlistings while you are reading about them.

Figures

• Figure 1 . Browser image at startup for the Flex 3 project.
• Figure 2 . A toolTip on the slider.
• Figure 3 . Changing the height of the image.
• Figure 4 . Flex Builder 3 Components tab exposed.
• Figure 5 . Drag controls onto the Flex Builder 3 Design tab.
• Figure 6 . The Flex Builder 3 Properties tab exposed.
• Figure 7 . Browser image at startup for the hybrid project.
• Figure 8 . Flex Builder 4 Components tab exposed.
• Figure 9 . Drag controls onto the Flash Builder 4 Design tab.

Listings

• Listing 1 . XML code before setting properties forSliderChangeEvent01.
• Listing 2 . Beginning of XML code for SliderChangeEvent01.
• Listing 3 . Create and condition the slider.
• Listing 4 . Import an image.
• Listing 5 . Mxml code for the layout shown in Figure 9.
• Listing 6 . Complete listing of SliderChangeEvent01.
• Listing 7 . Complete listing of SliderChangeEvent02.
• Listing 8 . Complete listing of SliderChangeEvent03.

Supplemental material

I also recommend that you study the other lessons in my extensive collection of online programming tutorials. You will find a consolidated index at www.DickBaldwin.com .

General background information

If you learn how to program using ActionScript 3, you will probably integrate large amounts of ActionScript code into your Flex projects to provide complexevent handling. In the meantime, it is possible to provide simple event handlers in Flex by embedding a very small amount of ActionScript code in your Flex code.I will illustrate and explain that capability in this lesson.

Preview

I encourage you to run the online version of the programs from this lesson before continuing.

Three Flex projects

I will present and explain three Flex projects in this lesson. The first project is named SliderChangeEvent01 . This project was first developed using Flex Builder 3 and later developed using the Flex 3 compiler and Flash Builder 4.The results were essentially the same in both cases. This project uses classes from the Flex 3 (mx) library exclusively. (The screen shots shown in Figure 4, Figure 5, and Figure 6 are from Flex Builder 3.)