| **Navigation:**  [[clarion 7 faqs.htm|How To's and Troubleshooting]] > How to... >====== How to Add a Toolbar ====== | [[how to add a reverse sort order to a browse.htm|{{btn_prev_n.gif|Previous page}}]][[clarion 7 faqs.htm|{{btn_home_n.gif|Return to chapter overview}}]][[how to add column tool tips to a list box.htm|{{btn_next_n.gif|Next page}}]] |
|  ||

{{newc7.jpg|NewC7.jpg}}

You may add a toolbar to any window with a simple command in the **Window Designer**: drag the **Toolbar **from the Controls Toolbox. You may place any control on a toolbar, but the ones you will probably use the most are command buttons, check boxes, radio buttons, and drop down list boxes. As with menus, Clarion will automatically merge toolbars in certain situations.

**Adding a Command Button**

The following describes how to add a toolbar with a command button to a window. The starting point is the **Window Designer**, open to an empty window:

1.From the Controls Toolbox, drag the **Toolbar **item to the window area, Releasing the mouse automatically positions the ToolBar.

A rectangular area appears at the top of the window. This is the toolbar. At runtime, it appears dark gray.

2.Drag the **Button** in the Controls toolbox, then CLICK inside the new toolbar in the sample window.

A button control appears.

**3.**RIGHT-CLICK on the button and select **Properties** from the popup menu, or choose **View **{{c6h0013.jpg|C6H0013.jpg}} **Properties (**or press the** F4 **key**).**

The **Properties Pad **dialog for the new button appears and is selected.

4.Delete the default text in the **Text **property.

This allows you to create a picture button without text.

5.Type a descriptive Field Equate Label in the **Use **property.

For a File/Open button, for example, you might type //?OpenButton//. The Field Equate Label will appear in the **Embedded Source** dialog, making it easy to identify where to embed source.

6.In the **Icon** property, choose an icon from the **Icon** drop down list, or type the name of an icon file (*.ICO) of your own.

The icon list contains a number of default icons for such standard actions as File/Open, or Cut, Copy, and Paste.

7.Add additional functionality to the button. Modify the **STD** property and select an STD ID from the drop down list, or click on the **Actions** link and embed source code, call a procedure or run a program.

{{tipbox.jpg|TipBox.jpg}}

Clarion's . ICO files are 32 x 32 pixels . Most toolbar buttons will be smaller--for example, 16 x 18 pixels. By using these larger files, we can create the "disabled" icon from the same file, rather than requiring a separate file. When creating a custom .ICO file for a toolbar button, place the image in the center of the icon file. Clarion automatically crops the image to fit the button size.

**Adding a "Latched" Button**

A latched button "stays depressed" when CLICKED, then returns to its original state when CLICKED a second time. To place latched button:

1.Select the **CHECK** item in the Controls Toolbox, then drag to the location inside the new toolbar in the sample window.

2.RIGHT-CLICK on the check box and select **Properties** from the popup menu, or choose **View **{{c6h0013.jpg|C6H0013.jpg}} **Properties (**or press the** F4 **key**).**

The **Properties Pad **dialog for the new check box appears and is selected.

3.In the Properties Pad, modify the **Use** property by pressing the ellipsis button.

4.In the Select Column dialog, highlight //Local Data//, then press the **New** button.

The New Column Properties dialog appears.

5.In the **Column Name** field, type a name, then choose **BYTE** from the data type drop down list. Press **OK** to accept the new data and return to the Properties Pad.

A button created from a check box control has two modes: on or off. When the check box is 'on' (the button appears 'pushed in'), and the value of its USE variable is one. When the check box is 'off' (the button appears raised), and the value of its USE variable is zero.

6.From the **Icon** property, choose an icon from the **Icon** drop down list, or type the name of an icon file (*.ICO) of your own.

This is what makes it a "latched button" - placing an ICON on a CHECK control.

7.Clear the **Text** property if desired, or set the **Justification** property to //LEFT// or //RIGHT// as needed.

The button is complete; you need only adjust its position by dragging its center, if necessary.

**Adding a Button Group**

A button group provides the user with** mutually exclusive choices**. For example, in a group of three buttons, only one can be "depressed." If button number two is currently "depressed," push in button number one, and button number two pops out. A button group can provide controls for left, right and center text justification--only one option can be active at a time.

To create a button group:

1.CLICK on the OPTION item in the Controls Toolbox, then drag to the target location inside the toolbar.

The **Window Designer** places an Option Box on the toolbar. You may resize it by dragging its handles. An Option Box--an OPTION structure--must always surround radio button choices, however, this Option Box will not appear on the toolbar, because you will hide it.

**2.**RIGHT-CLICK on the button and select **Properties** from the popup menu, or choose **View **{{c6h0013.jpg|C6H0013.jpg}} **Properties (**or press the** F4 **key**).**

The **Properties Pad **dialog for the new OPTION appears and is selected.

3.Press the ellipsis (...) button for the **Use **property, and define a string variable.

The variable may be global, module, or local data, or it may be a data dictionary field. The variable will receive the **Value** text from the button selected by the user. If you don't specify any **Value** text, it gets the **Parameter **text** **from the selected button. If you define a numeric variable, it will receive an integer value corresponding to the selected button, that is, button 1, 2, or **3.**

4.Set the **Boxed** property to FALSE.

This hides the Option Box from the user. It appears in the **Window Designer** dialog, but will not appear at runtime.

5.Select a RADIO item in the Controls Toolbox, then drag it inside the Option Box.

The Application Generator places a Radio Button where you clicked in the Option Box.

6.RIGHT-CLICK on the Radio Button and choose **Properties** from the popup menu.

The **Properties Pad **dialog for the new radio button appears and is selected.

7.Clear the **Text **property.

Clearing this field will remove text from the button so we can add an icon with no text.

8.In the **Value **property, type //Left//.

When the user presses this button, the string "Left" is assigned to the USE variable we specified above.

9.In the **Icon** property, choose an icon from the **Icon** drop down list, or type the name of an icon file (*.ICO) of your own.

Adding an icon causes the radio button to look like a command button.

The first button is complete; you need only adjust its position by dragging its center.

10.Repeat steps 5 through 9 for the "center" and "right" buttons.

**13**. Press CTRL + Q or press {{saveclose.jpg|SaveClose.jpg}} from the **Window Designer** menu to save your window.

**Toolbar Merging**

**Global and Local Tools**

The TOOLBAR structure declares the tools displayed for a window. On an APPLICATION window, the TOOLBAR defines Global tools available to all the windows in the application. However, if the NOMERGE attribute is specified on the APPLICATION's TOOLBAR, the tools are local and are displayed only when no MDI child windows are open; there are no global tools. Global tools are active and available on all MDI child windows unless an MDI child window's TOOLBAR structure has the NOMERGE attribute.

**MDI Windows**

On an MDI child window, the TOOLBAR defines local tools that are automatically merged onto the Global toolbar. Both the Global and the local tools are then active while the MDI "child" window has input focus. Once the window loses focus, its specific tools are removed from the Global toolbar. If the NOMERGE attribute is specified on an MDI child window's TOOLBAR, the local toolbar replaces the Global toolbar.

**Non-MDI Windows**

On a non-MDI WINDOW, the TOOLBAR is **never** merged with the Global menu. A TOOLBAR on a non-MDI window always appears in the window, not on any parent window which may have been previously opened.

**Merging Order**

When an MDI window's local TOOLBAR is merged into an application's global TOOLBAR, the global tools appear first, followed by the local tools. The toolbars are merged so that the tools in the local toolbar begin just right of the position specified by the value of the width parameter of the global TOOLBAR's AT attribute. The height of the displayed toolbar is the maximum height of the "tallest" tool, whether global or local. If any part of a control falls below the bottom, the height is increased accordingly.

{{notebox.jpg|NoteBox.jpg}}

To merge toolbars, the global toolbar's AT width must be less than the APPLICATION's frame width.