For applications which require user interface features such as navigation buttons, an address bar, or custom url link buttons, the Tool Bar Designer is a WYSIWYG editor used to create multiple tool bars.
The following screenshot shows a top tool bar with an embedded logo, an address bar and a busy indicator, and left tool bar with forward, backward, home and logoff navigation buttons.
Tool Bars
Add Tool Bar
There are two ways to create a new toolbar:
- Click the mouse right button, select Add Tool Bar
- Click the Add Tool Bar button.
To create a new tool bar, the tool bar docking position (top, bottom, left or right) and tool bar name needs to be entered. The tool bar name is purely informational and useful when multiple tool bars are defined. Refer to the following screenshot.
Note: there is a 50 toolbar limit.
Edit Tool Bar
There are three ways to edit a tool bar:
- Click the tool bar to highlight it, click the Edit Tool Bar button, then select the tool bar to be edited from the displayed list (refer to the following screenshot).
- Click the tool bar to highlight it, click the mouse right button, select Edit Tool Bar
- Doubleclick the tool bar.
Top/Bottom Tool Bar
Name
Enter a name that describes the tool bar (ex, Top Tool Bar). This information is purely for informational purposes and is particularly useful when multiple tool bars are being used.
Size and Position
Height
Enter the height of the tool bar in pixels
Full Screen Width
If checked, the tool bar will be the entire width of the screen
Width
If not full screen width, then enter the width of the tool bar in pixels
Left Offset
If the tool bar is not full screen width, but needs to offset from the left screen edge (ex, because of a left tool bar that is full screen height), enter the offset in pixels.
Docking
The position of the tool bar can be docked either to the top or the bottom of the screen.
Skin
Background Color
Click the Change button to select a background color for the tool bar
Text Color
Click the Change button to select a default text color for the tool bar
Background Bitmap
If checked, a bitmap will be used for the background of the tool bar. Click the Change button to select the bitmap image. Image file must reside in the skins directory.
Left/Right Tool Bar
Name
Enter a name that describes the tool bar (ex, Top Tool Bar). This information is purely for informational purposes and is particularly useful when multiple tool bars are being used.
Size and Position
Width
Enter the width of the tool bar in pixels
Full Screen Height
If checked, the tool bar will be the entire width of the screen
Height
If not full screen height, then enter the height of the tool bar in pixels
Top Offset
If the tool bar is not full screen height, but needs to offset from the top screen edge (ex, because of a top tool bar that is full screen width), enter the offset in pixels.
Docking
The position of the tool bar can be docked either to the left or the right of the screen.
Access List
KioWare has the capability to display tool bars only on certain pages, and access control lists are the means for defining which tool bars to display.
Add URL
Add a new domain to the list of URLs that will either enable or prevent the display of the tool bar
Add Page
Add a new page to the list of pages that will either enable or prevent the display of the tool bar
Delete URL
Delete a domain from the list of URLs
The list of URLs can either enable or prevent the display of the tool bar. Within an individual enabled URL, the optional list of pages can be used to further enable or prevent display of the tool bar.
Skin
Background Color
Click the Change button to select a background color for the tool bar
Text Color
Click the Change button to select a default text color for the tool bar
Background Bitmap
If checked, a bitmap will be used for the background of the tool bar. Click the Change button to select the bitmap image. Image file must reside in the skins directory.
Delete Tool Bar
There are three ways to delete a tool bar:
- Click the tool bar to highlight it, then click the Delete Tool Bar button
- Click the tool bar to highlight it, click the mouse right button, then select Delete Tool Bar
- Click the Delete Tool Bar button and select the tool bar from the displayed list (refer to the following screenshot).
Controls
Add Control
There are three ways to create a new control:
- Click the tool bar to highlight it, then click the Add Control button.
- Click the tool bar to highlight it, click the mouse right button, select Add Control
- Click the Add Control button, select the tool bar.
Select the control to add from the list. Refer the following screenshot.
| Control List | |
| Forward | Button: go to next page in history list |
| Back | Button: go to previous page in history list |
| Home | Button: go to the startpage URL |
| Button: print the page | |
| Logoff | Button: end the user session |
| Busy Indicator | Display: series of images that rotate during page load |
| Refresh | Button: refresh the current page |
| Address Bar | Input Box: enter URL |
| Scroll Down | Button: scroll down the page |
| Scroll Up | Button: scroll up the page |
| Scroll Right | Button: scroll right on the page |
| Scroll Left | Button: scroll left on the page |
| Custom Link | Button: navigate to a defined URL |
| Exit | Button: exit KioWare (Note: not recommended for most applications) |
| Text Label | Display: text to display |
| Picture | Display: bitmap image to display |
| Volume Up | Button: turns speaker volume up |
| Volume Down | Button: turns speaker volume down |
| Phone Dialer | Button: enables phone dialing |
| Phone Status | Display: available to .Net addin developers to set phone status info images |
| Virtual Keyboard | Button: displays the keyboard configured in the Keyboard/Printing tab section of the config tool. However this keyboard is different than other types. This keyboard looks the same but will work with non-HTML elements, such as Flash, PDF and other programs. This button will use the default configured keyboard unless a keyboard access list is set up that has a match for the particular domain/page you are currently on. |
Note: there is a 100 control limit per toolbar.
Edit Control
There are four ways to edit a control:
- Click the control to highlight it, click the Edit Control button
- Click the control to highlight it, click the mouse right button, select Edit Control
- Doubleclick the control.
- Click the Edit Control button, select the toolbar and control from the displayed list (refer to the following screenshot)
Navigation, Refresh, Print, Scroll, Logoff and Exit Buttons
Description
Enter a name that describes the button (ex, Forward). The description is displayed when button labeling is enabled.
Position
Left Edge
Pixel coordinate of the left edge of the button. Zero is the left edge of the toolbar.
Right Edge
Pixel coordinate of the right edge of the button. Zero is the left edge of the toolbar.
Top Edge
Pixel coordinate of the top edge of the button. Zero is the bottom edge of the toolbar.
Bottom Edge
Pixel coordinate of the bottom edge of the button. Zero is the bottom edge of the toolbar.
Use height and width of bitmap
If checked, the right edge and bottom edge coordinates will be calculated from the size of the bitmap
Label
Label the control
If checked, the control Description will be displayed below the control.
Word Wrap Width
The number of characters to display before wrapping to a new line.
Change Font
Select the font name, style and size for the label
Skin
Image used for the button. If no image is specified a default bitmap image will be used. Depending on the behavior of the button, there can be an up, down or disabled image associated with the button. Image files must reside in the skins directory.
To use custom skins in KioWare, if you havn't done so already, set the skin directory
Change
Click the Change button to associate a different skin image with the control
| Skin Filenames | |||
| Button | Button Up | Button Down | Disabled |
| Forward | Forward-Off.bmp | Forward-On.bmp | Forward-Disabled.bmp |
| Back | Back-Off.bmp | Back-On.bmp | Back-Disabled.bmp |
| Home | Home-Off.bmp | Home-On.bmp | n/a |
| Print-Off.bmp | Print-On.bmp | n/a | |
| Logoff | Logoff-Off.bmp | Logoff-On.bmp | n/a |
| Refresh | Refresh-Off.bmp | Refresh-On.bmp | n/a |
| Exit | Logout-Off.bmp | Logout-On.bmp | n/a |
| Scroll Down | ScrollDown-Off.bmp | ScrollDown-on.bmp | n/a |
| Scroll Up | ScrollUp-Off.bmp | ScrollUp-On.bmp | n/a |
| Scroll Right | ScrollRight-Off.bmp | ScrollRight-On.bmp | n/a |
| Scroll Left | ScrollLeft-Off.bmp | ScrollLeft-On.bmp | n/a |
Custom Skins
When creating the images, follow these rules:
- Images must be .bmp or .png files
- They must end with, -Off, -On, or -Disabled depending upon what it will be used for
- Examples: phone-Off.bmp phone-On.bmp
Changing Skins Walkthrough
Changing skins has several important steps that must be followed in order for everything to work properly.
The first step is to create skin images. Button skins have 3 states:
- 1. Off/Up - When the button is NOT pressed.
- 2. On/Down - When the button IS pressed.
- 3. Disabled - Only applies to Back and Forward.
These images must be named a certain way and be in a certain format (BMP, PNG).
Naming:
You need to create at least Off and On state images for each button. The off state image filename must end with -Off and the on state image must end with -On, as seen in the table above.
**Note: Many people make the mistake of naming their images as "image-On.bmp.bmp" because Windows Explorer, by default, will not show file extentions for files that it recognizes. Be careful not to put an extra extension on your image files.
Format:
Images must be saved by your image editor as either Bitmap/BMP or PNG.
Tip: If you want buttons that will look nice with rounded edges and such, create images that are 32 bit (has transparency) and save them as PNG's.
Note: You cannot simply put a .bmp or .png on the end of the file. It must be encoded/saved in the actual format.
The next step is to set the skins directory. All of your skin images must be copied into your skins directory, which could be anywhere on your machine. After choosing a location for your skins, set the skins directory in the designer by pressing the Options button.
Now when you press the Change button for the Skin when editing a button your skins should show up in the list.
Address Bar
Description
Enter a name that describes the address bar (ex, Address Bar). The description is purely for information purposes.
Position
Left Edge
Pixel coordinate of the left edge of the button. Zero is the left edge of the toolbar.
Right Edge
Pixel coordinate of the right edge of the button. Zero is the left edge of the toolbar.
Top Edge
Pixel coordinate of the top edge of the button. Zero is the bottom edge of the toolbar.
Bottom Edge
Pixel coordinate of the bottom edge of the button. Zero is the bottom edge of the toolbar.
Use height and width of bitmap
If checked, the right edge and bottom edge coordinates will be calculated from the size of the bitmap
Busy Indicator
Description
Enter a name that describes the busy indicator (ex, Busy). The description is purely for information purposes.
Position
Left Edge
Pixel coordinate of the left edge of the busy indicator. Zero is the left edge of the toolbar.
Right Edge
Pixel coordinate of the right edge of the busy indicator. Zero is the left edge of the toolbar.
Top Edge
Pixel coordinate of the top edge of the busy indicator. Zero is the bottom edge of the toolbar.
Bottom Edge
Pixel coordinate of the bottom edge of the busy indicator. Zero is the bottom edge of the toolbar.
Use height and width of bitmap
If checked, the right edge and bottom edge coordinates will be calculated from the size of the bitmap
Skin
Images used for the busy indicator. If no image is specified a default bitmap image will be used. Depending on the behavior of the button, there can be an up, down or disabled image associated with the button. Image files must reside in the skins directory.
Change
Click the Change button to associate a different skin image with the control
| Skin Filenames |
| busy0000.bmp - busy0015.bmp (upto sixteen images) |
Note: For custom skins, button image names are constrained only by having '0000' - '0015' at the end of the filenames.
The first image name cannot be 0001, it MUST be 0000.
Custom URL
Description
Enter a name that describes the button (ex, KioWare). The description is displayed when button labeling is enabled. The description is displayed in the context when enabled.
Position
Left Edge
Pixel coordinate of the left edge of the button. Zero is the left edge of the toolbar.
Right Edge
Pixel coordinate of the right edge of the button. Zero is the left edge of the toolbar.
Top Edge
Pixel coordinate of the top edge of the button. Zero is the bottom edge of the toolbar.
Bottom Edge
Pixel coordinate of the bottom edge of the button. Zero is the bottom edge of the toolbar.
Use height and width of bitmap
If checked, the right edge and bottom edge coordinates will be calculated from the size of the bitmap
Label
Label the control
If checked, the control Description will be displayed below the control.
Word Wrap Width
The number of characters to display before wrapping to a new line.
Change Font
Select the font name, style and size for the label
Link
Link
Enter the URL that will be loaded when the button is clicked. Ex., http://www.kioware.com
Add link to the context menu
If checked, the control Description will be displayed on the context menu (mouse right click button).
Skin
Image used for the button. If no image is specified a default bitmap image will be used. There must be an up and a down button image, and the image files must reside in the skins directory.
Change
Click the Change button to associate a different skin image with the control
| Skin Filenames | |
| Button Up | Button Down |
| CustomLink1-off.bmp - CustomLink99-off.bmp |
CustomLink1-on.bmp - CustomLink99-on.bmp |
Note: for custom skins, button image names are constrained only by having '1-Off'/'1-On' - '99-Off'/'99-On' at the end of the filenames.
Text Label
Description
Enter a name that describes the label (ex, Title). The description is purely for information purposes.
Position
Left Edge
Pixel coordinate of the left edge of the label. Zero is the left edge of the toolbar.
Right Edge
Pixel coordinate of the right edge of the label. Zero is the left edge of the toolbar.
Top Edge
Pixel coordinate of the top edge of the label. Zero is the bottom edge of the toolbar.
Bottom Edge
Pixel coordinate of the bottom edge of the label. Zero is the bottom edge of the toolbar.
Label
Word Wrap Width
The number of characters to display before wrapping to a new line.
Change Font
Select the font name, style and size for the label
Picture
Description
Enter a name that describes the picture (ex, Logo). The description is purely for information purposes.
Position
Left Edge
Pixel coordinate of the left edge of the picture. Zero is the left edge of the toolbar.
Right Edge
Pixel coordinate of the right edge of the picture. Zero is the left edge of the toolbar.
Top Edge
Pixel coordinate of the top edge of the picture. Zero is the bottom edge of the toolbar.
Bottom Edge
Pixel coordinate of the bottom edge of the picture. Zero is the bottom edge of the toolbar.
Use height and width of bitmap
If checked, the right edge and bottom edge coordinates will be calculated from the size of the bitmap
Skin
Image to be displayed. Image file must reside in the skins directory.
Change
Click the Change button to select a different image.
Phone Dialer
The Phone Dialer control is a special kind of control that contains a phone number list to allow the user to dial specified numbers. If you checked Hide button when not active, the dialer button will only show up on the toolbar according to these conditions:
If you are using a dialing access list: You are on a page that matches the access list.
If not using a dialing access list: A call is activated on the page. Note: If the page is navigated away from, the button will be hidden again.
This list is just like the toolbar access list except that it pertains to phone dialing. If an entry in the list matches, the dialing button will be enabled, and when pressed, will call the number in the list that is assigned to the match.
If Show Numeric Dialing Pad is checked the user will be able to dial numbers during the call. This is useful when the user needs to interact with automated messages; (Press 1 for sales, Press 2 for support...).
If the dialer window is hidden, this button will flash, indicating that a call is in progress. It can then be pressed to show the dialer window again.
Control Alignment and Spacing
Left/Right Tool Bar
To align the left edge of a series of controls:
- Select the controls to align by holding the Ctrl key and using your mouse to select the controls.
- Click the mouse right button to display the tool bar context menu
- Select Align left edge. Note: controls will be moved so that their left edge matches the position of the first control selected
To align the vertical spacing of a series of controls:
- Select the controls to align by holding the Ctrl key and using your mouse to select the controls.
- Click the mouse right button to display the tool bar context menu
- Select Evenly space down. Note: controls will be moved so that they are evenly positioned vertically between the top and bottom controls.
Top/Bottom Tool Bar
To align the top edge of a series of controls:
- Select the controls to align by holding the Ctrl key and using your mouse to select the controls.
- Click the mouse right button to display the tool bar context menu
- Select Align tops. Note: controls will be moved so that their top edge matches the position of the first control selected
To align the horizontal spacing of a series of controls:
- Select the controls to align by holding the Ctrl key and using your mouse to select the controls.
- Click the mouse right button to display the tool bar context menu
- Select Evenly space across. Note: controls will be moved so that they are evenly positioned horizontally between the left and right controls.
Options / Skins Directory
Change
Click the Change skins directory. All images associated with button, busy indicator, toolbar background and picture controls must reside in one skins directory.
Button Mouse Over Highlighting
This feature will cause a highlight over every button on your toolbar when the mouse moves over it. Check Enable and then move the slider to the right if you want the highlight to be brighter.
Delete Control
There are four ways to delete a control:
- Click the control to highlight it, then click the Delete Control button
- Click the control to highlight it, then press the Delete keyboard key
- Click the control to highlight it, click the mouse right button, then select Delete Control
- Click the Delete Control button and select the tool bar, and then the control to be deleted from the displayed list (refer to the following screenshot).
