Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Using JavaScript to Create a Powerful GUI
Pages: 1, 2

Using System Colors Through CSS

The simplest way to use the above functions on your site is to call the functions in the onclick event handler for buttons labelled "bold", "italic", and "link." But that's not very exciting. Since we've already limited ourselves to IE/Win by the use of the selection object, we should take advantage of IE's ability to access user-defined system colors through CSS and to create dynamic buttons like we see in installed applications. Let's take a look at a style sheet that defines a toolbar, a button, and two states for the buttons: raised and pressed.



#toolbar 	{	
			margin: 0;
			padding: 0;
			width: 262px;
			background: buttonface;
			border-top: 1px solid buttonhighlight;
			border-left: 1px solid buttonhighlight;
			border-bottom: 1px solid buttonshadow;
			border-right: 1px solid buttonshadow;
			text-align:right;
		  	}
			
.button 	{
			background: buttonface; 
			border: 1px solid buttonface;
			margin: 1; 
			}
			
.raised		{ 
			border-top: 1px solid buttonhighlight;
			border-left: 1px solid buttonhighlight;
			border-bottom: 1px solid buttonshadow;
			border-right: 1px solid buttonshadow;
			background: buttonface;
			margin: 1;
			}
			
.pressed	{
			border-top: 1px solid buttonshadow;
			border-left: 1px solid buttonshadow;
			border-bottom: 1px solid buttonhighlight;
			border-right: 1px solid buttonhighlight;
			background: buttonface;
			margin: 1;
			}

You'll notice that three system color references are used in our style sheet: buttonface, buttonshadow, and buttonhighlight. By using buttonface as the background for both our toolbar and our buttons, we are able to achieve the same application interface look for a user as any other installed app. Creating borders with buttonshadow and buttonhighlight, we can give our buttons a 3D effect by writing some simple JavaScript functions. Of course, if you're more interested in matching the GUI to your site rather than to a user's browser, you could swap in the appropriate colors instead.

JavaScript to Change Button Styles

The following four functions are called by event handlers to change the className of our images on mouse events. It's possible to put the JavaScript inline (i.e. onmouseover="this.className='raised';"), but by breaking it out into a function, we leave the door open for additional functionality, such as image swapping.

function mouseover(el) {
  el.className = "raised";
}

function mouseout(el) {
  el.className = "button";
}

function mousedown(el) {
  el.className = "pressed";
}

function mouseup(el) {
  el.className = "raised";
}

Putting It All Together With HTML

Now all that remains is to put this all together with the HTML containing our toolbar, images, and text area:

<form name="my_form">
<div id="toolbar">
<img class="button" 
 onmouseover="mouseover(this);" 
 onmouseout="mouseout(this);" 
 onmousedown="mousedown(this);" 
 onmouseup="mouseup(this);" 
 onclick="format_sel('b');" 
 src="bold.gif" 
 width="16" height="16" 
 align="middle" 
 alt="click to make your selection bold">
<img class="button" 
 onmouseover="mouseover(this);" 
 onmouseout="mouseout(this);" 
 onmousedown="mousedown(this);" 
 onmouseup="mouseup(this);" 
 onclick="format_sel('i');" 
 src="italic.gif" 
 width="16" height="16" 
 align="middle" 
 alt="click to make your selection italic">
<img class="button" 
 onmouseover="mouseover(this);" 
 onmouseout="mouseout(this);" 
 onmousedown="mousedown(this);" 
 onmouseup="mouseup(this);" 
 onclick="insert_link();" 
 src="link.gif" 
 width="32" height="16" 
 align="middle" 
 alt="click to add a link"></div>
<textarea cols="30" rows="6" name="my_textarea"></textarea>
</form>

A div holds our three button images and to make things simple, and our function calls are located in the event handlers for the <img> tag. For our formatting functions, we pass a reference to the element to be restyled with the this keyword. To our format_sel() function, we pass the appropriate parameter, based on the formatting we want to apply (b for bold, i for italic).

Feel free to use the following images in your toolbar:

a bold button for the taking an italic button for the taking a link button for the taking

Conclusion

Of course, this is only one way to create a toolbar, and there are many other ways it can be done (you could avoid images altogether and format your "buttons" with CSS, for example). The functionality of your toolbar doesn't have to be limited to what we've done here. Using the W3C DOM, it's possible to change a document's styles on the fly (see Steve Champeon's article, Modifying Styles).

With DOM manipulation, you could build a Microsoft-Word-style toolbar to give a user the ability to customize nearly every aspect of the display: to change the font size or font of the document they're viewing, or to adjust the width of the columns they're reading without having to resize the browser window. Using CSS, JavaScript, and the DOM, it's possible to build robust application GUIs inside standards-compliant browsers. In my next article, we'll take a look at how to build more advanced GUI elements (such as drop-down and cascading menus and tabs), and how to use keystrokes to create shortcut keys for repetitive tasks.

Meg Hourihan is an independent Web consultant and freelance writer. She is a co-author of the book, We Blog: Publishing Online with Weblogs.


Return to the JavaScript and CSS DevCenter.