Xojo Documentation Xojo Documentation

Class (inherits from WebControl)

New in 2011r2

For desktop applications, see Toolbar.

Adds a toolbar to a WebPage.

Events

ButtonAction Hidden MouseExit Close KeyPressed MouseMove ContextualMenuAction LostFocus MouseUp DoubleClick MenuAction Open DropObject MouseDown Resized GotFocus MouseEnter Shown

Properties

ButtonDisabledStyle ItemStyle Style ButtonStyle Left ToggledDisabledStyle ContextualMenu LockBottom ToggledStyle ControlID LockHorizontal Top Cursor LockLeft Vertical DragOverStyle LockRight VerticalCenter Enabled LockTop Visible Height LockVertical Width HelpTag Name Zindex HorizontalCenter Page ItemCount Parent

Methods

AcceptPictureDrop AppendItem MsgBox AcceptRawDataDrop Close PresentContextualMenu AcceptTextDrop ExecuteJavaScript RemoveItem AllowPictureDrag InsertItem SetFocus AllowRawDataDrag ItemAtIndex ShowURL AllowTextDrag ItemWithName

Notes

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:
  • Button
  • Menu
  • Separator
  • Space
  • Flexible Space
  • Container
• 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.

Examples

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.

Var button As WebToolbarButton

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
End If

End If
Next

This code adds a nested menu to a menu button:

// Create the menu
Var chartMenu As New WebMenuItem
Var lineMenu As New WebMenuItem("Lines")
lineMenu.Append(New WebMenuItem("Dotted lines"))
lineMenu.Append(New WebMenuItem("Solid lines"))
chartMenu.Append(lineMenu)

// 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:

Toolbar1.Button1.Caption = "Hello"

See Also

WebToolbarButton, WebToolbarContainer, WebToolbarFlexibleSpace, WebToolbarMenu, WebToolbarSeparator, WebToolbarSpace classes.