Graffiti Composer 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.
The Graffiti Composer is an online WYSIWYG tool for designing web apps. To get started, go to the https://srv1.basis.cloud/graffiti-composer/.
The Graffiti Composer is divided into three main panels:
Palette & Structure
The Palette & Structure panel, located on the left side, is where developers add controls and layouts and see how they are organized within the app.
Palette
The top half of the panel is the palette, which has the Components and Global CSS tabs. The Components tab has the controls and layouts to drag and drop into the second panel, the Canvas. The Global CSS tab defines global styles across all controls.
Structure
The lower half of the panel is the structure, which shows how the layouts and controls are nested. Each control in a project is shown in a file folder structure, allowing for quick navigation to specific components are removing unwanted parts with the [Delete] button.
Canvas
The canvas panel, in the middle of the screen, is the primary workspace for displaying and arranging the UI. Developers add controls from the Components tab inside the Palette & Structure panel, and can rearrange them once placed onto the canvas. In the top toolbar, there are buttons that can change the screen view of the canvas to see how the layout changes for desktops, tablets, and phones. Developers can use this to see in real-time how their web apps dynamically change based on the screen size. For more screen space to test out designs, developers can click the [Preview] button.
Properties
The right-hand properties panel contains the Properties and Customization tabs. These menus appear when a developer clicks on the controls in the canvas. The Properties tab has commonly used appearance choices for that control, and the Customization tab provides a place to define control styling.
Note:
In the General settings of the Properties tab, give each control a unique name. The DWC program can then get individual controls with BBjWindow::getControl(String name).
Testing and Exporting
After creating a UI layout for a web app, click the [...] button and select "Save As" to download the layout as a JSON file. Developers can then use that JSON file using the Graffiti Engine to recreate the layout inside an application.
Feedback:
BASIS would appreciate your feedback about this feature. Please share your feedback on the BBj-Developer community forum.
See Also