Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
LiveCode Mobile Development Beginner's Guide (2nd Edition)

You're reading from   LiveCode Mobile Development Beginner's Guide (2nd Edition) Create interactive mobile apps for Android and iOS with LiveCode

Arrow left icon
Product type Paperback
Published in May 2015
Publisher
ISBN-13 9781849699655
Length 256 pages
Edition 1st Edition
Arrow right icon
Authors (2):
Arrow left icon
Colin Holgate Colin Holgate
Author Profile Icon Colin Holgate
Colin Holgate
Joel W Gerdeen Joel W Gerdeen
Author Profile Icon Joel W Gerdeen
Joel W Gerdeen
Arrow right icon
View More author details
Toc

Table of Contents (10) Chapters Close

Preface 1. LiveCode Fundamentals FREE CHAPTER 2. Getting Started with LiveCode Mobile 3. Building User Interfaces 4. Using Remote Data and Media 5. Making a Jigsaw Puzzle Application 6. Making a Reminder Application 7. Deploying to Your Device A. Extending LiveCode Index

Time for action – it's a drag, but you'll like it!

You build things in LiveCode by dragging icons from the Tools palette to the stack window. If the palettes are not already open, the Inspector palette can be opened by clicking on the icon at the left end of the toolbar or by selecting one of the inspector menu items in the Object menu. The Tools palette can be opened by selecting the Tools Palette from the Tools menu and by using the following steps

  1. From the File menu, select New Mainstack.
  2. In the Tools palette, click on the Edit tool (the top-right icon).

To select edit or not…

In LiveCode, you can drag controls from the Tools palette to the card window without selecting the Edit tool. However, you are not able to select the control to adjust its position or size, and so, in the following instructions, we are intentionally selecting the Edit tool before adding controls to the card window:

  1. Drag icons from the upper section of the Tools palette to the stack window.
  2. Try the layering options at the bottom of the Object menu.
  3. Select more than one item and experiment with the Align Objects options in the Inspector palette. The align options are shown automatically when you select multiple objects, but you can also select Align Objects from the drop-down menu in the Inspector palette. You won't see this option if only one object is selected. Here, we are able to see the options because three buttons are selected:
    To select edit or not…
  4. Select a single button and in the Inspector palette, enter a name and a label. If you don't see the Name and Label fields, make sure you have selected Basic Properties from the Inspector pallete's drop-down menu.
  5. Add several more controls to the card window and practice aligning and naming the controls. You can also resize them by dragging the handles that you see on the corners and sides while the control is selected. Here is how the window would look if you add some buttons, a field, tab panel, slider, and video player control:
    To select edit or not…

What just happened?

Hopefully, you will have made a random bunch of interface controls, perhaps some that are nicely lined up too! Now, select the Close and Remove From Memory option from the File menu and create a new Main Stack to make the Simple Calculator interface.

First though, we should go over some of the structure and hierarchy of a LiveCode stack and create some basic navigation.

Creating a hierarchy

Everything goes somewhere, but having things in the wrong place can lead to problems. We should learn more about the structure of a LiveCode stack to avoid this.

The stack structure

As described in the Background history and metaphors section, LiveCode uses a stack of cards metaphor. When you make a new stack, you in effect have a single stack of cards. However, even the simplest application is likely to have more than one card. For example, there could be a splash screen, title card, cards for the actual task at hand, and a credits page. In the calculator stack, we will use two cards. The Tools menu includes an option to view the structure of the stack by showing Project Browser or Application Browser. The Project Browser was introduced in the version 6.0 of LiveCode with additional capabilities

The Project Browser panel is a powerful tool that lets you see all the stacks, cards, and controls that are open at the moment, in one window. In addition to getting an overview of everything, you can use it as a remote control to jump between all the parts of your stack and to select and modify buttons, fields, and so on.

Taking the calculator stack that we are about to make as an example, in the following screenshot, we see a side-by-side view of the stack window and the Project Browser panel, where in the Project Browser panel, we have selected one of the buttons in the stack:

The stack structure

The upper area of Project Browser includes a field where you can type and search text to reduce the list of items in the browser to match the ones you have typed. In the upper-left part of the panel, is a gear icon that is used to take you to the preferences of the browser:

Most of the rest of the browser window lets you expand stacks and cards, and choose individual controls on those cards. Clicking on a control in Project Browser highlights it in the stack window and vice versa. Controls can also be reordered to change layers by dragging them up and down. Controls can also be hidden or locked by clicking on the eye and lock icons. The lower area buttons let you do various alignments of the selected controls to add or duplicate the selected control. Hovering over a button shows a popup of what it does.

A longer overview of how Project Browser works is available at:

http://www.runrev.com/newsletter/april/issue151/newsletter4.php.

Where does the code go?

In programming languages, such as the one in LiveCode, code is referred to as scripts and methods or functions are known as handlers (though in LiveCode, a handler that returns a value is also called a function). Projects made with hard-to-use programming tools often comprise dozens of external text files, one for each model, view, or controller. In LiveCode, this is simpler, as the scripts are attached to the object that needs that code.

To deal with user interaction in other tools, you will have to write code that receives the event (perhaps just a mouse click on a button) to perform the relevant action. In LiveCode, there is a message path that takes care of these events, and passes the event up the hierarchy. If you click on a LiveCode interface control that doesn't have a mouse event handler, the click goes up the hierarchy to the card level. If the card doesn't have a handler for that event, it continues up to the stack level.

You can have additional levels of hierarchy by putting other stacks in use, but for our purpose, we just need these three: the button, card, and stack.

This message hierarchy allows us to place the code needed via several interface controls at a higher level available to all of these controls. One case with the calculator number buttons is that each one needs to do exactly the same thing, and by putting that code in the card level, all of them can make use of that one handler.

There isn't a performance advantage if you have the shared handler in the card level or much of a file size improvement, but as you develop the code for the simple calculator example, you can make changes in the single-card script instead of the 11 calculator button scripts.

We will now start building the calculator and add scripts to the 14 buttons, a field, and the card.

You have been reading a chapter from
LiveCode Mobile Development Beginner's Guide (2nd Edition)
Published in: May 2015
Publisher:
ISBN-13: 9781849699655
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime