Time for action – it's a drag, but you'll like it!
You build things in LiveCode by dragging icons from the Tools palette to the stack window. If the palettes are not already open, the Inspector palette can be opened by clicking on the icon at the left end of the toolbar or by selecting one of the inspector menu items in the Object menu. The Tools palette can be opened by selecting the Tools Palette from the Tools menu and by using the following steps
- From the File menu, select New Mainstack.
- In the Tools palette, click on the Edit tool (the top-right icon).
To select edit or not…
In LiveCode, you can drag controls from the Tools palette to the card window without selecting the Edit tool. However, you are not able to select the control to adjust its position or size, and so, in the following instructions, we are intentionally selecting the Edit tool before adding controls to the card window:
- Drag icons from the upper section of the Tools palette to the stack window.
- Try the layering options at the bottom of the Object menu.
- Select more than one item and experiment with the Align Objects options in the Inspector palette. The align options are shown automatically when you select multiple objects, but you can also select Align Objects from the drop-down menu in the Inspector palette. You won't see this option if only one object is selected. Here, we are able to see the options because three buttons are selected:
- Select a single button and in the Inspector palette, enter a name and a label. If you don't see the Name and Label fields, make sure you have selected Basic Properties from the Inspector pallete's drop-down menu.
- Add several more controls to the card window and practice aligning and naming the controls. You can also resize them by dragging the handles that you see on the corners and sides while the control is selected. Here is how the window would look if you add some buttons, a field, tab panel, slider, and video player control:
What just happened?
Hopefully, you will have made a random bunch of interface controls, perhaps some that are nicely lined up too! Now, select the Close and Remove From Memory option from the File menu and create a new Main Stack to make the Simple Calculator interface.
First though, we should go over some of the structure and hierarchy of a LiveCode stack and create some basic navigation.
Creating a hierarchy
Everything goes somewhere, but having things in the wrong place can lead to problems. We should learn more about the structure of a LiveCode stack to avoid this.
The stack structure
As described in the Background history and metaphors section, LiveCode uses a stack of cards metaphor. When you make a new stack, you in effect have a single stack of cards. However, even the simplest application is likely to have more than one card. For example, there could be a splash screen, title card, cards for the actual task at hand, and a credits page. In the calculator stack, we will use two cards. The Tools menu includes an option to view the structure of the stack by showing Project Browser or Application Browser. The Project Browser was introduced in the version 6.0 of LiveCode with additional capabilities
The Project Browser panel is a powerful tool that lets you see all the stacks, cards, and controls that are open at the moment, in one window. In addition to getting an overview of everything, you can use it as a remote control to jump between all the parts of your stack and to select and modify buttons, fields, and so on.
Taking the calculator stack that we are about to make as an example, in the following screenshot, we see a side-by-side view of the stack window and the Project Browser panel, where in the Project Browser panel, we have selected one of the buttons in the stack:
The upper area of Project Browser includes a field where you can type and search text to reduce the list of items in the browser to match the ones you have typed. In the upper-left part of the panel, is a gear icon that is used to take you to the preferences of the browser:
Most of the rest of the browser window lets you expand stacks and cards, and choose individual controls on those cards. Clicking on a control in Project Browser highlights it in the stack window and vice versa. Controls can also be reordered to change layers by dragging them up and down. Controls can also be hidden or locked by clicking on the eye and lock icons. The lower area buttons let you do various alignments of the selected controls to add or duplicate the selected control. Hovering over a button shows a popup of what it does.
A longer overview of how Project Browser works is available at:
http://www.runrev.com/newsletter/april/issue151/newsletter4.php.
Where does the code go?
In programming languages, such as the one in LiveCode, code is referred to as scripts and methods or functions are known as handlers (though in LiveCode, a handler that returns a value is also called a function). Projects made with hard-to-use programming tools often comprise dozens of external text files, one for each model, view, or controller. In LiveCode, this is simpler, as the scripts are attached to the object that needs that code.
To deal with user interaction in other tools, you will have to write code that receives the event (perhaps just a mouse click on a button) to perform the relevant action. In LiveCode, there is a message path that takes care of these events, and passes the event up the hierarchy. If you click on a LiveCode interface control that doesn't have a mouse event handler, the click goes up the hierarchy to the card level. If the card doesn't have a handler for that event, it continues up to the stack level.
You can have additional levels of hierarchy by putting other stacks in use, but for our purpose, we just need these three: the button, card, and stack.
This message hierarchy allows us to place the code needed via several interface controls at a higher level available to all of these controls. One case with the calculator number buttons is that each one needs to do exactly the same thing, and by putting that code in the card level, all of them can make use of that one handler.
There isn't a performance advantage if you have the shared handler in the card level or much of a file size improvement, but as you develop the code for the simple calculator example, you can make changes in the single-card script instead of the 11 calculator button scripts.
We will now start building the calculator and add scripts to the 14 buttons, a field, and the card.