744 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

We first look at the user interface part of weather.mxml (lines 158–232). Line 158 begins the user interface definition with a Panel, which holds an Accordion. In the Accor- dion (lines 159–231), there are two VBoxes, one for the Forecast View section (lines 161– 217) and one for the Map View section (lines 218–230). The Forecast View VBox holds a ApplicationControlBar (lines 162–169) that contains the zipcode TextInput box, the Get Weather Button and a ProgressBar that notifies the user that the web service call is

213 <mx:Image id = “weatherImage4” /> 214 <mx:Text id = “weatherTemp4” /> 215 </mx:VBox> 216 </mx:HBox> 217 </mx:VBox> 218 <mx:VBox label = “Map View” width = “100%” height = “100%"> 219 220 <yahoo:YahooMapService id = “yahooMap” UUID = “{ UUID }” 221 swfDomId = “{ swfDomID }” 222 apiId = “{ YahooAPIKey }” 223 mapURL = “{ mapURL }” width = “600” height = “400” /> 224 mx:HBox 225 <mx:Button label = “Back” 226 click = “accordion.selectedIndex=0;” /> 227 <mx:Button label = “Clear” 228 click = “mapController.removeAllMarkers();” /> 229 </mx:HBox> 230 </mx:VBox> 231 </mx:Accordion> 232 </mx:Panel> 233 </mx:Application>

Fig. 18.16 | Forecast View of five-day weather forecast for Boston, MA.

Fig. 18.15 | Weather Forecast application in Flex 2. (Part 5 of 5.)

18.5 Interacting with Server-Side Applications 745

being processed. The ProgressBar element allows you to give the user an idea of an oper- ation’s state. We set the indeterminate attribute of this ProgressBar to true because the application doesn’t know when the web service call will complete.

The VBox also holds an HBox (lines 179–216) that contains the five-day forecast. Each day’s forecast is held in a VBox that displays the date, an image representing the weather, and the high and low temperature in Fahrenheit. The HBox containing the forecast is not initially visible (line 180) because we do not want to see the borders of its VBoxes before there is any content. It also has the attributes showEffect and hideEffect (lines 180– 181). These tell Flex which animation to use when the element is shown or hidden. These animations (lines 132–142) use the Parallel element to play effects simultaneously. Each Parallel element contains two effects, Fade and Zoom. The Map View VBox (lines 218– 230) contains the YahooMapService element, as well as two Buttons. The first Button

simply returns the user to the Forecast View, and the second Button tells the YahooMap-

Service object to remove any markers from the map. The weatherService WebService element (lines 145–155) specifies the URL of the

Web Services Description Language (WSDL) file for the web service. A WSDL file is an XML file describing what services are available on a server, how to consume those services, what parameters they accept and what they return. Flex uses this WSDL file to make it easy to access the services without further configuration. We specify the fault event han- dler for the web service (line 147) to show an Alert dialog, and the result event handler to be weatherResultHandler (line 148). We then describe a specific method using the operation element (lines 150–154), which specifies the name of the method (GetWeath-

Fig. 18.17 | Map View of 5-Day Weather Forecast for Boston, MA.

746 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

erByZipCode), and the desired format of the result (e4x). One way to send parameters to the web service is to enclose request elements in the operation element. In this case, the ZipCode parameter is bound to the text property of the zipcode TextInput. Alterna- tively, you can specify the parameters when you actually make the web service call using the same syntax that is used to send parameters to a function.

ActionScript for Weather Application A Script element (lines 10–129) contains most of this application’s ActionScript. Because the code is located in a CDATA section, the MXML compiler knows not to parse this section as XML in case it contains any reserved characters, such as angle brackets (< and >), that might confuse the compiler. In this section, we define the default XML namespace to be http://www.webservicex.net (line 20). This prevents us from having to specify this namespace every time we access the XML returned by the web service. Function getWeather (lines 32–48) is invoked when getWeatherButton is clicked. It first disables getWeatherButton and sets the busy cursor. It then hides the HBox containing the forecast data, because it is about to be changed, and resets placeNameText. It continues by showing the loadingBar ProgressBar (line 44) and finally requests the weather data through weatherService.GetWeatherByZipCode’s send method (line 47).

Method weatherResultHandler (lines 50–109) is called upon completion of this request. It first saves the web service’s result as an XML object (line 53). It then checks whether the result is valid by seeing if the StateCode returned by the service is not empty. If it is empty, an Alert (line 102) will notify the user that the zip code is invalid. If the StateCode exists, that indicates that the zip code was valid, and that we have received weather data. In this case, the program continues to set placeNameText (line 63) based on the city and state returned by the service, traversing the XML’s tree down to the PlaceName and StateCode items using dot operators (lines 60–62). Next, it displays the data for each data with multiple calls to the setData function (lines 66–70).

This function (lines 111–127) sets the source URL of the forecast image for a given day to the URL in the XML’s corresponding WeatherImage element (lines 115–116). The first WeatherImage in the XML has an index of 0. We apply a similar technique to populate the high and low temperature (lines 119–122) and the date for a given day (lines 125– 126). Lines 75–78 save today’s high and low temperature, as well as the five-day forecast, as strings for use in the map marker.

Finally, we place a marker on the map using mapController’s addCustomPOIMarker function (lines 93–95). We specify the location of the marker to be the zip code we obtained data for, and title of the marker to be the name of that town or city, as well as today’s high and low temperature. The body of the marker is set to display the five-day forecast. The setCenterByAddressAndZoom function (lines 97–98) zooms in and centers the map on the zip code’s location. The function finally hides the ProgressBar, removes the busy cursor, and enables getWeatherButton.

The map.as ActionScript file (Fig. 18.18) handles the map functionality of the weather application. You need to copy the Yahoo! Map com folder and as2map.swf file into the application’s base directory, just as we did for the addressBook application. This version of map.as contains the same initMap, onMapLoaded and onMapError functions as addressBook’s version of map.as, but doesn’t include the function setMarkerByAddress. The only other change is the swfDomID, which is set to weather (line 10).

18.5 Interacting with Server-Side Applications 747

1 // Fig. 18.18: map.as 2 // Handle the map functions for the Weather application 3 import mx.managers.CursorManager; 4 import com.yahoo.webapis.maps.methodgroups.*; 5 import mx.controls.Alert; 6 7 // define constants 8 9 private const UUID : int = Math.random() * 10000;

10 11 // YahooAPIKey string must be your own from developer.yahoo.com 12 private const YahooAPIKey : String = “Your Yahoo API Key Here”; 13 private const mapURL : String = “as2map.swf”; 14 private var mapController : MapController; 15 16 private function initMap() : void 17 { 18 CursorManager.setBusyCursor(); // turn on busy cursor 19 20 // wait for map to load, then call onMapLoaded method 21 yahooMap.addEventListener( ‘onMapLoad’, onMapLoaded ); 22 yahooMap.addEventListener( ‘onMapError’, onMapError ); 23 } // end function initMap 24 25 // handle map after it has loaded 26 public function onMapLoaded( event : Object ) : void 27 { 28 // instantiate map controller 29 mapController = new MapController( yahooMap ); 30 31 // instantiate panTool method 32 var panTools : PanTool = new PanTool( yahooMap ); 33 34 // allow user to pan across the map 35 panTools.setPanTool( true ); 36 37 // instantiate the maps widget class 38 var widgets : Widgets = new Widgets( yahooMap ); 39 40 // activate Navigator widget 41 widgets.showNavigatorWidget(); 42 43 // activate map-type selection widget 44 widgets.showSatelliteControlWidget(); 45 46 // turn off busy cursor 47 CursorManager.removeBusyCursor(); 48 } // end function onMapLoaded 49 50 public function onMapError( errorCode:String, httpStatus:String ) : void 51 { 52 Alert.show(errorCode + ‘\n’ + httpStatus, ‘Map Load Error’); 53 } // end function onMapError

Fig. 18.18 | Handle the map functions for the Weather application.

private const swfDomID : String = “weather”;

748 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

18.6 Customizing Your User Interface Flex allows you to customize the style of your user interface. Just as in XHTML, you can include the styles inline, put them in a separate style section, or place them in a separate style-sheet file. The syntax is similar to that of CSS, but the names of the properties are different when used inline. Here, we add a style section and an inline style to our cover- Viewer application (Fig. 18.19). You can try this application at test.deitel.com/

examples/iw3htp4/flex/coverViewerStyles/. The first change we make is to add a Style element (lines 7–15). Inside the Style

element is a format virtually identical to CSS (Chapter 5). We first give all LinkButton and HorizontalList elements custom styles, by setting the font family, size and color. We specify a custom style by using a dot before the style name, customStyle. We can then apply that style to any eligible element by adding a styleName = “customStyle” attribute, as we do in line 101. Finally, we can specify a style inline as we do for the Panel element (lines 74–76). Some of the names of the inline style attributes are different from those in the Style element and in CSS, using a camel-case naming convention instead of hyphen- ation (e.g. font-family becomes fontFamily).

1 2 3 4 <mx:Application xmlns:mx = “http://www.adobe.com/2006/mxml"> 5 6 7 8 9

10 11 12 13 14 15 16 17 18 mx:Script 19 <![CDATA[ 20 // import the Cubic easing function for state transitions 21 import mx.effects.easing.Cubic; 22 ]]> 23 </mx:Script> 24 25 26 <mx:ArrayCollection id = “bookCovers”> 27 28 <mx:Object name = “C How to Program” source = “chtp5.jpg” /> 29 <mx:Object name = “C++ How to Program” source = “cpphtp6.jpg” /> 30 <mx:Object name = “Internet How to Program” 31 source = “iw3htp4.jpg” /> 32 <mx:Object name = “Java How to Program” source = “jhtp7.jpg” />

Fig. 18.19 | Using a Style element and inline styles. (Part 1 of 4.)

mx:Style LinkButton { font-family: “Helvetica, sans-serif”;

font-size: 14 } HorizontalList { font-size: 12;

color: black } .customStyle { font-size: 16;

font-weight: bold; color: black }

</mx:Style>

18.6 Customizing Your User Interface 749

33 <mx:Object name = “VB How to Program” source = “vbhtp3.jpg” /> 34 <mx:Object name = “Visual C# How to Program” 35 source = “vcsharphtp2.jpg” /> 36 <mx:Object name = “Simply C++” source = “simplycpp.jpg” /> 37 <mx:Object name = “Simply VB 2005” source = “simplyvb2005.jpg” /> 38 <mx:Object name = “Simply Java” source = “simplyjava.jpg” /> 39 <mx:Object name = “Small C++ How to Program” 40 source = “smallcpphtp5.jpg” /> 41 <mx:Object name = “Small Java” source = “smalljavahtp6.jpg” /> 42 </mx:ArrayCollection> 43 44 45 mx:states 46 <mx:State name = “HideThumbnails”> 47 <mx:RemoveChild target = “{ thumbnailList }” /> 48 49 50 <mx:SetEventHandler target = “{ showHideButton }” name = “click” 51 handler = “currentState = ‘’” /> 52 </mx:State> 53 </mx:states> 54 55 56 mx:transitions 57 mx:Transition 58 <mx:Resize 59 targets = “{ [ thumbnailList, viewPanel, largeImage ] }” 60 duration = “750” easingFunction = “Cubic.easeOut” /> 61 </mx:Transition> 62 </mx:transitions> 63 64 65 <mx:Binding 66 source = “‘fullsize/’ + 67 bookCovers.getItemAt( selectCoverSlider.value ).source” 68 destination = “largeImage.source” /> 69 <mx:Binding source = “‘fullsize/’ + thumbnailList.selectedItem.source” 70 destination = “largeImage.source” /> 71 72 73 74 75 76 77 78 <mx:HBox height = “100%” width = “100%"> 79 <mx:VSlider id = “zoomSlider” value = “100” minimum = “0” 80 maximum = “100” liveDragging = “true” 81 change = “largeImage.percentWidth = zoomSlider.value; 82 largeImage.percentHeight = zoomSlider.value;” 83 height = “100%” width = “0%” 84 labels = “[ ‘0%’, ‘Zoom’, ‘100%’ ]” />

Fig. 18.19 | Using a Style element and inline styles. (Part 2 of 4.)

<mx:Panel id = “viewPanel” title = “Deitel Book Cover Viewer” width = “100%” height = “100%” horizontalAlign = “center” color = “blue” fontSize = “18” fontFamily = “Helvetica” textAlign = “center”>

750 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

85 <mx:VBox width = “100%” height = “100%” 86 horizontalAlign = “center”> 87 88 89 90 91 <mx:Image id = “largeImage” 92 source = "” 93 horizontalAlign = “center” 94 verticalAlign = “middle” 95 width = “100%” height = “100%” 96 completeEffect = “Fade” /> 97 98 99 100 101 102 </mx:VBox> 103 </mx:HBox> 104 105 106 <mx:HSlider id = “selectCoverSlider” height = “0%” 107 minimum = “0” maximum = “{ bookCovers.length - 1 }” 108 showDataTip = “false” snapInterval = “1” tickInterval = “1” 109 liveDragging = “true” 110 change = “thumbnailList.selectedIndex = 111 selectCoverSlider.value; 112 thumbnailList.scrollToIndex( selectCoverSlider.value )” /> 113 114 115 <mx:HorizontalList id = “thumbnailList” 116 dataProvider = “{ bookCovers }” width = “100%” height = “160” 117 selectedIndex = “0” 118 change = “selectCoverSlider.value = thumbnailList.selectedIndex”> 119 120 121 mx:itemRenderer 122 mx:Component 123 <mx:VBox width = “140” height = “160” 124 horizontalAlign = “center” verticalAlign = “middle” 125 verticalScrollPolicy = “off” 126 horizontalScrollPolicy = “off” paddingBottom = “20”> 127 128 129 <mx:Image source = “{ ’thumbs/’ + data.source }” 130 verticalAlign = “middle” /> 131 132 133 <mx:Label text = “{ data.name }” /> 134 </mx:VBox> 135 </mx:Component> 136 </mx:itemRenderer> 137 </mx:HorizontalList>

Fig. 18.19 | Using a Style element and inline styles. (Part 3 of 4.)

<mx:Label text = “{ thumbnailList.selectedItem.name }” styleName = “customStyle” />

18.6 Customizing Your User Interface 751

To specify an external style-sheet, which uses syntax identical to the contents of a Style element, you simply add a Style element with a source attribute pointing to the style-sheet file, as in <mx:Style source = “styles.css” />.

A great way to try out different styles is Adobe’s Flex Style Explorer, which you can find at weblogs.macromedia.com/mc/archives/FlexStyleExplorer.html. This allows

138 139 140 mx:ControlBar 141 <mx:LinkButton label = “Show/Hide Thumbnails” 142 click = “currentState = ‘HideThumbnails’;” 143 id = “showHideButton” /> 144 </mx:ControlBar> 145 </mx:Panel> 146 </mx:Application>

Fig. 18.19 | Using a Style element and inline styles. (Part 4 of 4.)

752 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

you to visually create styles for most Flex user interface elements and generate the CSS you need to apply that style to your application.

Another way to customize the look of your application is through themes. The default theme of Flex applications is Halo. Other themes available with the Flex 2 SDK are Halo Classic (the former default), Ice, Institutional, Smoke and Wooden. All of these are defined in CSS files, but some of them also reference outside images and SWF files. These theme files can be found in flex_sdk_2/frameworks/themes/. You can specify that you want your application to use any of these themes at compile time by adding a theme

parameter to the mxmlc command. Fig. 18.20 shows how to compile coverViewer.mxml

with the ice.css theme. You can see how it looks in Fig. 18.21.

18.7 Creating Charts and Graphs To use Flex’s charting components, you must first install Flex Charting. A trial version is available at www.adobe.com/go/tryflex. Installation instructions are available at www.ado- be.com/support/documentation/en/flex/2/install.html#installingcharts.

Fig. 18.20 | Running mxmlc with the theme parameter in Windows XP Command

Prompt.

Fig. 18.21 | Deitel Cover Viewer compiled with the Ice theme.

18.7 Creating Charts and Graphs 753

To demonstrate Flex’s charting capabilities, we’ve added a Chart View section to our weather application (Fig. 18.22) and populated it with two charts. The first is a Line-

Chart that separately plots the high and low temperatures against the date. The user can mouse over any point of data and a data tip will tell the user whether it is a high or low temperature, the date and the temperature. The second chart is a CandlestickChart, dis- playing the range of temperatures for each day. This element also uses data tips to show greater detail. You can test a live version of this application at test.deitel.com/exam- ples/iw3htp4/flex/weatherChart/.

A chart is just another type of user interface element. In addition to the chart types mentioned in Section 18.2, a full list of charting components is available from Adobe at livedocs.adobe.com/flex/201/html/charts_intro_108_03.html.

Figure 18.23 is a listing of the weather application with charting capabilities added. The first change we make in the code is to create an ArrayCollection to make our weather data available to a chart. To do this, we add the code [Bindable] public var

weatherArray : ArrayCollection; in lines 31–32. We want it to be Bindable so that whenever the ArrayCollection is changed, the chart updates automatically. Next, we add lines 47 and 70 to create text showing the place name in the Chart View that acts just like the text in our Forecast View. We also add line 182 to animate changes in a chart’s data.

Fig. 18.22 | Chart View showing Boston, MA, forecast.

754 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

1 2 3 4 <mx:Application xmlns:mx = “http://www.adobe.com/2006/mxml" 5 layout = “absolute” 6 xmlns = “*” xmlns:yahoo = “com.yahoo.webapis.maps.*” 7 creationComplete = “initMap();” > 8 9 <mx:Script source = “map.as” />

10 11 mx:Script 12 <![CDATA[ 13 import mx.controls.dataGridClasses.DataGridColumn; 14 import mx.rpc.events.ResultEvent; 15 import mx.managers.CursorManager; 16 import mx.controls.Alert; 17 import mx.collections.ArrayCollection; 18 import flash.events.MouseEvent; 19 20 // define default namespace so we don’t have to write it every time 21 default xml namespace = “http://www.webservicex.net”; 22 23 [Bindable] 24 private var xmlData : XML; 25 [Bindable] 26 private var highLowTemp : String; 27 [Bindable] 28 private var fiveDayForecast : String = “”; 29 [Bindable] 30 public var weatherArray : ArrayCollection; 31 32 33 34 // handle getWeatherButton click action 35 private function getWeather() : void 36 { 37 // disable button while request is pending 38 getWeatherButton.enabled = false; 39 40 // hide the old forecast data before displaying new data 41 forecastBox.visible = false; 42 43 // reset place name while loading new data 44 placeNameText.text = “”; 45 46 // reset place name while loading new data 47 48 49 // show the loading progress bar 50 loadingBar.visible = true; 51

Fig. 18.23 | Charting weather data in Flex 2. (Part 1 of 6.)

[Bindable] private var placeName : String;

placeNameChartText.text = “”;

18.7 Creating Charts and Graphs 755

52 // request the new data 53 weatherService.GetWeatherByZipCode.send(); 54 } // end function getWeather 55 56 private function weatherResultHandler(event : ResultEvent) : void 57 { 58 // save the result of the web service as XML 59 xmlData = XML( event.result ); 60 61 // check that result is valid by checking length of StateCode 62 if ( xmlData.GetWeatherByZipCodeResult[ 0 ]. 63 StateCode.text().length() != 0 ) 64 { 65 // set placeNameText to the city and state of the zip code 66 placeName = xmlData.GetWeatherByZipCodeResult[ 0 ]. 67 PlaceName.text() + “, " + 68 xmlData.GetWeatherByZipCodeResult[ 0 ].StateCode.text(); 69 placeNameText.text = “5 Day Forecast for " + placeName; 70 71 72 // set image, temperature and date for each day 73 setData( weatherImage0, weatherTemp0, weatherDay0, 0 ); 74 setData( weatherImage1, weatherTemp1, weatherDay1, 1 ); 75 setData( weatherImage2, weatherTemp2, weatherDay2, 2 ); 76 setData( weatherImage3, weatherTemp3, weatherDay3, 3 ); 77 setData( weatherImage4, weatherTemp4, weatherDay4, 4 ); 78 79 forecastBox.visible = true; 80 81 // save today’s high/low as a string 82 highLowTemp = xmlData.GetWeatherByZipCodeResult. 83 Details.WeatherData.MaxTemperatureF[ 0 ].text() + 84 “/” + xmlData.GetWeatherByZipCodeResult.Details. 85 WeatherData.MinTemperatureF[ 0 ].text(); 86 87 // save the five-day forecast as a string 88 fiveDayForecast = highLowTemp; 89 90 for ( var i : int = 1; i < 5; i++ ) 91 { 92 fiveDayForecast += “, " + xmlData. 93 GetWeatherByZipCodeResult.Details.WeatherData. 94 MaxTemperatureF[ i ].text() + “/” + xmlData. 95 GetWeatherByZipCodeResult.Details. 96 WeatherData.MinTemperatureF[ i ].text(); 97 } // end for 98 99 // place a marker on the map with the forecast 100 mapController.addCustomPOIMarker( 101 zipcode.text, placeName, highLowTemp, fiveDayForecast, 102 0x990099, 0xFFFFFF); 103

Fig. 18.23 | Charting weather data in Flex 2. (Part 2 of 6.)

placeNameChartText.text = “5 Day Forecast for " + placeName;

756 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

104 mapController.setCenterByAddressAndZoom( 105 zipcode.text, 7, 0 ); 106 107 // begin charting functionality 108 109 // saves date, high and low temp into an ArrayCollection 110 // so it can act as a chart’s dataProvider 111 112 113 114 115 116 { 117 // create the object to be added to the array 118 119 120 // extract the data from the e4x-formatted result 121 122 123 124 125 126 127 128 129 130 131 132 133 // add the object to the array 134 135 } //end for 136 // end charting functionality 137 } 138 else 139 { 140 141 } 142 // hide the loading progress bar 143 loadingBar.visible = false; 144 145 // enable getWeatherButton 146 getWeatherButton.enabled = true; 147 } // end function weatherResultHandler 148 149 private function setData( forecastImage : Image, 150 tempText : Text, dateText : Text, i : int ) : void 151 { 152 // set the image for each day 153 forecastImage.source = xmlData.GetWeatherByZipCodeResult. 154 Details.WeatherData.WeatherImage[ i ].text(); 155

Fig. 18.23 | Charting weather data in Flex 2. (Part 3 of 6.)

weatherArray = new ArrayCollection( );

for ( var j : int = 0; j < weatherService.GetWeatherByZipCode. lastResult.GetWeatherByZipCodeResult.Details. WeatherData.length(); j++ )

var weatherDataObject : Object = new Object();

weatherDataObject.Date = weatherService. GetWeatherByZipCode.lastResult. GetWeatherByZipCodeResult.Details.WeatherData[ j ].Day;

weatherDataObject.HighTemp = weatherService. GetWeatherByZipCode.lastResult. GetWeatherByZipCodeResult.Details. WeatherData[ j ].MaxTemperatureF;

weatherDataObject.LowTemp = weatherService. GetWeatherByZipCode.lastResult. GetWeatherByZipCodeResult.Details. WeatherData[ j ].MinTemperatureF;

weatherArray.addItem( weatherDataObject );

Alert.show( “Invalid zip code” );

18.7 Creating Charts and Graphs 757

156 // set the temperature for each day 157 tempText.text = xmlData.GetWeatherByZipCodeResult. 158 Details.WeatherData.MaxTemperatureF[ i ].text() + 159 “\n” + xmlData.GetWeatherByZipCodeResult.Details. 160 WeatherData.MinTemperatureF[ i ].text(); 161 162 // set the date for each day 163 dateText.text = xmlData.GetWeatherByZipCodeResult. 164 Details.WeatherData.Day[ i ].text(); 165 } 166 ]]> 167 </mx:Script> 168 169 170 <mx:Parallel id = “forecastAnimationIn”> 171 <mx:Fade duration = “1000” alphaFrom = “0.0” alphaTo = “1.0” /> 172 <mx:Zoom zoomWidthTo = “1” zoomHeightTo = “1” zoomWidthFrom = “0” 173 zoomHeightFrom = “0” /> 174 </mx:Parallel> 175 176 <mx:Parallel id = “forecastAnimationOut”> 177 <mx:Fade duration = “500” alphaFrom = “1.0” alphaTo = “0.0” /> 178 <mx:Zoom zoomWidthTo = “0” zoomHeightTo = “0” zoomWidthFrom = “1” 179 zoomHeightFrom = “1” /> 180 </mx:Parallel> 181 182 183 184 185 <mx:WebService id = “weatherService” 186 wsdl = “http://www.webservicex.net/WeatherForecast.asmx?WSDL" 187 fault = “Alert.show( event.fault.faultString )” 188 result = “weatherResultHandler( event )” 189 showBusyCursor = “true”> 190 <mx:operation name = “GetWeatherByZipCode” resultFormat = “e4x”> 191 mx:request 192 { zipcode.text } 193 </mx:request> 194 </mx:operation> 195 </mx:WebService> 196 197 198 <mx:Panel title = “Weather” width = “100%” height = “100%"> 199 <mx:Accordion id = “accordion” width = “100%” height = “100%” 200 creationPolicy = “all”> 201 <mx:VBox label = “Forecast View” width = “100%” height = “100%"> 202 <mx:ApplicationControlBar 203 defaultButton = “{ getWeatherButton }"> 204 <mx:Label width = “100%” 205 text = “Enter a zip code:” /> 206 <mx:TextInput id = “zipcode” left = “10” /> 207 <mx:Button id = “getWeatherButton” label = “Get Weather” 208 click = “getWeather()” left = “10” />

Fig. 18.23 | Charting weather data in Flex 2. (Part 4 of 6.)

<mx:SeriesInterpolate id = “interpolateEffect” duration = “1000” />

758 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

209 </mx:ApplicationControlBar> 210 211 <mx:Text fontWeight = “bold” id = “placeNameText” /> 212 <mx:ProgressBar id = “loadingBar” indeterminate = “true” 213 labelPlacement = “bottom” visible = “false” minimum = “0” 214 maximum = “100” label = “Loading Weather Data” 215 direction = “right” width = “75%” /> 216 217 218 219 <mx:HBox id = “forecastBox” width = “100%” height = “100%” 220 visible = “false” showEffect = “{ forecastAnimationIn }” 221 hideEffect = “{ forecastAnimationOut }"> 222 <mx:VBox id = “forecastBox0” horizontalAlign = “center” 223 borderStyle = “solid” width = “20%” height = “0%"> 224 <mx:Text id = “weatherDay0” /> 225 <mx:Image id = “weatherImage0” /> 226 <mx:Text id = “weatherTemp0” /> 227 </mx:VBox> 228 229 <mx:VBox horizontalAlign = “center” 230 borderStyle = “solid” width = “20%"> 231 <mx:Text id = “weatherDay1” /> 232 <mx:Image id = “weatherImage1” /> 233 <mx:Text id = “weatherTemp1” /> 234 </mx:VBox> 235 236 <mx:VBox horizontalAlign = “center” 237 borderStyle = “solid” width = “20%"> 238 <mx:Text id = “weatherDay2” /> 239 <mx:Image id = “weatherImage2” /> 240 <mx:Text id = “weatherTemp2” /> 241 </mx:VBox> 242 243 <mx:VBox horizontalAlign = “center” 244 borderStyle = “solid” width = “20%"> 245 <mx:Text id = “weatherDay3” /> 246 <mx:Image id = “weatherImage3” /> 247 <mx:Text id = “weatherTemp3” /> 248 </mx:VBox> 249 250 <mx:VBox horizontalAlign = “center” 251 borderStyle = “solid” width = “20%"> 252 <mx:Text id = “weatherDay4” /> 253 <mx:Image id = “weatherImage4” /> 254 <mx:Text id = “weatherTemp4” /> 255 </mx:VBox> 256 </mx:HBox> 257 </mx:VBox> 258 <mx:VBox label = “Map View” width = “100%” height = “100%"> 259 260 <yahoo:YahooMapService id = “yahooMap” UUID = “{ UUID }” 261 swfDomId = “{ swfDomID }”

Fig. 18.23 | Charting weather data in Flex 2. (Part 5 of 6.)

18.7 Creating Charts and Graphs 759

262 apiId = “{ YahooAPIKey }” 263 mapURL = “{ mapURL }” width = “600” height = “400” /> 264 mx:HBox 265 <mx:Button label = “Back” 266 click = “accordion.selectedIndex=0;” /> 267 <mx:Button label = “Clear” 268 click = “mapController.removeAllMarkers();” /> 269 </mx:HBox> 270 </mx:VBox> 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 </mx:Accordion> 312 </mx:Panel> 313 </mx:Application>

Fig. 18.23 | Charting weather data in Flex 2. (Part 6 of 6.)

<mx:VBox label = “Chart View” width = “100%” height = “100%"> <mx:Text fontWeight = “bold” id = “placeNameChartText” /> <mx:LineChart id = “lineChart” width = “100%” height = “100%”

dataProvider = “{ weatherArray }” showDataTips = “true”> mx:verticalAxis

<mx:LinearAxis baseAtZero = “false” /> </mx:verticalAxis> mx:horizontalAxis

<mx:CategoryAxis categoryField = “Date” title = “Date” />

</mx:horizontalAxis> mx:series

<mx:LineSeries yField = “HighTemp” displayName = “High Temp” showDataEffect = “{ interpolateEffect }” />

<mx:LineSeries yField = “LowTemp” displayName = “Low Temp” showDataEffect = “{ interpolateEffect }” />

</mx:series> </mx:LineChart> <mx:CandlestickChart id = “candlestickChart” width = “100%”

height = “100%” showDataTips = “true” dataProvider = “{ weatherArray }"> mx:verticalAxis

<mx:LinearAxis baseAtZero = “false” /> </mx:verticalAxis> mx:horizontalAxis

<mx:CategoryAxis categoryField = “Date” title = “Date”/>

</mx:horizontalAxis> mx:series

<mx:CandlestickSeries openField = “HighTemp” highField = “HighTemp” lowField = “LowTemp” closeField = “LowTemp” showDataEffect = “{ interpolateEffect }” />

</mx:series> </mx:CandlestickChart>

</mx:VBox>

760 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

Lines 113–135 declare a for statement that iterates over the WeatherData objects returned by the weatherService WebService. Inside the for statement, we create a weatherDataObject and give it the attributes Date, HighTemp, and LowTemp (lines 121– 131). We give these attributes values from the XML returned by the web service. Finally, we add each weatherDataObject to weatherArray (line 134).

We also add a new pane in the Accordion for our chart, a VBox called Chart View (lines 273–310). This contains a Text element called placeNameChartText (line 274). This ele- ment serves an identical purpose to placeNameText (line 211). Next, we add a LineChart

element (lines 275–292). This LineChart has the dataProvider attribute set to { weath-

erArray } to indicate that the data presented in the chart is bound to weatherArray. We also specify that showDataTips is true (line 276), meaning that when the user mouses over a data point on the graph, a data tip will pop up, giving the user more detailed information about that point. Line 278 specifies that the baseAtZero attribute of the verticalAxis’ LinearAxis is false. This way, the graph displays the range of temperatures only from lowest to highest, rather than starting at zero. Inside the horizontalAxis element (lines 280–283), we specify one CategoryAxis named Date. The CategoryAxis’ category- Field attribute is set to “Date”, meaning that the axis receives data from the Date field of weatherArray. Next, we specify LineSeries elements, located in the series element (lines 284–291). The first LineSeries’ yField attribute is set to “HighTemp”, which means that the LineSeries gets its data from the HighTemp field of weatherArray. We also set showDataEffect to “{ interpolateEffect }”. This calls the interpolateEffect

SeriesEffect that we created every time the data is updated. We also create a second LineSeries displaying LowTemp from weatherArray, using the same effect.

The second chart is a CandlestickChart (lines 293–309). This chart also sets show- DataTips to “true” and uses the same dataProvider (weatherArray). It also sets the ver- ticalAxis’ baseAtZero attribute to “false” and has a horizontalAxis that displays the Date. In the CandlestickChart’s series element (lines 303–307) is a Candlestick-

Series with several attributes. The four attributes that define the data it displays are open- Field, highField, lowField and closeField. A CandlestickChart is designed to display financial data, such as stock prices. Therefore, it requires a start value and end value in addition to a high and low value. Since we have only high and low data for the weather, we place HighTemp in both openField and highField. Similarly, we place LowTemp in both closeField and lowField. We use interpolateEffect as the showDataEffect. Finally, the swfDomID constant in map.as must point to the filename of our application without .swf (in this case, weatherChart).

18.8 Connection-Independent RIAs on the Desktop: Adobe Integrated Runtime (AIR) The Adobe Integrated Runtime (AIR) allows developers to deploy Ajax, Flash and Flex web applications to the desktop. It requires the user to download and install the runtime (planned to be between 5 and 9 MB). Once installed, the user can download and run AIR applications as if they were native desktop applications, including running them while dis- connected from the server. This ability to function while disconnected is similar to that of Google’s Gears.5

5. Information on Google Gears can be found at code.google.com/apis/gears/.

18.9 Flex 3 Beta 761

AIR (as of the Beta version) supports Mac OS X 10.4.8 and up, Windows XP with Service Pack 2 (SP2) and Windows Vista. Adobe plans to add Linux support “shortly after the 1.0. release”.6 AIR uses Flash Player 9 as well as the the open source WebKit HTML rendering and JavaScript engine (also found in Apple’s Safari and KDE’s Konqueror browsers).

AIR provides an API for file input and output, a SQLite embedded database, win- dowing support, and file-type association (so that you can make it the operating system’s default application for a type of document). It is also planned to support native menus (the Beta version supports this for Mac OS X), and contextual (right click) menus.

Adobe’s AIR web page is currently located at labs.adobe.com/technologies/air/. From there, you will find links to learn more about AIR, download the runtime environ- ment, download the SDK, and try sample applications.

18.9 Flex 3 Beta At the time of publication, Flex 3 was in beta. The Flex 3 beta homepage is labs.ado- be.com/technologies/flex/. The final version of Flex 3 is planned to be released in Q4 20077. You can download the Flex SDK beta from labs.adobe.com/technologies/

flex/sdk/flex3sdk.html. Install instructions are available at labs.adobe.com/wiki/

index.php/Flex_3:Release_Notes#Installation_Instructions. An introduction to the features planned for Flex 3 is available at labs.adobe.com/

wiki/index.php/Flex_3:Feature_Introductions. Flex Builder 3, for instance, will add a wizard to easily consume web services, improve the user interface designer, and also add support for AIR development. Some of the new features are discussed at www.adobe.com/ devnet/flex/articles/flex3_whatsnew.html.

18.10 Wrap-Up In this chapter, you learned how to describe Flex applications using MXML, how to com- pile them, and how to embed them in web pages. You also learned how to use ActionScript 3 to manipulate data and programatically control the user interface. Finally, you learned how to consume web services in Flex and present data from those web services in a visual and interactive manner. In the next chapter, you’ll learn about Microsoft’s new RIA tech- nology—Silverlight.

18.11 Web Resources www.deitel.com/flex The Deitel Flex Resource Center contains many resources, downloads, tutorials, documentation, books, e-books, articles, blogs and more that will help you develop Flex applications. The Deitel Flex Resource Center will provide you resources to allow you to pursue more advanced Flex program- ming.

6. From labs.adobe.com/wiki/index.php/AIR:Developer_FAQ. 7. From flexwiki.adobe.com/confluence/display/ADOBE/Flex+3+Planning.

762 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

Summary Section 18.1 Introduction • Flex uses Adobe’s ubiquitous Flash platform to deliver a rich graphical user interface backed by

ActionScript 3, Adobe’s implementation of ECMAScript 4 (better known as JavaScript 2).

• The term Rich Internet Application (RIA) was coined in 2001 by Macromedia, the creator of Flash and Flex.

• Flash has the advantage of a large installed base. This allows applications developed in Flex to be used on most Windows, Mac and Linux computers.

• Because the Flash engine is virtually equivalent no matter what the browser or platform, Flex de- velopers avoid having to deal with the cross-platform conflicts of Ajax and even Java.

• Flex user interfaces are easily described using the MXML markup language.

• MXML is compiled into Flash’s executable SWF format.

Section 18.2 Flex Platform Overview • Flash 9 provides the ActionScript Virtual Machine and graphical capabilities that allow Flex ap-

plications to run.

• Flex’s user interface elements are much richer and more consistent than those of HTML and AJAX, because they’re rendered by the Flash player the same way on all platforms.

• The Flex development environment is programming-centric in contrast to the animation-centric Flash development environment.

• In addition to describing user interfaces, MXML allows for the description of web services, data objects, visual effects and more.

• The root element of every MXML application is mx:Application, inside which all Flex ele- ments reside.

• The Flex SDK available at www.adobe.com/products/flex/downloads/ includes an MXML compiler and debugger, the Flex framework, and user interface components and some templates and examples.

• ActionScript 3 is Adobe’s object-oriented scripting language, forming the basis of Flash 9 and the associated Flex 2 technology.

• ActionScript 3 uses an asynchronous programming model. This means that the program will continue to execute while another operation is being completed, such as a call to a web service. This ensures that the user interface is responsive even while the application is busy processing data, an important feature of Ajax.

• In many cases, you’ll need to take advantage of event handling and data binding to handle asyn- chronous operations.

• Flex Builder is Adobe’s graphical IDE for Flex applications.

• Adobe LiveCycle Data Services ES, formerly Flex Data Services, extends Flex’s built-in messag- ing to enable data push and synchronization. It also gives Flex applications the ability to handle disconnection from the server and synchronizing of data upon reconnection.

• Flex Charting provides an extensible library of plotting and graphing elements, including pie charts, line graphs, bar graphs, bubble charts and plots, as well as visually stunning animations that can present the user with a dynamic representation of data.

Section 18.3 Creating a Simple User Interface • The first line of an MXML file declares the document to be an XML document, because MXML

is a type of XML.

Summary 763

• The mx namespace is commonly used for the Flex elements in an MXML document.

• The VSlider element provides a vertically oriented slider user interface element.

• The HSlider is the horizontal equivalent of the VSlider.

• The value attribute of a slider sets its initial value.

• The minimum and maximum attributes set the range of values you can select with a slider.

• The change attribute specifies ActionScript to execute whenever the user changes a slider’s value.

• A slider’s liveDragging = “true” attribute causes the ActionScript in the change attribute to ex- ecute when the user changes the slider value, even if the user is still clicking the slider.

• The labels attribute of a slider places text next to itself.

• The showDataTip attribute allows you to turn off the tool tip showing the current value of the slider while the user is dragging it.

• The snapInterval attribute specifies the possible increment in values.

• The tickInterval attribute specifies at what intervals tick marks are displayed.

• The Image element has attributes specifying the source URL, as well as size and positioning.

• The Image element’s completeEffect attribute specifies an effect to apply when an image is loaded.

• The Label element has a text attribute to indicate the string displayed by the Label.

• The Binding element indicate that its destination is bound to its source.

• Curly braces are another way to indicate data binding.

• A HorizontalList takes an array of items from a dataProvider and displays them in a horizontal configuration. A HorizontalList has attribute selectedIndex and scrollToIndex. Each of the items in the horizontalList is selectable.

• An ArrayCollection provides methods for manipulating an Array.

• A HorizontalList can contain an inline itemRenderer.

• An itemRenderer gives you complete control over the contents of each item in a list.

• Keyword data refers to the corresponding item from the dataProvider of the HorizonalList. We must use the keyword data because everything inside the Component element is located in a new, separate scope, meaning that it cannot access the variables of the enclosing program.

• Flex applications are converted from MXML into ActionScript, which is then compiled and out- put as SWF files using the mxmlc command-line compiler, included in the Flex SDK.

• You can see a list of the compiler’s runtime parameters by executing mxmlc -help.

• The most basic syntax of the mxmlc command is mxmlc filename.

• You can embed images into an SWF file to make it more portable. To do so, enclose the source attribute inside an @Embed, as in source = “@Embed( ’image.jpg’ )”. This tells the compiler to include the image in the SWF file, which results in a program that not only loads faster, but also is less dependent on external resources, since the SWF includes all resources it needs.

• Because Flex applications run using the Flash Player, they can be embedded into a web page, then run with the Flash Player browser plug-in.

• The Flex SDK install includes a folder of HTML templates for embedding your application in the resources directory.

• Application states give you the ability to change the layout of an application on the fly.

• An application’s states are defined inside a states element. Each state is enclosed in a State el- ement, with a name attribute that is used as the identifier for the State. The current state is set by changing the currentState property, as in currentState = “HideThumbnails”.

764 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

• The State element allows you to add elements via the AddChild element, remove elements via the RemoveChild element, modify elements’ properties via the SetProperty element, set style via the SetStyle element, and set event handlers via the SetEventHandler element.

• Whenever a State is activated, the ActionScript in the SetEventHandler element executes.

• A ControlBar element embeds its nested elements into the bottom border of a Panel.

• State transition effects are enclosed in a transitions element.

• For each Transition, you can specify a fromState and toState, using the State’s name.

• Each effect, such as Resize, has a targets attribute that specifies which elements it applies to.

• An effect has a duration attribute, which defines how long the effect will last in milliseconds.

• An effect has an optional easingFunction attribute. One possible value is the Cubic.easeOut

function, which controls the acceleration of the animation.

Section 18.4 Accessing XML Data from Your Application • Flex can access XML natively, using the E4X (ECMAScript for XML) standard.

• An Accordion element instantiates a new navigation user interface, in which multiple containers can be placed, providing easy navigation between them.

• An Accordion with the attribute creationPolicy = “all” forces the Flash player to load all com- ponents, even those that are not initially visible to the user.

• The TextInput element uses the change attribute to specify ActionScript to execute whenever a change is made to the field, such as adding or removing characters.

• The DataGrid element has a dataProvider attribute, which defines what data will fill the rows and columns. The object defined as the dataProvider is located within curly brackets so that any changes to the data object will be written back to the grid.

• The DataGrid has a change attribute that calls ActionScript whenever the user clicks a different item in the grid.

• In a DataGrid, each column is defined using a DataGridColumn element. All DataGridColumns re- side in a parent columns element. Each DataGridColumn has a dataField attribute that tells the element which data it should display, and a headerText attribute that defines the text in the col- umn header.

• The Button element has a click attribute that defines the ActionScript code that will be executed when the user clicks the Button.

• Function Alert displays a dialog box and has attributes text, title, flags (specifies which but- tons should appear), parent, and closeHandler.

• The Form element groups elements, such as TextInputs and Buttons, into a single entity that aligns the elements and allows you to specify a defaultButton.

• Each element in a Form resides in a FormItem element, which has a required attribute that spec- ifies whether the item is required. If true, Flex displays a red asterisk next to the item.

• Validators check the contents of a TextInput element to make sure that the user entered data cor- rectly.

• Flex provides preconfigured validators for Strings, zip codes, e-mail addresses, phone numbers, and more.

• The validator element’s source attribute specifies which object is to be validated. The required

attribute specifies whether the user is required to fill in data. The trigger attribute determines which object to listen to. The triggerEvent attribute specifies which event to listen for. The val- id attribute specifies what happens if the triggerEvent is triggered and the data is valid.

Summary 765

• You can reference external ActionScript by using a Script element with a source attribute set to the path of the .as file.

• The HTTPService downloads a url using the HTTP protocol. The send operation of an HTTP-

Service executes a request to the service, and can include parameters if the service requires them.

• The creationComplete attribute of the Application element executes ActionScript when the Flash Player has finished creating the interface components.

• An HTTPService’s invoke attribute specifies a function to call when the HTTPService is first in- voked.

• An HTTPService’s result attribute specifies a function to call when the HTTPService has com- pleted retrieving the url.

• An HTTPService’s fault attribute specifies a function to call if an error occured while the HTTPS- ervice was retrieving the url.

• An arrayCollection’s filterFunction is handed each item of the arrayCollection and returns true if the item matches the search criteria, and false otherwise.

• The URLRequest object contains a URL that can be opened using the function navigateToURL, which also specifies where to open the URL.

Section 18.5 Interacting with Server-Side Applications • A container can have attributes showEffect and hideEffect that specify which animations to use

when the element is shown or hidden.

• The Parallel element groups effects, such as Fade and Zoom.

• The WebService element specifies the URL of the Web Services Description Language (WSDL) file for a web service. A WSDL file is an XML file describing what services are available on a serv- er, how to consume those services, what parameters they accept and what they return. Flex uses a WSDL file to make it easy to access the services, without needing further configuration.

• Like an HTTPService, a WebService element allows us to specify an invoke, fault, and result

function.

• We describe a specific web-service method using the operation element, which specifies the method name and the desired result format. The operation element can enclose specific request elements.

• The CDATA element tells the MXML compiler not to parse a section as XML in case it contains any reserved characters.

• You can traverse an XML object’s tree using dot operators.

• The ProgressBar element allows you to give the user an idea of an operation’s state.

Section 18.6 Customizing Your User Interface • Flex allows you to customize the style of your user interface. Just as in XHTML, you can include

the styles inline, put them in a separate style section or place them in a separate style-sheet file.

• We give user interface elements custom styles either by setting attributes such as fontFamily, fontSize, and color, or by applying a custom style to any eligible element by adding a styleName = “customStyle” attribute.

• To specify an external style-sheet, which will be identical to the contents of a Style element, add a Style element with a source attribute pointing to the style-sheet file, as in <mx:Style

source=“styles.css”/>.

• Another way to customize the look of your application is by using themes, found in flex_sdk_2/

frameworks/themes/.

766 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

• You can specify that you want your application to use a different theme at compile time by add- ing a theme argument to the mxmlc command.

Section 18.7 Creating Charts and Graphs • A chart is just another type of user interface element.

• The SeriesInterpolate element allows us to animate changes in a chart’s data. The duration

attribute specifies how long the animation takes in milliseconds.

• We can use a for statement that iterates over the objects in an XML object to fill an ArrayCol-

lection with data from the XML.

• The LineChart element creates a line chart, using data from the object specified by the dataPro- vider attribute. The showDataTips attribute, if true, displays a tool tip giving the user more de- tailed information about a point when the user mouses over a data point on the graph.

• The verticalAxis’ LinearAxis has a baseAtZero attribute that specifies whether the chart starts at zero.

• The CategoryAxis element of a horizontalAxis or verticalAxis element defines the values lo- cated on the axes. The categoryField attribute defines what data object the values come from.

• The LineSeries element, located within the series element, defines a series of data values to chart as a line. The yField and xField attributes define the data source. We can also specify a showDataEffect that calls the effect when the data is changed.

• The CandlestickChart element is designed to display financial data, such as stock prices. Inside the series element of the CandlestickChart, we have a CandlestickSeries with the attributes openField, highField, lowField, closeField and interpolateEffect.

Section 18.8 Connection-Independent RIAs on the Desktop: Adobe Integrated Run- time (AIR) • AIR (Adobe Integrated Runtime) allows developers to deploy web applications written in Ajax

and Flex to the desktop. It requires that the user download and install the runtime.

• The user can download and run AIR applications as if they were native desktop applications, in- cluding running them while disconnected from the server.

• Adobe’s AIR homepage is currently located at labs.adobe.com/technologies/air/.

Section 18.9 Flex 3 Beta • An introduction to the features planned for Flex 3 is available at labs.adobe.com/wiki/in-

dex.php/Flex_3:Feature_Introductions.

Terminology Accordion element ActionScript ActionScript Virtual Machine AddChild element AIR (Adobe Integrated Runtime) angle brackets Application

ApplicationControlBar

asynchronous programming model Bindable

CandlestickChart

CategoryAxis

CDATA

Component

ControlBar

creationComplete attribute CSS Cubic.easeOut

data push DataGrid

dataProvider attribute E4X (ECMAScript for XML) ECMAScript 4 Embed

Self-Review Exercises 767

encapsulation external style-sheet Fade

filterFunction

five-day forecast Flash 9 Flash Player Flex 3 Flex Builder Flex Charting Flex SDK Form

Google Gears Halo Classic theme HBox

hideEffect

horizontalAxis

HorizontalList

HSlider

HTTPService

Ice theme Image

Institutional theme JavaScript 2 Konqueror web browser Label

LinearAxis

LineChart

LineSeries

LiveCycle Data Services ES Macromedia mailto

MapController

mx namespace MXML markup language mxmlc

navigateToURL

open source operation

Panel

PanTool

Parallel

Path system variable polling polymorphism ProgressBar

Resize

RIAs (Rich Internet Applications) Safari web browser Script

series

SeriesEffect

showEffect

Smoke theme Spacer

SQLite database State

states

Style

SWF (Shockwave Flash) File synchronization temperature TextInput

theme

Transition

transitions

URLRequest

VBox

verticalAxis

VSlider

web services WebKit rendering engine WebServiceX.net

Wooden theme WSDL (Web Services Description Language) Yahoo! Map Yahoo! Maps API YahooMapService

Zoom

Self-Review Exercises 18.1 Fill in the blanks in each of the following statements:

a) braces indicate data binding. b) is the prefix commonly used to specify the XML namespace of Flex elements. c) The tag is the root tag of an MXML application. d) A(n) element defines the contents of a HorizontalList. e) You can change an Application’s current State using the property. f) The Application tag’s attribute specifies ActionScript to execute when the

user interface has finished loading.

768 Chapter 18 Adobe® Flex™ 2 and Rich Internet Applications

g) The content of a DataGrid comes from its . h) An arrayCollection’s allows you to implement a search feature. i) are used to make sure that the user’s input is in the correct format. j) The tag allows you to define a group of effects that occur simultaneously. k) You can modify an application’s look and feel in a CSS-like syntax in the tag. l) A(n) allows you to chart data points with opening, closing, high and low val-

ues.

18.2 State whether each of the following is true or false. If false, explain why. a) Flex applications can run only on Windows. b) The Flex SDK is available for free. c) ActionScript 3 executes synchronously. d) Flex 2 applications need the Flash Player 9 to run. e) Buttons can execute ActionScript when clicked using the onClick attribute.

Answers to Self-Review Exercises 18.1 a) Curly ({ }). b) mx. c) Application. d) itemRenderer. e) currentState f) creationCom- plete. g) dataProvider. h) filterFunction. i) Validators. j) Parallel. k) Style. l) Candlestick- Chart.

18.2 a) False. Flex applications can run on Mac OS X, Windows and Linux. b) True. c) False. ActionScript 3 is executed in an asynchronous manner. d) True. e) False. ActionScript in the click attribute is executed when the user clicks a button.

Exercises 18.3 For the coverViewer application, add effects to the itemRenderer of the thumbnail images so that the image zooms in when you roll over it (rollOverEffect) using the Zoom effect, zooms back out when you roll back out (rollOutEffect) using the Zoom effect, and glows red when you click it (mouseDownEffect) using the Glow effect. Learn how to configure these effects by referring to Ado- be’s Flex 2 Language Reference at livedocs.adobe.com/flex/201/langref/mx/effects/Zoom.html and livedocs.adobe.com/flex/201/langref/mx/effects/Glow.html. [The effects must be defined locally in the itemRenderer, inside the VBox.] An example of how your solution may look is available at test.deitel.com/examples/iw3htp4/flex/coverViewerExercise/.

18.4 Combine the XML handling techniques of the addressBook example with the coverViewer example to display the 20 most recent photos from Flickr’s Public RSS feed. See www.flickr.com/

services/feeds/docs/photospublic/ for information on how to use the RSS feed, and Chapter 14 for more information on XML in general. The application should show thumbnails of the images at the bottom, as well as a large version of the selected image. You must set the width and height of the thumbnails to fit in the thumbnails bar. The thumbnails should be labeled with the image’s title, and the large image should be accompanied by the image’s title and author. Include a button that refreshes the RSS feed and loads the most recent images. You may find it beneficial to use an ArrayCollection similar to that in the weatherChart example (Fig. 18.23) to store each im- age’s source and title. One feature you may want to include is the ability for the user to search for specific tags. By adding ?tags=_stringOfTags to the end of the RSS URL, where stringOfTags is re- placed by your own string, the RSS feed will return only images containing those tags. Other fea- tures you may want to include are the abilities for the user to chose how many photos to display and to click the author’s name to open the Flickr homepage. An example of how your solution may look is available at test.deitel.com/examples/iw3htp4/flex/flickrPhotoViewerExercise/.

Exercises 769

18.5 Add a cellphone number field to the addressBook application. [Hint: You must add the field in contacts.xml, then modify buttonActions.as, search.as and the DataGrid and Edit Con- tact form in addressBook.mxml.] An example of how your solution may look is available at our web site test.deitel.com/examples/iw3htp4/flex/addressBookExercise/.

18.6 Create a currency-converter application using the web service at www.webservicex.net/

CurrencyConvertor.asmx. The application should let you select a currency. You can base your ap- plication on the weather example. Use the web service’s ConversionRate operation, sending it FromCurrency and ToCurrency from the list in the web service’s description. One important change you must make from the weather example is that the XML namespace must be the URI http:// www.webserviceX.NET/ instead of http://www.webserviceX.net/. See how your solution may look at test.deitel.com/examples/iw3htp4/flex/currencyConverterExercise/.