Using the Outline View

Contents

1. Outline View

Design Center includes an outline view for visualizing and modifying the hierarchical structure of design widgets. The hierarchy is presented in the form of a widget tree similar to how Windows Explorer presents the hierarchy of folders and files. The widgets in the tree are either containers of other widgets or simple widgets. Example containers include Panel, Navigation Bar and List. Examples of simple widgets include Text, Link and Toggle. Containers are depicted in the tree with a plus sign, indicating that there are widgets contained within. The top-most widget represents the Design Form.

The depth of a widget in the tree represents its layer, or Z-order, in the design. Widgets are rendered in a bottom-up order. Thus, widgets at the lowest layer are rendered first followed by the widgets in the next level up until the top-most widget layer is rendered.

Clicking the plus sign expands the container to reveal its children widgets. Clicking a minus sign collapses the container in the hierarchy.

Back to Contents

2. Using Outline View for Quick Selection

When you select a widget in the outline, the corresponding widget in the Visual Designer is selected. The outline is good for quickly finding and selecting small or overlapping widgets that are otherwise difficult if not impossible to select directly in the Visual Designer.

Back to Contents

3. Changing Widget Layer Order

You can change the layer order of widgets by changing their respective order in the outline. To change the order, drag an element to a different position in the outline.

Back to Contents

4. Changing the Widget ID Property

You can change the ID property of a widget in the outline. To change the ID property, double-click the element and enter the new ID.

Back to Contents

5. Cutting, Copying, Pasting and Deleting Widgets

Select any widget in the outline, and use the right-click menu or Windows keyboard short-cuts to perform cut, copy, paste and delete operations.

Back to Contents

6. Where Do I Learn More about MobiOne Studio?

The MobiOne online Learning Center site provides documents, tips, tutorials and videos to help answer your questions. Remember to check the Learning Center site for new and updated material.