Taking an App From GUI to BUI to DWC

Overview

Traditional BBj GUI applications often use fixed control positions and sizes. These applications can run in BUI and DWC, but a DWC application can provide a more web-like experience when the layout is adjusted for browser-based rendering.

When moving a GUI application to DWC, consider replacing fixed x, y, width, and height values with DWC-supported layout and styling options. This can include enabling flow layout, applying CSS layout rules to the window panel, styling individual controls, and using DWC control attributes to adjust appearance and behavior.

GUI, BUI, and DWC Behavior

An existing BBj GUI application can often run in the thin client, BUI, and DWC without major code changes. However, the application may still look and behave like a desktop application when it runs in a browser.

DWC supports browser-based layout and styling options that can be used to improve the application’s appearance and behavior. When updating a GUI application for DWC, review the window layout, control placement, control size, and control styling to determine whether DWC-specific layout or styling changes are needed.

Using Flow Layout

BBj GUI applications commonly create windows and controls by specifying fixed position and size values. In DWC, a window can use flow layout so that controls are arranged by the browser instead of relying on fixed x, y, width, and height values.

To enable flow layout for a DWC window, include the appropriate window creation flag when creating the window. When flow layout is enabled, DWC ignores the fixed position and size values for controls contained in the window.

For example:

wnd! = BBjAPI().openSysGui("X0").addWindow(10,10,450,140,"Hello BBj DWC",$00100083$)

After flow layout is enabled, controls can be arranged using CSS layout rules applied to the window panel.