Displaying Screens from a Web Page

If you are using our Open Access handler, you do not need to create a special web page to display your screens. They will be displayed automatically when your RPG program is run in a Profound UI session, Genie, or Atrium.

However, if you are using our open source offering, or if you are writing screens to be displayed from PHP, CGI, or directly from JavaScript, you'll need to know how to create an HTML page that can bring up a Profound UI screen by calling the APIs in the Profound UI framework. This page describes that process.

To get started, let's look at a simple HTML page that loads in the necessary parts:

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Profound UI</title>
  <link href="../../../proddata/css/profoundui.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="../../../runtime.js"></script>
  <script type="text/javascript">
    window.onload = function() {
      pui.controller = "YOUR-PROGRAM";
      pui.start();
    };
  </script>
</head>

<body>
  <div id="pui"></div>
</body>

</html>

This is a simple HTML page that does not display anything, by itself. The two <script> tags are very important, however. The first one loads the Profound UI runtime into the browser's memory. This is the file that contains our framework, and all of the APIs that you can call. The second <script> tag is where you'll write Javascript code that invokes the framework, and starts up your program.

The Profound UI framework always draws screens into a <div> tag that has an id of "pui". You'll notice that in this HTML file, the body of the HTML document is empty except for the aforementioned <div> tag. The div tag itself, is likewise empty. This is because the Profound UI framework will retrieve that div, and will replace its contents with the screen to be displayed.

Since pui.controller has been set to your program, the framework will send responses from the screen to your program. It will also expect your program to send JSON data to tell it which screens to display. For complete examples of this HTML file, as well as sample programs that display screens, see the "examples" subdirectory in the open source distribution.