First Steps

simple graphical application in LiveCode can take just minutes. First you create a user interface, including any windows, palettes, di


Installation

Go to downloads.livecode.com. Do not be put off by the cluttered screen. LiveCode is "Open Source" software which means that the source code is available to everyone and anyone is welcome to fix bugs, add new enhancements and make changes. So you can see that many projects are underway. 

We will be using the free versions, so only download the "Community" version - either 6.7.11 or the latest 9.0.0

Generally, I recommend that you only download "STABLE" versions. For our purposes, download Version 8.1.2 - STABLE version for your computer system (PC, Mac, Unix).  For my classes, I use version 6.7.11 STABLE.  It produces the smallest programs, works on all versions of Android and iPhone and is fine for our purposes. Gradually we switch to the latest version (9.0.0) because it has add widgets, fixed more bugs and has many other new features. The downside is that it produces larger programs (which may not be a disadvantage to you) and may have new bugs (which you may not run into)

Download and install the version of choice (You can have more than one version installed on your computer. On our school computers, I have the latest of each level installed - 6, 7, 8 and sometimes 9.

Instructions
  1. Download the "Community Version" - either Version 8.1.2 - STABLE or Version 6.7.11 - STABLE
  2. It will be downloaded to your "Downloads" folder. Double-click on it to start the installation process
  3. Skip the step to enter your name and email address
  4. If it asks to associate the extension "livecode" with the program - click "never ask again" and click "Yes"

How LiveCode Works

Creating a simple graphical application in LiveCode can take just minutes. First you create a user interface, including any windows, palettes, dialogs you require. Then you populate the user interface 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.

Stacks, cards and objects

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

Each stack contains one or more cards (screens). 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.

Object and Event Driven Programming

Any graphical application you build using LiveCode will be 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 objects for all the basic operating system elements, including buttons, checkboxes, text fields, menus, graphics, and many more. In addition there are native mobile controls and you can create and customize your own objects that look and behave however you want.

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.

When an event occurs, LiveCode sends a message to the most appropriate object. When writing your program, you decide what messages you want your program to respond to. For example, if a user clicks on a button, LiveCode sends a message to the button. You add code to 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 and 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.

Messages and the Message Path

Each LiveCode object is part of another object, of a different object type. For example, each object is part of a card, each card is part of a stack etc. This object hierarchy defines the ownership and inheritance relationship between objects.

If a message is not handled by the object it is initially sent to, meaning you have chosen not to respond to that message, it is passed on to the owner of the initial object. In LiveCode the order in which objects have the opportunity to respond to a message is called the Message Path and is based on the object hierarchy. This makes it possible to group similar functionality together at different levels within your application.

LiveCode Environment

When you start LiveCode you will see a collection of components, these components make up the Integrated Development Environment, or IDE. This is where you will create your application.

The Start Center

The Start Center introduces you to LiveCode, lets you know what is happening on the RunRev blog, what other users are discussing on the forums and Stack Overflow and provides easy access to your recent stacks.


  1. List of Recent Stacks
  2. Introductory Video
  3. Forums, blog and Stack Overflow feeds

The Menubar

The Menubar provides access to most common functions and features.

As you would expect the File menu allow you to create stacks, save stacks, open files etc. The Edit menu allows you to select, copy and paste objects. The Tools menu provides access to the components being discussed in this section and the other menus provide additional features and help.

As well as the menus the Menubar allows you to open the Property Inspector or Code Editor for the current object, work with grouped controls in various modes, control messages and error reporting and provides access to documentation and support resources.

The Tools Palette

The Tools Palette allows you to switch between Edit mode, for adding objects, making changes, coding, and Run mode, for interacting with your application.

Run and Edit Mode

Run mode: When in run mode, objects receive all the normal messages that drive a LiveCode application. For example, clicking on a button in run mode will cause a mouseUp message to be sent to it and the script will run.

Edit mode: 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.

Controls

Drag objects such as buttons, fields, scrollbars and graphics from the Tools Palette onto your stack.

Once you have added objects to your stack, choose Edit mode to move, resize and change the properties of objects.

The Project Browser

The Project Browser provides an overview of your stacks in tree form, showing you all the open stacks, cards and controls that make up your application.

The Project Browser also allows you to access some of the basic properties of objects as well as editing code, adding and deleting objects and aligning controls.

The Property Inspector

The Property Inspector allows you to view and edit the properties for any selected object. Properties control how an object looks and some aspects of an object’s behavior.

The Inspector can be accessed by double clicking on a selected object, from the toolbar, from the Object menu and from context sensitive menus.

The Code Editor

The Code Editor includes features to help make code more understandable. These include code indentation and color coded syntax highlighting, as well as other integrated tools such as a Debugger and Dictionary. You can access the Code Editor for an object by selecting the object then choosing Script from the Tool bar. The Code Editor is also available from the Object menu, and from the context menu of objects.

The Message Box

The Message Box is a command line tool that allows you to run scripts or perform automated editing operations. It allows you to try out short scripts, test parts of your program, provides a convenient output window for debugging, show the values of Global Properties and Global Variables and can be used for editing and setting properties.

The Dictionary

The Dictionary contains the complete LiveCode syntax. This can be searched using the quick search box in the top right of the dictionary or filtered using the list of topics on the left.

A dictionary entry for LiveCode keyword gives you the syntax, some examples, a description and the supported platforms and operating systems.

Resources and Support

There is a wealth of support available when you are getting started with LiveCode.

Guides

There are a variety of Guides to various aspects of LiveCode available at
Beginners
Developers
iOS Externals
LiveCode Server

Tutorials

A wide range of step-by-step tutorials are available here.

Forums

You can join our Forums where you can discuss your LiveCode projects with other developers and get assistance from more experienced LiveCode users.

Getting Started

It is very simple to create an application in LiveCode, by dragging objects onto your stack from the Tools Palette and adding code for the messages you want to respond to you can create a simple application in minutes.

This section will cover the basic controls and the most common messages associated with them.

Basic Controls

Stacks

When creating a LiveCode application the first step is to create a new mainstack, you do this by selecting New Mainstack from the File menu.

A new stack is created with 1 card.

Common messages associated with stacks are

preOpenStack: Sent to the destination card when you open a stack. Any preOpenStack handlers are executed before the stack window appears. Because of this, the preOpenStack handler is a good place to put code that adjusts the size, position, and appearance of objects; the changes are made before the stack appears.

openStack: Sent to the destination card right after you open a stack. Handle the openStack message to change a stack’s objects, or perform other updates, when the stack is opened. The openStack message is sent after the stack is visible.

closeStack: Sent to the current card when the stack closes. A stack is closed when the user or a handler closes the stack window. Handle the closeStack message if you want to perform cleanup or do other tasks when the user closes a window.

Cards

A stack consists of one or more cards, each card can have a different appearance and moving between cards changes how the application looks.

Common messages and command associated with cards are

preOpenCard: Sent to a card when you go to the card. Handle the preOpenCard message to update a card’s appearance before the card appears on screen.

OpenCard: Sent to a card right after you go to the card. Handle the openCard message to change a card’s objects, or perform other updates, when the card is visited.

CloseCard: Sent to the current card when the user goes to another card. Handle the closeCard message if you want to perform cleanup or do other tasks when the user leaves a card.

Buttons

There are 6 types of button in the Tools Palette. All these buttons are fundamentally the same but have different default property sets.

Common messages associated with buttons

mouseUp: Sent when the user releases the mouse button. Handle the mouseUp message to perform an action when the user releases the mouse button after clicking.

Fields

There are 5 types of field in the Tools Palette. All these fields are fundamentally the same but have different default property sets.

Common messages associated with fields

openField: Sent to an unlocked field when you click or select text in that field. Handle the openField message if you want to do something when the user enters a field.

closeField: Sent to a field when the focus is being removed from that field and the field’s content has changed. Handle the closeField message if you want to make sure a field’s content is correct after it has been changed.

textChanged: Sent when the content of a field has changed. Handle the textChanged message if you want to perform an action when the content of a field changes.

The DataGrid also appears in this section of the Tools Palette. The DataGrid object allows you to use complex tables and forms into your application.

Menus

There are 4 types of menu in the Tools Palette, menus are buttons with certain properties set that make them behave as menus.

Common messages associated with menus

menuPick: Sent to a button when a menu item is chosen from the menu associated with that button. Handle the menuPick message to do something when the user chooses a menu item from a button menu, or chooses a tab in a tabbed button.

Scrollbars

There are 4 types of scrollbar in the Tools Palette, all these scrollabars are fundamentally the same but have different default property sets.

Common messages associated with scrollbars

scrollbarDrag Sent to a field, scrollbar, or group when the user drags the scrollbar thumb or when a text selection causes a field to scroll. Handle the scrollbarDrag message if you want to respond to the user dragging the scrollbar thumb.

Images

An image object is a control that contains a bitmapped picture. Use the image object type to hold photographs, icons, and decorative elements, and to allow the user to paint.

You can set the filename property of an image to display an image stored in a separate file.

Players

A player object is a control that displays a movie or sound file. Set the filename property of a player to display a movie or sound from a separate file.

Common messages associated with players

playStarted: Sent to a player when it starts playing. Handle the playStarted message if you want to perform a task when a movie or sound starts playing.

playPaused: Sent to a player when the user pauses it. Handle the playPaused message if you want to perform an update when a player is paused.

playStopped: Sent to a player when it stops playing. Handle the playStopped message if you want to perform a task when a movie or sound finishes playing.

Graphics

The Tools Palette allows you to choose from a selection of shapes when creating a new graphic.

Use the fill bucket to choose the fill color, the fill pencil to choose the line color, the line thickness menu to choose the line thickness, and the optional shape menu to choose preferences specific to the type of graphic selected.

Groups

You can create a group by selecting multiple controls and clicking the Group button in the Menubar.

Once you’ve created the group, it becomes an object in its own right. You can select, copy, move, and resize the group, and all the objects in the group come with it. The objects in the group maintain their own identities, and you can add objects to the group or delete them, but the objects are owned by the group instead of the card.

A group has its own properties and its own script. Groups can be any size, can be shown or hidden, and can be moved to any location in the stack window, just like any other control. Like other controls, groups can be layered in any order with the other controls on the card. Groups can also display a border around a set of objects.

Importing controls

You can also import images into your stack. These become image objects and are part of the stack file. This means that you do not need to include external image files when distributing your application.
To import an image choose Import as Control from the File menu. You can also import Audio and Video files.

Hello World Example

In this section we will create a simple stack consisting of a single button that will display a message to the user. We will use the answer command to display the message. The answer command displays a dialog box with a message and up to seven buttons.

Choose New Mainstack from the File menu. This will create a new stack for you to work with.

Ensure you have Edit mode selected in the Tools Palette.

Drag a button onto your stack.

Open the Property Inspector for the button by selecting the button and clicking the Inspector button in the Menubar. Change the name of the button to “Hello”.

Now open the Code Editor by clicking the Code button in the Menubar. As this is a button the Code Editor is pre-populated with an empty on mouseUp handler.

Add the following code to the button

on mouseUp
   answer "Hello World!"
end mouseUp

Click the Apply button, the indicator will change from yellow to green showing there are no errors in the code.

Switch to Run mode, allowing you to interact with the application, and click the button. You will see a dialog box appear displaying the Hello World message.

Stacks with Multiple Cards

Your stacks will often consist of more than one card, multiple cards allow you to display different information on screen and give your user access to different options.

Creating new cards

To add additional cards to your stack select New Card from the Object menu. This will create a new card and go to it.

Add a button to this card and name it “Back”.

Moving between cards

To move between cards use the Go command. The Go command navigates between cards. The target card can be identified by name, number or position

go to card "edit"

 

go to card 1

 

go to the first card

Open the script editor for the button and add the following code

on mouseUp
   go to card 1
end mouseUp

Apply the code and switch to Run mode.

Click the Back button, this will navigate to the first card.

Building a Standalone

When you have finished your LiveCode application and what to distribute it you can build it into a standalone application. LiveCode stacks can be build for Windows, Mac OS, Linux, iOS and Android.

To build a standalone open the Standalone Application Settings from the File Menu. This is where you select the platforms you want to build for and set up the properties of the standalones.

General Pane

This is where you set the basic properties of the standalone, including the name and any additional libraries that your application requires.

Stacks Pane

You can include additional stacks as resources to your main stack. You add the stacks you want to include in this pane.

Copy Files

Your application may require additional resources such as sound and video files and databases. Use this pane to add any external resources that are to be included in the standalone.

Mac, Windows, Linux, iOS, Android Panes

These panes allow you to set up platform specific properties for the platforms you choose to build for.

Select the platforms you want to build for and tick the checkboxes on the relevant panes.

Once the platforms are selected choose Save As Standalone Application from the File menu and select the folder where the Standlone Application Settings will be saved.

On iOS and Android you can also test your app directly. Once you have installed all the requirements and set up the simulators and devices you can choose the target device or simulator from the Test Target list in the Development menu and then click Test in the Menubar.

On Android you can test this way on any running emulator or connected device, on iOS you can use this method to test on the simulator but to test on a device you need to build a standalone as described above and use XCode to install it.

How LiveCode Works

Creating a simple graphical application in LiveCode can take just minutes. First you create a user interface, including any windows, palettes, dialogs you require. Then you populate the user interface 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.

Stacks, cards and objects

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.

Object and Event Driven Programming

Any graphical application you build using LiveCode will be 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 objects for all the basic operating system elements, including buttons, checkboxes, text fields, menus, graphics, and many more. In addition there are native mobile controls and you can create and customize your own objects that look and behave however you want.

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.

When an event occurs, LiveCode sends a message to the most appropriate object. When writing your program, you decide what messages you want your program to respond to. For example, if a user clicks on a button, LiveCode sends a message to the button. You add code to 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 and 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.

Messages and the Message Path

Each LiveCode object is part of another object, of a different object type. For example, each object is part of a card, each card is part of a stack etc. This object hierarchy defines the ownership and inheritance relationship between objects.

If a message is not handled by the object it is initially sent to, meaning you have chosen not to respond to that message, it is passed on to the owner of the initial object. In LiveCode the order in which objects have the opportunity to respond to a message is called the Message Path and is based on the object hierarchy. This makes it possible to group similar functionality together at different levels within your application.

LiveCode Environment

When you start LiveCode you will see a collection of components, these components make up the Integrated Development Environment, or IDE. This is where you will create your application.

The Start Center

The Start Center introduces you to LiveCode, lets you know what is happening on the RunRev blog, what other users are discussing on the forums and Stack Overflow and provides easy access to your recent stacks.


  1. List of Recent Stacks
  2. Introductory Video
  3. Forums, blog and Stack Overflow feeds

The Menubar

The Menubar provides access to most common functions and features.

As you would expect the File menu allow you to create stacks, save stacks, open files etc. The Edit menu allows you to select, copy and paste objects. The Tools menu provides access to the components being discussed in this section and the other menus provide additional features and help.

As well as the menus the Menubar allows you to open the Property Inspector or Code Editor for the current object, work with grouped controls in various modes, control messages and error reporting and provides access to documentation and support resources.

The Tools Palette

The Tools Palette allows you to switch between Edit mode, for adding objects, making changes, coding, and Run mode, for interacting with your application.

Run and Edit Mode

Run mode: When in run mode, objects receive all the normal messages that drive a LiveCode application. For example, clicking on a button in run mode will cause a mouseUp message to be sent to it and the script will run.

Edit mode: 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.

Controls

Drag objects such as buttons, fields, scrollbars and graphics from the Tools Palette onto your stack.

Once you have added objects to your stack, choose Edit mode to move, resize and change the properties of objects.

The Project Browser

The Project Browser provides an overview of your stacks in tree form, showing you all the open stacks, cards and controls that make up your application.

The Project Browser also allows you to access some of the basic properties of objects as well as editing code, adding and deleting objects and aligning controls.

The Property Inspector

The Property Inspector allows you to view and edit the properties for any selected object. Properties control how an object looks and some aspects of an object’s behavior.

The Inspector can be accessed by double clicking on a selected object, from the toolbar, from the Object menu and from context sensitive menus.

The Code Editor

The Code Editor includes features to help make code more understandable. These include code indentation and color coded syntax highlighting, as well as other integrated tools such as a Debugger and Dictionary. You can access the Code Editor for an object by selecting the object then choosing Script from the Tool bar. The Code Editor is also available from the Object menu, and from the context menu of objects.

The Message Box

The Message Box is a command line tool that allows you to run scripts or perform automated editing operations. It allows you to try out short scripts, test parts of your program, provides a convenient output window for debugging, show the values of Global Properties and Global Variables and can be used for editing and setting properties.

The Dictionary

The Dictionary contains the complete LiveCode syntax. This can be searched using the quick search box in the top right of the dictionary or filtered using the list of topics on the left.

A dictionary entry for LiveCode keyword gives you the syntax, some examples, a description and the supported platforms and operating systems.

Resources and Support

There is a wealth of support available when you are getting started with LiveCode.

Guides

There are a variety of Guides to various aspects of LiveCode available at
Beginners
Developers
iOS Externals
LiveCode Server

Tutorials

A wide range of step-by-step tutorials are available here.

Forums

You can join our Forums where you can discuss your LiveCode projects with other developers and get assistance from more experienced LiveCode users.

Getting Started

It is very simple to create an application in LiveCode, by dragging objects onto your stack from the Tools Palette and adding code for the messages you want to respond to you can create a simple application in minutes.

This section will cover the basic controls and the most common messages associated with them.

Basic Controls

Stacks

When creating a LiveCode application the first step is to create a new mainstack, you do this by selecting New Mainstack from the File menu.

A new stack is created with 1 card.

Common messages associated with stacks are

preOpenStack: Sent to the destination card when you open a stack. Any preOpenStack handlers are executed before the stack window appears. Because of this, the preOpenStack handler is a good place to put code that adjusts the size, position, and appearance of objects; the changes are made before the stack appears.

openStack: Sent to the destination card right after you open a stack. Handle the openStack message to change a stack’s objects, or perform other updates, when the stack is opened. The openStack message is sent after the stack is visible.

closeStack: Sent to the current card when the stack closes. A stack is closed when the user or a handler closes the stack window. Handle the closeStack message if you want to perform cleanup or do other tasks when the user closes a window.

Cards

A stack consists of one or more cards, each card can have a different appearance and moving between cards changes how the application looks.

Common messages and command associated with cards are

preOpenCard: Sent to a card when you go to the card. Handle the preOpenCard message to update a card’s appearance before the card appears on screen.

OpenCard: Sent to a card right after you go to the card. Handle the openCard message to change a card’s objects, or perform other updates, when the card is visited.

CloseCard: Sent to the current card when the user goes to another card. Handle the closeCard message if you want to perform cleanup or do other tasks when the user leaves a card.

Buttons

There are 6 types of button in the Tools Palette. All these buttons are fundamentally the same but have different default property sets.

Common messages associated with buttons

mouseUp: Sent when the user releases the mouse button. Handle the mouseUp message to perform an action when the user releases the mouse button after clicking.

Fields

There are 5 types of field in the Tools Palette. All these fields are fundamentally the same but have different default property sets.

Common messages associated with fields

openField: Sent to an unlocked field when you click or select text in that field. Handle the openField message if you want to do something when the user enters a field.

closeField: Sent to a field when the focus is being removed from that field and the field’s content has changed. Handle the closeField message if you want to make sure a field’s content is correct after it has been changed.

textChanged: Sent when the content of a field has changed. Handle the textChanged message if you want to perform an action when the content of a field changes.

The DataGrid also appears in this section of the Tools Palette. The DataGrid object allows you to use complex tables and forms into your application.

Menus

There are 4 types of menu in the Tools Palette, menus are buttons with certain properties set that make them behave as menus.

Common messages associated with menus

menuPick: Sent to a button when a menu item is chosen from the menu associated with that button. Handle the menuPick message to do something when the user chooses a menu item from a button menu, or chooses a tab in a tabbed button.

Scrollbars

There are 4 types of scrollbar in the Tools Palette, all these scrollabars are fundamentally the same but have different default property sets.

Common messages associated with scrollbars

scrollbarDrag Sent to a field, scrollbar, or group when the user drags the scrollbar thumb or when a text selection causes a field to scroll. Handle the scrollbarDrag message if you want to respond to the user dragging the scrollbar thumb.

Images

An image object is a control that contains a bitmapped picture. Use the image object type to hold photographs, icons, and decorative elements, and to allow the user to paint.

You can set the filename property of an image to display an image stored in a separate file.

Players

A player object is a control that displays a movie or sound file. Set the filename property of a player to display a movie or sound from a separate file.

Common messages associated with players

playStarted: Sent to a player when it starts playing. Handle the playStarted message if you want to perform a task when a movie or sound starts playing.

playPaused: Sent to a player when the user pauses it. Handle the playPaused message if you want to perform an update when a player is paused.

playStopped: Sent to a player when it stops playing. Handle the playStopped message if you want to perform a task when a movie or sound finishes playing.

Graphics

The Tools Palette allows you to choose from a selection of shapes when creating a new graphic.

Use the fill bucket to choose the fill color, the fill pencil to choose the line color, the line thickness menu to choose the line thickness, and the optional shape menu to choose preferences specific to the type of graphic selected.

Groups

You can create a group by selecting multiple controls and clicking the Group button in the Menubar.

Once you’ve created the group, it becomes an object in its own right. You can select, copy, move, and resize the group, and all the objects in the group come with it. The objects in the group maintain their own identities, and you can add objects to the group or delete them, but the objects are owned by the group instead of the card.

A group has its own properties and its own script. Groups can be any size, can be shown or hidden, and can be moved to any location in the stack window, just like any other control. Like other controls, groups can be layered in any order with the other controls on the card. Groups can also display a border around a set of objects.

Importing controls

You can also import images into your stack. These become image objects and are part of the stack file. This means that you do not need to include external image files when distributing your application.
To import an image choose Import as Control from the File menu. You can also import Audio and Video files.

Hello World Example

In this section we will create a simple stack consisting of a single button that will display a message to the user. We will use the answer command to display the message. The answer command displays a dialog box with a message and up to seven buttons.

Choose New Mainstack from the File menu. This will create a new stack for you to work with.

Ensure you have Edit mode selected in the Tools Palette.

Drag a button onto your stack.

Open the Property Inspector for the button by selecting the button and clicking the Inspector button in the Menubar. Change the name of the button to “Hello”.

Now open the Code Editor by clicking the Code button in the Menubar. As this is a button the Code Editor is pre-populated with an empty on mouseUp handler.

Add the following code to the button

on mouseUp
   answer "Hello World!"
end mouseUp

Click the Apply button, the indicator will change from yellow to green showing there are no errors in the code.

Switch to Run mode, allowing you to interact with the application, and click the button. You will see a dialog box appear displaying the Hello World message.

Stacks with Multiple Cards

Your stacks will often consist of more than one card, multiple cards allow you to display different information on screen and give your user access to different options.

Creating new cards

To add additional cards to your stack select New Card from the Object menu. This will create a new card and go to it.

Add a button to this card and name it “Back”.

Moving between cards

To move between cards use the Go command. The Go command navigates between cards. The target card can be identified by name, number or position

go to card "edit"

 

go to card 1

 

go to the first card

Open the script editor for the button and add the following code

on mouseUp
   go to card 1
end mouseUp

Apply the code and switch to Run mode.

Click the Back button, this will navigate to the first card.

Building a Standalone

When you have finished your LiveCode application and what to distribute it you can build it into a standalone application. LiveCode stacks can be build for Windows, Mac OS, Linux, iOS and Android.

To build a standalone open the Standalone Application Settings from the File Menu. This is where you select the platforms you want to build for and set up the properties of the standalones.

General Pane

This is where you set the basic properties of the standalone, including the name and any additional libraries that your application requires.

Stacks Pane

You can include additional stacks as resources to your main stack. You add the stacks you want to include in this pane.

Copy Files

Your application may require additional resources such as sound and video files and databases. Use this pane to add any external resources that are to be included in the standalone.

Mac, Windows, Linux, iOS, Android Panes

These panes allow you to set up platform specific properties for the platforms you choose to build for.

Select the platforms you want to build for and tick the checkboxes on the relevant panes.

Once the platforms are selected choose Save As Standalone Application from the File menu and select the folder where the Standlone Application Settings will be saved.

On iOS and Android you can also test your app directly. Once you have installed all the requirements and set up the simulators and devices you can choose the target device or simulator from the Test Target list in the Development menu and then click Test in the Menubar.

On Android you can test this way on any running emulator or connected device, on iOS you can use this method to test on the simulator but to test on a device you need to build a standalone as described above and use XCode to install it.

Comments