| << 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.
<?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.
<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:
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
Notification Switch
Would you like to follow the 'Introduction to xml' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|