1. DL manuals
  2. MACROMEDIA
  3. Other
  4. FLEX BUILDER-USING FLEX BUILDER
  5. Using Manual

MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Using Manual

Summary of FLEX BUILDER-USING FLEX BUILDER

  • Page 1

    Using flex builder.

  • Page 2

    Trademarks activeedit, activetest, add life to the web, afterburner, aftershock, andromedia, allaire, animation powerpack, aria, attain, authorware, authorware star, backstage, blue sky software, blue sky, breeze, bright tiger, captivate, clustercats, coldfusion, contents tab composer, contribute, d...

  • Page 3: Contents

    3 contents chapter 1: getting started with flex builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 exploring the authoring environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 starting a new application in flex builder . . . . . . . . . . . . . . . . . ....

  • Page 4

    4 contents chapter 5: working with components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 inserting controls and containers in an mxml file . . . . . . . . . . . . . . . . . . . . . . . 117 creating mxml component files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...

  • Page 5: Chapter 1

    5 chapter 1 getting started with flex builder this chapter provides an overview of macromedia flex builder and steps to get started developing flex applications. Flex builder is an integrated development environment (ide) for flex developers. Because it’s tightly integrated with the macromedia flex ...

  • Page 6

    6 chapter 1: getting started with flex builder design view (view > design) lets you lay out and edit an mxml user interface visually. Design view has two modes: expanded and standard. In expanded mode, you can easily insert, edit, position, or resize mxml components because flex builder adds tempora...

  • Page 7

    Exploring the authoring environment 7 the tag inspector lets you set the properties of containers and components in the file. You can also use it to apply effects, specify event handlers, modify css styles, and create data bindings. The tag inspector replaces the traditional property inspector in dr...

  • Page 8

    8 chapter 1: getting started with flex builder the data panel lets you inspect the data services (such as web services) and data models in the current mxml file, as well as insert or delete services in the file. You can work in design view, code view, or both. To switch between design and code views...

  • Page 9

    Starting a new application in flex builder 9 starting a new application in flex builder the first step in creating any new flex application in flex builder is to define a flex builder site. A flex builder site is analogous to a project in other development environments: it lets you manage files and ...

  • Page 10

    10 chapter 1: getting started with flex builder to define a flex builder site with advanced options: 1. In flex builder, select site > manage sites, click the new button on the manage sites dialog box, and select site from the context menu. The site definition dialog box appears. If the basic tab is...

  • Page 11

    Starting a new application in flex builder 11 6. In the url prefix text box, specify the url prefix that flex builder should append to flex file names. To get a file compiled at design time, flex builder sends the file to the flex application root folder and then attempts to request it using a url—i...

  • Page 12

    12 chapter 1: getting started with flex builder for example, if you installed the flex server on a windows computer using the integrated jrun4/flex install option, the application root folder of the default application is as follows: c:\program files\macromedia\flex\jrun4\servers\default\flex in thi...

  • Page 13

    Defining a site for the flex sample apps application 13 3. In the local root folder text box, click the folder icon and select the following folder: c:\program files\macromedia\flex\jrun4\servers\default\samples\ this step tells flex builder where the application files are located on your hard drive...

  • Page 14

    14 chapter 1: getting started with flex builder defining the site if the flex server is remote this section describes how to define a flex builder site to work with the flex sample apps application if the flex server is installed and running on a different computer than flex builder. For more inform...

  • Page 15

    Defining a site for the flex sample apps application 15 5. Click testing server in the category list to display the testing server settings. You use the testing server options to tell flex builder where it can “test” files—that is, where it can send files to be compiled at design time. Flex builder ...

  • Page 16

    16 chapter 1: getting started with flex builder caution: these site settings assume default installations of both the application server and the flex server. The settings may not work for custom installations. Integrated jrun4/flex - local install local root folder: c:\program files\macromedia\flex\...

  • Page 17

    Getting help in flex builder 17 getting help in flex builder flex builder has a variety of resources to help you develop flex applications. You can get context- sensitive help about an mxml tag, find out how to use a flex builder feature, or look up a term in the flex actionscript language reference...

  • Page 18

    18 chapter 1: getting started with flex builder macromedia website resources the macromedia website contains the following resources to support flex developers: flex builder support pages on the macromedia website at www.Macromedia.Com/go/ fb_support/ helps you get the most out of flex builder. The ...

  • Page 19

    What you need to build flex applications 19 this section covers the following topics: • “system requirements for flex builder” on page 19 • “about web servers and flex” on page 19 • “about j2ee application servers and flex” on page 19 • “about the flex server” on page 20 system requirements for flex...

  • Page 20

    20 chapter 1: getting started with flex builder • jakarta tomcat 4.1.29 or 5.0.18. You can download a copy of tomcat from the jakarta project website at http://jakarta.Apache.Org/tomcat/ . • ibm websphere application server 5. You can download a trial version from the ibm website at www7b.Software.I...

  • Page 21: Chapter 2

    21 chapter 2 flex builder tutorials this series of four interconnected tutorials explains how you can build a simple macromedia flex application using macromedia flex builder. The application is part of a website for the fictitious flex store company. The application gives visitors the ability to vi...

  • Page 22

    22 chapter 2: flex builder tutorials install the flex server on your computer this part of the tutorial describes how to set up the developer edition of flex on the same computer as flex builder. To compile and run mxml and actionscript files, you need access to a flex server. The setup described in...

  • Page 23

    Tutorial: setting up a development environment 23 5. On the install options dialog box, select the second option, macromedia flex with integrated jrun4. The dialog box gives you another installation option. This tutorial assumes that you selected the integrated jrun4/macromedia flex option. 6. After...

  • Page 24

    24 chapter 2: flex builder tutorials for more information, see the flex installation documentation on the macromedia website at www.Macromedia.Com/go/flex15_install/ . You can verify that the flex server is running normally as follows: 1. Open the following url in your browser: http://localhost:8700...

  • Page 25

    Tutorial: setting up a development environment 25 define a flex builder site in this part of the tutorial, you define a flex builder site for the tutorials. A flex builder site lets you visually design, preview, and debug mxml and actionscript files without leaving flex builder. After you define the...

  • Page 26

    26 chapter 2: flex builder tutorials 5. In the url prefix text box, enter the following url: http://localhost:8700/samples/ caution: flex builder may auto-populate this text box with http://localhost:8700/flex/. Make sure you change the value to http://localhost:8700/samples/. To get the flex server...

  • Page 27

    Tutorial: creating a layout with flex builder 27 review the approved user interface mock-ups during the planning and approval stages of the project, members of your team produced final mock-ups of the user interface for the flex store. You will use these mock-ups to guide you when you create the mxm...

  • Page 28

    28 chapter 2: flex builder tutorials the user will also have the option of viewing thumbnails in the product catalog on the left side of the layout. The second mock-up file, uithumbs.Png, shows this thumbnail view: the layout contains the following custom components: • two interchangeable product ca...

  • Page 29

    Tutorial: creating a layout with flex builder 29 4. Set the following property in the attributes panel of the tag inspector (window > tag inspector): ■ styles > verticalgap: 0 note: the angle bracket means the verticalgap property is located in the styles category of the attributes tab. This convent...

  • Page 30

    30 chapter 2: flex builder tutorials position the page title after importing the css styles, the next task is to create a basic layout for the user interface. In this part of the tutorial, you position the page title (flex store) in the upper left corner of the layout, as indicated in the mock-up of...

  • Page 31

    Tutorial: creating a layout with flex builder 31 position the catalog component in this part of the tutorial, you position the product catalog on the left side of the user interface as shown in the mock-ups (see “review the approved user interface mock-ups” on page 27 ). To meet this design requirem...

  • Page 32

    32 chapter 2: flex builder tutorials 8. With the viewstack container still selected, set the following property in the attributes panel: ■ effects > changeeffect : fade ■ size > height : 100% ■ size > width : 100% you can select the fade value from the pop-up menu. The fade effect will make the view...

  • Page 33

    Tutorial: creating a layout with flex builder 33 6. Insert another canvas container by switching to code view, clicking immediately after the closing tag, and clicking the canvas button on the insert bar. After you accept the default width and height values in the dialog box that appears, flex build...

  • Page 34

    34 chapter 2: flex builder tutorials 5. With the insertion point still blinking in the hbox container, set the value for the following property in the attributes panel: ■ styles > horizontalgap : 0 6. Insert the thumbnail view button by clicking inside the hbox container, clicking the image button i...

  • Page 35

    Tutorial: building custom components with flex builder 35 build the grid view component according to the following mock-up, the grid view component should display the flex store product catalog as a two-column grid of names and prices. The user can select the grid view by clicking a button at the lo...

  • Page 36

    36 chapter 2: flex builder tutorials 4. With the insertion point still blinking in the vbox container, specify the values for the following properties in the attributes panel: ■ size > height : 100% ■ size > width : 100% ■ styles > verticalgap : 0 note: the “size > height” expression means the heigh...

  • Page 37

    Tutorial: building custom components with flex builder 37 9. Switch to code view (view > code) and set column properties of the datagrid by locating the two tags, and adding the following properties (shown in bold type): width="300"/> textalign="right" marginright="4" /> you can use code hints to qu...

  • Page 38

    38 chapter 2: flex builder tutorials build the thumbnail view component according to the following mock-up, the thumbnail view component should display the flex store product catalog as a set of thumbnails with names and prices. The user can select the thumbnail view by clicking a button at the lowe...

  • Page 39

    Tutorial: building custom components with flex builder 39 4. Insert a tile container to lay out the products by clicking anywhere in the vbox container, and clicking the tile button in the containers category of the insert bar. Flex builder inserts a tile container in the component file. 5. With the...

  • Page 40

    40 chapter 2: flex builder tutorials in design view, the completed component should look similar to the following figure if you select the vbox container: note: the component will scale to fit in the space allotted to it in the flexstore.Mxml file. Build the product detail component according to the...

  • Page 41

    Tutorial: building custom components with flex builder 41 the following is a mock-up of the component: the product detail component will not contain any data in this tutorial. Another tutorial describes how to add data (see “tutorial: binding components to data with flex builder” on page 58 ). In th...

  • Page 42

    42 chapter 2: flex builder tutorials 3. With the insertion point still blinking in the panel container, specify the values for the following properties in the attributes panel: ■ common > title : product details ■ styles > marginbottom : 8 ■ styles > marginleft : 8 ■ styles > marginright : 8 ■ style...

  • Page 43

    Tutorial: building custom components with flex builder 43 12. Save the component file in the fbcomponents folder by pressing control+s, double-clicking the fbcomponents folder, and naming the component file as follows: productdetail.Mxml in design view, the component’s layout should look similar to ...

  • Page 44

    44 chapter 2: flex builder tutorials 3. With the image still selected in the file, change the following properties in the attributes panel: ■ size > height : 140 ■ size > width : 150 ■ size > x : 0 ■ size > y : 0 4. Insert a label component for the product name by clicking anywhere inside the vbox c...

  • Page 45

    Tutorial: building custom components with flex builder 45 in design view, the component should look similar to the following figure if you select the panel container: finish the footer of the product detail component according to the component mock-up, the footer has a control that lets users specif...

  • Page 46

    46 chapter 2: flex builder tutorials 6. Insert a numericstepper control by clicking to the right of the quantity label in the controlbar container, clicking the numericstepper button in the controls category of the insert bar, and specifying the following properties in the attributes panel: ■ common...

  • Page 47

    Tutorial: building custom components with flex builder 47 build the shopping cart component according to the component’s functional specification, the shopping cart component should display the products that the user wants to bring to the checkout area for purchase. The user can delete items from th...

  • Page 48

    48 chapter 2: flex builder tutorials 4. Press enter to accept your change and close the quick tag editor. 5. Insert a controlbar container by clicking inside the panel container and clicking the controlbar button in the containers category of the insert bar. Flex builder inserts an empty controlbar ...

  • Page 49

    Tutorial: building custom components with flex builder 49 3. Click the plus (+) button to add a third column, and then set the following options in the datagrid dialog box: ■ id : dg ■ header text (first row) : name ■ header text (second row) : qty ■ header text (third row) : price ■ column name (fi...

  • Page 50

    50 chapter 2: flex builder tutorials in design view, the component should look similar to the following figure if you select the panel container: note: the component will scale to fit in the space allotted to it in the flexstore.Mxml file. Finish the footer of the shopping cart component according t...

  • Page 51

    Tutorial: building custom components with flex builder 51 5. Insert a label component by clicking to the right of the checkout button in the controlbar container, clicking the label button on the insert bar, and specifying the values for the following properties in the attributes panel: ■ common > t...

  • Page 52

    52 chapter 2: flex builder tutorials 1. Open the fbcomponents/flexstore.Mxml file in flex builder. Make sure you open the file located in the fbcomponents folder. 2. In design view, click anywhere inside the viewstack container in the product catalog panel, and select insert > local component. The i...

  • Page 53

    Tutorial: building custom components with flex builder 53 insert the detail and cart components in the layout two canvas containers were inserted in the flex store layout to position the product detail and shopping cart components. In this part of the tutorial, you insert the two components that you...

  • Page 54

    54 chapter 2: flex builder tutorials 11. Make sure the flex server is started, and then press f12 to run the flexstore.Mxml file in a browser. The file should look similar to the following figure: if the results panel displays validation errors, carefully retrace the preceding steps. If you get a se...

  • Page 55

    Tutorial: building custom components with flex builder 55 you decide to write an actionscript function called changeview() that sets the child component of the viewstack container, which displays when the user clicks one of the buttons. The viewstack container has two child components: the gridview ...

  • Page 56

    56 chapter 2: flex builder tutorials 6. Assign the event handler to the thumbnail view button by clicking anywhere in the first tag in the flexstore.Mxml file and setting the following property in the events panel of the tag inspector: ■ mousedown : changeview('thumb') when the user clicks the image...

  • Page 57

    Tutorial: building custom components with flex builder 57 5. Scroll down the flex store page and click the grid view button. The click event calls the changeview function in the actionscript file. Flex builder does the following: ■ stops the application’s execution at the breakpoint you set. ■ switc...

  • Page 58

    58 chapter 2: flex builder tutorials tutorial: binding components to data with flex builder this tutorial shows you how to use flex builder to visually bind flex components to data. It also explains how to use the network monitor to monitor the data passed between your application and the flex serve...

  • Page 59

    Tutorial: binding components to data with flex builder 59 specify the web service to use the source of the flex store product data is a web service that returns an array containing the data. 1. In flex builder, open the flexstore.Mxml file located in the fbbindings folder (not the fbcomponents folde...

  • Page 60

    60 chapter 2: flex builder tutorials 6. Expand the tree control in the data panel to inspect the web service. The catalogws web service has one method called getlist that returns an array. 7. Save the flexstore.Mxml file. Bind the web service to a data model a flex data model provides a convenient w...

  • Page 61

    Tutorial: binding components to data with flex builder 61 5. Click next to go to step 2. 6. In the left pane in the add binding - step 2 dialog box, select the catalogws web service. The flex component containing the data you want to pass to the data model is the web service. 7. In the right pane, e...

  • Page 62

    62 chapter 2: flex builder tutorials 3. Save the actionscript file. 4. Switch to the flexstore.Mxml file. 5. In code view, assign the event handler to the application’s initialize event by locating the tag, and adding the following property (shown in bold type): xmlns:mx="http://www.Macromedia.Com/2...

  • Page 63

    Tutorial: binding components to data with flex builder 63 5. Click the final webserver event (onresult) and inspect the information in the right pane. If the application successfully called the web service when it was initialized, then the data for the product catalog should appear in the right pane...

  • Page 64

    64 chapter 2: flex builder tutorials 4. Save the gridview.Mxml file. 5. Switch to the flexstore.Mxml file. 6. In code view, locate the tag and add the following property (shown in bold type): dataobject="{catalog}" /> you created the dataobject property in step 2 above to pass the catalog data to th...

  • Page 65

    Tutorial: binding components to data with flex builder 65 bind the thumbnailview component to the data after binding the gridview component to the data, you bind the thumbnailview component. 1. Open the thumbnailview.Mxml file located in the fbbindings folder. 2. In code view, enter the following sc...

  • Page 66

    66 chapter 2: flex builder tutorials • “retrieve the product selection” on page 67 • “display the product detail” on page 68 detect the product in the gridview component the first task is to modify the gridview component so it can detect when a user clicks a product. 1. Open the gridview.Mxml file l...

  • Page 67

    Tutorial: binding components to data with flex builder 67 retrieve the product selection after detecting the product selected by the user, you must pass the information from the gridview and thumbnailview components to the main application. If the user hasn’t selected a product yet, you must specify...

  • Page 68

    68 chapter 2: flex builder tutorials display the product detail after detecting and retrieving the product selection, you can retrieve the product’s data and use it in the productdetail component. 1. Open the productdetail.Mxml file located in the fbbindings folder. 2. In code view, enter the follow...

  • Page 69

    Tutorial: binding components to data with flex builder 69 7. With the to option selected, scroll down and select the text property (it should be selected by default). You want the text property to receive the product name data. 8. Specify the source of the data by clicking the next button, and then ...

  • Page 70

    70 chapter 2: flex builder tutorials 14. Switch to the flexstore.Mxml file and in code view, locate the tag and add the following property (shown in bold type): id="productdetail" dataobject="{selecteditem}" ... You bind the dataobject property to the selecteditem variable to pass the product stored...

  • Page 71

    Tutorial: binding components to data with flex builder 71 add products to the shopping cart the product detail view (productdetail component) must not only display details about a product, it must let the user do the following tasks: • specify the quantity of the displayed product the user wants to ...

  • Page 72

    72 chapter 2: flex builder tutorials 1. Open the cartview.Mxml file located in the fbbindings folder. 2. In code view, enter the following code after the opening tag: var dataobject:shoppingcart; the variable declaration creates a property of the cartview component. You want to use this property in ...

  • Page 73

    Tutorial: binding components to data with flex builder 73 activate the delete button the final step in this tutorial is to active the delete button in the shopping cart area so the user can remove items from the cart. 1. Switch to the cartview.Mxml file. 2. In code view, enter the following function...

  • Page 74

    74 chapter 2: flex builder tutorials next steps for more samples and tutorials, see the following websites: • flex builder pages on the macromedia website at www.Macromedia.Com/go/fb_devcenter/ • flex developer center on the macromedia website at www.Macromedia.Com/go/ flex_devcenter/ for more infor...

  • Page 75: Chapter 3

    75 chapter 3 creating, coding, and debugging flex files macromedia flex applications are made up of plain text files containing mxml and actionscript code, plus assets such as flash components (swc files) and images. The flex server compiles the mxml and actionscript files into macromedia flash swf ...

  • Page 76

    76 chapter 3: creating, coding, and debugging flex files 3. In the document list, select one of the mxml options or actionscript, and do one of the following: ■ click create. ■ double-click the item in the document list. ■ press enter. The dialog box closes, and a new mxml or actionscript file appea...

  • Page 77

    Working with the code in flex files 77 to view both code and design views: 1. Do one of the following: ■ click the split button on the document toolbar. ■ select view > code and design. The code appears in the top pane while a visual representation of the file appears in the bottom pane. 2. To adjus...

  • Page 78

    78 chapter 3: creating, coding, and debugging flex files to view and edit code in a separate window: • select window > code inspector. Related topics • “using the tag inspector” on page 79 • “setting code-coloring preferences” on page 80 • “setting code formatting preferences” on page 81 using code ...

  • Page 79

    Working with the code in flex files 79 using the tag inspector you can edit all the properties of an mxml tag in one place—the tag inspector. You can also use the tag inspector to apply flex effects, assign event handlers, and modify any css styles applied to the tag. To use the tag inspector: 1. Cl...

  • Page 80

    80 chapter 3: creating, coding, and debugging flex files using the quick tag editor you can use the quick tag editor to quickly inspect and edit html tags without leaving design view. To use the quick tag editor: 1. In design view, double-click any standard mxml component in the file. The quick tag ...

  • Page 81

    Working with the code in flex files 81 the edit coloring scheme dialog box appears. 3. 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 formatting preferen...

  • Page 82

    82 chapter 3: creating, coding, and debugging flex files to set code formatting preferences: 1. Select edit > preferences > code format. T 2. Set your preferences. For more information, click the help button in the dialog box. Setting code hints preferences you can modify the way code hints work by ...

  • Page 83

    Testing and debugging flex files 83 to set code hints preferences: 1. Select edit > preferences > code hints. 2. Set your preferences. For more information, click the help button in the dialog box. Related topics • “using code hints” on page 78 testing and debugging flex files flex builder has sever...

  • Page 84

    84 chapter 3: creating, coding, and debugging flex files validating mxml flex builder can validate mxml and display syntax errors or warnings. Flex builder automatically validates an mxml file when you perform an action that synchronizes the file, such as switching to design view, previewing the fil...

  • Page 85

    Testing and debugging flex files 85 to compile a flex file to check for errors: 1. Open an mxml application file in flex builder. An mxml application file contains an root tag. If you want to compile custom components, insert them in a test application file and compile the file. For more information...

  • Page 86

    86 chapter 3: creating, coding, and debugging flex files running a file you can run mxml files in a stand-alone browser or in the browser embedded in flex builder. Note: to set up more than one browser, see “setting the preview in browser preferences options” in using dreamweaver help. The following...

  • Page 87

    Testing and debugging flex files 87 4. If copies of dependent files such as images or other files are not already located on the testing server, select yes in the dependent files dialog box. Flex builder uploads most dependent files to the testing server. The server compiles the mxml application fil...

  • Page 88

    88 chapter 3: creating, coding, and debugging flex files the debugger will only stop at breakpoints set on lines containing the following: • mxml tags containing an actionscript event handler, such as click="dofunction()" ...> • actionscript lines such as those enclosed in an tag or in an as file be...

  • Page 89

    Testing and debugging flex files 89 2. If you want, enter one or more traces in the actionscript and set a breakpoint on the line immediately following the trace. For example, you might enter the following trace (shown in bold type) in your actionscript file: 5 ... 6 function myfunc() 7 { 8 trace("i...

  • Page 90

    90 chapter 3: creating, coding, and debugging flex files 4. Review the information about the application up to the breakpoint in the results panels. Flex builder provides you with the following information: the variables panel shows the names and values of all variables up to that point. For simple ...

  • Page 91

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

  • Page 92

    92 chapter 3: creating, coding, and debugging flex files 4. In the network monitor panel, click the enable flex network monitor option. Monitoring interactions with the server once enabled, the network monitor automatically monitors and records interactions with the server. In flex builder, these in...

  • Page 93

    Testing and debugging flex files 93 to filter out events: • click the filter settings button in the panel’s sidebar and deselect event types from the pop-up menu. The types of events that you deselected are no longer displayed in the panel. To view them again, select them in the filter settings pop-...

  • Page 94

    94 chapter 3: creating, coding, and debugging flex files saving event 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 location on your hard di...

  • Page 95: Chapter 4

    95 chapter 4 building a flex user interface visually you can use macromedia flex builder to build flex user interfaces for multi-tier enterprise applications. Mxml controls and containers are the building blocks of flex user interfaces. You use containers to position the controls in your user interf...

  • Page 96

    96 chapter 4: building a flex user interface visually customizing the document window you can customize the document window in flex builder to suit the job at hand or your personal preferences. To work in design view, do one of the following: • click the design button on the document toolbar. • sele...

  • Page 97

    Laying out your user interface with mxml containers 97 • if you’re tweaking a layout, try working in design view in standard mode. This environment provides the highest possible fidelity for your layout (short of compiling and running the file). As such, the environment is well-suited for fine-tunin...

  • Page 98

    98 chapter 4: building a flex user interface visually for more information, see “introducing containers” and “using layout containers” in developing flex applications help. Related topics • “repositioning flex components” on page 99 • “resizing flex components” on page 100 • “cutting, copying, and p...

  • Page 99

    Repositioning flex components 99 repositioning flex components you can visually move mxml and flash components from one container to another, or within a container. For more information on a container’s layout management rules, see “using layout containers” in developing flex applications help. To r...

  • Page 100

    100 chapter 4: building a flex user interface visually resizing flex components you can resize mxml containers and controls visually with your mouse. Note: when you resize a component with this method, flex builder sets absolute width and height values. The component will not grow to accommodate its...

  • Page 101

    Editing flex component properties 101 editing flex component properties you can visually edit the properties and events of mxml or flash components in one central location—the attributes panel. In addition, you can use the quick tag editor to make quick edits to mxml tags without leaving design view...

  • Page 102

    102 chapter 4: building a flex user interface visually to edit the properties of a standard mxml component in the quick tag editor: 1. Double-click the component in design view. The quick tag editor appears. Depending on the component, the title , text , or label value in the tag may be highlighted ...

  • Page 103

    Applying css styles to flex components 103 related topics • “editing flex component properties” on page 101 • “applying effects to flex components” on page 109 • “creating mxml component files” on page 121 about css styles in flex you can use css styles to modify your flex user interface more effici...

  • Page 104

    104 chapter 4: building a flex user interface visually importing styles from an external css file you can import styles defined in an external css file by using the source property of the tag. To import styles from an external css file: 1. Make sure the css file is located in your site root folder o...

  • Page 105

    Applying css styles to flex components 105 creating new css styles you can visually create new css styles for flex components. You can define them in an external css file or in the mxml file containing the components you want to format. To create new styles: 1. In the css styles panel (window > css ...

  • Page 106

    106 chapter 4: building a flex user interface visually applying a class style to a component you can visually apply internal or external css styles to one or more components. Styles defined as class selectors are the only type of styles you can apply. You can’t apply styles defined as tag selectors ...

  • Page 107

    Applying css styles to flex components 107 applying an inline style to a component you can use flex builder to visually apply inline styles. An example of an inline style is . The color property in this button tag applies only to this specific button instance. To apply an inline style to a component...

  • Page 108

    108 chapter 4: building a flex user interface visually 3. Select the applied rule from the left column in the top half of the panel. The bottom half of the panel displays the style properties for the applied rule. 4. Modify the properties in the bottom half of the panel. Press enter to accept a modi...

  • Page 109

    Applying effects to flex components 109 applying effects to flex components you can add effects to components. For example, you can cause a textinput component to bounce slightly when it receives focus, or a label component to fade in when the user passes the mouse over it. This section describes ho...

  • Page 110

    110 chapter 4: building a flex user interface visually to add an effect to an mxml component: 1. Select the component in design view by clicking it on the page or on the tag selector at the bottom of the document window. 2. Define a trigger for the effect by selecting a css property name for the tri...

  • Page 111

    Applying effects to flex components 111 to trigger effects from other components: 1. In design view, select the component that will have the effect. 2. In the attributes panel (window > tag inspector), make sure an id value is specified for the component. If the component doesn’t have an id, you can...

  • Page 112

    112 chapter 4: building a flex user interface visually customizing a standard flex effect the standard effects in flex may not provide the exact effect that you want. A fade effect might be too fast or too slow, or a pause effect might not hold long enough. You can use flex builder to help you custo...

  • Page 113

    Applying effects to flex components 113 5. Set the properties of the custom effect tag in the tag inspector or in the code. The following example creates a new version of the fade effect called slowfade, which uses a two-second duration expressed in milliseconds: flex builder inserts the following c...

  • Page 114

    114 chapter 4: building a flex user interface visually 3. Click the pencil icon beside the effect name. Flex builder performs the following tasks: ■ switches to split view and selects the custom effect tag in the code ■ shows the properties of the custom effect in the tag inspector. 4. Set the prope...

  • Page 115

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

  • Page 116

    116 chapter 4: building a flex user interface visually.

  • Page 117: Chapter 5

    117 chapter 5 working with components an application typically consists of an mxml application file (a file with an parent tag) and one or more components defined in separate mxml, actionscript, or macromedia flash component (swc) files. You lay out the components in the application file using macro...

  • Page 118

    118 chapter 5: working with components visually inserting components you can visually insert mxml components in mxml files. Flex builder writes the appropriate code—including the correct namespace—to reference the component. The techniques described in this section work in both design and code views...

  • Page 119

    Inserting controls and containers in an mxml file 119 manually inserting components if you prefer to insert components by hand in code view, make sure you specify the component namespace. To manually insert a component: 1. Open the parent mxml file in code view (view > code) and enter the component ...

  • Page 120

    120 chapter 5: working with components to specify component namespaces in your code: • depending on the type and location of the component you want to insert, specify the namespace as follows: standard macromedia controls and containers if working with a standard macromedia control or container, you...

  • Page 121

    Creating mxml component files 121 if the namespace contains several components that you want to insert in the file or if you want to insert several instances of the same custom component in the file, you can specify the namespace once in the application tag and omit it from each component tag, as fo...

  • Page 122

    122 chapter 5: working with components creating an mxml component file you create an mxml component file in the same way that you create any new file. To create a component file: 1. Select file > new to open the new document dialog box, and then double-click one of the component options in the flex ...

  • Page 123

    Creating mxml component files 123 6. If the flex server is running on a remote computer, copy the component file to the application folder on the server. Make sure the application folder structure on the server matches the folder structure on your local computer, and that you copy the file to the sa...

  • Page 124

    124 chapter 5: working with components creating a component from an existing component you can create a new component from any component in an existing mxml file. Flex builder creates the new component file based on the component you select. To create a component file from a component in an existing...

  • Page 125

    Synchronizing with custom components on the server 125 for more information, see “component metadata” in developing flex applications help. To include the properties of custom components in code hints: 1. Open the mxml or actionscript component file in flex builder. 2. Select file > package componen...

  • Page 126

    126 chapter 5: working with components 3. Select site > update flex components. The update flex components dialog box appears. 4. If you want to update the listed component or components, click ok. For more information, click the help button in the dialog box. Flex builder integrates a new component...

  • Page 127: Chapter 6

    127 chapter 6 working with data you can use macromedia flex builder to bind flex components, flex data models, or flex data services in order to pass data between them, or between the user interface and the back-end system. This chapter covers the following topics: • “binding a control or container”...

  • Page 128

    128 chapter 6: working with data 3. In the bindings panel (window > bindings), click the plus (+) button. The add binding - step 1 dialog box appears. Tip: you can also open the add binding dialog box by right-clicking the component in design view or its tag in code view, and then selecting create n...

  • Page 129

    Working with flex data models 129 if you want, you can start with the destination of the binding and then specify the source. Related topics • “binding a flex data model to an object” on page 131 • “binding a flex data service to an object” on page 137 editing a binding visually after you create bin...

  • Page 130

    130 chapter 6: working with data related topics • “data binding in flex” on page 150 inserting a flex data model into the mxml file you can manually insert a flex data model in an mxml file or you can visually import it. To manually insert a data model into an mxml file: 1. Open the file in code vie...

  • Page 131

    Working with flex data models 131 4. Use the data panel to inspect the data model. You could also hand-code an tag with a source property that specifies an xml file or a url that returns xml. The following are some examples: note: if you create a data model with the source property, you will be unab...

  • Page 132

    132 chapter 6: working with data 4. Select the second option (“data will flow from”) and then select the property of the data model to supply the data. For example, if you want to retrieve an employee name from the data model, select the appropriate name property of the data model. The binding sourc...

  • Page 133

    Working with flex data models 133 6. Select the destination of the data supplied by the data model. The destination can be the property of a component, a data service, or even another data model. For example, if you have a label component that you want to use to display the employee name, select the...

  • Page 134

    134 chapter 6: working with data passing data to a flex data model you can create bindings to pass data to data models. For example, you can create a binding to pass user input to a data model. To create a binding to pass data to a data model: 1. Make sure your mxml file contains a component, data m...

  • Page 135

    Working with flex data models 135 6. Select the source of the data passed to the data model. The source can be the property of a component, data service, or even another data model. For example, if you have a textinput component that lets users enter an employee name, select the textinput component ...

  • Page 136

    136 chapter 6: working with data working with flex data services after inserting the components that make up your user interface, (see chapter 4, “building a flex user interface visually,” on page 95 ), you can use flex data services to bind the user interface to the business layer. A flex data serv...

  • Page 137

    Working with flex data services 137 http service inserts a service that lets you retrieve data from an http address. Remote object inserts a service that lets you access the methods of a java object. After clicking one of the items, a dialog box appears to let you specify the web service, http servi...

  • Page 138

    138 chapter 6: working with data to create a binding that retrieves data from a data service: 1. Make sure your mxml file contains a component or data model that can accept the data from the data service. For example, your file can have a label component that will display a temperature received from...

  • Page 139

    Working with flex data services 139 flex builder doesn’t retrieve and display the schema of http services or remote objects, so you’ll need to know the source property of these services in advance and specify it in the binding source text box. The binding source text box shows the binding expression...

  • Page 140

    140 chapter 6: working with data 4. Make sure the first option (“data will flow to”) is selected 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 web s...

  • Page 141

    Working with flex data services 141 6. Select the source of the data passed to the data service. The source can be the property of a component or data model. For example, if you have a textinput component that lets users enter a zip code, select the textinput component in the left pane and then sele...

  • Page 142

    142 chapter 6: working with data to create an event handler to call a data service: 1. Make sure your mxml file contains a binding to a data service such as an web service, an http service, or a remote object. The binding must appear in the bindings panel (window > bindings). For more information, s...

  • 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: Appendix A

    145 appendix a basic flex concepts this appendix is intended for macromedia flex builder users who are unfamiliar with flex technology. It explains basic flex concepts, but not specific development techniques. For more detailed information, see developing flex applications help. This appendix contai...

  • Page 146

    146 appendix a: basic flex concepts typical application development steps you typically develop a flex application using the following steps: 1. Create an mxml file with the root tag. 2. Add one or more containers. 3. Add controls to a container, such as input fields, buttons, and output fields. 4. ...

  • Page 147

    About flex files 147 click="mytext.Text=myinput.Text" /> the content between the starting and closing tags defines a flex application. Related topics • “creating mxml or actionscript files” on page 75 • “testing and debugging flex files” on page 83 • flex actionscript and mxml api reference help abo...

  • Page 148

    148 appendix a: basic flex concepts to escape an actionscript block, enclose it within a cdata block. A cdata block is an xml technique used to escape character data from the xml parser. The block is created as follows in the code: ... ]]> the parser ignores everything in the cdata block, including ...

  • Page 149

    About flex containers, components, and controls 149 the following are some of the characteristics of components: events application or user actions that require a component response. Events include component creation, mouse actions such as a mouse over, and button clicks. Styles characteristics such...

  • Page 150

    150 appendix a: basic flex concepts a container has predefined rules to control the layout of its children, including sizing and positioning. Flex defines layout rules to simplify the design and implementation of rich internet applications, while also providing enough flexibility to let you create a...

  • Page 151

    About flex data bindings 151 the following example binds the text property of a textinput component (the source property) to the text property of a label component (the destination property) so that text entered in the textinput component is displayed by the label component: ... Flex builder binds d...

  • Page 152

    152 appendix a: basic flex concepts if you hand-code your pages, you can use actionscript or the tag to define a data model. In general, you should use a tag for simple data structures and actionscript for more complex structures and client-side business logic. However, flex builder only recognizes ...

  • Page 153

    About flex data bindings 153 a web service is a software system designed to support machine-to-machine interaction over a network. It has an interface described in a machine-processable format called wsdl. Other systems interact with the web service in a manner prescribed by its description. An http...

  • Page 154

    154 appendix a: basic flex concepts.

  • Page 155: Index

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

  • Page 156

    156 index css about 103 applying class styles 106 applying inline styles 107 class selectors 103 creating styles 105 deleting styles 108 embedded styles 103 external styles 103 importing stylesheet 104 inline styles 103 modifying styles 107 tag selectors 103 custom components 120 customer support 18...

  • Page 157

    Index 157 j jakarta tomcat 20 java objects 153 jrun 4 19 l local component 118 m macromedia components 120 macromedia developer center 18 macromedia jrun 4 19 managing files 21 models. See data models modifying css styles 107 monitoring interactions with the server 91 mxml about 146 api reference 17...

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