MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual
  1. Manuals
  2. Brands
  3. MACROMEDIA Manuals
  4. Software
  5. FLEX BUILDER-USING FLEX BUILDER
  6. Use manual
MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual

MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual

Hide thumbs
Table of Contents

Advertisement

Quick Links

Download this manual
Using Flex Builder

Advertisement

Table of Contents
loading
Need help?

Need help?

Do you have a question about the FLEX BUILDER-USING FLEX BUILDER and is the answer not in the manual?

Questions and answers

Subscribe to Our Youtube Channel

Related Manuals for MACROMEDIA FLEX BUILDER-USING FLEX BUILDER

Summary of Contents for MACROMEDIA FLEX BUILDER-USING FLEX BUILDER

  • Page 1 Using Flex Builder...
  • Page 2 If you access a third-party website mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites.

  • Page 3: Table Of Contents

    CONTENTS CHAPTER 1: Getting Started with Flex Builder ......5 Exploring the authoring environment ........5 Starting a new application in Flex Builder .
  • Page 4 CHAPTER 5: Working with Components ......117 Inserting controls and containers in an MXML file ..... . . 117 Creating MXML component files .

  • Page 5: Chapter 1: Getting Started With Flex Builder

    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 server, the Flex application model, and the Flex programming languages, Flex Builder can improve the productivity of all members of your development team.
  • Page 6 MXML components because Flex Builder adds temporary borders and padding around objects. In Standard mode, Flex Builder removes the borders and padding to give you a more accurate picture of how the MXML file will look in Macromedia Flash Player. Code view (View >...
  • Page 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 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 ActionScript files.
  • Page 8 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: Open any MXML file in Flex Builder by double-clicking the file in the Files panel (Window >...

  • Page 9: Starting A New Application In Flex Builder

    Flex applications” on page 18). You can install the Flex server or consult your system administrator. For information on installing the server, see Installing Flex on the Macromedia website 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”...
  • Page 10 To define a Flex Builder site with advanced options: 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 selected, click the Advanced tab and select Local Info from the Category list (it should be the default).
  • Page 11 URL—in effect Flex Builder becomes a client. Flex Builder deduces the correct URL by combining the URL prefix you specify with the file name. For example, if your application’s URL is www.macromedia.com/flex/start.mxml, you enter the following URL prefix in the Testing Server category: http://www.macromedia.com/flex/...

  • Page 12: Defining A Site For The Flex Sample Apps Application

    Note: If you didn’t use the JRun4/Flex install option to install Flex, then you must deploy the samples .war file yourself. For information on installing Flex server, see Installing Flex on the Macromedia 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”...
  • Page 13 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. In the Flex Server Root Folder text box, make sure the following path is specified: C:\Program Files\Macromedia\Flex\jrun4\servers\default\samples\ This folder must always be a Flex application root folder on the server.
  • Page 14 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 information, see Installing Flex on the Macromedia website at www.macromedia.com/ go/flex_install/.
  • Page 15 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 needs to get these files compiled so you can preview MXML files, get build and debugging information, and connect to back-end systems.
  • Page 16 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\jrun4\servers\default\samples Flex Server Root Folder: C:\Program Files\Macromedia\Flex\jrun4\servers\default\samples URL Prefix...

  • Page 17: Getting Help In Flex Builder

    “Context-sensitive help” on page 17 • “Flex Builder Help” on page 17 • “Macromedia website resources” on page 18 Context-sensitive help While working in Code view, you can get context-sensitive help about MXML components. To get help about an MXML component: In Code view, click anywhere inside the MXML component’s tag.

  • Page 18: What You Need To Build Flex Applications

    You can also configure the Flex server to work with third-party web servers and J2EE servers. For more information, see the Flex installation guide on the Macromedia website at www.macromedia.com/go/flex_install/, or consult your system administrator. Generally, it’s best to match your development environment to your production environment as closely as possible.
  • Page 19 The following are the application servers supported by Flex: • Macromedia JRun 4 with Updater 2. You can install JRun 4 with the Flex server by selecting the integrated JRun4/Flex install option. You can also download a trial version of JRun 4 from the Macromedia website at www.macromedia.com/go/jun_trial/.

  • Page 20: Typographical Conventions Of This Guide

    To compile and run MXML and ActionScript files, you need the Flex server, which is available for Windows, Linux, and Solaris operating systems. You can order the Developer edition of the Flex server for a nominal fee from the Macromedia website at www.macromedia.com/go/flex_trial/. The Developer edition is for noncommercial use for developing and testing Flex applications.

  • Page 21: Chapter 2: Flex Builder Tutorials

    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 view a product catalog, find out more about each product, and add products to a shopping cart.

  • Page 22: Install The Flex Server On Your Computer

    (plus localhost), but you can still use it for development and testing as long as you want. The software does not expire. Copy the Windows version of the Flex installer from the Macromedia Flex CD. In Windows, double-click the Flex installer file, flex-15-win.exe.
  • Page 23 After you finish installing Flex 1.5, install any Flex updaters available on the Macromedia website at www.macromedia.com/go/flex_updaters. Start the server by selecting Start > All Programs > Macromedia > Macromedia Flex > Start Integrated Flex Server. The server displays startup information.

  • Page 24: Copy The Tutorial Folders To The Flex Samples Folder

    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: Open the following URL in your browser: http://localhost:8700/samples The Flex Sample Apps page appears.

  • Page 25: Define A Flex Builder Site

    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\ It should contain the Flex Builder tutorial folders (see “Copy the tutorial folders to the Flex samples folder”...

  • Page 26: Tutorial: Creating A Layout With Flex Builder

    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 to compile files while you work, Flex Builder uploads the file to the application root folder you specified and attempts to request it using the URL prefix.

  • Page 27: Review The Approved User Interface Mock-Ups

    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 MXML layout. The final mock-ups for the Flex Store application are stored in your fbLayout folder: /fbLayout/mockups You can open a mock-up file in your favorite image editor from the Files panel in Flex Builder.

  • Page 28: Create An Mxml File

    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 catalog components on the left side, which give the user two views of the catalog •...

  • Page 29: Import Your Css Styles

    Set the following property in the Attributes panel of the Tag inspector (Window > Tag Inspector): Styles > verticalGap: Note: The angle bracket means the verticalGap property is located in the Styles category of the Attributes tab. This convention is used throughout the tutorials. Save the file in the fbLayout folder by selecting File >...

  • Page 30: Position The Page Title

    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 the user interface (see “Review the approved user interface mock-ups”...

  • Page 31: Position The Catalog Component

    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 requirement, you decide to use an HBox (for horizontal box) container to position the two halves of your user interface side by side.

  • Page 32: Position The Product Detail And Shopping Cart Components

    With the ViewStack container still selected, set the following property in the Attributes panel: : Fade Effects > changeEffect : 100% Size > height : 100% Size > width You can select the Fade value from the pop-up menu. The Fade effect will make the ViewStack container change from transparent to opaque in 500 milliseconds (the default effect duration).

  • Page 33: Add View Buttons To The Product Catalog

    Insert another Canvas container by switching to Code view, clicking immediately after the closing tag, and clicking the Canvas button on the Insert bar. </mx:Canvas> After you accept the default width and height values in the dialog box that appears, Flex Builder inserts another Canvas container in the VBox.

  • Page 34: Tutorial: Building Custom Components With Flex Builder

    With the insertion point still blinking in the HBox container, set the value for the following property in the Attributes panel: Styles > horizontalGap Insert the thumbnail view button by clicking inside the HBox container, clicking the Image button in the Controls category of the Insert bar, and selecting the following image file: /fbLayout/assets/images/thumb_off.png Insert the grid view button by clicking inside the HBox container on the right side of the thumbnail view button (without selecting the button), clicking the Image button on the Insert...
  • Page 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 lower edge of the catalog. The grid view component does not contain any product data in this tutorial.
  • Page 36 With the insertion point still blinking in the VBox container, specify the values for the following properties in the Attributes panel: : 100% Size > height : 100% Size > width Styles > verticalGap Note: The “Size > height” expression means the height property is located in the Size category of the Attributes tab.
  • Page 37 Switch to Code view (View > Code) and set column properties of the DataGrid by locating the tags, and adding the following properties (shown in bold type): <mx:DataGridColumn> <mx:DataGridColumn headerText="Name" columnName="name" width="300"/> <mx:DataGridColumn headerText="Price" columnName="price" textAlign="right" marginRight="4" /> You can use Code hints to quickly set these properties. For example, to set the property, width click in the tag before the closing angle bracket, press the Spacebar to display the code hints,...
  • Page 38 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 lower edge of the catalog. The thumbnail view component will not contain any product data in this tutorial.
  • Page 39 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. With the insertion point still blinking in the Tile container, specify the values for the following properties in the Attributes panel: : tileView Common >...
  • Page 40 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 component’s functional specification, the product detail component should display product details when a user clicks one of the products in the product catalog.
  • Page 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 this part of the tutorial, you complete the following tasks: •...
  • Page 42 With the insertion point still blinking in the Panel container, specify the values for the following properties in the Attributes panel: : Product Details Common > title Styles > marginBottom Styles > marginLeft Styles > marginRight Styles > marginTop Insert an HBox container inside the Panel container by clicking anywhere inside the Panel container and clicking the HBox button in the Containers category of the Insert bar.
  • Page 43 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 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.
  • Page 44 With the Image still selected in the file, change the following properties in the Attributes panel: : 140 Size > height : 150 Size > width Size > x Size > y Insert a Label component for the product name by clicking anywhere inside the VBox container, clicking the Label button on the Insert bar, and specifying the following properties in the Attributes panel: : Product Name...
  • Page 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 specify the quantity of the selected item they want to add to the shopping cart.
  • Page 46 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: : qty Common >...
  • Page 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 the cart by selecting an item and clicking the Delete button. The user can also proceed to the checkout area by clicking the Checkout button.
  • Page 48 Press Enter to accept your change and close the Quick Tag Editor. 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 container and automatically positions it at the lower edge of the Panel container.
  • Page 49 Click the Plus (+) button to add a third column, and then set the following options in the DataGrid dialog box: : dg : Name Header Text (first row) : Qty Header Text (second row) : Price Header Text (third row) : name Column Name (first row) : qty...
  • Page 50 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 to the component mock-up, the footer has one button to let the user delete a selected item in the shopping cart, and another button to let the user proceed to the checkout area.
  • Page 51 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: : Total: $ Common >...
  • Page 52 Open the fbComponents/flexstore.mxml file in Flex Builder. Make sure you open the file located in the fbComponents folder. In Design view, click anywhere inside the ViewStack container in the Product Catalog panel, and select Insert > Local Component. The Insert Local Component dialog box appears: Click the Browse button and select the ThumbnailView component, ThumbnailView.mxml, in the Open dialog box that appears.
  • Page 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 created, ProductDetail.mxml and CartView.mxml, into the Canvas containers.
  • Page 54 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 server error, make sure the testing server is correctly defined in Flex Builder.
  • Page 55 You decide to write an ActionScript function called that sets the child component changeView() of the ViewStack container, which displays when the user clicks one of the buttons. The ViewStack container has two child components: the GridView and the ThumbnailView components that you inserted in it (see “Insert the view components in the Flex Store layout”...
  • Page 56 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 <mx:Image> of the Tag inspector: : changeView('thumb') mouseDown When the user clicks the image, the function is called.
  • Page 57 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. Switches to Code view and centers on the line with the breakpoint. Displays the Call Stack panel in the Results panel group.

  • Page 58: Tutorial: Binding Components To Data With Flex Builder

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

  • Page 59: Specify The Web Service To Use

    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. In Flex Builder, open the flexstore.mxml file located in the fbBindings folder (not the fbComponents folder). In the Data panel (Window >...

  • Page 60: Bind The Web Service To A Data Model

    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. Save the flexstore.mxml file. Bind the web service to a data model A Flex data model provides a convenient way to refer to and manipulate data in Flex applications. For the Flex Store, you decide to create a data model and bind it to the product data returned by the web service.

  • Page 61: Send The Web Service Request

    Click Next to go to Step 2. 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. In the right pane, expand the tree control, and select result.
  • Page 62 Switch to the flexstore.mxml file. 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): <mx:Application> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" initialize="initApp()" When the application is initialized, the function is called. initApp() Save the flexstore.mxml file.

  • Page 63: Bind The Gridview Component To The Data

    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. Note how the Network Monitor converts the raw data passed between the server and the application into ActionScript.
  • Page 64 Save the GridView.mxml file. Switch to the flexstore.mxml file. In Code view, locate the tag and add the following property (shown in <local:GridView> bold type): <local:GridView xmlns:local="*" id="gridView" dataObject="{catalog}" /> You 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).

  • Page 65: Bind The Thumbnailview Component To The Data

    Bind the ThumbnailView component to the data After binding the GridView component to the data, you bind the ThumbnailView component. Open the ThumbnailView.mxml file located in the fbBindings folder. In Code view, enter the following script block after the opening tag to declare a <mx:VBox>...
  • Page 66 • “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. Open the GridView.mxml file located in the fbBindings folder and enter the following tag after the opening tag:...
  • Page 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 a default selection. Open the flexstore_script.as file located in the fbBindings folder.
  • Page 68 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. Open the ProductDetail.mxml file located in the fbBindings folder. In Code view, enter the following code after the opening tag to declare an object <mx:Panel>...
  • Page 69 With the To option selected, scroll down and select the property (it should be selected by text default). You want the property to receive the product name data. text Specify the source of the data by clicking the Next button, and then selecting the name element of the dataModel data model, as follows: Click Finish to create the binding.
  • Page 70 Switch to the flexstore.mxml file and in Code view, locate the <local:ProductDetail> and add the following property (shown in bold type): <local:ProductDetail xmlns:local="*" id="productDetail" dataObject="{selectedItem}" You bind the property to the variable to pass the product stored in dataObject selectedItem the variable to the ProductDetail component.
  • Page 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 add to the shopping cart •...
  • Page 72 Open the CartView.mxml file located in the fbBindings folder. In Code view, enter the following code after the opening tag: <mx:Panel> <mx:Script> var dataObject:ShoppingCart; </mx:Script> The variable declaration creates a property of the CartView component. You want to use this property in the tag in the flexstore.mxml file to pass the shoppingCart object to <CartView>...
  • Page 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. Switch to the CartView.mxml file. In Code view, enter the following function in the tag (shown in bold type): <mx:Script>...

  • Page 74: Next Steps

    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 information on the Flex Builder features discussed in these tutorials, see the following topics: •...

  • Page 75: Chapter 3: Creating, Coding, And Debugging Flex Files

    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 files that can run in Macromedia Flash Player or in a web browser with Flash Player installed.

  • Page 76: Working With The Code In Flex Files

    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 appears in the Document window.
  • Page 77 To view both Code and Design views: 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.

  • Page 78: Using Code Hints

    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 hints You can use code hints to write MXML or ActionScript more rapidly and efficiently.

  • Page 79: Using The Tag Inspector

    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: Click anywhere inside the MXML tag in Code view, or select the component or container in Design view.

  • Page 80: Setting Coding Preferences

    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: In Design view, double-click any standard MXML component in the file. The Quick Tag Editor appears.
  • Page 81 The Edit Coloring Scheme dialog box appears. 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 preferences such as indentation, line length, and the case of tag and property names.
  • Page 82 To set code formatting preferences: Select Edit > Preferences > Code Format. 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 enabling or disabling automatic tag completion, enabling or disabling code hints, changing the length of the delay before hints are displayed, or changing the type of hints you want to see while working.

  • Page 83: Testing And Debugging Flex Files

    To set code hints preferences: Select Edit > Preferences > Code Hints. 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 several tools to help you test and debug Flex applications, including an MXML validator, an ActionScript debugger, and a network monitor.

  • Page 84: Validating Mxml

    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 file, or switching to debug mode. Flex Builder displays any validation errors or warnings in the Validation panel in the Results panel group.

  • Page 85: Compiling And Running Flex Files

    To compile a Flex file to check for errors: Open an MXML application file in Flex Builder. An MXML application file contains an root tag. <mx:Application> If you want to compile custom components, insert them in a test application file and compile the file.
  • Page 86 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 is a quick reference, followed by more detailed information: To do this task...

  • Page 87: Debugging Actionscript

    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 file using the files on the server.
  • Page 88 Macromedia product such as Breeze. To reinstall the debug version of the player, see the Release Notes on the Macromedia website at www.macromedia.com/go/fb_releasenotes/.
  • Page 89 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() trace("Inside my function");...
  • Page 90 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 data types, you can edit a value and your change will take effect immediately on the next code step.

  • Page 91: Debugging Applications By Monitoring Interactions With The Server

    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: •...
  • Page 92 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 interactions occur when you run or debug a file. Captured events appear in the Network Monitor panel in the Results panel group (Window >...
  • Page 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-up menu. To clear all the event data in the panel: •...
  • Page 94 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 disk.

  • Page 95: Chapter 4: Building A Flex User Interface Visually

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

  • Page 96: Customizing The Document Window

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

  • Page 97: Laying Out Your User Interface With Mxml Containers

    Canvas supports absolute positioning. Similar to the Stage in Macromedia Flash, you can drag and position components anywhere in this container. Accordion organizes information in a series of child panels, where one panel is active at any time.

  • Page 98: Adding Flex Components To The User Interface

    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 pasting Flex components” on page 100 Adding Flex components to the user interface You can visually add MXML controls and Flash components to your user interface.

  • Page 99: Repositioning Flex Components

    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 reposition components on a page: Select the component as follows: To select a container, click any of the following: the container’s tab, its border, or any white space in it.

  • Page 100: Resizing Flex Components

    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 children, nor will it change size when the user resizes the application.

  • Page 101: Editing Flex Component Properties

    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. Note: You cannot edit component properties after you start a debugging session.

  • Page 102: Applying Css Styles To Flex Components

    To edit the properties of a standard MXML component in the Quick Tag Editor: Double-click the component in Design view. The Quick Tag Editor appears. Depending on the component, the , or title text label value in the tag may be highlighted to help you work even faster. Note: If you double-click a custom component, the component’s file opens in Flex Builder instead.

  • Page 103: About Css Styles In Flex

    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 efficiently. As your design evolves, you can add, delete, or change styles, giving you greater freedom to achieve your design goals.

  • Page 104: Importing Styles From An External Css File

    Importing styles from an external CSS file You can import styles defined in an external CSS file by using the property of the source tag. <mx:Style> To import styles from an external CSS file: Make sure the CSS file is located in your site root folder or in any of its subfolders. Open the CSS Styles panel (Window >...

  • Page 105: Creating New Css Styles

    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: In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button (+) located in the lower right area of the panel.

  • Page 106: Applying A Class Style To A Component

    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 because these styles are automatically applied to each instance of the specified tag.

  • Page 107: Applying An Inline Style To A Component

    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 property in this Button tag applies only to this <mx:Button color="red"...> color specific Button instance. To apply an inline style to a component: Click the component in the page.

  • Page 108: Deleting A Css Style

    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. Modify the properties in the bottom half of the panel. Press Enter to accept a modified property value and to see how the change affects the component in Design view.

  • Page 109: Applying Effects To Flex Components

    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 how to add these kinds of effects. This section covers the following topics: •...
  • Page 110 To add an effect to an MXML component: Select the component in Design view by clicking it on the page or on the tag selector at the bottom of the Document window. Define a trigger for the effect by selecting a CSS property name for the trigger in the Attributes panel of the Tag inspector (Window >...
  • Page 111 To trigger effects from other components: In Design view, select the component that will have the effect. 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’t trigger the effect from another component. Select an effect for any of the following effect properties in the Attributes panel: showEffect, hideEffect, moveEffect, or resizeEffect.
  • Page 112 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 customize these effects.
  • Page 113 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 code in your file: <mx:Effect>...

  • Page 114: Assigning Event Handlers To Components

    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. Set the properties of the custom effect tag in the Attributes panel or in the code. For more information, see “Customizing an effect”...
  • Page 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 Assigning event handlers to components...
  • Page 116 Chapter 4: Building a Flex User Interface Visually...

  • Page 117: Chapter 5: Working With Components

    <mx:Application> 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 Macromedia Flex containers. You can use Macromedia Flex Builder to build and extend components for your applications.
  • Page 118 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. To visually insert a component: Open the parent MXML file in Code view (View >...
  • Page 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: Open the parent MXML file in Code view (View > Code) and enter the component tag. For standard Flex components, you can use code hints to work faster.
  • Page 120 The namespace for all Macromedia components is http://www.macromedia.com/2003/mxml/ and is specified in the tag. <mx:Application> For example, if you want to insert a ComboBox control, which is a Macromedia component, enter the ComboBox tag between the opening and closing tags, as follows: <mx:Application>...

  • Page 121: Creating Mxml Component Files

    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 follows: <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns:xyz="assets.components.controls.*"> <xyz:myComboBox />...
  • Page 122 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: Select File > New to open the New document dialog box, and then double-click one of the component options in the Flex Development category.
  • Page 123 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 same folder on the server. The folder structure on the server determines the component’s namespace.
  • Page 124 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 MXML file: In Flex Builder, open an MXML file containing the component you want to use.

  • Page 125: Synchronizing With Custom Components On The Server

    For more information, see “Component metadata” in Developing Flex Applications Help. To include the properties of custom components in code hints: Open the MXML or ActionScript component file in Flex Builder. Select File > Package Component. Synchronizing with custom components on the server The Flex Builder authoring environment has a default set of Flex components.
  • Page 126 Select Site > Update Flex Components. The Update Flex Components dialog box appears. 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 in its authoring environment as follows: •...

  • Page 127: Chapter 6: Working With Data

    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: •...
  • Page 128 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 New Binding from the context menu. Select the second option (“Data Will Flow From”) and then select the property to supply the data.

  • Page 129: Editing A Binding Visually

    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 bindings in Flex Builder, you can edit them visually.
  • Page 130 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: Open the file in Code view (View >...
  • Page 131 Use the Data panel to inspect the data model. You could also hand-code an tag with a property that specifies an XML file <mx:Model> source or a URL that returns XML. The following are some examples: <mx:Model source="content.xml" id="contact"/> <mx:Model source="http://www.somesite.com/content.xml" id="company"/> Note: If you create a data model with the source property, you will be unable to visually create a binding to the model because the binding destination is in an external file.
  • Page 132 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 Source text box displays the binding expression Flex Builder will insert in the code.
  • Page 133 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 Label component in the left pane and then select the text:String property in the right pane.
  • Page 134 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: Make sure your MXML file contains a component, data model, or data service that can supply data to the data model.
  • Page 135 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 in the left pane and then select the text:String property in the right pane.

  • Page 136: Working With Flex Data Services

    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 service acts as a bridge to the business layer. For more information, “Flex data services”...
  • Page 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 service, or Java object you want to use.
  • Page 138 To create a binding that retrieves data from a data service: 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 the data service.
  • Page 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 Flex Builder will insert in the code.
  • Page 140 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 service’s request object.
  • Page 141 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 select the text:String property in the right pane.
  • Page 142 To create an event handler to call a data service: 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, “Working with Flex data services”...
  • Page 143 Related topics • “Inserting a Flex data service in the MXML file” on page 136 • “Assigning event handlers to components” on page 114 Working with Flex data services...
  • Page 144 Chapter 6: Working with Data...

  • Page 145: Appendix A Basic Flex Concepts

    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 contains the following sections: •...

  • Page 146: Typical Application Development Steps

    The following MXML code creates an input field, a button, and a text box. When the user clicks the button, any text entered in the input field is copied to the text box. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2004/mxml" width="200" height="100"> <!-- vertical box container for the application. -->...
  • Page 147 <!-- button that triggers the copy --> <mx:Button id="myButton" label="Copy Text" click="myText.text=myInput.text" /> <!-- output text box --> <mx:TextArea id="myText" width="150" height="20" /> </mx:VBox> </mx:Application> The content between the starting and closing tags defines a Flex application. <mx:Application> Related topics •...

  • Page 148: About Flex Containers, Components, And Controls

    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: <![CDATA[ ]]> The parser ignores everything in the CDATA block, including special symbols, strings, and numbers.
  • Page 149 Components defined within a container are called children of the container. At the root of a Macromedia Flex application is a single container, called the Application container, that represents the entire Flash Player drawing surface. This Application container holds all other containers, which can represent dialog boxes, panels, and forms.

  • Page 150: About Flex Data Bindings

    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 diverse set of applications. One advantage to having predefined layout rules is that your users will soon grow accustomed to them.
  • Page 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: <mx:TextInput id="LNameInput"></mx:TextInput> <mx:Label text="{LNameInput.text}"></mx:Label>...
  • Page 152 If you hand-code your pages, you can use ActionScript or the tag to define a data <mx:Model> 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 data models defined with the tag.
  • Page 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 service is nothing more than an HTTP request to a URL.
  • Page 154 Appendix A: Basic Flex Concepts...

  • Page 155: Index

    150 importing 125 endpoint 150 inserting 98, 117 source 150 local 118 to business layer 136 Macromedia 120 to other components 127 namespaces 119 Bindings panel 7, 138 packaging 124 breakpoints 88 removing padding and border 96 business layer 152...
  • Page 156 about 103 Edit Coloring Scheme dialog box 81 applying class styles 106 editing CSS styles 107 applying inline styles 107 effects, adding 109 class selectors 103 event handlers 114 creating styles 105 deleting styles 108 embedded styles 103 Flash components 121 external styles 103 inserting 117 importing stylesheet 104...
  • Page 157 86 Property inspector (Flex) 7 local component 118 Quick Tag Editor 101, 102 Macromedia components 120 Macromedia Developer Center 18 reference Macromedia JRun 4 19 ActionScript and MXML API 17 managing files 21 ActionScript language 17 models.
  • Page 158 Watch panel 90 web servers 19 web services, Flex 153 WEB-INF 123, 125 WebLogic 20 WebSphere 20 workspace 5 Index...

This manual is also suitable for:

Flex builder

Table of Contents