The Structure of a LiveCode Application

Before you start developing with LiveCode is it important to understand how LiveCode applications are structured and how they behave.

Creating a simple application in LiveCode can take just minutes. First you create a stack (or window), then you populate the stack with controls, like push buttons, check boxes, text fields or menus. Finally, you use LiveCode’s English-like programming language to tell your application how to behave.

Event Driven Programming

A LiveCode application is driven by user actions. LiveCode constantly watches the computer for common actions, such as clicking on a button, typing into a field, sending data across a network or quitting an application.

Whenever an event occurs, LiveCode sends a message. When writing your program, you decide what messages you want your program to respond to. LiveCode automatically sends each message to the most relevant object. For example, if a user clicks on a button, LiveCode sends a message to the button. You place code within the button that tells it how to respond to being clicked on.

There are a wide range of possible events. When a user clicks on a button, a series of events are sent to the button. For example, when the mouse first moves within the border of the button a mouseEnter message is sent. Then a series of mouseMove messages are sent as the mouse moves over the button. When the mouse button is depressed a mouseDown message is sent. When the mouse is released a mouseUp message is sent.

You don’t have to respond to all of these events. You simply place code within an object to handle the events you want your application to respond to.

Object Based Programming

Any application you build using LiveCode is based on objects. With LiveCode you typically create the objects of your application before writing any code. You can start by drawing the buttons, text fields, and other controls that make up your application. LiveCode operates like other layout, drawing or application development environment. You can select controls by clicking them, move them by dragging them around, resize them, and change their ‘layer’ to move them closer or further from the ‘top’ of the interface.

Once you have the objects in place, you can proceed to attach code to each object to respond to the events you want. LiveCode includes a complete graphical development environment that makes it easy to create and edit any kind of user interface. It includes objects for all the basic operating system elements, including buttons, checkboxes, text fields, menus, graphics and many more.

In addition you can create and customize your own objects that look and behave however you want.

The Edit and Run Mode

The Edit and Run Mode

Unlike most other development systems, a LiveCode application can be created, edited, debugged and run live.

When in Run mode, objects receive all the normal messages that drive a LiveCode application. For example, clicking on a button in run mode causes a mouseUp message to be sent to it,  the button's script is run if you've designed it to respond to the mouseUp message.

When in Edit mode, objects do not receive messages when you click on them, and you can move, resize or edit the properties for objects.

You can switch between Edit(1) and Run(2) mode in the Tools Palette.

Stacks and Cards

Stacks and Cards

The first step in creating a LiveCode application is creating a window, which in LiveCode is called a stack. Each window you see in LiveCode is a stack. Palettes, dialog boxes, and standard windows are all stacks.

Each stack contains one or more sets of information called cards. Each card can have a different appearance or all the cards in a stack can look the same. By going from card to card in a stack, you change what's being displayed in that stack's window. You can think of a LiveCode stack as a stack of playing cards (hence the name), where you can flip through the cards, but only one card at a time is visible. A stack can have a single card or many cards.

All user interface objects (controls) are created by dragging them on to a card area.

A collection of stacks can be saved together in a single file. This file is known as a stack file. The first stack in the file is called the main stack and will be loaded automatically when your application runs.

Creating a Stack

Creating a Stack

You create a new stack by selected New Stack from the File menu, you are then shown a submenu allowing you to choose the size of the new stack.

Adding Cards to a Stack

Adding Cards to a Stack

You add cards to a stack by selecting New Card from the Object menu.

Adding Objects to a Card

Adding Objects to a Card

You add objects/controls to a card by dragging them from the Tools Palette onto your card.



"You can switch between Edit(1) and Run(2) mode in the Tools Palette." is wrong - or the graphic is wrong (1 is run, 2 is edit)

Add your comment

E-Mail me when someone replies to this comment