<< Chapter < Page Chapter >> Page >

No drag-and-drop support for hybrid projects

Another ramification of the fact that the components in Figure 8 are spark components is that you cannot create hybrid projects using drag-and-dropprogramming alone. If you drag the components in Figure 8 into the design pane of Flash Builder 4, your project will be populated with Flex 4 spark components.If you want the project to be populated with Flex 3 mx components, you will have to manually edit the mxml code to accomplish that. That may be another reason toavoid hybrid projects.

Drag-and-drop results

Figure 9 shows the results of dragging one VGroup layout, two Label controls, one HSlider control, and one Image control from the Flash Builder 4 Components panel into the Design panel.

Drag controls onto the flash builder 4 design tab.

Missing image.
Drag controls onto the Flash Builder 4 Design tab.

Compare Figure 9 with Figure 5 to see the differences in background color and layout.

Mxml code for the layout shown in Figure 9

Listing 5 shows the Flex 4 mxml code that corresponds to the layout shown in Figure 9.

Mxml code for the layout shown in figure 9.

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"><fx:Declarations><!-- Place non-visual elements (e.g., services, value objects) here --></fx:Declarations><s:VGroup x="0" y="0" width="200" height="200"><s:Label text="Label"/><s:Label text="Label"/><s:HSlider/><mx:Image/></s:VGroup></s:Application>

Mostly Flex 4 spark components

The most important thing to note about Listing 5 is that the VGroup , Label , and HSlider components that were dragged from the Component tab shown in Figure 8 into the Design panel shown in Figure 9 are all declared using the spark (s) namespace. Curiously, however, the Image control shows up in the code as mx:Image instead of s:Image .

The Flex 4 project named SliderChangeEvent03

Updating the mxml code in Listing 5 by applying the properties from Listing 7 to the Label and HSlider components produces the complete Flex 4 project named SliderChangeEvent03 shown in Listing 8.

If you run the online versions of SliderChangeEvent0 2 and SliderChangeEvent03 side-by-side in different browser windows, you will probably notice a fewsubtle differences in the look and feel of the two programs. Here are some of the differences that I have noticed:

  • There is less space between the labels and the slider in the Flex 4 version.
  • There is less space between the edge of the Flash window and the top and left ends of the labels and the slider in the Flex 4 version.
  • The overall length of the slider is shorter in the Flex 4 version.
  • The treatment of the little popup window that shows the value of the slider is different between the two. It has black letters on a cream-coloredbackground in the hybrid version as in Figure 3, but it has white letters on a black background in the Flex 4 version.

Run the programs

I encourage you to run the online versions of the programs from this lesson. Then copy the code from Listing 6, Listing 7, andListing 8. Use that code to create Flex projects of your own. Compile and run your projects. Experiment with the code,making changes, and observing the results of your changes. Make certain that you can explain why your changes behave as they do.


I will publish a list containing links to Flex resources as a separate document. Search for FlexResources in the Connexions search box.

Complete program listing

Complete listings of the programs discussed in this lesson are shown in Listing 6, Listing 7, and Listing 8 below.

Complete listing of sliderchangeevent01.

<?xml version="1.0" encoding="utf-8"?><!-- SliderChangeEvent01Illustrates the use of inline event handling for slider change events.--><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"/><mx:HSlider minimum="100" maximum="250" value="250" toolTip="Height"change="myimg.height=event.currentTarget.value" liveDragging="true" /><mx:Image id="myimg" source="@Embed('myimage.jpg')" height="250"></mx:Image></mx:Application>

Complete listing of sliderchangeevent02.

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"><s:VGroup><mx:Label text="Put your name here" fontSize="16"fontWeight="bold"/><mx:Label text="Image Height in Pixels"fontWeight="bold" fontSize="14"/><mx:HSlider minimum="100"maximum="250" value="250"toolTip="Height" change="myimg.height=event.currentTarget.value"liveDragging="true" /><mx:Image id="myimg" source="@Embed('myimage.jpg')"height="250"></mx:Image></s:VGroup></s:Application>

Complete listing of sliderchangeevent03.

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"><s:VGroup x="0" y="0" width="200" height="200"><s:Label text="Put your name here" fontSize="16"fontWeight="bold"/><s:Label text="Image Height in Pixels"fontWeight="bold" fontSize="14"/><s:HSlider minimum="100"maximum="250" value="250"toolTip="Height" change="myimg.height=event.currentTarget.value"liveDragging="true" /><mx:Image id="myimg" source="@Embed('myimage.jpg')" height="250"/></s:VGroup></s:Application>


Housekeeping material
  • Module name: Handling Slider Change Events in Flex 3 and Flex 4
  • Files:
    • Flex0104\Flex0104.htm
    • Flex0104\Connexions\FlexXhtml0104.htm
PDF disclaimer: Although the Connexions site makes it possible for you to download a PDF file for thismodule at no charge, and also makes it possible for you to purchase a pre-printed version of the PDF file, you should beaware that some of the HTML elements in this module may not translate well into PDF.


Questions & Answers

show that the set of all natural number form semi group under the composition of addition
Nikhil Reply
explain and give four Example hyperbolic function
Lukman Reply
⅗ ⅔½
The denominator of a certain fraction is 9 more than the numerator. If 6 is added to both terms of the fraction, the value of the fraction becomes 2/3. Find the original fraction. 2. The sum of the least and greatest of 3 consecutive integers is 60. What are the valu
1. x + 6 2 -------------- = _ x + 9 + 6 3 x + 6 3 ----------- x -- (cross multiply) x + 15 2 3(x + 6) = 2(x + 15) 3x + 18 = 2x + 30 (-2x from both) x + 18 = 30 (-18 from both) x = 12 Test: 12 + 6 18 2 -------------- = --- = --- 12 + 9 + 6 27 3
2. (x) + (x + 2) = 60 2x + 2 = 60 2x = 58 x = 29 29, 30, & 31
on number 2 question How did you got 2x +2
combine like terms. x + x + 2 is same as 2x + 2
Mark and Don are planning to sell each of their marble collections at a garage sale. If Don has 1 more than 3 times the number of marbles Mark has, how many does each boy have to sell if the total number of marbles is 113?
mariel Reply
Mark = x,. Don = 3x + 1 x + 3x + 1 = 113 4x = 112, x = 28 Mark = 28, Don = 85, 28 + 85 = 113
how do I set up the problem?
Harshika Reply
what is a solution set?
find the subring of gaussian integers?
hello, I am happy to help!
Shirley Reply
please can go further on polynomials quadratic
hi mam
I need quadratic equation link to Alpa Beta
Abdullahi Reply
find the value of 2x=32
Felix Reply
divide by 2 on each side of the equal sign to solve for x
Want to review on complex number 1.What are complex number 2.How to solve complex number problems.
yes i wantt to review
use the y -intercept and slope to sketch the graph of the equation y=6x
Only Reply
how do we prove the quadratic formular
Seidu Reply
please help me prove quadratic formula
hello, if you have a question about Algebra 2. I may be able to help. I am an Algebra 2 Teacher
Shirley Reply
thank you help me with how to prove the quadratic equation
may God blessed u for that. Please I want u to help me in sets.
what is math number
Tric Reply
x-2y+3z=-3 2x-y+z=7 -x+3y-z=6
Sidiki Reply
can you teacch how to solve that🙏
Solve for the first variable in one of the equations, then substitute the result into the other equation. Point For: (6111,4111,−411)(6111,4111,-411) Equation Form: x=6111,y=4111,z=−411x=6111,y=4111,z=-411
x=61/11 y=41/11 z=−4/11 x=61/11 y=41/11 z=-4/11
Need help solving this problem (2/7)^-2
Simone Reply
what is the coefficient of -4×
Mehri Reply
A soccer field is a rectangle 130 meters wide and 110 meters long. The coach asks players to run from one corner to the other corner diagonally across. What is that distance, to the nearest tenths place.
Kimberly Reply
Jeannette has $5 and $10 bills in her wallet. The number of fives is three more than six times the number of tens. Let t represent the number of tens. Write an expression for the number of fives.
August Reply
What is the expressiin for seven less than four times the number of nickels
Leonardo Reply
How do i figure this problem out.
how do you translate this in Algebraic Expressions
linda Reply
why surface tension is zero at critical temperature
I think if critical temperature denote high temperature then a liquid stats boils that time the water stats to evaporate so some moles of h2o to up and due to high temp the bonding break they have low density so it can be a reason
Need to simplify the expresin. 3/7 (x+y)-1/7 (x-1)=
Crystal Reply
. After 3 months on a diet, Lisa had lost 12% of her original weight. She lost 21 pounds. What was Lisa's original weight?
Chris Reply
Got questions? Join the online conversation and get instant answers!
Jobilize.com Reply

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play

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?