Before you proceed, make sure to create the example workspace as described here.
Create the UI
First, create a file named example1.html and put the following HTML content into it:
You will notice that the content is not a full HTML document and does not include tags, such as <html> and <body>. This is because Profound.js applications are single page applications where the browser page is never reloaded as the user navigates from screen to screen. Therefore, your HTML file must only include the body content for rendering.
The pui.submit() API in your HTML page is a client-side API that the submits a browser response and passes control back to server-side Node.js.
Create Node.js server-side logic
Next, you will create the Profound.js module named example1.js:
The code uses the pjs.display() API to display the HTML to the user. Note that qualifying the .html file with directory pjshello is optional. If the file is not qualified, the IBM i library list is used to search for the file when the application is called from IBM i via the PJSCALL command or proxy program (see below).
Set Up the Workspace App Start Route
Configure the example1.js file as the workspace App Start Route (stateful), as described here.
Try the Application Using the App Start Route
Run the application using the Launch App in Browser Tab option in the IDE, as described here.
This will open a browser and navigate to the following URL:
Where host is the Profound.js server host name or IP address and port is the Profound.js port number. You should see the following:
Try the application using PJSCALL on IBM i
Now, start a Genie session by navigating to the following URL:
Where puihost is the sever or host name for where Profound UI is installed and port is the port number used by Profound UI. Please note, this is not the same as the Profound.js server host name and port number.
Next, sign into the Genie session by using your IBM i user id and password. Then, edit your library list to include libraries PROFOUNDUI and PROFOUNDJS or their equivalents if you installed Profound UI and Profound.js into non-default libraries.
You are now ready to call your application. Use the following command and the Hello World application should appear within your interactive Genie session:
Note, if you are testing and creating Profound.js modules on your PC, you can use the PJSMYIP command before running PJSCALL to point Genie to the Profound.js installation on your PC.
Try the application using a Proxy Program on IBM i
Using a Proxy Program object allows you to call your Node.js application with a standard IBM i CALL.
If the library PJSHELLO does not yet exist, create it using the following command:
Next, create the Proxy Program:
Finally, you can call your program from a Genie session using the following command and the Hello World application should appear within your interactive Genie session:
Expand the application to use dynamic fields
So far, your application only presents static HTML content.
To introduce dynamic content, edit your code as follows:
After saving your changes, you can try rerunning the application. The myname field is dynamically passed to the HTML content.
Asking for user input
The next set of changes asks the user for input via the browser interface. The field yourname receives information from a textbox, and the Boolean flag exit is set to true automatically when the user clicks the exit button.
After you rerun the application, you should see the following output: