User manual MACROMEDIA FLEX BUILDER-USING FLEX BUILDER

[. . . ] Using Flex Builder 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, Design In Motion, Director, Dream Templates, Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, Help To Source, HomeSite, Hotspot Studio, HTML Help Studio, JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Central, Macromedia Flash, Macromedia M Logo and Design, Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with Macromedia Logo and Design, MAGIC Logo and Design, Mediamaker, Movie Critic, Open Sesame!, RoboDemo, RoboEngine JFusion, RoboHelp, RoboHelp Office, RoboInfo, RoboInsight, RoboPDF, 1-Step RoboPDF, RoboFlash, RoboLinker, RoboScreenCapture, ReSize, Roundtrip, Roundtrip HTML, Shockwave, Sitespring, Smart Publishing Wizard, Software Video Camera, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be, WinHelp, WinHelp 2000, WinHelp BugHunter, WinHelp Find+, WinHelp Graphics Locator, WinHelp Hyperviewer, WinHelp Inspector, and Xtra are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally. [. . . ] The Code inspector works just like Code view; you can think of it as a detachable Code view for the current file. To view the code in the file, do one of the following: · Click the Code button on the Document toolbar. · From Design view, press Control+' (the slanted quotation mark that usually shares the tilde [~] key). 76 Chapter 3: Creating, Coding, and Debugging Flex Files 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 adjust the size of the panes in the Document window, drag the splitter bar to the desired position. To get a more accurate view of the layout, click the Standard button on the toolbar to remove the padding and borders around objects in Design view. This mode is ideal in Split view if you prefer to work in the code but you still like to get visual feedback about the changes you make. For more information, see "Customizing the Document window" on page 96. 4. Click in either pane to start editing. Code view is updated automatically when you make changes in Design view. When you make changes in Code view, however, do one of the following to update Design view: Click anywhere in Design view. Press F5. Working with the code in Flex files 77 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. If you're working with MXML, the code hints display lists of tags and properties as you type. If you're working with ActionScript, the code hints display function patterns of built-in ActionScript classes (function name, return type, names and types of arguments), as in the following example: unshift(value:Object):Number. Note: If a method or property is inherited, the data type will not be specified. Code hinting is not supported in custom classes. To insert a code hint in your code: · Select the item in the pop-up menu and press Enter, or double-click the item. To clear the pop-up menu: · Press Backspace or Escape, or keep typing. Related topics · "Setting code hints preferences" on page 82 78 Chapter 3: Creating, Coding, and Debugging Flex Files 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. Click anywhere inside the MXML tag in Code view, or select the component or container in Design view. The properties of the tag appear in the Attributes panel of the Tag inspector (Window > Tag Inspector, or press F9). 2. Click the value field of a property in the Attributes tab, and enter or edit the value. For more information on the various properties, see Flex ActionScript and MXML API Reference Help. For more information on the effect properties, see "Applying effects to Flex components" on page 109. 3. To list the properties alphabetically, click the Show List View button on the panel. To list the properties by category again, click the Show Category View button. Related topics · "Modifying a CSS style applied to a component" on page 107 · "Applying effects to Flex components" on page 109 · "Creating MXML component files" on page 121 Working with the code in Flex files 79 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 Editor appears. Depending on the component you double-clicked, the title, text, or label value in the tag may be highlighted and ready for your changes to help you work even faster. 2. [. . . ] For more information, see "Binding data with the <mx:Binding> tag" in Developing Flex Applications Help. Related topics · · · · · "Binding data" in Developing Flex Applications Help "Flex data services" on page 152 "Working with Flex data services" on page 136 "Binding a control or container" on page 127 "Working with Flex data models" on page 129 Flex data models A data model is an object you can use to temporarily store data in memory so that you can more easily manipulate the data. For example, a data model could store information such as a person's name, age, and phone number, as follows: <mx:Model id="myEmployee"> <name> <first>John</first> <last>Doe</last> </name> <department>Accounting</department> <email>jdoe@goodcompany. com</email> </mx:Model> The fields of a data model can contain static data as above, or they can be bound to other objects. You can also define the data model in a separate XML file or a URL that returns XML. In that case, you can use the source property in the <mx:Model> tag to specify the XML file in the local web application directory, or to specify the HTTP URL that returns XML. [. . . ]