Adding custom DOM to the VS client script intellisense

Did you know that you can add your own document object model to Visual Studio client script intellisense? Here is how. The technique works in VS 2002 and VS 2003, but I will use VS 2005 for simplicity.

In order to provide client script intellisense we use JScript.dll and VBScript.dll that are exactly same engines that Internet Explorer and Windows Scripting Host employ. When you select target validation schema, HTML editor fetches client object model type library name from the vs:clientom attribute specified in the schema root element and adds it to the active scripting engine.

You will need MIDL compiler available in Platform SDK.

All type libraries we ship list document and window as top-level elements. This knowledge is hardcoded so there is no way to have, say, foo, as root element. Now let's create our own little type library.
In VS choose File | New | Visual C++ | IDL file. Or use your favorite text editor and type:

import "oaidl.idl";
import "ocidl.idl";

[
uuid(16cbf680-56fb-4af6-9cb7-1589f61b575d),
version(1.0),
helpstring("Test Object Model")
]
library Test
{
importlib("stdole2.tlb");

[ uuid(00000000-0000-0000-0000-000000000100) ]
coclass document {
[default] dispinterface DispDocument;
};

[ uuid(00000000-0000-0000-0002-000000000100), hidden ]
dispinterface DispDocument {
properties:
methods:
[id(1)] void method1([in] long x);
};
};

save file as test.idl. Compile it with MIDL from command line. You may have to specify include path to oaidl.idl and ocidl.idl. In VS 2003 they are in C:\Program Files\Microsoft Visual Studio .NET 2003\Vc7\PlatformSDK\Include. You should now have a new small test.tlb. Copy it to Program Files\Microsoft Visual Studio 8\Common7\Packages\Schemas\Html.

Now open one of the schemas in the Program Files\Microsoft Visual Studio 8\Common7\Packages\Schemas\Html (I'll use xhtm-transitional.xsd) in any text editor and change value of the vs:clientom attribute to test.tlb. Now Run Visual Studio (Or Visual Web Developer), create a new HTML page, add a client script block, switch validation schema to XHTML Transitional and in the script block type

document.

You should see intellisense dropdown with a single method1(int x) . Congradulations! You just created your very own client script intellisense schema. In my next post I'll show how to add events to the object.

You can get OleView utility that is available as sample project for VS 6.0. It should also be visible in the Tools menu in Visual Studio Standard and higher. You can use it to inspect type libraries that we ship.

1. Run OleView.
2. Click File | View TypeLib
3. Navigate to Program Files\Microsoft Visual Studio 8\Common7\Packages\Schemas\Html
4. Open w3c-dom1.tlb

You should see decompiled source for the selected type library. It does not contain comments, but it is very close to what the type library was compiled from. Browse it and you'll find basic interfaces like IArray, IString and more complex objects like DispHTMLWindow and such. You can choose File | Save As, save the IDL file somewhere, tweak it, compile it back to the TLB and drop it back to the schemas folder.

If you need to generate unique GUIDs (which is highly recommended if you want to create production-quality type library), you can use UUIDGen that is available in the VS 2003 Tools menu. It outputs new GUID in the Output window.There is also a version with GUI interface: Guidgen.