Book Image

LiveCode Mobile Development Beginner's Guide

By : Colin Holgate
Book Image

LiveCode Mobile Development Beginner's Guide

By: Colin Holgate

Overview of this book

LiveCode is a tool for developing mobile apps designed for those who don't want to use Objective-C, C++ or Java. Although it is a tool full of rich features to create apps it can be challenging to get beyond the basics and build interactive and fun apps. Using this book, you can develop various apps and this book guides you through "till you upload the apps in the appstore."LiveCode Mobile Development Beginner's Guide" will explain how to create applications with the easiest, most practical cross platform framework available, Livecode Mobile and upload the apps to the appstore with minimal effort.Throughout the book, you'll learn details that will help you become a pro at mobile app development using LiveCode. You begin with simple calculator application and quickly enhance it using LiveCode Mobile. Start by learning the interface controls for videos and images of LiveCode's environment. Dig into configuring devices, building user interfaces, and making rich media applications, then finish by uploading the mobile applications to App Stores. You will learn how to build apps for devices such as iPhone, Android with the recently developed LiveCode Mobile through sample applications of increasing complexity.
Table of Contents (16 chapters)
LiveCode Mobile Development Beginner's Guide
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Time for action – making the calculator buttons


Using the first screenshot from this chapter as a guide, let's build the calculator buttons (the scripts you will type are also listed later on, if you want to make sure you typed it correctly):

  1. If you're not already there, go to the second card (the currently empty one).

  2. Make sure the Edit button is selected in the Tools palette, and drag a Push button to the card, in the position of the button with the label 7.

  3. In the Basic Properties of the Inspector palette, set the Style drop-down menu to Rounded Rectangle (in real life you would take the time to have nice graphical buttons, here you are just matching my ugly "programmer art"!).

  4. Set the name of the button to number7, and the label to 7.

  5. Select Object Script from the Object menu to see the starter script as you did with the Begin button.

  6. In the empty line between on mouseUp and end mouseUp, type numberPressed the label of me.

  7. Close and save the script.

  8. Select the button and make a copy of it, by choosing Duplicate Objects from the Edit menu, and position it where the button with the label 8 will be. Copy/Paste and alt-drag are two other ways to duplicate an object.

  9. Set the name to number8, and the label to 8.

  10. Repeat steps 8 and 9, for the buttons 9, 4, 5, 6, 1, 2, 3, 0, and the decimal point, using the corresponding number instead of 8. For the decimal point, set the name to decimalpoint.

  11. Duplicate one of the buttons again, name the new button divide, and type / for its label.

  12. Select Object Script for the divide button, and change numberPressed in the middle line to operatorPressed, making the whole line read as operatorPressed the short name of me.

  13. Duplicate the divide button three more times, and set the names to multiply, plus, and minus. Set the labels to *, +, and -.

  14. Duplicate the divide button again, giving the name equals to the button and setting the label to =, and changing the middle line of script to say equalsPressed

  15. Duplicate the equals button, and set the new button's name to toggleSign and label to +-, then change the middle line of script to toggleSign.

  16. Duplicate the equals button, set the new button's name to clear and label to C, then change the middle line of script to be clearPressed.

  17. Drag a Label field from the Tools palette, and in the Inspector palette choose Text Formatting from the drop-down menu. In the Text Formatting settings choose a nice looking font, right justified text, and a large font size. Name the field display.

  18. Edit the script of the display field. With fields you don't get the starter script that you get with buttons, so you will need to type the mouseUp lines yourself. Type the following three lines:

    on mouseUp
    set the clipboarddata["TEXT"] to me
    end mouseUp
  19. Move all of the buttons into their right spots, and select sets of buttons to then use the Align tools to make your calculator layout match the screenshot.

  20. Save!

What just happened?

Quite a lot just happened! We have now made all of the card level objects, and typed in their scripts. Most of the scripts are "calling" up to a card level handler that we will be setting up next. Before we do that it's worth trying to understand some of the lines we just entered.

Verbosity, synonyms, and "me"

The near-English nature of the programming language in LiveCode is amazingly powerful, but rigidly so. In some other tools you have a choice of whether you use verbose English-like syntax, less verbose, or what is called dot syntax. The Lingo language, in Adobe Director, is a good example to compare to.

Suppose we want to change the text inside a field that is the first entry of a Director movie's cast, we can use verbose syntax:

put "hello world" into the text of member 1 

or slightly less verbose syntax:

the text of member 1 = "hello world"

or dot syntax:

member(1).text = "hello world"

In LiveCode there isn't that choice - what you type has to be in the form of:

put value into container

You do have a choice about whether you use a long version of a word, a short version, or an abbreviated form. There are also synonyms, which allow you to use a word that makes more sense to you.

Here are two ways of saying the same thing, with the second variation using an abbreviated form of the key words:

put character 3 of word 2 of card field "name of field 1" into aVariable

put char 3 of word 2 of fld 1 into aVariable

When you are dealing with the contents of the object that has the script that is running, you can use the keyword me to save on some typing, and LiveCode will also try to work out what you have in mind, if possible.

Take the lines we have entered as examples:

numberPressed the label of me

numberPressed will propagate up to a card handler we will add (soon). the label of me will look at the Label that you set for the object that the script is inside of.

set the clipboarddata["TEXT"] to me

In this case, me would normally refer to the object (as is the case with the label of me), but because we gave the extra clue of ["TEXT"], LiveCode knows that it's the text contents of the field that has that script, and not the field itself. Still, because there is the potential for confusion when reading your own code later, you could add a couple of words to make the meaning more clear:

set the clipboarddata["TEXT"] to the text of me

Tip

By the way, that display field script is not needed for the calculator to work. It's just there so that at any time you can click on the field and have the current value be copied to the clipboard, to paste into other applications.

You might choose to be more verbose than is needed, just for readability reasons, and in these chapters that is going to be the case. Using:

put the text of me into textvariable

makes it easier to tell what is going to happen than if you use the equally valid:

put me into textVariable

In either case, as it's a field, LiveCode knows what you meant.

Now look at the script in which we typed short name of me - what's that all about? Objects in LiveCode have a lengthy description of where they are located, e.g. "button "buttonname" of card id 1234 of stack "path/to/stack.livecode"". In the calculator application we need only the single word you set as the name of the button. If we asked for name of me, it would still say button "buttonname". To just grab the name itself, we use short name of me.

There are times when you will want to use the other variations of "name", including the long name and the abbreviated name, which you can read about in the LiveCode Dictionary entry for "name". In addition to a description of the different ways to use "name", there are a number of cautions shown.

Tip

Case sensitivity

If any advanced LiveCode users are reading this chapter, they may notice that in some instances I have the case wrong. LiveCode doesn't mind what case you have used, and so when I incorrectly said clipboarddata instead of clipboardData, it didn't matter. This isn't unique to LiveCode, but it is common amongst English-like programming languages to not demand that the user gets the case exactly right before the command will work.

Adding the card handlers

If you had dared to try using the calculator buttons, you would have seen a lot of script errors. We need to add in the card level handlers to be at the receiving end of the calls that the buttons are making. Instead of walking you through typing one line of code at a time, it would probably be quicker to present the lines in one go and explain what each line does. As a practice run, here are the lines that we have entered so far:

On all of the number buttons and the decimal point button, you should have this script:

on mouseup
   numberPressed the label of me
end mouseup

on mouseUp is triggered when you press and release the left mouse button while on the button, numberPressed will call a card handler named "numberPressed", passing with it the Label that you had set for the button that holds this script.

The C (clear) button has this script:

on mouseUp
   clearPressed
end mouseUp

clearPressed will call a card script named "clearPressed"

The other buttons all work in much the same way - they call a handler of the name used, which we're about to add to the card script. The following is the script for the +, -, *, and / buttons, passing the name of the button in question to the card level:

on mouseUp
   operatorPressed the short name of me
end mouseUp

And this is the one on the +- button:

on mouseUp
   toggleSign
end mouseUp

The display field has this script:

on mouseUp
   set the clipboarddata["TEXT"] to me
end mouseUp

In the case of the field, it's only processing one line of code, so no need to put that up on the card level, unless we had a lot of fields doing the same thing.

So, why don't we add all those card level scripts? Here they are, one at a time, with an explanation of how each one works:

But wait… we haven't yet talked about variables. Hold that thought, while we see how LiveCode handles variables.

Variable types in LiveCode

Generally speaking, variables are memory locations where you store values that you need to access later. In most programming languages you can dictate which routines have access to which variables. Less English-like languages may use the terms "public", "private", and "protected". Things are not all that different in LiveCode but here the words used describe more the region where the variable can be used. If a variable is to be readable everywhere, it would be "global". If it's just to be used in the current script, it's "local".

LiveCode also has custom property variables, and many people would use those for the calculator button values instead of relying on the label of the button. We'll perhaps use them later!

Now, where was I… oh yes, card level scripts:

This is the first line of the card script:

global currenttotal,currentvalue,currentcommand,newnumber

As we just discussed, these are variables that will allow all of the handlers to pass values to each other. In this case the variables could have been local, but you may often decide to use global instead, thinking that a case may come up later where you need to access the variables from outside the script you're in.

It's good to reset things when you first start, and LiveCode has an opencard event that we can use to do this. The following code resets things:

on opencard
   clearpressed
end opencard

on clearpressed
   put true into newnumber
   put 0 into field "display"
   put 0 into currenttotal
   put 0 into currentvalue
   put empty into currentcommand
end clearpressed

Having the reset lines in the clearPressed handler will allow us to call it at other times and not just when the card opens. We can call it directly when clicking on the C (clear) button which will zero out the display field, the running total for your calculation, and the last number that you entered into the calculator. It also clears the variable that is used to remember which operator button you last pressed, and a boolean (true/false) variable used to recognize whether a number button you press should clear the display or append to the display.

All of the numbered buttons, and the decimal point button, call this handler:

on numberPressed n
   if newnumber is true then
      put n into field "display"
      put false into newnumber
   else
      put n after field "display"
   end if
end numberPressed

The n after the handler name is a parameter variable that stores what was sent to the handler. In this case it's the label of the button that was pressed. All this routine needs to do is add the character to the end of the display field, except for when you are typing in a new number. That's where the newNumber boolean variable comes in - if that is set to true, the incoming character replaces the contents of the display field. However, if it's false, the character is added to the end of the field.

This is the handler for when you press the +, -, *, or / buttons:

on operatorPressed operator
   if currentCommand is empty then
      put field "display" into currentTotal
      put operator into currentCommand
      put true into newNumber
   else
      put operator into currentCommand
      equalsPressed
   end if
end operatorPressed

When you use a calculator, you type in a number, an operator, and then another number, followed by either another operator or the = button. At the time you press the operator button there is no way to know the result, as you haven't yet entered the next number in the calculation. So, we remember the operator till you have entered the next number. If the currentcommand variable doesn't already have a value, we store the display field text into the currenttotal variable, the operator character that you pressed into the currentcommand variable, and make sure that newnumber is set to true. Doing this makes sure that the next number button you press will clear the display field. If currentcommand already has a value, we replace it with the new value, and then call the same handler that is used when you press the = button.

There are most likely shorter ways to deal with the = button being pressed, but here we'll use several if statements, and run the appropriate calculation code:

on equalsPressed
   put field "display" into currentValue
   if currentCommand is empty then exit equalsPressed
   if currentCommand is "divide" then put currentTotal / currentValue into field "display"
   if currentCommand is "multiply" then put currentTotal * currentValue into field "display"
   if currentCommand is "minus" then put currentTotal - currentValue into field "display"
   if currentCommand is "plus" then put currentTotal + currentValue into field "display"
   put field "display" into currentTotal
   put true into newNumber
   put empty into currentCommand
end equalsPressed

The contents of the display field are stored in the currentValue variable , and the last operator button you pressed (that is stored in currentCommand) is looked at, to see what happens next. If there wasn't a previous operator (as would be the case if you pressed = twice in a row) we ignore the button press and exit the routine. For the four operators, we do the appropriate calculation. Afterwards, we store the new running total into the currentTotal variable, make sure that the newNumber boolean variable is set to true (so that the next number button pressed will clear the display field), and we forget the last operator button that was pressed, by putting empty into the currentCommand variable.

One thing to note is that LiveCode is smart enough to know that the text string inside the display field is to be treated as a floating point number.

For the last handler, togglesign, insert the following code:

on togglesign
   if character 1 of field "display" is "-" then
      delete character 1 of field "display"
   else
      put "-" before field "display"
   end if
end togglesign

This is a very simple routine, that doesn't have to understand that it's floating point numbers being represented. It simply looks to see if the first character is a minus or not, and if it is, it deletes the character. If not, it inserts the hyphen that LiveCode will later interpret as a negative value.

Pop quiz – try to remember…

As you get to learn a new tool you can end up taking a lot of time remembering where the thing is that you need. You know what you want to do, you know how to do it, but you can't remember where that thing is located! Where did you go to set the text styling for the calculator's title field?

  1. The Edit menu.

  2. The Object menu.

  3. The Text Formatting section of the Inspector palette.

  4. The Text menu.

Extending the calculator

It is possible to add more features to the simple calculator. If we consider how the buttons are named, and the functions in the card script, you can start to see what would be involved in adding a new ability:

  • The calculator operator buttons are named so that the card script knows which one you clicked on.

  • When the = button is pressed, there are a set of if statements in the equalspressed handler that determine what happens next.

Have a go hero – getting to the root of things

On Windows you can make a square root symbol with Alt+251, and on Mac with Option+v. Unfortunately LiveCode doesn't like those as button labels! At least on Mac, when you type that character into the Inspector palette, the character immediately vanishes. One work-around would be to use the message box, and type this:

set the label of btn "squareroot" to "√"

That should give you the right symbol as the button label.

LiveCode has a square root function; typing this into the Message Box would produce the square root of 10:

put sqrt(10)

Now, armed with the above information, try to add a square root feature to the calculator.