The BGI Designer is a visual GUI builder in the BambooBasic IDE. You lay out a dialog - its window, buttons, menus, lists and the rest of the BGI gizmos - set their properties, and name the functions that handle their events. The IDE writes the code that calls those functions.

The designer works on a BGI Application: a .bam file with a .bam.bgi file beside it, which holds the dialog. To make one, use File > New > BGI Application and choose where to save it. The IDE writes both files - the program from a template, and a dialog called MyDialog - and opens the dialog in the designer.

To switch between the designer and the source:

• View > Designer View (it reads Source View while the designer is showing)
• Ctrl+Shift+D
• The Designer View and Source View buttons on the toolbar

These work for any file with a .bam.bgi beside it. Each open file remembers which view it was last in.

• Toolbox (left) - double-click a gizmo type to add one to the dialog.
• Dialog (centre) - click a gizmo to select it, and drag it into place. Click the dialog itself for its own properties.
• Properties (right) - the selected gizmo's name, text, position, size and parent, its event handlers, and what its type needs: a menu's items, a tab control's tabs, a list view's columns, a toolbar's buttons, a spinner's range, and so on.

Gizmo types: Button, BitmapButton, Label, TextBox, MultiLineTextbox, CheckBox, RadioButton, RadioGroup, GroupBox, Panel, ScrollPanel, ListBox, ComboBox, TreeView, ListView, TabControl, Menu, Toolbar, StatusBar, Trackbar, Spinner, ProgressBar, VScrollbar, HScrollbar, DatePicker, TimePicker, PictureBox, RichTextBox, Link, HTMLView and Canvas.

A gizmo goes inside a RadioGroup, GroupBox, Panel or ScrollPanel by choosing that as its Parent.

Type a function name into a gizmo's event property. When you go back to the source - or build - the IDE adds an empty function of that name if there is not one already, and puts it in the program's dispatch code.

• onClick - a button, check box, radio button, link or toolbar button is clicked; a menu item is picked.
• onChange - the user changes a value: Enter in a textbox, a key in a rich text box, a trackbar, spinner, scrollbar, scroll panel, date or time picker.
• onSelect - an item is picked in a combo box or double-clicked in a list box, a list view row is selected, a tab is switched to.
• onClose (the dialog's) - the window's close button.

The template loads the dialog and runs an event loop. bgiProcessGizmoEvents names the handler for the event that is waiting, and the dispatch block - which the IDE rewrites each time - calls it:

Function Main()
    bgiInitBGI("Arial", 16)
    gizmos = bgiLoadGizmos("MyApp.bam.bgi")
    window = bgiGetGizmoHandle("MyDialog", gizmos)

    While running
        sysUpdateEvents()

        Local handler:String = bgiProcessGizmoEvents(gizmos)
        If handler <> ""
            If handler = "OnSaveClick"
                OnSaveClick()
            ElseIf handler = "OnMyDialog_Close"
                OnMyDialog_Close()
            EndIf
        EndIf

        bgiFlushEvent()
        sysDelay(10)
    Wend
    b2dEnd()
    Return False
EndFunction

Function OnMyDialog_Close()
    running = False
EndFunction

Function OnSaveClick()
    Print "saveButton clicked"
EndFunction

To work with a gizmo in a handler, get it by its designer name with bgiGetGizmoHandle and use the ordinary bgi* calls on it:

Function OnSaveClick()
    Local nameBox:Int = bgiGetGizmoHandle("nameBox", gizmos)
    Print "Saving " & bgiGetGizmoText(nameBox)
EndFunction

The dialog is saved to the .bam.bgi file with the program (File > Save while the designer is showing), and whenever you switch to the source, switch to another file, or build. The program reads it at run time with bgiLoadGizmos, so the .bam.bgi file goes with the program.

A Canvas is an area of the dialog that b2d drawing goes into (see bgiCreateCanvas). It needs the graphics system started first, so a program with one calls b2dGraphics(1, 1, BBR_WINDOW_MODE_HIDDEN) before bgiLoadGizmos; without it the canvas is not made. Each frame:

bgiSetActiveCanvas(canvas)
b2dCls()
; ... b2d drawing, in the canvas's own pixels ...
bgiFlipCanvas(canvas)
bgiSetActiveCanvas(-1)

• The HTMLView gizmo is WebKitGTK, and needs WebKit2GTK 4.1 installed; without it the gizmo is not made.
• An empty TabControl, ListView or Toolbar is still made at run time (the Windows edition leaves it out), and menu-item onClick and list/combo onSelect handlers fire (on Windows they do not).

Back to Documentation Index