One new feature in Windows 7 is that your desktop gadgets can be placed anywhere on your desktop (not just to the sidebar). I created a simple gadget that displays a map from ArcGIS Server using the ESRI JavaScript API.
Even though this example is really simple it is quite easy to think of areas where it can be useful to have a little gadget map application on the desktop that does something clever.
So this is how you create a gadget for Windows 7:
1. Open up this folder %USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets in Windows Explorer.
Note: you can either create a user gadgets or global computer gadgets. If you want to create the latter one you open up this location instead: %SYSTEM_ROOT%\Program Files\Windows Sidebar\Gadgets
2. Create a folder called MapGadget.gadget in the Gadgets folder:
3. Create a html file called MapGadget.html and paste in the following simple HTML code:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>Hello World</title>
<style type="text/css">
body
{
margin: 0;
width: 300px;
height: 300px;
font-family: verdana;
font-weight: bold;
font-size: 20px;
}
</style>
<link rel="stylesheet" type="text/css"
href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.4/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.4">
</script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
var map = new esri.Map("map");
var tiledMapServiceLayer = new
esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
map.addLayer(tiledMapServiceLayer);
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<div id="map" style="width:300px; height:300px; border:1px solid #000;"></div>
</body>
</html>
The code is just plain HTML/JavaScript code that adds a tiled ArcGIS Server mapservice to the page.
This code is just copied straight of the samples on ESRI resource center.
4. Create an XML file called gadget.xml and paste the following code:
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Map Gadget</name>
<version>1.0.0.0</version>
<author name="Erik Nyberg">
<info url="http://www.eriknyberg.net" />
</author>
<copyright>© Erik Nyberg.</copyright>
<description>Map Gadget is a simple example on how to create a map gadget.</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="MapGadget.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
This XML file is just containing information about the Gadget such as who wrote it, where to get icon from, where the html file is located etc.
5. This is all we have to do in order for it to work. Now we just need to add it to the desktop. So right click on the desktop and choose "Gadgets":
6. You should now see your gadget in the list and you can just drag it out anywhere you like on the desktop. Done!
You have all the map navigation controls here such as mouse scrolling, keyboard arrows etc. And it works performance wise very well on my computer as well.
This is just a simple example on how to get started writing a Gadget for Windows 7. You can go from here and do more advanced stuff like:
-Create a settings file so that the user can customize the gadget
-Obviously build more mapping functionality to the gadget (query data, track data etc)
-You should probably move the styling to an external css file and the scripts to an external JS file
-You can also use Silverlight in your gadget which is pretty cool!
-Add an icon to the gadget instead of the default one (this is very simple to do, look in the reference list below)
-Deal with permission/security
-Package and distribute your gadget
Find more information here:
MSDN – Windows Sidebar
MSDN - Gadget platform in Windows 7
MSDN – Part 1 tutorial
MSDN – Part 2 tutorial
MSDN – Part 3 tutorial
MSDN – User Experience Guidelines
ESRI – JavaScript API