It is important to start with a relatively simple mobile application. This will allow you to quickly grasp key functions and features of developing mobile applications with LiveCode. Don't worry, we'll start developing more complex mobile applications in subsequent projects.

To develop our Hello Planet! mobile application, we'll use several capabilities and features to include the following:

You do not need plugins or additional software for LiveCode in order to accomplish this mission. You're all set, so let's get started.

First, we will create a new stack and name it HelloPlanet.

Now, we need to tell LiveCode that this will be a mobile app. So, navigate to File | Standalone Application Settings. You'll want to deselect Mac, Windows, and Linux as standalone options. Those are the default settings, and because you'll be developing a mobile app, you do not need to create desktop versions. After you adjust your settings, your Standalone Application Settings for HelloPlanet – iOS dialog should look something like the following screenshot:

Okay, you're ready to start coding the mobile app. Let's write a script that results in a pop-up dialog appearing when the mobile app is first loaded. We'll do this with the following code on the main stack:

on openStack
   answer "Greetings!" titled "Hello Planet!"
end openStack

This code is executed when the app first loads. Because it is at the main stack level and is initiated with the openStack keyword, the answer command will result in a pop-up dialog before any other code is executed. Also, you'll see we've used two strings: one for the title and one for the message.

When we do not tell the answer command what buttons to display on the pop-up dialog, it defaults to an OK button.

Okay, that was not very exciting, but we had to start somewhere.

Let's modify the code in the main stack to include code to get and display the current time.

on openStack
   local theTime
   
   put the time into theTime
   
   answer "Greetings!" & return & theTime titled "Hello Planet!"
end openStack

As you can see from this code, we created a local variable to temporarily hold the mobile device's current time. Next, we pulled the local time with the put the time command and stored it using into the local variable with the same line of code. Then, we simply modified the answer command to add a carriage return and the time. Take a look at our results.

So far, we have a mobile app that opens a dialog, displays a message that includes the current time, and presents the user with the single OK button. In the next task, we'll take steps to make this app a bit more interactive.

So, let's count how many seconds it takes the user to tap that button. Here is the code:

on openStack
   global theStart
   local theTime
   
   put the seconds into theStart
   put the time into theTime
   
   answer "Greetings!" & return & theTime titled "Hello Planet!"
   timeup
end openStack
command timeup
   global theStart
   local theEnd
   
   put the seconds into theEnd
   
   answer "It took you " & (theEnd - theStart) & " seconds to tap that button!" titled "I was Counting"
end timeup

We made a few adjustments to our app's code.

For the openStack code, we made the following changes:

For the timeup code, we made the following changes:

After the user releases the OK button, he/she will be greeted with a new pop-up dialog as shown in the following screenshot:

So far, we've only allowed the user to provide inputs by way of tapping a button. Let's get some additional information from them by asking a direct question. Here's the code:

command timeup
   global theStart
   local theEnd
   
   put the seconds into theEnd
   
   answer "It took you " & (theEnd - theStart) & " seconds to tap that button!" titled "I was Counting"
   
   namefun
end timeup

command namefun
   ask "What is your name?"
end namefun

As you can see in the preceding code, we have added a new command, namefun. We also added a call to that command at the end of the timeup command. When we execute the code, we see that a new pop-up dialog appears that asks the user to enter their name. LiveCode helps us out here by automatically activating the mobile device's keyboard.

The user can now enter their name via their mobile device's keyboard. Let's do something with the text they enter.

What we'll do next is take the name the user inputs, count the number of letters, and determine how many of them are vowels. Then, we'll provide the results to the user in yet another pop-up dialog.

Here is the modified code for the namefun command:

command namefun
   local userName, theLen, theVowels, tLoop
   
   ask "What is your name?"
   put it into userName
   put the length of userName into theLen
   --
   put 0 into theVowels
   repeat with tLoop = 1 to theLen
      if character tLoop of userName is among the characters of "aeiou" then
         add 1 to theVowels
      end if
   end repeat
   
   answer "You have " & theLen & " letters in your name; " & theVowels & " of them are vowels."
end namefun

Okay, let's take a closer look at our new code:

   local userName, theLen, theVowels, tLoop

We are using four local variables:

Now, the next line of code is:

   ask "What is your name?"

The ask command initiates the prompt with What is your name? as the prompt and the OK and Cancel buttons.

   put it into userName

We use the preceding line of code to take the username and put it into the variable userName.

   put the length of userName into theLen

We use the preceding line of code to take the length of the username and put it into the variable userName. In this context, the length is defined by the number of characters in the username.

   put 0 into theVowels
   repeat with tLoop = 1 to theLen
      if character tLoop of userName is among the characters of "aeiou" then
         add 1 to theVowels
      end if
   end repeat

In the preceding code block, we cycle through the entire username, one character at a time. For each character, we check to see if it is a vowel by comparing it to the provided string (aeiou). Before entering the repeat loop, we give our counter variable, theVowels, a value of zero.

   answer "You have " & theLen & " letters in your name; " & theVowels & " of them are vowels."

Finally, we provide our user with an informative pop-up dialog using the answer command as shown in the following screenshot:

In the last three tasks, we relied on the operating system to build our pop-up dialogs. What if you want to use pop ups with more customizations such as the layout and appearance? LiveCode gives us the flexibility to create our own pop-up dialogs. In fact, there are a couple of different ways of doing this. First, we can create a group of objects and then display the group when warranted. The second method is to create one or more cards in a new stack to be used for pop-up dialogs. We'll use the second method in this task because it exercises better programming style.

In this task, we'll copy our Hello Planet! source code and name it HelloPlanet_v2.livecode. This will result in two different versions of our Hello Planet! mobile application. Both the versions will perform the same functions. The difference will be that the second version will use custom dialog boxes as pop ups instead of relying on the pop ups automatically generated by the answer and ask commands.

Here are the six steps we will take:

We have a lot to do, so let's get started.

Creating and customizing a new card called Greeting1

As our main application window is just a blank blue screen, we can easily mimic pop-up dialogs by creating objects on additional cards with the same background color as the stack.

When we created the main stack, our first card was automatically created. So, let's rename that card to Greeting1.

You'll recall that this first dialog in the initial version of this app simply displayed a pop-up dialog that had a title, message, and an OK button. We'll build that pop-up dialog on the Greeting1 card by following these steps:

1. Go to the Greeting1 card.

2. Draw a rounded rectangle on the card so that it is located just below the top of the card. Change the following settings:

   1. Set Opaque of the rectangle to true.

   2. Change the fill color to blue so that there is a contrast with the background of the card.

   3. Set the border to 0.

   4. Set the text to bold and the font size to 18.

   5. Set the drop shadow to true.

   6. Change the drop shadow color to a light color such as white.

   7. Lock the size and position.

3. Drag a Label field on top of the rectangle and also change the following settings:

   1. Change the label's text color to white.

   2. Center the label's text.

   3. Change the label's text size to 24.

   4. Set the label's text to bold.

   5. Change the label's contents to Hello Planet! v2.

   6. Resize the label's physical size to 292 wide and 42 high. This will ensure the text is properly displayed on the card.

4. Drag a second Label field onto the middle of the rounded rectangle and update the following settings:

   1. Change the label's text color to white.

   2. Center the label's text.

   3. Change the label's text size to 24.

   4. Change the label's text to Greetings!.

   5. Resize the label's physical size to 292 wide and 42 high. This will ensure the text is properly displayed on the card.

5. Draw a second rounded rectangle on the bottom-center of the first rounded rectangle and update the following settings:

   1. Set Opaque of the rectangle to true.

   2. Change the fill color to a lighter color to contrast with the background of the card.

   3. Change the name to OK.

   4. Set the border to 0.

   5. Set the text to bold and the font size to 18.

   6. Set the drop shadow to true.

   7. Change the drop shadow color to a light color such as white.

Your custom pop-up dialog should look similar to the following screenshot:

Next, we need to code the OK rectangle so that the app continues processing the dialog interfaces we've previously programmed. Here is the code for that rectangle:

on mouseUp
   timeup
end mouseUp

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Now, we will need to modify the code in the openStack command to remove the call to the answer command. As you can see in the following code block, you can simply comment out the last two lines of code:

on openStack
   global theStart
   local theTime
   
   put the seconds into theStart
   put the time into theTime
   
   // v1 code no longer required
   //answer "Greetings!" & return & theTime titled "Hello Planet!"
   //timeup
end openStack

You can see that we eliminated the answer command and moved the call to the timeup command to the new OK button we created. Now we are ready to create our second pop-up dialog.

Creating and customizing a new card called Greeting2

Our Greeting2 card will simply add the current time to the message provided by the Greeting1 card. Let's use a shortcut to create our second pop-up dialog card. The quickest route to success is to copy the elements from the first card and paste them on the new card.

Once you have all four objects (two rounded rectangles and two labels) copied to the Greeting2 card, make the following modifications:

1. Unlock the size and position of the large rounded rectangle.

2. Change the height of the large rounded rectangle to 160.

3. Lock the size and position of the large rounded rectangle.

4. Move the smaller rounded rectangle with the OK label to the bottom of the larger rounded rectangle.

5. Copy the label that currently has Greetings! as the content.

6. Paste the new label and position it above the OK rounded rectangle.

7. Change the name of the new label to timeDisplay.

8. Empty the contents of the new timeDisplay label.

Now we need to modify the openStack code as follows:

on openStack
   global theStart
   //local theTime
   
   put the seconds into theStart
   put the time into fld "timeDisplay" on card "Greeting2"
   go to card "Greeting2"
   // v1 code no longer required
   //answer "Greetings!" & return & theTime titled "Hello Planet!"
   //timeup
end openStack

We commented out the local variable theTime because we no longer need it. Instead, we can pass the system time direction into the timeDisplay field. Once the time is put into the timeDisplay field, we open the Greeting2 card with the go to card "Greeting2" statement.

When we run the application in the mobile simulator, the screen displays the greeting message and time in the simulated pop-up dialog as shown in the following screenshot:

Creating and customizing a new card called Counting

Our next step is to create a pop up that will display the I was Counting message from the first version of our Hello Planet! mobile application. To do this, we will copy the objects on the Greeting2 card and paste them onto a new card named Counting.

Here are the steps to customize the Counting card:

1. Rename the label timeDisplay to countDisplay.

2. Delete the label with the current contents of Greetings!.

3. Change the height of the label countDisplay from 42 to 72.

4. Change the contents of the top label (currently contains Hello Planet! v2) to I was Counting.

Now, we just need to modify the command timeup source code to calculate the seconds and display the feedback message on the Counting card. Here is the modified source code:

command timeup
   global theStart
   local theEnd
   
   put the seconds into theEnd
   put "It took you " & (theEnd - theStart) & " seconds" & return & "to tap that button!" into fld "countDisplay" on card "Counting"
   go to card "Counting"
   //v1 code no longer required
   //answer "It took you " & (theEnd - theStart) & " seconds to tap that button!" titled "I was Counting"
   // namefun
end timeup

As you can see, we commented out the answer command and the call to namefun. We replaced the answer command with the put command. Because we commented out the call to namefun, we'll need to call that command once the user clicks on the OK button. Instead of keeping the namefun command at the stack level, we will, in the next task, move that code to the GetName card. So, we'll just need to go from the Counting card to the GetName card. Here is that source code:

on mouseUp
   go to card "GetName"
end mouseUp

Once the new code is run in an emulator, you should receive the following output, with the amount of seconds being the actual time you took to tap the OK button:

Creating and customizing a new card called GetName

Our next step is to create and customize a card named GetName that prompts the user for their name. So, we'll need a message, the ability to input text, and two buttons labeled Cancel and OK.

Here are the required steps:

1. Copy the objects from the Greeting1 card.

2. Create a new card and name it GetName.

3. Paste the copied objects from the Greeting1 card onto the GetName card.

4. Delete the Label field containing Hello Planet! v2.

5. Move the Label field containing Greetings! to the top of the blue rounded rectangle.

6. Change the contents of the remaining Label field to What is your name?.

7. Add a text entry field under the label and above the OK button.

8. Name the text entry field theName.

9. Change the text size of the field theName to 24.

10. Change the background color of the field theName to white.

11. Move the OK button to the right of the blue rounded rectangle.

12. Duplicate the OK rectangle and place it to the left of the OK rectangle.

13. Change the name of the new rectangle to Cancel.

14. Resize the Cancel and OK rectangles so they span the width of the theName field.

Once you complete these steps, your card should look similar to the following screenshot:

LiveCode will automatically display the keyboard when the user taps the text entry field (theName), so we do not need to add any code to make it happen. We do need to code both the Cancel and OK rectangles. Let's start with the Cancel rectangle.

When the user taps the Cancel button, we just want to go back to the previous card—the Counting card. Here is the code for the Cancel button:

on mouseUp
   go to card "Counting"
end mouseUp

The code for the OK rectangle is a bit more complex and can be slightly modified from the namefun command that we coded in the first version of our application. So, your first action is to copy the entire namefun command from the stack level and paste the code into the OK graphic's on mouseUp command.

Next, we'll modify the source code to use the input from our text entry field to calculate the number of characters and vowels in the name entered by the user. Here is the source code:

on mouseUp
   local userName, theLen, theVowels, tLoop
   local theResults
   
   put the text of fld "theName" into userName
   put the length of userName into theLen
   --
   put 0 into theVowels
   repeat with tLoop = 1 to theLen
      if character tLoop of userName is among the characters of "aeiou" then
         add 1 to theVowels
      end if
   end repeat
   
   put "You have " & theLen & " letters in your name; " & theVowels & " of them are vowels." into theResults
end mouseUp

You'll notice that much of the original source code from the namefun command remains unchanged. We added a new local variable, theResults, to hold the entire final result's string. We'll use this to populate our final card. The put the text of fld "theName" into username code captures any text entered by the user. From there, the rest of the source code is unchanged until the final put command, which replaced the answer command.

We should also code in some basic housekeeping. When the GetName card is displayed, we want to ensure the text entry field (theName) is blank. Here is the code we will use to accomplish that:

on preOpenCard
   put empty into fld "theName"
end preOpenCard

Because this code is placed at the card level using the preOpenCard command, any text in the text entry field will be removed before it is displayed to the user.

When you are finished with this fifth step, your simulator test should resemble the following output:

Our final step is to create and customize a new card called Final.

Creating and customizing a new card called Final

For this final step, we'll start by creating a new card and naming it Final. Next, copy the objects from the Counting card and paste them in the new Final card. Then, complete the following customizations:

1. Delete the Label field with the contents I was Counting.

2. Rename the countDisplay Label field as finalResults.

3. Move the finalResults Label field to the top of the large blue rectangle.

4. Change the text size from 24 to 18.

5. Deselect Don't Wrap Text on the finalResults field.

6. Expand the OK rectangle to the width of the large blue rectangle leaving a small space on both sides.

7. Move the OK rectangle up so that is just below the finalResults Label field.

8. Resize the large blue triangle so that there is not a large gap between the bottoms of the two rectangles.

Now we are ready to perform our final coding. First, we'll need to edit the on mouseUp command of the OK rectangle on the GetName card. Instead of putting the final results into a local variable, we'll modify the code to put the results directly into the finalResults Label field on the Final card. Here is the modified source code:

on mouseUp
   local userName, theLen, theVowels, tLoop
   
   put the text of fld "theName" into userName
   put the length of userName into theLen
   --
   put 0 into theVowels
   repeat with tLoop = 1 to theLen
      if character tLoop of userName is among the characters of "aeiou" then
         add 1 to theVowels
      end if
   end repeat
   
   put "You have " & theLen & " letters in your name; " & theVowels & " of them are vowels." into fld "finalResults" on card "Final"
   go to card "Final"
end mouseUp

As you can see, we have only made two changes to this source code. First, we deleted the local theResults line of code, as we no longer need that local variable. We also changed the final put command to put the compiled results into the field finalResults on the Final card instead of a local variable. Lastly, we make a call to the card Final.

Our final action is to assign an action to the OK rectangle on the Final card. There are a couple of options. We can quit the application or we can loop back to the very beginning. As the user can exit the application by using their mobile device buttons (such as the Home button on an iPhone), we do not always need to offer that functionality. Therefore, let's simply code the OK button to reopen the Greeting2 card. Here is the code we'll use:

on mouseUp
   go to card "Greeting2"
end mouseUp

That's it for our look at custom pop ups.

Working with custom pop ups is something that you'll likely do a lot if you develop mobile applications with LiveCode. Using standard pop ups is usually acceptable for business or finance types of applications. While you are developing educational and entertainment applications, the use of custom pop ups is more desirable.

Let's use an advanced feature with another pop up. We'll determine the location of the mobile device and display the results in a standard pop-up dialog.

The first thing we need to do is to make a copy of the original Hello Planet! LiveCode file. You can name the copied file HelloPlanet_v3.livecode.

With the LiveCode source file open, add the following code at the stack level:

on preOpenStack
   local theLocation
   
   if mobileSensorAvailable("location") is true then
      mobileStartTrackingSensor "location", true
      get mobileSensorReading("location", true) 
      if it is an array then
         combine it using return and ":"
      end if
      put it into theLocation
      answer theLocation titled "Current Location"
      mobileStopTrackingSensor "location"
   else
      answer "Your mobile location sensor is not available" titled "Sorry"
   end if
end preOpenStack

On the second line of code, we declare a local variable to hold the location results. Next is an if-then-else block with the if mobileSensorAvailable statement. This statement tests to see if the mobile device's location sensor is available. If it is not available, the answer "Your mobile location sensor is not available" titled "Sorry" statement displays an informative message to the user.

If the location sensor is available, the following block of code is executed:

      mobileStartTrackingSensor "location", true
      get mobileSensorReading("location", true)
      if it is an array then
         combine it using return and ":"
      end if
      put it into theLocation
      answer theLocation titled "Current Location"
      mobileStopTrackingSensor "location"

Let's look at the description for each of the eight lines of code in detail.

Once you enter the new code, you're ready to test it. Because this code interacts with the mobile device's hardware, you will not be able to test it in an emulator. If you attempt to do so, you will receive an error such as the one shown in the following screenshot:

You'll need to install the mobile app on an actual device to test your newly revised app. The first time you run the app on your device, the mobile operating system should display a system dialog indicating that the app wants to use the device's current location. Refer to the following screenshot for an example:

Once you click on the OK button, the Hello Planet! app will determine and display your device's current location. The output will be similar to the following screenshot:

Let's wrap up this project with a project debrief in the next section.