This is where you can let your creativity loose. You have lots of options here; you can change the size of the gadget, the flyout, the undocked gadget as well as defining your UI and styling. Go crazy...
As I haven't got much creativity, I've stuck with something fairly simple. I've kept the default sizes defined by the project template and I'm just going to add some simple styling and UI. Let's start with the overall look and feel.
Let's imagine our gadget is a Technorati search gadget (it might be a Technorati search gadget but I haven't written the code yet so I'm keeping my options open). We want to give it a distinctive UI so people can spot it easily on the Sidebar. I created some images to use as backgrounds for the docked / undocked gadget and the flyout (the undocked is really poor as I just upscaled the docked version for the sake of time).
Grab the images below (make sure you get the "full" image by clicking through as the image size is critical). Note that the size of each image matches the size of the element it's going to act as background for. So the docked image is 120x100px, the undocked 400x400px and the flyout 350x550px (you can find these sizes defined in default.css, utils.js and flyout.html).
We need to add the images to our gadget project. The easiest way to work with our gadget is to open the copy we created in the gadget folder. That way we don't need to keep copying our changes back and forth.
To make these images the backgrounds for their respective elements, we just need to set the CSS background-image property for each. Let's do that for flyout.html first as, in our case at least, it's a static property. We can modify the markup in flyout.html thus (I've also removed the text):
For the docked / undocked images, the styling is done dynamically. When the gadget transitions between docked and undocked states the dockGadget() / undockGadget() functions are called. These already set the body width / height properties so we can simply set the backgroundImage property here as well. eg in the dockGadget() function:
oBody.backgroundImage = "url( '../../images/Docked.png' )";
We should probably set the property in the default.css file as well for completeness (for the docked state).
I've added a little bit of UI to the gadget so we have a textbox and a button to perform a search. Gadget.html now looks like this:
And the following CSS (in default.css) positions things in roughly the right place:
We should now be in a position to see the effects of our changes. A few things to remember before you go through the hair-pulling exercise I went through:
At this stage, hopefully you have a gadget that looks like this when docked. If you undock you'll get a bigger version of the gadget but with no UI (just a background image). I leave it to you if you want to thrash out the UI for the undocked version. (Of course you can always have the undocked version look identical to the docked version where it doesn't make sense to have a bigger UI when undocked). If you click the "Go" button, the flyout should appear with "Results" written in the black bar at the top.
Starting to look a little more presentable isn't it?
PingBack from http://www.universityupdate.com/Technology/Microsoft_Windows/4772714.aspx
I've added some functionality to the gadget we've been building in part 1 and part 2 but I think
Last month I did a webcast on Vista Sidebar Gadgets and how you can use them to extend the reach of your