Command Bars Designer Overview

Overview, Getting Started, Exploring the Elements, Adding a Control, Adding a Toolbar, Adding Accelerators, The Properties Window
Xtreme Command Bars Designer
Command Bars Designer Overview
Xtreme Command Bars Designer User’s Guide

The Designer

The Xtreme Command Bars Designer makes it possible to design applications to the specifications desired in an application. The designer is simple to use, yet gives complete control over the application’s design.

Topics in this manual

  • Getting Started
  • Exploring the Elements
  • How the designer uses Control
  • Adding a Control
  • Create a Control
  • Select an Icon
  • Adding a Toolbar
  • Create a Toolbar
  • Add a Control to a Toolbar
  • Adding Accelerators
  • The Properties Window
  • General Properties
  • Paint Manager Properties
  • Control Properties
  • Toolbar Properties
Copyright (c) 1998-2008 Codejock Software. All rights reserved.
What do you think about this topic? Send feedback!


Getting Started with the Designer

Getting Started with the Designer

This is just one configuration of the Designer. Notice that the Icons and Accelerators window are both in auto hide so they can be pulled up easily when needed.

Getting Started

Before beginning your project, it will be helpful if you explore the features found in the Xtreme Command Bars Designer so that you are able to find an option when you really need it.

To get started, open the View menu. This will show you all of the toolbars and windows that are available with the designer. Select one that you would like to see and it will be displayed if it is not already displayed or will become active if it is displayed.

You can set up the application’s design by choosing to auto hide these windows, keep them open or close them whenever you want. It would be best to put each where it is most convenient.

Command Bars Designer IDE

The positions given on this page are referenced to the picture found in the Getting Started with the Designer section.

The Main Elements

  • Accelerators – The Accelerators section is located directly below the Icons section. This section shows all of the shortcuts for the application that you can customize to help make the designing process easier.
  • Controls – The Controls section can be found by selecting the tab marked “Controls” that is directly to the right of the Toolbars tab.
  • Form – This is the main form in which you will be creating your design. You can move the icons and menu bars to suit your liking.
  • Icons – The Icons section, located on the top left sidebar of the screen, gives you control over the icons for your form.
  • Properties – The Properties section is located on the left side of the screen directly below the Toolbars and Controls sections. As you select the icons and menu bar items, this box will show the properties of each item.
  • Toolbars – The Toolbars section, located on the right side of the screen, shows all information about the toolbars that are included in the application.


Exploring the Main Elements

Exploring the Main Elements

More information about adding a control can be found in the Accelerators section.

Accelerators

The Accelerators tab allows you to customize the shortcut keys that will be used in your application. Simply select the Accelerators tab, double click the shortcut key you would like to customize, and change it to the preferred key sequence.

The Accelerator Menu

More information about adding a control can be found in the Adding a Control section.

Controls

In the Controls section, you have complete control over the controls you would like to be included on your form. You can use the buttons to add a control, delete a selected control, and move the position of the control up and down. Before adding a control to your form, you must create it here.

The Controls Menu

Form

The form section is the main area in which you can create the main design for your form. The icons that are shown here are able to be customized to your specifications. The menus can also be customized and more can be added. You can expand the form by grasping the outside black boxes with your mouse and dragging them outward.

The Form

More information about creating icons can be found in the Adding a Control section.

Icons

The Icons tab lets you customize the icons of your application. The picture to the right shows what the print icons look like. In order to customize the icons, select the icon you would like to edit, then select the Edit tool. This will display a button editor that will allow you to edit each button the way you want users to see it when it is normal, hot or disabled. When you are finished with your changes to the icons, simply click the OK button, and you will be directed back to your form.

Do this for each icon that you would like to design.

The Icons Menu

More information about properties can be found in the The Properties Window section.

Properties

The Properties window displays the properties for any control that you have selected. After you have created the control in the Controls section, you can change these options at any time in this section.

The Properties Menu

More information about toolbars can be found in the Adding a Toolbar section.

Toolbar

The Toolbars window is where you create the different toolbars for your application. You can add a new toolbar by selecting the Add Toolbar icon or delete one by selecting the Delete Toolbar Icon.

The Toolbars Menu
Copyright (c) 1998-2008 Codejock Software. All rights reserved.
What do you think about this topic? Send feedback!


Adding a Control

Adding a Control

Note: Please look over the section that covers properties for the various controls in order to become familiar with these properties found in the The Properties Window section.

To Create a Control
  1. Open the Controls window.
  2. Select the icon to add a new control:
  3. The New Control window will be displayed.
    1. Choose the Caption for the control. This will be the name that the user will see for the control.
    2. Choose the Category you would like the control to appear in from a dropdown list or type it in. This will be the menu in which you would like the control to be displayed.
    3. As you fill in the Caption and choose the Category, the ID for the control should fill in automatically.
    4. The Type of the control can be chosen from a dropdown list.
  4. When finished, select OK.

    The Properties window displays the options you have set for the control and you can change them at any time by reverting to this section. If you would like the control you have created to be associated with an icon, this should be done next.

Add a Control to the Menu Bar
  1. In the Controls window, select the control that you would like to add to the menu bar.
  2. Drag the control to the Form area and over the menu bar. Notice that as you drag it over each menu, the menu expands.
  3. Drag the control over the menu you would like it to appear in and drop it in the position that you would like it to appear. If you change your mind about where you would like it to appear, you can drag it from that spot to another at any time.

Editing the normal icon will automatically adjust the hot and disabled icons. Editing the hot or disabled icons will not automatically edit the others.

To Select a Control’s Icon
  1. Open the Icons window.
  2. Select the icon to add a new icon:
  3. The New Icon window will be displayed.
    1. Choose from the dropdown list the ID of the control you just created.
    2. Choose the size that you would like your icon to be from a dropdown list.
  4. When finished, select OK.
  5. Re-open the Icons window and choose from the dropdown list that is displayed at the top of the window the ID of the control you just created.
  6. Select which icon you would like to edit – normal, hot, or disabled – and select the edit icon:
  7. The Button Editor window will be displayed and you can either draw your icon here, or copy it from the clipboard using the tools section of the window.

    The Button Editor

    When you are finished creating your icon, select OK.

    Note: Before you add the control to the menu bar, you may want to be sure all of the properties for the control are set correctly. After you add the control to the menu bar, any changes you make to the properties of the controls in the Controls section are not automatically applied to the controls in the Form section.


Adding a Toolbar

Adding a Toolbar

Note: In order to add a new toolbar to your form, you must first create all of the controls that you would like to be included in your toolbar. Once you are finished with this, you can proceed with creating your toolbars.

To Create a Toolbar
  1. Open the Toolbars window
  2. Select the icon to add a new toolbar:
  3. The New Toolbar window will be displayed.
    1. Create a caption for your toolbar. This will be the name that will be visible for your toolbar.
    2. The ID for your toolbar should be automatically filled in, with the beginning as IDR_
  4. When finished, select OK. The toolbar that you just created should be visible in the Toolbars window.
    Now that you have created your new toolbar, you can add the controls that you made to the new toolbar.

To Add a Control to a Toolbar
  1. Notice that there is now a new empty toolbar on your form. This is the new toolbar that you have created.
  2. Open the Controls Window.
  3. Scroll down to find the control that you would like to be in your new toolbar.
  4. Select that control.
  5. Drag the control into the toolbar in which you would like it to be placed.
  6. Repeat this for each control you would like to be in the toolbar.
    Note: Before you add the control to the toolbar, you may want to be sure all of the properties for the control are set correctly. After you add the control to the toolbar, any changes you make to the properties of the controls in the Controls section are not automatically applied to the controls in the Form section.


Adding Accelerators

Adding Accelerators

Changing existing accelerators can be accomplished by following these same steps.

To Add an Accelerator

Adding accelerators to your controls may make it easier for users to use your application. If you are interested in this, follow these steps to add accelerators.

  1. Open the Accelerators window. By default, the Accelerators window is docked on the left side of the designer. It is also accessible by selecting View->Accelerators through the menu bar.

    Note: The Accelerators window will display all of the IDs that currently have a Shortcut Key assigned to them. If there are any unwanted key associations, simply click on the ID of the accelerator you want to remove and then click on the Delete button [image].
  2. Click on the New button [image] to add a shortcut key to any existing command ID. Clicking on the New button displays the Accel Properties dialog box.

    1. From the ID dropdown list, choose the ID of the command that you would like to assign an accelerator.
    2. In the Shortcut edit box, enter the accelerator key combination you would like to associate with the selected ID.
      Note: You can enter up to a 4 key combination for each accelerator by combining the Alt, Ctrl, Shift and any other key.
  3. When finished, click the OK button.

If you add an accelerator to a control that is found in the menu bar, the accelerator will appear next to the control’s name in the popup menu. The picture below shows the accelerators that have been added to the controls in the "File" popup menu.


The Properties Window

The Properties Window

Overview

The properties window contains all of the properties for each control and toolbar and, once created, this is where you can change the properties for all of these.

To begin, we will start with the 3 different views in the Properties window, which can be switched between by the three icons located at the top of the Properties window:

The first icon gives a categorized view of the properties listed in the Properties window, and selecting the second icon will alphabetize the properties. Selecting the third icon (Tooltip: Property Pages) will open a dialog that displays the Configuration Properties.

Configuration Properties Dialog

The options in the Configuration Properties dialog are settings applied to the Command Bar as a whole, not individual controls. The Configuration Properties dialog is accessible by clicking on Property Pages button [image] in the Properties window or by selecting CommandBars->Settings... from the menu bar.

General Properties

Clicking on the General node in the Configuration Properties dialog will display a list of options that allow you to customize the behavior and functionality of the Command Bars. Below is the list of properties and a description of their meaning.

Option | T/F | Description
Customizable | True | Allows the user to customize the Command Bars. I.e. Add or Remove buttons and Display the Customize dialog.
 | False | Disables Command Bar customization. This will remove the "Customize..." link from the right-click context menu, disable AltDrag customization, and disable the expanded button menus. If Customizable is false, then you should set Show Expanded Buttons Always to false as well.
Always Show Full Menus | True | The full popup menu will always be displayed, regardless of any hidden controls.
 | False | Any hidden controls will be hidden when the popup menu is displayed. The hidden controls can be displayed by clicking on the chevron or by leaving the mouse over the popup menu caption for a few seconds if Show Full Menus After Delay is true.
Show Full Menus After Delay | True | If any controls in a popup menu are hidden, the hidden controls will be displayed after a short delay if the mouse is held over the caption of the popup menu. The user does not have to click the chevron to display the hidden controls. Always Show Full Menus must be false for this to work.
 | False | If any controls in a popup menu are hidden, the user will have to manually click on the chevron to display the hidden controls.
Show ScreenTips on Toolbars | True |
 | False |
Show Shortcut Keys in ScreenTips | True |
 | False |
Show Expanded Buttons Always | True |
 | False |
Large icons | True |
 | False |
Icons Size | True |
 | False |
Large Icons Size | True |
 | False |
Popup Icons Size | True |
 | False |
Menu Animation | True |
 | False |
Sync Floating Toolbars | True |
 | False |
Float Toolbars by DblClick | True |
 | False |
Show Text Below Icons | True |
 | False |
AltDrag Customization | True |
 | False |
Auto Hide Unused Popups | True | If all controls in a popup control are hidden, then the entire popup control will be hidden.
 | False | The popup control will always be displayed, even if all controls in the popup menu are hidden.

You can also specify the height and width of the Icons size and the Large icons size in this section.

Paint Manager Properties

Choose the paint theme from a drop down list:

  1. xtpThemeOfficeXP
  2. xtpThemeOffice2000
  3. xtpThemeOffice2003
  4. xtpThemeNativeWinXP
  5. xtpThemeWhidbey

Choose True or False for:

  1. Show icons shadow.
  2. Generate disabled items.
  3. Use faded icons.

When finished, select OK.

If you change the ID for a control in this section and you have already created an icon for it under the first ID, you must change the Icon ID property to the previous ID in order to keep the same icon.

Control Properties

When selecting a control in the Controls section, you will see the following properties in the Properties section:

  • Caption – Displays the name that the user can see for the control. You can change this caption here.
  • ID – Shows the ID of the control. You can change the ID from a dropdown list.
  • Icon ID – Shows the Icon ID of the control’s icon. You can change this ID from a dropdown list if you would like to change the icon to something previously created.
  • Description – You can type something here to describe the control.
  • Tooltip – This is where you can insert what you would like to be displayed when the mouse hovers over your control’s icon.
  • Type – This is the type of control you want this control to be, choices are:
    1. xtpControlButton
    2. xtpControlPopup
    3. xtpControlButtonPopup
    4. xtpControlSplitButtonPopup
    5. xtpControlComboBox
    6. xtpControlEdit
  • Style – This is the style you want the control to have, choices are:
    1. xtpButtonAutomatic
    2. xtpButtonCaption
    3. xtpButtonIcon
    4. xtpButtonIconAndCaption
  • Category – This is the category that the control is found in. Choices include any of the controls that are Built-In Menus or you can type in your own to create a new category here.
The only property that you will want to assign AFTER you place the control on the form is whether you would like the control to begin a new group within the Built-In Menus. If this is the case, select the control that you would like to begin the new group and select True from the dropdown list.

Toolbar Properties

In the Toolbars section, you can select either the name of the toolbar, or one of its components that is included in the Toolbars section.

If you select a toolbar, the Properties window will display the following properties:

  • Title – The title of the toolbar.
  • ID – The ID of the toolbar.
  • Visible – Whether the toolbar is visible or not.
  • Customizable.
  • Icon Size – The width and height of the icon for this toolbar.
  • Docking Flags – The options for the Docking Flags for the toolbar.
  • Stretch Flags – The options for the Stretch Flags for the toolbar.

If you select one of the components of one of the toolbars, the Properties window will display the following options:

  • Title – The title of the toolbar.
  • ID – The ID of the toolbar.
  • Visible – Whether the toolbar is visible or not.
  • Customizable.
  • Tear-Off Popup – Whether the component is tear-off popup or not.