I decided to create a Google sidebar because I really wanted to use the flyout window used by national geographic in their picture of the day - figured it couldn't be that hard!
Firstly you have to know a little bit about how the side bar stuff works, but I can't explain it half as well as this site - take a peek it is really really good! I know its a white paper for beta 2, but it works fine on the RTC version.
So basically its all locally stored and rendered html, quite an elegant solution i suppose but a real shame its not XAML. This does make development a bit strange - and here are some important things to note:-
- You can't display external html pages EASILY - I did create a hacky work around which I will explain in detail below
- You can't right click (no view source or anything like that - make sense really)
Lets start with the first page - googlesearch.htm
<html xmlns="http://www.w3.org/1999/xhtml">So basically just a textbox (there is an image added via the linked css file). Now I have implemented three events on the textbox. The first one is called onmouseup - this is designed to popup the flyout window straight away, then after 250 milliseconds return focus to this textbox. onfocus stops the timer when it gets focus and onkeyup updates the flyout window about the new search.
<link href="css\stylesheet.css" rel="stylesheet" type="text/css" />
style="background-color:2c4579; color:White; position:absolute; top:46px; left:14px;width:100px;"
onmouseup="intervalid = window.setInterval('search.focus();', 250); showEnlarge(this.value);"
onkeyup = "showEnlarge(this.value);"/>
The reason I have to pull focus back is because the flyout window instantly takes focus away from the text box! Quite irritating!
The other function onmouseup does is it shows the flyout window with the old search again if the user as closed it by clicking off it. This is all done via the function below (x is the text in the input box).
if(System.Gadget.Flyout.show == false)
System.Gadget.Flyout.show = true;
System.Gadget.Flyout.document.parentWindow.SearchTerm = x;
var SearchAddress = "http://www.google.co.uk/search?hl=en&q=";
if(document.getElementById('testiframe').src != SearchAddress + SearchTerm)
document.getElementById('testiframe').src = SearchAddress + SearchTerm;
test.innerHTML = e.description;
margin:0 0 0 0;
name="testiframe" width="640" height="480"></iframe>
So there you have it, my first Vista side bar - take a peek below! (click to make it bigger)
Im trying to submit the code to the sidebar website, but it isnt going so well (some problem at microsofts end) - I will make the code available as soon as I can find somewhere to upload it!
Any suggestions then let me know!