Starting up LiveCode
It seems obvious but the first step is to start up LiveCode. When you start LiveCode you will see the menu bar and toolbar at the top of the screen(1). The menu bar and toolbar give you access to all the things you would expect, new files, saving, script editors etc as well as useful resources including Rev Online and the dictionary. We'll go into all the options in more detail as we need them.
The Tools Palette (2) allows you to add controls to your application and switch between "edit" and "run" modes. Again we'll go into these in more detail later.
Stacks and cards
Applications in LiveCode are known as stacks and the separate screens which make these up are called cards. A stack can contain any number of cards and may also contain substacks. The substacks will generally provide specialist actions or implement specific parts of your application.
Your first stack
First things first, we need a stack so we can start building our application. Just go to the File menu (1) and select New Stack/Default Size (2). We now have a stack (3) containing a single card.
Run and Edit mode
You can use the Tools Palette to switch between Run(1) and Edit(2) modes while you are working. When in Edit mode objects can be placed on the cards, resized and edited. When in Run mode no editing can take place but buttons etc can be clicked and results observed.
Adding controls to the stack
To add controls to the stack you simply drag the type of control you want over from the Tools Palette and place it on your card wherever you want it. Lets add a basic field and button to our card. Just select the field(1) on the Tools Palette and drag it to your card, then do the same with the button(2).
Object properties
Now that we have a (very simple) interface set up what can we do with it? Every object in LiveCode has associated properties which specify how it looks and behaves. These can be altered when LiveCode is in Edit mode(1) and the easiest way to do this is using the Property Inspector (2). This can be opened by selecting the object(3) and clicking the inspector button on the menu bar(4). Alternatively you can open the Property Inspector by right clicking the object and selecting Property Inspector from the resulting menu or, alternatively, by double clicking the object itself.
The Property Inspector
The Property Inspector displays all of the object's properties, from its name and title to its display settings. You can use the property inspector to change the properties of an object. The best way to find out what a property does is to try changing it and see what happens. Hovering over an option in the Property Inspector will tell you the property name(1) which you can look up in the Dictionary if you want to find out more.
Here I have renamed the button to be called "Say Hello" (2).
Adding scripts to controls
If we want our application to do anything we need to start adding some LiveCode. Once an object has been created and assigned properties its behaviour can be specified by giving it a script.
Within LiveCode all scripts are written in the script editor(1) The easiest way to view this is to select the object you want to edit(2) and then click the code button on the menubar(3). Alternatively the object can be right-clicked and the Edit Script option can be chosen from the menu which appears.
Adding scripts to controls(2)
Scripts in LiveCode send and handle messages which control action. Some messages, such as mouseUp, are sent automatically by the system while other, user messages, are sent by making what is equivalent to a method call. The messages an object sends and how it handles them specify how it reacts to events and generally behaves.
In this case we want something to happen when the button is clicked. The mouseUp message is sent automatically when the mouse button is clicked and released so we add the script for whatever action we want to take to the mouseUp handler. Here we want to say hello so our script is
on mouseUp
put "Hello World" into field 1
end mouseUp
Testing our script
To test our script and see what happens we need to switch to Run mode(1) and click on the button(2) ... and Hello World appears in the field.
Messages and the Message Path
When a message is sent to an object, it is often handled directly by a message handler in that object. However if no handler is present, the message will continue along a path until it finds a message handler that can respond to it. This makes it possible to group similar functionality together at different levels within your application. This behavior applies both to event messages sent as a result of a user action, and custom messages sent by script. It is therefore possible to write libraries of common functions.
The object hierarchy is closely related to the path that a message travels on. In most cases, when an object passes a message on, the message goes to the object's owner in the object hierarchy.
For a more detailed explanation of the Message Path see the lesson How to call a function or command in another object?
