Chapter 3. USING DESIGN MODE

Design mode is your what-you-see-is-what-you-get (WYSIWYG) editor for Adobe Flex 3. It’s a great place to start, whether you’re an experienced coder or a designer. Available at your disposal is a nice list of visual components you can simply drag and drop to build your interface. You can modify every option for these components visually, with the most common ones you’ll need readily available. In this chapter, you’ll get acquainted with Design mode and will begin to build an application visually.

A Blank Slate: Your Canvas

Let’s head back to the HelloWorld project and open the main application (the main .mxml file) in Design mode. You’ll see a blank, bluish background, the default style for all Flex applications. When you’re in Design mode, the Components panel should be visible by default and appear on the lower left next to the Outline panel and under the Flex Navigator. If the Components panel is not visible, you can get it back by going to the Window menu, which has the most common panels for Flex right at its top. Note that the Components panel isn’t available when you switch to Source mode, because in Source mode you’ll use MXML code to create components.

You can display the Components panel via Window→Components. This panel holds all your user interface (UI) components that will help you build everything.

Adding Components to the Application

Get Learning Flex 3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.