Page Comparison

...

Apache Cordova is a popular open-source tool that lets you build a mobile app from web technology. With 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 Apache Cordova project.

Prerequisites

...

• Knowledge of Apache Cordova (can be learned at httphttps://Apache Cordova.comcordova.apache.org/)
• 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 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 Apache Cordova.  However, there are a few circumstances where Apache Cordova is necessary. In particular, with 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 Apache Cordova plugins besides those provided with the Profound UI Mobile client

...

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 Apache Cordova.com https://cordova.apache.org/ 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 Apache Cordova, come back to this site to learn how to use Profound UI Mobile in your Apache Cordova project.  Here are is a list of key things you'll probably want to learn from the Apache Cordova site:

• Whether to use the command line interface (CLI) or GUI version of Apache 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 Apache 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 Apache Cordova's web sitewebsite. Once you understand how to create a simple web app (such as a 'hello world' app in Apache 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 Apache 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 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 Apache Cordova project.

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

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. AlternatelyAlternatively, you can replace the 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 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 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 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 Apache Cordova 6.2.6. Since this is subject to change with different versions of Apache 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 Apache Cordova.   Refer to the Apache Cordova documentation for information on how to test, debug, build and distribute your app.