Category: Uncategorized

Looks like Microsoft is getting on the AJAX bandwagon, whether they like it or not. Scoble mentions a Microsoft Javascript library named ATLAS. CNET, Microsoft Watch and Information Week posted articles about ATLAS. Charles Fitzgerald is, again, the MS guy involved. Reading the articles, I can’t tell if Fitzgerald is excited about ATLAS/AJAX or just feels like its something MS needed to do to stay relevant in web development. Some quotes:

“People who do (AJAX development) are rocket scientists,” Fitzgerald said. “In some ways, this papers over the mess that is JavaScript development. It’s easy-to-build ‘spaghetti’ code.” [CNET]

“Microsoft is really the only company that spans the continuum, from the simplest Web client through he smartest client,” said Fitzgerald. [Microsoft Watch]

“We just needed the clever name” – like Ajax, Fitzgerald said, to explain the various things that developers have been able to do for almost a decade with Microsoft technologies. [Microsoft Watch]

Using Atlas, developers will be able to write Ajax apps that contain pre-written code to smooth over technical distinctions between Web browsers, and debug those apps with Microsoft-branded tools, says Charles Fitzgerald, a general manager at Microsoft. Using Ajax today, he says, “is a little bit of a hack.” [Information Week]

Here is what I think:

1. Microsoft invented the technologies now called AJAX, but moved away from browser based clients in favor of Windows based clients (Smart, Rich, Thick, Fat or otherwise).
2. The world of web development is quickly moving toward AJAX-style development. Microsoft is late and needs to make some mindshare.
3. Microsoft is a development tool vendor. They sell tools to make development easier, therefore, current AJAX development must be hard (rocket scientists need only apply) and messy.

Seems to me that many AJAX toolkits already exist. Many web applications are incorporating AJAX very quickly. Examples of AJAX range from simple enhancements to full blown applications, implemented by mere mortals.

This move does not seem in sync with Microsoft’s .NET/WebForms/Smart Client agenda. Therefore, I question whether their heart is in the initiative. On the other hand, Microsoft’s new RSS initiative (also connected to Fitzgerald) seems inline with current company agendas and has good backing inside and outside the company.

Update: Scott Isaacs of MSN Spaces and Scott Guthrie of ASP.NET have some good technical posts on AJAX.

Jeremy Zawodny’s Surprising User Expectations post and Jeff Atwood’s UI is Hard post draw attention to a big problem in software development: Developers rarely design good UI’s. I have come to the conclusion that UI design should be handled by people who understand how users think, interact and model problems. This is more of a human factors problem than a coding problem.

I am a big proponent of making usable software. It’s one of my crusades. Usability is not defined by developers, it is defined by users. We recently completed our second phase of usability testing on a new product. It’s always a learning experience watching regular people trying to use software. It can be frustrating when it’s software I helped to develop. To make better UI’s, developers need to appreciate the obstacles that confront users and try remove the obstacles. Usability testing and reading people like Cooper, Nielsen and Norman can give you a better perspective.

Here are a couple guidelines I compiled from my own experiences and from people smarter than me:

• Be flexible: Allow for multiple ways to get something done. Use main menus, toolbars, right-click menus, task panes and hyperlinks. This allows the user to choose the way most comfortable to them instead of forcing them to learn your way. Keep in mind that for any given user, the preferred method could change over time.
• Be explicit: Don’t force the user to guess or explore the UI. Use verbose captions, messages and explanations.
• Be proactive: Don’t wait until the user gets into trouble, keep the user from getting into trouble in the first place. Why wait until the end of a process to inform the user they made a mistake at the beginning?
• Be forgiving: Make it possible for a user to recover from an unwanted action. People make wrong choices. Recovering from a bad choice with most of your data intact is far better than being forced to recreate something from scratch.
• Be simple: Simple, focused screens and dialogs are easier to learn and allow users to get things done faster.
• Be consistent: Make use of the fact the users can learn how to do things. Don’t force them to re-learn how to do the same or similar things.

None of these points is revolutionary or even original. But it’s amazing how few applications implement them.

Jeff’s post has some good links to other articles that are worth checking out. He also brings up the concept of UI First development. I definitely agree that the UI should be given some focus early in the project. Unless your building an engine or library, the end-user is going to equate the UI with the software. If the UI is bad it won’t matter how good the code is behind the scenes.

Update: For those interested, a co-woker pointed me to another UI First design methodology at Human Factors International (HFI).

I wrote an MSHTML hosting article for the C++Builder Developer’s Journal. They decided to make the issue freely available. HTML and PDF versions are available.

John Montgomery and Jon Udell are having a discussion about AJAX and rich internet applications. Montgomery is trying to determine what all the fuss over AJAX is about. He played with some toolkits and is unimpressed. Why? He doesn’t see how AJAX can compete with Winforms/Webforms on user experience. John says:

Mostly, Jon’Â’s posts got me to thinking about why we (that’Â’s you and me -– Web users) are OK with degraded user experiences. I mean, for years we had great desktop applications to do things like calendaring and email and even mapping software. Then came the initial Web, where HTML 3.2 and some JavaScript meant that Web apps just couldn’Â’t be as nice as local apps. And now we’Â’re all very excited about things like Evite, Gmail, and Google maps. But compare Google Maps to Streets and Trips, which I did recently, and the experience with S&T is much better. Same with Outlook vs. Gmail (usually, anyway). Heck, most people read blogs through a Web browser, not an aggregator, even though aggregators are much more efficient.

So why do we let ourselves settle?

I think he is confusing user experience for rich widgets. Web-based applications can achieve a high level of user experience and usability without the need for complex widgets. Good web applications are simple, small and well focused to the task at hand. In fact, I always use the web versions of the applications he lists over the desktop versions.

As John points out, the web-style hyperlink approach, with few options and everything laid out in front of the user, is easy to learn and use. To me, this increases user experience, not degrade it. John also points out that content is more plentiful in web-based applications and users like getting content. So much so that he feels users are willing to give up a great UI if they can get great content. Why does a user want a great UI at all? Seems to me that users only really care about content (or data). I think usability experts like Nielsen and Cooper would say a great UI is a UI that allows users to complete tasks without getting in the way. The UI should not be centerstage.

Udell’s posts point out that AJAX systems have a tendency to allow users access to content they want in ways the web-UI did not anticipate. Also seeming to confirm my suspicion that users don’t care much for flashy UI’s, but graviate to applications that make it easy to extract and manipulate content. WebDAV and SOAP are not low-hurdle technologies, XmlHttpRequest seems to be. AJAX is a methodology for enhancing web application functionality, not for replicating desktop applications. People don’t want desktop applications running in the browser, didn’t Java teach us that?

Brian Jones, program manager on the Word team posted news about the new XML file formats in Office 12. I have posted a few times on XML file formats, so I am interested in what Office is doing. Some interesting points:

• Full fidelity. As good as the binary format.
• Compressed. Lots of file parts stored in a structured ZIP archive, similar to OpenDocument
• Fully documented. Whitepapers, documentation and XSD schemas.
• Robust. A lot less likely to get a corrupt file that can’t have pieces recovered.

IMO, the above points could be true for any product using an XML package format, but the fact that Office is doing it means millions of users can escape the data roach motel.

Scoble has more on Channel 9 as well as his own blog. Jones plans to link to whitepapers as soon as they become available on MSDN.

Granted, Office is following OpenDocument here, but this is a really good thing.

Hosting the WebBrowser in your application makes it easy to create slick-looking textual UI’s. HTML is a fairly expressive markup language and the results can be very professional with little difficulty. The graphical side is a little less impressive. Thankfully, SVG and VML (native support in the WebBrowser control) go a long way to fill the gap. Both have capabilities that blow away good old Win32 GDI drawing. Even so, there may be times that you wish you could grab an HDC for the WebBrowser control and start drawing on it. The WebBrowser control actually has a system built into it that allows you to do just that.

IHTMLPainter is part of a system in MSHTML called Binary Behaviors. Behaviors can do lots of cool stuff. Painters are a special kind of behavior called a rendering behavior. IHTMLPainter::Draw is called by MSHTML before or after the HTML content is rendered allowing you to draw below or above the content. MSHTML passes an HDC into method that you can use with any GDI or GDI+ drawing function. Basically, behaviors are COM objects that you implement and are associated with HTML elements, either in the HTML itself using CSS or progammatically using addBehavior. The MSDN has a nice tutorial on creating a rendering behavior that includes sample code.

It’s pretty fair to say that I’d like to change the way I write desktop applications. I am tired of the UI framework lockin that comes with traditional desktop development. I’ve posted a couple times about using DHTML+SVG to create a desktop application UI. I have been working on prototypes in DHTML+SVG, as well as Laszlo (server-less deployment is now available) and Xamlon (they have a cool new flash-based system in addition to the .NET system).

I am now focusing my attention on non-UI parts of desktop applications and how Web-like techniques could be applied. Desktop applications, large ones specifically, are usually composed of subsystems that are exposed to the user via a host client. IMO, it’s important to componentize these subsystems and get them to interact in a way that does not tightly couple them together. Sounds a lot like the definition of a Web service. One way of doing this in C++ is using abstract base classes as interfaces. I am beginning to find this method too object-oriented for my tastes. The sheer number of interfaces required to support the subsystem can be quite large. Interfaces usually cause a language lockin as well. C++ abstract base classes cannot be used very easily by other languages, unless your willing to completely wrap your interfaces with proxy code.

I am leaning more towards an XML services approach. Each subsystem would have a single entry point which would dispatch XML messages (in a RESTful sorta way) throughout the rest of the subsystem. This approach feels just like Web-based services and has the same kind of benefits. Just about any language can immediately start using the subsystem with minimal effort. The subsystem’s dispatch entry point could be made HTTP-aware and suddenly gain the benefits of a true Web service:

• Subsystems can be put on different machines.
• HTTP techniques can be used to increase scalability and robustness.
• Many different and special-use clients can be created which leverage the subsystem.

The kind of subsystems I am referring to include parsers, graph renders, expression evaluators, report generators, data converters and data analysis systems. These are examples of systems that should be made well-defined islands and have great potential for reuse. Instead, they are locked up into the UI client and can not be integrated into other solutions.

Here are a couple miscellaneous tips for using the WebBrowser while in design (edit) mode.

Setting Focus In Design Mode

With the WebBrowser control in design mode, there are times that focus (and the blinking cursor) are not set correctly. For example, with focus in the editor, ALT+TAB away from your application, and then back again. Focus may not be set back into the editor. Here is a simple way to fix it. Put this code in an event or message handler that gets called when your application is re-activated:

IHTMLDocument2* pHTMLDoc2 = ...;
IHTMLWindow2* pWindow = 0;
pHtmlDoc2->get_parentWindow(&spWindow);
if (pWindow) {
  pWindow->focus();
  pWindow->Release();
}

Unselecting Current Selection

IHTMLTxtRange has a method to easily select a range of text, but there is no simple method to unselect an existing text selection. Here is a simple way to do it:

IHTMLDocument2* pHTMLDoc2 = ...;
IHTMLSelectionObject* pSelection = 0;
pHTMLDoc2->get_selection(&pSelection);
if (pSelection) {
  IDispatch* pDispRange = 0;
  pSelection->createRange(&pDispRange);

  IHTMLTxtRange* pTxtRange = 0;
  pDispRange->QueryInterface(IID_IHTMLTxtRange, (void**)&pTxtRange);
  if (pTxtRange) {
    VARIANT_BOOL bSuccess;
    pTxtRange->execCommand(CComBSTR(L"Unselect"), VARIANT_FALSE, CComVariant(), &bSuccess);
    pTxtRange->Release();
  }
  pDispRange->Release();
  pSelection->Release();
}

I have been tinkering a lot lately with the concept of writing DHTML-based desktop applications running in a custom web browser. The custom browser would be made to look like the host shell of a standard Windows application with normal menus and toolbars. One of the pieces missing from DHTML applications in the past has been the lack of a graphics rendering system. Scalable Vector Graphics (SVG) fills this hole nicely. In fact, SVG will create graphics that rival any graphics library, desktop or otherwise. If you have not played with SVG, you owe it to yourself to have a look.

Besides static graphic rendering, SVG also builds on all the dynamic concepts in DHTML. SVG elements can have attached event handlers for mouse and keyboard events, among others. Javascript can be used to handle any of the events. SVG elements can also be animated very easily.

Currently, SVG is supported in MSHTML/WebBrowser via ActiveX viewers from Adobe and Corel. Mozilla/Firefox browsers will have native support sometime in 2005.

I think it is also worth mentioning the MSHTML/WebBrowser does support a native graphic markup language called Vector Markup Language (VML), which predates SVG and is very similar in design. If you want to natively support graphics (No ActiveX), you should consider VML.

Show Table Borders

This is a little feature like you find in MS Word. It will display table invisible borders in light gray color so you can see the structure of the table even if borders are turned off. The feature only works when the WebBrowser is in design mode. Since it’s an IOleCommandTarget editing command ID, it’s quite simple to use:

IHTMLDocument2* pDoc = ...;

// Turn on editor mode
pDoc->put_designMode(CComBSTR(L"on"));

// Execute some commands
IOleCommandTarget* pCmdTarget = 0;
hr = pDoc->QueryInterface(IID_IOleCommandTarget, (void**)&pCmdTarget);
if (SUCCEEDED(hr)) {
  pCmdTarget->Exec(&CGID_MSHTML, IDM_SHOWZEROBORDERATDESIGNTIME,
                   OLECMDEXECOPT_DONTPROMPTUSER, CComVariant(true), NULL);
  pCmdTarget->Release();
}

Note the MSDN lists editing ID’s separately from regular ID’s.

Use DIV for Paragraph Breaks

Normally, when you press ENTER in design mode, WebBrowser will insert a paragraph tag, <P>, as a break. This can create large amounts whitespace between paragraphs since <P> tags are rendered with more padding than a simple line break. You can setup a CSS class or a style change the padding or you could tell WebBrowser to use <DIV> tags instead. There are two ways I know of to get WebBrowser to use <DIV> tags:

• Use IDocHostUIHandler::GetHostInfo interface method. Look at the DOCHOSTUIFLAG_DIV_BLOCKDEFAULT flag.
• Place an empty <DIV /> tag in the HTML you load into WebBrowser before putting it into design mode. Like this:

  
  <HTML>
    <BODY>
      <DIV />
    </BODY>
  </HTML>