Adding Objects to a Stack

The first step in creating a LiveCode application is to create the graphical user interface (GUI). With LiveCode you typically create the objects of your application before writing any code.

Once you have the objects in place, you can proceed to attach code to each object.

Create a New Stack

Create a New Stack

The first step in creating your application is to create a new stack by selecting 'New Stack' from the File menu. You can choose default size, or pick a size to match your mobile device.

You can then open the Stack Inspector by clicking Inspector in the toolbar and name the stack 'My First Application', or any name you choose.

Adding Objects to the Stack

Adding Objects to the Stack

Now you want to add objects to the stack.  You do this by dragging the objects you want from the Tools Palette to your stack.

Try adding some objects.

Aligning Objects

Aligning Objects

To get a really nice looking interface you want to make sure your objects are correctly lined up with each other.

Add a number of fields to your stack, scatter them around a bit.

Aligning Objects - Option 1

Aligning Objects - Option 1

There are a couple of ways you can line up your fields vertically.

The first way is to set the position of each field using the Property Inspector:

1. Choose 'Edit' mode

2. Select the field

3. Open up the Property Inspector

4. Select 'Size and Postion' from the drop down

5. Set the left of the field to 10, or whatever value you want it to be

Then repeat this for all the fields.

Aligning Objects - Option 2

Aligning Objects - Option 2

Another option is to select all the fields and align them using the Property Inspector.

1. Choose 'Edit' mode

2. Select all the fields by dragging over them with the mouse

3. Open the Property Inspector

4. Select 'Align Controls' - this option is only available when multiple objects are selected. To see it you may need to click on the >> button to the right of the tabs in your Property Inspector.

5. In the 'Align' section click the 'Align Objects Left' button

Note: You can select multiple objects by holding the ctrl button and clicking multiple fields or by dragging over them while in 'Edit' mode.

Other Object Alignment Options

Other Object Alignment Options

There are a number of other options under 'Align Objects'

1. Make the widths and/or height of objects equal

2. Align objects horizontally

3. Space objects equally (horizontally or vertically)

4. Nudge objects one pixel at a time

5. Change the layer of controls

Note: The layer of a control is its order (from back to front) on the card. If two controls overlap, the one that covers the other has a higher layer. Each control is on a different layer.

2 Comments

William Volkoff

I am having difficulty aligning the button in the calculator. It appears there is a high reliance on the Nudge tool, rather than any other tool to make simultaneous alignment on 2 or more different rows or columns. I have used Alignment tools in other programs to align fields with more ease. Or, I just may be missing something. Any suggestions?

Thank you.

Hanson Schmidt-Cornelius

Hi William,

you could try selecting a row or column of buttons that you are trying to align and then use the Align or Distribute functionality. This should help you with automatic alignment of a number of buttons.

Kind Regards,

Hanson

Add your comment

E-Mail me when someone replies to this comment