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. [. . . ] This chapter contains the following topics: · "Creating MXML or ActionScript files" on page 75 · "Working with the code in Flex files" on page 76 · "Testing and debugging Flex files" on page 83 Creating MXML or ActionScript files You can create MXML or ActionScript files in Flex Builder. To create a new MXML or ActionScript file: 1. Select File > New. The New Document dialog box appears. 2. In the Category list, select Flex Development. 75 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 appears in the Document window. 4. Save and name the new file (File > Save). Related topics · "Creating MXML component files" on page 121 · "About Flex files" on page 146 · "Setting a default new document type" in Using Dreamweaver Help Working with the code in Flex files Flex Builder provides a number of coding tools for developing Flex applications. While this section provides information on the main coding features in Flex Builder, it does not cover every coding feature in the product. For more information, see "Coding in Dreamweaver" in Using Dreamweaver Help. This section covers the following topics: · · · · "Viewing and editing code in a file" on page 76 "Using code hints" on page 78 "Using the Tag inspector" on page 79 "Setting coding preferences" on page 80 Related topics · "About Flex files" on page 146 Viewing and editing code in a file You can view and edit the code in your files by turning on Code view. You can also split the view or work in the Code inspector, a separate coding window. 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. The splitter bar is located between the two panes. 3. 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. Standard mode gives you a more accurate view of the layout. 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. [. . . ] 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. In the following examples, the content of the myContacts data model is an XML file named content. xml stored in the same folder as the MXML file. The content of the myCompany data model is a fictional HTTP URL that returns XML: <mx:Model source="content. xml" id="myContacts"/> <mx:Model source="http://www. somesite. com/companyinfo. xml" id="myCompany"/> About Flex data bindings 151 If you hand-code your pages, you can use ActionScript or the <mx:Model> tag to define a data model. [. . . ]