How To Design an XML-based Toolbar for SlimBrowser

If you own a website, you can easily design a toolbar for your website. The toolbar is based on an XML file which defines all the buttons and drop-down menus on the toolbar. You can also put a search box on the toolbar which allows user to search your website or any specified search engine. Other than that, you need also provide an bitmap file which includes the images for the website logo and all the icons.

If you have already created such a toolbar, feel free to submit it to us. If we think it is useful for our users, we could list it in the plugins download page.

Please refer to the following documentation to learn the working mechanism of XML-based toolbar. If you have trouble with the implementation, feel free to ask us for support.

Directory structure

SlimBrowser Installation Root Folder

Toolbars

Toolbar Name1

Toolbar.xml
Logo.bmp
Img16.bmp
....

Toolbar Name2

Toolbar Name3

....

SlimBrowser installation folder will be represented as $instdir. All the toolbars will be installed under $instdir\toolbars. Each toolbar will have a name and all the configuration files belonging to that particular toolbar will be put under the folder $instdir\toolbars\ToolbarName. For example, if the toolbar has the name "Google Toolbar", all its files will be put under the folder $instdir\toolbars\Google Toolbar

XML Configuration File

SlimBrowser Toolbar is based-on an XML configuration file named toolbar.xml. You can see the sample XML file for FlashPeak website toolbar. Please make sure the XML file is free of syntax errors. Special characters like &"><' must be properly encoded based on XML file standard. Otherwise, you won't be able to get it to show up inside SlimBrowser.

Tag Listing

All XML tags and attributes are case sensitive. All tags must be properly closed to ensure the XML file is correct in syntax. If you want to use the symbol '&' as part of an attribute value, you need write it as '&amp;' as the same conventioned used in HTML source code. You can't use the symbol '\' as part of an attribute value.

• ToolBarSettings: Root/document tag.
  • SearchBoxWidth: The width of search box in pixels
  • SearchUrl
    The url of the search engine for searching from the keyword box. You can use the macro $key as part of the url. The macro $key will be replaced with the words in the keyword box when actual searching is performed.
  • MenuRoot
    Root tag for all toolbar items and menu items.
    • mi
      Universal tag for all toolbar items and menu items. An mi tag can have one ore more mi tags as children hierarchically. The top-level mi tags will be used as toolbar items (buttons). The descendant items of a toolbar item will be shown as drop-down menu when the drop-down arrow of that toolbar button is clicked. The first top-level branch of mi tag tree is used for the logo button and its drop-down on the left-end. The rest top-level branches are used for the rest toolbar buttons and their drop-down menus. mi tag can have the following attributes
      • name
        Display name of the toolbar item or menu item
      • url
        Special a URL for this attribute. Clicking the toolbar item or menu item will navigate the user to this url. A menu item must have a valid URL attribute. However, a toolbar item with child menu items can have no URL. In this case, the toolbar item will be shown with whole drop-down style, i.e., clicking the button itself will also get the drop-down menu.
      • img
        The image index for the toolbar item or menu item. The image is retrieved from the bitmap file img16.bmp. The index is zero-based. If img is -1, no image will be shown for this item.
      • newwin
        Specify 1 or 0 as the value for this attribute. If the value is 1, the url for this toolbar item or menu item will always be opened in a separate new site window when the user clicks on it. The default value is 0. When the value is 0, whether the url will be opened in a new site window depends on the current settings in SlimBrowser and depends on assist keys pressed by the user (Ctrl / Shift).
      • Tooltip
        Tooltip displayed when you hover the mouse over a toolbar button. This attribute is not used for a menu item.

Bitmaps

Currently there are two bitmaps to be used by the toolbar.

• img16.bmp (See our sample bitmap)
  This bitmap contains all the images for the toolbar items and drop-down menu items. Each image must be 16x16 pixels in size. They must be lined up in parellel horizontally to make up the whole bitmap. You must use the exact purple color (RGB value: 255, 0, 255) as the transparent color. A color with the slightest difference like RGB(255,0,254) will NOT be treated as transparent color! You can recommended to save the bitmap as true-color (24-bit) bitmap. When you save a true-color bitmap to a 256-color bitmap, the original purple color may no longer have the exact value RGB(255,0,255) and thus may no longer be transparent. The images are referred to in the XML file by their zero-based index in the bitmap file.
• logo.bmp (See our sample bitmap)
  This bitmap image is shown on the logo button. The bitmap must be 16 pixels in height and can have arbitrary width. The exact purple color RGB(255,0,255) is used as the transparent color.

Macros

You can use any of the following macros as part of any URL used throughout the XML file. The macro will be substituted with its actual content when the URL is actually referenced during user interaction. The actual content will be automatically converted into safe escape sequences.

1. $key: the keywords in the search box. You can use this macro with any URL to make any toolbar button or menu item execute a searching action.
2. $site: the domain/server name of the current site

Functions

You can execute a built-in function as the action of a URL. The URL should be written in this format:

cmd://FunctionName

1. HighlightKeyword: highlight the search box keywords in the current web page
2. CleanHistory: Clean the search/keywords history for this XML-based toolbar.

Complete Sample Toolbar Based on FlashPeak Website

Screenshot

Download

Click the button below to download the sample toolbar. Extract all files under $instdir\toolbars\Flashpeak Toolbar. Restart SlimBrowser, select menu "View->Toolbars->Built-in Toolbars->FlashPeak Toolbar" to show this sample toolbar.