introduction - creating vista gadgets

Creating Vista® Gadgets: Using HTML, CSS and JavaScriptwith Examples in RSS, AJAX, ActiveX (COM) and Silverlight™Copyright © 2008 by Sams PublishingAll rights reserved. No part of this book shall be reproduced, stored in a retrieval system,or transmitted by any means, electronic, mechanical, photocopying, recording, or other-wise, without written permission from the publisher. No patent liability is assumed withrespect to the use of the information contained herein. Although every precaution hasbeen taken in the preparation of this book, the publisher and author assume no responsi-bility for errors or omissions. Nor is any liability assumed for damages resulting from theuse of the information contained herein.This material may be distributed only subject to the terms and conditions set forth inthe Open Publication License, v1.0 or later (the latest version is presently available athttp://www.opencontent.org/openpub/).ISBN-13: 978-0-672-32968-5ISBN-10: 0-672-32968-9Library of Congress Cataloging-in-Publication Data

Lal, Rajesh.Creating Vista gadgets : using html, css and javascript with examples

in rss, ajax, activex (com) and silverlight / Rajesh Lal.p. cm.

ISBN 978-0-672-32968-5 (pbk.)1. Microsoft Windows (Computer file) 2. Operating systems (Computers)

3. User interfaces (Computer systems) I. Title. QA76.76.O63L3546 2008005.4'46--dc22

2008016280Printed in the United States of AmericaFirst Printing April 2008

TrademarksAll terms mentioned in this book that are known to be trademarks or service marks havebeen appropriately capitalized. Sams Publishing cannot attest to the accuracy of thisinformation. Use of a term in this book should not be regarded as affecting the validityof any trademark or service mark.

Warning and DisclaimerEvery effort has been made to make this book as complete and as accurate as possible,but no warranty or fitness is implied. The information provided is on an “as is” basis.The author and the publisher shall have neither liability nor responsibility to any personor entity with respect to any loss or damages arising from the information contained inthis book.

Bulk SalesSams Publishing offers excellent discounts on this book when ordered in quantity forbulk purchases or special sales. For more information, please contact

U.S. Corporate and Government [email protected]

For sales outside of the U.S., please contactInternational [email protected]

This Book Is Safari EnabledThe Safari® Enabled icon on the cover of your favorite technology book means the bookis available through Safari Bookshelf. When you buy this book, you get free access to theonline edition for 45 days.Safari Bookshelf is an electronic reference library that lets you easily search thousands oftechnical books, find code samples, download chapters, and access technical informationwhenever and wherever you need it.To gain 45-day Safari Enabled access to this book:

• Go to http://www.informit.com/onlineedition• Complete the brief registration form• Enter the coupon code UWC5-ZPGE-RMIN-P5EG-MSHE

If you have difficulty registering on Safari Bookshelf or accessing the online edition,please email [email protected].

Associate Publisher

Greg Wiegand

Acquisitions Editor

Loretta Yates

Development Editor

Todd Brakke

Managing Editor

Patrick Kanouse

Project Editor

Jennifer Gallant

Copy Editor

Margo Catts

Indexer

Ken Johnson

Proofreader

Mike Henry

Technical Editor

Marc Clifton

Publishing Coordinator

Cindy Teeters

Book Designer

Anne Jones

http://www.opencontent.org/openpub/

http://www.informit.com/onlineedition

IntroductionWith the broadest ever worldwide release of a PC operat-ing system, in 2007 Windows Vista opened the door to anera of gadget development. Gadgets, which reside on theWindows Vista Sidebar, are small, lightweight, and can bevery useful applications. The Sidebar is a brand new plat-form for innovation and it gives users a unique way tointeract with information.

This book is for people who want to create feature-rich andprofessional-looking Vista Sidebar gadgets. It’s a guide fordesigners, developers, and anyone else who has a basicknowledge of HTML, CSS, and JavaScript and wants toleverage this new and innovative platform. It’s for anyonewho wants to create a gadget for his company, or for aprogrammer with a great idea to implement on a Sidebargadget platform, or even for a hobbyist programmer, whowants to try his hand on a gadget platform. This book isintended to give you ideas for what you can do with thisnew platform and how you can do it.

What’s in the BookThis book starts with a brief background on gadgets, andthen gives a broad and clear view of the architecture ofgadget development. Gadget design considerations are animportant part of this book and they go side by side withalmost all the chapters that deal with gadget development.Once you’ve read up on the concept and scope of gadgetdevelopment, the book helps you create a gadget calledMyBlog. During this process the text elaborates on thearchitecture, design constraints, and implementationdetails for the gadget and then details some standard prac-tices applicable to all gadget development. The last sectiondeals 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 FoundationThe four chapters in this first section give a thorough back-ground of Sidebar gadgets. The section explains the typesof gadgets, the architecture, and the technology behind the

gadget development. The “Approach to Design” chapter helps you know the differencebetween a merely good-looking gadget and a one that is professional, rich, and worth thespace it takes up on the user’s desktop. The last chapter discusses the revenue model ofthe gadget: what you need to know to sell your gadgets.

Section 2: Developing a GadgetThis section walks you through the standard development process of a gadget. It detailsthe creation of the basic MyBlog Gadget, which makes use of an RSS/Atom feed. It alsogoes through best practices with the user interface, design guidelines, and commonassumptions. The later chapters improve on the basic gadget based on standard practicesand also deal with deploying and distributing a gadget.

Section 3: Advanced SamplesThe section deals with advanced samples. You will be able to create advanced gadgetssuch as a Site Statistics Gadget, a Radio Gadget, and a YouTube Video Gadget. All thesamples follow standard patterns, making it easier to switch between the features andfunctionality you want, when you want. You will also learn how to use ActiveX COM forcreating a utility gadget with a sample .Net Most Recent Used (MRU) Gadget. The finalchapter shows you how to create a gadget with Microsoft Silverlight. You will also seehow, 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 firstsection. If you have basic background knowledge of gadgets and you just want to startwith the step-by-step practical approach to gadget development, you can directly startwith 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 gadgetdevelopment. Each chapter in the third section is actually an advanced sample dealingwith 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 ismore crucial, we have tried to make it as comprehensive as possible. This book includesvarious 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;

Create Killer Vista Sidebar Gadgets Using HTML, CSS, and Ajax2

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:

Introduction 3

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

NOTE

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

TIP

A Caution warns you of potential traps and pitfalls.

CAUTION

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 personalviews on gadget development. You are invited to check that site and contact me person-ally. You will also find errata and most updated information there.

Visit www.innovatewithgadgets.com

www.innovatewithgadgets.com

Index

A

About screen (Settings page, RecentProject Gadgets), 222

accessibility techniques

enter key as mouse clicks, 135-137

Flyouts, 137-138

HTML, 73

keyboard access, 72-73

putting focus on gadgets after loading, 135

Settings pages, 137-138

tab controls, adding, 135

theme colors, 73

accessing information (gadget design), 51

Active Desktop feature (Windows XP), 9

ActiveX COM, 38, 214

initializing inside gadgets, 215

Windows Registry, reading settings via,229-234

ad gadgets

benefits of, 82

case study, 81

Added Features check box (Settings page),Site Statistics gadgets, 199

AddFeed function, feed gadgets, 147-148

AddItem function, feed gadgets, 146

addShadow() method, 46, 304-306

Adobe AIR widgets, 25

aesthetics, user interface design, 53

Ajax

buildMyContent function, Site Statisticsgadgets, 205-210

getData function, 200

getHTMLAjax function, 200-201

getTextAjax function, 190, 200-203

parseData function, 190, 203-204

parseHTML function, 200

parseHTMLAjax function, 201-202

ShowFlyout function, 204-205

Site Statistics gadget

API, 188-190

displaying portions of web pages in,190-194

XMLHTTPRequest object, 188, 192

alpha transparencies, gadget design, 71

Always On Top property, 17

animation, Silverlight World Clock Gadget,273-274

API (Application Programming Interfaces)

Site Statistics gadgets, 187

data retrieval, 200-204

graphs, 204-210

parsing data, 190

pie charts, 204-210

pulling text data, 188-189

Windows Registry, MRU Project Gadgets,230-231

Apollo widgets. See Adobe AIR widgets

Apple, Dashboard widgets, 23

application gadgets, 13, 58

Assert function, debugging gadgets, 164

assumptions

feed gadgets

caching data, 133

updates, 132

functionality, JavaScript errors, 130-131

Internet connections, 131

memory, 133-134

session management, 133-134

Atom feed gadgets, 91

data storage, 92

feed example, 103

audio (streaming), playing on RadioGadget, 240

automatic updates, 289

checking for, 290

user notifications, 292-293

version checks via inserted code, 291-292

version information, posting online, 290-291

AveDesk widgets, 25

B

background images

as wallpaper, 34

gadget design, 68-69

background.png files, 35

behaviors (gadget design)

configuring gadgets, 60-61

displaying gadget statuses, 61-62

error messages, 61-62

refreshing gadgets, 61

Service Not Available information, 62-63

warnings, 61-62

blogs. See MyBlog gadget

body on load functions, feed gadgets, 104

BuildContent function, 124-125

BuildMyBlog function, feed gadgets, 111

buildMyContent function, Site Statisticsgadgets, 205-210

BuildVideoObject function, YouTube VideoGadgets, 251

Ajax322

buttons

gadget design, 69

icons associated with button types, 163

type values list, 163

buttons parameter (MsgBox function), 165

C

CAB files

creating, 175

deploying gadgets via, 174

buying certificates, 176

signing via certificates, 178

Windows Installer, 180

caching feed gadget data, 133

case studies

ad gadgets, 81

free information gadgets, 86

gadget design information, 51-53

gadgets as side products, 83

pull models (gadget revenue models), 77

push models (gadget revenue models), 79

utility gadgets, 85

CDF (Channel Definition Format), 10

ChangeFeed() function, feed gadgets,144-146

checkForUpdate() function, 291

click events (mouse), Silverlight WorldClock Gadget, 279-280

Clock Gadget for Time, 14

Clock Gadgets, 261

designing

images, 268-269

layouts, 269-270

How can we make this index more useful? Email us at [email protected]

themes, 268-269

usability, 270

developing

animation, 273-274

existing framework integration, 271-272

handleLoad function, 277

logic, 275-280

mouse click events, 279-280

multiple locales, 278-279

SetClock function, 277-278

setting time, 276-277

SilverlightClock.XAML files, 272-273

features of, 264-265

JavaScript, 265-266

XAML, 267-268, 272-276

code security, JavaScript, 313

collection objects, MRU Project Gadgets,231

color (themes), accessibility techniques, 73

Comic-Strip gadget, 319

common assumptions

feed gadgets

caching data, 133

updates, 132

functionality, JavaScript errors, 130-131

Internet connections, 131

memory, 133-134

session management, 133-134

common images, display/presentation(design patterns), 128

communities (online), gadgets, 21

comparing gadgets, 26

Comparison Gadgets (Websites), 280

configuration functions, 122

configuration functions 323

configuring

gadget behaviors, 60-61

gadget window, feed gadgets, 156-157

Settings page, feed gadgets, 155

controls, gadget design, 69

converting gadgets, 20

Counter Widget feature (Sitemeter.comwebsite), Site Statistic gadget develop-ment, 184

country codes (localization), 302

CPU Meter Gadget, 14

CSS (Cascading Style Sheets), 32

display presentation (design patterns),129-130

feed gadgets, data presentation in, 108

flyout.css files, 33

gadget.css files, 33

settings.css files, 33

undocked.css files, 33

Currency gadget, 64, 68

customizable design patterns, 116

customizing

gadgets, 18

Windows Sidebar, 8

D

Dashboard widgets (Apple), 23

data applications, gadget development, 9

data storage, feed gadgets, 92

debugger statements, 169

debugging gadgets, 160

debugger statements, 169

Disable Script Debugging option (InternetExplorer), 168

DOM, 166-167

JavaScript, 161, 166-167

Systems Debugger Select window, 169

VBScript, 164-166, 169

WScript, 161-163

deploying gadgets

CAB files, 174




comparison chart, 180

installation process, 172

installation target folders, 171

packaging, 172-173

design

accessibility

adding tab controls, 135

enter key as mouse clicks, 135-137

Flyouts, 137-138

HTML, 73


putting focus on gadgets after loading,135

Settings pages, 137-138

theme colors, 73

behaviors

configuring gadgets, 60-61

displaying gadget statuses, 61-62

error messages, 61-62

refreshing gadgets, 61

Service Not Available information, 62-63

warnings, 61-62

customizable patterns, 116

directory structures, 118-119

configuring324

display/presentation, 127

common images, 128

standard images, 128

Stylesheets, 129-130

extensible patterns, 117

file structures, 119

image grouping, 118

information, 50

case study, 51-53

easy access of, 51()

live data, 51

relevant to individual users, 51

showing enough for further action, 51

showing only revelant information, 54

localization, 118

maintainable patterns, 116

modular file structures, 118

PNG files, 71-72

quality, ensuring, 50

reusable functionality, 120

flyout window, 124-125

gadget window, 122-124

Settings page functions, 125-126

screen space, justifying, 49

standard file/folder layouts, 118-120

styles, 70

text, 70

transparent images, 71

usage patterns

application gadgets, 58

fun gadgets, 59

information gadgets, 57

utility gadgets, 58-59

what gadgets aren’t meant for, 60


user interfaces

aesthetics, 53

docked page dimensions, 64

flyout page dimensions, 65

guidelines for, 66

relevant information, 54

settings page dimensions, 65

simplicity, 53

standard page dimensions, 64

undocked page dimensions, 65

unobtrusiveness of, 56

visuals, 55

visual themes

background images, 68-69

buttons, 69

controls, 69

drag images, 68

icons, 67

titles, 67

Desktop (Google), 23

desktop gadgets

Adobe AIR widgets, 25

AveDesk widgets, 25

Dashboard widgets (Apple), 23

Desktop (Google), 23

DesktopX widgets, 24

KlipFolio widgets, 25

Konfabulator (Yahoo widgets), 22

Opera widgets, 26

Samurize widgets, 24

DesktopX widgets, 24

directories

feed gadget structures, 95

structures of, 118-119

Disable Script Debugging option (InternetExplorer), 168

Disable Script Debugging option 325

display/presentation (design patterns), 127

images, 128


displaying

HMTL in flyouts, 193-194

web pages, Site Statistics gadgets,190-194

docked gadgets

feed gadgets, 154-155

page dimensions, 64

YouTube Video Gadget, 258-259

Docked Views, 16

DOM (Document Object Model)

debugging gadgets, 166-167

feed gadgets, data presentation in, 109-111

Site Statistic gadgets


parsing data, 190

DOM Level 1 (Document Object ModelLevel 1), 36

drag images, gadget design, 68

dragicon.png files, 30, 34-35

E - F

easy access of information (gadgetdesign), 51

effects, 302. See also graphic design

enter key as mouse clicks (accessibilitytechniques), 135-137

enterprise-level applications, gadgets in,313

Enumerate Registry, MRU Project Gadgets,231-232

error messages, gadget behaviors, 61-62

event.Action.commit property, 123

event.closeAction property, 123

extensible design patterns, 117

features, adding to gadgets, 140

feed gadgets, 91-92, 139

adding features to, 140

advanced framework of, 141

caching data, 133

commonly used fields list, 99-100

core functionality, 104-107

data presentation, 107

CSS, 108

DOM, 109-111

data section, 103

data storage, 92

deploying, 114

framework of, 98

directory structure, 95

image files, 96

required files, 94-96

Gadget.xml manifest files, 98-99

JavaScript functions in, 112-113

Main Gadget window, 104-107

Mini Me option, 154

gadget window configuration, 156-157

Settings page configuration, 155

mouse hover functionality, 152-154

multiple feeds, 142-148

multiple pages, managing, 150-152

removing feeds from, 148-149

Settings page, 100-101

unobtrusive traversing, 152-154

updates to, 132

updating feeds, 148-150

zip files, 113-114

display/presentation326

feed tracking, 294

FeedBurner feed tracking tool, 294

feedchanged function, feed gadgets, 102

feedchanged variable, 123

FeedURL, feed gadgets, 101

File System API

System.Environment, 43

System.Network, 43

System.Shell, 42-43

files

standard gadget layouts, 118-120

structures of, 119

Flash Media Player, embedding in YouTubeVideo Gadgets, 250-251

floating state, feed gadgets, 154-155

Floating Views, 16

flyout page dimensions (user interfacedesign), 65

flyout windows, 18, 124-125, 130

flyout-related functions, 124

Flyout.css, 129

flyout.css files, 33

flyout.html files, 30, 32

flyouts

accessibility techniques, 137-138

displaying HTML in, 193-194

folders, standard gadget layouts, 118-120


benefits of, 87

case study, 86

fun gadgets, 14-15, 59

functionality

JavaScript errors, 130-131

resuable functionality, 120


gadget window, 122-124

Settings page functions, 125-126


G

Gadget Object Model, 35, 38-39

gadget development, 9

Sidebar Events API, 41

System.Contact API, 45

System.debug API, 45

System.Diagnostic.EventLog API, 45

System.Environment API, 43-44

System.Gadget API, 40

System.Gadget.Settings API, 40-42

System.Machine API, 44

System.MessageStore API, 45

System.Network API, 43

System.Shell API, 42-43

Gadget Picker window, 30

gadget revenue models, 75

ad gadgets

benefits of, 82

case study, 81


benefits of, 87

case study, 86


benefits of, 84

case study, 83

pull models, 76

ad gadgets, 81

benefits of, 85

case study, 77


push models, 78

case study, 79

gadgets as side products, 82-84


Gadget Setup function, 122

Gadget Setup function 327

gadget window, 129


feed gadgets, configuring for Mini Me gad-gets, 156-157


gadget specific functions, 124

settings-related functions, 123

standard functions in, 122


Gadget.css, 129

gadget.css files, 33

gadget.xml files, 30-32

Gadget.xml manifest files, MyBlog gadget,98-99

gadgets


classifying, 12

comparison chart, 26

competing versions of, 22

converting, 20

core functionality of, 34

customizing, 18

defining, 7

development of, 8-9

development platforms, 21

fun gadgets, 14-15

history of, 9-10


limitations of, 15-16

malware, 37

meeting points between different gadgets,20

multiple versions of, 8, 22

purposes of, 7

spyware, 37

support for, 87-88

utility gadgets, 14

web resources, online community website,21

GadgetUndocked.css, 129

gBackground method, 45

getData function, 200

getElementById function, feed gadgets, 109

GetFeed() function, 105, 124, 132


getTextAjax function, 190, 200-203

GIF (Graphics Interchange Format) files,71-72

gImage method, 45

gimage protocol, 304

globalization

internationalization, 299

localization, 299

country codes, 302

gadget example, 300-302

globalUpdateGadgetXML variable, 291

globalUpdateURL variable, 291

Google Desktop, 23

graphic design, 302

gimage protocol, 304

GraphicDemo.gadget, 304-306

g:background protocol, 303-306

g:image protocol, 303

g:text protocol, 303

shadow effects, 309-311

transparent PNG files, 307


graphs, Site Statistics gadgets, 204-210

g:background protocol, 303


removeElements method, 306

removeObjects method, 306

gadget window328

g:image protocol, 303

g:text protocol, 303

H

handleLoad function, Silverlight WorldClock Gadget, 277

Hello World XAML files, Silvelight WorldClock Gadget, 268

HideArrows function, feed gadgets, 153

HideFlyout function, 124

hosting web gadgets, 19

hover functionality (mouse), feed gadgets,152-154

href properties, changing onclick events to,136

HTML (Hypertext Markup Language)

accessibility techniques, 73

applications versus web pages, 37

extracting for display in flyouts, 193-194

feed gadget files, 94-95

flyout.html files, 30-32


main.html files, 30, 32

MSHTML (Microsoft HTML) component,36-37


parseHTMLAjax function, Site Statisticsgadgets, 201-202

reading, XHR (XMLHttpRequest) object,295, 297

retrieving via XMLHTTPRequest objects,192

Settings page, feed gadgets, 100-101

settings.html files, 30-32


Sidebar gadgets, 37

web pages

applications versus, 37

displaying in Site Statistics gadgets, 192

I

icon.png files, 30, 34-35

icons

gadget design, 67

user interface design, 55

images. See also graphic design

addShadow method, 46

background images

as wallpaper, 34

gadget design, 68-69

background.png files, 35

display/presentation (design patterns), 128

drag images, gadget design, 68

dragicon.png files, 30, 34-35

feed gadgets, 96


GIF files, gadget design, 71-72

gImage method, 45

grouping, gadget design patterns, 118

icon.png files, 30, 34-35

info.gif files, 35

loading.gif files, 35

logo.png files, 30, 34-35

MRU Project Gadgets, 220

PNG files, gadget design, 71

Silverlight World Clock Gadget, 268-269

Site Statistic gadgets, 195-196

transparent images, gadget design, 71

images 329


wallpaper, 34

info.gif files, 35


Site Statistics gadget

Added Features check box, 199

API, 187-190, 204-210

Counter Widget feature (Sitemeter.comwebsite), 184


design considerations, 195-197

developing, 198-204


goals of, 183

images, 195-196

integration into existing frameworks, 199

layouts, 196-197

Mini Me version, 199

site summary pages (Sitemeter.comwebsite), 185

themes, 195-196

usability, 197

Weather Gadget, 12

Initialize function, 124

Innovate.Gadget project template (reusableframeworks), 315

Installer (Windows), deploying gadgets viaCAB files, 180

installing gadgets for deployment, 172

internationlization, 299

Internet

connections, common assumptions of, 131

radio stations, 238-239

Internet Explorer, Disable Script Debuggingoption, 168

J - K - L

JavaScript, 34

ActiveX COM objects, initializing insidegadgets, 215

debugging gadgets, 161, 166-167

errors, gadgets

design, 62

functionality, 130-131

feed gadgets, functions in, 112-113

JSON, 105

main.Js files, 30

Settings page, feed gadgets, 101

Silverlight World Clock Gadget creation,265-266

Site Statistic gadgets, parsing data, 190

Sitemeter.com website, Count Widget fea-ture, 184

JavaScript Compression, 313

JavaScript Obfuscator, 313

JSON (JavaScript Object Notation), 105,295-297

keyboards, accessibility techniques, 72-73

KlipFolio widgets, 25

Konfabulator (Yahoo widgets), 22

Layer style (Photoshop), 309

layouts

files/folders, 118-120

Radio Gadgets, 241




live data, gadget design, 51

images330

Live Gadgets, 19

LoadFeed function, feed gadgets, 146

loading gadgets, putting focus on (accessi-bility techniques), 135

loading.gif files, 35

LoadSettings function, 101, 125

LoadXML function, 133

localization, 299

country codes, 302

gadget design patterns, 118

gadget example, 300-302

logic, Silverlight World Clock Gadget,275-280

logo.png files, 30, 34-35

M

Main Gadget window, feed gadgets, 104-107

main.html files, 30-32

main.Js files, 30

maintainable design patterns, 116

malware, gadgets as, 37

mashup gadgets, creating, 281-283

media gadgets

Radio Gadget

designing, 240-242

developing, 243-248


Internet radio stations, 238-239

requirements for, 239

Windows Media Player, 244-245

YouTube Video Gadget

BuildVideoObject function, 251

designing, 251-253

developing, 255-260


embedding Flash Media Player in,250-251

video feeds, 249-250

media player functionality, Radio Gadgets,243-244

PlayRadio function, 247

state changes in, 245-247

memory, common assumptions, 133-134

Message function, debugging gadgets, 164

MessageDialog function, debugging gad-gets, 164

MessageJS function, debugging gadgets,162

Microsoft Feed Manager, reading onlinedata via, 298-299

Microsoft Outlook Gadget, 13

Microsoft Popfly, creating via Sidebar gad-gets

mashup gadgets, 281-283

Website Comparison Gadgets, 280

Microsoft Silverlight applications

features of, 262

origin of, 263

running, 262

Sidebar implementation, 264

Microsoft Silverlight World Clock Gadget,261, 266

designing

images, 268-269

layouts, 269-270

themes, 268-269

usability, 270

developing, 271

animation, 273-274



logic, 275-280


Microsoft Silverlight World Clock Gadget 331






JavaScript, 265-266

XAML, 267-268, 272-276

Minesweeper Gadget, 59

Mini Me option, feed gadgets, 154



Mini Me versions, Site Statistics gadgets,199

mini web applications, gadget develop-ment, 9

modular file structures, 118

mouse

click events

enter key as (accessibility techniques),135-137


hover functionality, feed gadgets, 152-154

MRU (Most Recent Used) lists, 13

MRU (Most Recent Used) Project Gadgets,211

ActiveX COM, 214-215


reading Windows Registry settings,229-234

developing

collection objects, 231

Enumerate Registry, 231-232

framework integration, 222-225

listing Windows Registry items, 225-229

reading Windows Registry, 229-235

RegRead function, 232-233

Windows Registry API, 230-231

goals of, 212

images of, 220

layout of, 220

themes of, 219

usability of, 221

Windows Power Shell, 216

WMI, 216-218, 226-229

MsgBox function

buttons parameter, 165


prompt parameter, 165

return values of, 166

title parameter, 166

MSHTML (Microsoft HTML) component,36-37

Multiple Views, 16

MyBlog Gadget, 92, 139

adding features to, 140

advanced framework of, 141

commonly used fields list, 99-100

core functionality, 104-107

data presentation, 107

CSS, 108

DOM, 109-111

data section, 103

deploying, 114

framework of, 98

directory structure, 95

image files, 96

required files, 94-96

Gadget.xml manifest files, 98-99

JavaScript functions in, 112-113

Main Gadget window, 104-107

Mini Me option, 154



Microsoft Silverlight World Clock Gadget332

mouse hover functionality, 152-154

multiple feeds, 142-148

multiple pages, managing, 150-152


Settings page, 100-101

unobtrusive traversing, 152-154


zip files, 113-114

N

NET MRU Project Gadgets, 211




developing









goals of, 212

images of, 220

layout of, 220

themes of, 219

usability of, 221


WMI, 216-218, 226-229

notifications, gadget updates, 292-293


O

On Load function, 122

onclick events, changing to href properties,136

OnDock function, 122

onfocus events, 137

onfocusout events, 137

onkeydown events, 136

onkeypress events, 136

onkeyup events, 136

online data, reading

Microsoft Feed Manager, 298-299

Windows RSS platform, 298-299

XHR (XMLHttpRequest) object, 295-297

XML DOM, 297-298

online gadget communities, 21

OnMouseHover function, feed gadgets, 152

OnUndock function, 122

Opacity property, 17

Opera widgets, 26

Outlook Gadget (Microsoft), 13

P

packaging gadgets for deployment, 172

parseData function, 190, 203-204

ParseFeed function, 124




parseHTMLAjax function, Site Statisticsgadgets, 201-202

parseRSS function, feed gadgets, 109

parseRSS function 333

Photoshop

Layer style, 309

shadow effects, 309-311


Picture Slideshow Gadget, 56

pie charts, Site Statistics gadgets, 204-210

PlayRadio function, Radio Gadgets, 247

PNG (Portable Network Graphic) files

gadget design, 71

transparent files, 307

Popfly, Sidebar gadget creation via



popup function


syntax of, 162-163

porting mashup gadgets, 283

power supply information, detecting, 44

PowerStatus method (System.MachineAPI), 44

presentation/display (design patterns), 127

images, 128


prompt parameter (MsgBox function), 165

pull models (gadget revenue models), 76

ad gadgets, 81

case study, 77


push models (gadget revenue models), 78

case study, 79


benefits of, 84

case study, 83

Q - R

Question function, debugging gadgets, 164

Radio Gadget

designing

layouts, 241

themes, 240

usability, 242

developing

existing framework integration, 243

media player functionality, 243-247

volume functions, 247-248


Internet radio stations, 238-239

requirements for, 239

Windows Media Player, advanced optionalparameters list, 244-245

reading online data

Microsoft Feed Manager, 298-299

Windows RSS platform, 298-299


XML DOM, 297-298

RealPlayer, Internet radio stations, 239

Recent Documents Gadget, 13

Recent Project Gadgets, 222

Recent ProjectX Gadgets, 221

Refresh function, feed gadgets, 146

refreshing gadget behaviors, 61

RegRead function, MRU Project Gadgets,232-233

relevant information, gadget design, 51, 54

removeElements method, g:backgroundprotocol, 306

RemoveFeed function, feed gadgets,148-149

Photoshop334

removeObjects method, g:background pro-tocol, 306

removing feeds from feed gadgets, 148-149

Reset() function, feed gadgets, 144

Resize() function, 123

reusable functionality, 120


gadget window



gadget specific functions, 124


standard functions in, 122

Settings page, functions of, 125-126

reusble frameworks, 315

revenue models, 75

ad gadgets

benefits of, 82

case study, 81


benefits of, 87

case study, 86


benefits of, 84

case study, 83

pull models, 76

ad gadgets, 81

benefits of, 85

case study, 77


push models, 78

case study, 79

gadgets as side products, 82-84



RSS (Really Simple Syndication) feed gad-gets, 61, 91

data storage, 92

feed example, 103

RSS Reader gadget, 55, 57

RSS/Atom, reading, 295, 296-299

S

Samurize widgets, 24

SaveSettings function, 125-126

SaveXML function, 133-134

scripting, disabling via Disable ScriptDebugging option (Internet Explorer), 168

security, 312

code, 313

malware, gadgets as, 37

spyware, gadgets as, 37

User Account Control, 312

Windows Live Gallery, 312

SendPlayStateChangeEvents event, RadioGadget media player functionality, 245

Service Not Available information (gadgetbehaviors), 62-63

session management, common assump-tions, 133-134

SetClock function, Silverlight World ClockGadget, 277-278

SetGlobalText function, 301

SetInterval function, feed gadgets, 132

Settings Closed function, 123

Settings page

accessibility techniques, 137-138

dimensions (user interface design), 65

Settings page 335


adding multiple feeds, 142, 146-148

configuring for Mini Me gadgets, 155



functions of, 125-126

Recent Project Gadgets, 222

Site Statistics gadgets, 199

settings window, 129


settings.css files, 33, 129

settings.html files, 30-32

SettingsClosing function, 126

Setup function, 104, 123

Setup Size function, 122

shadow effects, creating in Photoshop,309-311

shadows in images, addShadow method, 46

sharing gadgets, 320

ShellOpen function, reading WindowsRegistry, 234-235

shortcut keys, sidebar gadget access, 72

ShowArrows function, feed gadgets, 153

ShowFlyout function, 124

feed gadgets, 110

Site Statistics gadgets, 204-205

side products, gadgets as, 82

benefits of, 84

case study, 83

Sidebar (Windows)

customizing, 8

gadgets, functions of, 10-11

Silverlight application implementation, 264

Sidebar Events API (Gadget Object Model),41

Sidebar gadgets, 19-20

accessibility techniques

HTML access, 73


theme colors, 73

addShadow method, 46

as HTML application, 37

future of, 46


gImage method, 45

Popfly, creating via



widget boxes, 20

Silverlight applications

features of, 262

origin of, 263

running, 262

Sidebar implementation, 264

Silverlight World Clock Gadget, 261

designing

images, 268-269

layouts, 269-270

themes, 268-269

usability, 270

developing, 271

animation, 273-274



logic, 275-280






Settings page336


JavaScript, 265-266

XAML, 267-268, 272-276

simplicity, user interface design, 53

Site Statistics gadget, 183

API, 187

graphs based on, 204- 210

parsing data, 190

pie charts based on, 204-210

pulling text data, 188-189

designing

images, 195-196

layouts, 196-197

themes, 195-196

usability, 197

developing, 198


integration into existing frameworks, 199

goals of, 183

Mini Me version, 199

Sitemeter.com website

Counter Widget feature, 184

site summary pages, 185

web pages, displaying portions of, 190-194

site summary pages (Sitemeter.com web-site), Site Statistic gadget development,185

Sitemeter.com website, Site Statistics gad-get development

API, 187-190

Counter Widget feature, 184

site summary pages, 185

SLQ Server, accessing, 313

Soapbox Video Gadget, gadget design casestudy, 51-53

sound information, detecting, 44


spyware, gadgets as, 37

standard file/folder layouts, 118-120

standard images, display/presentation(design patterns), 128

standardizing widgets, 47

startUpPage function, feed gadgets, 111

statistics

feed tracking, 294

user tracking, 294

statuses, displaying (gadget behaviors),61-62

Stop function, debugging gadgets, 169

storing data, feed gadgets, 92

streaming audio, playing on Radio Gadget,240

styles, gadget design, 70

Stylesheets, display/presentation (designpatterns), 129-130

support for gadgets, 87-88

System Debugger Select window, debug-ging gadgets, 169

System.Contact API, 45

System.debug API, 45

System.Diagnostic.EventLog API, 45

System.Environment API, 43-44

System.Gadget API (Gadget Object Model),40

System.Gadget.onSettingsClosed property,123

System.Gadget.Settings API (GadgetObject Model), 40-42

System.Machine API, 44

System.MessageStore API, 45

System.Network API, 43

System.Shell API, 42-43

SystemSetup() function, 123

SystemSetup() function 337

T

tab controls, accessibility techniques, 135

text. See also graphic design

gadget design, 70

reading, XHR (XMLHttpRequest) object,295-297

TextBoxFeedURL, feed gadgets, 102

themes

color, 73

Radio Gadgets, 240



time

information, detecting, 44

Silverlight World Clock Gadget, setting in,276-277

title parameter (MsgBox function), 166

titles, gadget design, 67

tracking users, 294

transparent images, gadget design, 71


traversing feed gadgets, 152-154

Trick-of-Mind gadget, 319

U

undocked gadgets


page dimensions, 65


undocked.css files, 33

unobtrusive traversing, feed gadgets,152-154

updateAvailable variable, 291

UpdateFeed function, feed gadgets, 148-150

updates

automatic updates, 289

checking for, 290

posting version information online,290-291

user notifications, 292-293

version checks via inserted code,291-292

feed gadgets, 132

feeds in feed gadgets, 148-150

URLFeedsCurrentID variable, feed gadgets,145

usability, designing for Site Statisticgadgets, 197

usage patterns (gadget design)


fun gadgets, 59



User Account Control, security, 312

user interfaces, designing

aesthetics, 53

docked page dimensions, 64

flyout page dimensions, 65

guidelines for, 66

relevant information, 54

settings page dimensions, 65

simplicity, 53

standard page dimensions, 64

undocked page dimensions, 65

unobtrusiveness of, 56

visuals, 55

user notifications, gadget updates, 292-293

user tracking, 294

tab controls338

utility gadgets, 58-59, 84

benefits of, 85

case study, 85

Clock Gadget for Time, 14

CPU Meter Gadget, 14

MRU Project Gadgets, 211






goals of, 212

images of, 220

layout of, 220





themes of, 219

usability of, 221



WMI, 216-218

listing Windows Registry MRU items,226-229

V

VBScript, debugging gadgets, 164-166, 169

verisign certificates, buying, 176

version checks via inserted code, 291-292


version information, posting online,290-291

Video Gadgets, 15, 249


designing

layouts, 252-253

themes, 251

usability, 253

developing

docked/undocked functionality, 258-259


gadget windows, 259-260

Flash Media Player, embedding in, 250-251


Visual Studio, MRU Project Gadgets,211-213


goals of, 212

images of, 220

layout of, 220

themes of, 219

usability of, 221

Windows Registry

listing items, 225-229

reading, 234-235

reading settings, 229-234

visual themes (gadget design)

background images, 68-69

buttons, 69

controls, 69

drag images, 68

icons, 67

titles, 67

visual themes 339

visuals (gadget design)

GIF files, 71-72

PNG files, 71

transparent images, 71


volume functions, Radio Gadgets, 247-248

W

W3C (World Wide Web Consortium), widgetstandardization, 47

wallpaper, 34

warnings, gadget behaviors, 61-62

Weather Gadget, 12, 19, 61

web gadgets, 19, 22

web pages

displaying, Site Statistics gadgets, 190-194

HTML pages, applications versus, 37

Site Statistics gadgets, data retrieval,200-204

web resources, sharing gadgets, 320


widget boxes, 20

Widget-Box gadget, 317

widgets, standardizing, 47

Windows Cabinet (CAB) files

creating, 175

deploying gadgets, 174




Windows Installer, deploying gadgets viaCAB files, 180

Windows Live Gallery, security, 312

Windows Media Player, advanced optionalparameters list, 244-245


Windows Registry

accessing



WMI, 216-218

listing MRU items from, 225-229

reading

settings via ActiveX COM, 229-234

ShellOpen function, 234-235

Visual Studio MRU, viewing, 213

Windows Registry API, MRU ProjectGadgets, 230-231

Windows RSS platform, reading online datavia, 298-299

Windows Sidebar

customizing, 8

gadgets, functions of, 10-11

Windows XP, Active Desktop feature, 9

WMI (Windows ManagementInstrumentation), 216-218, 226-229

World Clock Gadgets, 261

designing

images, 268-269

layouts, 269-270

themes, 268-269

usability, 270

developing, 271

animation, 273-274



logic, 275-280




visuals340




JavaScript, 265-266

XAML, 267-268, 272-276

WPF/E (Windows PresentationFoundation/Everywhere). See Silverlightapplications, 263

WScript, debugging gadgets, 161-163

X

XAML (eXtensible Application MarkupLanguage)

Hello World files, 268

Silverlight World Clock Gadget, 267-268,272-276

XHR (XMLHttpRequest) object, readingonline data via, 295-297

XHTML (Extensible Hypertext MarkupLanguage), reading, 295

XML (Exentensible Markup Language)

feed gadget files, 94-95

gadget.xml files, 30-32

Gadget.xml manifest files, MyBlog gadget,98-99

reading


XML DOM, 297-298

XML DOM (Document Object Model), read-ing online data via, 297-298

XMLHTTPRequest object, 105-107, 298

XMLHTTPRequest objects

methods of, 188

properties of, 188

pulling text data, 188

retreiving HTML, 192


Y - Z

Yahoo widgets, Konfabulator, 22

YouTube Video Gadget, 249


designing

layouts, 252-253

themes, 251

usability, 253

developing

docked/undocked functionality, 258-259


gadget windows, 259-260

Flash Media Player, embedding in, 250-251


zip files

deploying gadgets, 173


zip files 341

introduction - creating vista gadgets

Documents

document object model

site statistics gadgets

user interface design

youtube video gadgets

xml manifest files

mru project gadgets

gadget revenue models

gadget object model