DWC FAQ: Frequently Asked Questions about the Dynamic Web Client

This page covers some of the most common questions about the Dynamic Web Client (DWC). See Dynamic Web Client (DWC) Overview for an introduction to the DWC, and Registering and Launching a DWC App for information on getting started.

Q: Can I run my existing BUI app in the DWC?

Yes, just ensure that the application has been enabled for both BUI and DWC deployment in Enterprise Manager. After doing so, EM will provide you with URLs to launch the application in both clients. By default, the BUI client uses the apps context while the DWC uses the webapp context. This means you can run your app in the DWC by simply changing the apps portion of the BUI URL to webapp.

See Registering and Launching a DWC App and Enterprise Manager: App Deployment for more information about registering and configuring your application.

Q: Can I write my BBj application to run in GUI, BUI, and the DWC?

Yes, you can write your application to run in all three clients using the standard BBj API that's available to all clients, and any code that runs in BUI will also work as designed in the DWC. However, the DWC introduces some new features and syntax that will not work in BUI or GUI. If you'd like to take advantage of some of the DWC's new features, you can make your BBj application behave differently depending on the client used. For example, you can add conditional code using the INFO() function to determine the runtime client:

    if (info(3,6) = "6") then
        rem We're running in the DWC, so add DWC-specific code here
    endif
Example Type: BBj

Q: When I run my existing BUI application in the DWC, the font size is larger, which causes some of the text to be truncated. What's the best way to deal with that?

Option 1: LEGACY_FONTS STBL("!COMPAT")

There are a few different ways to address that issue, but the quickest is to set the STBL("!COMPAT") for the LEGACY_FONTS key as described on the BBj STBL Formats documentation page.

Option 2: Change DWC font size CSS custom property

Another possibility is to change the value of the DWC's CSS custom property that defines the font size. By default, the DWC uses a font size of 14px, but you can change it to use an 8pt font like the BUI client does by adding the following code to your app:

css! = ":root { --dwc-font-size: 8pt; }"
BBjAPI().getWebManager().injectStyle(css!, 0)
Example Type: BBj

Because that redefines one of the DWC's CSS variables, the new font size is set globally, affecting every control in every window.

Option 3: Set font size on the BBjWindow

Another option would be to set the font size on a specific BBjWindow's panel, so that all the BBjControls on the window inherit the new size. Here's how to do that:

window!.setPanelStyle("font-size", "8pt")

Option 4: Manual or dynamic sizing

Of course, it's also possible to manually adjust the control sizes to accommodate the larger font size, and yet another solution would be to have the DWC dynamically size and position the controls in a window.

Q: I've heard that it's possible to build responsive web apps with the DWC. What's the advantage of this?

Creating a responsive layout for your applications optimizes them for different screen sizes and resolutions. Responsive design ensures that the application is easy to use and navigate, regardless of the device being used. Instead of creating different layouts to fit different sizes and resolutions, responsive apps check the size of the device and adjust themselves automatically to fit. Additionally, when you use CSS to define your app's layout, everything is handled by the end user's browser. That means there aren't any round trips between the client and server needed to size and position controls, making transitions as fast as possible. In addition to increased speed, the BBx developer no longer needs to write callback code to handle changes in the screen size or orientation.

Q: How do you define a BBjWindow to use CSS for a responsive layout?

The process includes three steps:

  1. Tell the DWC to ignore absolute sizes and positions for the controls added to a window by specifying $00100000$ for the flag value when adding the window. If you're using an ARC file, use the corresponding GRAVITY flag.

  2. Define custom CSS for the window's panel to specify a layout type, usually CSS Flexbox or Grid, and its properties. Although this can be included in an external CSS file, it's also possible to define the layout properties on the window's panel (the container element that serves as the parent for the controls on the window) via the setPanelStyle() API method.

  3. Now that the window has been configured for flow layout and the CSS is in place, add controls to the window as usual. They will be added consecutively and will be sized and positioned in accordance to the CSS that defines the window's layout. Here's a quick example showing how to set up a two-column grid on a BBjWindow using CSS Grid.

rem Create the main window
sysgui = unt
open (sysgui)"X0"
sysgui! = bbjapi().getSysGui()
window! = sysgui!.addWindow("Two-Column Grid", $00180093$)
window!.setPanelStyle("display", "grid")
window!.setPanelStyle("grid-template-columns", "auto 1fr")
window!.setPanelStyle("gap", "1em")
window!.setPanelStyle("padding", "2em")
Example Type: BBj