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.
- Create a new Mainstack.
- Add four buttons across the width of the card.
- Put this handler in the card script:
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 - Resize the card window. The buttons should spread out evenly across the card.
- Go to Standalone Application Settings and select the iOS option.
- Make sure that the supported devices include iPad.
- Set the orientation options to include all the four orientations.
- From the Development menu, set the Test Target as the iPad Simulator and perform a Test.
- In the simulator, choose either Rotate Left or Rotate Right from the Hardware menu.
- The buttons should spread themselves out across the screen in both the portrait and landscape orientation.
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.