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

Resources

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>

Miscellaneous

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.

-end-

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