Creating Vista Gadgets
Using HTML, CSS and JavaScript with Examples in RSS, Ajax, ActiveX (COM) and Silverlight
Published on 15. May 2008
Book
Paperback/Softback
360 pages
978-0-672-32968-5 (ISBN)
Description
A one-stop resource for each aspect of designing and developing Sidebar gadgets, perfect for anyone who wants to create killer gadgets
Explores one of the super cool features new to Windows Vista -- the Sidebar
It is a one-stop resource for each aspect of designing and developing Sidebar gadgets, perfect for anyone who wants to create killer gadgets
Includes complete design instructions for four never-before-seen gadgets
Windows Vista Sidebar is a panel located on the desktop of a PC where gadgets can be placed for easy access and reference. These gadgets are small, single-purpose applications, such as clocks, calendars, games, RSS notifiers, search tools, stock tickers, etc, that reside on the Windows desktop and on the Windows Sidebar. The book will be a tutorial to design and develop a gadget. It will provide ready-to-use samples using .NET, XML, CSS and AJAX. After reading the book, a web developer/designer will be confident enough to start developing gadgets for Windows Vista Sidebar. The beginner portion of the book shows an overview of the subject with the design pattern, the architecture and implementation details. The later sections will have solid examples for instant results. In short, the book will tell how to do everything with Sidebar Gadgets using solid, unique examples. Brief outline: " Brief background on Gadgets " Define architecture, design consideration and implementation to give a clear view to the developer " Step by step, create a useful Gadget sample "My Blogs" " Elaborate the architecture design constraint and implementation details for the sample " Detail the standard practices " Recheck the gadget created for standard practices " Improvise and Improve with compare and contrast " Add advanced samples with .NET, AJAX and XHTML.
Explores one of the super cool features new to Windows Vista -- the Sidebar
It is a one-stop resource for each aspect of designing and developing Sidebar gadgets, perfect for anyone who wants to create killer gadgets
Includes complete design instructions for four never-before-seen gadgets
Windows Vista Sidebar is a panel located on the desktop of a PC where gadgets can be placed for easy access and reference. These gadgets are small, single-purpose applications, such as clocks, calendars, games, RSS notifiers, search tools, stock tickers, etc, that reside on the Windows desktop and on the Windows Sidebar. The book will be a tutorial to design and develop a gadget. It will provide ready-to-use samples using .NET, XML, CSS and AJAX. After reading the book, a web developer/designer will be confident enough to start developing gadgets for Windows Vista Sidebar. The beginner portion of the book shows an overview of the subject with the design pattern, the architecture and implementation details. The later sections will have solid examples for instant results. In short, the book will tell how to do everything with Sidebar Gadgets using solid, unique examples. Brief outline: " Brief background on Gadgets " Define architecture, design consideration and implementation to give a clear view to the developer " Step by step, create a useful Gadget sample "My Blogs" " Elaborate the architecture design constraint and implementation details for the sample " Detail the standard practices " Recheck the gadget created for standard practices " Improvise and Improve with compare and contrast " Add advanced samples with .NET, AJAX and XHTML.
More details
Language
English
Place of publication
Indianapolis
United States
Publishing group
Pearson Education (US)
Target group
College/higher education
Dimensions
Height: 231 mm
Width: 176 mm
Thickness: 20 mm
Weight
564 gr
ISBN-13
978-0-672-32968-5 (9780672329685)
Copyright in bibliographic data and cover images is held by Nielsen Book Services Limited or by the publishers or by their respective licensors: all rights reserved.
Schweitzer Classification
Person
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 and is a frequent contributor to Windows Vista Magazine and Code Project website. With over a decade of experience in the IT industry, Rajesh enjoys taking an objective and pragmatic approach to developing applications using Microsoft technology. He has a master's degree in computer science and holds both MCSD and MCAD titles. To visit his Vista Gadget blog, go to www.innovatewithgadgets.com.
Content
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 2
Supporting Website 3
Part I The Foundation
1 Innovate with Windows Vista Sidebar Gadgets 7
Introducing Gadgets and the Vista Sidebar 7
Windows Sidebar 8
Technology Behind Gadgets 8
Brief History of Gadgets 9
Innovate with Gadgets 10
Types of Gadgets 12
Information Gadgets 12
Application Gadgets 13
Utility Gadgets 14
Fun Gadgets 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
2 The Architecture 29
Gadgets Overview 29
The Manifest File gadget.xml 31
User Interface and Presentation 32
Cascading Style Sheets 32
Core Functionality of the Gadget: JavaScript 34
Resources, PNG, and Other Files 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 49
Design Considerations 49
Putting Information First 50
Constructing the Right User Interface 53
Usage Patterns 57
Gadget Behavior 60
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
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 75
Gadget Revenue Model 75
Pull Model 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 Developing a Gadget
5 Creating a Simple Gadget with RSS/Atom Feed 91
Feed Gadgets 91
Brief Background on Feeds 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
Core Functionality of the Gadget 104
Presenting with CSS and DOM 107
Putting It All Together 112
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 130
Internet Connection 131
Regular Feed Updates 132
Caching of the Feed Data 133
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 139
Recapping the MyBlog Gadget 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 159
Debugging a Gadget 160
Debugging Using WScript and VBScript 161
Debugging Using JavaScript and DOM 166
Debugging Tools 168
Deploying a Gadget 170
Gadget Installation Target 171
Gadget Installation Process 172
Gadget Packaging 172
Deployment Using a Cabinet File 174
CAB File Approach 175
A Windows Installer (.msi File) or setup.exe 180
Comparison of Deployment Methodologies 180
Part III Advanced Samples
9 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
Integrating the Existing Framework 199
Retrieving Data for Site Summary Using API and Online Web Page 200
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 221
Developing the Gadget 222
Integrating the Existing Framework 222
Listing MRU Items from the Registry 225
Reading the Registry 234
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 Silverlight World Clock-Utility Gadget 261
The Silverlight Gadget 261
Background-Microsoft Silverlight 262
Features and Technology 264
JavaScript for Creating the Silverlight Object 265
Microsoft Silverlight 266
Extensible Application Markup Language 267
Design Considerations 268
Theme and Images 268
Layout of the Gadget 269
Usability of the Gadget 270
Developing the Gadget 271
Integrating the Existing Framework 271
The XAML File 272
Silverlight Clock Logic 275
Creating a Sidebar Gadget Using Microsoft Popfly 280
Website Comparison Gadget 280
Creating a Mashup Using Microsoft Popfly 281
Porting a Mashup to Vista Sidebar as a Gadget 283
Where to Go from Here 284
Part IV Appendixes
A Tips and Tricks 289
Automatic Update and User Tracking 289
Checking for a New Version of the Gadget 290
Tracking Your Users 294
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
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 2
Supporting Website 3
Part I The Foundation
1 Innovate with Windows Vista Sidebar Gadgets 7
Introducing Gadgets and the Vista Sidebar 7
Windows Sidebar 8
Technology Behind Gadgets 8
Brief History of Gadgets 9
Innovate with Gadgets 10
Types of Gadgets 12
Information Gadgets 12
Application Gadgets 13
Utility Gadgets 14
Fun Gadgets 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
2 The Architecture 29
Gadgets Overview 29
The Manifest File gadget.xml 31
User Interface and Presentation 32
Cascading Style Sheets 32
Core Functionality of the Gadget: JavaScript 34
Resources, PNG, and Other Files 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 49
Design Considerations 49
Putting Information First 50
Constructing the Right User Interface 53
Usage Patterns 57
Gadget Behavior 60
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
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 75
Gadget Revenue Model 75
Pull Model 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 Developing a Gadget
5 Creating a Simple Gadget with RSS/Atom Feed 91
Feed Gadgets 91
Brief Background on Feeds 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
Core Functionality of the Gadget 104
Presenting with CSS and DOM 107
Putting It All Together 112
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 130
Internet Connection 131
Regular Feed Updates 132
Caching of the Feed Data 133
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 139
Recapping the MyBlog Gadget 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 159
Debugging a Gadget 160
Debugging Using WScript and VBScript 161
Debugging Using JavaScript and DOM 166
Debugging Tools 168
Deploying a Gadget 170
Gadget Installation Target 171
Gadget Installation Process 172
Gadget Packaging 172
Deployment Using a Cabinet File 174
CAB File Approach 175
A Windows Installer (.msi File) or setup.exe 180
Comparison of Deployment Methodologies 180
Part III Advanced Samples
9 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
Integrating the Existing Framework 199
Retrieving Data for Site Summary Using API and Online Web Page 200
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 221
Developing the Gadget 222
Integrating the Existing Framework 222
Listing MRU Items from the Registry 225
Reading the Registry 234
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 Silverlight World Clock-Utility Gadget 261
The Silverlight Gadget 261
Background-Microsoft Silverlight 262
Features and Technology 264
JavaScript for Creating the Silverlight Object 265
Microsoft Silverlight 266
Extensible Application Markup Language 267
Design Considerations 268
Theme and Images 268
Layout of the Gadget 269
Usability of the Gadget 270
Developing the Gadget 271
Integrating the Existing Framework 271
The XAML File 272
Silverlight Clock Logic 275
Creating a Sidebar Gadget Using Microsoft Popfly 280
Website Comparison Gadget 280
Creating a Mashup Using Microsoft Popfly 281
Porting a Mashup to Vista Sidebar as a Gadget 283
Where to Go from Here 284
Part IV Appendixes
A Tips and Tricks 289
Automatic Update and User Tracking 289
Checking for a New Version of the Gadget 290
Tracking Your Users 294
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