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.
- Open Visual Studio
- Hit Shift+Alt+O (open web site)
- Paste in the path to the gadget folder
- in my case that’s C:\Users\username\AppData\Local\Microsoft\Windows Sidebar\Gadgets\VistaSidebarGadgetCS1.gadget
- A quick tip for you, if you hold down the shift key when you right-click on a file/folder in Vista you get an option to "Copy as Path" which copies the full path of the file / folder to the clipboard
- Hit the "Open" button
- Your gadget should open in Visual Studio
- Changes you make will be reflected when you re-add the gadget to the toolbar
- Right click on the images folder
- Select "Add existing item" and add the three images to the folder
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:
- If you’ve changed images, you will have to restart the Sidebar to see the changes
- If something isn’t working and you want to have a play around without having to add your gadget to the Sidebar over and over (eg your HTML or CSS isn’t right) you can always right-click on the HTML file in Visual Studio and select "View in Browser".
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?