Partilhar via

Adding custom DOM to the VS client script intellisense

  • Artigo

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.

Comments

  • Anonymous
    August 23, 2004
    Thanks for the tip, im glad this is so easy anyone can do it!

    Anyone with an advanced knowledge of com, idl, and inner workings of method signatures.

    Sure a lot of us do know this kinda stuff, but this just isnt easy enough.
  • Anonymous
    August 23, 2004
    :-)

    It is not that bad if you consider that 80% of that stuff is just a fancy decorations. Adding new objects, methods and events is just a matter of copy/paste.
  • Anonymous
    September 20, 2004
    maybe there is simpler solution.
    For the intellisense software, you can try FlashIME?
    http://www.d2ksoft.com

    BTW:
    It is Microsoft who invented IME technology more than ten years ago (google "GlobalIME").

    But seems Microsoft have not realized that their rich experience on IME will revolutionize Intellisense intead to make it a little *smarter"

  • Anonymous
    September 20, 2004
    VS intelisense design is very flexible, trust me :-) It is far beyond simple word matching. It is easy to make, say, CSS intellisense since CSS is basically property : value; syntax. It is more difficult to drive code intellisense such as

    A.B.C.D =

    at which point you need to figure out what D is and what kind of values it can accept. For HTML intellisense you have to fugure out context from HTML parse tree in order to show correct element children and not offer <BODY> inside <TD>.
  • Anonymous
    September 20, 2004
    Intellisense is great. But I have observed some conflicting ideas behind its design.

    The key question is what is the goal of intellisense's design?

    I think the answer is not better auto-completion.

    If the answer is better online help, I think intellisense should focus on displaying more context or even integrating MSDN into intellisense.

    If the answer is to help developer type more quickly, maybe Microsoft can learn from its own experience on IME.

    Same have happened in Microsoft's IMEs:
    Microsoft has developed Microsoft PINYIN IME (now version 5.0) which also try to achieve two goals (understand human languages and help people type more quickly)

    In tech view, it's interesting.

    In commericial view, Microsoft PINYIN IME is not the top three successful IMEs.

    Of course, if you have enough resource, things are different
  • Anonymous
    February 25, 2006
    Let's imagine that you want to add Internet Explorer 7 schema. Here what you need to do
    1. Copy Program...