Office

Developing Custom Microsoft Visio 2010 Solutions : Creating SmartShapes with the ShapeSheet (part 3) - Controlling Grouped Shapes with the ShapeSheet

4/17/2014 1:50:21 AM

Understanding Visio’s Coordinate System

The coordinates for shapes and pages are the same as you learned in algebra and geometry, namely Cartesian coordinates. The origin is at the lower-left of a shape or page; positive directions are to the right and up.

The Pin of a shape is the same as the rotation point that you see when you mouse over the “lollipop” handle above a shape. In the ShapeSheet, you have seen four cells that define that pin: PinX, PinY, LocPinX and LocPinY cells.

Imagine pinning a note to the wall. The location of the hole made in the wall is defined by PinX and PinY, relative to the lower-left corner of the wall. The location of the hole in the note is defined by the LocPinX and LocPinY. These are relative to the lower-left corner of the note. In this analogy, the wall is the page, and the note is the shape.

Shape developers talk about “local” coordinates and “parent” coordinates. For a shape, LocPinX, LocPinY and Geometry coordinates are local to the shape. PinX, PinY and Angle are relative to the parent: the page, or a containing group.

Budding shape developers are often tripped up by the difference between local and parent coordinates, especially when working with subshapes inside a group.

Controlling Grouped Shapes with the ShapeSheet

You’ve just seen how to smarten the geometry points of a single shape. Next, you try smartening the subshapes within a group.

There are numerous reasons to create grouped shapes. If you need multiple text blocks in a shape, or if you need different line or fill colors and styles, you need to group shapes together. Grouping shapes can also simplify programming by isolating different behaviors in separate subshapes, as you see shortly.

Be warned that once you start adding ShapeSheet smarts to a group and its member shapes, ungrouping becomes very destructive. If you need to alter parts of your group, be sure to subselect the appropriate shapes, or open the group window by right-clicking and choosing Group, Open Group. Ungrouping can blow away a lot of your ShapeSheet work, so don’t do it!

In the next example, you incorporate your pointy box into a well-behaved notes shape. The arrow is grouped together with a number for easy identification. The entire shape exhibits behavior similar to the arrowhead in that the number box doesn’t change when you stretch the whole shape. Figure 6 contrasts the way the smartened shape resizes with an unsmart box grouped with the arrow.

Creating Smart Resizing with Grouped Shapes
1.
Drop a copy of the previously created pointy box on a fresh, empty page.

2.
Draw a square to the left of the arrow using the Rectangle tool, so you have the basis of the notes shape shown in the top shapes of Figure 6.

3.
Select the rectangle and pointy box, then group them together. Pressing Ctrl+G is the fastest way to do this, but notice the Developer tab has a dedicated Group button in the Shape Design group.

4.
Select the new group and click the Shape Name button in the Shape Design group on the Developer tab. In the pop-up, you should see that the shape has an ID of 3 and that its name is Sheet.3.

5.
Subselect each shape in the group and repeat the preceding step. The box on the left should be named Sheet.2, and the arrow should be Sheet.1. If your ids are different, be sure to note which id is for the square and which is for the pointy box. Shape IDs generally reflect the order in which the shapes were created on the page. The sheet notation is useful when you’re referencing ShapeSheet cells in other shapes.

6.
Before you add smarts to the shape, let’s agree on terminology. Figure 7 gives names and shows the conceptual dimensions for each part of the shape, and shows the sheet IDs for each part as well. I will refer to the pieces as Group, Box, and Arrow for the rest of this example, and they will have IDs 3, 2, and 1, respectively. If your shapes have different IDs, you might have to translate some of the IDs in the following steps.

Figure 7. The desired dimensions of the subshapes for your smart notes shape. Note that the widths of the Box and Arrow shapes depend on the height of the group.

7.
Open the ShapeSheet for the group.

8.
To control the size of the subshapes, it is convenient to add parameters at the group level. This makes it easy to make changes without digging into subshapes. Start by adding user-defined cells to the group. Unlike Shape Data fields, user-defined cells are accessible via the ShapeSheet only, so they remain invisible to end users. Think of them as data fields for developers.

To add user cells, right-click anywhere in the ShapeSheet window and choose Insert Section.

9.
In the Insert Section dialog, check User-Defined Cells. The User-defined Cells section appears in the ShapeSheet, with one row named User.Row_1. You can freely rename Row_1 to something more meaningful, but you can only use numbers, letters and the underscore symbol.

10.
The notes shape needs four user cells, so add three more. To add User rows, right-click in any cell of Row_1 and choose Insert Row. You can quickly repeat this action two more times by pressing F4.

11.
You change the name of user cells in the same way that you edit cell formulas. Change the names of your rows and enter formulas in the Value column so that your User section looks like this:

`User.BoxWidth = HeightUser.BoxHeight = HeightUser.ArrowWidth = Width - HeightUser.ArrowHeight = Height`

Note, you get “User.” for free, don’t type this when changing row names! You have now defined the important size parameters for the subshapes.

12.
The four parameters are currently calculating away in silent anonymity because no other cells reference them. Let’s hook up the Box subshape to the first two. Start by subselecting the Box and showing its ShapeSheet.

13.
Enter these formulas in the Shape Transform section of the Box shape. Note what happens to the shape after each change:

`Width = GUARD(Sheet.3!User.BoxWidth)Height = GUARD(Sheet.3!User.BoxHeight)LocPinX = GUARD(0)LocPinY = GUARD(0)PinX = GUARD(0)PinY = GUARD(0)`

The width and height of the box refer to the user-defined parameters stored in the group’s ShapeSheet. Note the cross-sheet referencing syntax for these two formulas: Sheet.ID + exclamation point + cell-name.

User-defined rows have two cells: Value and Prompt. The full names of the cells are, for example: User.BoxWidth.Value and User.BoxWidth.Prompt. Since the Value cell is the default, Visio lets you use more compact notation and leaves “.Value” off, as we did in our formulas above.

The pin is located at the center of a shape by default. You can reduce calculation by moving it to the lower-left corner, which is point 0,0. The formulas you just entered cause the LocPin to be in the lower-left corner of the box, and its Pin to be in the lower-left corner of the group. Zeros across the board! Note that this changes the rotation point of the shape to the lower-left corner as well. But we won’t be rotating the box, so this is just fine.

The GUARD function prevents users from accidentally moving the shapes and breaking the smart formulas. It also tells Visio to preserve the formulas when the shape is copied.

14.
Now you’re ready to link the Arrow to the Group’s parameter cells. Subselect the Arrow shape and show its ShapeSheet.

15.
Enter these formulas in its Shape Transform section, as you did in the previous steps:

`Width = GUARD(Sheet.3!User.ArrowWidth)Height = GUARD(Sheet.3!User.ArrowHeight)LocPinX = GUARD(Width)LocPinY = GUARD(0)PinX = GUARD(Sheet.3!Width)PinY = GUARD(0)`

Similar to what you did with the Box, these formulas simplify the positioning calculations by moving the LocPin to an edge—this time to the lower-right corner of the arrow and of the group.

If you resize your group, the Box should stay square, the point of the Arrow should maintain its shape, and there should be no gaps between the two subshapes.

16.
Be sure to save your file as you work. While the notes shape is now much smarter, you’re still not done with it!

 Others

 Top 10

 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
 Cars & Motorbikes Fashion Gadgets Technology Girlstalkinsmack