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.

5 Comments

Ian Stewart

Hi

I have some code in the handler

"on preOpenCard"

of my main stack

that reads as follows:

if there is a field "Label Field X" then
set the visible of field "Label Field X" to true
put "GOT IT!" into field "Label Field X"
end if

Now, on all my cards, I have a field object called

"Label Field X".

However when I run the program, the field is visible and displays 'GOT IT!" on some cards, but not on other cards.

Why is this not affecting all cards? Might I be missing a setting or property of some of the cards?

Thank you
Ian

Hanson Schmidt-Cornelius

Hi Ian,

you should create a single field in a group and share that group between the cards on which you would like to see the group. That way you only have to update the field once and LiveCode ensures that the information is displayed on the cards on which you would like to see it. Have a look at the following lesson: http://lessons.runrev.com/s/lessons/m/4071/l/13031

Kind Regards,

Hanson

Hi

When I start a new project I save the stack straight away. Then I open a new substack so that I can start importing my images etc to keep on the substack as I work my way through the cards and transfer them across to the buttons and backgrounds in the cards on the mainstack. However, when I close my project and reopen it, all of the images are gone from the main stack! even though I save the changes. The buttons and objects are still there, but the pictures that I used as their icons which I brought in from the substack are no longer there!

I have since started storing all of the images on a separate card within the main stack to avoid losing them once I close the project but sometimes I can end up with lots of cards within my main stack that are simply being used to 'store' my images. Is there a way around this without having to import them from external files?

Thanks in advance.

Tariq

Hanson Schmidt-Cornelius

Hi Tariq,

the reason you are not seeing your images is possibly because you are only referring to them by the file path and this may change as you move your application around.

If you would like to refer to the files and import them once LiveCode is running, then you can do this by creating image areas and setting the path to the file name of the appropriate image you want to use. You could also create a list of images somewhere in a resource file or in the stack that is processed in the preOpenStack handler, allowing the images to be imported then.
It really depends on how you would like your application to behave.

I have included references to some more lessons on related topics that may help you with your question:
http://lessons.runrev.com/s/lessons/m/4071/l/12298
http://lessons.runrev.com/s/lessons/m/4603/l/44144
http://lessons.runrev.com/s/lessons/m/4603/l/44140

Kind Regards,

Hanson

Per

"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