Vista Sidebar Gadgets Steve Marx Technical Evangelist Microsoft Corporation

WHAT IS A GADGET? WHAT IS THE PURPOSE FOR GADGETS? To allow an end user to be more efficient and productive. A small, lightweight, specialized application. Small: physically small dimensions. Lightweight: much less coding than a full application. Specialized: performs a specific, limited action or function.

SIDEBAR GADGETS SIDEBAR GADGETS Mini Desktop Applications Mini Desktop Applications Rich – dynamic, desktop-based user experience. Secure Enterprise Functionality. Only works in Vista Sidebar (docked and undocked). Examples Vista Desktop with Sidebar (includes docked gadgets) Vista Sidebar Gadget (undocked)

GADGET GALLERY GADGET GALLERY For all Live and Sidebar Gadgets Main User-Facing Gadget Site Upload and Download Gadgets. Primary Gadget User Community. Gallery.Live.com Gadget Gallery (gallery.live.com) Home Page.

SIDEBAR GADGET DEMO

STEPS FOR BUILDING A GADGET Design the Gadget Size Considerations Dynamic Content and Network Calls Code and Package the Gadget HTML and DHTML (JavaScript) JavaScript API Extensions

SIDEBAR GADGET APIs SIDEBAR GADGET APIs Rich Selection of Sidebar APIs Classes System.Net.NetworkInterface System.PowerStatus System.Shell System.Shell.Drive System.Shell.Folder System.Shell.Folder.Items System.Shell.Item System.Shell.RecycleBin System.SideShow System.Sound Classes System.Debug System.Diagnostics System.Diagnostics.EventLog System.Environment System.Gadget System.Gadget.Flyout System.Gadget.Settings System.Gadget.Sidebar System.Machine System.Net.NetworkInformation

USING THE GADGET API Accessing Settings System.Gadget.settingsUI = "settings.htm"; System.Gadget.onSettingsClosed = closedEvent; Setting Dock and Undock Events System.Gadget.onDock = procDockEvent; System.Gadget.onUndock = procUndockEvent;

ACCESSING VOLUME INFORMATION Gadget API’s Give Simple Access to Shell, Folder and Drive Information var curDrive = System.Shell.drive("c"); var strFreeSpace = "Free Space (MB): " + curDrive.freeSpace; var strDriveFormat = "Drive Format: " + curDrive.driveFormat; var strVolumeLabel = "Drive Label: " + curDrive.volumeLabel; var strTotalDriveSize = "Drive Size (MB): " + curDrive.totalSize; var strTotalFreeSpace = "Free Space (MB): " + curDrive.totalFreeSpace; var strRootDirectory = "Root Directory? : " + curDrive.rootDirectory; var strDriveType = "Drive Type: " + curDrive.driveType;

GADGET PROJECT STRUCTURE (GadgetRoot)/gadget.xml (GadgetRoot)/gadget.htm (GadgetRoot)/flyout.htm (GadgetRoot)/settings.htm (GadgetRoot)/en-US/ (GadgetRoot)/core/ (GadgetRoot)/css/ (GadgetRoot)/images/ (GadgetRoot)/images/background/ (GadgetRoot)/images/icons/ (GadgetRoot)/images/nav/ (GadgetRoot)/js/ (GadgetRoot)/js/gadget.js (GadgetRoot)/js/flyout.js (GadgetRoot)/js/settings.js (GadgetRoot)/js/local.js

DEAFULT GADGET.HTM FILE HEAD Section – generally consists of a few tags that load the CSS and JavaScript files needed by the gadget. BODY Section – generally consists of an HTML framework that is dynamically modified as needed to create the main gadget layout and UI for both of the main gadget states: docked and undocked. <div id="gadgetContentFrame" onmousedown="javascript:return false;" onmousemove="javascript:return false;"> ***ADD DOCKED NAV WITH NO FLYOUT HERE*** ***ADD UNDOCKED NAV FOR SMALL LAYOUT HERE*** ***ADD UNDOCKED NAV FOR LARGE LAYOUT HERE***

GADGET UI & LAYOUT CONSTRAINTS Minimum Size - 25px wide by 60px high Maximum Docked Size - 130px wide Undocked Gadgets - Any Size Flyout - Any Size

SIDEBAR GADGET MANIFEST SIDEBAR GADGET MANIFEST The gadget.xml file Core Elements

SIDEBAR GADGET MANIFEST Clock Microsoft.Live <info url=" text="Gadget Info" /> ©2006 Microsoft Corporation Gadget description. <base type="HTML" apiVersion="1.0.0" src="sidebarclock.html" />

GADGET PROJECT AND FILES DEMO

GADGET VISIBILITY Gadgets Need to Understand User Scenarios The gadget is docked to the sidebar and has been scrolled offscreen. The gadget is docked to the sidebar and the sidebar has been minimized. The workstation is locked or the user has "fast-user-switched" to another session on the console. The power management timeout for the monitor has elapsed and the monitor is turned off. System.Gadget.visibilityChanged A gadget can be informed of potential visibility state changes by assigning a callback to this event

RICH GRAPHICS Special Objects to Enhance User Experience gbackground gimage gText Simple mechanism to add special effect to Text, Image and Backgrounds such as Glow, Shadow Opacity, Rotation, Soft Edges <g:background id="gadgetBackground" src="images/partiallyTransparent.png" style="position:absolute;top:0; left:0;z-index:-999">

LOCALIZATION Full Localization Support Including Full MUI (Multilingual User Interface) Integration Gadget Root is Default Language Add Language Specific Folders for each Supported Language

GADGET SECURITY Gadgets are Treated as Executables Similar to an EXE download from the Web Can Host and Interact with ActiveX Objects IE7 Protected Mode is Bypassed All Code is Local, and Code is Accessing System API’s

AUTHENTICATION & DATA SECURITY Authentication Windows Authentication. Extendable Using ActiveX. Data Security – SSL available

DISTRIBUTE THE GADGET Gadget Gallery (Gallery.Live.com) Gallery for all Windows Live gadgets (Live, Sidebar, etc.). International – over 30 languages; localized to most major regions. Promotional and advertising opportunities. Sidebar Gadgets In Box Gadgets – locked; unbranded, Microsoft only.* * cannot promote branded gadget; required by consent decree. OEMs – can preinstall any gadget; great partnership opportunity. Preferred Gadget Installers – for OEMs, MSDN download, etc.

BUILDING A GADGET DEMO

GADGET RESOURCES Gallery (gallery.live.com): upload and download gadgets MicrosoftGadgets.com: gadget dev resources & community MSDN: Sidebar and Live gadget dev resources Q&A Now!