This example is about building an application on a desktop computer – PC, Mac or Linux. While there are many similarities, this will not cover iOS or Android. This is the first part of a planned four part example.
Creating a User Interface[]
Creating a stack and a card[]
We are now going to create a program called Add Game. With LiveCode started, make sure its in Edit Mode. Then click on menu File > New > Default Size. A new window should open, replacing the Start Center if it’s still around. This window represents a stack of cards, with one card showing. When a stack is created, one card in that stack is also created.
A program owns one or more stacks. The first stack that is created is the Main Stack and the rest are sub-stacks. A stack owns one or more cards in that stack. Every card in a stack has an unique ID number, given by LiveCode.
Naming the program, stack and card[]
Every object in a program should be given an unique and memorable name. The name should be unique so that LiveCode can keep track of it and the name should be memorable so that the programmer can keep track of it.
Naming the program means saving it. Saving the program should be done soon after creating the stack and card. Save early and save often. We will leave saving until last and will name the stack and card first.
In LiveCode all objects are named with the Property Inspector. The easy way to open this for the stack is to right click on the window, then go down the menu to Stack and across to click on Property Inspector.
When the Property Inspector opens, notice the row of small icons at the top. The last icon in that row shows a gear. Click on Gear > Tab Display Style > Labels. Each of the pages of the Property Inspector are now identified with text instead of icons. This will make it easier in this article to refer to the proper page of the Property Inspector. If you want the icons back, then click on the Gear > Tab Display Style > Icons.
On the Basic page of the Property Inspector is the Name field. Notice that the stack’s default name is “Untitled.” Now type in the name as Add Game. Then hit the Tab key, which will make the Main Stack the same as the name. Also type in the Title the same name. If Title is left blank, the name shown on the window will have an asterisk.
Going forward in this article, we will talk about opening the Property Inspector for each object, implying that it had been closed. But you can keep the Property Inspector open all the time, if you wish, and just click on each object you want to observe in the Property Inspector.
To get the Property Inspector to open for any particular object, right click on that object and go down the menu to click on Property Inspector. Now open the Property Inspector for the first card of the stack. On the Basic page is the Name field. Notice that the default name for a card is its ID number. Now type in the name of the card as Start.
To name the program and save it, click on menu File > Save As. Notice that the default name is the same as the name of the stack. We will use this default name. Check that the program will be saved where you want, then click on the Save button.
Add a card and objects to the cards[]
Make sure LiveCode is in Edit Mode. Now add a second card to the stack by clicking on menu Object > New Card. The second card now opens. Open the Property Inspector for this new card by right clicking on it and going down the menu to click on Property Inspector. Notice that the card ID number is the default name. Now type in the name as Game.
Now we are going to add a button to the Game card. On the Tools Palette to the left, find the standard button on the eighth row, left side. Drag it across to the Game card. The stack will turn green while you are dragging. On the Basic page of the Property Inspector, name the button as FindScore and type in the Label as Score. A Label is what is written on the object and the Name is what it is called in LiveCode programming.
Now we are going to add a field to the Game card. In the Tools Palette to the left, find the field on the tenth row in the middle. Drag it across to the Game card. Then right click on that field and open the Property Inspector. Now type in the name of the field as Number1. Select the property Lock Text and unselect the property Focus with Keyboard.
Now drag a second field to the Game card. Do the same things with that field, only name it as Number2. Then drag a third field to the Game card. Name it as Answer1, but don’t change any of the other properties.
Now we are going to add a Label to the second card. In the Tools Palette, find the Label on the tenth row, left side. Drag the label across to the Game card. Right click on the label and open the Property Inspector. Now type in the name of the label as Plus. Click on the Contents page of the Property Inspector and type in a plus symbol. Now drag another Label to the second card and name it Equal. Then type in the Contents the equal symbol.
Switch back to the first card of the stack by clicking on the menu View > Go First. The Start card now shows. Add a button from the Tools Palette by dragging it onto the Start card. Open the Property Inspector for this button and type in the name as Begin Game. Type in the Label as Begin.
Position and Size adjustments for final layout[]
Now you will change the sizes for the different objects. For the window (the stack and cards), grab any edge and drag to a new size. For the fields, labels and buttons, click on the object. Then grab any of the eight handles and drag to a new size. You can also set the size of any object more exactly by using the Property Inspector.
Open the Property Inspector for the window, then look on the Position page. The Width is the size of the horizontal in pixels and the Height is the size of the vertical in pixels. You can type your own numbers into the Width or the Height and LiveCode will make the object that size. Now change the size of the window to 600 by 400 landscape. Now change the size of the Game button to 200 by 100 landscape.
You can change the position of any object by clicking on the object and dragging it to a new position. You can check the exact position of an object by opening the Property Inspector. Then look on the Position page. The Position is the location of the center of the object. The first number is the horizontal center and the second number is the vertical center. You can type your own numbers in and LiveCode will position the object exactly. Now change the position of the window to about the center on your monitor. Now change the position of the Game button to the lower part of the window, centered horizontal.
Put the fields and labels in a line on the window as follows: Number1, Plus, Number2, Equals and Answer1. Now select all of the objects in that line. We are going to open the Property Inspector for those objects as a group. Hold down the shift key and open the Property Inspector. Then look on the Position page, type 100 into the horizontal and 100 in the vertical. All those objects should be about an inch square. Then look on the Text page of the Property Inspector. Type 40 into Text size, click on B (for Bold) in Text style and click on the middle icon for Text aline.
Now look on the Aline Objects page. This page only exists when more than one object is selected. Under Aline, click on the top icon. All those objects will be alined across the top. Under Distributed, click on the horizontal icon. All those objects will be evenly distributed between the first and last object. Then using your mouse, position the selected line of objects to the upper part of the window, centered horizontal.
Now switch to the first page by clicking on View > First page. Then change the size of the Begin button to about 200 by 100 landscape, then change its position to the lower part of the window, centered horizontal.
Color adjustments for final layout[]
You can change color of any object by using the Property Inspector. Now open the Property Inspector for the Start card. Go to the Colors page. Here is where you can set the color for various aspects of the object. Click on the Background fill box. Another window opens, called Colors, which will let you select a color. You can use any of color selection tools across the top. When you have selected the right color, click on the OK button. The Background fill box will become that color as well as the window.
You can set the color of any object by using the Property Inspector to set the background color for that object. Now set the background colors for both cards and all the objects on those cards. When you have the user interface looking like you want, save the program by clicking on menu File > Save.