Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.

Dismiss

create office tempate

0 views

Skip to first unread message

marcel...@gmail.com

unread,

Aug 25, 2007, 9:30:10 PM8/25/07

4,435,306 members and growing! 5,404 now online. Email Password
Remember me? Password problem?

Home MFC/C++ C# ASP.NET VB.NET Architect SQL All Topics Help!
Articles Message Boards Lounge

All Topics, MFC/C++, C#, ASP.NET, .NET, VB.NET >> Vista Gadgets >>
General

Developing Gadgets Using ASP.NET AJAX Extensions
By Scott Dowding.

How to develop sidebar gadgets using a base class developed with
ASP.NET AJAX Extensions JScript, XML
Windows (Vista)
Win32, VS (VS2005), AJAX
Dev
Posted: 31 Mar 2007
Updated: 16 Aug 2007
Views: 6,761
Announcements
Monthly Competition

Search Articles Authors Advanced Search
Sitemap | Add to IE Search
Print Broken Article? Bookmark Discuss Send to a friend
8 votes for this article.

Popularity: 3.98. Rating: 4.41 out of 5.

Download Latest Source Code from Windows Live Gallery
Download Movies gadget files - 159.1 KB

Introduction
What you will get from this article:

An overview of developing gadgets using a base class with built in
support for displaying loaded, loading, and connection error states
What you will not get from this article:

An introduction to gadget development
An introduction to ASP.NET AJAX Extensions
Background
Most gadgets that deal with remote data have three basic states:
loading, loaded, and connection error. For the sake of simplicity I
have intentionally ignored docked and undocked states.

When I set out to develop my first gadget, I was unhappy with how much
code I needed to write to support displaying states. The code I had
written seemed messy and more functional than object oriented. To
solve this problem I created a base class that provides support for
rendering display modes and encapsulates some of the basic gadget API.

Using the Code
Creating the HTML for your Gadget
Be sure to reference the MicrosoftAjax.js and Dowds.Gadgets.js files
first in your gadget's HTML file.

<head>
<script type="text/javascript" src="Scripts/
MicrosoftAjax.debug.js">
</script>
<script type="text/javascript" src="Scripts/Dowds.Gadgets.js">
</script>
<script type="text/javascript"
src="Scripts/##You_Gadgets_Javasctipt_File##.js"></script>
</head>
Instead of dynamically generating the HTML for each state the
Dowds.Gadgets.Gadget class takes a simpler approach. It expects the
gadget HTML file to have a DIV element for each state. They must have
the following ids:

dataLoadedDisplay, for the div to show when the data is successfully
loaded
dataLoadingDisplay, for the div to show while the data is loading
dataNotAvailableDisplay, for the div to show when there is a
connection error
Each DIV should be absolutely positioned and have its CSS visibility
set to hidden.

<body>
<div id="dataLoadedDisplay"
style="position:absolute;visibility:hidden">
<table id="movieListings">
<tr><td class="percent"></td><td class="title"><div><a></
a></div>
</td></tr>
...
</table>
</div>
<div id="dataLoadingDisplay"
style="position:absolute;visibility:hidden">
<img src="Images/Icon_Spinner.gif" /> Getting Data...
</div>
<div id="dataNotAvailableDisplay"
style="position:absolute;visibility:hidden">
<img src="Images/Icon_Info.png" /> Service Not Available
</div>
</body>

Creating the JavaScript for Your Gadget
Create a new class using ASP.NET AJAX Extensions. Use the
registerClass method to make it inherit from Dowds.Gadget.Gadget

Dowds.Gadgets.Movies = function()
{
Dowds.Gadgets.Movies.initializeBase(this);
this._data = null;
};
Dowds.Gadgets.Movies.registerClass("Dowds.Gadgets.Movies",
Dowds.Gadgets.Gadget);
Accessing remote data such as an XML file or a web service can easily
be accomplished using the Sys.Net.WebRequest class provided by ASP.NET
AJAX Extensions.

Dowds.Gadgets.Movies.prototype =
{
_requestData: function()
{
// Use ASP.NET Extensions to access the remote XML or web
service
var wRequest = new Sys.Net.WebRequest();
wRequest.set_url
("http://i.rottentomatoes.com/syndication/rss/
top_movies.xml");
wRequest.add_completed(Function.createDelegate
(this, this._processData));
wRequest.invoke();
}
}
Once the data is returned you'll need to call the _updateDisplay
method of the Dowds.Gadgets.Gadget class. It does almost all the work
to update the gadgets state. It updates the display based on the
values of the _dataNotAvailable and _dataLoaded flags.

_dataNotAvailable _dataLoaded DIV Displayed
true true dataNotAvailableDisplay
true false dataNotAvailableDisplay
false true dataLoadedDisplay
false false dataLoadingDisplay

Before calling the _updateDisplay method be sure to update the
_dataNotAvailable and _dataLoaded flags based on the success of your
request.

Collapse
Dowds.Gadgets.Movies.prototype =
{
...
_processData: function(executor)
{
if (executor.get_responseAvailable())
{ // The data returned
var movieDoc = executor.get_xml();
this._dataLoaded = true;
this._dataNotAvailable = false;
this._data =
Dowds.Gadgets.MovieInfo.ParseFromDoc(movieDoc);
// Update the display HTML for the loaded state
this._bindTable(this._data);
}
else
{ // There was an error connecting to the data
this._dataLoaded = false;
this._dataNotAvailable = true;
}
// Refresh the data in 4 hours
setTimeout(Function.createDelegate(this, this._requestData),
(4 * 3600000));
this._updateDisplay();
}
}
The _updateDisplay method should be called whenever the state flags
change. You'll also need to add custom logic to update the UI with the
data that is returned. In the example above I call
_bindTable(this.data) to update the table in the dataLoadedDisplay DIV
with the movie review data that was returned.

Opening a Flyout
If you open a flyout that is already open it loses focus and becomes
grayed out. To avoid this, check and see if the flyout is already open
and if it is, just refresh the data.

_link_onclick: function(e)
{
...
if(System.Gadget.Flyout.show)
{
this._updateFlyout();
}
else
{
System.Gadget.Flyout.show = true;
}
...
},
_updateFlyout: function()
{
var flyoutWindow = System.Gadget.Flyout.document.parentWindow;
flyoutWindow.moviesFlyout.reload(this._selectedMovieInfo);
}
Final Thoughts
It's very important that you avoid making your gadget look like
something a developer designed. Try thinking of an object or metaphor
you could use to visually represent your gadget. For example, I
created a movie review gadget so a clap board is a fitting backdrop.

Additional Resources
Windows Vista User Experience Guidelines: Sidebar Gadgets
Windows Sidebar Development Overview
Practices and Hints for Gadget
ASP.NET AJAX
Scott Dowding

Click here to view Scott Dowding's online profile.

Other popular Vista Gadgets articles:
.NET Interop for Gadgets - A C# GMail Inbox Reader Example
How to call absolutely any .NET code from your Vista Sidebar Gadget
Weather Sideshow
A SideShow application that communicates with a Weather webservice.
Daily Dilbert: A Sidebar gadget for Windows Vista
Daily Dilbert is a simple Windows Vista sidebar gadget which delivers
the daily dilbert cartoon on your desktop
A Vista sidebar gadget to provide weather information
This article will show the different capabilities of the Vista
sidebar, including settings, flyouts, different states when docked and
undocked and pulling in live data feeds over the internet.

[Top] Sign in to vote for this article: PoorExcellent

Attention: You must confirm your email address before you can post to
this forum.
Note: You must Sign in to post to this message board.
FAQ Message score threshold 1.0 2.0 3.0 4.0 5.0 Search
comments
View Normal (slow) Preview (slow) Message View Topic View Thread
View Expanded Per page 10 25 50 (must logon)

Msgs 1 to 3 of 3 (Total: 3) (Refresh) First Prev Next

Subject Author Date

How to deploy? kuke 6:21 17 Jun '07

I zipped up your gadget renamed it to a .gadget and installed it,
but it doesn't appear in the list of available gadgets. Any
thoughts?

[Sign in | View Thread | PermaLink | Go to Thread Start]

Re: How to deploy? kuke 6:45 17 Jun '07

Ok, so the _root directory_ of the Gadget has to be the localised EN-
US folder (or non-localised containing the gadget.xml file). When I
zipped it I had a parent "Movies.gadget" folder - zipping the child
folder made it work.

Nice gadget BTW!

[Sign in | View Thread | PermaLink | Go to Thread Start]

Re: How to deploy? Scott Dowding 17:42 17 Aug '07

The download has been updated to resolve this issue.

[Sign in | View Thread | PermaLink | Go to Thread Start]

Last Visit: 20:14 Saturday 25th August, 2007 First Prev Next

General comment News / Info Question Answer Joke /
Game Admin message

The Ultimate Toolbox · ASP Alliance · Developer Fusion · Developersdex
· DevGuru · Programmers Heaven · Planet Source Code · Tek-Tips Forums
·

Help!ArticlesMessage BoardsLoungeWhat is 'The Code Project'?General
FAQPost a QuestionSite DirectoryAbout UsLatestMost PopularSearchSite
DirectorySubmit an ArticleUpdate an ArticleArticle CompetitionWindows
VistaVisual C++ATL / WTL / STLCOMC++/CLIC#ASP.NETVB.NETWeb
Development.NET FrameworkMobile DevelopmentSQL / ADO / ADO.NETXML /
XSLOS / SysAdminWork IssuesArticle RequestsCollaborationGeneral
DiscussionsHardwareAlgorithms / MathDesign and ArchitectureSubtle
BugsSuggestionsThe Soapbox

0 new messages