LiveCode Mobile Development Cookbook

3.7 (3 reviews total)
By Dr. Edward Lavieri
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. LiveCode Mobile Basics

About this book

LiveCode is a programming language that helps you create apps for multiple platforms and has emerged as one of the premier development environments and languages for creating mobile applications. Programming tasks and concepts are expertly handled with a recipe schema in this book, making access to the information you want readily available.

This book is chock-full of helpful recipes that quickly solve key tasks when using LiveCode for mobile development. It serves as a significant reference tool for LiveCode mobile developers, beginners, novices, and experts alike. It will help you learn how to create user interfaces, use loops and timers, take control of text, implement social media components to your apps, and more.

Publication date:
September 2014
Publisher
Packt
Pages
256
ISBN
9781783558827

 

Chapter 1. LiveCode Mobile Basics

In this chapter, we will cover the following recipes:

  • Setting up your mobile environment for iOS development

  • Setting up your mobile environment for Android development

  • Defining icons and images for iOS development

  • Defining icons and images for Android development

  • Configuring standalone application settings for iOS applications

  • Configuring standalone application settings for Android applications

  • Using the simulator

  • Saving a standalone mobile app

 

Introduction


In this chapter, you will learn how to accomplish tasks related to working with iOS and Android apps and their respective mobile application marketplaces. You will learn how to set up your development environments, what icons and images are required for apps, how to use the simulator, how to run the apps on your devices, and how to get your apps in the global marketplace.

 

Setting up your mobile environment for iOS development


LiveCode enables us to create mobile applications for iOS devices such as the iPad, iPhone, and iPod Touch. Before we can start developing for these devices, we need a few things from Apple, which is the creator of iOS. This recipe details how to accomplish this.

Getting ready

Before you can complete this recipe, you will need to be a certified Apple Developer and have your account information (username and password) available. See https://developer.apple.com for more information.

How to do it...

Once you have your Apple Developer account and LiveCode installed on your development computer, you are ready to get started with this recipe.

  1. Log in to your Apple Developer account.

  2. Download the iOS SDK.

  3. Download and install Xcode.

    Note

    Xcode downloads are several gigabytes in size and can take a long time to download depending upon your Internet connection speed. Do not worry if the download takes longer than you anticipated.

  4. Select Preferences... from the LiveCode drop-down menu.

  5. Select Mobile Support from the left navigation pane of the Preferences window.

  6. Use the Add entry button to navigate to the location of Xcode on your development computer. When this is done correctly, you will see version numbers listed under Available device SDKs and Available simulators.

How it works...

In this recipe, we used our Apple Developer account to download and install the latest iOS SDK and Xcode software. Next, we configured LiveCode so that LiveCode's IDE is linked with our iOS development SDK. This will now allow us to develop iOS applications with LiveCode.

There's more...

It is important to ensure that you do not have any conflicts with your computer's operating system, version of the SDK, or Xcode. For example, if you are running Mountain Lion or Mavericks on your Mac development computer, it is recommended that you use Xcode 5.0.2 and SDK 7.0. Consult the latest LiveCode release documentation for updated information.

See also

  • The Setting up your mobile environment for Android development recipe

  • The Configuring standalone application settings for iOS applications recipe

 

Setting up your mobile environment for Android development


There are a lot of devices made by a multitude of mobile hardware devices that run the Android operating system. In order for us to develop for Android devices, we must have the Android SDK installed on our development computer. In addition, we must configure LiveCode so that it knows where the SDK is installed.

Getting ready

Unlike developing for iOS, you do not need a developer account to obtain the Android SDK.

How to do it...

Setting up your development environment so that you can develop Android apps using LiveCode is accomplished by the following steps:

  1. Download the latest Android SDK from the following site:

    http://developer.android.com/sdk/index.html

    Note

    You should only have to download the Android SDK once. The SDK Manager gives you the flexibility to install additional packages as well as future updates.

  2. If you are using a Windows or Linux based computer to develop your Android app, you will also need to download and install the Java SDK from the following site:

    http://www.oracle.com/technetwork/java/javase/downloads/index.html

  3. Double-click on the Android SDK compressed file (it will be named similar to adt-bundle-mac-x86_64-20140321.zip) to uncompress/unzip the package.

  4. Install the Android SDK and, if you are using a PC, the Java SDK. On Mac, navigate to the newly installed Android SDK folder. Run the android program by navigating to sdk | tools. This loads the Android SDK Manager.

  5. Using the Android SDK Manager, ensure that you have the desired tools and documentation installed. Most developers do fine with the defaults; your situation might be different. Also, you should install any available updates.

  6. Ensure that you install the Android 2.2 (API 8) SDK platform tools. If you fail to do this, you will run into an error when trying to configure LiveCode for Android development. The Android SDK Manager will handle downloading, unzipping, and installing the tools and updates you select.

  7. Select Preferences... from the LiveCode drop-down menu.

  8. Select Mobile Support from the left navigation pane of the Preferences window.

  9. Use the button to navigate to the location of the Android SDK on your development computer. When this is done correctly, you will see your specific path listed after JDK Path on the Preferences dialog window.

How it works...

In this recipe, we downloaded and installed the latest Android SDK. Next, we configured LiveCode so that LiveCode's IDE is linked to our Android development SDK. This will now allow you to develop Android applications with LiveCode.

There's more...

If you run into any installation problems, as with any online software, it is a good idea to check the software documentation instructions. Typically, there is a readme text file in the directory with the installation files.

Configuring your computer for use with LiveCode is pretty straightforward when you are developing for iOS devices. This is true for Windows, Mac, and Linux machines. When developing for Android devices, the configuration process can be a bit more difficult on a PC running Windows than on a Mac. Please consult the LiveCode documentation if you run into any problems.

See also

  • The Setting up your mobile environment for iOS development recipe

  • The Configuring standalone application settings for Android applications recipe

 

Defining icons and images for iOS development


When we develop apps for iOS devices, we must provide specifically formatted icon and splash screen images. Because of the different orientations (portrait and landscape) and screen sizes, several different versions of each image (icon and splash screen) are required.

Getting ready

You will require software to create the original graphics as well as to export them in the proper sizes.

How to do it...

The icons and images for iOS development are defined using the following steps:

  1. Select the Standalone Application Settings... option from the File drop-down menu.

  2. Click on the icon in the top row of the Standalone Application Settings dialog box.
  3. Ensure that the checkbox next to the iOS build option is checked. Once you select this option, a checkmark will appear in the box and the remaining options will be editable. Until you select this option, all options are disabled. Also, once you indicate that you will be saving mobile versions, any selected desktop deployment options will be deselected automatically.

  4. Use the buttons to the right of each icon / splash screen entry to upload your images.

  5. Ensure that your icon images have been exported with the following pixel dimensions:

    Icon

    Image size

    iPhone

    57 x 57

    Hi-Res iPhone

    114 x 114

    iOS 7 Hi-Res iPhone

    120 x 120

    iPad

    72 x 72

    Hi-Res iPad

    144 x 144

    iOS 7 iPad

    76 x 76

    iOS 7 Hi-Res iPad

    156 x 156

  6. Ensure that your splash screen images have been exported with the following dimensions:

    Splash screen

    Image size

    iPhone

    320 x 480

    Hi-Res iPhone

    640 x 960

    4 Inch iPhone

    640 x 1136

    iPad Portrait

    768 x 1024

    iPad Landscape

    1024 x 768

    Hi-Res iPad Portrait

    1536 x 2048

    Hi-Res iPad Landscape

    2048 x 1536

How it works...

Pointing the file-selection window to each specific icon and splash screen is easy work. If you attempt to upload an image that does not have the correct dimensions, LiveCode will present you with an error message. The files you select are embedded in your app's binary and are used when uploading it to the App Store.

There's more...

If you only enable one orientation, you will not be required to upload images to support the other orientation. For example, if your mobile app only supports the portrait orientation, you do not need to upload landscape splash screens.

See also

  • The Setting up your mobile environment for iOS development recipe

  • The Defining icons and images for Android development recipe

 

Defining icons and images for Android development


When we develop apps for Android devices, we must provide specifically formatted icon and splash screen images. Because of the different orientations (portrait and landscape) and screen sizes, several different versions of each image (icon and splash screen) are required.

Getting ready

External graphic creation and editing software is required to create the original graphics as well as to export them in the proper sizes.

How to do it...

The icons and images for Android development are defined using the following steps:

  1. Select the Standalone Application Settings... option from the File drop-down menu.

  2. Click on the icon on the top row of the Standalone Application Settings dialog box.
  3. Ensure that the checkbox next to the Android build option is checked. Once you select this option, a checkmark will appear in the box and the remaining options will be editable. Until you select this option, all options are disabled.

  4. Use the buttons to the right of the Icon and Splash boxes to upload your images.

  5. Ensure that your icon image is 72 x 72 and in the PNG format.

  6. You only need to upload a splash screen image if you are using a personal or educational LiveCode license. If you are using a commercial license, you do not need to upload a splash screen image. If the image is required, it should be a 600 x 600 PNG file. This splash image will be displayed on the Android screen for 5 seconds when a personal or educational license is used to develop the app.

How it works...

Pointing the file-selection window to the icon and splash screen is easy work. LiveCode does not present you with an error message if you attempt to upload an image with incorrect dimensions. So, be careful to upload the properly sized images. The files you select are embedded in your app's binary and are used when uploading it to the Google Play and Amazon Appstore.

See also

  • The Setting up your mobile environment for Android development recipe

  • The Defining icons and images for iOS development recipe

 

Configuring standalone application settings for iOS applications


There are several configuration settings to be considered when creating an iOS application. These settings are entered and recorded via the Standalone Application Settings dialog window. The dialog window is organized into seven sections: basic application settings, status bar, orientation options, requirements and restrictions, icons, splash screens, and custom URL scheme. This recipe addresses each setting with the exception of icons and splash screens, which are covered in other recipes in this book.

How to do it...

To configure standalone application settings for iOS applications, follow the given steps:

  1. Select the Standalone Application Settings... option from the File drop-down menu.

  2. In the top section of the dialog window, ensure that the checkbox labeled iOS (see the following screenshot) is checked.

  3. Referring to the previous screenshot, select which device(s) your app will support. Your options are iPod, iPhone and iPad, iPod and iPhone, and iPad.

  4. Referring to the previous screenshot again, select the minimum operating system that the target device(s) must have. At the time of writing this book, the options are as follows:

    • 4.3 or later

    • 5.0 or later

    • 5.1 or later

    • 6.0 or later

    • 6.1 or later

    • 7.0 or later

    • 7.1 or later

    Note

    Selecting earlier iOS versions will expand your potential target audience, while selecting later iOS versions will restrict a portion of your audience pool but will give you access to advanced features and functions.

  5. Using the following screenshot as a reference, configure the settings on the Basic Application Settings page:

    The settings are explained as follows:

    • Display Name: This is what is displayed on the SpringBoard (also referred to as the home screen) under the app's icon.

    • Version: Your app's version number.

    • Internal App ID: This is a universal and unique identifier that must match what you entered when you established the app's App ID in the Apple Developer portal. The format is com.company.appname.

    • Profile: Select the provisioning profile you downloaded from the Apple Developer portal.

    • Externals: Select any of the LiveCode externals (revZip, revXML, SQLite, MySQL, PDF Printing, and Encryption) based on the externals that your app requires.

  6. Using the following screenshot as a reference, configure the settings on the Status Bar page:

    The settings are explained as follows:

    • iPhone Status Bar: You can have the status bar visible or hidden

    • iPad Status Bar: You can have the status bar visible or hidden

    • Status Bar Style: Your options here are Default, Black Opaque, and Black Translucent

  7. Using the following screenshot as a reference, configure the settings on the Orientation Options page:

    The settings are explained as follows:

    • iPhone Initial Orientation: You can select Portrait, Portrait Upside-Down, Landscape Left, or Landscape Right as the orientation for your app to display

    • iPad Supported Initial Orientations: Here, you have the same selections as the previous setting, but you are able to select any/all of the orientations

  8. Using the following screenshot as a reference, configure the Requirements and Restrictions settings:

    The settings are explained as follows:

    • Select whether or not your app requires persistent Wi-Fi connectivity

    • Select whether or not your app requires iTunes' File Sharing feature to be enabled

    • Select whether or not your app can receive push notifications

  9. Select Required, Prohibited, or n/a for each of the options shown in the following screenshot. Selecting Required for a function or feature means that that function or feature must be present in order for the app to launch. Selecting Prohibited means that if that function or feature is present, the app will not get launched.

  10. Enter, if applicable, the name of your URL scheme that was used to uniquely reference your app. Custom URL schemes can be used to enable apps to communicate with one another in order to provide services. More information on this concept can be found in Apple's iOS Developer Library.

How it works...

Using the Standalone Application Settings dialog window, we can configure a large number of settings that are relevant to our mobile application.

See also

  • The Defining icons and images for iOS development recipe

  • The Configuring standalone application settings for Android applications recipe

 

Configuring standalone application settings for Android applications


There are several configuration settings to be considered when creating an Android application. These settings are entered and recorded via the Standalone Application Settings dialog window. The dialog window is organized into five sections: basic application settings, in-app purchasing, requirements and restrictions, application permissions, and user interface options. This recipe addresses each setting.

How to do it...

To configure standalone application settings for Android applications, follow the given steps:

  1. Select the Standalone Application Settings... option from the File drop-down menu.

  2. In the top section of the dialog window, ensure that there is a check in the checkbox labeled Android.

  3. Referring to the following screenshot, determine the appropriate values for each setting:

    The settings are explained as follows:

    • Label: This is what is displayed on the launcher screen under the app's icon.

    • Identifier: This is a universal and unique identifier that uses the reverse domain name format (com.company.appname).

    • Version Name: This is your app's version number.

    • Version Code: This code is for internal version validation.

    • Icon: This is the path to the app's icon image.

    • Splash: This is the path to the app's splash screen image.

    • Signing: This is where you tell LiveCode whether the APKs are to be signed with your personal key, are signed with your development key, or not at all.

    • Key: When using the Sign with my Key signing option, this Key field points to the key-store file.

    • Install Location: Here, you select how the app is installed on a mobile device. The options are Internal Storage Only, Allow External Storage, and Prefer External Storage.

    • Externals: Select any of the LiveCode externals (revZip, revXML, SQLite, MySQL, and SSL & Encryption) based on the externals your app requires.

    • Custom URL Scheme: If applicable, enter the name of your custom URL scheme that is used to uniquely reference your app.

    • Push Sender ID: This is a unique project number associated with your app. This ID is used when you are using push notifications.

    • Status Bar Icon: Here, you will upload your status bar icon.

  4. Select whether your app will use in-app purchasing by selecting the In App Purchasing checkbox. If you select this option, you must identify which in-app purchasing store your app uses: Google, Samsung, or Amazon. There is additional data required if you are using Google (Public Key) or Samsung [Item Group ID and Mode (Production, Test Success, or Test Failure)].

  5. Select what the minimum operating system the target device(s) must have. At the time of writing this book, the options are as follows:

    • 2.2 – Froyo

    • 2.3 – Gingerbread

    • 2.3.3

    • 3.0 – Honeycomb

    • 3.1

    For our example, we have selected 2.2 – Froyo.

    Note

    Selecting earlier Android versions will expand your potential target audience, while selecting later Android versions will restrict a portion of your audience pool but give you access to advanced features and functions.

  6. Select Required, Used, or n/a for each of the options shown in the following screenshot. Selecting Required means that that function or feature will be visible to users with devices that support the feature or function. Selecting Used will inform the user that your app uses the function or feature.

  7. Select which permissions your app requires regarding the mobile device.

  8. Select Portrait or Landscape as an initial (on launch) orientation.

  9. Select whether you want the status bar to be visible or hidden.

How it works...

Using the Standalone Application Settings dialog window, we can configure a large number of settings relevant to our mobile application.

See also

  • The Defining icons and images for Android development recipe

  • The Configuring standalone application settings for iOS applications recipe

 

Using the simulator


Software simulators are used when we want to quickly test a mobile app or a specific function of an app in progress. Using software simulators saves a lot of time during the development process.

How to do it...

The following steps will take you through the usage of a simulator:

  1. Select the test device from the available software simulators using the Test Target option of the Development drop-down menu.

  2. Click on Test, which is the last icon on the LiveCode toolbar.

  3. Once the simulator is running, you will have access to a Hardware pull-down menu, which provides you with additional options to interface with the simulator. When you select Device, you will be able to switch hardware devices to test.

How it works...

Software simulators are programs that allow us to simulate actual hardware devices.

See also

  • The Setting up your mobile environment for iOS development recipe

  • The Setting up your mobile environment for Android development recipe

 

Saving a standalone mobile app


Saving a standalone mobile application involves creating the app's binary file and a supportive file-folder structure.

Getting ready

Before saving a standalone version of your mobile app, you will need to review and configure options presented to you via the Standalone Application Settings dialog window.

How to do it...

To save a standalone mobile app, follow the given steps:

  1. Save your LiveCode project with the Save option under File, or use the keyboard shortcut Command + S (Mac) or Control + S (Windows).

  2. Select the Save as Standalone Application... menu option.

  3. Next, you will be prompted to select a location for the standalone application. The result will be a folder with subdirectories for each targeted distribution platform.

How it works...

Saving a standalone application is relatively straightforward. The important thing to remember is to review the settings in the Standalone Application Settings dialog window. When your LiveCode project is compiled, key information is taken from the selections you indicated in the aforementioned dialog window.

See also

  • The Configuring standalone application settings for iOS applications recipe

  • The Configuring standalone application settings for Android applications recipe

About the Author

  • Dr. Edward Lavieri

    Dr. Edward Lavieri is a veteran software engineer and developer with a strong academic background. He earned a Doctorate of Computer Science from Colorado Technical University, an MS in Management Information Systems (Bowie State University), an MS in Education (Capella University), and an MS in Operations Management (University of Arkansas). He has been creating and teaching computer science courses since 2002. Edward retired from the U.S. Navy as a Command Master Chief after 25 years of active service. He is the founder and creative director of three19, a software design and development studio. Edward has authored more than a dozen technology books, including several on Java.

    Browse publications by this author

Latest Reviews

(3 reviews total)
Ready order and great price. Can't wait to read the book.
The book has too few things about mobile development. It is more about LiveCode general programming.
LiveCode Mobile Development Cookbook
Unlock this book and the full library FREE for 7 days
Start now