manualshive.com logo in svg

MACROMEDIA FLEX BUILDER-USING FLEX BUILDER, Use Manual, Page: 155 / 158

Share
Download
MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual Download Page 155

155

INDEX

A

ActionScript

about  147
CDATA blocks  148
creating new files  75
debugger  87
language reference  17

ActionScript and MXML API Reference  17
adding effects  109
application file  117
application root folder  11
applying class styles  106
applying inline styles  107
Attributes panel  79,  101
authoring environment  5

B

backend systems. 

See 

business layer

BEA WebLogic  20
bindings

data models  131
data services  137
defined  150
endpoint  150
source  150
to business layer  136
to other components  127

Bindings panel  7,  138
breakpoints  88
business layer  152

C

Call Stack panel  90
CDATA 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  124
Code inspector  76
Code view  6,  76
coding

code hint preferences  82
code hints  78
code-coloring preferences  80
customizing the editor  80
editing tags  79
formatting  81
other information  76
preferences  80
views  6,  76

compiling  9,  84
components

copy and paste  100
creating  121
custom  120
editing properties  101
effects  109
importing  125
inserting  98,  117
local  118
Macromedia  120
namespaces  119
packaging  124
removing padding and border  96
repositioning  99
resizing  100
SWC  121
synchronizing  125

containers, inserting  97
context-sensitive help  17
copying and pasting components  100

Summary of Contents for FLEX BUILDER-USING FLEX BUILDER

Page 1: ...Using Flex Builder...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page 116: ...116 Chapter 4 Building a Flex User Interface Visually...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page 144: ...144 Chapter 6 Working with Data...

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

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

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

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

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

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

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

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

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

Page 154: ...154 Appendix A Basic Flex Concepts...

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

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

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

Page 158: ...158 Index W Watch panel 90 web servers 19 web services Flex 153 WEB INF 123 125 WebLogic 20 WebSphere 20 workspace 5...

Reviews:

No comments