From Xojo Documentation
Supported PlatformsProject Types: Web Platforms: macOS, Windows, Linux
New in 2011r2
- For desktop applications, see Toolbar.
Adds a toolbar to a WebPage.
To use a WebToolbar, drag a Toolbar control to a WebPage. By default, it is sized to fit the width of a default WebPage. Initially, there are no items on the Toolbar. You first add the items, rearrage them as needed, assign properties to them, and then write code to handle user input. In the case of a menu, you need to write a few lines of code to populate the menu with its menu items.
To add an item:
- Click on the pencil icon: A plus sign appears in the top-left corner.
- Click on the plus sign to add a toolbar item: A contextual pop-up menu of choices appears showing the following types of items you can add to the toolbar:
- Flexible Space
- Choose the desired type of item from the list: The item is added to the toolbar. As you add items, they are left-aligned within the toolbar.
Setting the Properties of Toolbar Items
When the green plus sign is visible, each control in the toolbar is selectable and editable (When it is not shown, the toolbar control itself is selecable). When the toolbar items are selectable, the Properties pane for the Toolbar adds a new group for the selected control. The new group is called "Selected Item". It has the following properties:
- Item Name: The name of the toolbar item.
- Item Super: The super class of the item: WebToolbarSeparator, WebToolbarSpace, WebToolbarFlexibleSpace, WebToolbarMenu, or WebToolbarButton.
- Has Icon: Boolean, by default it is True.
- Caption: The label for the item, if it has one. By default it is "Untitled".
- Icon: The image that appears in the item. Use sizes such as 32x32 or 16x16. For retina displays you can use 64x64.
- Enabled: Boolean, by default it is set to True.
See the ButtonAction and MenuAction events for example of how button clicks and menu selections are handled. See the Shown event handler for the code that populates the menu.
This example shows you how to use toggle with multiple buttons on a toolbar. When clicking a button, it turns off the toggle on the other buttons and turns on the toggle for the clicked button.
For i As Integer = 0 To Me.ItemCount - 1
If Me.ItemAtIndex(i) IsA WebToolbarButton Then
button = WebToolbarButton(Me.ItemAtIndex(i))
If Item = button Then // Select the button that was clicked
button.Toggled = True
Else // Deselect the other buttons
button.Toggled = False
This code adds a nested menu to a menu button:
Var chartMenu As New WebMenuItem
Var lineMenu As New WebMenuItem("Lines")
lineMenu.Append(New WebMenuItem("Dotted lines"))
lineMenu.Append(New WebMenuItem("Solid lines"))
// Assign it to the button
Var chartButton As WebToolbarMenu
chartButton = WebToolbarMenu(Me.ItemWithName("ChartsButton"))
chartButton.Menu = chartMenu
Items designed in the toolbar editor can be accessed by their name like this: