Important
The information in this section applies only to the
Professional and Premium editions of Visio 2010.
Software designers use wireframe shapes to create mockups of
dialog boxes and other visual elements that will be displayed by their
applications. When you use Visio 2010 to create a mockup of a dialog
box, you will find that the Dialog Form shape is a container.
Consequently, as you add buttons and controls to your dialog form,
they become container members. If you move, copy, or delete your
dialog box, all of the contained shapes are included. If you have ever
created a UI mockup using a previous version of Visio, it won’t take
more than a moment or two of experimentation to realize how
significant an improvement this is.
Some Visio 2010 UI shapes are lists, including, not
surprisingly, the List Box control. When you drop one into a dialog
form container, the list is prepopulated with three list members.
In this exercise, you will use the Wireframe template to build a
prototype of a simple dialog box that looks like the one in the
following graphic. Even if you aren’t a UI designer, you should find
this exercise useful in learning more about the behavior of containers
and lists.
Set Up
-
Drag a Dialog form shape
from the Dialogs stencil and
drop it on the page. In order to work effectively with this shape,
you need to zoom in.
-
Change the zoom level for the drawing page to 150%. If the dialog form is not centered
on the screen, use the scroll bars to center it.
-
Drag a Dialog button
shape from the Dialogs stencil
and glue it to a connection point in the upper-right corner of the
dialog form.
Tip
As soon as you drag the dialog button shape into the
dialog form shape, notice that the edges of the dialog form
shape are marked with the orange outline that characterizes a
container.
When you drop a dialog button shape onto the page,
it automatically opens the Shape Data dialog box.
-
In the Shape Data dialog
box, click OK to accept the
default value for Type.
-
Drag another Dialog
button shape into the dialog form container and glue it
to the left end of the previous one; when the Shape Data dialog box opens, click
Maximize in the Type list, and then click OK.
Tip
The dialog button shape is a multi-shape;
the data value you select in the Shape Data dialog box
determines the appearance of the shape.
-
Drag one more Dialog
button shape into the dialog form container and glue it
to the left end of the previous one. When the Shape Data dialog box opens, click
Minimize in the list, and then
click OK.
The top of your dialog form container now looks like the
following graphic.
-
Drag a Panel shape from
the Dialogs stencil and drop it
onto the page below (not inside) the dialog form. You need to drop
it outside the dialog form because it is too large to fit inside.
You must resize it first.
-
Use the resize handles or the Size
& Position window to change the width of the panel
shape to approximately 3 inches (75 mm) and its height to about
1.25 inches (30 mm).
-
Drag the Panel shape into
the dialog form and position it in the bottom center.
Important
The Panel shape is a container, so you can only select and
drag it by its edges.
-
Drag an Upper tab
item shape from the Dialogs stencil and position it as a
boundary shape at the upper-left corner of the panel
container.
Important
You want the upper tab item shape to be on the boundary of
the panel shape and not inside it. Consequently, when you
position the upper tab item shape, make sure that only the top
border of the panel container shows the orange outline, as shown
in the following graphic.
By attaching the upper tab item shape to the boundary of the
panel container, you have “welded” them together. If you
reposition the panel container, the tab follows along.
Tip
Notice that the top border of the panel container is not
the only thing with an orange outline in this graphic. There is
also an orange outline surrounding the dialog form container.
This is because you are adding the tab shape to a container that
is nested inside another container; both containers reflect your
action.
-
Drag a List box
from the Controls stencil and
position it in the upper center of the panel container as shown in
the following graphic.
-
Position the cursor just to the left of the Column 1 list shape and between the first
and second Text labels.
-
Click the blue insertion triangle twice to add two entries
to the list box shape.
Tip
The dialog form shape in this graphic is taller
than the ones in Step 12. That’s because the list box, panel
container, and dialog form container are all configured for
automatic expansion. When you added new list items, the list
expanded, which, in turn, caused both containers to
expand.
Clean Up
Save and close your diagram if you want to
keep it; otherwise just close it.
The dialog box mockup you’ve created in this exercise isn’t
going to win any design awards. If you wanted to create a real mockup,
you would add additional controls, text, colors, and themes. However,
by completing this exercise you have seen a practical application for
nested containers and lists, and an example of a container with a
border shape.
