Flash Catalyst and Flash Builder integration

Flash Catalyst CS5.5 and Flash Builder 4.5 provide tightly integrated workflows that let designers and developers collaborate and work in-tandem on the same project.

Project structure for ensuring Flash Catalyst compatibility

Flash Catalyst CS5.5 supports a subset of features and components that are available in the Flex 4.5 framework. Therefore, it is important that you structure your project such that it works seamlessly in Flash Catalyst.

Plan your project

When you plan your project, identify the visual parts of the project that a designer owns and the logical parts that a developer owns. Typically, a designer owns the visual objects, animations, and the basic layout of the project. A developer typically owns the architecture, functionality, and the application-level layout of the project.

Flash Catalyst and Flash Builder provide several tools that help you define a clear contract between design and development. Separating your project into a main project and Flash Catalyst compatible library projects clearly defines which parts of the project the designer can edit. Using skinnable components provides a clear separation between logic and visuals at the component level.

Use library projects

Library projects let you separate the design and logic at the project level. Developers can use library projects to segregate parts of the project that need to be edited in Flash Catalyst.

Library projects also simplify the merge process because the developer does not usually edit the library project while the designer is working on it.

Create a main project and a subsidiary Flash Catalyst-compatible library project

  1. Create the main Flex project. For more information, see Create Flex projects.

  2. Create a Flex library project.

    Ensure that the project is Flash Catalyst-compatible by selecting Make Project Flash Catalyst Compatible in the New Flex Library Project wizard. For more information, see Create Flex library projects.

  3. Add the library project to the build path of the main Flex project.

    To do so, go to Project > Properties, and select Flex Build Path. Select the Library Tab, and click Add Project. For more information, see Modify a project build path.

  4. Place the skinnable components and skins in the library project and the code files in the main project.
    Note: The main project depends on the library project. Therefore, the library cannot contain code that depends on the main project and has to be self-contained.

Use skinnable components

The skinning architecture in Flex lets you create extendable skinnable components that are compatible with Flash Catalyst. Creating skinnable components in Flash Builder and creating skins visually in Flash Catalyst lets you separate design and logic at the component level.

A skinnable component contains the logical part of a component, while the skin contains the visual assets and layout rules. Additionally, a skinnable component can indicate that its skin contains parts and states. The host component can programmatically control the parts and states of the skin. Restricting communication between the skinnable component and its skins to the parts and states lets the two parts to be highly independent and flexible. For more information on creating custom skinnable components in Flash Builder, see Example: Creating a skinnable Spark component.

After you create a skinnable component definition in Flash Builder, create an initial sample skin. If you do so and import the project into Flash Catalyst, the skin shows up in the Components panel in Flash Catalyst. You can then easily edit the skin in Flash Catalyst. Creating a sample skin helps the designer understand the basic structure of the skin.

Ensure Flash Catalyst compatibility

Like any visual coding tool, Flash Catalyst only supports a subset of Flex code. However, Flash Builder provides a compatibility checker that tells you exactly which parts of your code are editable by Flash Catalyst.

When you create a Flash Catalyst compatible project in Flash Builder, the Flash Catalyst compatibility checker (Project > Properties > Flash Catalyst) is automatically turned on. When you create a project in Flash Catalyst and import it into Flash Builder, it is automatically configured to be Flash Catalyst compatible. If you introduce any incompatibilities while editing the project, Flash Builder displays the compatibility errors in the Problems view indicating which parts of the code can be edited in Flash Catalyst.

You do not necessarily need to resolve all compatibility issues before opening a project in Flash Catalyst. The "Type" column of the Problems view displays the impact of each compatibility problem. Problems that prevent the project from opening in Flash Catalyst appear as warnings. Less severe problems appear as "info" notifications.

Incompatibility type

Description

Project incompatibility

The project cannot be opened in Flash Catalyst

File incompatibility

The file cannot be edited in Flash Catalyst.

Any incompatibilities in the main application makes the project incompatible.

Skinnable component incompatibility

The component cannot be skinned in Flash Catalyst or the skin part cannot be assigned in Flash Catalyst.

Design-time data incompatibility

The list data is controlled by application code that is not editable in Flash Catalyst. You can edit the list appearance in Flash Catalyst.

Flash Catalyst compatibility warning

This warning does not reduce editability of the project in Flash Catalyst. It can, however, indicate an editing experience that is not seamless.

For more details about Flash Catalyst compatibility issues, see www.adobe.com/go/learn_fcprojectcompat_en.

Passing files between Flash Builder and Flash Catalyst

You can use FXP files to exchange a complete Flex project or to exchange components, component skins, and assets between a designer and developer.

For complex projects, you can use a library project to structure your project's user interface as a series of skinnable components and skins. For more information, see Use Flex library projects.

You can then pass FXPL files back and forth between Flash Builder and Flash Catalyst to exchange only the component skins and design assets. To make sure that things are orderly, the designer can import the FXPL files into an empty project in Flash Catalyst, create visual skins, and add interactivity.

Use the following export and import workflows to pass the FXP and FXPL files back and forth between Flash Builder and Flash Catalyst.

Pass files from Flash Builder to Flash Catalyst

  • To export an FXP or FXPL file from Flash Builder to Flash Catalyst, select Project > Flash Catalyst > Export Flash Catalyst Project.

  • To import the FXP or FXPL file from Flash Builder into Flash Catalyst, go to File > Import, and select Adobe FXG File (.fxg) or Library Package (.fxpl).

Pass files from Flash Catalyst to Flash Builder

  • To export an FXP or FXPL file from Flash Catalyst to Flash Builder, go to File > Export, and select either Adobe FXG File (.fxg) or Library Package (.fxpl)

  • To import an FXP or FXPL file from Flash Catalyst into Flash Builder, select Project > Flash Catalyst > Import Flash Catalyst Project.

Edit FXP files using the Edit Project in Flash Catalyst command

If Flash Builder and Flash Catalyst are both installed on the same computer, you can use the Edit in Flash Builder command to edit FXP files.

For more information, see Edit Project in Flash Catalyst command.

Merge changes from Flash Catalyst to Flash Builder

When you import FXP or FXPL files from Flash Catalyst into Flash Builder, you can compare and merge differences between the two projects using the Compare Editor tool. You can also use a third-party merge tool of your choice.

When you create design assets in Flash Catalyst, you can bring the assets into Flash Builder by importing the FXP or FXPL file in the following ways.

  • Import the design assets into a new project, and then compare and merge changes using the Flash Builder tools.

  • Import contents of the library into the existing project.

  • Overwrite the existing FXP file with the updated version only if no changes have been made to the project in the meantime.
    Note: You cannot overwrite library projects (.fxpl).

To compare projects using the Compare Editor tool, select the projects by pressing the Ctrl key and clicking the projects to compare. Then, right-click the selected projects, and select Compare With > Each Other. The results are displayed in the Text Compare panel.

Note: While merging, you can see several changes in setting files, like actionScriptProperties, or output files, like bin-debug file, or other parts of the project. You can typically ignore these changes, and focus only on the changes in the source folder.

For more information on using the Compare Editor tool, see the Eclipse documentation.

Edit Project in Flash Catalyst command

Use the Edit PRoject in Flash Catalyst command if you have both Flash Builder and Flash Catalyst installed on the same computer. You can launch Flash Catalyst from within Flash Builder and make any design changes directly to the project without passing the project files between Flash Builder and Flash Catalyst.

  1. To launch Flash Catalyst directly from within Flash Builder, select Project > Flash Catalyst > Edit Project In Flash Catalyst.

    You can also select Flash Catalyst > Edit Project In Flash Catalyst from the context menu for the project.

  2. Change the application design, as required. When you edit the project in Flash Catalyst, the project is locked in Flash Builder. The project is locked to ensure that there are no conflicting changes.

  3. Save changes and close the project in Flash Catalyst. You don’t have to exit Flash Catalyst.

  4. In Flash Builder, select Project > Flash Catalyst > Resume Working On Project in Flash Builder. You can also select Flash Catalyst > Resume Working On Project in Flash Builder from the context menu for the project.

    When you do so, you are prompted to save the changes made in Flash Catalyst. Saving the changes brings the newly saved project back into Flash Builder. In the background, the originally exported project version from Flash Builder is deleted after the newly saved project version is successfully imported from Flash Catalyst.

    The design changes are added to the project, and the project is opened for editing in Flash Builder.