Create a project

Open up LiveCode, and start out by creating a new "mainstack" by choosing New Mainstack, from the File menu.

Add your interface Elements

To create an app you start by dragging out the objects you want from the Tools Palette, as shown in the screenshot.

Import an image

You can also import media. For example, to import a custom image in a button, go to File/Import as control, and choose the image you want to import.

The Property Inspector

In LiveCode, all objects have got properties, and you can set them in the Property Inspector. To bring this up, double click on the object you want to inspect. To see the Property inspector for the button we created earlier, double click button (1) and the Property Inspector appears (2). Name the button "Say Hello" by typing this into the Name field (3).

Open the Code Editor

To bring up a dialog that says "Hello World" we need to add code to the bottom. First select the button, then click on the the Code icon, on the Toolbar, to bring up the Code Editor.

Enter Some Code

The Code Editor already has a mouseUp (1) event handler available - this is an event that is activated when the mouse is pressed and released by the user (i.e. the mouse button goes up). To enter the code, type:

answer "Hello world"

between the "on mouseUp" and "end mouseUp" statements. Click the "Apply" button (3) in the top left corner.

Run Your Code

In LiveCode, everything is live. If you want to try out the Say Hello button and make sure it is working as expected, switch into run mode. To switch from editing mode to run mode, just click on the arrow icon at the top left of the tools palette. Press the Say Hello button, and you should see a dialog box that says "Hello World" as in the screenshot below.

Hello World

And that's it. You've created your first LiveCode Hello World project. Now we want to turn it into a true standalone executable app that can be deployed on multiple platforms.

Build a Standalone Application

First name your project "Hello World" in the Name field of the Property Inspector (1). Then go to the File Menu (2) and select Standalone Application Settings to bring up the Standalone Builder.

The Standalone Builder

By default, LiveCode has the Mac, Windows and Linux tabs of the Standalone Builder checked, so to build for these all I have to do is go to the File Menu and choose Save as Standalone to produce standalone applications for these platforms.

You will see that LiveCode builds apps for Mac, Windows and Linux, which you will find in folders labeled MacOSX, Windows and Linux, wherever you chose to save them (I chose the desktop).

Looking Native

LiveCode automatically applies a Windows look and feel to my Hello World application - even though I built it on a Mac. To acheive a native look and feel on iOS and Android is only a little more work. We will cover that in a future video.

Build for iOS

To build for iOS, go back into the standalone builder settings, and check "Build for iOS" on the iOS tab. Note that I have already set up my installation with the appropriate iOS SDK from Apple - don't worry about this for the moment, we'll cover it in detail in a later tutorial.

Once I select "Build for iOS" in the Standalone builder, I can go straight to the Test button on the toolbar and it will launch the Apple simulator so that I can see my app running.

You'll notice this application interface doesn't look native. With iOS applications, you can either provide your own custom skin for your application, or you can use LiveCode's MobGUI Plugin to create a native looking experience.

MobGUI

You can learn more about MobGUI here. It is a very useful third party plugin that gives you instant access to native looking objects for iOS and Android. Once it has been installed, launch it from the plugin menu, by going to Development/Plugins/revMobGUI.

Add a Native Button

You can add a Native themed button from MobGUI just by dragging it out, as for buttons from the Tools Palette. You can easily switch from iOS into Android themed buttons. We'll look at all this in detail in a future video.

Structure of an App

If I want to make a more complex project, you can add more screens to your stack. To add additional screens within the same window, you add a "card" to your stack, by choosing "New Card" from the Object menu. LiveCode uses a "card and stack" metaphor to describe project structure. This is covered in the User Guide, which you can launch from your Help menu. You'll see that every screen within a window is called a card, and series of cards is called a stack. If I want to create a Document window, a Palette or a dialog, you can create a new substack. Do this by choosing "New Substack" from the File menu.

The Application Browser

To navigate around your stack, I can use the Application Browser, which is opened from the Tools menu.

Finding Help

You will find a variety of resources, including the User Guide, Release notes and Example stacks under the Help menu.

Finding Task Based Tutorials

You'll find a very handy set of step by step lessons available if you click the "Tutorials" icon on the toolbar. These are online tutorials covering all aspects of LiveCode, they are regularly updated and you can search them for specific terms you are interested in, or just browse to get an idea of what you can do in LiveCode.

API Dictionary

Open the Dictionary from the Dictionary Icon on the toolbar. This covers all the terms used in the LiveCode programming language. This invaluable resource has an example of use with each language word. You can use the categories on the left to choose the type of word you want to look for, e.g. you can choose Messages and you will see a list of all the message type commands that LiveCode offers.

That's really all there is to building your first multi-platform app.