Jonas Follesø profile picture

Jonas Follesø

Software Developer

JavaScript IntelliSense for the Vista Sidebar Object Model

June 19th 2007

Jeff Atwood over at Coding Horror wrote a blog post about JavaScript being "The Lingua Franca of the Web". More and more developers are building fairly large object models and frameworks in JavaScript. Microsoft's own Ajax library is one example of this. The Dojo Toolkit is another. It looks like no matter where you turn, weather it's to Ajax web sites, Silverlight applications or Sidebar gadgets you're stuck with JavaScript as your programming language. It was about time Microsoft did something about the poor tool support for writing JavaScript in Visual Studio Orcas 2008.

The way Microsoft have solved the IntelliSense problem is really elegant. In order to do good IntelliSense you need a formal way to comment your code. You have to tell the IDE which parameters your functions expects and what they'll return back. The way you annotate your JavaScript to get IntelliSense in Visual Studio 2008 is by using Microsoft's all ready familiar XML commenting syntax (with a few twists). The next problem is that JavaScript is a scripting language (hence its name), so the IDE can't compile the code to do reflection. It has to interpret it dynamically. The problem is to figure out which other scripts will be loaded into scope by the time the script you're working is executed. When developing web apps you might have some inline JavaScript and other pieces in external JavaScript files. The way you hint to the IDE which scripts are loaded into scope is with a special "reference" comment. You tell Visual Studio which scripts you have "referenced" in your application. A simple example of this is included below. If you want a thorough introduction to the new JavaScript Doc commenting syntax in Visual Studio check out the post by Bertrand Le Roy from the ASP.NET team or this post by Scott Guthrie.

The next piece of the JavaScript IntelliSense puzzle is to figure out how to represent the object model in a clean way in the IntelliSense popup window. JavaScript don't have any built in structures for interfaces, events, properties, name spaces, classes and methods; things we take for granted in the .NET framework and other object oriented programming languages. How ever JavaScript do support many object oriented programming concepts, and in the later years this have been exploited to the full extend by developers to build fairly complex object models. Ray Djajadinata wrote an excellent article for the May 2007 issue of MSDN Magazine on how to "Create Advanced Web Applications With Object-Oriented Techniques". In his article he discuss how to use object-oriented techniques to build more manageable and better scripts for your web applications.

After reading the article I figured I'd give the new JavaScript functionality in Visual Studio 2008 a go and build my own object model in JavaScript. VS did a good job ad aiding me in my JavaScript development, but my JavaScript object model didn't turn out as nice as the Microsoft Ajax Library. I couldn't figure out how to arrange classes into name spaces, how to implement an interface and so fourth. But since Microsoft have open sourced the client side of their ASP.NET Ajax framework all I had to do was to take a quick peek at the source code to figure out how they where doing their magic. Turns out the Ajax team have built something they call the "Type class", which is a typing and reflection system for JavaScript extending the object-oriented programming functionality. Using the Type class you can add typing information about your JavaScript, and do things such as registering classes, namespaces, implement interfaces and use inheritance. Visual Studio 2008 understands this typing system, so that when it executes/interprets your script to provide you with IntelliSense it has the information needed to provide you with a familiar developer experience, with the same icons for namespaces, classes, methods, interfaces and so fourth.

After playing with the new JavaScript features in VS 2008 and seeing how easy it was to hand code JavaScript against the Ajax client libraries another large JavaScript API came to mind. The Vista Sidebar Object Model. I've previously blogged about development of Vista Sidebar Gadgets, and how to do some advanced stuff like .NET interoperability, so I'll skip the fundamentals. As part of the Sidebar Microsoft ships a Sidebar Object Model you can program against. This object model contains 25+ classes with a bunch of properties, methods and collections. Using the Sidebar Object Model you can do things like open file, get battery information, monitor network availability and so fourth. At the moment there is no tool support facilitating you when using the object model. You're pretty much stuck with the MSDN documentation. You'll find the structure and naming of the Sidebar Object Model quite familiar as a .NET developer, but you still have to check the reference to see which properties and methods each object supports. Microsoft haven't announced anything about better tool support for Sidebar Gadget development so I figured I might as well take matters into my own hands.

 SidebarIntellisense.gif 

Using the Microsoft Ajax client framework and the "typing system" provided by it I've stubbed out all the namespaces, classes, methods, collections and properties of the Sidebar Object Model. I've created a 700+ lines long JavaScript files containing nothing but an well commented (copy and paste from MSDN) object framework. So when you want IntelliSense for your Sidebar Gadget all you have to do is "add a reference" to the Sidebar.IntelliSense.js script file using the special commenting syntax described above. By including this reference comment Visual Studio 2008 will bring the Sidebar Object Model into scope when you're inside the editor. But if you don't include the Sidebar.IntelliSense.js file in a script tag in the gadget HTML file it won't affect your gadget at runtime. When you're ready to deploy your gadget you simply delete the IntelliSense script file from your gadget folder (it doesn't provide any runtime functionality anyway).

NB: The current state of the IntelliSense script is a proof of concept/prototype/sharing of an idea, and not a well tested replication of the Sidebar Object Model. If you use it and get runtime errors in your gadgets it probably means I've miss mapped some class or properties. If that's the case, just update the script your self, or drop me a comment on this post. If the gadget community picks up on this I might team up with fellow Regional Director Jeremy Boyd from New Zealand who have create a Visual Studio project template to kick-start your Sidebar Gadget development.

blog comments powered by Disqus