Page Comparison

...

PhoneGap is a popular open-source tool that lets you build a mobile app from web technology. With PhoneGap 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 Store or Google's Play. This guide is intended to help you understand how to use the Profound UI framework in a PhoneGap project.

...

We are aware that not all Profound UI customers have these skills ( or the time to learn them! ) for 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 Profound UI Mobile, and only use PhoneGap 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 PhoneGap.  However, there are a few circumstances where PhoneGap is necessary. In particular, with PhoneGap 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 plugins besides those provided with the Profound UI Mobile client

Customers who do not have the necessary prerequisite skills, but need one of these 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.

...

The PhoneGap 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 it's its usage here.  Instead, we recommend that you visit Phonegap.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 PhoneGap, come back to this site to learn how to use Profound UI Mobile in your PhoneGap project.  Here are a list of key things you'll probably want to learn from the PhoneGap site:

• Whether to use the command line interface (CLI) or GUI version of PhoneGap.  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 PhoneGap
• 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

...

• Navigate to the directory where PhoneGap 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.
• Custom Copy any custom widgets (such as the sample Google Maps widget) that you wish to use should also be copied.include on the device

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

...

Step 4: Create the JavaScript That Drives Your Application

In the last step, we recommending recommended loading an app.js file that contains the JavaScript for your application.  You will need to write this script, and it should provide the code needed to control your application.  If your application is a program running on the IBM i server, this file will contain the information that Profound UI needs to connect to IBM i and run your application.  If you plan to do something more sophisticated such as create an offline application, this file should contain the JavaScript to display the screens and interact with the user. This code can also be used to do additional things on the device such as take pictures, scan barcodes, read GPS coordinates, or handle the Android back button, all depending on how your app should work.  A full explanation of everything you can do here is beyond the scope of this document. Instead, this document will provide an example of a minimal app.js file that simply connects to your IBM i.

Here's a simple app.js skeleton:

// (a) Configure Profound UI settings

pui["serverURL"] ="http://your-ibm-i:8080";
pui["language"] = "en_US";
pui["no focus"] = true;

// (b) Change the way the "loading" screen looks

pui["loading animation"]["text"] = "One moment...";
pui["loading animation"]["top"] = 5;
pui["loading animation"]["left"] = 5;


// (c) This code starts the Profound UI framework.

window.onload = function() {
  pui.run({ "mobile": true });
};


// (d) Set up a JavaScript function that runs when the device
//     has initialized, here:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  // Put custom code here that runs after Cordova has loaded
  // device APIs are not available until this event has fired
}

The part of the code at (a) referenced above sets some Profound UI settings:

• "serverURL" = the IBM i server that Profound UI will connect to. Use https instead of http if you want to use TLS/SSL to make a secure connection. Do not add anything after the port number, the path to the objects on IBM i will be automatically added by Profound UI.

...

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 documentation for more information. The pui.show() API can be used to display screens from your JavaScript code, this . 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 6.2.6. Since this is subject to change with different versions of PhoneGap, this should be only used as an example.

...