Janae’s Blog

In this blog post, I will discuss the steps needed to create a basic gadget in Windows 7. A gadget consists of XML, HTML, and CSS files. I will create a gadget that will use rssxpress-lite to display an RSS feed straight to the desktop.

1. Create the gadget directory

I created a directory to hold my gadget files in c:\Program Files\Windows Sidebar\Gadgets.  It's best practice for the directory name to be the same as the name of the gadget, along with the .Gadget extension. For example, I will name my gadget SampleGadget, so my gadget directory will be named SampleGadget.Gadget.

2. Create the manifest - gadget.xml

The manifest is an XML file that contains the basic information about the gadget, such as the name, version, and permissions. 

Above is a very simple manifest.  I have specified the name (SampleGadget), the version, and then a few bits of specific information about this gadget. Be sure to save this file as type UTF-8. For more information about the gadget manifest and additional properties, visit Gadgets for Windows Sidebar Manifest.

3. Create the base HTML file - SampleGadget.html

This HTML file is the main one used to display the gadget and also contains the CSS used for styling. It's location is specified in the <base> tag of the manifest XML file (gadget.xml).  Since my gadget is utilizing a 3rd party component, I only have a few lines of code besides the CSS:

This file should be saved as type Unicode.  I set a specific height on my gadget so that large amounts of content wouldn't cover a large area on the desktop. I also specified that a scrollbar should show if the content will expand past the set height of the gadget.  The CSS styles starting with '.rss' are specific to the 3rd party RSS functionality I am using.

4. Installing the gadget

If you saved your gadget files into the windows gadget directory, installation of the gadget should be simple.  Go to the Windows 7 desktop, right-click and select 'Gadgets'.  The new gadget (SampleGadget) should be listed in the available gadgets.  Double-click the gadget to install it.

5. Adding settings

Configuring a Settings dialog for your gadget is a way to allow the user to customize the gadget to a user's personal preferences.  For this example, we need three files: SampleGadget.js, Settings.js and Settings.html.

SampleGadget.js should contain the following two lines of code to refer to the HTML page that will format the settings dialog:

Settings.html will contain the html code needed to display the settings dialog.  For my gadget, I only needed one text box where the user would specify the URL to the feed they wish to display:

The Settings dialog for my sample gadget looks like this:

The Settings.js and SampleGadget.js will contain the code needed to save the user input in the Settings dialog, and use those settings to update the gadget. For more information about setting up Settings for your gadget, visit Developing a Gadget for Windows Sidebar Part 3: Settings and Flyouts.

See also my post about the Gadgets Platform.

Developers interested in creating applications with rich user experiences and animations will be interested in the Windows 7 Animation manager.  Also known as Windows 7 Scenic Animation, this API is a set of COM interfaces and is designed to work with any graphics technology.  It will help simplify animation development by providing a rich library of commonly used transformations, including linear, accelerate/ decelerate, and parabolic, and act also as a state manager.  As state manager, the Animation API handles the scheduling of animations and resolves conflicts that occur when multiple animations have the same target.  Complex storyboards are supported, so multiple transitions occuring on different targets and different variables can occur within the same storyboard.  By using the Animation API, developers will be able to concentrate more on the functionality of their applications, instead of spending time on handling state management and creating transitions.

Links to more information about Windows 7 Animation:
Windows Scenic Animation Overview
Inside Windows 7: Animation Manager Deep Dive and Tutorial
Scenic Animation Overview - whitepaper
Windows Animation API Overview

Windows 7 provides a Gadgets Platform which is used to create and host Windows 7 gadgets. Some of the goals of the Gadgets Platform development was to provide excellent backward compatibility with existing Windows Vista gadges, while providing many improvements for gadget developers including better debugging and better gadget management.

An interesting feature provided by the Gadgets Platform is the ability to add an installed gadget to the desktop programmatically. So, for instance, if you write an application that has a corresponding gadget, you could have an option to install that gadget on the user's desktop as part of the installation procedure.  This would make it easier for the end user to access your application quickly.

Gadget Management has been simplified by eliminating the Sidebar container, and adding a 'Gadgets' link to the desktop context menu.  By removing the sidebar concept, the gadgets just dock directly onto the desktop, without having the option of putting them in the Sidebar container or the desktop.  The 'Gadgets' link from the context menu opens a gadget management window where the user can install, uninstall, and search for additional gadgets online.

Additional information about the Gadgets Platform improvements and gadget development on Windows 7 can be found here:

http://msdn.microsoft.com/en-us/library/dd370867(VS.85).aspx
http://msdn.microsoft.com/en-us/library/dd378389.aspx
http://msdn.microsoft.com/en-us/windows/dd239181.aspx

One of the highlights of the new features of Windows 7 is the Library.  The Library is a replacement for the standard Documents folder seen in previous versions of Windows.  Using the Library, the user defines the locations of documents / files of the same type that should be collected together (Music, Videos, Pictures, Documents, etc.).  This makes it very easy for the user to be able to go to one central location to find a file -- without requiring the user to save all of their files in just one folder.  The user can even include folders located on other machines in their libraries.

It's very simple to add a folder to an existing library.  Just right-click on the folder you want to add, and select the library from the popup list.  In the example below, I am adding a folder on my network to the Documents library:

Applications 

Windows applications may also consume the features provided by the Libraries.  For instance, when a user wants to save a file in Paint, the common file dialog shows the user's libraries, allowing quick access to the commonly used folders and files:

When building a Windows application, it is important to include functionality to interact with the new Library features to improve usability.  You will need to use the IShellLibrary API to interact with current libraries or create ones specific for your application. See the additional resources below for more information on how to implement Library features in your application. 

Additional Resources

File Library Replaces Document Folder
Understanding Windows 7 Libraries (part 1 of 7 the series of posts about Windows 7 Libraries)
Find and Organize Part 1
Consuming the Contents of Windows 7 Libraries

Introduction 

Windows 7 offers a feature called Federated Search which allows users to search internet sites from within Windows Explorer.  Windows Explorer uses the search functionality provided by these internet sites and displays the results in a familiar and user-friendly way.  The search results can be links to webpages, or links to actual files - images, PDF documents, etc. 

Windows Explorer offeres several different ways of displaying the results.  In this example, the Channel 9 website (http://channel9.msdn.com/) is being searched using the Federated Search.  Here, I have the results shown in the 'Content' view, with the 'Preview' pane visible.  This allows me to quickly see the results, as well as open the webpage (or file) directly in Windows Explorer.

In this example, I specified the results to be shown in a 'Detail' view, which allows me to see several pieces of information at once, including the article name, author, and date it was created. 

One very useful feature offered is the 'Save Search' button just above the results pane.  Clicking this button will create a shortcut to the specific search and place it in your 'Favorites' folder within Windows Explorer.  This makes it very simple to find and execute queries important to the user.

Using Federated Search 

There are three main steps to creating a successful Federated Search: Enabling the remote website to handle queries, create the OpenSearch description file, and deploying the description file.  In this article, I will mainly focus on the considerations a website programmer should have when building search functionality, to make the Federated Search most useful.

First of all, though, here is a very simple OpenSearch description file (OSD). This file is configured to search the Channel 9 website. To use this file, copy the XML contents below to a text editor, and save the file using extension .osdx.

<?xml version="1.0" encoding="utf-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
        <ShortName>Channel 9</ShortName>
        <Url type="application/rss+xml" template="http://channel9.msdn.com/Search/feed/rss?Term={searchTerms}" />
</OpenSearchDescription>

To deploy this file, copy it to your Windows 7 machine (if not already there) and double click the file.  Windows 7 will prompt you to confirm that you want to add this search connector.  Click 'Add' on this popup dialog.  This search is now saved if the 'Searches' folder of your user, with a shortcut saved in the user's 'Links' folder.  This shortcut will appear in the 'Favorites' section of the Windows Explorer left-hand navigation.  Note: Another way to deploy the OSD file is to post a link to it on your website.

Website Considerations

1. Accept a Query
   When building your website, if you want the user to be able to search your site using the Federated Search, there are a few things you must do.  You must provide search functionality to the contents of your website and the results of the search should be exposed in XML format - by RSS or Atom.  An example of this kind of search can be found on the Channel 7 website (http://channel9.msdn.com).  On the search results page, there is a link to 'Subscribe to these search results.'  It is particularly important to have specific RSS feeds for the search results, where the search term(s) are passed to the RSS URL through query string.  This query string is used by the Federated Search to pass the search term the user types in the search box of Windows Explorer
   
       For example, the RSS URL for Channel 9 is: http://channel9.msdn.com/Search/feed/rss/?Term=terms
   
   In the OSD file, this URL should be specified in the <Url> tag that uses type 'applications/rss+xml'.  Use the token {searchTerms} in the URL as a placeholder for the terms a user enters in Windows Explorer.
   
   The OSD entry would look like this:
   
        <Url type="application/rss+xml" template=http://channel9.msdn.com/Search/feed/rss/?Term={searchTerms} />
   
2. Initial View in Windows Explorer
   When the user first opens Windows Explorer and clicks on the shortcut to the Federated Search for a website, they will see a blank results pane before submitting any search terms.  In order to display an initial view of items (for example, the most recent blogs posted to your site), another <Url> element specified in the OSD document.  The URL specified in this tag should not include the {searchTerms} token, should be of type 'application/rss+xml', and rel should have 'itemlist' specified.
   
        For example, the generic RSS feed for Channel 9 is: http://channel9.msdn.com/Feeds/RSS/
   
   The OSD entry would look like this:
   
        <Url type="application/rss+xml" rel="itemlist" template="http://channel9.msdn.com/Feeds/RSS" />
   
3. HTML View of search results
   The results of a Federated Search are shown within Windows Explorer, but there is also a way to link the user to the same results on your website.  Just above the search results, the user will see a "Search on website" button. 
   
   
   
   To configure this, first, your website must have a webpage that displays the search results based on terms passed in a query string. 
   
   For example, the webpage view of search results on Channel 9 is: http://channel9.msdn.com/Search/?Term=terms
   
   Secondly, a <Url> element must be added to the OSD file:
      
       <Url type="text/html" template="http://channel9.msdn.com/Search/?Term={searchTerms}" />

Other notes 

In my opinion, I can see the Federated Search becoming a highly used feature of Windows 7.  It would be incredibly useful to a user who has a particular set of sites they search frequently - as long as the websites are set up to handle the Federated Search features.  Another way to help users setup your site in their Windows Explorer is to provide them with an OSD file that is configured to give the best user experience possible. There are many options that allow you to create a highly customized user experience within Windows Explorer, including paging, results count, and layout of the results.  Please see the Additional Resources section for links to additional documentation about other features of the Federated Search. 

Additional Resources

Windows 7 Federated Search Provider Implementer's Guide
Federated Search in Windows

One of the features of Windows 7 is the newly designed taskbar. The taskbar is meant to provide the user a way to quickly access the programs and tasks that interest the user most. Previous versions of the taskbar included a Quick Launch area and the standard area that showed which programs were running. The Windows 7 taskbar consolidates these two areas into one. This results in a cleaner desktop since there are fewer icons showing at one time.

A feature of the taskbar is the Jump List. Right-clicking on the application icon in the taskbar will open the Jump List. Developers can consider it to be a miniature launch menu specific to their application. The Jump List contains two main areas: Destinations and Tasks. The Destination area contains items that the user can click to immediately begin working on, such as the files used most recently, or files the user has pinned to the Jump List. The Tasks area contains quick links to common tasks for that application, such as launching or closing the application.

As a developer, you can add custom Destination categories, and create custom user tasks specific to your application. The idea is that you want to make your application easily accessible and get the user working with it as quickly as possible. The Jump List allows common tasks and important files to be reached with just one or two clicks. During the planning stage of your application, it is important to keep the taskbar and Jump List in mind to help provide the best user experience possible. Try to determine which parts of your application are going to be used the most and would most benefit the user by having a place within the Jump List. The ultimate goal is to help the user get to your application quickly and confidently.

Some useful references:
http://blogs.msdn.com/yochay/archive/2009/01/06/windows-7-taskbar-part-1-the-basics.aspxhttp://channel9.msdn.com/posts/yochay/Jump-into-the-Windows-7-Taskbar-Jump-Lists/

Here is a simple sample of some JQuery code I had to use to implement hide/show functionality of news articles.

For a recent project, the site was built using Ektron as the Content Management System. There was a News page, where news articles entered into Ektron were dynamically displayed. In Ektron, the client could enter the news title, and intro paragraph, and then the complete story.  The design of the site needed the title and intro paragraphs to display, then clicking a 'Read More' link would hide the intro and show the entire article.  If one article was expanded, it should remain expanded until the user clicked 'Collapse Story'.

I was able to use JQuery to dynamically insert the 'Read More' link and control the click functionality of that link.

Assume a news article would have the following format:

<div class="newsArticle">
    <h2>Event Title</h2>
    <div class="newsIntro">
        <p>This is an example of what a news story will look like. this is where the story cuts off...</p>
    </div>
    <div class="newsMore">
        <p>This is an example of what a news story will look like. this is where the story cuts off...Except now here's the rest of the content.</p>
    </div>
</div>

(The CSS for the classes would only contain stylist elements, such as font size & color.)

Here is the JQuery script I used to implement the read more / collapse story functionality.

        //toggle the anchor tag
        $(".newsLink").toggle(function()
        {
            //hide the intro, show the full story, change the link text
            $(this).prevAll(".newsIntro").toggle();
            $(this).prev(".newsMore").toggle(); 
            $(this).html("Collapse Story");
        },function(){
            //show the intro, hide the full story, change the link text
            $(this).prevAll(".newsIntro").toggle();
            $(this).prev(".newsMore").toggle(); 
            $(this).html("Read More");
        });
    });
</script>