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
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.
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.
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.
Once you have your Apple Developer account and LiveCode installed on your development computer, you are ready to get started with this recipe.
Log in to your Apple Developer account.
Download the iOS SDK.
Download and install Xcode.
Select Preferences... from the LiveCode drop-down menu.
Select Mobile Support from the left navigation pane of the Preferences window.
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.
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.
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.
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.
Unlike developing for iOS, you do not need a developer account to obtain the Android SDK.
Setting up your development environment so that you can develop Android apps using LiveCode is accomplished by the following steps:
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
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.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.
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.
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.
Select Preferences... from the LiveCode drop-down menu.
Select Mobile Support from the left navigation pane of the Preferences window.
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.
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.
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.
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.
You will require software to create the original graphics as well as to export them in the proper sizes.
The icons and images for iOS development are defined using the following steps:
Select the Standalone Application Settings... option from the File drop-down menu.
-
Click on the
icon in the top row of the Standalone Application Settings dialog box.
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.
Use the … buttons to the right of each icon / splash screen entry to upload your images.
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
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
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.
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.
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.
External graphic creation and editing software is required to create the original graphics as well as to export them in the proper sizes.
The icons and images for Android development are defined using the following steps:
Select the Standalone Application Settings... option from the File drop-down menu.
-
Click on the
icon on the top row of the Standalone Application Settings dialog box.
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.
Use the … buttons to the right of the Icon and Splash boxes to upload your images.
Ensure that your icon image is 72 x 72 and in the PNG format.
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.
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.
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.
To configure standalone application settings for iOS applications, follow the given steps:
Select the Standalone Application Settings... option from the File drop-down menu.
In the top section of the dialog window, ensure that the checkbox labeled iOS (see the following screenshot) is checked.
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.
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
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.
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
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
Using the following screenshot as a reference, configure the Requirements and Restrictions settings:
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.
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.
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.
To configure standalone application settings for Android applications, follow the given steps:
Select the Standalone Application Settings... option from the File drop-down menu.
In the top section of the dialog window, ensure that there is a check in the checkbox labeled Android.
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.
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)].
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.
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.
Select which permissions your app requires regarding the mobile device.
Select Portrait or Landscape as an initial (on launch) orientation.
Select whether you want the status bar to be visible or hidden.
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.
The following steps will take you through the usage of a simulator:
Select the test device from the available software simulators using the Test Target option of the Development drop-down menu.
Click on Test, which is the last icon on the LiveCode toolbar.
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.
Saving a standalone mobile application involves creating the app's binary file and a supportive file-folder structure.
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.
To save a standalone mobile app, follow the given steps:
Save your LiveCode project with the Save option under File, or use the keyboard shortcut Command + S (Mac) or Control + S (Windows).
Select the Save as Standalone Application... menu option.
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.
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.
