background image

Testing and debugging Flex files

91

Debugging applications by monitoring interactions with the server

If your Flex application isn’t working as expected, you can use the Network Monitor to look for 
clues to the problem. When enabled, the Network Monitor monitors and records all data 
transactions with the server and displays the information in the Results panel.

The Network Monitor records and displays the following information:

Events relating to the MXML service tags, including the 

<mx:WebService>

<mx:HTTPService>

, and 

<mx:RemoteObject>

 tags

Transport layer information, including SOAP envelopes and AMF/FlashRemoting packets

Interactions resulting from the use of the ActionScript XML object, such as XML.send() and 
XML.sendAndLoad()

HTTP traffic

The Network Monitor displays data that comes from the server in its native ActionScript 
equivalent.

In general, the Network Monitor captures and stores all event data until you either quit the 
application or explicitly clear the data. The events are displayed in chronological order. You can 
also selectively filter out specific events.

This section contains the following topics:

“Turning on the Network Monitor” on page 91

“Monitoring interactions with the server” on page 92

“Using trace statements with the Network Monitor” on page 93

“Saving event data” on page 94

Turning on the Network Monitor

The Network Monitor inserts itself between the application and the server to gain complete 
access to the data passing between them. You must enable it before using it.

To enable the Network Monitor:

1.

Make sure a Flex server is defined as the testing server.

For more information, see 

“Starting a new application in Flex Builder” on page 9

.

2.

In the Network Monitor panel in the Results panel group (Window > Results), click the Play 
button on the sidebar and select Settings.

The Network Monitor Settings dialog box appears.

3.

In the Network Monitor Settings dialog box, accept the default port values or specify the local 
communication ports that the Network Monitor should listen in on.

Содержание FLEX BUILDER-USING FLEX BUILDER

Страница 1: ...Using Flex Builder...

Страница 2: ...Third Party Information This guide contains links to third party websites that are not under the control of Macromedia and Macromedia is not responsible for the content on any linked site If you acce...

Страница 3: ...Tutorial Binding components to data with Flex Builder 58 Next steps 74 CHAPTER 3 Creating Coding and Debugging Flex Files 75 Creating MXML or ActionScript files 75 Working with the code in Flex files...

Страница 4: ...CHAPTER 6 Working with Data 127 Binding a control or container 127 Editing a binding visually 129 Working with Flex data models 129 Working with Flex data services 136 APPENDIX A Basic Flex Concepts 1...

Страница 5: ...eloping Flex Applications Help and the Flex ActionScript and MXML API Reference Help The following topics are covered in this chapter Exploring the authoring environment on page 5 Starting a new appli...

Страница 6: ...ar Tag inspector and Data panel are also fully functional in Code view The ActionScript debugging panels help you debug your code after setting breakpoints and switching to debug mode The debugging pa...

Страница 7: ...es the traditional Property inspector in Dreamweaver While you can still use the Property inspector for editing HTML and other document types in Flex Builder it is disabled when you work on MXML or Ac...

Страница 8: ...ActionScript files don t render in Flash Player they would appear blank in Design view As a result Flex Builder always displays ActionScript files in Code view 3 If you re in Design view and you want...

Страница 9: ...site at www macromedia com go flex_install For information on installing the server on the same computer as Flex Builder see Install the Flex server on your computer on page 22 This section covers the...

Страница 10: ...application root folder on page 11 If you are using FTP access enter the Flex application root folder as the Host Directory value If you are using network access enter the Flex application root folder...

Страница 11: ...en click Done to dismiss the Manage Sites dialog box You can now start developing your application with Flex Builder Related topics Tutorial Setting up a development environment on page 21 Specifying...

Страница 12: ...ia website at www macromedia com go flex_install For information on installing Flex server on the same computer as Flex Builder see Install the Flex server on your computer on page 22 This section con...

Страница 13: ...at is where it can send MXML and ActionScript files to be compiled by the Flex server at design time Flex Builder needs to get these files compiled so you can preview MXML files get build and debuggin...

Страница 14: ...drive while you work on them with Flex Builder 4 In the Remote Info category specify where you want to put files to the remote server For this Flex Builder site you must specify the folder called sam...

Страница 15: ...e compiled at design time Flex Builder uploads the file to the testing server folder you specified and attempts to request it using the URL prefix 8 Click OK to define the site and dismiss the Site De...

Страница 16: ...Remote Install Local Root Folder Any folder on the computer running Flex Builder Flex Server Root Folder installfolder Tomcat 5 0 webapps samples URL Prefix http hostname 8080 samples WebSphere 5 1 R...

Страница 17: ...enu gives you access to thousands of pages of information while you work The following menu items can be useful for Flex developers Using Flex Builder describes how to use Flex Builder to develop Flex...

Страница 18: ...n page 20 which requires the following software An HTTP web server see About web servers and Flex on page 19 A J2EE application server see About J2EE application servers and Flex on page 19 You can qu...

Страница 19: ...when installing the Flex server you don t need a separate web server JRun4 has a web server that s installed and configured for you For more information see Install the Flex server on your computer on...

Страница 20: ...s for noncommercial use for developing and testing Flex applications It is not licensed for deployment After 60 days it will support requests from only five IP addresses plus localhost but you can sti...

Страница 21: ...e you can start any of the others The first tutorial shows you how to set up a Flex development environment The second shows you how to lay out a Flex user interface with Flex Builder The third shows...

Страница 22: ...x installation guide on the Macromedia website at www macromedia com go flex15_install The Developer edition is for noncommercial use for developing and testing Flex applications It is not licensed fo...

Страница 23: ...ated JRun4 Macromedia Flex option 6 After you finish installing Flex 1 5 install any Flex updaters available on the Macromedia website at www macromedia com go flex_updaters 7 Start the server by sele...

Страница 24: ...lex application root folder C Program Files Macromedia Flex jrun4 servers default samples Note If you installed Flex on a different computer you must copy the files to the samples folder on the remote...

Страница 25: ...samples folder contains not only the Flex Builder tutorials but other sample applications as well 3 In the Local Root Folder text box click the folder icon and select the following folder C Program Fi...

Страница 26: ...orial Creating a layout with Flex Builder on page 26 Tutorial Building custom components with Flex Builder on page 34 Tutorial Binding components to data with Flex Builder on page 58 Tutorial Creating...

Страница 27: ...in your favorite image editor from the Files panel in Flex Builder This feature is useful if you want to quickly change or touch up a mock up 1 In Flex Builder make sure the Flex Builder Samples site...

Страница 28: ...w to build these components see Tutorial Building custom components with Flex Builder on page 34 In this tutorial you create the basic layout of the application Create an MXML file In this part of the...

Страница 29: ...ed in an external CSS file to make sure your site has a consistent look and feel CSS styles also give you more flexibility when you want to change the design of your site 1 Make sure the flexstore mxm...

Страница 30: ...The borders and padding appear only at design time You can click the Standard button at any time to get a better representation of how your project will look after it s compiled 2 In the Containers c...

Страница 31: ...the container clips any content that extends beyond the specified size Select the Don t Show Me This Message Again option and click OK 4 Switch to Design view View Design click anywhere in the HBox c...

Страница 32: ...f the Panel container Be careful not to click inside the Panel container the vertical insertion bar should appear beside the Panel container 2 In the Containers category of the Insert bar click the VB...

Страница 33: ...ble to switch views by clicking view buttons at the lower edge of the catalog For information about the user interface mock ups see Review the approved user interface mock ups on page 27 After studyin...

Страница 34: ...applications The Flex Store application requires the following custom components Two catalog components that give the user different views of the product catalog A product detail component that gives...

Страница 35: ...a in this tutorial Another tutorial describes how to add data see Tutorial Binding components to data with Flex Builder on page 58 1 In Flex Builder make sure the Flex Builder Samples site is selected...

Страница 36: ...DataGrid button in the Controls category of the Insert bar The DataGrid dialog box appears 6 Set the dialog box options as follows ID list Header Text first row Name Header Text second row Price Colu...

Страница 37: ...properties For example to set the width property click in the tag before the closing angle bracket press the Spacebar to display the code hints type the letter w to quickly select the property and pre...

Страница 38: ...s tutorial Another tutorial describes how to add data see Tutorial Binding components to data with Flex Builder on page 58 1 In Flex Builder select File New The New Document dialog box appears 2 Selec...

Страница 39: ...the Tile container clicking the Image button in the Controls category of the Insert bar and selecting the following image in the mockups folder fbComponents mockups tnProduct png You want to insert fi...

Страница 40: ...ace allotted to it in the flexstore mxml file Build the product detail component According to the component s functional specification the product detail component should display product details when...

Страница 41: ...component mock up you decide to use the following Flex containers to lay out the component A Panel container to create the header and position the component s child containers vertically An HBox cont...

Страница 42: ...lder inserts an empty Canvas container in the component 7 With the Canvas container still selected specify the values for the following properties in the Attributes panel Size height 140 Size width 15...

Страница 43: ...p the component should display the following information a thumbnail image the product name and price and a brief product description 1 Make sure the component file ProductDetail mxml is open in Flex...

Страница 44: ...component will have access to this style sheet when the component is used in the flexstore mxml file 5 Insert another Label component for the product price by switching to Code view View Code clicking...

Страница 45: ...re the component file ProductDetail mxml is open in Flex Builder 2 In Design view click inside the ControlBar container at the lower edge of the Panel container Make sure the blinking insertion bar ap...

Страница 46: ...ze width 40 7 Insert a button by clicking to the right of the NumericStepper control in the ControlBar container and clicking the Button control on the Insert bar 8 Modify the button text by double cl...

Страница 47: ...ial you complete the following tasks Lay out the shopping cart component on page 47 Add the product list to the shopping cart on page 48 Finish the footer of the shopping cart component on page 50 Lay...

Страница 48: ...e in the fbComponents folder by pressing Control S and naming the component file as follows CartView mxml In Design view the component s layout should look similar to the following figure if you selec...

Страница 49: ...the following properties in the Attributes panel Size height 100 Size width 100 6 Switch to Code view View Code and set the column properties of the DataGrid component by locating the three mx DataGr...

Страница 50: ...cts in the cart 1 Make sure the component file CartView mxml is open in Flex Builder 2 In Design view click anywhere inside the ControlBar container at the lower edge of the Panel container Make sure...

Страница 51: ...Insert the view components in the Flex Store layout After completing the custom components you re ready to insert them in the Flex Store layout The layout is already created in this tutorial To creat...

Страница 52: ...iately after the local ThumbnailView tag selecting Insert Local Component from the menu and selecting your GridView component You insert the GridView component in the same ViewStack container as the T...

Страница 53: ...roductDetail mxml 4 Click Open and then click OK to close the dialog boxes Flex Builder inserts the custom component in the Canvas 5 Click the mx Canvas tag on the tag selector on the lower edge of th...

Страница 54: ...is correctly defined in Flex Builder For more information see Define a Flex Builder site on page 25 Activate the catalog view buttons According to the functional specifications the Flex Store applicat...

Страница 55: ...le view button events function changeView view currentView view if view thumb bodyStack selectedChild thumbView else if view grid bodyStack selectedChild gridView Note Make sure you include the variab...

Страница 56: ...e catalog s grid view You believe you can find clues to the problem in the ActionScript file that contains the buttons event handler You decide to run the ActionScript debugger to pinpoint the problem...

Страница 57: ...uses the list_off png image and check the value of the changeView function s parameter mx Image source Embed assets images list_off png mouseDown changeView thumb The value of the parameter is wrong i...

Страница 58: ...components tutorials first If you completed the components tutorial you can overwrite the files in the fbBindings folder with your files in the fbComponents folder Tip This tutorial requires that you...

Страница 59: ...st for the Flex server samples samples WEB INF flex flex config xml Note If you get an error message that says the WSDL fetch failed make sure the Flex server is running Also make sure you entered the...

Страница 60: ...duct data returned by the web service 1 Make sure your flexstore mxml file is open in Flex Builder 2 Switch to Code view and insert a data model by entering the following lines after the closing mx We...

Страница 61: ...You must specify an event that sends a request to the web service for the product data The Flex Store functional specification approved by the client says that the product catalog must be displayed e...

Страница 62: ...uilder to make sure the web service is passing catalog data to your application When enabled the Network Monitor intercepts all data transactions with the server and displays the information in a pane...

Страница 63: ...ing that the data is passed to the application you can use the data to populate the GridView component 1 Open the GridView mxml file located in the fbBindings folder 2 In Code view enter the following...

Страница 64: ...created the dataObject property in step 2 above to pass the catalog data to the component where it s used in the DataGrid control see step 3 above 7 Save the flexstore mxml file 8 Make sure the Flex s...

Страница 65: ...currentItem mx Repeater The product data passed by the flexstore mxml file is stored in the dataObject variable You use the custom component called ProductThumbnail to display the product s thumbnail...

Страница 66: ...y shown in bold type mx DataGrid id list dataProvider dataObject change selectedItem event target selectedItem dispatchEvent type change 4 Save the GridView mxml file Detect the product in the Thumbna...

Страница 67: ...perty shown in bold type local GridView xmlns local id gridView dataObject catalog change selectedItem event target selectedItem When a change is detected in the GridView component for example when th...

Страница 68: ...odel name dataObject name name price dataObject price price description dataObject description description image dataObject image image mx Model You want to store the data passed to the ProductDetail...

Страница 69: ...the control clear the placeholder value for the text property start a new binding select text as the destination property and select the price element of the data model as the source property 11 Repea...

Страница 70: ...em The total price of all the products in the cart must be displayed as well as a button to delete items in the cart and a button to let the user proceed to the checkout pages Note The Checkout button...

Страница 71: ...ect to the component This object keeps track of items in the shopping cart 3 Locate the mx Button tag in the file and add the following property shown in bold type mx Button label Add to Cart click sh...

Страница 72: ...nd modify the value of the text property as follows shown in bold type mx Label styleName price text Total dataObject total 5 Save the CartView mxml file 6 Switch to your flexstore mxml file 7 In Code...

Страница 73: ...mx Button label Delete width 75 enabled dg selectedItem null click removeItem The Delete button is enabled only when a user selects an item in the shopping cart When the user clicks the button when a...

Страница 74: ...om go flex_devcenter For more information on the Flex Builder features discussed in these tutorials see the following topics Chapter 3 Creating Coding and Debugging Flex Files on page 75 Chapter 4 Bui...

Страница 75: ...led Macromedia Flex Builder provides you with an integrated development environment for writing editing debugging previewing and deploying MXML and ActionScript files This chapter contains the followi...

Страница 76: ...n Flex Builder it does not cover every coding feature in the product For more information see Coding in Dreamweaver in Using Dreamweaver Help This section covers the following topics Viewing and editi...

Страница 77: ...layout click the Standard button on the toolbar to remove the padding and borders around objects in Design view Standard mode gives you a more accurate view of the layout This mode is ideal in Split v...

Страница 78: ...sts of tags and properties as you type If you re working with ActionScript the code hints display function patterns of built in ActionScript classes function name return type names and types of argume...

Страница 79: ...Tag inspector Window Tag Inspector or press F9 2 Click the value field of a property in the Attributes tab and enter or edit the value For more information on the various properties see Flex ActionSc...

Страница 80: ...ences You can customize the Flex coding environment in Flex Builder While this section covers some basic coding preferences it does not cover every preference For more information see Setting Up Your...

Страница 81: ...Edit the code coloring scheme and click OK For more information click the Help button in the dialog box Setting code formatting preferences You can change the look of your code by specifying formattin...

Страница 82: ...ferences For more information click the Help button in the dialog box Setting code hints preferences You can modify the way code hints work by enabling or disabling automatic tag completion enabling o...

Страница 83: ...several tools to help you test and debug Flex applications including an MXML validator an ActionScript debugger and a network monitor This section covers the following topics Validating MXML on page 8...

Страница 84: ...ML Double click the error in the Validation panel Tip To validate ActionScript compile the project ActionScript errors if any will appear in the Output panel Compiling files to check for errors You ca...

Страница 85: ...ion errors or warnings in the Output panel For more information on the Output panel click the Help button in the panel 4 Double click any error or warning message in the panel to open the file in whic...

Страница 86: ...sults click the Play button on the sidebar and select Run Run in Flex Builder In the Network Monitor panel in the Results panel group Window Results click the Play button on the sidebar and select Run...

Страница 87: ...of the view buttons Code Split Design in the Document toolbar Uploading dependent files Before running or debugging a file Flex Builder asks if you want it to upload dependent files to the server Dep...

Страница 88: ...utter beside the ActionScript line where you want the script to stop executing Click anywhere inside the line of code and press Control Alt B Click anywhere inside the line of code and select Edit Set...

Страница 89: ...Results click the Play button on the sidebar and select Debug Debug in Flex Builder A dialog box appears asking you if you want to upload dependent files Dependent files include any ActionScript file...

Страница 90: ...t in the script Flex Builder updates the information in the Variables panel to reflect the new location in the script The Output panel displays runtime errors warnings and traces For more information...

Страница 91: ...ta until you either quit the application or explicitly clear the data The events are displayed in chronological order You can also selectively filter out specific events This section contains the foll...

Страница 92: ...In Flex Builder these interactions occur when you run or debug a file Captured events appear in the Network Monitor panel in the Results panel group Window Results The left side of the panel displays...

Страница 93: ...gger NetworkMonitor trace string or NetworkDebugger NetworkMonitor trace var You cannot use a concatenation expression such as the following NetworkDebugger NetworkMonitor trace hello myVar After you...

Страница 94: ...data You can save the event data generated by a particular interaction for analysis or printing To save the event data Click the Save button the diskette in the panel s sidebar and save the file to a...

Страница 95: ...ML containers on page 97 Adding Flex components to the user interface on page 98 Repositioning Flex components on page 99 Resizing Flex components on page 100 Cutting copying and pasting Flex componen...

Страница 96: ...ng to Standard mode Tip If you prefer working in code combine Standard mode with Split view click the Split button on the Document toolbar to get quick visual feedback about the edits you make without...

Страница 97: ...the Attributes panel of Tag inspector Window Tag Inspector 3 If you want drag other MXML containers from the Insert bar into the Application container Flex Builder inserts a graphical representation...

Страница 98: ...e Insert bar to a container in the file The insertion point the cursor changes depending on the layout management rules of the container If you drag a component into a container with automatic positio...

Страница 99: ...oup of components or Control click each component to add it to the group 2 Drag the component or components to a new position on the page The insertion point changes depending on the layout management...

Страница 100: ...ng to its contents Related topics Laying out your user interface with MXML containers on page 97 Adding Flex components to the user interface on page 98 Editing Flex component properties on page 101 C...

Страница 101: ...panel 1 Click the component in the page The properties of the component appear in the Attributes panel of the Tag inspector Window Tag Inspector 2 If the item you want to edit is in a navigator conta...

Страница 102: ...tor appears instead 2 Set the properties of the component in the Attributes panel For more information see Creating MXML component files on page 121 3 Save the file After saving the component file Fle...

Страница 103: ...round color xFF0000 TextInput font family Helvetica font size 12pt mx Style The previous example shows the two types of selectors supported by Flex class selectors and tag selectors A class selector d...

Страница 104: ...en the CSS Styles panel Window CSS Styles and click the Attach Style Sheet button at the bottom of the panel The Attach External Style Sheet dialog box appears 3 Click Browse and browse to the externa...

Страница 105: ...blue a blue background is automatically applied to all TextInput objects 3 Select the location where you want to define the new style as follows To define the style in a new external style sheet selec...

Страница 106: ...e Document window right click the tag of the component it should be highlighted and select the class from the Set Style Name menu To apply a class style to several components at the same time 1 Select...

Страница 107: ...s that can be applied to the selected component Note Multiword style names in Flex are slightly different from their HTML counterparts but they re the same styles For example fontFamily in Flex is the...

Страница 108: ...hed editing the style save your work 6 If you modified a style in an external style sheet make sure to save the file and upload it to the server to ensure your changes are reflected when you compile a...

Страница 109: ...reference as a property in an MXML tag or in an ActionScript function The CSS property names of triggers use the following convention triggerEffect where trigger is the trigger name For example the s...

Страница 110: ...showEffect hideEffect moveEffect or resizeEffect and you specified an ID for the component a dialog box appears asking if you d like help setting a trigger for this effect If you want the current com...

Страница 111: ...e effect Flex Builder inserts an ActionScript function in the specified file The function is designed to trigger the event when an event occurs in another component in the file 5 In Code view find the...

Страница 112: ...effects To customize a standard Flex effect 1 In Design view select the MXML component with the effect you want to customize 2 In the Attributes panel of the Tag inspector Window Tag Inspector click t...

Страница 113: ...ilder automatically applies the custom effect to the original component but you can also apply it to other components in the file by selecting it from the list of effects in the Attributes panel Custo...

Страница 114: ...er define the event handler using ActionScript You can write the ActionScript directly in the MXML file or in an external ActionScript file that you include in the MXML file If the code for the event...

Страница 115: ...gning event handlers to components 115 Related topics Editing Flex component properties on page 101 Applying CSS styles to Flex components on page 102 Handling events in Developing Flex Applications H...

Страница 116: ...116 Chapter 4 Building a Flex User Interface Visually...

Страница 117: ...ilder also lets you work with Flash components and custom Flex components installed on the Flex server This chapter contains the following topics Inserting controls and containers in an MXML file on p...

Страница 118: ...onent from the Insert menu To find a component or container in the Insert bar position the mouse pointer over a button and wait for a tooltip to appear Note Custom components won t be visible on the I...

Страница 119: ...case is LoginForm If you enter loginForm the compiler will generate an error The following is an example of a custom component tag xyz LoginForm where xyz is the tag prefix used to reference component...

Страница 120: ...t the namespace is defined by the location of the component file in the application s root folder on the server For example if you write a custom MXML component called myButton mxml and save it on the...

Страница 121: ...s package For example suppose you want to insert a Flash component called foo swc that belongs to the my comps foo class The namespace is as follows xmlns xyz my comps For more information see About S...

Страница 122: ...The filename defines the component name For example if you name the file LoginForm mxml the component is named LoginForm The Flex server uses the spelling and capitalization of the filename to genera...

Страница 123: ...ur application Synchronize Flex Builder with the server Site Update Flex Components so that you can use the Insert bar to insert the components in your files or the Tag inspector to edit their propert...

Страница 124: ...sure the application folder structure on the server matches the folder structure on your local computer and that you copy the file to the same folder on the server If you specified a remote folder wh...

Страница 125: ...nt that s out of date you might inadvertently create invalid MXML For example you might insert a component on your page and edit a property that no longer exists To synchronize with new or updated com...

Страница 126: ...operties and property types appear in the property code hints If the component is designed to be visible at runtime and you insert it in an MXML file Flex Builder displays a visual representation of i...

Страница 127: ...se Flex Builder to visually bind them together For more information on data binding see Data binding in Flex on page 150 If you want to bind a component to a data model see Working with Flex data mode...

Страница 128: ...the data to be the values entered by users in the selected TextInput component select the text String property 5 Click Next to specify the destination of the data The Add Binding Step 2 dialog box app...

Страница 129: ...in the Bound To row of the panel Depending on the direction of the binding in or out the Select Source or the Select Destination dialog box appears 4 Select another source or destination property for...

Страница 130: ...mail mx Model For more information see Using data models in Developing Flex Applications Help 3 Save the file 4 Use the Data panel Window Data to inspect the data model Note If the data model doesn t...

Страница 131: ...s data to a data model The procedures in this section describe how to create each type of binding This section covers the following topics Retrieving data from a Flex data model on page 131 Passing da...

Страница 132: ...retrieve an employee name from the data model select the appropriate name property of the data model The Binding Source text box displays the binding expression Flex Builder will insert in the code I...

Страница 133: ...omponent that you want to use to display the employee name select the Label component in the left pane and then select the text String property in the right pane 7 Click Finish to create the binding T...

Страница 134: ...del For example your file can have a TextInput component that lets users enter employee information 2 In the Data panel select the data model 3 In the Bindings panel Window Bindings click the Plus but...

Страница 135: ...yee name select the TextInput component in the left pane and then select the text String property in the right pane If you want you can modify the binding expression in the Binding Source text box 7 C...

Страница 136: ...ot properly defined in Flex Builder For information on defining a testing server see Starting a new application in Flex Builder on page 9 This section covers the following topics Inserting a Flex data...

Страница 137: ...component or a data model in the file A Flex web service is easier to use than the other Flex data services because you can visually bind to the web service s results or parameters without knowing the...

Страница 138: ...ct the data service To add a data service to the panel see Inserting a Flex data service in the MXML file on page 136 3 In the Bindings panel Window Bindings click the Plus button The Add Binding Step...

Страница 139: ...t pane 7 Click Finish to create the binding The new binding appears in the Bindings panel 8 Create an event handler to call the data service You can create this event handler rapidly with Flex Builder...

Страница 140: ...ected and then select the property of the data service to receive the data For example if you want to pass a zip code entered by a user to a web service select the appropriate zip code property of the...

Страница 141: ...ox 7 Click Finish to create the binding The new binding appears in the Bindings panel 8 Create an event handler to call the data service You can create this event handler rapidly with Flex Builder For...

Страница 142: ...rvice For example you can select a Button component for users to click 3 In the Events panel of the Tag Inspector Window Tag Inspector click the field next to the event that will trigger the service c...

Страница 143: ...Working with Flex data services 143 Related topics Inserting a Flex data service in the MXML file on page 136 Assigning event handlers to components on page 114...

Страница 144: ...144 Chapter 6 Working with Data...

Страница 145: ...is a form element such as a Button or Text Input field Containers and controls define the application s user interface In an MVC design pattern those pieces of the application model represent the view...

Страница 146: ...plications can consist of a mix of MXML and ActionScript MXML is a tag based language for building Flex applications ActionScript is a procedural based language for developing applications in Flash Th...

Страница 147: ...Script in Developing Flex Applications Help To use ActionScript in Flex applications you must either add script blocks to the MXML file using the mx Script tag or reference external ActionScript files...

Страница 148: ...ex containers components and controls Building a Flex user interface consists of inserting Flex containers components and controls in an MXML file This section covers the following topics Flex compone...

Страница 149: ...erarchical structure for controls and other containers Typically you define a container and then insert controls or other containers in it At the root of a Flex application is the mx Application tag w...

Страница 150: ...want a greater level of control over sizing and positioning Flex provides the Canvas container This container has no built in layout rules but instead lets you explicitly set the position and size of...

Страница 151: ...models A data model is an object you can use to temporarily store data in memory so that you can more easily manipulate the data For example a data model could store information such as a person s nam...

Страница 152: ...terface is separated from the business layer containing the code that implements the functionality or business rules of the application and the data layer containing databases and other data stores Th...

Страница 153: ...escription An HTTP service is nothing more than an HTTP request to a URL The primary purpose of HTTP services is to retrieve XML data from an external source A remote object is a Java object in the Fl...

Страница 154: ...154 Appendix A Basic Flex Concepts...

Страница 155: ...TA block 148 child containers selecting 101 class selectors 103 class styles applying 106 client server interactions monitoring 91 code formatting preferences 81 code hint preferences 82 code hints 12...

Страница 156: ...Developer Edition of Flex 20 developer guide 17 developer resources 18 Developing Flex Applications 17 documentation 17 Dreamweaver using 17 E Edit Coloring Scheme dialog box 81 editing CSS styles 107...

Страница 157: ...through child containers 101 Network Monitor 91 New Document dialog box 75 O Output panel 84 P packaging components 124 presentation layer 152 previewing in a browser 86 Property inspector Flex 7 Q Qu...

Страница 158: ...158 Index W Watch panel 90 web servers 19 web services Flex 153 WEB INF 123 125 WebLogic 20 WebSphere 20 workspace 5...

Отзывы: