IT tutorials
 
Office
 

Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
3/29/2016 9:39:42 PM

Wireframes

Visio 2013 includes a revamped set of user interface (UI) design shapes that were initially introduced in 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 2013 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 Visio 2007 or earlier, it won’t take more than a moment or two of experimentation to realize how significant an improvement this is.

Some Visio 2013 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. You can add, delete, and resequence list members by dragging them, as you learned in Adding shapes to lists .

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.

image with no caption

NOTE

SET UP Click the File tab, and then click New. Click Categories, click Software and Database, and then double-click the Wireframe Diagram thumbnail to create a new drawing.

  1. Drag a Dialog form shape from the Dialogs stencil, drop it on the page, and then zoom in so you can work with the shape.

  2. 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.

    image with no caption

    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 green outline that characterizes a container.

    When you drop a Dialog Button shape onto the page, it automatically opens the Shape Data dialog box.

  3. In the Shape Data dialog box, click OK to accept the default value for Type.

    image with no caption
  4. 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 Typelist, and then click OK. Repeat a third time and select Minimize in the Type list.

    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.

    The top of your dialog form container now looks like the following graphic.

    image with no caption
  5. 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, and you want it to become a member of the Dialog container. (If a shape doesn’t fit inside a container, it will not become a container member.)

  6. Use the Size & Position window or the resize handles to change the width of the Panel shape to approximately 3 inches (75 mm) and its height to about 1.25 inches (30 mm).

  7. Drag the Panel shape into the dialog form and position it in the bottom center.

    TIP

    The Panel shape is a container, so you can only select and drag it by its edges.

    image with no caption
  8. Drag an Upper tab item shape from the Dialogs stencil, position it as a Boundary shape at the upper-left corner of the panel container, type Tab 1, and press Esc.

    TIP

    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 green highlight, 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.

    image with no caption

    TIP

    Notice that the top border of the panel container is not the only thing with a green outline in this graphic. There is also a green 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.

  9. Drag another Upper tab item shape from the Dialogs stencil, position it as a Boundary shape to the right of the previous tab, type Tab 2, and press Esc.

  10. Drag a List box from the Controls stencil and position it in the upper-left corner of the panel container as shown in the following graphic.

    image with no caption

    TIP

    When you release the mouse button to drop the new list, it automatically adds several list items, as shown in the following graphic.

    image with no caption
  11. Select the uppermost Text item and type A, select the middle Text item and type D, and then select the bottom Text item and type E.

  12. Position the cursor just to the left of the Column 1 list shape, between the A and D labels.

    image with no caption
  13. Click the blue insertion triangle twice to add two entries to the List Box shape, and then type B into the upper item and C into the lower one.

    image with no caption

    TIP

    The Dialog Form shape in this graphic is taller than the ones in step 10. 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 of the surrounding containers to expand.

  14. Click once on the outer edge of the Dialog form shape to select it.

  15. On the Format tab of the Container Tools tool tab set, in the Size group, click Fit to Contents. The Dialog form container shrinks to fit the size of the Panel container located within it.

    image with no caption

NOTE

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 created a practical application for nested containers and lists, and have an example of a container with a border shape.

Legends

A data graphics legend is actually a structure consisting of an outer list, one or more containers as list members, and lists within those containers. For example, the same legend is shown in both of the following graphics. The structure is loosely visible on the left. However, after drawing a bounding box around the entire legend, the structure is very apparent on the right: the legend consists of three containers (Legend, Owner, Risk) and two lists, all of which are outlined in green.

image with no caption


 
Others
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- Microsoft Visio 2013 : Adding photos and changing styles in org charts
 
25 Inspiring Game of Thrones Quotes
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS