« Part 2 | Part 4 »

Part 3 - How to dynamically create widgets using the DOM

Here's what our widgets will look like:

Widget Title Bar X
Widget Body (this is where the widget content is going to be placed)

The HTML code is simple:

<style>
.widget{
	width: 250px;
	min-height: 50px;
	border: 1px solid #CACACA;
	background-color: #FFFFEA;
</style>
...
<body>
<div id='id1' class='widget' style='width: 250px;'>
	<div id='wdrag' style='width: 100%; height: 16; background-color: #CCCCFF; border-bottom: 1px solid #CACACA;'>
		<table id='d' style='font-family: arial; font-size: 8pt;' width=100% cellpadding=0 cellspacing=0 border=0>
			<tr>
				<td align=left><span id='id1_title' style='padding-left: 5px;'>Widget Title Bar</span></td>
				<td align=right> <span style='padding-right: 5px;'>
				<a href='#' style='text-decoration: none;'><b>X</b></a></span></td>
			</tr>
		</table>
	</div>
	<div id='id1_content' style='padding: 5px; font-family: arial; font-size: 8pt; width: 100%'>
	Widget Body (this is where the widget content is going to be placed)</div>
</div>

Our widgets have two parts, the title bar and the body. The title bar contains an HREF ('X') that we will soon use to trigger the closing of the widget.

Now let's move on to dynamically adding a widget. Here is an example

Let's review the code: 

...
<input type=button value="Add widget" onclick="addWidget()"> 
<div id="widget1"></div>
...
<script language="JavaScript">
<!--

var counter=10;

function addWidget(){
	var ref=document.getElementById("widget1");		//find the place to add widget to
	var wid="id"+counter;		//create a unique ID for the widget
	counter++;
	var wstr="<div id='"+wid+"' class='widget' style='top: 130; left: 300; width: 250px;'>"+
		"<div id='wdrag' style='cursor: move; width: 100%; height: 16; "+
		"background-color: #CCCCFF; border-bottom: 1px solid #CACACA; '>"+
		"<table id='d' style='font-family: arial; font-size: 8pt;' width=100% cellpadding=0 cellspacing=0 border=0>"+
		"<tr><td ALIGN=left><span id='id1_title' style='padding-left: 5px;'>Widget Title Bar</span>"+
		"</td><td align=right> <span style='padding-right: 5px;'>" +
		"<a href=javascript:closeWidget('"+wid+"') style='text-decoration: none;'>"+
		"<b>X</b></a></span></td></tr></table></div>"+
		"<div id='id1_content' style='padding: 5px; font-family: arial; font-size: 8pt; width: 100%'>"+
		"Widget Body (this is where the widget content is going to be placed)</div></div>";
	ref.innerHTML+=wstr;	//place the widget on screen
}

function closeWidget(id){	
	var widget1=document.getElementById('widget1');
	var node=document.getElementById(id);
	widget1.removeChild(node);
}
//-->
</script>
...


First we add a button to the screen, and call the addWidget function when it is clicked. Next we define a DIV element with id 'widget1' that will serve as our container - this is where our widgets will be placed.

The addWidget Javascript function is simple: we get a reference to the container DIV element, create a string that contains the widget definitions (we simply write the HTML tags as a long string) and then we write it to the DIV element, causing the browser to add the widget to the screen.

Two things to note:

  1. To change the mouse cursor to the 'drag' icon when user hovers over the title bar, we add the 'cursor: move' CSS definition to the <div id='wdrag' style='cursor: move; width: 100%;... element. There are a number of different types of cursors you can specify.
  2. To call the closeWidget function, we added href=javascript:closeWidget('"+wid+"') to the 'X' HREF. wid is a unique ID for the widget, enabling the closeWidget function to close the correct widget.

The closeWidget Javascript function locates the DOM elements corresponding to the widget ID and 'widget1' (the container) and then removes the DOM elements that make up the widget from the DOM using the DOM's removeChild function.