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
Table of Contents for
Creating Vista Gadgets download Creating Vista" Gadgets: Using HTML, CSS and JavaScript with Examples in RSS, AJAX, ActiveX (COM) and Silverlight Rajesh Lal Contents at a Glance Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Part I 1 2 3 4 Part II 5 6 7 8 Part III 9 10 11 12 Part IV A B The Foundation Innovate with Windows Vista Sidebar Gadgets The Architecture ........................................7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 An Approach to Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Selling Your Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Developing a Gadget Creating a Simple Gadget with RSS/Atom Feed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Design Patterns and Standard Practices The MyBlog Gadget Revisited Debugging and Deploying a Gadget Advanced Samples Site Statistics Gadget with AJAX—An Information Gadget Most Recent Used .NET Projects—An Application Gadget Radio Gadget and YouTube Video Gadget—Fun Gadgets A Silverlight World Clock—Utility Gadget Appendices Tips and Tricks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Extras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 . . . . . . . . . . . . . . . . . . . . . . 183 . . . . . . . . . . . . . . . . . . . . . . 211 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 . . . . . . . . . . . . . . . . . . . . . . . 237 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Table of Contents Introduction 1 What’s in the Book. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Section 1: The Foundation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Section 2: Developing a Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Section 3: Advanced Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Special Features and Notations Supporting Website .............................................................2 ............................................................................3 Part I 1 The Foundation Innovate with Windows Vista Sidebar Gadgets Windows Sidebar 7 Introducing Gadgets and the Vista Sidebar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 .......................................................................8 ..........................................................8 Technology Behind Gadgets Brief History of Gadgets ...............................................................9 Innovate with Gadgets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Types of Gadgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Information Gadgets Utility Gadgets Fun Gadgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Application Gadgets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Gadgets in Depth. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 What Gadgets Are Not. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Different Views—The Three Hats of the Gadget. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Opacity Level and Always on Top Property. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Using Flyout for More Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Customization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Multiple Platforms for Gadgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Meeting Points for Different Gadgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 The Development Platform. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Gadget Ecosystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Other Desktop Gadget/Widget Platforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Gadget Comparison Chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Contents v 2 The Architecture Gadgets Overview 29 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 The Manifest File gadget.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 User Interface and Presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Core Functionality of the Gadget: JavaScript Resources, PNG, and Other Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Technology Behind Gadget Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 MSHTML Component, the Core of the Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Standard Web Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Sidebar Gadget as an HTML Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Gadget Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 ActiveX Technology. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Gadget Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 User Interaction and Sidebar Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 APIs to Access the File System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Core Features to Interact with the System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Communication and Other APIs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Sidebar Gadgets: The Road Ahead . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 3 An Approach to Design Design Considerations 49 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Putting Information First . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Constructing the Right User Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Usage Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Gadget Behavior Challenges for the User Interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Standard Dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Gadget Page When Docked . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Undocked Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Settings Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Flyout Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Other Interface Guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Visual Themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Icon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Drag Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Background Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Text and Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 vi Creating Vista Gadgets: Using HTML, CSS and JavaScript with Examples in RSS, AJAX, ActiveX (COM) and SilverLight Transparent Images in the Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Alpha Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Portable Network Graphics File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 GIF File Limitations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 About Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Keyboard Access . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 General HTML accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Theme Colors and Contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 4 Selling Your Gadget Pull Model 75 Gadget Revenue Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Push Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 How Gadgets Give You Business . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 The Ad Gadget. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Gadget as a Side Product. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Utility Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Free Information Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Supporting Your Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Part II 5 Developing a Gadget Creating a Simple Gadget with RSS/Atom Feed Brief Background on Feeds 91 Feed Gadgets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 About the MyBlog Gadget. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Basic Framework of the MyBlog Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Required Files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Directory Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 How the MyBlog Gadget Works. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 The Manifest File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Gadget Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Parts of the MyBlog Gadget. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 The Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Core Functionality of the Gadget Presenting with CSS and DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Putting It All Together. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Contents vii 6 Design Patterns and Standard Practices 115 Design Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Maintainable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Customizable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Extensible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Elements of Design Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Standard Layout for Files and Folders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Reusable Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Display and Presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Common Assumptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 The Gadget Will Always Work Regular Feed Updates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Internet Connection. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Caching of the Feed Data Memory and Session Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Adding Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Putting the Focus on the Gadget when It Is Loaded . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Adding Tab Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 The Enter Key Acting Like a Mouse Click . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Using the onfocus and onfocusout Events for Mouse Hover Effect . . . . . . . . . . 137 Making the Gadget’s Flyout and Settings Page Keyboard Accessible . . . . . . . 137 7 The MyBlog Gadget Revisited Recapping the MyBlog Gadget 139 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Taking the MyBlog Gadget to the Next Level. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Adding Multiple Feeds. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Managing Multiple Pages in the Gadget Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Unobtrusive Traversing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Docked, Undocked, and Mini Me Version . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Settings Page Configuration for the Mini Me Version. . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Gadget Window Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 8 Debugging and Deploying a Gadget Debugging Using WScript and VBScript Debugging Tools 159 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Debugging a Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Debugging Using JavaScript and DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Deploying a Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Gadget Installation Target. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Gadget Installation Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Gadget Packaging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 viii Creating Vista Gadgets: Using HTML, CSS and JavaScript with Examples in RSS, AJAX, ActiveX (COM) and SilverLight Deployment Using a Cabinet File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 CAB File Approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 A Windows Installer (.msi File) or setup.exe Comparison of Deployment Methodologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Part III 9 Advanced Samples Site Statistics Gadget with Ajax—An Information Gadget 183 The Goal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Background—www.sitemeter.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Site Summary Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Features and Technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Application Programming Interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Loading a Portion of a Web Page with Ajax and DOM. . . . . . . . . . . . . . . . . . . . . . . . . 190 Design Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Theme and Images of the Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Layout of the Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Usability of the Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 Developing the Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 . . . . . . . 200 Integrating the Existing Framework Retrieving Data for Site Summary Using API and Online Web Page Graphs and Pie Charts Based on the API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 10 Most Recent Used .NET Projects—An Application Gadget 211 Recent .NET Project Gadget. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Target of the Gadget. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Features and Technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 ActiveX COM Technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Windows Power Shell and Windows Management Instrumentation. . . . . . . . . . 216 Design Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Theme of the Gadget. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Layout of the Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Usability of the Gadget Developing the Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Integrating the Existing Framework Listing MRU Items from the Registry Reading the Registry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Contents ix 11 Radio Gadget and YouTube Video Gadget—Fun Gadgets 237 Media Gadgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 The Radio Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Background—Internet Radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Features and Technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Design Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Developing the Gadget. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 The YouTube Video Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Background—YouTube Video Feeds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Features and Technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Design Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Developing the Gadget. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 12 A Silverlight World Clock—Utility Gadget 261 The Silverlight Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Background—Microsoft Silverlight. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Features and Technology Microsoft Silverlight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 JavaScript for Creating the Silverlight Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Extensible Application Markup Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Design Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Theme and Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Layout of the Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Usability of the Gadget Developing the Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Integrating the Existing Framework The XAML File. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 Silverlight Clock Logic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Creating a Sidebar Gadget Using Microsoft Popfly. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 Website Comparison Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Creating a Mashup Using Microsoft Popfly Porting a Mashup to Vista Sidebar as a Gadget Where to Go from Here. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284 Part IV A Appendices Tips and Tricks Checking for a New Version of the Gadget Tracking Your Users 289 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 Automatic Update and User Tracking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 x Creating Vista Gadgets: Using HTML, CSS and JavaScript with Examples in RSS, AJAX, ActiveX (COM) and SilverLight Reading XML, XHTML, RSS/Atom, Html, Text and JSON Data. . . . . . . . . . . . . . . . . . . . . . 295 The XMLHTTPRequest object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Microsoft XML DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Windows RSS Platform & Microsoft Feed Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Globalization and Localization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Localized Gadget Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 Locales with Country Codes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Graphic Design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Gadget Protocols for Image and Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Sample Gadget g:Demo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Creating a Transparent PNG File in Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Creating Outer Edges/Shadow Effects in Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Security and Other Resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Protecting Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 Gadgets in an Enterprise (Accessing SQL Server). . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Resources and References. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 B Extras 315 Reusable Framework for Creating Gadgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Sample Gadgets Based on the Framework. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 The Widget-Box Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 The Comic-Strip Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 The Trick-of-Mind Gadget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 Share Your Gadgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Index 321 About the Author Rajesh Lal is an author, technology evangelist, and solutions engineer specializing in web technologies. He has received numerous awards for his articles on Windows Vista and Sidebar gadgets. He is a frequent contributor to Windows Vista Magazine and Code Project websites. With more than a decade of experience in IT industry in progressive roles from graphic designer, software developer, architect, team lead, and project leader to independent consultant, Rajesh enjoys taking an objective and pragmatic approach to developing applications using Microsoft technology. He has a master’s degree in computer science from Beaumont, Texas, and holds MCSD and MCAD titles. To read his Vista Gadget blog, go to www.innovatewithgadgets.com.
Labels: gadgets , table , vista
Guide to create a Sidebar gadget for a video feed (soapbox @ msn.com)
Introduction When I first started sidebar gadget development1 , I found gadgets cool and innovative. But the more I learned about them, the more I realized their usefulness. Gadget development provides a whole new platform, becoming more productive in ways unimagined. On one hand, it's a mini web application which can host a web page, call a web service, and use AJAX to read an RSS feed. On the other, it can interact with the Windows API using the power of .NET languages. Wow! That's the best of both the worlds, wouldn't you agree?
The most important factor is the unique way in which a gadget provides the interaction between the web, Windows and users. In this example I try to utilize this, to give user the "Power of Videos" in the sidebar. Check the architecture below.
To hold your interest, here is how it looks in the sidebar.
About the gadget: The power of videos Before I start, I must warn you: this gadget is quite addictive. Indulge yourself only during your spare time.
There are a number of RSS Feeds available from the Soapbox on MSN Video Beta page which give you the contents of the videos uploaded by the users. Some of the more interesting ones are: "Most Popular Videos", "Most Rated videos", and "Most Recent Videos". There is even a feed for "Videos By Tag" available, which we will use for searching videos. The idea behind this is to use those regularly updated feeds to show the user the video of his choice on the sidebar. If you want to know the basic barebones required to create a gadget, please refer to my first article Daily Dilbert . This article is actually an extension of that first article; I try to explain only those extra features which can be used to refine a gadget further:
Create a gadget which can play a video in the flyout How to take care of paging when you read an XML file Settings and Search Videos Add video to "Favorite List" Create, read, update, & delete local XML file from Sidebar Gadget (new) Some tips in general The architecture overview
Let's Begin
Create a video Gadget A standard XML file with the name Gadget.xml is required as shown below:
More information about this is available here
The name of the gadget is "Soapbox @ MSN" (as seen above). The namespace is basically to group more than one gadget (reserved for future use), which you can write in "mynamespace". MinPlatformVersion. Required. The expected value is "1.0."
"Permission" controls the amount of permission in the gadget. "Full" permission is required if you want to access a webpage through the gadget. With these two files you can deploy and test your gadget in the sidebar. The <permission> tags and <type> tags will be more flexible in future versions of gadget development.
Gadget.xml An XML file defining the gadget properties, including name, icon and description
main.html the Main HTML page
main.js The core code/script for the gadget
Settings.html Exposes gadget settings for the user to change
Settings.js Script for the Settings file
soapboxFlyout.html The html file which will be used in Flyout window
Icon, images etc For use in the gadget selection box
You can get more details on these here
Get the RSS Feed The Main.html file will have five elements ("DIV") to get the feed data: cell0, cell1 etc. We can show the videos as a list of five videos (below) or single video.
The Feed for the Gadget We have the URL which we call using the MSXML2.XMLHTTP object. This is the core of the AJAX until the feed gets loaded. Here is the magical JavaScript for this:
function getRSS() { document.getElementById("mylogo").Title = System.Gadget.Settings. read("feedText"); try { error.style.visibility = "hidden"; loading.style.visibility = "visible"; rssObj = new ActiveXObject("Msxml2.XMLHTTP"); rssObj.open("GET", System.Gadget.Settings.read("videoFeed") , true); rssObj.onreadystatechange = function() { if (rssObj.readyState = == 4) { if (rssObj.status == 200) { loading.innerText = ""; error.innerText = ""; error.style.visibility= "hidden"; loading.style.visibility = "hidden"; rssXML = rssObj.responseXML; page = 0; parseRSS(); if (chkConn) { setInterval(getRSS, 60 * 60000); loading.style.visibility = "hidden"; } } else { var chkConn; loading.style.visibility = "visible"; chkConn = setInterval(getRSS, 30 * 60000); } } else { loading.style.visibility = "visible"; } } rssObj.send(null); } catch(err) { loading.style.visibility = "hidden"; error.innerText = " Service not available"; error.style.visibility = "visible"; } } Service Not available As you can see, if there is an error while connecting the feed or an error in the internet connection, we want to show the "Service not available" screen.
Parse the XML File Here is the portion of the RSS Feed for a single item in the XML file and the corresponding "partial" ParseXML file to give you an idea of what we are doing with the feed.
function parseRSS(page) { rssItems = rssXML.getElementsByTagName("item"); rssTitle = null; rssAuthors = null; rssDescription = null; rssLink = null; rssTitle = escape(rssItems[i].firstChild.text); rssLink =rssItems[i].getElementsByTagName("guid")[0] .firstChild.nodeValue; rssViews = rssItems[i].getElementsByTagName("vidAt:playCount")[0] .firstChild.nodeValue; rssDateUpdate = rssItems[i].getElementsByTagName("vidAt:pubDate")[0] .firstChild.nodeValue; rssRatingValue = rssItems[i].getElementsByTagName("vidAt:rating")[0] .firstChild.nodeValue; rssDuration = rssItems[i].getElementsByTagName("vidAt:duration")[0] .firstChild.nodeValue; rssVDescription= escape(rssItems[i].getElementsByTagName ("vidAt:description")[0].firstChild.nodeValue); rssDescription=rssItems[i].getElementsByTagName("description")[0] .firstChild .nodeValue; myTitle = unescape(rssTitle) myTitle1 = myTitle.substr(0,16); myRatingTip = "Rating: " + rssRatingValueFormated2 + ", View: " + rssViews + ", Duration: " + rssDurationFormated ; document.getElementById("cell" + (cell)).innerHTML = "onclick=" showFlyout (\'' + rssTitle + '\',\'' + rssVDescription + '\', \'' + rssLink + '\',\'' + rssImage + '\',\'' + rssRImage + '\',\'' + rssViews + '\', \'' + rssDateUpdate + '\',\'' + rssDurationFormated + '\', \'' + rssRatingValueFormated2 + '\');" > } Since we have the feed required, we can create a flyout from the video. This is the showFlyout function, which is created dynamically and is used to pass all the parameters from the item to the flyout page.
function showFlyout(sTitle,sDescription,sGuid, sImage, sRImage,sView, sDateUpdate,sDuration,sRatingFormated) { if (System.Gadget.Settings.read("sTitle")==sTitle) { System.Gadget.Settings.write("sTitle", "myTitle"); hideFlyout(); } else { System.Gadget.Settings.write("sTitle", sTitle); System.Gadget.Settings.write("sView", sView); System.Gadget.Settings.write("sDateUpdate", sDateUpdate); System.Gadget.Settings.write("sGuid", sGuid); System.Gadget.Settings.write("sDescription", sDescription); System.Gadget.Settings.write("sImage", sImage); System.Gadget.Settings.write("sRImage", sRImage); System.Gadget.Settings.write("sRatingFormated", sRatingFormated); System.Gadget.Settings.write("sDuration", sDuration); System.Gadget.Flyout.file = "soapboxFlyout.html"; System.Gadget.Flyout.show = true; } } Other Settings for the Gadget Apart from the settings which are set on the showFlyout function, there are other settings which can be managed by the user. The user can search under "Video" or select from one of the Video feeds.
Once we have all the settings, we Build the video object in the flyout window.
function BuildVideoObject() { try { if (System.Gadget.Settings.read("videoSize") =="large") { Video_HtmlString = '‹OBJECT id="VIDEO" width="640" height="480" '; } else { Video_HtmlString = '‹OBJECT id="Body1" width="320" height="240" '; } Video_HtmlString += 'style="position:absolute; left:0;top:0;"'; Video_HtmlString += 'CLASSID="CLSID:6BF52A52-394A-11d3-B153-"'; Video_HtmlString += 'type="application/x-oleobject" VIEWASTEXT›'; Video_HtmlString += '‹PARAM NAME="URL" VALUE="'; Video_HtmlString += "http:/soapbox.msn.com/StreamingUrl.aspx?vid=" + System.Gadget.Settings.read("sGuid"); Video_HtmlString += '"›‹param NAME="stretchToFit" VALUE="1"›'; Video_HtmlString += '‹param name="AutoSize" value="1"› ‹ PARAM NAME="SendPlayStateChangeEvents" VALUE="True"›'; Video_HtmlString += '‹PARAM NAME="AutoStart" VALUE="True"›'; Video_HtmlString += '‹PARAM name="uiMode" value="none"›'; Video_HtmlString += '‹PARAM name="PlayCount" value="9999"›'; Video_HtmlString += '‹/OBJECT›'; document.write(Video_HtmlString); } catch (err) { document.write("Problem with the machine's Windows Media Player"); } } More information on the flyout is available here
Paging Since XML files can have hundreds of items, we need to be able to page it. So we add a DIV item in the main.html file with the following:
‹div id="tbar" title=""› ‹table width="100%" height="100%" border="0" cellpadding="2" cellspacing="0" ID="Table2"› ‹tr align="center" valign="middle"› ‹td width="12" class="arrow" onclick="chPage(-999);" align="right"› «‹/td› ‹td width="12" class="arrow" onclick="chPage(-1);" align="right"› ‹b›‹‹/b›‹/td› ‹td class="sub" id="pageNum"›1/1‹/td› ‹td width="12" class="arrow" onclick="chPage(+1);" align="left"› ‹b››‹/b›‹/td› ‹td width="12" class="arrow" onclick="chPage(+999);" align="left"› »‹/td› ‹/tr› ‹/table› ‹/div› A Change page function will Parse the content of items to that page.
function chPage(off) { try { if (System.Gadget.Settings.read("listview")) { if (rssItems.length < 100) { myval = Math.ceil (rssItems.length/5); } else {myval = 20;} } else { if (rssItems.length < 100) { myval = rssItems.length; } else {myval = 100;} } if (off === -999) { off = myval-page; } if (off === 999) { off = myval-page-1; } try { if (((page + off) > -1) && ((page + off) < myval)) { page = page + off; parseRSS(page); } else if ((page + off) === myval) { page = 0; parseRSS(page); } else if ((page + off) === 0) { page = myval; parseRSS(page); } } catch (err) { } } catch (err) { } } Make you own Favorite Videos List
Now with each video you will see a plus icon in the bottom, so you can add the video to your favorites list.
A portion of the code behind function addtoFavorites(sGuid) { var variableName = "userprofile"; var mytext ="Testing"; try { var variableName = "userprofile"; xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.load(System.Environment.getEnvironmentVariable (variableName) + "\\Videos\\SoapBoxFavorites.xml"); xmlObj=xmlDoc.documentElement; rssAddItems = xmlObj.getElementsByTagName("channel"); rssAddedItems= xmlObj.getElementsByTagName("item"); var varAlreadythere = false; if (rssItems[i].getElementsByTagName("guid")[0] .firstChild.nodeValue == sGuid) { if (!varAlreadythere) { rssAddItems[0].appendChild(rssItems[i]); } break; } xmlDoc.save(System.Environment.getEnvironmentVariable (variableName) + "\\Videos\\SoapBoxFavorites.xml");
When you click on the "Add to Favorite" icon it will add the XML feed information for that video from the online feed to a local XML file.
%userprofile%/Video/soapboxfavorites.xml
Here are the new settings to view your favorite videos. Select "My Favorite Videos" to see the bookmarked videos.
If any "My Favorites" are selected, the gadget will read from the local XML file.
A portion of the code behind if (System.Gadget.Settings.read("feedText").indexOf("My favorite") >=0) { try { var variableName = "userprofile"; var xmlDoc = new ActiveXObject("Msxml2.DOMDocument"); xmlDoc.load(System.Environment.getEnvironmentVariable(variableName) + "\\Videos\\SoapBoxFavorites.xml"); rssXML=xmlDoc; parseRSS(); } By default, the "My Favorite Video" list will show nine videos from the "Current Featured Feed".
Create the XML file for the first time from "Current Featured Feed".
A portion of the code behind var variableName = "userprofile" var SoapboxFavoritesPath = System.Environment.getEnvironmentVariable (variableName) + "\\Videos\\SoapBoxFavorites.xml"; rssObj = new ActiveXObject("Msxml2.XMLHTTP"); rssObj.open("GET",System.Gadget.Settings.read("videoFeed"),true); rssObj.onreadystatechange = function() { if (rssObj.readyState === 4) { if (rssObj.status === 200) { try { System.Shell.itemFromPath(SoapboxFavoritesPath); return; } catch (notFound) { var stream = new ActiveXObject("ADODB.Stream"); stream.Type = 1; stream.Open(); stream.Write(rssObj.responseBody); stream.SaveToFile(SoapboxFavoritesPath, 2); stream.Close; stream = null; } You can also remove the video from the Video list. Select My Favorite video, and then you can see the "Remove icon" after each video in the gadget.
The code behind Remove function removefromFavorites(sGuid) { var variableName = "userprofile"; var mytext ="Testing"; xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.load(System.Environment.getEnvironmentVariable (variableName) + "\\Videos\\SoapBoxFavorites.xml"); xmlObj=xmlDoc.documentElement; rssRemoveItems = xmlObj.getElementsByTagName("item"); if (rssRemoveItems[i].getElementsByTagName("guid") [0].firstChild.nodeValue==sGuid) { var lastNode=rssRemoveItems[i]; var delNode=xmlObj.firstChild.removeChild(lastNode); xmlDoc.save(System.Environment.getEnvironmentVariable (variableName) + "\\Videos\\SoapBoxFavorites.xml"); mytext = "Deleted and Saved"; break; } } And we are done.
Tips in general To resize a windows media player to a custom width, set the ‹param name="AutoSize" value="1"› Any exceptions in a sidebar gadget main window should be handled with the "Service Not Available" screen, with information icon as shown above Whenever you use a JavaScript function, encapsulate it inside a try catch statement to avoid surprises Escape(^ ) and unescape(^ ) are nice little JavaScript functions for URL encoding and un-encoding when you need to pass URL's, etc. as parameters to the flyout window The HTML code for < is "«" , << is "‹" , >> is "›" and > "»" To check whether a file exists in a local folder use System.Shell.itemFromPath(Path) inside try catch For a timer functionality, use the setinterval4 method For multiple language support, create a folder for that language (e.g. 'IT-CH', if the language is it-ch Italian Switzerland) and copy all files from the 'EN-US' folder to the new created folder (language codes ^ ) Check design concepts and usage pattern5 In Action Soapbox Gadget in Action : Size: 400 X 360 in flash player
References Innovate with Gadgets Creating a Simple Gadget: A Beginner's Guide Soapbox at MSN Videos MicrosoftGadgets.com sidebar development Windows setinterval Design concepts and usage pattern Article History Mar 07, 2007: First published Mar 08, 2007: Added support for flash player Mar 11, 2007: Added architecture diagram Mar 20, 2007: Create "My Favorite Videos" Mar 23, 2007: Save your favorite video list to share And thanks For coming so far! I hope you find this useful, and give me a comment if you do and take care.
Labels: create , gadgets , video , vista