Getting the Most Out of the Flex Builder Design View

Expanded and Standard Modes

The two modes of operation within the Design view are Expanded and Standard. The controls to switch between these two modes are located to the right of the Debug button.

Figure 3. Standard / Expanded Mode buttons

When you launch Flex Builder for the first time, it asks whether you prefer Designer or Coder mode. If you choose Designer mode, the Design view starts in Expanded mode. In this mode, Flex Builder adds a 10 pixel margin to containers and displays a dashed border around containers to show each container’s boundary.

Expanded mode is particularly helpful for starting new applications or MXML components where you plan to insert new containers and controls. In Expanded mode, it is easy for you to place the insertion point and it is clear how your containers fit together. You can also position and arrange your application or MXML component UI.

When developers work in Expanded mode, the UI may not render accurately because of the additional margins. Use this mode for prototyping and laying out your application. If you have already laid out your application, or if you want to see a more accurate representation of the UI, switch to Standard mode.

When you choose the Coder mode, Design view starts in Standard mode. Standard mode is a high-fidelity mode that gives the most accurate representation of what your application will look like once you deploy to the Flex Server. The dashed borders around containers do not appear and this mode does not add extra margins. You can still edit components in Standard mode just as you would in Expanded mode, but in some cases, you will be unable to place an insertion point between a component and the edge of the layout that contains it because there are no margins. Do not despair, you can still insert content in these hard-to-reach spots.

Example:

In the Expanded mode (Figure 3), to add a button to the left of button “2”, use the following steps:

1. Click to the left of button “2” to place an insertion point.
2. Drag a button from the Insert | controls bar.

Figure 4. Collection of buttons in boxes displayed in Expanded mode

In the Standard mode (Figure 4), to add a button to the left of button “2”, take the following steps:

1. Drag a button from the insert | controls bar on to the left part of button “2”. An insertion point appears to the left of the button.
2. Drop the button.

Figure 5. Collection of buttons in boxes displayed in Standard mode

Page 3 of 6

Previous Page

Next Page