2008 Pearson Education, Inc. All rights reserved. 1 18 Adobe ® Flex TM 2 and Rich Internet...

2008 Pearson Education, Inc. All rights reserved.

1

1818

Adobe® FlexTM 2 and Rich Internet

Applications


2

Becoming more flexible, open-minded, having a capacity to deal with change is a good thing.

— Eda Le Shan

We wove a web in childhood, A web of sunny air.— Charlotte Brontë

Genius is the ability to put into effect what is onyour mind.

— F. Scott Fitzgerald


3

A fair request should be followed by the deed in silence.

— Dante

The transition from cause to effect, from eventto event, is often carried on by secret steps, which our foresight cannot divine, and our sagacity is unable to trace.

— Joseph Addison


4

OBJECTIVES

In this chapter you will learn: What Flex is and what it’s used for. How to design user interfaces in Flex’s user

interface markup language, MXML. How to embed multimedia in a Flex

application. How to use data binding to create responsive

user interfaces.


5

OBJECTIVES

How to access XML data from a Flex application.

Client-side scripting in ActionScript 3.0,Flex’s object-oriented scripting language.

How to interact with a web service. How to create an advanced user interface. How the Adobe Integrated Runtime allows

Flex applications to run on the desktop without an Internet connection.


6

18.1 Introduction

18.2 Flex Platform Overview

18.3 Creating a Simple User Interface

18.4 Accessing XML Data from Your Application

18.5 Interacting with Server-Side Applications

18.6 Customizing Your User Interface

18.7 Creating Charts and Graphs

18.8 Connection-Independent RIAs on theDesktop: Adobe Integrated Runtime (AIR)

18.9 Flex 3 Bet

18.10 Wrap-Up

18.11 Web Resources


7

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– Allows applications developed in Flex to be used on most Windows, Mac and

Linux computers– Flex developers 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


8

18.2 Flex Platform Overview

• Flash 9 provides the ActionScript Virtual Machine and graphical capabilities that allow Flex applications to run

• Flex’s user interface elements – Much richer and more consistent than those of HTML and AJAX– Rendered by the Flash player the same way on all platforms

• The Flex development environment – Programming-centric in contrast to the animation-centric Flash development environment

• MXML allows for the description of web services, data objects, visual effects and more

• The root element of every MXML application is <mx:Application>

– All Flex elements reside in this element

• 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


9

18.2 Flex Platform Overview (Cont.)

• ActionScript 3 – Adobe’s object-oriented scripting language, forming the basis of Flash 9 and the associated

Flex 2 technology– Uses an asynchronous programming model—the program will continue to execute while

another operation is being completed. 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 asynchronous operations.

• Flex Builder – Adobe’s graphical IDE for Flex applications

• Adobe LiveCycle Data Services ES– Extends Flex’s built-in messaging to enable data push and synchronization– 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


10

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• mx namespace

– Commonly used for the Flex elements in an MXML document

• VSlider element – Provides a vertically oriented slider user interface element

• HSlider – The horizontal equivalent of the VSlider

• value attribute of a slider sets its initial value• minimum and maximum attributes

– set the range of values you can select with a slider

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

• liveDragging = "true" attribute – causes the ActionScript in the change attribute to execute when the user changes the slider value, even if the user is still clicking the

slider

• labels attribute – places text next to the slider

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

• snapInterval attribute – specifies the possible increment in values

• tickInterval attribute – specifies at what intervals tick marks are displayed


11

18.3 Creating a Simple User Interface (Cont.)• Image element

– has attributes specifying the source URL, as well as size and positioning– completeEffect attribute specifies an effect to apply when an image is loaded

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

• Binding element – indicates that its destination is bound to its source– Curly braces are another way to indicate data binding

• HorizontalList – takes an array of items from a dataProvider and displays them in a horizontal configuration

• ArrayCollection – provides methods for manipulating an Array

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


12

18.3 Creating a Simple User Interface (Cont.)

• Flex applications are converted from MXML into ActionScript, which is then compiled and output 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 basic syntax of the mxmlc command is mxmlc filename.• You can embed images into an SWF file to make it more portable

– Enclose the source attribute inside an @Embed, as in source = "@Embed( ’image.jpg’ )"

– 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

13 1 <?xml version = "1.0" encoding = "utf-8"?> 2  3  4 <mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml"> 5  6 <mx:ArrayCollection id = "bookCovers"> 7  8 <mx:Object name = "C How to Program" source = "chtp5.jpg" /> 9 <mx:Object name = "C++ How to Program" source = "cpphtp6.jpg" /> 10 <mx:Object name = "Internet How to Program" 11 source = "iw3htp4.jpg" /> 12 <mx:Object name = "Java How to Program" source = "jhtp7.jpg" /> 13 <mx:Object name = "VB How to Program" source = "vbhtp3.jpg" /> 14 <mx:Object name = "Visual C# How to Program" 15 source = "vcsharphtp2.jpg" /> 16 <mx:Object name = "Simply C++" source = "simplycpp.jpg" /> 17 <mx:Object name = "Simply VB 2005" source = "simplyvb2005.jpg" /> 18 <mx:Object name = "Simply Java" source = "simplyjava.jpg" /> 19 <mx:Object name = "Small C++ How to Program" 20 source = "smallcpphtp5.jpg" /> 21 <mx:Object name = "Small Java" source = "smalljavahtp6.jpg" /> 22 </mx:ArrayCollection> 23

24  25 <mx:Binding 26 source = "'fullsize/' + 27 bookCovers.getItemAt( selectCoverSlider.value ).source" 28 destination = "largeImage.source" /> 29 <mx:Binding source = "'fullsize/' + thumbnailList.selectedItem.source" 30 destination = "largeImage.source" />

Outline

coverViewer.mxml

(1 of 4)

ArrayCollection of the image files goes outside the user interface

Binding lets the user select an image using slider or thumbnails and displays its large version.

1431

32  33 <mx:Panel id = "viewPanel" title = "Deitel Book Cover Viewer" 34 width = "100%" height = "100%" horizontalAlign = "center"> 35

36 <mx:HBox height = "100%" width = "100%"> 37 <mx:VSlider id = "zoomSlider" value = "100" minimum = "0" 38 maximum = "100" liveDragging = "true" 39 change = "largeImage.percentWidth = zoomSlider.value; 40 largeImage.percentHeight = zoomSlider.value;" 41 height = "100%" width = "0%" 42 labels = "[ '0%', 'Zoom', '100%' ]" /> 43 <mx:VBox width = "100%" height = "100%" 44 horizontalAlign = "center"> 45

46  47  48  49 <mx:Image id = "largeImage" 50 source = "" 51 horizontalAlign = "center" 52 verticalAlign = "middle" 53 width = "100%" height = "100%" 54 completeEffect = "Fade" /> 55

56  57 <mx:Label text = "{ thumbnailList.selectedItem.name }" /> 58 </mx:VBox> 59 </mx:HBox> 60

Outline

coverViewer.mxml

(2 of 4)

Panel element contains the entire UI

Make sure the thumbnails and the slider are coordinated

The Label’s text changes according to which image is selected

1561 

62 <mx:HSlider id = "selectCoverSlider" height = "0%"

63 minimum = "0" maximum = "{ bookCovers.length - 1 }"

64 showDataTip = "false" snapInterval = "1" tickInterval = "1"

65 liveDragging = "true"

66 change = "thumbnailList.selectedIndex =

67 selectCoverSlider.value;

68 thumbnailList.scrollToIndex( selectCoverSlider.value )" />

69

70 

71 <mx:HorizontalList id = "thumbnailList"

72 dataProvider = "{ bookCovers }" width = "100%" height = "160"

73 selectedIndex = "0"

74 change = "selectCoverSlider.value = thumbnailList.selectedIndex">

75

Outline

coverViewer.mxml

(3 of 4)

Make sure the selected thumbnail changes when the slider is moved

Make sure the slider moves when a different thumbnail is selected

1676 

77 <mx:itemRenderer>

78 <mx:Component>

79 <mx:VBox width = "140" height = "160"

80 horizontalAlign = "center" verticalAlign = "middle"

81 verticalScrollPolicy = "off"

82 horizontalScrollPolicy = "off" paddingBottom = "20">

83

84 

85 <mx:Image source = "{ 'thumbs/' + data.source }"

86 verticalAlign = "middle" />

87

88 

89 <mx:Label text = "{ data.name }" />

90 </mx:VBox>

91 </mx:Component>

92 </mx:itemRenderer>

93 </mx:HorizontalList>

94 </mx:Panel>

95 </mx:Application>

coverViewer.mxml

(4 of 4)

Outline

itemRenderer defines a template for how each thumbnail will be rendered


17

Fig. 18.2 | Deitel cover Viewer displaying C How to Program cover.


18

Fig. 18.3 | mxmlc running in Windows XP Command Prompt.

19 1  2  3  4 <html lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>coverViewer</title> 8 <script src="AC_OETags.js" language="javascript"></script> 9 <style> 10 body { margin: 0px; overflow: hidden; } 11 </style> 12 </head> 13

14 <body scroll='no'> 15 <script language="JavaScript" type="text/javascript"> 16 

Outline

index.html

(1 of 2)

To embed a Flex application in an HTML document, fill in the corresponding fields


2031 </script> 32 <noscript> 33 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 34 id="coverViewer" width="100%" height="100%" 35 codebase="http://fpdownload.macromedia.com/get/ 36 flashplayer/current/swflash.cab"> 37 <param name="movie" value="coverViewer.swf" /> 38 <param name="quality" value="high" /> 39 <param name="bgcolor" value="#869ca7" /> 40 <param name="allowScriptAccess" value="sameDomain" /> 41 <embed src="coverViewer.swf" quality="high" bgcolor="#869ca7" 42 width="100%" height="100%" name="coverViewer" align="middle" 43 play="true" 44 loop="false" 45 quality="high" 46 allowScriptAccess="sameDomain" 47 type="application/x-shockwave-flash" 48 pluginspage="http://www.adobe.com/go/getflashplayer"> 49 </embed> 50 </object> 51 </noscript> 52 </body> 53 </html>

Outline

index.html

(2 of 2)


21

18.3 Creating a Simple User Interface (Cont.)

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

– Each state is enclosed in a State element, with a name attribute that is used as the identifier for the State– Current state is set by changing the currentState property, as in currentState = "HideThumbnails“

• State element – 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– Set event handlers via the SetEventHandler element

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

• 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

• Effects– Each effect, such as Resize, has a targets attribute that specifies which elements it applies to – duration attribute defines how long the effect will last in milliseconds– Optional easingFunction attribute. One possible value is the Cubic.easeOut function, which

controls the acceleration of the animation.

22 1 <?xml version = "1.0" encoding = "utf-8"?> 2  3  4 <mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml"> 5

6  7 <mx:Script> 8 // import the Cubic easing function for state transitions 9 import mx.effects.easing.Cubic; 10 </mx:Script> 11

12  13 <mx:ArrayCollection id = "bookCovers"> 14  15 <mx:Object name = "C How to Program" source = "chtp5.jpg" /> 16 <mx:Object name = "C++ How to Program" source = "cpphtp6.jpg" /> 17 <mx:Object name = "Internet How to Program" 18 source = "iw3htp4.jpg" /> 19 <mx:Object name = "Java How to Program" source = "jhtp7.jpg" /> 20 <mx:Object name = "VB How to Program" source = "vbhtp3.jpg" /> 21 <mx:Object name = "Visual C# How to Program" 22 source = "vcsharphtp2.jpg" /> 23 <mx:Object name = "Simply C++" source = "simplycpp.jpg" /> 24 <mx:Object name = "Simply VB 2005" source = "simplyvb2005.jpg" /> 25 <mx:Object name = "Simply Java" source = "simplyjava.jpg" /> 26 <mx:Object name = "Small C++ How to Program" 27 source = "smallcpphtp5.jpg" /> 28 <mx:Object name = "Small Java" source = "smalljavahtp6.jpg" /> 29 </mx:ArrayCollection> 30

Outline

coverViewerStates.mxml

(1 of 5)

Import an easing effect

2331  32 <mx:states> 33 <mx:State name = "HideThumbnails"> 34 <mx:RemoveChild target = "{ thumbnailList }" /> 35

36  37 <mx:SetEventHandler target = "{ showHideButton }" name = "click" 38 handler = "currentState = ''" /> 39 </mx:State> 40 </mx:states> 41

42  43 <mx:transitions> 44 <mx:Transition> 45 <mx:Resize 46 target = "{ largeImage }" 47 duration = "750" easingFunction = "Cubic.easeOut" /> 48 </mx:Transition> 49 </mx:transitions> 50

51  52 <mx:Binding 53 source = "'fullsize/' + 54 bookCovers.getItemAt( selectCoverSlider.value ).source" 55 destination = "largeImage.source" /> 56 <mx:Binding source = "'fullsize/' + thumbnailList.selectedItem.source" 57 destination = "largeImage.source" /> 58

Outline


(2 of 5)

One state does not include the thumbnails

Set up the button to switch states.

Put a resizing effect on the large image when the state changes.

2459  60 <mx:Panel id = "viewPanel" title = "Deitel Book Cover Viewer" 61 width = "100%" height = "100%" horizontalAlign = "center"> 62



83  84 <mx:Label text = "{ thumbnailList.selectedItem.name }" /> 85 </mx:VBox> 86 </mx:HBox> 87

Outline


(3 of 5)

2588  89 <mx:HSlider id = "selectCoverSlider" height = "0%" 90 minimum = "0" maximum = "{ bookCovers.length - 1 }" 91 showDataTip = "false" snapInterval = "1" tickInterval = "1" 92 liveDragging = "true" 93 change = "thumbnailList.selectedIndex = 94 selectCoverSlider.value; 95 thumbnailList.scrollToIndex( selectCoverSlider.value )" /> 96

97  98 <mx:HorizontalList id = "thumbnailList" 99 dataProvider = "{ bookCovers }" width = "100%" height = "160" 100 selectedIndex = "0" 101 change = "selectCoverSlider.value = thumbnailList.selectedIndex"> 102

103  104 <mx:itemRenderer> 105 <mx:Component> 106 <mx:VBox width = "140" height = "160" 107 horizontalAlign = "center" verticalAlign = "middle" 108 verticalScrollPolicy = "off" 109 horizontalScrollPolicy = "off" paddingBottom = "20"> 110

Outline


(4 of 5)

114



117 </mx:VBox>

118 </mx:Component>



121

122 

123 <mx:ControlBar>

124 <mx:LinkButton label = "Show/Hide Thumbnails"

125 click = "currentState = 'HideThumbnails';"

126 id = "showHideButton" />

127 </mx:ControlBar>

128 </mx:Panel>


Outline


(5 of 5)

Add the button that will show or hide the thumbnails by changing states.


27

Fig. 18.6 | Deitel Cover Viewer using States to hide thumbnails.


28

18.4 Accessing XML Data from Your Application

• Flex can access XML natively, using the E4X (ECMAScript for XML) standard

• Accordion element – instantiates a new navigation user interface, in which multiple containers can be placed,

providing easy navigation between them– Attribute creationPolicy = "all" forces the Flash player to load all components, even

those that are not initially visible to the user

• 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

• DataGrid element – dataProvider attribute defines what data will fill the rows and columns– 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– change attribute calls ActionScript whenever the user clicks a different item in the grid– each column is defined using a DataGridColumn element– DataGridColumns reside 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 column header


29

18.4 Accessing XML Data from Your Application (Cont.)• Button element

– 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 buttons should

appear), parent, and closeHandler

• 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

specifies 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 correctly – Flex provides preconfigured validators for Strings, zip codes, e-mail addresses, phone numbers,

and more

• validator element– source attribute specifies which object is to be validated– required attribute specifies whether the user is required to fill in data– trigger attribute determines which object to listen to– triggerEvent attribute specifies which event to listen for– valid attribute specifies what happens if the triggerEvent is triggered and the data is valid


30

18.4 Accessing XML Data from Your Application (Cont.)

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

• HTTPService – downloads a url using the HTTP protocol– send operation of an HTTPService executes a request to the service, and can include parameters if the

service requires them

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

• HTTPService’s invoke attribute – specifies a function to call when the HTTPService is first invoked

• HTTPService’s result attribute – specifies a function to call when the HTTPService has completed retrieving the url

• HTTPService’s fault – attribute specifies a function to call if an error occured while the HTTPService was retrieving the url

• arrayCollection’s filterFunction • is handed each item of the arrayCollection and returns true if the item

matches the search criteria, and false otherwise• URLRequest object contains a URL that can be opened using the function navigateToURL, which also specifies where to open the URL.

31 1 <?xml version = "1.0" encoding = "utf-8"?> 2  3  4 <mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" 5 layout = "vertical" 6 xmlns:yahoo = "com.yahoo.webapis.maps.*" 7 creationComplete = "getContacts.send(); initMap();"> 8

9  10 <mx:HTTPService 11 id = "getContacts" 12 url = "contacts.xml" 13 showBusyCursor = "true" 14 resultFormat = "object" 15 result = "addressCollection = ArrayCollection( 16 getContacts.lastResult.contacts.contact )" 17 fault = "Alert.show( event.fault.message )" /> 18

19  20 <mx:StringValidator id = "firstnameValidator" source = "{ firstName }" 21 property = "text" required = "true" trigger = "{ save }" 22 triggerEvent = "click" valid = "saveContact()" /> 23 <mx:StringValidator id = "lastnameValidator" source = "{ lastName }" 24 property = "text" required = "false" /> 25 <mx:ZipCodeValidator id = "zipValidator" source = "{ zipCode }" 26 property = "text" required = "false" /> 27 <mx:EmailValidator id = "emailValidator" source = "{ eMail }" 28 property = "text" required = "false" /> 29 <mx:PhoneNumberValidator id = "phoneValidator" source = "{ phone }" 30 property = "text" required = "false" />

Outline

addressBook.mxml

(1 of 7)

Use the HTTPService to import an XML document

Validators check the fields of the form that edits a contact’s information

3231

32 <mx:Script> 33 import mx.collections.ArrayCollection; 34

35 // tell compiler to register an event for the addressCollection 36 // variable, allowing it to be bound to another object 37 [Bindable] 38 private var addressCollection : ArrayCollection; 39 </mx:Script> 40

41  42 <mx:Script source = "search.as" /> 43

44  45 <mx:Script source = "map.as" /> 46

47  48 <mx:Script source = "buttonActions.as" /> 49

50 <mx:Panel 51 layout = "vertical" width = "100%" height = "100%" 52 title = "Address Book"> 53 <mx:Accordion id = "accordion" width = "100%" height = "100%" 54 creationPolicy = "all"> 55 <mx:VBox label = "View Contacts">

Outline

addressBook.mxml

(2 of 7)

Include ActionScript files to handle program logic.

The Accordion element allows the user to switch among three screens.

3356  57 <mx:ApplicationControlBar> 58 <mx:Label text = "Search:" /> 59 <mx:TextInput id = "textFilter" 60 width = "100%" 61 change = "filter();"/> 62 </mx:ApplicationControlBar>  63

64  65  66 <mx:DataGrid id = "contactsView" 67 dataProvider = "{ addressCollection }" 68 width = "100%" height = "100%" 69 change = "setMarkerByAddress();"> 70 <mx:columns> 71 <mx:DataGridColumn dataField = "firstname" 72 headerText = "First Name" /> 73 <mx:DataGridColumn dataField = "lastname" 74 headerText = "Last Name" /> 75 <mx:DataGridColumn dataField = "street" 76 headerText = "Street" /> 77 <mx:DataGridColumn dataField = "city" 78 headerText = "City" /> 79 <mx:DataGridColumn dataField = "state" 80 headerText = "State" /> 81 <mx:DataGridColumn dataField = "zip" 82 headerText = "Zip" />

Outline

addressBook.mxml

(3 of 7)

Search box calls the filter() method (defined in an ActionScript file) whenever its contents changes to implement live search

A DataGrid displays the list of address book entries

3483 <mx:DataGridColumn dataField = "email" 84 headerText = "E-Mail" /> 85 <mx:DataGridColumn dataField = "phone" 86 headerText = "Phone Number" /> 87 </mx:columns> 88 </mx:DataGrid> 89

90 <mx:ControlBar> 91  92 <mx:Button label = "New" 93 click = "newContact()" /> 94 <mx:Button label = "Delete" 95 click = "Alert.show( 'Are you sure?', 96 'Delete Contact', 97 mx.controls.Alert.YES | mx.controls.Alert.CANCEL, 98 this, deleteContact );" /> 99 <mx:Button label = "Get Directions" 100 click = "getDirections();" /> 101 <mx:Button label = "Edit" 102 click = "accordion.selectedIndex = 2;" /> 103 <mx:Button label = "View on Map" 104 click = "accordion.selectedIndex = 1;" /> 105 <mx:Button label = "E-Mail" 106 click = "emailContact();" /> 107  108 </mx:ControlBar> 109 </mx:VBox>  110

Outline

addressBook.mxml

(4 of 7)Button to create a new contact

35111 <mx:VBox label = "Map View"> 112  113 <yahoo:YahooMapService id = "yahooMap" UUID = "{ UUID }" 114 swfDomId = "{ swfDomID }" 115 apiId = "{ YahooAPIKey }" 116 mapURL = "{ mapURL }" width = "600" height = "400" /> 117 <mx:Button label = "Back to Contacts" 118 click = "accordion.selectedIndex = 0;" /> 119 </mx:VBox>  120

121 <mx:VBox label = "Edit Contact"> 122  123 <mx:Form width = "100%" backgroundColor = "#ffffff" 124 defaultButton = "{ save }"> 125  126 <mx:FormItem label = "First Name:" required = "true"> 127 <mx:TextInput id = "firstName" 128 text = "{ contactsView.selectedItem.firstname }" /> 129 </mx:FormItem> 130 <mx:FormItem label = "Last Name:"> 131 <mx:TextInput id = "lastName" 132 text = "{ contactsView.selectedItem.lastname }" /> 133 </mx:FormItem> 134 <mx:FormItem label = "Street Address:"> 135 <mx:TextInput id = "streetAddress" 136 text = "{ contactsView.selectedItem.street }" /> 137 </mx:FormItem> 138 <mx:FormItem label = "City:"> 139 <mx:TextInput id = "city" 140 text = "{ contactsView.selectedItem.city }" />

Outline

addressBook.mxml

(5 of 7)

Place the Yahoo! Map in a VBox

Form to edit a contact’s information

36141 </mx:FormItem> 142 <mx:FormItem label = "State:"> 143 <mx:TextInput id = "state" 144 text = "{ contactsView.selectedItem.state }" /> 145 </mx:FormItem> 146 <mx:FormItem label = "Zip Code:"> 147 <mx:TextInput id = "zipCode" 148 text = "{ contactsView.selectedItem.zip }" /> 149 </mx:FormItem> 150 <mx:FormItem label = "E-Mail Address:"> 151 <mx:TextInput id = "eMail" 152 text = "{ contactsView.selectedItem.email }" /> 153 </mx:FormItem> 154 <mx:FormItem label = "Phone Number:"> 155 <mx:TextInput id = "phone" 156 text = "{ contactsView.selectedItem.phone }" /> 157 </mx:FormItem> 158  159

160  161 <mx:FormItem> 162 <mx:Button id = "save" label = "Save" /> 163 </mx:FormItem>

Outline

addressBook.mxml

(6 of 7)

37164 <mx:FormItem>

165 

166 

167 <mx:Button id = "cancel" label = "Cancel"

168 click = "cancelContact()" />

169 </mx:FormItem>

170 <mx:FormItem>

171 

172 <mx:Button label = "Delete"

173 click = "Alert.show( 'Are you sure?',

174 'Delete Contact',

175 mx.controls.Alert.YES | mx.controls.Alert.CANCEL,

176 this, deleteContact );" />

177 </mx:FormItem>

178 </mx:Form> 

179 </mx:VBox> 

180 </mx:Accordion> 

181 </mx:Panel> 


Outline

addressBook.mxml

(7 of 7)


38

Fig. 18.8 | Address book’s View Contacts mode.


39

Fig. 18.9 | Address book’s Map View mode.


40

Fig. 18.10 | Address book’s Edit Contact mode.

41 1 <?xml version = "1.0" encoding = "utf-8" ?> 2  3  4 <contacts> 5 <contact id = "1"> 6 <firstname>Sue</firstname> 7 <lastname>Black</lastname> 8 <street>77 Massachusetts Avenue</street> 9 <city>Cambridge</city> 10 <state>MA</state> 11 <zip>02139</zip> 12 <email>[email protected]</email> 13 <phone>555-555-5555</phone> 14 </contact> 15 <contact id = "2"> 16 <firstname>James</firstname> 17 <lastname>Blue</lastname> 18 <street>219 4th Avenue</street> 19 <city>Seattle</city> 20 <state>WA</state> 21 <zip>98109</zip> 22 <email>[email protected]</email> 23 <phone>555-555-5555</phone> 24 </contact> 25 <contact id = "3"> 26 <firstname>Mike</firstname> 27 <lastname>Brown</lastname> 28 <street>1315 Cestnut Street</street> 29 <city>St. Louis</city> 30 <state>MO</state>

Outline

contacts.xml

(1 of 2)


4231 <zip>63103</zip> 32 <email>[email protected]</email> 33 <phone>555-555-5555</phone> 34 </contact> 35 <contact id = "4"> 36 <firstname>Meg</firstname> 37 <lastname>Gold</lastname> 38 <street>700 14th Street</street> 39 <city>Denver</city> 40 <state>CO</state> 41 <zip>80206</zip> 42 <email>[email protected]</email> 43 <phone>555-555-5555</phone> 44 </contact> 45 <contact id = "5"> 46 <firstname>John</firstname> 47 <lastname>Gray</lastname> 48 <street>525 Arch Street</street> 49 <city>Philadelphia</city> 50 <state>PA</state> 51 <zip>19106</zip> 52 <email>[email protected]</email> 53 <phone>555-555-5555</phone> 54 </contact> 55 </contacts>

Outline

contacts.xml

(2 of 2)


43 1 // Fig. 18.12: search.as 2 // Using a filterFunction for a live search feature 3 private function filter() : void 4 { 5 // define filter function 6 addressCollection.filterFunction = testMatch; 7 addressCollection.refresh(); // refresh data to only display matches 8 } // end function filter 9

10 private function testMatch( item : Object ) : Boolean 11 { 12 // save search term to variable 13 var searchTerm:String = textFilter.text.toLowerCase(); 14

15 // return whether search parameter matches any field for each item 16 return( item.firstname.toLowerCase().search( searchTerm ) != -1 || 17 item.lastname.toLowerCase().search( searchTerm ) != -1 || 18 item.street.toLowerCase().search( searchTerm ) != -1 || 19 item.city.toLowerCase().search( searchTerm ) != -1 || 20 item.state.toLowerCase().search( searchTerm ) != -1 || 21 String( item.zip ).search( searchTerm ) != -1 || 22 item.email.toLowerCase().search( searchTerm ) != -1 || 23 item.phone.toLowerCase().search( searchTerm ) != -1 ) 24 } // end function testMatch

Outline

search.as

(1 of 4)


44 1 // Fig. 18.13: map.as 2 // Handle the map functions for the Address Book application 3 import mx.managers.CursorManager; 4 import com.yahoo.webapis.maps.methodgroups.*; 5 import mx.controls.Alert; 6

7 // define constants 8 private const swfDomID : String = "addressBook"; 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

Outline

search.as

(2 of 4)

Allows us to create widgets that let the user manipulate the map.


4525 // 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 54

Outline

search.as

(3 of 4)

Create and set up the map widgets


4655 // place a labeled marker at the currently selected address 56 public function setMarkerByAddress() : void 57 { 58 mapController.removeAllMarkers(); // clear previous markers 59

60 // add marker at specified address, 61 // labeled with contact's name and address 62 mapController.addCustomPOIMarker( 63 ( contactsView.selectedItem.street + " " + 64 contactsView.selectedItem.city + " " + 65 contactsView.selectedItem.state ), 66 contactsView.selectedItem.firstname, 67 contactsView.selectedItem.lastname, 68 (contactsView.selectedItem.street + "\n" + 69 contactsView.selectedItem.city + ", " + 70 contactsView.selectedItem.state + " " + 71 contactsView.selectedItem.zip ), 72 0x990099, 0xFFFFFF ); 73

74 // instantly center on address and zoom in 75 mapController.setCenterByAddressAndZoom( 76 contactsView.selectedItem.street + " " + 77 contactsView.selectedItem.city + " " + 78 contactsView.selectedItem.state, 5, 0 ); 79 } // end function setMarkerByAddress

Outline

search.as

(4 of 4)

Create a labeled marker for the address of the currently selected contact


47 1 // Fig. 18.14: buttonActions.as

2 // Implement the actions of each button

3 import mx.events.CloseEvent;

4

5 // "Cancel" button

6 private function cancelContact() : void

7 {

8 // revert edit fields to original value

9 firstName.text = contactsView.selectedItem.firstname;

10 lastName.text = contactsView.selectedItem.lastname;

11 streetAddress.text = contactsView.selectedItem.street;

12 city.text = contactsView.selectedItem.city;

13 state.text = contactsView.selectedItem.state;

14 zipCode.text = contactsView.selectedItem.zip;

15 eMail.text = contactsView.selectedItem.email;

16 phone.text = contactsView.selectedItem.phone;

17 // return user to "View Contacts" section

18 accordion.selectedIndex = 0;

19 } // end function cancelContact

20

Outline

buttonActions.as

(1 of 4)


4821 // "Delete" button 22 private function deleteContact( event : CloseEvent ) : void 23 { 24 // handle if user clicked "Yes" in "Delete Contact" dialog box 25 if ( event.detail == Alert.YES ) 26 { 27 // return user to "View Contacts" section if 28 // the user was in "Edit Contacts" section 29 if ( accordion.selectedIndex == 2 ) 30 accordion.selectedIndex = 0; 31

32 // remove selected contact 33 addressCollection.removeItemAt( contactsView.selectedIndex ); 34 } // end if 35 } // end function deleteContact 36

37 // "E-Mail" button 38 public function emailContact() : void 39 { 40 // form "mailto" URL given the selected e-mail address 41 var mailURL : URLRequest = new URLRequest( 'mailto:' + 42 contactsView.selectedItem.email ); 43

44 // open the URL without opening new window 45 navigateToURL( mailURL, "_self" ); 46 } // end function emailContact 47

Outline

buttonActions.as

(2 of 4)

Remove a contact when the delete button is pressed

Open a mailto: URL when the email button is clicked.


4948 // "Directions" button 49 public function getDirections() : void 50 { 51 // form directions URL given the selected address 52 var directionsURL : URLRequest = new URLRequest( 53 'http://maps.yahoo.com/broadband#mvt=m&q2=' + 54 contactsView.selectedItem.street + ' ' + 55 contactsView.selectedItem.city + ' ' + 56 contactsView.selectedItem.state + ' ' + 57 contactsView.selectedItem.zip ); 58 // open URL in a new window 59 navigateToURL( directionsURL, "_blank" ); 60 } // end function getDirections 61

62 // "Save" button 63 private function saveContact() : void 64 { 65 // write changes to data array 66 addressCollection.setItemAt( { 67 firstname : firstName.text, 68 lastname : lastName.text, 69 street : streetAddress.text, 70 city : city.text, 71 state : state.text, 72 zip : zipCode.text, 73 email : eMail.text, 74 phone : phone.text }, 75 contactsView.selectedIndex ); 76

Outline

buttonActions.as

(3 of 4)

Send the user to a Yahoo! Map with directions to the selected contact’s address

Make changes to data when the user saves


5077 // refresh data collection so that search will still work

78 addressCollection.refresh();

79

80 // return user to "View Contacts" section


82 } // end function saveContact

83

84 // "New" button

85 private function newContact() : void

86 {

87 addressCollection.addItem( {

88 firstname : 'New', lastname : 'Contact',

89 street : null, city : null, state : null,

90 zip : null, email : null, phone : null } );

91 contactsView.selectedIndex = addressCollection.length;


93 } // end function newContact

Outline

buttonActions.as

(4 of 4)

Add a new contact


51

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

• Parallel element – groups effects, such as Fade and Zoom

• 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 server, 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– WebService element allows us to specify an invoke, fault, and result function

• Describe a specific web-service method using the operation element– specifies the method name and the desired result format– The operation element can enclose specific request elements

• 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• ProgressBar element

– allows you to give the user an idea of an operation’s state

52 1 <?xml version = "1.0" encoding = "utf-8" ?> 2  3  4 <mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" 5 layout = "absolute" xmlns:yahoo = "com.yahoo.webapis.maps.*" 6 creationComplete = "initMap();" > 7

8 <mx:Script source = "map.as" /> 9

10 <mx:Script> 11 <![CDATA[ 12 import mx.controls.dataGridClasses.DataGridColumn; 13 import mx.rpc.events.ResultEvent; 14 import mx.managers.CursorManager; 15 import mx.controls.Alert; 16 import mx.collections.ArrayCollection; 17 import flash.events.MouseEvent; 18

19 // define default namespace 20 default xml namespace = "http://www.webservicex.net"; 21

22 [Bindable] 23 private var xmlData : XML; 24 [Bindable] 25 private var highLowTemp : String; 26 [Bindable] 27 private var fiveDayForecast : String = ""; 28 [Bindable] 29 private var placeName : String; 30

Outline

weather.mxml

(1 of 9)


5331 // handle getWeatherButton click action 32 private function getWeather() : void 33 { 34 // disable button while request is pending 35 getWeatherButton.enabled = false; 36

37 // hide the old forecast data before displaying new data 38 forecastBox.visible = false; 39

40 // reset place name while loading new data 41 placeNameText.text = ""; 42

43 // show the loading progress bar 44 loadingBar.visible = true; 45

46 // request the new data 47 weatherService.GetWeatherByZipCode.send(); 48 } // end function getWeather 49

50 private function weatherResultHandler(event : ResultEvent) : void 51 { 52 // save the result of the web service as XML 53 xmlData = XML( event.result ); 54

Outline

weather.mxml

(2 of 9)

Disable the get weather button to make sure the user doesn’t submit again while the data is loading

Show the loading bar to inform the user of the progress

Get the data and save it in an XML object


5455 // check that result is valid by checking length of StateCode 56 if ( xmlData.GetWeatherByZipCodeResult[ 0 ]. 57 StateCode.text().length() != 0 ) 58 { 59 // set placeNameText to the city and state of the zip code 60 placeName = xmlData.GetWeatherByZipCodeResult[ 0 ]. 61 PlaceName.text() + ", " + 62 xmlData.GetWeatherByZipCodeResult[ 0 ].StateCode.text(); 63 placeNameText.text = "5 Day Forecast for " + placeName; 64

65 // set image, temperature and date for each day 66 setData( weatherImage0, weatherTemp0, weatherDay0, 0 ); 67 setData( weatherImage1, weatherTemp1, weatherDay1, 1 ); 68 setData( weatherImage2, weatherTemp2, weatherDay2, 2 ); 69 setData( weatherImage3, weatherTemp3, weatherDay3, 3 ); 70 setData( weatherImage4, weatherTemp4, weatherDay4, 4 ); 71

72 forecastBox.visible = true; 73

74 // save today’s high/low as a string 75 highLowTemp = xmlData.GetWeatherByZipCodeResult. 76 Details.WeatherData.MaxTemperatureF[ 0 ].text() + 77 "/" + xmlData.GetWeatherByZipCodeResult.Details. 78 WeatherData.MinTemperatureF[ 0 ].text(); 79

80 // save the five-day forecast as a string 81 fiveDayForecast = highLowTemp; 82

Outline

weather.mxml

(3 of 9)

Display the weather images, temperatures, and dates


5583 for ( var i : int = 1; i < 5; i++ ) 84 { 85 fiveDayForecast += ", " + xmlData. 86 GetWeatherByZipCodeResult.Details.WeatherData. 87 MaxTemperatureF[ i ].text() + "/" + xmlData. 88 GetWeatherByZipCodeResult.Details. 89 WeatherData.MinTemperatureF[ i ].text(); 90 } // end for 91

92 // place a marker on the map with the forecast 93 mapController.addCustomPOIMarker( 94 zipcode.text, placeName, highLowTemp, fiveDayForecast, 95 0x990099, 0xFFFFFF); 96

97 mapController.setCenterByAddressAndZoom( 98 zipcode.text, 7, 0 ); 99 } 100 else 101 { 102 Alert.show( "Invalid zip code" ); 103 } 104 // hide the loading progress bar 105 loadingBar.visible = false; 106

107 // enable getWeatherButton 108 getWeatherButton.enabled = true; 109 } // end function weatherResultHandler 110

Outline

weather.mxml

(4 of 9)

Convert the five-day forecast into a single string

56111 private function setData( forecastImage : Image, 112 tempText : Text, dateText : Text, i : int ) : void 113 { 114 // set the image for each day 115 forecastImage.source = xmlData.GetWeatherByZipCodeResult. 116 Details.WeatherData.WeatherImage[ i ].text(); 117

118 // set the temperature for each day 119 tempText.text = xmlData.GetWeatherByZipCodeResult. 120 Details.WeatherData.MaxTemperatureF[ i ].text() + 121 "\n" + xmlData.GetWeatherByZipCodeResult.Details. 122 WeatherData.MinTemperatureF[ i ].text(); 123

124 // set the date for each day 125 dateText.text = xmlData.GetWeatherByZipCodeResult. 126 Details.WeatherData.Day[ i ].text(); 127 } 128 ]]> 129 </mx:Script> 130

131  132 <mx:Parallel id = "forecastAnimationIn"> 133 <mx:Fade duration = "1000" alphaFrom = "0.0" alphaTo = "1.0" /> 134 <mx:Zoom zoomWidthTo = "1" zoomHeightTo = "1" zoomWidthFrom = "0" 135 zoomHeightFrom = "0" /> 136 </mx:Parallel> 137

Outline

weather.mxml

(5 of 9)

Function that displays image, temperature, and date for each day in the five-day forecast

Show/hide animation uses two effects by placing them in a Parallel element

57138 <mx:Parallel id = "forecastAnimationOut"> 139 <mx:Fade duration = "500" alphaFrom = "1.0" alphaTo = "0.0" /> 140 <mx:Zoom zoomWidthTo = "0" zoomHeightTo = "0" zoomWidthFrom = "1" 141 zoomHeightFrom = "1" /> 142 </mx:Parallel> 143

144  145 <mx:WebService id = "weatherService" 146 wsdl = "http://www.webservicex.net/WeatherForecast.asmx?WSDL" 147 fault = "Alert.show( event.fault.faultString )" 148 result = "weatherResultHandler( event )" 149 showBusyCursor = "true"> 150 <mx:operation name = "GetWeatherByZipCode" resultFormat = "e4x"> 151 <mx:request> 152 <ZipCode>{ zipcode.text }</ZipCode> 153 </mx:request> 154 </mx:operation> 155 </mx:WebService> 156

157  158 <mx:Panel title = "Weather" width = "100%" height = "100%"> 159 <mx:Accordion id = "accordion" width = "100%" height = "100%" 160 creationPolicy = "all"> 161 <mx:VBox label = "Forecast View" width = "100%" height = "100%"> 162 <mx:ApplicationControlBar 163 defaultButton = "{ getWeatherButton }"> 164 <mx:Label width = "100%" 165 text = "Enter a zip code:" />

Outline

weather.mxml

(6 of 9)

A WebService element defines the web service

The operation element describes the web service method we need and how to format the results

Send the zip code as a parameter to the web service call

58166 <mx:TextInput id = "zipcode" left = "10" /> 167 <mx:Button id = "getWeatherButton" label = "Get Weather" 168 click = "getWeather()" left = "10" /> 169 </mx:ApplicationControlBar> 170

171 <mx:Text fontWeight = "bold" id = "placeNameText" /> 172 <mx:ProgressBar id = "loadingBar" indeterminate = "true" 173 labelPlacement = "bottom" visible = "false" minimum = "0" 174 maximum = "100" label = "Loading Weather Data" 175 direction = "right" width = "75%" /> 176

177  178  179 <mx:HBox id = "forecastBox" width = "100%" height = "100%" 180 visible = "false" showEffect = "{ forecastAnimationIn }" 181 hideEffect = "{ forecastAnimationOut }"> 182 <mx:VBox id = "forecastBox0" horizontalAlign = "center" 183 borderStyle = "solid" width = "20%" height = "0%"> 184 <mx:Text id = "weatherDay0" /> 185 <mx:Image id = "weatherImage0" /> 186 <mx:Text id = "weatherTemp0" /> 187 </mx:VBox> 188

189 <mx:VBox horizontalAlign = "center" 190 borderStyle = "solid" width = "20%"> 191 <mx:Text id = "weatherDay1" /> 192 <mx:Image id = "weatherImage1" /> 193 <mx:Text id = "weatherTemp1" /> 194 </mx:VBox> 195

Outline

weather.mxml

(7 of 9)

Create the progress bar, which is not visible unless the data is loading.

Create the five-day forecast and set the show and hide animations to the effects defined earlier in Parallel elements


59196 <mx:VBox horizontalAlign = "center"

197 borderStyle = "solid" width = "20%">

198 <mx:Text id = "weatherDay2" />

199 <mx:Image id = "weatherImage2" />

200 <mx:Text id = "weatherTemp2" />

201 </mx:VBox>

202






208 </mx:VBox>

209






215 </mx:VBox>

216 </mx:HBox>

217 </mx:VBox>

Outline

weather.mxml

(8 of 9)

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


Outline

weather.mxml

(9 of 9)


61

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


62

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


63 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 private const swfDomID : String = "weather"; 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

Outline

map.as

(1 of 2)


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

Outline

map.as

(2 of 2)


65

18.6 Customizing Your User Interface

• Flex allows you to customize the style of your user interface– 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

• 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– add a Style element with a source attribute pointing to the style-sheet file, as in

<mx:Style source="styles.css"/>

• Can also customize the look of your application is by using themes, found in flex_sdk_2/ frameworks/themes/

– You can specify that you want your application to use a different theme at compile time by adding a theme argument to the mxmlc command

66 1 <?xml version = "1.0" encoding = "utf-8" ?> 2  3  4 <mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml"> 5

6  7 <mx:Style> 8 LinkButton { font-family: "Helvetica, sans-serif"; 9 font-size: 14 } 10 HorizontalList { font-size: 12; 11 color: black } 12 .customStyle { font-size: 16; 13 font-weight: bold; 14 color: black } 15 </mx:Style> 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

Outline

coverViewerStyles.mxml

(1 of 7)

Style syntax is like CSS.

6725  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" /> 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

Outline


(2 of 7)

6855  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 <mx:Panel id = "viewPanel" title = "Deitel Book Cover Viewer" 74 width = "100%" height = "100%" horizontalAlign = "center" 75 color = "blue" fontSize = "18" fontFamily = "Helvetica" 76 textAlign = "center"> 77

Outline


(3 of 7)

Inline styles are set using properties, using camel-case property names

98  99  100 <mx:Label text = "{ thumbnailList.selectedItem.name }" 101 styleName = "customStyle" /> 102 </mx:VBox> 103 </mx:HBox> 104

Outline


(4 of 7)

Custom style set using styleName property

70105  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

Outline


(5 of 7)

131



134 </mx:VBox>

135 </mx:Component>



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>


Outline


(6 of 7)


72

Outline


(7 of 7)


73

Fig. 18.20 | Running mxmlc with the theme parameter in Windows XPCommand Prompt.


74

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


75

18.7 Creating Charts and Graphs

• SeriesInterpolate element – allows us to animate changes in a chart’s data– duration attribute specifies how long the animation takes in milliseconds

• LineChart element – Creates a line chart, using data from the object specified by the dataProvider attribute– showDataTips attribute, if true, displays a tool tip giving the user more detailed information about a point when

the user mouses over a data point on the graph

• LinearAxis baseAtZero attribute – specifies whether the chart starts at zero

• CategoryAxis element of a horizontalAxis or verticalAxis element

– defines the values located on the axes– categoryField attribute defines what data object the values come from

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

• CandlestickChart element – designed to display financial data, such as stock prices


76

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

77 1 <?xml version = "1.0" encoding = "utf-8" ?> 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]

Outline

weatherChart.mxml

(1 of 12)


7830 public var weatherArray : ArrayCollection;

31 [Bindable]

32 private var placeName : String;

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 placeNameChartText.text = "";

48

49 // show the loading progress bar

50 loadingBar.visible = true;

51

52 // request the new data

53 weatherService.GetWeatherByZipCode.send();

54 } // end function getWeather

55

Outline

weatherChart.mxml

(2 of 12)

Create an ArrayCollection to store the weather data so that the chart can access it


7956 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 placeNameChartText.text = "5 Day Forecast for " + placeName; 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();

Outline

weatherChart.mxml

(3 of 12)

Add the place name to the top of the chart


8086

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

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 weatherArray = new ArrayCollection( ); 112

Outline

weatherChart.mxml

(4 of 12)


81113 for ( var j : int = 0; j < weatherService.GetWeatherByZipCode. 114 lastResult.GetWeatherByZipCodeResult.Details. 115 WeatherData.length(); j++ ) 116 { 117 // create the object to be added to the array 118 var weatherDataObject : Object = new Object(); 119

120 // extract the data from the e4x-formatted result 121 weatherDataObject.Date = weatherService. 122 GetWeatherByZipCode.lastResult. 123 GetWeatherByZipCodeResult.Details.WeatherData[ j ].Day; 124 weatherDataObject.HighTemp = weatherService. 125 GetWeatherByZipCode.lastResult. 126 GetWeatherByZipCodeResult.Details. 127 WeatherData[ j ].MaxTemperatureF; 128 weatherDataObject.LowTemp = weatherService. 129 GetWeatherByZipCode.lastResult. 130 GetWeatherByZipCodeResult.Details. 131 WeatherData[ j ].MinTemperatureF; 132

133 // add the object to the array 134 weatherArray.addItem( weatherDataObject ); 135 } //end for 136 // end charting functionality 137 } 138 else 139 { 140 Alert.show( "Invalid zip code" ); 141 }

Outline

weatherChart.mxml

(5 of 12)

Put all the data into the ArrayCollection so the chart will be able to use the ArrayCollection as its dataProvider.


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

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

Outline

weatherChart.mxml

(6 of 12)

83169  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 <mx:SeriesInterpolate id = "interpolateEffect" duration = "1000" /> 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>{ zipcode.text }</ZipCode> 193 </mx:request> 194 </mx:operation> 195 </mx:WebService> 196

Outline

weatherChart.mxml

(7 of 12)

Add an animation effect to show when the chart changes.

84197  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" /> 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%">

Outline

weatherChart.mxml

(8 of 12)


85224 <mx:Text id = "weatherDay0" /> 225 <mx:Image id = "weatherImage0" /> 226 <mx:Text id = "weatherTemp0" /> 227 </mx:VBox> 228




Outline

weatherChart.mxml

(9 of 12)

86250 <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 }" 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 <mx:VBox label = "Chart View" width = "100%" height = "100%"> 274 <mx:Text fontWeight = "bold" id = "placeNameChartText" /> 275 <mx:LineChart id = "lineChart" width = "100%" height = "100%" 276 dataProvider = "{ weatherArray }" showDataTips = "true"> 277 <mx:verticalAxis> 278 <mx:LinearAxis baseAtZero = "false" />

Outline

weatherChart.mxml

(10 of 12)

The ArrayCollection is the dataProvider for the chart

The vertical (temperature) axis does not start at zero


87279 </mx:verticalAxis>

280 <mx:horizontalAxis>

281 <mx:CategoryAxis categoryField = "Date"

282 title = "Date" />

283 </mx:horizontalAxis>

284 <mx:series>

285 <mx:LineSeries yField = "HighTemp"

286 displayName = "High Temp"

287 showDataEffect = "{ interpolateEffect }" />

288 <mx:LineSeries yField = "LowTemp"

289 displayName = "Low Temp"


291 </mx:series>

292 </mx:LineChart>

293 <mx:CandlestickChart id = "candlestickChart" width = "100%"

294 height = "100%" showDataTips = "true"

295 dataProvider = "{ weatherArray }">

296 <mx:verticalAxis>

297 <mx:LinearAxis baseAtZero = "false" />

298 </mx:verticalAxis>

Outline

weatherChart.mxml

(11 of 12)Line chart shows a line for high temperatures and a line for lows

88299 <mx:horizontalAxis>

300 <mx:CategoryAxis categoryField = "Date"

301 title = "Date"/>

302 </mx:horizontalAxis>

303 <mx:series>

304 <mx:CandlestickSeries openField = "HighTemp"

305 highField = "HighTemp" lowField = "LowTemp"

306 closeField = "LowTemp"


308 </mx:series>

309 </mx:CandlestickChart>

310 </mx:VBox> 

311 </mx:Accordion>

312 </mx:Panel>


Outline

weatherChart.mxml

(12 of 12)

The candlestick chart’s data series requires open, high, low, and close data.


8918.8 Connection-Independent RIAs on the Desktop: Adobe Integrated Runtime (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.

• User can download and run AIR applications as if they were native desktop applications, including running them while disconnected from the server.

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


90

18.9 Flex 3 Beta

• An introduction to the features planned for Flex 3 is available at labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions

2008 Pearson Education, Inc. All rights reserved. 1 18 Adobe ® Flex TM 2 and Rich Internet...

Documents

Transcript of 2008 Pearson Education, Inc. All rights reserved. 1 18 Adobe ® Flex TM 2 and Rich Internet...