The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

'Rich' web UI

I want to make a 'rich' UI for a web application, where by "rich" I mean that I want to let the user do any of several things to various XHTML elements which are embedded in the rendered page.

For example, given a displayed list of hyperlink items, the user should be able to rename or delete an item, or display the item's properties; or, simply click on the item to treat it as a hyperlink.

In a desktop application you might implement these extra actions with a right-click (or Ctrl-click).

In a web application, I could use the CSS :hover pseudo-class to pop a context menu when the user "hovers" over the element. The problem with this is that the user will mostly be selecting / left-clicking on items, and having a :hover popup every time the user's mouse even passes over the item would be distracting and annoying.

a) Acting on an event like right-click or Ctrl-click seems to require JavaScript rather than pure CSS. Is there a way to do this (react to mouse events) without JavaScript?

b) Another possibility is to have some little icon next to each item for which a context menu is available, and use :hover for that little icon to display the popup menu.

I'd welcome any other suggestions. Also, if a) and b) are the only two options, which is better?
Christopher Wells Send private email
Tuesday, October 09, 2007
If you really want to make a rich UI for a web app, better get used to a good javascript framework now.
Ruatara P Send private email
Tuesday, October 09, 2007
Or use the Google Web Toolkit ... you program in Java with widgets similar to swing, and GWT compiles cross-platform JavaScript.  If your back-end is a servlet container, there are easy tools for making XMLHTTPRequest calls too.

I was a skeptic, but after using it for a while, I'm coming around.
Tuesday, October 09, 2007
I suppose you're right. Mouse events come from the DOM, and I see nothing better that :hover even in CSS 3.

"XML Events" suggests that event listeners are either <script> elements, or the <onevent> elements from WML.

HTML 5 defines a contextmenu attribute.

What about from a UI perspective (regardless of how the markup is implemented):

* Are context menus used in web applications? If so do they replace the browser's built-in right-click menu, and isn't that a Bad Thing?

* Is there a nice-UI and/or standard alternative to using context menus?
Christopher Wells Send private email
Wednesday, October 10, 2007
Yeah, if you want "rich", you need javascript, as well as everything else you mentioned (CSS, DOM, etc).
Entries of Confusion Send private email
Wednesday, October 10, 2007
Forget HTML/css. Read this
Wednesday, October 10, 2007
You can also use Adobe's Flex (or I guess MS Silverlight) as an alternative to JavaScript.  It depends on the class of user, the problem domain you are attempting to resolve, and the actual components or elements you are looking to create the extra, sophisticated level of UI for.

Most things will have more than one answer - it is the answers to the above that should let you experiment with one of them.
Christopher M. Holmes Send private email
Sunday, October 14, 2007

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
Powered by FogBugz