Saturday, November 11, 2011

Creating Vista Gadget using HTML, CSS, & JavaScript

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.




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


Saturday, December 12, 2009

 

Data from Microsoft SQL server in Windows 7 Gadget

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?

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

  3. 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?


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

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

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

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

  8. 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: , , ,


Sunday, November 22, 2009

 

Secure Login to an API from Windows 7 Gadget

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


Saturday, September 19, 2009

 

Enterprise level Windows 7 Gadget

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:
If you come across any problem feel free to email me.

Labels: , , ,


Monday, March 16, 2009

 

Web Reference in Creating Vista Gadget Book

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


Thursday, February 19, 2009

 

Auto Update for Vista Gadget

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:
  2. a> User need to download the gadget in there desktop
    b> They need to close the existing gadget. before installing the new version
  3. Instead of giving your user a URL of the gadget, redirect them to the upgrade page where you can put step-by-step instructions.
  4. 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: , , ,


Monday, February 2, 2009

 

ComicStrip Vista Sidebar Gadget

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 Problem from Gadget developer 

First of all let me thank you the very useful ComicStrip gadget. I really enjoy using it, However I have slight problems with it.These are:

  1. When I restart the PC, the gadget reverts all settings to default, in my case, I only need Dilbert, Garfield and Calvin & Hobbes strips but when my PC restarts the gadget always displays all the default strips like Maxine, Chicken and so on. I cannot figure out what is the problem, I am admin on my PC and I also have full control rights for the Sidebar directory. I also checked the settings.ini for gadgets, it has the right settings for ComicStrip. This also happens sometimes when I just hibernate the PC.
  2. The other thing: on the settings page Calvin and Chicken are mixed up, so when I select Calvin, I get Chicken strips and vice versa.

Could you please at least give me hints how to resolve this problem or could you please fix it? I  really enjoy using your superb gadget and I definitely do not want to switch to an other feed reader sw because the Sidebar is the most comfortable solution AND simply there is no alternative for your gadget, it is one of a kind...


The Solution 

The session in sidebar vista gadget is not saved when the computer restarts, so the only way to make the settings persist is set the defaults in the code. ComicStrip gadget is based on MyBlog Gadget which is the core focus of Chapter 4 to Chapter 8 of Creating Vista Gadgets .If you have the book, check the portion where we initialize and set the defaults for the Gadget.

Here are the steps to change the defaults:

1. Open the following location in Windows Explorer %userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\ComicStrip.gadget\code

2. Open the Gadget.js file in notepad.

3. Look for the function SetDefaults()

you will see the following code

function SetDefaults()
{
System.Gadget.Settings.write("Dilbert",true );
URLFeedsActive[0] = 1;

System.Gadget.Settings.write("Garfield",true );
URLFeedsActive[1] = 1;

System.Gadget.Settings.write("Chicken",true );
URLFeedsActive[2] = 1;

URLFeedsActive[3] = 0;
URLFeedsActive[4] = 0;
URLFeedsActive[5] = 0;

System.Gadget.Settings.write("Calvin",true );
URLFeedsActive[6] = 1;

System.Gadget.Settings.write("Maxine",true );
URLFeedsActive[7] = 1;

URLFeedsActive[8] = 0;
URLFeedsActive[9] = 0;

System.Gadget.Settings.write("Peanuts",true );
URLFeedsActive[10] = 1;

System.Gadget.Settings.write("BobBetty",true );
URLFeedsActive[11] = 1;

}

SO FOR 11 COMIC STRIPS YOU HAVE 11 SETTINGS

if you want only dilbert , garfield and calvin your function code should look like the following

function SetDefaults()
{
System.Gadget.Settings.write("Dilbert",true );
URLFeedsActive[0] = 1;

System.Gadget.Settings.write("Garfield",true );
URLFeedsActive[1] = 1;

URLFeedsActive[2] = 0;
URLFeedsActive[3] = 0;
URLFeedsActive[4] = 0;
URLFeedsActive[5] = 0;

System.Gadget.Settings.write("Calvin",true );
URLFeedsActive[6] = 1;

URLFeedsActive[7] = 0;
URLFeedsActive[8] = 0;
URLFeedsActive[9] = 0;
URLFeedsActive[10] = 0;
URLFeedsActive[11] = 0;
}

4. Make the change in SetDefault function and save Gadget.js file.

5. Close the gadget from sidebar.

6. Go to gadget picker window and add the gadget again.

Hope this helps.

Labels: , , , ,


Thursday, January 29, 2009

 

Visual Studio Template for Sidebar Gadget

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 templates

Here is one of the user email I recieved with a query about installing the template. So if you are having similar issues read on.

The 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. 
The information on installing this has been a bit confusing. Should I unzip the files and put them in the C:\Users\User_Pin\Documents\Visual Studio 2005\Templates\Project Templates folder, or should I place them under the same directory path’s Visual Web Developer folder? 

I have not had any luck with VS 2005 recognizing this template. Thanks so much for any info…

The Solution

For the installing the Visual Studio template, all you need to do is put the gadgetTemplate.zip in the following folder 'My Documents\Visual Studio 2005\Templates\ProjectTemplates' and it should work. Here is the Screen-shot



Once you put the zip file there , Open Visual Studio 2005 and click on File -> New Website and you will see the template in My Templates section. See the screen shot below


The User Reply

I didn’t notice that the language, by default on the “New Web Site” came up “Visual Basic”. Once I set it to “Visual C#”, the template appears. That’s funny since. I don’t even have Visual Basic installed, but all is well now. Thanks for the help


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

Labels: , , ,


Friday, January 2, 2009

 

SOAP based Web Service in Vista Sidebar Gadget

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, 
  1. A SOAP based Web Service can be called inside a gadget similar to an rss feed. which is thoroughly covered in Chapter 5 - Chapter 8. Blog Gadget covers this topic in details. A webservice also return an XML file which then will be required to parse.
  2. Sending notes to refer Chapter 9, Information Gadget which uses a Text based Web Service for a Sidebar Gadget, to get some insight and 
  3. A link to an article which elaborates a usage of webservice http://www.codeproject.com/KB/gadgets/DynamicsCRMGadget.aspx.
You wll be glad to know that he was finally able to use the Gadget Template in the book for the webservice and with his permission I am sharing his gadget with all of you. The gadget download page: http://www.maladilusoes.com/DLTL. Here is screenshot of the Gadget: Ontime – Astrology Time Management.


click to go the gadget download page


So, what kind of Vista Gadget are you creating ?

Labels: , , ,


Thursday, December 11, 2008

 

The Big Question: Vista Gadgets in Windows 7

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


Sunday, December 7, 2008

 

Uninstall and reinstall a Vista Sidebar Gadget

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.


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

Labels: ,


Check out: The Best Windows Vista Tips and Tricks!