Geometry Manager
It is often the case that stacks need to be resizable particularly when they may contain a variable volume of content. This can be problematic if you have spent a great deal of time making a visually impressive stack and have a large number of controls to reposition and resize. The Geometry Manager is a good way to solve this problem and can save you a great deal of time writing resize handlers.
Its basic function is to allow you to adjust the way that controls are scaled or reposition themselves when the stack is resized. In order to explore the functionality of the Geometry Manager, we will first need to import an image to experiment with. There are several ways of doing this in LiveCode, but perhaps the easiest is to create an image object and specify it's filepath using the Property Inspector.
Creating an image
Firstly, open LiveCode. Create a new stack by going to the 'File' menu and clicking 'New Stack'.
Drag out an image from the Tools Palette to create an image. The image will appear as a plain rectangle on your stack, as pictured.
To put an actual picture into this image, open the Property Inspector. Do this by double clicking on the image, represented by the rectangle on your stack. The Property Inspector will appear if it is not already open, and will be displaying the properties of your image. By setting the filename property of your image, you can change the image to any picture on your computer. Do this by clicking the small file icon next to the 'Source' field on the Property Inspector. This will open a window which will allow you to pick an image to load.
Now that we have an image to work with, we can start to look at the Geometry Manager. To access the Geometry Manager, scroll across the tabs at the top and select 'Geometry Manager'. Here we can see perhaps the most important part of the Geometry Manager - the linking area, which is shown above. Objects can have either their position or scale adjusted upon a stack resize. Lets look firstly at the repositioning functionality by selecting the "Position selected object" option, as shown above. For all the following examples vertical and horizontal geometry is dealt with separately.
Resizing without using the geometry manager
Firstly, when the geometry manager is in the normal state, changing the size of the window it's in does nothing - try changing the stack size, you will see that it remains in the same position relative to the stack.
Moving with an absolute link
Clicking on the bar once will result in the bar turning red as shown above. This creates an absolute link and means that the object will stay a fixed number of pixels from whatever it is being resized relative to i.e. when the size of the stack is increased the object will move and stay the same distance it was before the resize away from the stacks edge. Try resizing the stack and you will see it remains a fixed distance from the edge of the stack.
Clicking on the bar a second time will cause the appearance of a red wave graphic as shown below. This creates a relative link and means the object will remain a percentage of the cards total width away from the object it is being set relative to. So for example if a control is centred in a stack it will remain centred upon resizing. Try changing the size of the stack now and you will observe this effect.
Moving with a relative link
Moving with an absolute link to an object
You can also adjust the position of an object relative to the position of another object, as opposed to the edge of the card.To do this use the drop-down menu attached to the "Right object" bar to select the object you wish to position the selected object relative to. Then, you can set an absolute link, or a relative link as above. The selected object will then reposition relative to object specified, when they move. For example, try creating a button and setting an absolute link between the button and the stack edge, then setting an absolute link between your image and the button:
Now resize the stack. You will notice that the image remains a fixed distance from the button as the button is moved. The same can be done with a relative link, in the same way.
The rest of the controls in the Geometry Manager apply when we scale the selected item instead of positioning it, so let's take a look now at scaling controls. When you select the "Scale selected object" option you will notice that the linking area changes, there are now additional linking bars that connect to the top and left of the linking window.
Scaling controls with the Geometry Manager
When setting the resize properties the link controls operate in much the same way as they did for the positioning properties. Again a single click will result in an absolute link (solid red line) and a second click will result in a relative link (red wave). The absolute link will keep the desired edge of the object a fixed number of pixels away from the linked object or stack edge by stretching or reducing the object in size.
Try setting an absolute link between your image and an edge of the stack, then resize the stack - you will see that the image will resize in the direction you specified the link, the edge of your object always remaining a fixed number of pixels from the linked edge of the stack.
Scaling controls with an absolute link
The relative link will keep the desired edge a percentage of the total width/height of the stack away from the linked object or stack edge.
Scaling controls with a relative link
As you can see, the distance between the object and the edge of the stack changes as the object is resized, depending on the width of the stack.
Preventing text clipping
If you are resizing a field using the Geometry Manager, you may want to prevent it becoming so small that all the text inside is not shown. This can be achieved using the 'Prevent object clipping text' option, shown above. This will preserve a minimum size at which all the text contents can be displayed without clipping and no further reduction in size will occur.
Try creating a field, and adding some text. Then, choose 'scale selected object' in the Geometry Manager and create an absolute link to an edge of the stack. Select the 'prevent object clipping text' option, and check the options for Horizontal and Vertical scrollbars. You will see that when you resize the stack, scrollbars will appear if the text field becomes too small to show all the text. Keep in mind however, that this option only applies in the directions you specify with the Geometry Manager.
For example if we create a field with some text, which is fairly far away from the edges of the stack, making the stack window smaller will only reduce the size of the text field while the field is large enough to display all the text.
By additionally selecting the horizontal or vertical scrollbar options, instead of having a minimum size the stack will continue to reduce in size until vertical and horizontal scrollbars are generated that allow all the text to be viewed as shown below. This means that the field will resize below the minimum size required to show all the text within without scrollbars.
If you would prefer to manually set a minimum or maximum size for the control this can be achieved using the "Limit object" option. This simply allows you to specify a minimum/maximum height or width at which the control will cease to be resized. For example, setting a maximum of 300, 300 on our field causes it to cease resizing past a width and height of 300, 300
Specifying a minimum object size
The last control in the Geometry Manager is the 'remove all' button - clicking this will remove all the geometry settings you have set for the selected object.
Finally, here are some tips to keep in mind when using the Geometry Manager:
* If there is a resizeStack handler in your stack, you will need to pass the resizeStack message at the end of the handler in order to make the Geometry Manager work.
* If you intend to make your stack resizable, either with a resize handler or using the Geometry Manager, it’s a good idea to keep on top of things as you go along, this prevents the number of controls you need to deal with from getting out of hand.
* To force the geometry to manually update at any time you can use the revUpdateGeometry command.
* You can use the Geometry Manager to scale objects with a divider bar. Link the edges of the controls to the divider bar, add a script in the divider to move in response to a mouse action, then call revUpdateGeometry each time it moves to have the objects scale automatically.
* Setting a minimum height and width for your stack in the position section of the Property Inspector can prevent overlapping of controls when the stack becomes too small.
For further information on using this feature see section 4.4 of the user guide.
Tim Bobo
While iOS exports now have a scaling feature that is being refered to as resolution independence, The much need geometry manager seems to still be a missing feature in mobile exports. Is this really true? Third party plugins or writing a ton of extra code seem to be the only work-a-rounds for moving controls around on a screen without scaling them.