Creating Vista Gadgets: Using HTML, CSS and JavaScript with Examples in RSS, Ajax, ActiveX (COM) and SilverLight

Overview


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 ...
See more details below
Other sellers (Paperback)
  • All (14) from $1.99   
  • New (4) from $27.84   
  • Used (10) from $1.99   
Creating Vista Gadgets: Using HTML, CSS and JavaScript with Examples in RSS, Ajax, ActiveX (COM) and Silverlight

Available on NOOK devices and apps  
  • NOOK Devices
  • Samsung Galaxy Tab 4 NOOK
  • NOOK HD/HD+ Tablet
  • NOOK
  • NOOK Color
  • NOOK Tablet
  • Tablet/Phone
  • NOOK for Windows 8 Tablet
  • NOOK for iOS
  • NOOK for Android
  • NOOK Kids for iPad
  • PC/Mac
  • NOOK for Windows 8
  • NOOK for PC
  • NOOK for Mac

Want a NOOK? Explore Now

NOOK Book (eBook)
$19.99
BN.com price
(Save 44%)$35.99 List Price

Overview


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.

Read More Show Less

Product Details

  • ISBN-13: 9780672329685
  • Publisher: Sams
  • Publication date: 5/13/2008
  • Pages: 341
  • Product dimensions: 6.80 (w) x 9.00 (h) x 0.90 (d)

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

Read More Show Less

Read an Excerpt

IntroductionIntroduction

With the broadest ever worldwide release of a PC operating system, in 2007 Windows Vista opened the door to an era of gadget development. Gadgets, which reside on the Windows Vista Sidebar, are small, lightweight, and can be very useful applications. The Sidebar is a brand new platform for innovation and it gives users a unique way to interact with information.

This book is for people who want to create feature-rich and professional-looking Vista Sidebar gadgets. It's a guide for designers, developers, and anyone else who has a basic knowledge of HTML, CSS, and JavaScript and wants to leverage this new and innovative platform. It's for anyone who wants to create a gadget for his company, or for a programmer with a great idea to implement on a Sidebar gadget platform, or even for a hobbyist programmer, who wants to try his hand on a gadget platform. This book is intended to give you ideas for what you can do with this new platform and how you can do it. What's in the Book

This book starts with a brief background on gadgets, and then gives a broad and clear view of the architecture of gadget development. Gadget design considerations are an important part of this book and they go side by side with almost all the chapters that deal with gadget development. Once you've read up on the concept and scope of gadget development, the book helps you create a gadget called MyBlog. During this process the text elaborates on the architecture, design constraints, and implementation details for the gadget and then details some standard practices applicable to all gadget development. The last section deals with moreadvanced gadget examples that utilize .NET,

This book is divided into three broad sections. Section 1: The Foundation

The four chapters in this first section give a thorough background of Sidebar gadgets. The section explains the types of gadgets, the architecture, and the technology behind the gadget development. The "Approach to Design" chapter helps you know the difference between a merely good-looking gadget and a one that is professional, rich, and worth the space it takes up on the user's desktop. The last chapter discusses the revenue model of the gadget: what you need to know to sell your gadgets.Section 2: Developing a Gadget

This section walks you through the standard development process of a gadget. It details the creation of the basic MyBlog Gadget, which makes use of an RSS/Atom feed. It also goes through best practices with the user interface, design guidelines, and common assumptions. The later chapters improve on the basic gadget based on standard practices and also deal with deploying and distributing a gadget.Section 3: Advanced Samples

The section deals with advanced samples. You will be able to create advanced gadgets such as a Site Statistics Gadget, a Radio Gadget, and a YouTube Video Gadget. All the samples follow standard patterns, making it easier to switch between the features and functionality you want, when you want. You will also learn how to use ActiveX COM for creating a utility gadget with a sample .Net Most Recent Used (MRU) Gadget. The final chapter shows you how to create a gadget with Microsoft Silverlight. You will also see how, in just a few minutes, to create a Sidebar gadget with Microsoft Popfly.

If you are a relatively new gadget developer, I would suggest you to start with the first section. If you have basic background knowledge of gadgets and you just want to start with the step-by-step practical approach to gadget development, you can directly start with the second section, "Developing a Gadget." The third section, "Advanced Samples," is for people who have developed a gadget and want to go beyond the basics of gadget development. Each chapter in the third section is actually an advanced sample dealing with a particular type of gadget in a scenario of its own.Special Features and Notations

This book is meant to be a definite, precise, and concrete guide for gadget development. By pruning redundant information and filtering and highlighting the information that is more crucial, we have tried to make it as comprehensive as possible. This book includes various features and conventions that help you get the most out of the book.

HTML, CSS, and JavaScript code blocks will be shown as follows:

<HTML>Code in HTML, CSS, and JavaScript</HTML>

Sample single code lines will look like this:

Statement one;Statement two;

Other comments will also show up in the code with two backslashes

// Comment one// Comment two

The book also uses the following boxes for important information:

***

Note - A Note includes extra information to broaden your understanding of a topic.

***
***

Tip - A Tip provides alternative, shortcuts, or insider information of the topic being discussed.

***
***

Caution - A Caution warns you of potential traps and pitfalls.

***
Supporting Website

The book has a supporting website where you can download all the codes and gadgets. The website also has blogs I have written on Sidebar gadgets and some of my personal views on gadget development. You are invited to check that site and contact me personally. You will also find errata and most updated information there.

Visit http://www.innovatewithgadgets.com

© Copyright Pearson Education. All rights reserved.

Read More Show Less

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

Read More Show Less

Preface

Introduction

With the broadest ever worldwide release of a PC operating system, in 2007 Windows Vista opened the door to an era of gadget development. Gadgets, which reside on the Windows Vista Sidebar, are small, lightweight, and can be very useful applications. The Sidebar is a brand new platform for innovation and it gives users a unique way to interact with information.

This book is for people who want to create feature-rich and professional-looking Vista Sidebar gadgets. It's a guide for designers, developers, and anyone else who has a basic knowledge of HTML, CSS, and JavaScript and wants to leverage this new and innovative platform. It's for anyone who wants to create a gadget for his company, or for a programmer with a great idea to implement on a Sidebar gadget platform, or even for a hobbyist programmer, who wants to try his hand on a gadget platform. This book is intended to give you ideas for what you can do with this new platform and how you can do it.

What's in the Book

This book starts with a brief background on gadgets, and then gives a broad and clear view of the architecture of gadget development. Gadget design considerations are an important part of this book and they go side by side with almost all the chapters that deal with gadget development. Once you've read up on the concept and scope of gadget development, the book helps you create a gadget called MyBlog. During this process the text elaborates on the architecture, design constraints, and implementation details for the gadget and then details some standard practices applicable to all gadget development. The last section deals with more advanced gadget examples that utilize .NET, XML, XHTML, CSS, Ajax, and Microsoft Silverlight.

This book is divided into three broad sections.

Section 1: The Foundation

The four chapters in this first section give a thorough background of Sidebar gadgets. The section explains the types of gadgets, the architecture, and the technology behind the gadget development. The "Approach to Design" chapter helps you know the difference between a merely good-looking gadget and a one that is professional, rich, and worth the space it takes up on the user's desktop. The last chapter discusses the revenue model of the gadget: what you need to know to sell your gadgets.

Section 2: Developing a Gadget

This section walks you through the standard development process of a gadget. It details the creation of the basic MyBlog Gadget, which makes use of an RSS/Atom feed. It also goes through best practices with the user interface, design guidelines, and common assumptions. The later chapters improve on the basic gadget based on standard practices and also deal with deploying and distributing a gadget.

Section 3: Advanced Samples

The section deals with advanced samples. You will be able to create advanced gadgets such as a Site Statistics Gadget, a Radio Gadget, and a YouTube Video Gadget. All the samples follow standard patterns, making it easier to switch between the features and functionality you want, when you want. You will also learn how to use ActiveX COM for creating a utility gadget with a sample .Net Most Recent Used (MRU) Gadget. The final chapter shows you how to create a gadget with Microsoft Silverlight. You will also see how, in just a few minutes, to create a Sidebar gadget with Microsoft Popfly.

If you are a relatively new gadget developer, I would suggest you to start with the first section. If you have basic background knowledge of gadgets and you just want to start with the step-by-step practical approach to gadget development, you can directly start with the second section, "Developing a Gadget." The third section, "Advanced Samples," is for people who have developed a gadget and want to go beyond the basics of gadget development. Each chapter in the third section is actually an advanced sample dealing with a particular type of gadget in a scenario of its own.

Special Features and Notations

This book is meant to be a definite, precise, and concrete guide for gadget development. By pruning redundant information and filtering and highlighting the information that is more crucial, we have tried to make it as comprehensive as possible. This book includes various features and conventions that help you get the most out of the book.

HTML, CSS, and JavaScript code blocks will be shown as follows:

Code in HTML, CSS, and JavaScript

Sample single code lines will look like this:

Statement one;Statement two;

Other comments will also show up in the code with two backslashes

// Comment one// Comment two

The book also uses the following boxes for important information:


Note - A Note includes extra information to broaden your understanding of a topic.



Tip - A Tip provides alternative, shortcuts, or insider information of the topic being discussed.



Caution - A Caution warns you of potential traps and pitfalls.


Supporting Website

The book has a supporting website where you can download all the codes and gadgets. The website also has blogs I have written on Sidebar gadgets and some of my personal views on gadget development. You are invited to check that site and contact me personally. You will also find errata and most updated information there.

Visit http://www.innovatewithgadgets.com

© Copyright Pearson Education. All rights reserved.

Read More Show Less

Customer Reviews

Be the first to write a review
( 0 )
Rating Distribution

5 Star

(0)

4 Star

(0)

3 Star

(0)

2 Star

(0)

1 Star

(0)

Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & Noble.com that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & Noble.com does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at BN.com or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation

Reminder:

  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on BN.com. It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

 
Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously
Sort by: Showing all of 4 Customer Reviews
  • Anonymous

    Posted July 2, 2008

    Creating Vista Gadgets: Using HTML, CSS and JavaScript with Examples in RSS, Ajax, ActiveX (COM) and SilverLight

    This book is very easy to understand, I finished the whole book in 2 days. and man Do I know vista gadgets, You bet .

    Was this review helpful? Yes  No   Report this review
  • Anonymous

    Posted May 30, 2008

    Creating Vista Gadgets: Using HTML, CSS and JavaScript with Examples in RSS, Ajax, ActiveX (COM) and SilverLight

    This is the only book you will ever need to create vista gadgets. The book is loaded with samples

    Was this review helpful? Yes  No   Report this review
  • Anonymous

    Posted November 30, 2008

    No text was provided for this review.

  • Anonymous

    Posted May 12, 2010

    No text was provided for this review.

Sort by: Showing all of 4 Customer Reviews

If you find inappropriate content, please report it to Barnes & Noble
Why is this product inappropriate?
Comments (optional)