DWC logoGraffiti Engine Overview (Preview Feature)

Work in Progress:

This feature is still a work in progress, so some sections may be incomplete or subject to change. BASIS would appreciate your feedback about this feature. Please share your feedback on the BBj-Developer community forum.

In BBj 25.00 and higher, the Graffiti Engine uses the JSON file generated from the Graffiti Composer for web applications.

Using the graffiti classpath added in BBj 25.00, BBjControls are rendered into a BBjWindow using GraffitiLayout.render(BBjWindow window, BBjString filename).

Parameter Description
window The BBjWindow to contain the rendered BBjControls.
filename The pathname to the JSON file generated from the Graffiti Composer.

The BBjControls inside the window can be accessed from the BBjWindow::getControl(String name) method or one of the cast methods like BBjWindow::getButton.

Note:

The ID in the Graffiti Composer is not the BBjControl ID.

Example form.json

{
  "podId": 1,
  "registryId": "container",
  "properties": {
    "padding": "20px",
    "flex-align-self": "AUTO",
    "justify-self": "STRETCH",
    "grid-align-self": "STRETCH"
  },
  "styles": {},
  "version": "1.0",
  "parentId": -1,
  "children": [
    {
      "podId": 2,
      "registryId": "button",
      "properties": {
        "horizontalAlignment": "MIDDLE",
        "flex-align-self": "AUTO",
        "theme": "DANGER",
        "text": "Close Program",
        "justify-self": "STRETCH",
        "grid-align-self": "STRETCH",
        "expanse": "MEDIUM",
        "enabled": true,
        "name": "CloseButton"
      },
      "styles": {},
      "parentId": 1,
      "children": []
    }
  ],
  "globalCSS": ""
}

Example

Note:

The Graffiti Engine only works for DWC programs. To get started with DWC app deployment, see Registering and Launching a DWC App.

rem ' Register a callback for a BBjButton made in the Graffiti Composer
rem ' Use the session-specific classpath graffiti to run this program

use ::!!bbj/GraffitiLayout.bbj::GraffitiLayout 

api! = BBjAPI()
sysgui! = api!.openSysGui("X0")

wnd! = sysgui!.addWindow("Graffiti Layout Demo", $01111000$)

layout! = "form.json"
GraffitiLayout.render(wnd!, layout!)

btn! = wnd!.getButton("CloseButton")

btn!.setCallback(BBjButton.ON_BUTTON_PUSH, "eoj")

process_events

eoj:
release

Example Output

Feedback:

BASIS would appreciate your feedback about this feature. Please share your feedback on the BBj-Developer community forum.

See Also