Mike Ormond's Blog

Musings on mobile development and Windows Phone 7 in particular.

Take Our Gadget, Give it a Design

Take Our Gadget, Give it a Design

  • Comments 4

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

Docked UnDocked Flyout

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

image

As an aside I would tend to move my styles into their own css files (eg have separate flyout.css, settings.css files etc rather than having inline styles as are used in the template in flyout.html for example. Same goes for some of the JavaScript but I'm going to try and minimise the number of changes required to make this work so we'll stick with the structure of the template for now. If you want to start refactoring stuff yourself, be my guest.

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:

image

And the following CSS (in default.css) positions things in roughly the right place:

image

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 just changed the markup, JavaScript or CSS in your gadget, re-adding it to the Sidebar will allow you to see the changes
  • 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".

imageAt 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?

Technorati Tags: , ,
Page 1 of 1 (4 items)