<< 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

what is variations in raman spectra for nanomaterials
Jyoti Reply
I only see partial conversation and what's the question here!
Crow Reply
what about nanotechnology for water purification
RAW Reply
please someone correct me if I'm wrong but I think one can use nanoparticles, specially silver nanoparticles for water treatment.
yes that's correct
I think
what is the stm
Brian Reply
is there industrial application of fullrenes. What is the method to prepare fullrene on large scale.?
industrial application...? mmm I think on the medical side as drug carrier, but you should go deeper on your research, I may be wrong
How we are making nano material?
what is a peer
What is meant by 'nano scale'?
What is STMs full form?
scanning tunneling microscope
how nano science is used for hydrophobicity
Do u think that Graphene and Fullrene fiber can be used to make Air Plane body structure the lightest and strongest. Rafiq
what is differents between GO and RGO?
what is simplest way to understand the applications of nano robots used to detect the cancer affected cell of human body.? How this robot is carried to required site of body cell.? what will be the carrier material and how can be detected that correct delivery of drug is done Rafiq
what is Nano technology ?
Bob Reply
write examples of Nano molecule?
The nanotechnology is as new science, to scale nanometric
nanotechnology is the study, desing, synthesis, manipulation and application of materials and functional systems through control of matter at nanoscale
Is there any normative that regulates the use of silver nanoparticles?
Damian Reply
what king of growth are you checking .?
What fields keep nano created devices from performing or assimulating ? Magnetic fields ? Are do they assimilate ?
Stoney Reply
why we need to study biomolecules, molecular biology in nanotechnology?
Adin Reply
yes I'm doing my masters in nanotechnology, we are being studying all these domains as well..
what school?
biomolecules are e building blocks of every organics and inorganic materials.
anyone know any internet site where one can find nanotechnology papers?
Damian Reply
sciencedirect big data base
Introduction about quantum dots in nanotechnology
Praveena Reply
what does nano mean?
Anassong Reply
nano basically means 10^(-9). nanometer is a unit to measure length.
do you think it's worthwhile in the long term to study the effects and possibilities of nanotechnology on viral treatment?
Damian Reply
absolutely yes
how did you get the value of 2000N.What calculations are needed to arrive at it
Smarajit Reply
Privacy Information Security Software Version 1.1a
Got questions? Join the online conversation and get instant answers!
Jobilize.com Reply

Get the best Algebra and trigonometry course in your pocket!

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?