Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...


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

Prerequisites

...


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 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 https://cordova.apache.org/ and 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 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 website. 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. Alternatively, 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.

...

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 Cordova documentation for information on how to test, debug, build and distribute your app.


Child pages (Children Display)