[This should be read as a supplement to gadget development verview ]. 

Writing a gadget is quite easy.. It is just HTML and a little bit of wiring up notifications for docking + undocking, visibility, etc.  I am hoping this post and helps you have a gadget with flyouts, notification for docking/undocking,  saving settings, etc. in less than 20 mins..

---  

The sample code is here packaged in zip, with a VS solution so you can edit the files easily from Visual Studio.  
To install, extract the zip file to
“%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\Sample.Gadget”

Should end up with a structure similar to this: (with only a few files highlighted)

\Users\jaimer\AppData\Local\Microsoft\Windows Sidebar\Gadgets\Sample.Gadget  the full path to our gadget directory
...\Sample.Gadget\en-us\gadget.xml     The manifest file... relatively easy to understand..
...\Sample.Gadget\en-us\simplest.html  this will be the gadget file used for this sample  -- the gagdget knows to load this file because we told it in the gadget.xml
...\Sample.Gadget\en-us\settings.html     the UI for the gadget's settings..
...\Sample.Gadget\en-us\css\main.css     centralized place for our  style sheets ...
\Gadgets\Sample.Gadget\en-us\js\generic.js   I have put some generic JS code here.. [stuff that I use for all my gadgets] ..

A few of the interesting snippets in this sample gadget is:

gadget.xml - aka gadget manifest
Only file name that can not be changed; sidebar specifically looks for this filename
Most relevant entry is the
<base type="HTML" apiVersion="1.0.0" src="Simplest.html"/>
This tells the sidebar gadget what file to load as entrypoint..

Simplest.html -- our gadget user interface
The HTML file loaded by sidebar; aka our UI...  interesting snippets:

• include for the stylesheets and JS files:

<link href="css/main.css" rel="stylesheet" type="text/css"/>
<script src="js/generic.js" type="text/javascript" language="javascript"></script>
<script src="js/custom.js" type="text/javascript" language="javascript"></script>

• wired the Init () call that will do all the wiring work

Generic.js
The wiring is done in the init function.. we do a bit of the wiring here:

function init ( )
{
System.Gadget.settingsUI = "settings.html"; //This tells the gadget the HTML file to launch for settings
System.Gadget.onSettingsClosed = settingsClosed; //wire ourselves to settings closed event to save them
System.Gadget.visibilityChanged = visibilityChanged; // stop working if we are not visible System.Gadget.onUndock = chkdockedState; //let me know if I get undocked so I can look different System.Gadget.onDock = chkdockedState;

System.Gadget.onShowSettings = showSettings ; // let me know if settings are being shown System.Gadget.Flyout.onHide = flyoutHiding; //let me know if flyout is showing/hiding. I can pass data to it via document property
System.Gadget.Flyout.onShow = flyoutShowing;

}

that is all the code  needed to wire every thing side bar does ( drag drop is not some thing you can wire into .. Pretty easy! The rest is your business logic to populate what happens on each action.. and the code to show the Flyout 

custom.js
Notice that simplest.html has
<a href="" onclick="showFlyout('login', 10000);">Show Flyout</a><br />

This will be the code to show our flyout . showing it is as simple as setting:

System.Gadget.Flyout.file =  "loginFlyout.html";  //file name to be shown..
System.Gadget.Flyout.show = true;

To hide the Flyout, set:
System.Gadget.Flyout.show = true;

The code I am showing hides the flyout after 10 seconds..
I hide it for no reason other than to show you how to hide it..
Note that the Flyout is only visible when the gadget has focus.. if gadget loses focus, the flyout hides automatically.  

settings.html
This file shows UI for entering settings...
Notice that the sidebar puts the "frame" for the settings screen...
Sidebar handles the frame title, OK, Cancel button ... and you get the notification via the System.Gadget.onSettingsClosed event..  to cancel this dialog from closing [say it failed validation] you can listen for the onClosingEvent.  You can see all the sample logic, to load and save settings inside the settings.js file

That is it! With this quick sample you should have a gadget rendering UI in no time.. Unfortunately all we can do now is render UI, maybe desktop status, a game or any thing else that works disconnected.. Next post we will wire this to some data :)

 To run the sample, 

1. add your gadget to the vista sidebar
2. Click on the ShowFlyout  Anchor
3. Click any where out side of the gadget to have the flyout go away  (or wait 10 secs)
4. Right click any where in the gadget
5. Select Options, to show the SettingsUI
6. Click OK -- you will see a validation error appear.... this was again added randomly as an example
7. Click OK again
8. Start now hacking away at the gadget and make some thing cool  :)

The whole sample is here

This will walk you through how to make REST (GET,POST) calls from a sidebar gadget using XmlHttp.. ( 20 mins or less, if you have asp .net)

There are plenty of samples on the web for using XmlHttp, so will go quick and we will touch in a few of the 'more intricate' scenarios people have asked about: Cookies + Session State + redirects when sidebar gadgets call a back-end...   

The code for this sample is located here; there is a

• client side component (sample.gadget) -- note that for this sample, login.js script points to my local webserver..  you will have to update that to point to your back-end..
• server side component ( UsernameSite) ..  this code uses ASP .NET, you can use any backend you want.. I used the easiest one for me.

Here is the gist of the Client-side code:
loginFlyout.html 
Just  has form data... trivial HTML form prompting for username & password for form user authentication.   The "useGet" determines if making a POST or GET request, though practically they are the same code.

generic.js has the function to get the XmlHttp object, first we check for native IE 7 object, if not possible we use MSXML..

function GetXMLHTTP ()
{
var xmlhttp = null ;
// this should be default path... using IE 7 native XML HTTP
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
if ( typeof xmlhttp.overrideMimeType != 'undefined')
xmlhttp.overrideMimeType('text/xml');
}
else if (window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
throw "No XMLHTTP" ;
}
return xmlhttp;
}

login.js has the code to send the XmlHttp request..  Note that for this samples we used Synchronous calls... that is usually bad :( ... but it saves mein sample code and keeps it simpler so I left as an exercise for you to change ..

 Hope that was useful; if the instructions are too hard ... let me know ..

This is an FAQ and I just shared it via email w/ someone, so sharing it for future:

http://blogs.msdn.com/sidebar/    -- Sidebar Corner ==  the sidebar PMs’    blog

http://microsoftgadgets.com/Sidebar/DevelopmentOverview.aspx - Sidebar development overview  

There might have been a few API changes since beta2, but for the most part this paper is great for a sidebar newbie..

http://gallery.microsoft.com/vista.aspx  - The sidebar repository where users are posting gadgets ..

http://microsoftgadgets.com/forums/10/ShowForum.aspx - The sidebar forums..  

No surprise, Tim is prompt to post links to latest CTP goodies Huge surprise: I am giving Cider a fair try ....

Since a few weeks ago, I have been using Cider August CTP (or candidates for it)..  It still has code parsing issues (aka whoops)... but it is a huge improvement of past releases and it has a few features that I really like:

• SplitView -- think Xamlpad, but inside VS...
• Their Grid designer is very nifty... lots of handles to move stuff around
• The code generated is very clean...   
• I am weird, but I like the properties window in Cider better than Sparkle's..

The readme for Cider's release is in Tim's links..  Please check it out and give Cider a try..

Does this mean I am stepping away from EiD? sorry can't do...  but I am going back and forth; for smaller single window prototypes with not too many users controls, I am in Cider.. playing around and most important thinking about feedback and suggestions: VS2007 has a long stabilization cycle planned on their release, the time to provide feedback and suggestions is now cause they are going to move to feature complete pretty quick ...

Yesterday, I had the [unsual for me] pleasure of surfing the web for 'things WPF'...  A couple of useful findings (imho) were:

How to Leverage Windows Forms and Windows Presentation Foundation in a Single Hybrid Application   Architecture Webcast tomorrow 9/3 at 1700 GMT...  I will try to attend if myself... Scott Morrison took over crossbow now that Mike changed teams..