Using JavaScript to Create a Powerful GUI

The majority of computer users are familiar with the Windows graphical user interface (GUI). Most people know how buttons, toolbars, and tabs work, based on their experience with Microsoft Word or their email client. But contrast the consistent interfaces of client applications with online applications, and you find nearly every site does it differently. A user needs to learn how to use each Web application from scratch. While many applications aren't particularly complicated, it can still be a frustrating experience for a user to always feel like a newbie, needing to relearn an app interface again and again.

By utilizing JavaScript and CSS to build standard client interface components in your online application or Web site, you can make it easier for your users to understand, at a single glance, what actions are available to them and how to accomplish their tasks. The result? A site or application with powerful functionality and users who feel more confident about their actions and are less likely to make mistakes.

Now perhaps you're saying, "I didn't know JavaScript could do that!" Or perhaps you've seen a toolbar, or something similar on another site, but you don't know how it was accomplished. In this article, I will discuss how to build a simple formatting toolbar (like you see in Microsoft Word) to add functionality to any Web site that allows for user feedback or comments via a <textarea>. The skills required to do so are working knowledge of HTML, CSS and JavaScript (nothing we'll get into this article will require advanced JS skills). And the benefits for users are great.

A Short Disclaimer

The code that follows uses the createRange() method of the selection object. Sadly, the selection object is only available for IE4+ users on Windows. Similar functionality should be available via the Document Object Model (DOM) (see DOM Level 2 Traversal and Range Specification) but the document.createRange() implementation is currently broken in Mozilla, specifically in its inability to manipulate text in an input element or textarea element. For further information, see Jeffrey Yates' excellent article, Using the W3C DOM Level 2 Range Object as Implemented by Mozilla. When this bug is fixed, it will be possible to write a version of the following toolbar code for Mozilla, Netscape 6+, and any other browsers running Gecko.

But don't let that stop you from implementing some of the ideas I'll discuss below. If many of your users are on IE4+/Windows, you can offer additional functionality today that can improve the look and experience of your Web site. (For assistance in determining what browser your visitors are using, see Danny Goodman's Object Detection article.)

Building a Simple Toolbar

Let's start by creating a simple toolbar to hold three buttons: a bold, an italic, and a link button. This toolbar is a nice way to add functionality to an existing text area. It allows users to add simple formatting to their entry without needing to know HTML to do so. Any site that allows user participation or feedback, from Yahoo! Message Boards and community sites like Slashdot or MetaFilter to weblogs utilizing comment features, can be enhanced with this toolbar.

Our toolbar can be broken into four areas of functionality:

• JavaScript functions to wrap HTML tags around selected text.
• Style sheet to customize look and feel of toolbar and buttons.
• JavaScript functions to respond to mouse events.
• HTML containing toolbar code, images, and form elements.

Let's start by examining the two functions that will handle the insertion of HTML into our <textarea>:

Using JavaScript to Manipulate Text Selections

function format_sel(v) {
  var str = document.selection.createRange().text;
  document.my_form.my_textarea.focus();
  var sel = document.selection.createRange();
  sel.text = "<" + v + ">" + str + "</" + v + ">";
  return;
}

We can use the createRange() method of the selection object to easily create a TextRange object of the current text selection. By accessing its property text, we retrieve the selected (highlighted) text in the <textarea>. This text is then assigned to a local variable. The next line, where we call focus() to our <textarea>, is very important, otherwise our changes could be written to another part of the page. Finally, we create another reference to our selected text and assign it a new value: that of our original selection, wrapped in the appropriate HTML.

function insert_link() {
  var str = document.selection.createRange().text;
  document.my_form.my_textarea.focus();
  var my_link = prompt("Enter URL:","http://");
  if (my_link != null) {
    var sel = document.selection.createRange();
	sel.text = "<a href=\"" + my_link + "\">" + str + "</a>";
  }
  return;
}

Our second function insert_link() is identical to format_sel() with the addition of the prompt() method to allow the user to input a value for the a href. Using the results of the prompt(), we can wrap the selected text with the code to create a link. Now that we have these functions, we can build all sorts of interfaces for our users. Let's take a look at a few examples.