Independent Panels

Applies to:
Working with BrowserBob

 

Objects like buttons, labels or even web objects can be outsourced to panels - like shown in how to create pulldown menus. Since panels can be moved independently from the application's main window and hidden or visualized on button click, you can achieve interesting ergonomic effects for the usage of your application.

In the following example we will place navigational button elements onto a control panel. This panel can be shown on demand by switching a specific button on the main dialog and can be moved by dragging it clicking in its center. The result is a kind of remote control for browsing.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Approach:

 

  • Preparing the Panel
    Add a panel to the design area and assign it the Role 'Free and Stay on Top'.

    Since its location does not depend on the main dialog there is no necessity to make alignment settings for the panel.

    Uncheck the Visible option: the panel shall be hidden on application start.

    The panel is "free", so it does not need any alignment - ignore alignment settings in this case.
  • The Button that makes the Panel appear.
    Now add a button to the Main Dialog.

    Enter the panel as the button's action Target.

    On clicking the button we'd like to show the panel. So choose Show in the Action drop-down list.


    Determine
    the button's alignment to fit the design requirements of your application.

 

 

 

 

  • The Menu Items on the panel
    Add a button to the panel for every menu item needed and assign the corresponding actions to the buttons.

    Since the buttons are placed on a panel which is not resizable, button alignment is not required (if you create a resizable panel, all objects need alignment like on the Main Dialog).

    Verify operation of your panel by changing into test mode.

 

  • Giving the Panel a nice graphical appearence
    The design of your graphics is again the most important point to give your remote control a professional appearance.

    To arrange the images in BrowserBob accurately, they should be harmonized in your graphics editor already.

    For the panel shown on top of this page, we used the images shown to the right.

 

 

The button to show the panel:

 

 

 

 

The background of the panel:

 

 

 

Two images for each menu item button:

 

 

 

Every object needs a single transparency color assigned::

 

 

Related topics:
Panel object