When a project is created or opened, Flash Builder displays the main window, called the workbench.
The workbench comprises a set of Views, Editors, and Toolbars. Views provide visual access to some part of your project. The initial views include the Package Explorer, Outline, and Problems View among others. Editors allow you to edit the source files and can be text based or visual. Toolbars provide easy access to commonly used menu items.
Perspectives can be used to manage your workbench. A perspective is a collection of views and toolbars appropriate for a certain activity. Flash Builder provides two default perspectives Flash and Flash Debug. These perspectives open the appropriate Views and Toolbars for Development (Flash) or Debugging (Flash Debug). You can modify these perspectives or define your own to customize the Flash Builder environment to your individual taste.
Hot Tip Getting Started with Eclipse Flash Builder 4.5 is built on Eclipse and inherits many of its features and shortcuts. For more information on Eclipse, see the Getting Started with Eclipse Refcard. http://refcardz.dzone.com/refcardz/getting-started-eclipse
Building Flex Applications
Flex applications consist of two different types of source files. MXML files (.mxml) contain the markup used to arrange visual components as well as non-visual components and ActionScript code. ActionScript files (.as) contain ActionScript code (classes, interfaces, and so on). You can achieve the same functionality with either type of file, but they are tailored to different use cases.
MXML files are preferable for visual components that contain small amounts of ActionScript code. ActionScript files are better suited to non-visual code, including model or service classes.
MXML files can be edited in two modes, Source and Design. You can switch between these modes while editing an MXML source file. This makes it easy to manage the visual layout using the Design View and switch to the Source View to add ActionScript and non- visual components.
Source mode provides an XML editor with code completion, syntax highlighting, and error highlighting.
Hot Tip ￼ASDoc Tool Tips You can quickly view the ActionScript documentation as a ToolTip in the MXML Source Editor and ActionScript Editor by hovering the over a Flex SDK class or method
When you move beyond simple components and need to create object models and complex logic, it is time to use the ActionScript editor. The ActionScript editor is a traditional source code text editor, which includes keyword highlighting and error highlighting. It also provides a list of current problems (Errors and Warnings) in the view at the bottom of the workspace.
Design mode provides a visual preview of your application. It’s very useful for laying out components or simply checking to see how they will look without running the application. The Design mode features a list of available components in the Components View at the bottom left. You can drag and drop these onto your application and then adjust their size and position in the layout. You can also change between different UI states easily by selecting a different state in the drop- down list at the top.
Hot Tip ￼Mobile Application Design Mode You can use Design Mode when building mobile applications. You can even select a target device by using the drop-down list at the top.
Each Flex container uses a specific layout to determine the size and position of the visual components. The Flex SDK provides four general-purpose layouts. Components can be configured using absolute or relative positioning. BasicLayout allows absolute positioning, where components are assigned specific x and y coordinates. This mode allows pixel-level control over the appearance of the application. However, it also has several drawbacks. When using BasicLayout, you cannot (usefully) resize the application. It can also be very difficult to internationalize such an application, as buttons and labels are often different sizes based on the language. VerticalLayout, HorizontalLayout, and TileLayout all provide different approaches to layout components using relative positioning.
||Components are positioned using x and y coordinates.
||Components are positioned in a column.
||Components are positioned in a row.
||Components are positioned in a grid.
Flex also provides a layout specifically for button bar skins (ButtonBarHorizontalLayout).
You can create your own Layouts by extending one of these Layouts or their base class, LayoutBase.