How I Made The myITforum.com Live Toolbar Button
If you have not looked at the Windows Live Toolbar I would suggest it for a couple reasons, first if you are still using IE6 it gives you tabbed browsing. The second is you can search the myITforum site directly from the search field in the toolbar with this button!
To create the toolbar buttons you can go one of two routes. The first is to design it through their website, this is pretty straight forward, you can select your links and put them, your search link, RSS, tags, button icon, etc. It will create the .btn file for you and submit for approval. The second one is almost as easy but gives you much more flexibility.
The second one is based on you knowing some XML, if you already know XML then you should have no problems at all, if you are new to XML it is pretty easy to pickup.
Here is the XML structure from the SDK:
In this version they leave out most of the advanced features that you can include with your custom button but I will explain these first and then discuss the advacned features. 
Starting from the top, the <?xml version="1.0" encoding="utf-8"?> element just lets the web browser know how to read the XML this doesn't need to be modified. The next element is the <button> just as in HTML all of the elements need to be closed and this is just the parent element for the XML file. The <buttonNamespace> element is optional but recommended, it combines with the name of the cab file (more later) to create the installation directory, if used this has to be unique. The <locale language="en-us"> element defines the language, english, spanish, italian, etc. and the market, such as English - US or English - UK. The next element <buttonText> defines the text displayed on the button this is a required element and if you define more than one locale you must have a corresponding <buttonText> for each locale. The <tooltip> is what appears on the screen when someone drags the mouse cursor over the button. This should be a short description of what your button does, but this is not a required element. The next one is the <icon src="weather.bmp" /> element, this is the bitmap that will appear on the toolbar. This should be 16x16 pixels and 32 bit color alpha channel. The image I used is not the best and I will update it later. The next element starts to define what your button does, in this example they only have the <shortcuts> element. It is only used for opening web pages, you can add up to ten shortcuts per locale to open. If they are using IE7 with multiple tabs enabled it will open each link in a separate tab, if they have multiple tabs disabled or are running a browser that doesn't support it it will only open the first link (shortcut). Alternately you can define the <buttonWindow> element as well, but that is covered below since they do not use it in this example. The other two closing elements are just that, they close out the <locale> and <button> elements.
Now on to my button.
You will notice there are some different elements in mine that are not in the example above and I won't cover the same elements listed above.
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
The major differences here are the <links> elements and the <searches> elements, the links elements allow you to create a list of links for the button, as you can see I create a list of links to other parts of the myITforum.com website, the forums, wiki, FAQ's, News section, donations, and articles. You can have up to 20 links on each button. The "link name" is the friendly name that the user will see when then click the arrow that shows the list, and the href= is the link you want them to go to when they click the friendly name.
The searches is the meat of the button in my opinion and is really easy to do. It is under the <searches> element. Two keys to the search element, all the "&" have to be replaced with the "1&" to join the string together and the {query} is what pulls the search field from the live toolbar so that would be input into the search criteria on the page.
And that's all there is to it. This is not the final version that I used and it has even been updated since then but if you have any questions please let me know.
You can download the myITforum.com button here.
Regards,
Anthony
Anthony Clendenen | Senior Technical Consultant | Microsoft Practices | Dimension Data
“Dimension Data is Microsoft’s 2006 Global Advanced Infrastructure Technology Innovation
Partner of the Year… for the Dynamic Desktop Deployment Solution”
Trackbacks
No Trackbacks
Comments
No Comments
