Page Comparison

Introduction

PhoneGap Apache Cordova is a popular open-source tool that lets you build a mobile app from web technology. With PhoneGap Apache Cordova it's possible to generate apps for all of the popular mobile platforms. These apps are indistinguishable from native mobile apps, and can be distributed through stores such as Apple's App Store or Google's Play. This guide is intended to help you understand how to use the Profound UI framework in a PhoneGap Apache Cordova project.

Prerequisites

The PhoneGap Apache Cordova method of creating a mobile app requires web programming skills. Here is a short summary of the knowledge you should have before you begin:

• Knowledge of PhoneGap Apache Cordova (can be learned at http://phonegapApache Cordova.com)
• Understand how to write HTML, CSS and JavaScript code
• Able to debug web applications using a web browser's developer tools
• Knowledge of writing and testing Profound UI Rich Displays, including those designed for mobile environments

We are aware that not all Profound UI customers have these skills or the time to learn them! For that reason, we provide the Profound UI Mobile Client, which is a very easy way to deploy mobile apps created with Profound UI mobile. If you are new to mobile apps, we recommend that you start with the Profound UI Mobile Client, and only use PhoneGap Apache Cordova if it is deemed necessary. Most Profound UI applications designed for mobile will work very nicely in the Profound UI Mobile client without a need for the developer to use PhoneGapApache Cordova.  However, there are a few circumstances where PhoneGap Apache Cordova is necessary. In particular, with PhoneGap Apache Cordova you can:

• Embed your own JavaScript code into the app that is available when you are not connected to a network
• Create an app with your own logo on it that can be deployed through the Apple App Store, Google Play, or similar stores
• Provide support for platforms that Profound Logic does not support with the Profound UI Mobile client
• Create an app that does not require the user to configure a host name
• Add in and use additional PhoneGap Apache Cordova plugins besides those provided with the Profound UI Mobile client

Customers who do not have the necessary prerequisite skills, but need one of the features that Profound UI Mobile client does not support may wish to consider hiring Profound Logic on a consulting basis to help create their app.  If this option interests you, please contact Profound Logic Sales.

Creating Your App

Step 1: Set Up and Learn

...

Apache Cordova

PhoneGap Apache Cordova is actively maintained by a large group of individuals. As such, it is constantly changing, so it is not practical for Profound Logic to document its usage here.  Instead, we recommend that you visit PhonegapApache Cordova.com and read their documentation about how to get started with creating your own web-based mobile app.  Once you understand the basics of creating a mobile app with PhoneGapApache Cordova, come back to this site to learn how to use Profound UI Mobile in your PhoneGap Apache Cordova project.  Here are a list of key things you'll probably want to learn from the PhoneGap Apache Cordova site:

• Whether to use the command line interface (CLI) or GUI version of PhoneGapApache Cordova.  Profound Logic's developers prefer the CLI version, finding it simpler to use. But, either one will work fine with Profound UI.
• How to Install PhoneGapApache Cordova
• Create a skeleton ("Hello World") app
• Test your app in a PC Browser
• Test your app on a device
• Make modifications to your app
• Change the logo, splash screen, and other properties you wish to set in your app
• Build an app that can be distributed and installed onto a device
• Deploy your app through the Apple App Store, Google Play, or similar stores

All of this and much more should be learned from PhoneGapApache Cordova's web site. Once you understand how to create a simple web app (such as a 'hello world' app in PhoneGapApache Cordova) then you can come back to this document, and learn how to add Profound UI to your project.

...

You can embed your own documents into the app you create with PhoneGapApache Cordova. Objects stored inside the app are served directly from the device itself, and are available when the network is not accessible. This is useful when you want to write apps that can run without a network connection.  It is also a great way to make your app load faster, since the files don't have to be downloaded over the Internet which can sometimes be a slow link.  On the other hand, when you want to make changes to these files (such as when you install a new version of Profound UI and you need to update the Profound UI code) you would have to re-build the app and deploy it to all of the devices that were using it. This guide assumes that you want to load Profound's runtime JavaScript framework into the device since this eliminates about 850 kb of data that otherwise would have to be downloaded to the device over the network each time the app is run. To do that, follow these steps:

• Navigate to the directory where PhoneGap Apache Cordova put the web code for your app (such as the index.html file)
• Create a profoundui subdirectory
• Create a profoundui/images subdirectory
• Copy the runtime.js file from the /www/YOUR-INSTANCE/profoundui/proddata/js directory on your IBM i to the profoundui directory
• Copy the profoundui.css file from the /www/YOUR-INSTANCE/profoundui/proddata/css directory on your IBM i to the profoundui directory
• Copy all icons from the /www/YOUR-INSTANCE/profoundui/proddata/css/images directory on your IBM i to the profoundui/images directory
• Copy any other files (such as JavaScript, CSS, images, JSON displays, etc) that you'd like to include on the device
• Copy any custom widgets (such as the sample Google Maps widget) that you wish to include on the device

You should now have all of the necessary objects needed for Profound UI's runtime environment copied into your PhoneGap Apache Cordova project.

Step 3: Modify (or Create) the Index.html File

PhoneGap Apache Cordova starts your application by loading the index.html file in your project. You should use this file to load the appropriate JavaScript and CSS files into memory, and to run the code that executes your app. When you created the app skeleton in Step 1, it included an index.html file that you can modify. Alternately, you can replace the PhoneGap Apache Cordova generated file with one that you create yourself, depending on what works best for you.  You should add the following to the index.html file to make it work with Profound UI.

...

• Inside the <body> tag of your html document, you will need a <div> tag with an id of 'pui'. The tag should start out empty, but Profound UI will use it to render the application screens.

  Code Block
  language html/xml theme Eclipse
  <div id="pui"> </div>

  
  

• Click here to download an index.html file that was tested with PhoneGap Apache Cordova 6.2.6. This file only loads the minimal Profound UI runtime and does not include other custom CSS or JavaScript files. Since it is possible that newer PhoneGap Apache Cordova versions might require changes to this file, it should be considered an example, only.

...

After this event fires, it is possible to use hardware device features such as the camera, GPS, accelerometer, etc. There are other events available depending on the platform. See the PhoneGap Apache Cordova documentation for more information. The pui.show() API can be used to display screens from your JavaScript code. This is particularly useful if you want to show Rich Display screens without a network connection.

Click here to download an example of an app.js file that has been tested with PhoneGap Apache Cordova 6.2.6. Since this is subject to change with different versions of PhoneGapApache Cordova, this should be only used as an example.

...

Once your app.js script has been written, you are ready to run your Profound UI Mobile application, deployed with PhoneGapApache Cordova.  Refer to the PhoneGap Apache Cordova documentation for information on how to test, debug, build and distribute your app.