Using MPI's Anchordata module
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.
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:
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
As well as the anchorData
userProperty of the object you want to resize you also need to set some other userProperties:
- referenceSize userProperties of the card and background
- minimumSize userProperty of the background.
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).
- The dontLimitWindows needs to be false and the autoResize of the window true.
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 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
- Resize your window to the minimum size it is going to be.
- Arrange your objects.
- Set each objects anchorData
- 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