Toolbars in Your PHP Application

The Toolbar component displays an enhanced bar with large buttons that allows users to quickly access the most-used commands. By default, applications are configured with several predefined buttons: Home, Reload, Back, Next, and Print.

The roles of these buttons are as follows:

1. Home: Returns to the homepage.
2. Reload: Refreshes the current page.
3. Back: Returns to the previously loaded page.
4. Forward: Goes to the next page (if the user has already pressed Back).
5. Print: Displays the print dialog for the current page.

To create a toolbar in your PHP application, add a “Standard Toolbar” to the “Components Used” list and then click Edit Toolbar.

The UI editor will appear, displaying a ready-to-use toolbar that you can modify.

In the UI editor, you can add or remove buttons, associate commands with them, and configure their properties. You can also reorder the buttons.

Toolbar Control Description #

A panel container (TscPanel) is used to hold all of the buttons. To align all buttons to the left, each button’s Align property must be set to alLeft.

Adding a New Button and Optional Separator #

To add a new button, you can clone an existing one.

1. Select the button to clone and click Copy.

2. Select the entire toolbar panel (named ptop here) and click Paste.

3. Repeat the same steps with a Bevel control to create an invisible separator between buttons.

Configuring Button Properties #

Useful properties for buttons include Caption, ImageIndex, Margins, ShowCaption, etc.

For the Caption property, you can use Resource Strings for easier localization. To insert a resource string, use %RESID% and replace RESID with the name of the resource string.

Changing a Button’s Image #

1. Double-click the default image list (named spPngImageListToolbar here).

2. When the Image Editor appears, click Add to import a new PNG file.

3. Take note of the number associated with the imported image and click OK.

4. Select the desired button, scroll down the Properties Editor, and set the ImageIndex to the number you noted (e.g., 5). The button’s image will update instantly.

Modifying a Button at Runtime #

It is possible to change any property of any button at runtime.

Refer to the dedicated topic “How To Modify Controls At Runtime“.