{"type":"doc","content":[{"type":"paragraph"},{"type":"paragraph","content":[{"text":"The first exercise guides you through creating a simple Hello World module that uses HTML code for the user interface. Your HTML can include dynamic data as ","type":"text"},{"text":"EJS","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495443"}}]},{"text":" (or Embedded JavaScript).","type":"text"}]},{"type":"paragraph","content":[{"text":"Before you proceed, make sure to create the example workspace as described ","type":"text"},{"text":"here","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164499730"}}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Create the UI","type":"text"}]},{"type":"paragraph","content":[{"text":"First, create a file named ","type":"text"},{"text":"example1.html","type":"text","marks":[{"type":"em"}]},{"text":" and put the following HTML content into it:","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"/profoundjs/modules/pjshello/example1.html","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"

Hello World

\n","type":"text"}]},{"type":"paragraph","content":[{"text":"You will notice that the content is not a full HTML document and does not include tags, such as and . 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.","type":"text"}]},{"type":"paragraph","content":[{"text":"The","type":"text"},{"text":" pui.submit()","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164496713"}}]},{"text":" 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.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Create Node.js server-side logic","type":"text"}]},{"type":"paragraph","content":[{"text":"Next, you will create the Profound.js module named ","type":"text"},{"text":"example1.js","type":"text","marks":[{"type":"em"}]},{"text":":","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"/profoundjs/modules/pjshello/example1.js","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"function example1() {\n pjs.display(\"example1.html\");\n}\n \nexports.run = example1;\n","type":"text"}]},{"type":"paragraph","content":[{"text":"The code uses the ","type":"text"},{"text":"pjs.display()","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164496602"}}]},{"text":" API to display the HTML to the user. ","type":"text"},{"text":"Note that qualifying the .html file with directory ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]},{"text":"pjshello","type":"text","marks":[{"type":"em"}]},{"text":" 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).","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Set Up the Workspace App Start Route","type":"text"}]},{"type":"paragraph","content":[{"text":"Configure the ","type":"text"},{"text":"example1.js","type":"text","marks":[{"type":"em"}]},{"text":" file as the workspace App Start Route (stateful), as described ","type":"text"},{"text":"here","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164499461#UsingWorkspaces-routes"}}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Try the Application Using the ","type":"text"},{"text":"App Start Route","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164499461#UsingWorkspaces-routes"}}]}]},{"type":"paragraph","content":[{"text":"Run the application using the ","type":"text"},{"text":"Launch App in Browser Tab","type":"text","marks":[{"type":"strong"}]},{"text":" option in the IDE, as described ","type":"text"},{"text":"here","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164499461#UsingWorkspaces-run"}}]},{"text":". ","type":"text"}]},{"type":"paragraph","content":[{"text":"This will open a browser and navigate to the following URL:","type":"text"}]},{"type":"paragraph","content":[{"text":"http://host:port/run/pjshello/","type":"text","marks":[{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":178,"type":"external","url":"https://docs.profoundlogic.com/plugins/servlet/confluence/placeholder/unknown-attachment?locale=en_US&version=2","height":30}}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Try the application using ","type":"text"},{"text":"PJSCALL","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495521"}}]},{"text":" on IBM i","type":"text"}]},{"type":"paragraph","content":[{"text":"Now, start a ","type":"text"},{"text":"Genie session","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164496306"}}]},{"text":" by navigating to the following URL:","type":"text"}]},{"type":"paragraph","content":[{"text":"http://puihost:port/profoundui/genie","type":"text","marks":[{"type":"em"}]}]},{"type":"paragraph","content":[{"text":"Where ","type":"text"},{"text":"puihost","type":"text","marks":[{"type":"em"}]},{"text":" is the sever or host name for where","type":"text"},{"text":" Profound UI","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/914620417"}}]},{"text":" is installed and ","type":"text"},{"text":"port","type":"text","marks":[{"type":"em"}]},{"text":" 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.","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"You are now ready to call your application. Use the following command and the Hello World application should appear within your interactive Genie session:","type":"text"}]},{"type":"codeBlock","content":[{"text":"PJSCALL MODULE(example1) DIRECTORY(pjshello)","type":"text"}]},{"type":"paragraph","content":[{"text":"In order to use the ","type":"text"},{"text":"PJSCALL ","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495521"}}]},{"text":"command, you must have a valid license key that includes ","type":"text"},{"text":"Genie ","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495864"}}]},{"text":"and the ","type":"text"},{"text":"Profound.js Connector","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495792"}}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Try the application using a ","type":"text"},{"text":"Proxy Program","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495581"}}]},{"text":" on IBM i","type":"text"}]},{"type":"paragraph","content":[{"text":"Using a Proxy Program object allows you to call your Node.js application with a standard IBM i CALL.","type":"text"}]},{"type":"paragraph","content":[{"text":"If the library PJSHELLO does not yet exist, create it using the following command:","type":"text"}]},{"type":"codeBlock","content":[{"text":"CRTLIB LIB(PJSHELLO) TYPE(*TEST) TEXT('Profound.js Hello World Exercises')","type":"text"}]},{"type":"paragraph","content":[{"text":"Next, create the Proxy Program:","type":"text"}]},{"type":"codeBlock","content":[{"text":"PJSCRTPRXY PGM(PJSHELLO/EXAMPLE1)","type":"text"}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"codeBlock","content":[{"text":"CALL PJSHELLO/EXAMPLE1","type":"text"}]},{"type":"paragraph","content":[{"text":"Before you can use ","type":"text"},{"text":"Proxy Programs","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495581"}}]},{"text":", you must have a valid license key that includes ","type":"text"},{"text":"Genie ","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495864"}}]},{"text":"and the ","type":"text"},{"text":"Profound.js Connector","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495792"}}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Expand the application to use dynamic fields","type":"text"}]},{"type":"paragraph","content":[{"text":"So far, your application only presents static HTML content.","type":"text"}]},{"type":"paragraph","content":[{"text":"To introduce dynamic content, edit your code as follows:","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"/profoundjs/modules/pjshello/example1.html","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"html/xml"},"content":[{"text":"

Hello World

My name is <%= myname %>

\n","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":5},"content":[{"text":"/profoundjs/modules/pjshello/example1.js","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function example1() {\n pjs.define(\"myname\", { type: \"char\", length: 50, varying: true });\n myname = \"Profound.js\";\n pjs.display(\"example1.html\");\n}\n \nexports.run = example1;\n","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"pjs.define()","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495692"}}]},{"text":" API is used to declare a dynamic field. The following ","type":"text"},{"text":"EJS","type":"text","marks":[{"type":"link","attrs":{"href":"https://profoundlogicsupport.atlassian.net/wiki/spaces/PUI/pages/164495443"}}]},{"text":" syntax is used to include the field in the HTML content: <%= myname %>.","type":"text"}]},{"type":"paragraph","content":[{"text":"After saving your changes, you can try rerunning the application. The ","type":"text"},{"text":"myname","type":"text","marks":[{"type":"em"}]},{"text":" field is dynamically passed to the HTML content.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Asking for user input","type":"text"}]},{"type":"paragraph","content":[{"text":"The next set of changes asks the user for input via the browser interface. The field ","type":"text"},{"text":"yourname","type":"text","marks":[{"type":"em"}]},{"text":" receives information from a textbox, and the Boolean flag ","type":"text"},{"text":"exit","type":"text","marks":[{"type":"em"}]},{"text":" is set to true automatically when the user clicks the exit button.","type":"text"}]},{"type":"heading","attrs":{"level":5},"content":[{"text":"/profoundjs/modules/pjshello/example1.html","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"html/xml"},"content":[{"text":"

Hello World

My name is <%= myname %>

What is your name? \" />

Welcome <%= yourname %>

\n\n","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":5},"content":[{"text":"/profoundjs/modules/pjshello/example1.js","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"function example1() {\n pjs.define(\"myname\", { type: \"char\", length: 50, varying: true });\n pjs.define(\"yourname\", { type: \"char\", length: 50, varying: true });\n pjs.define(\"exit\", { type: \"boolean\" });\n \n myname = \"Profound.js\";\n while (!exit) {\n pjs.display(\"example1.html\");\n }\n}\n \nexports.run = example1;\n","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"After you rerun the application, you should see the following output:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":178,"type":"external","url":"https://docs.profoundlogic.com/plugins/servlet/confluence/placeholder/unknown-attachment?locale=en_US&version=2","height":30}}]},{"type":"paragraph"}],"version":1}