Fog Creek Software
Discussion Board




Building HTML user interfaces TODAY

Avalon has WinFX.  We know that.  But what if I want a more modern way of building GUIs right *now*?  WinForms is out, because it's a stopgap measure, and quite honestly it's still clunky (just Visual Basic and Delphi all over again, but as the official way of doing things).

So where are the tools for building UIs with HTML or XML that I can use right now?  I want to be able to run things on my local machine and not have to put everything on a server first.

(I've spent a long time looking at UI building tools in the past, and I came to the conclusion back in 2002 that .net and WinForms were going to be the way.  But that was more out of frustration of not finding anything better, I think.  The slickest alternative I found was REBOL/View (http://www.rebol.com), but REBOL Technologies appears to have been in trouble for quite some time now.  Ten years ago the answer would have been TCL/Tk.)

Junkster
Thursday, June 17, 2004

notepad

muppet is now from madebymonkeys.net
Thursday, June 17, 2004

Yes,  I can edit HTML with notepad, but let's say I want to use HTML interfaces as a complete replacement for TCL/Tk.  This is easy to do if I write server-side software, but what about on a local machine?

Junkster
Thursday, June 17, 2004

XUL?

I dont know if the GRE is ready yet, but its basicly a standalone Gecko/Xul engine that can be scripted with Javascript.

Eric Debois
Thursday, June 17, 2004

A Form with the Browser control in it, that loads files from the local computer?

Wayne
Thursday, June 17, 2004

BTW, we use this technique at my company to provide custom interfaces for some of our clients and it works great.

As a matter of fact, if you set the HTML Body's background-color to "threedface" or "buttonface" it blends in with the actual windows form quit nicely and you never know the difference.

Also, you can expose internal private COM objects to the IE's scripting engine which allows javascript in the HTML to access data/methods of the windows form.

Wayne
Thursday, June 17, 2004

What specifically is the question? Creating Windows Forms interfaces from XML data files is not that hard, I've put together my own mini-XAML for that purpose that I'll be releasing shortly.

Making a visual designer for that format is quite another thing, though... I don't have one and don't plan to do one because I for one am comfortable with entering XML data (and the coordinate system is set up so that 1 unit equals the line height of the current font).

Chris Nahr
Thursday, June 17, 2004

Hosting IE w/ ActiveX is good for some situations, but it can turn into a real mess if you try to push it too hard.  I have a friend who works for a software company which chose this route for a large product.  Eventually they started needing to do crazy things like embedding IE into the ActiveX components embedded into the page rendered in IE embedded into the form (if that makes sense).  Evidently when you start embedding IE within itself too deeply, really strange bugs come to the surface.

Plus, I don't know about anyone else, but I hate building UI's with DHTML.  It's much too procedural, and supporting the multitude of browsers (and/or versions) out there can be a real headache.

I'm definately interested in XML-based WinForms generation techniques, at least for tedious work like data entry forms, but not specifically Avalon since that seems to be Longhorn-only.

Joe
Thursday, June 17, 2004

"What specifically is the question? Creating Windows Forms interfaces from XML data files is not that hard, I've put together my own mini-XAML for that purpose that I'll be releasing shortly."

The question is this:  I want to create user interfaces for Windows applications TODAY using HTML (or any kind of static XML specification).  I don't want to rely on WinForms or .net.  Cross-platform would be great, but not a requirement.  What do I do?

To clarify, let's say I want to write my own email client with a GUI.  This isn't to run on a server, like hotmail or gmail, but a local replacement for Outlook or Eudora.  If I don't use Java or WinForms or MFC or Win32 API calls--which is what Joel is proposing--then how do I create the GUI?

Junkster
Thursday, June 17, 2004

Huh. Well, I don't know if there's anything like that available today. The problem is the cross-platform issue. My mini-XAML was easy to write because I've simply mapped the WinForms controls names & properties to XML elements & attributes. Bang up a ton of switch/case statements, and you're done.

But you'd have to collect the GUI specs on all platforms you're interested in, identify the common GUI elements and their common attributes, and then write the implementation for all those platforms (that you need right now).

You wouldn't be able to use any controls or attributes that are not available on all platforms, though, and imposing a common layout would likely make your GUI look "weird" on some or all platforms. There isn't really a good solution to this problem.

Chris Nahr
Thursday, June 17, 2004

Actually, with a standard XML File format, you could then just build a "Renderer" for each platform that uses native widgets.

Wayne
Thursday, June 17, 2004

No, you couldn't. Figuring out why is left as an exercise to the reader.

Chris Nahr
Thursday, June 17, 2004

Okay, take cross platform out of the picture completely.  Now how do I create an HTML/XML user interface without using .net at all?

Junkster
Thursday, June 17, 2004

Actually, you would have to create a renderer for each GUI toolkit (Win32, GTK, etc), but that wouldn't solve the problem of mapping controls that aren't part of the lowest common denominator, nor the issue of funky looking forms.  Right?

As far as creating a GUI without .NET, you would do that the same way it was always done prior to .NET.  Win32, MFC, ATL...

Joe
Thursday, June 17, 2004

You can build XML defined UIs TODAY that will run on Windows (and Mac/Linux) with XUL.

http://www.xulplanet.com/

Mozilla/Firefox themselves are XUL applicaions. Download them and look at the source.

fool for python
Thursday, June 17, 2004

> <....> Now how do I create an HTML/XML
> user interface without using .net at all?

You use ATL's CAxWindow class to create a window.

Then you create an instance of the mshtml.dll HTML engine by creating the COM object CLSID_HTMLDocument, and hook it up to the CAxWindow host.

You can now shove HTML into the document object, and it will show up in your window.

To make it more XML-like, you need to create some custom tags, and implement some additional COM objects that implement IElementBehavior and IHTMLPainter. IElementBehavior allows your COM object to participate in events and stuff like that, IHTMLPainter allows you to participate in the rendering that the HTML engine does, for drawing custom controls and other stuff that is specific to your UI. If you don't need custom controls, then you can just use the normal built-in controls.

This is totally non cross-platform, these interfaces and extensions are specific to mshtml.dll . But you can do all of it without any .NET at all.

It takes quite a bit of practice to get really good at using things in this way, though - things are somewhat fussy and it is easy to run into problems since a lot of actions are asynchronous (in many circumstances you have to wait for certain events to fire before you should go in there and access stuff).

There are a lot of benefits too, though - you get to use a nice layout engine to arrange the text on your UI, you have an engine that can load the UI dynamically, supports multiple languages, etc... You get to use little snippets of script in the UI to help things out (like little bits of script to hide and show things are easy to encapsulate in the UI instead of having to do all of that in C++).

But don't expect to just get it going without investing quite a bit of time, there is a fair learning curve and several pitfalls that you can run into.

To get started, go to msdn and look up ATL, CAxWindow, IElementBehavior and IHTMLPainter.

Michael
Friday, June 18, 2004

> You can build XML defined UIs TODAY that
> will run on Windows (and Mac/Linux) with XUL.

Unfortunately, they don't provide any mechanism to do stuff like make custom rendered controls.

So it only works if you want to make an application that happens to use the exact same set of controls that they already have.

Most applications need to do a few customized things here and there.

I think that's the main reason why XUL hasn't taken off as a big application development platform.

Hopefully they will work on opening it up and providing a more flexible API that allows for stuff like that. That's they key for XUL to become useful.

It is kind of ironic that the closed-source Microsoft engine is enormously more open from a customization and flexibility API standpoint than the open source one.

Michael
Friday, June 18, 2004

"So it only works if you want to make an application that happens to use the exact same set of controls that they already have."

A common misconception. In fact most of the XUL controls are built using XBL. You can change them or create your own. And the appearance is all defined in CSS.

http://www.xulplanet.com/tutorials/xultu/introxbl.html

XUL/XBL is explicitly designed to allow developers to create custom controls.

Download Mozilla/Firefox and have a look at the code.  These apps are themselves built with XUL/XBL.

fool for python
Friday, June 18, 2004

...in fact, with XBL, you can bind to any XML or HRML elements to extend behavior.

fool for python
Friday, June 18, 2004

You also may want to check out XForms, an emerging standard that can be used to build HTML form based interfaces more easily and with some advantages over plain old HTML forms. For a quick overview, take a look at this FAQ:

http://www.w3.org/MarkUp/Forms/2003/xforms-faq.html

An article "Ten Favorite Engines" describes some ways XForms can be used today:

http://www.xml.com/pub/a/2003/09/10/xforms.html

Bob
Friday, June 18, 2004

> And the appearance is all defined in CSS.

You're not getting the point.

The problem is that CSS is also composed of a fixed number of attributes.

Let's say that in my application, I need to make a custom button that shows a big red X through it when some other part of the app is disabled.

Where is the CSS style to draw a big red X? I don't want to use a bitmap, I want to have it drawn with vectors using moveto/lineto type calls, so that it is resolution independent.

Because there isn't a CSS style to fit every single custom control scenario, I need a way to have custom code in my control access the drawing surface of the browser, so that I can draw lines and curves and text and whatever, in any way that I want.

True visual extensibility is enabled by providing programmatic access to the actual rendering code, not just by being able to arrange groups of existing controls with CSS attributes on them only.

Also, trying to make a larger UI where each control is composed of a large number of sub-elements leads to performance problems. Like trying to make a rounded button out of a table with 9 sub elements is not that great if you have a whole lot of them. The 9 sub-elements add additional parsing time, and cause the document's internal tree to become fat and complex. If you can have just one single element that knows how to draw itself with rounded borders accessing the direct drawing surface, you can then have a whole bunch of these and still keep the document tree nice and simple. This aids parsing and layout performance as well.

I can't use XUL for my client-side application development without the ability to create controls in this manner.

I hope that this gets added in the future, because 4 or 5 or 6 years down the road, I would rather switch to using XUL and being cross-platform, rather than jumping on Avalon. But XUL has a long way to go before it becomes flexible and extensible enough to use for non trivial apps.

Michael
Friday, June 18, 2004

Actually, non trivial isn't really the right term to use there.

I really mean that it has a long way to go if you need to create an application that uses controls that don't happen to look the same as what is used in their own browser application, or what is easily expressed in CSS.

Michael
Friday, June 18, 2004

Xul does not have vector drawing, but you can get a build of mozilla with SVG. My understainding is that while the SVG is in the same DOM as the document, it can't render over the document. I may be wrong....mozailla/svg folks?

The parsing time for XUL is also a misconseption. It is "compiled" to an intermediate binary form just like resource files and therefore loads vary fast at runtime.

See Neil Deakin:

http://www.xulplanet.com/ndeakin/archive/2003/2/17/

XUL/XBL/XPCOM....are not the right tool for every application but they are rapidly becoming a viable for more.

They need to get the GRE done.

fool for python
Friday, June 18, 2004

> The parsing time for XUL is also a misconseption.

That's good.

But no matter if a pre-parsed binary is cached or not, using a larger quantity of small elements to make up a single control is not as efficient as using a single element that has more intelligence built into it.

Like if you want to create a control that has several vertical lines in it, if you attempt to do it with CSS, you have to create additional child elements that have borders on them, etc.

Or there is the traditional 9-grid table thing to make buttons with rounded corners on them.

Things go slower when there are 9 objects to create instead of 1, 9 objects to calculate the layout for intead of 1, more memory is consumed, etc..  Especially if you're trying to make an application that has a relatively large number of these controls.

When you use an extensibility mechanism to create a new control that knows how to draw itself with rounded borders or whatever (as you can with mshtml.dll's IHTMLPainter interface), you can make each custom control into a single element in the DOM which is more streamlined and efficient across the board.

Michael
Friday, June 18, 2004

In Mozilla, you can specify rounded coreners for any boxlike objext with a CSS property like this:

-moz-border-radius: 10px;

fool for python
Saturday, June 19, 2004

*  Recent Topics

*  Fog Creek Home