Using MPI's Anchordata module

Introduction

autoResize and anchorData allow you to have windows with object that resize/reposition when the window is resized. This can be a little tricky to set up. Fortunately moduloPi's Anchordata module takes care of everything for you.

In a recent SuperCard Chat (iCal for SC iChat) there was a discussion about User Interface, I proposed MPI's anchorData module as an example of good interface. This got me thinking of how to explain how the module works. I though it might be a good use of my new copy of Snapz Pro X.

On reviewing my understanding of anchorData and autoResize I realised that I was using MPI without really needing to think about all the tricky stuff.
I though I would briefly go over the basics (really a rehash of the SuperCard Language guide) and then demonstrate how moduloPi makes this really easy.

Basic AnchorData

AnchorData is a custom property that specifies how objects are to be resized and repositioned when using the autoResize feature of backgrounds.

The format of an anchorData property is a four-item string that specifies how each edge of the object's bounding rect should scale, in the following form:
left,top,right,bottom

So if you have an object with a userProp anchorData and that prop value is: left,top,right,bottom the object will resize with the window, its sides staying at the same difference from the 4 sides of the window.

If we want to have an object stick to thebottom right of a window it's anchorData would be Right,Bottom,Right,Bottom

Other basic options are, again from the SLG:

• CENTER - Keep this side of the object a constant distance from the horizontal or vertical center of the window (depending on which side it is)
• SIZE - Adjust this side so the object is scaled proportionally
• PAGE = Adjust this side such that the object stays a constant size but moves around as the window resizes (generally applied to opposite sides in pairs)

Other properties and settings

• referenceSize userProperties of the card and background
• minimumSize userProperty of the background.

• The dontLimitWindows needs to be false and the autoResize of the window true.

More Complex AnchorData

• divider is used for object the user can move within limits eg a divider eg: left,top,right,-60:100 An object with this anchorData would resize relative to the left, top and right but the bottom would be proportionally adjusted but never be less that 60 pixels or more than 100 pixels from the bottom. You only need the - and the first number if you want a maximum value it follows the minimum after a colon.
• relative values start with a tilde ~ and the short id of an object, the object with that anchordata move relative to the object with that id. eg: an object with anchorData left,~126,right,bottom would resize so that its bottom edge would stay relative to anothe object with an id of 126. the object must be on the same layer (card or background) and below the object it controls.
  That is the divider must have a part number > to the part number of the object whose anchordata contain a tilde reference to this divider.
  Or as Stéphane told me the tilde goes up

Setting Anchordata Workflow

1. Resize your window to the minimum size it is going to be.
2. Arrange your objects.
3. Set each objects anchorData
4. Run these scripts:
   set the referenceSize of this card to the windowSize of this window
   set the referenceSize of this background to the windowSize of this window
   set the minimumSize of this wd to the windowSize of this wd
   set the autoResize of this window to true
   set the dontlimitWindows to false (this will need to be in a script which runs anytime the window will open (openProject perhaps)

Phew! Although that seems a lot the referenceSize userProps seem to be created automatically when you resize the window for the first time.

Using MPI Anchordata Module

MPI's anchorData Module makes this process a lot easier.

Let me know if this was useful or you find any errors by email John or post a comment on the: Weblog entry