It could get quite complicated if you did lay out all of the card's controls with code, so we're only going to construct a simple case to show the technique. You can enhance this later for more complex cases.
on resizeStack newWidth,newHeight put the width of button 1 into buttonWidth put (newWidth - 4 * buttonWidth)/5 into gap put the top of button 1 into buttonTop repeat with a = 1 to 4 set the top of button a to buttonTop set the left of button a to gap + (a-1) * (gap+buttonWidth) end repeat pass resizeStack end resizeStack
In addition to making a simple example of how the resizeStack
handler can be handled, we also saw that the changes in orientation also send the resizeStack
message.
While a control is selected on the card, the Inspector palette has an entry named Geometry. It's a somewhat strange interface! Let's take a look:
These faint horizontal and vertical bars are used to select whether you want the control to be scaled or positioned by a fixed amount or relative amount. That is, if a button is 100 pixels from the right of the card window and if you select the position a fixed amount away, then as you resize the card window, the button will remain 100 pixels away from the right edge of the window. If, on the other hand, you use the relative setting and the button is 80 percent across the card window, it will still be 80 percent across the window after you have resized it.
The first click on one of these bars will make it turn solid red in color and this indicates that it's a fixed amount away from the edge of the card. If you click on it again, it takes the shape of a red waveform, indicating that it's going to be relative.
In the screenshot, you can see that the selected button is set to a fixed amount from the bottom of the card and a relative amount from the right of the card. The image also shows the scaling settings for the control.
Note that an object can also be positioned relative to other objects. Refer to the Right object and Bottom object pop-up selectors in the preceding screenshot.