Saturday, 13 January 2007

Windows Vista sidebar development

Well I thought its about time I looked at this XAML stuff awaiting me in .net 3, so I fired up the downloads and thought Id do a quick search... and to my horror I found vista sidebar does not use XAML!!!! shocking I know. Well it gets worse, I have had to hack together so much in order to get a simple search of Google working, but it works and the results are nice - so here is the how to!

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 get no error messages - This means you have to forget using activx, in fact any sort of pop ups including javascript alerts, also if your script falls over you only know because things stop working!
  • 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)
So quite a few challenges from the outset!

Lets start with the first page - googlesearch.htm


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Search</title>
<script type="text/javascript" src="pod.js"></script>
<link href="css\stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body onload="load();">
<input type="text"
style="background-color:2c4579; color:White; position:absolute; top:46px; left:14px;width:100px;"
name="search"
id="Search"
onfocus="window.clearTimeout(intervalid);"
onmouseup="intervalid = window.setInterval('search.focus();', 250); showEnlarge(this.value);"
onkeyup = "showEnlarge(this.value);"/>
</body>
</html>
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.

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).

function showEnlarge(x)
{
if(System.Gadget.Flyout.show == false)
{
System.Gadget.Flyout.show = true;
}
System.Gadget.Flyout.document.parentWindow.SearchTerm = x;
}
}
SearchTerm is a javascript variable in the flyout window, you can see how this is used below in the flyout window html:-
<html>
<head>
<title>Google Searcher</title>
<script type="text/javascript">
var timer;
function load()
{
var SearchAddress = "http://www.google.co.uk/search?hl=en&q=";
try
{
if(document.getElementById('testiframe').src != SearchAddress + SearchTerm)
{
document.getElementById('testiframe').src = SearchAddress + SearchTerm;
}
}
catch(e)
{
test.innerHTML = e.description;
}
}
</script>
<style type="text/css">
body {
width:640;
height:480;
margin:0 0 0 0;
}
</style>
</head>
<body onload="javascript:timer = window.setInterval('load()', 100);">
<div id="test"></div>
<iframe SECURITY="restricted"
id="testiframe" src="javascript:GetADDY();"
name="testiframe" width="640" height="480"></iframe>

</body>
</html>
The clever part here is the Iframe. Basically we start a timer which constantly polls to see if the search term has changed - if it has it updates the address on the iFrame, otherwise it stays the same. Only other thing to note is the security="restricted" tag. This was required because google focus on the text box if the search returns nothing taking focus from the textbox on the side bar! Security="Restricted" prevents javascript calls - very hacky I know but it works (well it works in IE at least, sorry firefox users!)
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!

Ross

4 comments:

Manuel said...
This comment has been removed by the author.
Manuel said...

Hi,

i am very interested in your gadget. How can i contact you personally?

Ross Dargan said...

Hi Manuel, you can contact me at blog[at]the-dargans.co.uk

Glad you are interested in it!

Ross

info said...

Really interesting article!