Dr. GUI
November 3, 1997
Many of you, Dr. GUI is sure, have noticed that Microsoft has released Internet Explorer 4.0.
Many of you, Dr. GUI hopes, have downloaded it and are using it every day. The good doctor installed it, and he sure ain't goin' back: it makes his Web browsing experience much easier and faster.
You may have even found some cool pages that take advantage of the best that Internet Explorer 4.0 has to offer. You'll be seeing more and more of those: the new features are so compelling that you almost can't not use 'em. Sure, you'll still have to offer a version of your pages for down-level browsers, but the new features are so cool that it will, for the first time, be worth it. These features are far cooler than frames, and look at the number of sites that offer frames and non-frames versions.
Here's an example: check out the Dynamic HTML virtual jack-o-lantern at www.microsoft.com/ie/ie40/demos/pumpkin/pumpkin.htm. Then check out the rest of the demos there, including Asteroids at www.microsoft.com/ie/ie40/demos/asteroids.htm. Go ahead and play a game or two! And be sure to take a look at the source code—just select View Source from the Context (right-click) menu.
So, you're saying, "Uh, Doc—I'm not a Web developer. I don't run a Web site. I can barely spell HTML. What's all this coolness got to do with me?" Or maybe you're thinking, "Actually, I'm kinda jealous that I can't take advantage of all this coolness and ease-of-writing in <insert the name of your favorite programming language here>."
Be ye jealous no more: you can take advantage of Dynamic HTML in your Visual C++, Visual Basic, and Java applications. All you have to do is embed Internet Explorer 4.0 into your application as an ActiveX control, load up the control, and you're in business.
"So what?" you say. "I've been able to embed a web browser since Internet Explorer 3.0. And I've done it, when I wanted to embed Web browsing in my application. So what's so special about Dynamic HTML?"
Dynamic HTML is not your grandmother's HTML. Now it's certainly true that, up until now, HTML hasn't given you a lot to be jealous over. Why, you couldn't even position images, text, and objects accurately! In terms of making a UI really good, the dialog editor makes old HTML look bad. (That is, unless you got a Ph.D. in HTML tables—then you might be able to do what you want. So it was pretty well unthinkable to do your UI in HTML: who'd want their app to look as bad as a Web page?
Dynamic HTML is different. First, it supports to-the-pixel positioning and even layering of every element on the page. (Even better than the dialog box editor!) And it supports transparency. In short, if you can do it in Publisher or another desktop publishing program, you can do it in Dynamic HTML.
So even if all you were doing was a static layout of a dialog box, you'd benefit from using Dynamic HTML.
But wait! There's more! Download before midnight tonight, and Dynamic HTML will include even more: it will make julienne fries! It'll slice through a tin can, then cut a slightly over-ripe tomato into paper-thin slices.
Okay, you've guessed it: the good doctor is joking. Dr. GUI's just trying to boost Internet Explorer sales so he can get paid more. (Remember that the good doctor gets a cut of Internet Explorer profits. But he's starting to be concerned that he's not seen even the first check.)
Anyway, here's what's special about Dynamic HTML: it's dynamic. "Duh!," you say? Well, let the good doctor explain: you can change the style and/or content of any element of a Dynamic HTML page at any time with script. You can add 'em. You can remove 'em. You can hide 'em. You can change 'em. (Even the text on the page!) You can move 'em. You can change the font, change the color, apply filters and transition transitions (shades of PowerPoint!), rotate 'em, layer 'em, and even make virtual julienne fries out of 'em. (Your cholesterol count may vary.) And, of course, you can embed images, Java applets, ActiveX controls, and scriptlets (a new technology for making software components out of Dynamic HTML—see Bob Jervis's article, "Scriptlets: Reusable Objects for Web Authors."
Want a demo of using Dynamic HTML from inside an application? Fire up Internet Explorer 4.0 (if you're not using it to read this) and select About from the Help Menu.
C'mon, do it!
When was the last time you saw an About dialog box like that? This wasn't hard to do—the programming was much simpler than if you'd tried to do this. Be sure to click on the Copyright Information link and play with it some.
So you've probably already figured out (or at least guessed) that what's dynamic about Dynamic HTML is that you can change anything at any time. But that's not nearly as important as the fact that Dynamic HTML represents a new way of conceptualizing HTML pages. Please let the good doctor explain.
In old HTML, HTML page authors and even the browser conceptualized the HTML page as a stream of text that described text, images, and objects. It also described, in a very limited fashion, how those elements were to be laid out on the page. The page was a very sequential kind of thing. And, as we've mentioned before, once it was loaded into the browser it couldn't change much (aside from animated GIFs).
Dynamic HTML reads the same sort of HTML code as old HTML did. So all of your old HTML pages still work. And, in fact, Dynamic HTML adds no new tags to previous versions of HTML.
So what's different? Well, Dynamic HTML makes major additions to the old HTML object model. In fact, it now makes sense to think of a Dynamic HTML page as a collection of objects and collections, since that's exactly what it is when it's in the browser. In other words, the browser parses the still-linear Dynamic HTML text stream and creates an in-memory representation of a set of collections of objects.
Old HTML also had some collections. What's new is that everything is now a part of the object model, and everything can have its style and/or content modified. The relationships between the objects are described by the document object model (or DOM). See it at http://msdn.microsoft.com/workshop/author/dom/domoverview.asp.
So although a Dynamic HTML page is still a stream of text, once it's inside the browser it's really a collection of objects! So if you've ever programmed for any object model, you'll have a leg up on the Dynamic HTML object model.
Now that you've got access to all the objects, you can manipulate them (as described above) using script in your Dynamic HTML page.
But if I'm an application using the browser control, what do I do? Here's the good news: the document object model is exposed to the container of the browser. That means that you can do anything from your container application that you can from script! In addition, your container can extend the document object model. I don't want to go into the details here, but there are excellent papers and samples in the Internet Client SDK. Be especially sure to check out "Programming the Document Object Model from C/C++," located at http://msdn.microsoft.com/workshop/browser/mshtml/mshtml.asp, and the Web page http://msdn.microsoft.com/workshop/c-frame.htm?924637928340#/workshop/browser/default.asp, from which you can find information about reusing the WebBrowser and MSHTML.
There are two other key advantages to using Dynamic HTML for user interfaces.
First, Dynamic HTML makes a great UI prototyping language—perhaps more powerful and easy-to-use than Visual Basic, for instance. And if you prototype and implement in Dynamic HTML, that means that you can use your prototyping code without rewriting. Dr. GUI calls it "write once, use everywhere."
Second, you may already have UI designers, Web page designers, or Web development engineers who already know HTML or maybe even Dynamic HTML. If so, they can perhaps be added to your development team, specializing in the UI of your product.
Note that Dynamic HTML is even more powerful when you use it with data binding—binding HTML elements to fields in a database. For an excellent demo, check out the Dynamic HTML Reference at http://rapid.wrox.co.uk/books/0707/WroxRefDB/wroxdhtm.htm.
If you'd like your applications to look and work better with less effort, here's what Dr. GUI prescribes:
In addition to the information in the Internet Client SDK, there are good books from WROX and Microsoft Press. Also, check out the really cool demos at http://rapid.wrox.co.uk/books/0685. Be sure to try out the Tetris-like game and the Jigsaw puzzle—all in HTML.