When a project is created or opened, Flash Builder displays the main window, called the workbench.
The workbench consists of 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, Problems, and several 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.
Getting Started with Eclipse
Flash Builder 4 is built on Eclipse, and inherits many of its features and shortcuts. For more information on Eclipse, please 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) are XML files that allow you to arrange visual components, as well as include non-visual components and ActionScript code. ActionScript files (.as) contain ActionScript code (classes, interfaces, etc.). You can achieve the same functionality with either type of file, but they are tailored to different usages.
MXML files are ideal for visual components that contain small amounts of ActionScript code. ActionScript files are ideal for non-visual code, including model or service classes.
Flash Builder provides powerful editors for both types of source files.
Adobe Flash Catalyst
Adobe Flash Catalyst is a tool that allows designers to easily create Flex applications from artwork created from the Adobe Creative Suite. Flash Builder provides tools to import Adobe Flash Catalyst projects. For more information on Catalyst: https://www.adobe.com/go/catalyst
MXML files can be edited in two modes, Source and Design. You can switch back and forth between these modes while editing an MXML source file. This makes it easy to manage the visual layout using the designer while switching to the source view to add ActionScript and non-visual components.
Source mode provides an XML editor with robust code completion, syntax highlighting, and error highlighting. The figure below shows the MXML editor in source mode with the code completion pop-up open.
ASDoc Tool Tips
You can quickly view the ActionScript documentation as a ToolTip in the MXML Source Editor and ActionScript Editor by hovering the mouse over a Flex SDK class or method.
Design mode provides a visual preview of your application. This is very useful for laying out the 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 bottom left window. You can drag and drop these onto your application to add them and adjust the layout.
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 absolution 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, users cannot (usefully) resize the application. It can also be very difficult to internationalize 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 bars skins (ButtonBarHorizontalLayout).
You can create your own Layouts by extending one of these layouts, or their base class, LayoutBase.
When you move beyond simple components and need to begin 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.
The editor includes keyword highlighting, error highlighting, and provides a list of current problems (Errors and Warning) in the view at the bottom of the workspace. The following figure shows a simple ActionScript class with two unresolved problems.
Flash Builder provides code completion for many common scenarios. Code completion can be triggered automatically based on context or manually, using Ctrl-Space. Code completion is automatically triggered after a period or colon, displaying either possible variable and property names, or available types.
ActionScript is a dynamic language. Therefore, the code completion can only provide guidance for the statically known functions and properties. There will be occasions when code completion will be unable to identify valid functions or properties.
ActionScript is a relatively concise language, avoiding significant amounts of boilerplate code. However, there are still occasions where it is useful to have Flash Builder perform common code generation.
Generate Getter/Setter provides the ability to generate a get and set method for a given variable.
Generate Event Handler generates an event handler method and assigns it to the event property on the MXML component. Generate Service Call generates code to integrated with server classes when using Data Services.
The following table provides a list of where and how these code generation functions can be invoked.
||Right Click (Win)/Ctrl-Click(OSX) on Variable and select Source -> Generate Getter/Setter.
|Generate Event Handler
||MXML Source View, MXML Design View
||Source: Ctrl-Space in event property. Design: Right Click on a Component -> Generate Click Handler OR click the button in the Flex Properties View and select Generate Event Handler.
|Generate Service Call
||MXML Design View
||Right Click on a Component -> Generate Service Call OR click the button in the Flex Properties View and select Generate Service Call.
Flash Builder provides support for some basic refactoring. You can Rename variables and functions, and Rename or Move classes using the menu: Source -> Refactor -> Move (or Rename). You can also access the Refactor menu from the context menu (Right Click (Win) or Ctrl Click (OS X)). These menu items will open a dialog box allowing you to specify the new name or location.
Flash Builder supports integration with many different source control management tools. You can install an Eclipse Plug-in for the source control management tool you use.
Data Centric Development
The Flash Builder Data Centric Development feature allows developers to quickly and easily connect Flex applications to a backend service.
To use the Data Centric Development feature, the project must be connected to a service. This can either be done when the project is created, or later when needed.
If a service was not defined, Flash Builder will prompt to create one when the Generate Service Call code generation feature is first used.
Select the type of service you are using. You will then be taken to the Project Properties page where you can setup your service (this the same options and inputs used by the New Project Wizard)