Turning the Velodoc Flash applet into a Vista Sidebar gadget

Documentation

Step-by-step instructions on how to develop a sidebar gadget are available at:

• http://microsoftgadgets.com/Sidebar/DevelopmentOverview.aspx
• http://microsoftgadgets.com/Build/SidebarTutorial.zip
• http://msdn2.microsoft.com/en-us/library/ms723694.aspx
• http://msdn.microsoft.com/msdnmag/issues/07/08/sidebar/default.aspx

Reference documentation is available at http://msdn2.microsoft.com/en-us/library/bb508511.aspx

Implementation

I am always trying to start this type of RAD development from an existing example. The sample that you build in http://microsoftgadgets.com/Sidebar/DevelopmentOverview.aspx is a good starting point.

In our final gadget, the html is simply a div which is filled by Javascript code when the gadget loads:

• The Javascript event handlers are hooked as described in http://msdn.microsoft.com/msdnmag/issues/07/08/sidebar/default.aspx
• On page load we do one of three options:
• If running on Windows 64 bits, we display a message because Flash does not support 64-bit systems.
• If connection is offline, we display a message
• Otherwise, we display the applet

The recommended approach to test a 64-bit platform is to use the System.Machine.processorArchitecture property but this always returns [Object error] on my 64-bit DELL Precision M65. So I have used System.Environment.getEnvironmentVariable("PROCESSOR_ARCHITECTURE") which seems to work consistently over the few Vista computers that I have tested.

There is apparently no function in the framework to check if the network connection is online, so I have used the same approach used in the Google Desktop Gadget.

I have only experienced one hitch in the implementation: the Flash applet catches the mouse events before the Sidebar. As a consequence, the gadget toolbar at the top right of the gadget is never displayed, which prevents from closing or moving the gadget. The workaround I have found is to add an image at the top of the Flash applet, so that when the mouse goes over this image, the gadget toolbar is displayed.

Packaging

You can package your sidebar gadgets as .zip files or .cab files renamed into .gadget files. I have used the following batch file to produce a proper package from sources located in "D:\Documents\Velodoc Sidebar Gadget\Sources". The batch file should be located in the parent directory:

rem ** remove/create a test gadget folder
rd "%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\Velodoc.gadget\" /s /q
md "%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\Velodoc.gadget\"
rem ** copy all of the files into test area
xcopy .\Sources "%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\Velodoc.gadget\" /y /s /q /EXCLUDE:exclude.txt
%SystemDrive%
cd "%LOCALAPPDATA%\Microsoft\Windows Sidebar\Gadgets\Velodoc.gadget\"
"%VS80COMNTOOLS%Bin\cabarc.exe" -r -p n "D:\Documents\Velodoc Sidebar Gadget\Velodoc.gadget" *
pause

Test and debugging

Testing and debugging is relatively easy, considering the logic is in the Flash applet. Simply double click the gadget file to install and test. There is no need to uninstall before a new install, provided the gadget is removed from the Sidebar.

Distribution

Once your gadget is ready, follow the instructions at http://gallery.live.com/submit.aspx to publish it on the Live web site.

Designing gadgets and widgets for uploading files to Memba Velodoc

Requirements

• A sender, a Receiver, a Subject, a Message, a File to upload and a checkbox to accept terms (see www.velodoc.net/login.aspx);
• A progress bar to monitor upload progress;
• A professional look & feel;
• To be developed in 3 to 5 days max.

Reference documentation

• http://windowssdk.msdn.microsoft.com
  /en-us/library/ms722795.aspx
• http://msdn.microsoft.com/library/default.asp?
  url=/library/en-us/sidebar/sidebar/overviews/gdo.asp
• http://microsoftgadgets.com/Sidebar/
  DevelopmentOverview.aspx
• http://www.microsoft.com/technet/scriptcenter/
  topics/vista/gadgets-pt1.mspx

Findings and impact on technologies
A windows sidebar gadget is a piece of DHTML hosted in the sidebar. Generally what you can do with DHTML can be done in a gadget.

There are limitations though, most of which are related to the browser security sandbox. Effectively a gadget is hosted locally, which has impacts on how it can communicate with remote web sites.

In particular, developing a file upload gadget with a progress bar in DHTML requires a cross-domain iFrame and scripting the iFrame in this case is forbidden. I have tried two nested iFrames which gives you scripting but the deepest iFrame opens in a new browser window instead of within the gadget. The only workaround I have found in half a day is to display the progress bar in a new browser window, but this does not look good and I was not prepared to lose more time.

So, I have considered XBAP WPF browser applications and although there is no File Upload control, I seem to have found the foundations for a file upload gadget here:

• http://blogs.msdn.com/mszcool/archive/2006/04/25/
  583317.aspx
• http://blogs.msdn.com/karstenj/archive/2006/10/04/
  WPF-Vista-Gadgets-_2D00_-Part-1_3A00_-Using-XBAP-and-IFRAME.aspx
• http://laurenlavoie.com/avalon/154
• http://www.codeproject.com/csharp/uploadfileex.asp

But WPF development is really early stage, development environment is primitive, documentation is lacking and I got worried about some warnings related to the sandbox that are mentioned in the literature quoted above.

In these circumstances, the only alternative was Macromedia Flash. I have even found a couple of examples running on the web. I have hosted them within an iFrame of a bespoke gadget and there I was: at the end of day one, I had my design and a fully functional (but ugly) prototype. Further documentation is available at:

• http://livedocs.macromedia.com/labs/as3preview/
  docs/00000142.html
• http://www.codeproject.com/aspnet/FlashUpload.asp
• http://markshu.ca/imm/flash/tutorial/fileReference.html