Page tree

Versions Compared

Key

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

...

  • Add <link> and <script> HTML tags to load the Profound UI runtime environment:
Code Block
themeEclipse
languagehtml/xml
themeEclipse
    <link rel="stylesheet" type="text/css" href="profoundui/profoundui.css" />
    <script type="text/javascript" src="profoundui/runtime.js"></script>

 


  • Add additional <link> or <script> tags for any additional CSS or JavaScript files you copied into your project.

 


  • We recommend creating a separate JavaScript file for your application.  For example, you might call it app.js and therefore add a tag like this:
Code Block
themeEclipse
languagehtml/xml
themeEclipse
    <script type="text/javascript" src="app.js"></script>

 


  • 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.

    Eclipse
    Code Block
    theme
    languagehtml/xml
    themeEclipse
        <div id="pui">
        </div>


  • Click here to download an index.html file that was tested with PhoneGap 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 versions might require changes to this file, it should be considered an example, only.

...

In the last step, we 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:

Code Block
languagejavascript
themeEclipselanguagejavascript
// (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
}

...