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

From the SuperCard Language Guide:

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.

simple resize

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

bottom right anchor data

Other basic options are, again from the SLG:

Other properties and settings

As well as the anchorData userProperty of the object you want to resize you also need to set some other userProperties: Once you have set the anchorData userProps you can set the referenceSize userProperties and the minimumSize userProperty to the windowSize of the window (assuming you started at smallest size you want you window to be). In SuperCard 4.5 (currently in public beta dec 2004) the dontlimitwindows can be true, but you can set the dolimitwindow property of windows on an individual basis.

More Complex AnchorData

There are a couple of extra setting you can use in Anchordata which are a little more complex.
divider and relative

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.

With MPI version 2.4 anchorData is even easier, this part of the tutorial is being updated.

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

Back to the How To Index