BBj 24.02+ DWC Training

Overview

This section covers registering a simple "Hello World" BBj program to run in BUI and the new Dynamic Web Client using the information from the previous section.

Concepts Covered in This Section

• Registering and launching BBj GUI apps in the BUI and DWC clients using Eclipse and Enterprise Manager

Before running your graphical BBj application in the BUI or DWC client, you must first register it as a web app in Enterprise Manager or by running code that accomplishes the task via the BBj admin API (see the BBjAppServer documentation for reference material).  Registering an app means that you'll provide all the information necessary so that BBj can launch your application in a browser.  Some of the necessary information includes the name of the app, which is used to create a unique URL for the app.  You will also need to define the full path to the BBj program to run and the directory in which the app will run (also known as the working directory).  The working directory won't matter for some of the class's simple examples, but it can be important if your app expects to load auxiliary resources such as an ASCII resource file, images, etc.  Once an app has been registered, anyone with the URL and access to the server can run the app in a browser on a desktop, laptop, tablet, or smartphone.

If you normally develop code in Eclipse, you’re probably familiar with clicking on the [Run BUI Program] toolbar icon () that registers the program that you're currently editing in the BDT as a BUI program and then launches it in a browser window or tab (depending on your Eclipse configuration, which is covered later in this section).  Newer versions of the BDT plug-in for Eclipse include a similar toolbar button (  ) that does the same thing, except that it launches the program in a browser window or tab and uses the DWC client instead of the BUI client. This is the quickest way to get a DWC app up and running, as it only requires a single click.  If you're still using an older version of the BDT plug-in for Eclipse and it's not feasible to update, then you can accomplish the same task using the [Run BUI Program] toolbar button and then making a small change to the URL to change the client from BUI to the DWC.  Here are the step-by-step instructions:

1. Load your GUI app into the Eclipse BDT editor.

2. Launch the app via the Eclipse toolbar icon:

1. (New versions of Eclipse and the BDT Plug-in) Click the [Run DWC Program] toolbar icon ().
2. (Old versions of Eclipse and the BDT Plug-in) Click the [Run BUI Program] toolbar icon ().  In the newly-launched BUI app, change the URL context from 'apps' to 'webapp'.  Alternatively, you can copy the BUI URL, open a new tab in your browser, then paste in the copied URL.  After pasting, change the URL context from 'apps' to 'webapp' and hit the [Return] key to relaunch the app in the DWC.

Clicking on either of the toolbuttons will cause the BDT will register the app as both a BUI and DWC application, then it will launch the app in a browser window.  If you have Eclipse configured to use its internal web browser, the app will display in Eclipse's built-in browser - usually in a tab next to your editor, although you can drag and drop. the tab to a different pane position if desired to see both your program's source code and its execution simultaneously.  You can configure Eclipse to use your system's default web browser by showing its Preference window, then choosing General > Web Browser from the tree on the left.  After doing so, the next time you launch an app via the toolbar icon it will display in a tab in your default web browser, such as Google Chrome or Microsoft Edge.  This will be the preferred way to launch a DWC app later on in the class, as we will be accessing the browser's Developer Tools to view the JavaScript console and inspect the Document Object Model (DOM) and elements (BBjControls) on the page.

For example, if your BUI application is named 'GUISample', it will be loaded via the following BUI URL: http://localhost:8888/apps/GUISample.  To run the same application in the Dynamic Web Client, change the URL to the following DWC URL: http://localhost:8888/webapp/GUISample.

If you don’t normally write your code in Eclipse, you can register and launch a DWC application by:

1. Registering the app in Enterprise Manager.  After launching EM, log in as 'admin' (with the password of 'admin123' if you haven't changed the admin password for your system).  In the EM Navigator left pane, expand the tree to show the Applications page (Web > App Deployment > Applications).  Double-click on the Applications node to load the list of registered applications in the right pane.  In the Applications pane, click the [Add a new app] button, then fill out the Application Name, Program File, and Working Directory with appropriate values for your app.  Ensure that the 'DWC Web App Enabled' checkbox is selected, then click the [Save] button in the top left.

2. Launch the app in the Dynamic Web Client.  To do this, select the [Launch In Browser (DWC)] button at the top of the registration page.

Here is a screenshot of what the registration page would look like, with highlights on the button to launch the app in the browser and the checkbox that enables the app for the Dynamic Web Client:

Notes

1) Default BUI and DWC Contexts

The previous examples replaced the default BUI context of 'apps' with the default DWC context of 'webapp'.  The actual context can be configured in EM as shown in the following screenshot (navigate to Web > Context Configuration in the left pane).  If you override the default context mappings, you will need to save your changes and then restart the root context.  After doing so, launching a BUI/DWC app from Enterprise Manager or Eclipse will result in the app being loaded in the browser using an updated URL with the custom context in the path.

2) Configuring the Browser in Eclipse
If Eclipse is configured to use its internal browser, you can change this via its Preferences dialog.  Load the Preferences, then go to General > Web Browser as shown below and select the 'Use external web browser' radio button.  You may either select the 'Default system web browser' in the list of external web browsers or select a specific browser.