<< Chapter < Page Chapter >> Page >

Will explain the code in fragments

I will explain the code for this Flex application in fragments. A complete listing of the application is provided in Listing 6 near the end of thelesson.

Beginning of XML code for SliderChangeEvent01

The primary purpose of this application is to illustrate the use of inline event handling for Flex 3 slider change events.

The application begins in Listing 2 which shows the beginning of the Application element and the two complete Label elements shown at the top of Figure 1.

Beginning of xml code for sliderchangeevent01.

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Label text="Put your name here" fontSize="16" fontWeight="bold"/><mx:Label text="Image Height in Pixels" fontWeight="bold" fontSize="14"/>

Make it easy - drag and drop

The two Label elements were created by dragging Label controls from the Components tab shown in Figure 4 onto the Design tab shown in Figure 5. Then the attribute values were set using the Flex Properties tab shown in Figure 6.

The attributes shown in Listing 2 represent common properties of a text label and shouldn't require further explanation.

Create and condition the slider

Listing 3 adds a horizontal slider (HSlider) control to the application and sets the attributes that control both its appearance and itsbehavior.

Create and condition the slider.

<mx:HSlider minimum="100" maximum="250" value="250" toolTip="Height"change="myimg.height=event.currentTarget.value" liveDragging="true" />

The slider is a little more complicated than a label and deserves a more thorough explanation.

The numeric properties

Recall that a slider represents a range of numeric values. The position of the thumb at any instant in time selects a value from that range. Thefollowing three attributes shown in Listing 3 deal with the slider and its numeric range:

  • minimum - the numeric value represented by the left end of a horizontal slider.
  • maximum - the value represented by the right end of a horizontal slider.
  • value - the value that specifies the initial position of the thumb when the slider is constructed and first presented in the application'swindow.

The toolTip property

As you have probably already guessed, the value of the toolTip property specifies the text that appears in the tool tip when it is visible as shown in Figure 2.

The change property

This is where thing get a little more interesting. As the user moves the thumb to the left or right, the slider fires a continuous stream of change events. You might think of this as the slider yelling out "Hey, the position of my thumb has been changed." over and over as the thumb is being moved. (Also see the discussion of the liveDragging property later.)

An event handler

The value that is assigned to the change attribute in Listing 3 is often referred to as an event handler . This value specifies what the application will do each time the slider fires a change event.

Three ways to handle events in Flex

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