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

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 to know photocatalytic properties of tio2 nanoparticles...what to do now
Akash Reply
it is a goid question and i want to know the answer as well
characteristics of micro business
for teaching engĺish at school how nano technology help us
Do somebody tell me a best nano engineering book for beginners?
s. Reply
there is no specific books for beginners but there is book called principle of nanotechnology
what is fullerene does it is used to make bukky balls
Devang Reply
are you nano engineer ?
fullerene is a bucky ball aka Carbon 60 molecule. It was name by the architect Fuller. He design the geodesic dome. it resembles a soccer ball.
what is the actual application of fullerenes nowadays?
That is a great question Damian. best way to answer that question is to Google it. there are hundreds of applications for buck minister fullerenes, from medical to aerospace. you can also find plenty of research papers that will give you great detail on the potential applications of fullerenes.
what is the Synthesis, properties,and applications of carbon nano chemistry
Abhijith Reply
Mostly, they use nano carbon for electronics and for materials to be strengthened.
is Bucky paper clear?
carbon nanotubes has various application in fuel cells membrane, current research on cancer drug,and in electronics MEMS and NEMS etc
so some one know about replacing silicon atom with phosphorous in semiconductors device?
s. Reply
Yeah, it is a pain to say the least. You basically have to heat the substarte up to around 1000 degrees celcius then pass phosphene gas over top of it, which is explosive and toxic by the way, under very low pressure.
Do you know which machine is used to that process?
how to fabricate graphene ink ?
for screen printed electrodes ?
What is lattice structure?
s. Reply
of graphene you mean?
or in general
in general
Graphene has a hexagonal structure
On having this app for quite a bit time, Haven't realised there's a chat room in it.
what is biological synthesis of nanoparticles
Sanket Reply
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?