Windows 7 and Vista Sidebar Gadgets

If you ever wanted a book on Creating Vista Gadgets, with lots of useful samples. Here is a book on the topic. Click here to buy the book.

• Creating Vista Gadgets: Using HTML, CSS and JavaScript with Examples in RSS, Ajax, ActiveX (COM) and Silverlight (Buy from Amazon)

releasing on "May 19, 2008"

Table of Content



Advanced Gadgets included in the book

This book has advanced samples using ActiveX (COM), Ajax, & Microsoft Silverlight. This guide will walk you through the process of designing and developing of each of them.



(a) Build a Blog Gadget using RSS /Atom Feed

MyBlog Gadget will walk you through a complete gadget development lifecycle using an online RSS/Atom Feed. We see the design patterns and standard practices, common assumptions and then add advanced features to the gadget with multiple feeds and advance page and record management.

(b) Create an Information Gadget with Ajax

Site Statistics Gadget uses Ajax and a Web API provided by Sitemeter.com to create a unique Information Gadget which mimics the online free service provided by Sitemeter.com. It shows how to do screen scraping and load part of a web page in the Flyout window.

(c) Develop a Utility Gadget using ActiveX COM technology

Most Recent Used (MRU).Net Projects is a innovative gadget which lists Most Recent Used projects in .Net. It shows projects for Visual Studio 2003, Visual Studio 2005 and Visual Studio 2008. The gadget also shows how to read and enumerate registry data. The gadget also explains how to use advanced features of Windows Power Shell and Windows Management Instrumentation (WMI) in a sidebar Gadget.

(d) Incorporate Internet Radio and YouTube Video in Fun Gadgets

Learn to create a Radio Gadget based on an online streaming server and Video Gadget using a YouTube Video feed. The gadgets also show how to incorporate windows Media Player as well as Flash Media Player inside a Sidebar gadget. See how to use XMLDOM to read online feed instead of Ajax approach.

(e) Create Cutting edge Sidebar gadget using Microsoft Silverlight

Silverlight World Clock Gadget shows time for multiple cities of the world. It also gives you an insider view of XAML and Microsoft Silverlight. Know the programming model of Silverlight in gadget development.

(f) Developing a Sidebar Gadget using Microsoft Popfly.NET

Website Comparison Gadget uses Microsoft Popfly.net to create an innovative gadget which compares the popularity of different websites with the help of services provided by Live Search and Microsoft Bar graph. It shows how to create the mashups in minutes and port it to Sidebar platform.

I would like to hear any questions/ comments/ suggestions, you may have !

Labels: gadgets, vista

So I recieved another of the fan mails with the following questions. If you come across similar issues feel free to email me.

1. Is there any sample code to use web service to pull the data from Microsoft SQL server 2005/2008?
   

The Sitemeter Gadget chapter 9 uses Ajax to pull data from online web service and sitemeter uses database in the background to pull and display data. so as long as your web service is able to pull and display data in the form of TEXT, XML, RSS, ATOM, JSON, HTML and HTML, you can display it in the Gadget.


2. I have an icon/image to refresh the data on the Gadget.. is it possible to change the cursor to wait/ progress till the data gets refreshed?
   


Search for this functionality in JavaScript in an html page. Gadget main page is essentially an html page and you can inlcude a JavaScript file which can be used to change the cursor.


3. Is it possible to show spinner on clicking the OK button in the settings page?
   

Yes, we do this in blog gadget(loading animation) chapter 8


4. Is it possible to show some alerts upon clicking the OK button in the settings page?
   

Most of the widgets, allows for message alert, you should also check debugging section to see how to use JavaScript and VBScript alert boxes, look also the last chapter Tips and Tricks

Labels: Book, gadgets, user query, windows 7

Recently I got an email from a reader asking for advice on login and session management with multiple html pages in a Windows 7 Gadget. Here is the problem and the workaround.

I'm trying to build a gadget which logs on the a HTTPS server and retrieves & shows data. I am trying to post login credentials to a server, but get an error 'access denied'.However, it is possible to change the settings of IE to allow cross-domain data access.But that's not ideal, users would need to change there settins which could be complex for them. I am wondering if there are alternate options for login, maybe you know any. Using a website instead of posting/retrieving data via an API might be a solution. It is way we can facilitate a secure login via HTTPS and show data (and stay in control). Also I was wondering if you there are ways to encrypt data within a Gadget. I believe this is not ideal, since a gadget can easily be reverse engineered.

---

The Possible Workaround

Cross domain access is allowed in the Gadget, and you can create a REST based API (similar to Facebook/last.fm/flickr) for login to it. There are some javascript libraries which can be used for encryption, The best way would be to create a COM object in C++ or VB and let that handle the login/ encryption (see chapter 9 with MRU example ) part.

If you are creating your next windows 7 gadget and come across any problem, send me an email I would be happy to help.

Labels: gadget, user query, windows 7

I recently got this email from a user who is trying to build an enterprise level Gadget for Windows 7. If you are in the same boat see if you come across similar problem (my comments below).

"I am working to build a windows 7 gadget for our enterprise. We wanted this gadget to be our desktop source for our application. Below is a brief overview of what we want to achieve:

1. Launch the gadget. Display a login screen in a flyout and try to connect to our server
2. Once we login, try to display various modules and also favorites across each module. Each module here is an application
3. If we select a module, display a flyout screen which displays the transactions within the module
4. Once a transaction is selected, open the transaction in a chrome less window

All our application logic resides on a server. We do have all the API’s to perform the above functions, but we are not sure if we can achieve the same through a gadget. Below are some of the specific problems that we are coming across:

1. How to initialize a session in a gadget and how to handle sessions? This is critical because we need to find some way of logging into the application and storing the login information
2. Does gadgets support handling of cookies?
3. Which is the best approach to connect to our server? Based on our research, we found out that using iFrames is a good option; but the problem is they do not support or hold session variables

Your inputs we be greatly helpful and appreciated. At this point we are currently in a deadlock. Looking forward for your response. "

---

Here is my comments on the question:

About Your scenario

1. Launch the gadget. Display a login screen in a flyout and try to connect to our server

I would suggest have the login in the settings page (Check sitemeter gadget chapter 9)

2. Once we login, try to display various modules and also favorites across each module. Each module here is an application

If these modules are hosted on a server and have a server page then you can directly login to server page in the iframe and redirect to module page, the cookies are maintained

3. If we select a module, display a flyout screen which displays the transactions within the module

this again can be both iframe based solution (server page embedded in the flyout) or an Ajax API calling the server and returning data in xml/json and parsing and displaying it in the flyout.

4. Once a transaction is selected, open the transaction in a chrome less window

This can be open a new window JavaScript method (note that Gadget supports full javascript as well as VB script)

About the comments:

• In a Gadget the best way to maintain session is by using Gadget settings. You can easiliy read/write to the gadget settings which will persist. This can be used for both login information and user choice.
• To connect a server the gadget allows Ajax to connect to a server and retrieve data in the form of Text, HTML, XML, XHTML, XML RPC, JSON, and SOAP, any of the option can be used with Ajax with cross domain access from the gadget. (check Blog gadget example chapter 5-8)
• You can always use Iframe inside the flyout window if you need special server pages/ graphs (see chapter 9)

Labels: Book, gadgets, user query, vista

Here is the list of Web references used in the "Creating Vista Gadget book"

------------------------------------------
Chapter 1
------------------------------------------
Create Channel Definition Format (CDF)
http://msdn2.microsoft.com/en-us/library/aa768024.aspx    

Weather Gadget source of information
http://weather.msn.com   

Windows Live Gadgets
http://microsoftgadgets.com/livesdk/index

Yahoo Widgets(Konfabulator)
http://widgets.yahoo.com

Apple Dashboard Widget
http://www.apple.com/downloads/dashboard

Google Desktop Gadget
http://desktop.google.com

DesktopX Widget
http://www.stardock.com/products/desktopx

Samurize Widgets
http://www.samurize.com

KlipFolio Widgets
http://www.klipfolio.com

Apollo Widgets
http://labs.adobe.com/technologies/air

AveDesk Widgets
http://www.avedesk.org

Opera Widgets
http://widgets.opera.com

------------------------------------------
CHAPTER 2
------------------------------------------
Tutorial on CSS and HTML
http://www.w3.org/Style/Examples/011/firstcss

DOM Level 1 specification
http://www.w3.org/TR/REC-DOM-Level-1

Article on reusing MSHTML component
http://msdn2.microsoft.com/en-us/library/bb508516.aspx

Information on HTML Application
http://msdn2.microsoft.com/en-us/library/ms536496.aspx

Windows Sidebar Object Reference
http://msdn2.microsoft.com/en-us/library/aa965853(VS.85).aspx

addshadow and other gadget protocol methods
http://msdn2.microsoft.com/en-us/library/aa359356(VS.85).aspx

Widgets 1.0 W3C working draft
http://www.w3.org/TR/widgets

------------------------------------------
CHAPTER 3
------------------------------------------
Soapbox Video Gadget
http://www.codeproject.com/KB/gadgets/SoapBoxGadget.aspx

Use of Microsoft Copyright content
https://www.microsoft.com/about/legal/permissions/default.mspx

Colors and contrast effects
http://www.colorsontheweb.com

Microsoft design and dimension guidelines
http://msdn2.microsoft.com/en-us/library/aa511443.aspx

HTML and CSS Design Example
http://www.w3.org/Style/Examples/011/firstcss

------------------------------------------
Chapter 5
------------------------------------------
RSS information at the Harvard website
http://cyber.law.harvard.edu/rss/rss.html

About Atom syndication format
http://tools.ietf.org/html/rfc4287

Visual Studio Express editions Free downloads
http://www.microsoft.com/express/download

JavaScript Object Notation(JSON)
http://www.json.org

------------------------------------------
Chapter 8
------------------------------------------
Windows Vista User Experience Guidelines
http://msdn2.microsoft.com/en-us/library/aa511258.aspx

Windows Script Host
http://msdn2.microsoft.com/en-us/library/at5ydy31.aspx

Script Debugger for Windows NT 4.0 and Later
http://www.microsoft.com/downloads

Firefox plug-in for debugging
http://www.codejacked.com/debugging-javascript-with-firefox

Microsoft Cabinet Software Development Kit (Tool for creating a vcab file)
http://support.microsoft.com/kb/310618

VeriSign public timestamp dll
http://timestamp.verisign.com/scripts/timstamp.dll

------------------------------------------
Chapter 9
------------------------------------------
Sitemeter
http://sitemeter.com

Internet Explorer Developer Toolbar
http://www.microsoft.com/Downloads

Child node attributes in HTML document
http://msdn2.microsoft.com/en-us/library/ms537445.aspx

W3C DOM Level 1 specification
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/

------------------------------------------
Chapter 10
------------------------------------------
WMI Tasks for Scripts and Applications
http://msdn2.microsoft.com/en-us/library/aa394585.aspx

WMI Code Creator
http://www.microsoft.com/downloads/details.aspx?FamilyID=2cc30a64-ea15-4661-8da4-55bbc145c30e

Identifier for Visual Studio project
http://msdn2.microsoft.com/en-us/library/hb23x61k(VS.80).aspx

------------------------------------------
Chapter 11
------------------------------------------

SHOUTcast Internet radio
http://www.shoutcast.com/

Real Player download
http://www.real.com/player

Object Model reference for Scripting
http://msdn.microsoft.com/en-us/library/dd563945(VS.85).aspx

YouTube RSS Feeds
http://www.youtube.com/rssls

------------------------------------------
Chapter 12
------------------------------------------
Download Silverlight Plug-in
http://www.microsoft.com/silverlight/downloads.aspx

XAMLPad download link
http://msdn2.microsoft.com/en-us/library/ms742398.aspx

-----------------------------------------
Chapter 13
------------------------------------------
Feeds distribution website
http://feeds.feedburner.com

Information on XMLHTTPRequest object
http://msdn2.microsoft.com/en-us/library/ms535874(VS.85).aspx

Beginner guide on XML DOM
http://msdn2.microsoft.com/en-us/library/aa468547.aspx

Details on Feed objects visit
http://msdn2.microsoft.com/en-us/library/ms684749(VS.85).aspx

Gadget graphic protocols
http://msdn2.microsoft.com/en-us/library/bb508512(VS.85).aspx

Free Photo editing software Paint.Net
http://www.getpaint.net

Microsoft Accessibility Developer Center
http://msdn2.microsoft.com/en-us/accessibility/default.aspx

list of DHTML events available to an element
http://msdn2.microsoft.com/en-us/library/ms533051(VS.85).aspx

W3C initiative Web Content Accessibility Guidelines 2.0
http://www.w3c.org/TR/WCAG20/

Lighthouse for the Blind, an expert in vision disabilities
http://www.lighthouse.org/accessibility/effective-color-contrast/

Vista Security
http://msdn2.microsoft.com/en-us/library/aa965881.aspx

User Account Control and WMI
http://msdn2.microsoft.com/en-gb/library/aa826699.aspx

Inspect Your Gadget (Security related article)
http://msdn2.microsoft.com/en-us/library/bb498012.aspx

Simple Gadget Samples for Windows Sidebar
http://msdn2.microsoft.com/en-us/library/bb735517(VS.85).aspx

JsMin (Online Javascript compressor)
http://fmarcia.info/jsmin/test.html

Gadget using Microsoft Dynamics
http://www.codeproject.com/KB/gadgets/DynamicsCRMGadget.aspx

Trickofmind Gadget
http://www.trickofmind.com

Labels: Book, gadget, Sidebar

I got this question from a Gadget developer!

"We have an auto-upgrade mechanism in place which gets notified if a new version is available thanks to a Web service.

Clearly this will alert users to the presence of a new version, and allow them to download it. However, once downloaded we’d like the old version to be replaced by the new one. Right now we are finding that the new one appears side-by-side with the old one, and the user has to remove it manually.

Do you have any ideas about how to prevent this?"

If you have a similar concern, here is a detail on what needs to be in the new version and what happens when the user download a new version of your existing Gadget.

To replace the existing gadget with a new version the following needs to be there:

1. Name of the Gadget should be same.
2. Gadget configuration file need to be same except for the version number which needs to be greater.
   
3. The current gadget must be closed from the sidebar.
   

What happens is, when user downloads a gadget in the temp folder, the gadget is renamed to gadget(1).gadget (if old gadget is also there), so technically this becomes a different gadget(rule 1 above). And If the current gadget is in the sidebar the new gadget install itself again(rule 3). Although there is no direct way to close the gadget from the side bar, what you can do is this.

1. When an upgrade is available. Give an Alert message that:
a> User need to download the gadget in there desktop
b> They need to close the existing gadget. before installing the new version

2. Instead of giving your user a URL of the gadget, redirect them to the upgrade page where you can put step-by-step instructions.
   
3. The best way of course is to Avoid an Upgrade all together, in my experience very few people go for an upgrade if existing gadget is working.

Auto-update is also discussed in the "Appendix A: Tips and Tricks" section of the book.

Labels: gadget, gadgetbook, user query, vista

Download

One of the most popular demo Gadget in the book is ComicStrip Gadget. I keep getting emails from users all over the world about how to customize it. Note that this gadget is meant for education purpose only. Here is one of the conversation.



If you are also interested to customize the Gadget Read On.



The Solution 

Labels: Book, gadget, gadgetbook, user query, vista

The Gadget books comes with a Visual Studio Temopate with all the reusable functionalities. To create a Gadget all you need to do is Install the tempalte and Create New Project as you do in Visual Studio and Select Innovate.Gadget from your templatesThe Problem (user email)

I would like some clarification on the Gadget Template code so I can make good use of the template if you please. 

So if you are also trying to use the template you know (now) what kind of issues are there. Take care.

Labels: gadget, Sidebar, user query, vista

I got the following email the other day from a fellow gadget developer, regarding a problem with a Gadget which access a SOAP based Web Service.

"I bought your book 'Creating Vista Gadgets' and congratulations... It’s a very good book since it gives both technical details and a broader view of the subjects on other areas which engineers usually forget about.
My aim is very simple… I wanted to migrate a small windows application to the vista gadget platform. It’s an astrological quality time meter using the Webservice http://webservices.plaintime.com/Service.asmx?wsdl. Since my knowledge of XML and Javascript is more google based I’m having problems understanding how to code it. Any help is welcome.

Although I could not help him directly, except for telling him that, 

Labels: create, gadgets, Sidebar, vista

If you are one of those users, who are thinking whether vista gadget will make it to windows 7. Well ! Its official now.

Vista Gadgets are not only available in Windows 7 but are also integrated in the context menu. Though you won't see the sidebar anymore so you can just drag the widget in your desktop where ever you want. Here is a screenshot submitted by a user with Silverlight Widget (Chapter 12) on Windows 7



So your investment on Vista Gadgets are there to stay. Start creating now.

Labels: gadget, news

A common concern among vista gadget user is, how to reinstall a gadget or uninstall a gadget. A Vista Gadget is not an application so it does not show up in the Add/Remove programs.

Here are four simple steps to uninstall and reinstall.

• Uninstall Step 1 -> Close the existing gadget from the sidebar
  
  
• Uninstall Step 2 -> Go to the Gadget picker box, Right click the gadget icon and then click uninstall
  
  

To Reinstall a Gadget. First uninstall a gadget and then install the latest version

• Reinstall Step 1 -> Download and save the latest version to the desktop
  
• Reinstall Step 2 -> Double click the gadget in the desktop to re-install.
  

Labels: gadget, Sidebar