Taking an App From GUI to BUI to DWC

Overview

This page describes how to move an existing BBj GUI application toward a DWC-ready layout and appearance. The example application uses edit boxes, a button, callbacks, and the process_events model, and can be run in the thin client, BUI, and DWC.

The page shows the original GUI-based version first, then explains the DWC-specific updates used to improve the application layout and appearance. These updates include enabling flow layout, applying CSS layout rules, setting control styles, using DWC control attributes, and reviewing runtime behavior in the browser.

Starting with the Original GUI Application

The starting application uses the GUISample.bbj program. This program displays First Name and Last Name edit boxes and a Say Hello button: when the button is selected, the program displays a greeting message using the entered values.

GUISample.bbj

rem /**
rem  * GUISample.bbj
rem  * This sample GUI program is the starting point for the exercises in Chapter 1: GUI to BUI to DWC.
rem  * It's a simple "Hello World" GUI app that runs in GUI, BUI, and DWC.
rem  */

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

st! = wnd!.addStaticText(wnd!.getAvailableControlID(),10,10,200,20,"First Name:")
ed_firstname! = wnd!.addEditBox(wnd!.getAvailableControlID(),210,10,200,20,"")
st! = wnd!.addStaticText(wnd!.getAvailableControlID(),10,40,200,20,"Last Name:")
ed_lastname! = wnd!.addEditBox(wnd!.getAvailableControlID(),210,40,200,20,"")
btn! = wnd!.addButton(wnd!.getAvailableControlID(),10,70,400,30,"Say Hello")

wnd!.setCallback(BBjAPI.ON_CLOSE,"byebye")
btn!.setCallback(BBjAPI.ON_BUTTON_PUSH,"sayhello")

process_events

byebye: bye

sayhello:
    firstname$=ed_firstname!.getText()
    lastname$=ed_lastname!.getText()
    a=msgbox("Hello "+firstname$+" "+lastname$,64,"Hello World")
return

The program can run in the thin client, BUI, and DWC. Because the controls are created with fixed position and size values, the layout can be adjusted for DWC by using flow layout and CSS layout rules.

Running the Application in GUI, BUI, and DWC

Run the `GUISample.bbj` program in the thin client, BUI, and DWC to compare how the same application displays in each client. In one of the clients, enter values in the First Name and Last Name fields, then select Say Hello. The program displays a message box that uses the entered values.

The application logic is the same in each client, but the visual layout may differ when the program runs in a browser. This provides the starting point for updating the application layout and appearance for DWC.

When the Say Hello button is selected:

Enabling Flow Layout and Applying CSS Layout Rules

BBj applications create windows and controls by calling the appropriate add methods on BBjSysGui or BBjWindow objects. For example, the BBjSysGui::addWindow method can create a top-level window and supports syntax that includes a window creation flags parameter.

In DWC, the $00100000$ automatic layout flag enables dynamic flow layout for the window. When this flag is used, DWC ignores the fixed position and size values for controls contained in the window.

The following example shows the updated window creation statement used for the DWC version of the sample application:

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

The $00100083$ flag value includes the $00100000$ automatic layout flag.

Applying CSS Grid with setPanelStyle()

After flow layout is enabled, CSS layout rules can be applied to the window panel. The BBjWindow::setPanelStyle() method sets CSS properties on the content panel of BBjWindow.

The following example applies CSS Grid layout rules to the window panel:

wnd!.setPanelStyle("display","grid")
wnd!.setPanelStyle("grid-template-columns","180px auto")
wnd!.setPanelStyle("gap","5px")
wnd!.setPanelStyle("padding","15px")

These rules define a two-column grid, add spacing between rows and columns, and add padding around the window content.