Using Live Clipboard, part 2

Concluding a look at the Live Clipboard Technical Introduction.

In the first part of this article, we covered the basic construction of the Live Clipboard control, identified the callback functions we needed to implement, and identified the files we needed to copy to our server. Those files were:-

The CSS File - the image urls in this file need to be updated to point to the copies on your server.
The Javascript File
The images: Selected & Unselected
And one of the sample data specifications, either hCal or hCard

The rest of this article covers the remaining steps to get a Live Clipboard control up and running on a web page, taking advantage of the hCard sample data specification. The first step is to include the CSS link and the Javascript files in the page header.

        <link href="http://YOUR_SERVER_PATH/webClipControl.css" type="text/css" rel="stylesheet" />
        <script src="http://YOUR_SERVER_PATH/script.js" type="text/javascript"></script>
        <script src="http://YOUR_SERVER_PATH/hCard.js" type="text/javascript"></script>

The next step is to add the DIV element to the page to hold the Live Clipboard control. We’re going to add two Live Clipboard Controls, so you can test the copy and paste functions. We'll also need container elements for the hCard data objects, along with a couple of basic styles to indicate the user’s selection. The CSS style information can be added to a stylesheet, included in the style attribute, or added to the page header.

       <style>
           .ControlContainer { position:  relative; overflow:hidden; float:left; width:32px; height:22px; padding:0px; }
           .hcardContainer { margin-left: 35px; }
           .selected { background-color: #FFCC66; }
       </style>

The HTML elements should be added to the body of the page.

       <div class="ControlContainer" id="webClipControl1"></div>
       <div class="hcardContainer" id="contactHcard1"></div>
       <div class="ControlContainer" id="webClipControl2"></div>
       <div class="hcardContainer" id="contactHcard2"></div>

Next up are the callback functions. The following block of Javascript from the technical introduction provides basic implementations and hooks up each of the four callbacks. It can just be copied and pasted directly into a <SCRIPT> block in your page header.

function MicroFormatObjectBinding(displayDiv, microFormatObject, inactiveStyleClassName, activeStyleClassName)
{
	var webClip;
	var self = this;

	this.updateDisplayAndWebClipData = function()
	{
		webClip = new LiveClipboardContent();
		displayDiv.innerHTML = microFormatObject.HTML;
		webClip.data.formats[0] = new DataFormat();
		webClip.data.formats[0].type = microFormatObject.formatType;
		webClip.data.formats[0].contentType = "application/xhtml+xml";
		webClip.data.formats[0].items = new Array(1);
		webClip.data.formats[0].items[0] = new DataItem();
		webClip.data.formats[0].items[0].data = microFormatObject.HTML;
	}

	this.onActive = function()
	{
		if (displayDiv.childNodes[0] && (displayDiv.childNodes[0].className ==
                     microFormatObject.formatRootClassName)) {
			displayDiv.className = activeStyleClassName;
                }
	}

	this.onInactive = function()
	{
		displayDiv.className = inactiveStyleClassName;
	}

	this.onCopy = function()
	{     
		return webClip;
	}

	this.onPaste = function(clipData)
	{
		for (var i = 0; i < clipData.data.formats.length; i++)
		{
			if ((clipData.data.formats[i].contentType = "application/xhtml+xml")
				&& (clipData.data.formats[i].type == microFormatObject.formatType) 
				&& (clipData.data.formats[i].items.length > 0) 
				&& (clipData.data.formats[i].items[0].data))
			{
				var hCardXmlString = clipData.data.formats[i].items[0].data;

				microFormatObject.initFromXmlString(hCardXmlString);
				self.updateDisplayAndWebClipData();
				// For now, just look at the first microFormatObject found.
				return;
			}
		}
                
		// No matching formats found -- this could mean cut/delete -- so clear the associated data.
		microFormatObject.clearProps();
		self.updateDisplayAndWebClipData();
	}            

	self.updateDisplayAndWebClipData();
}

All we need to do now is add a few lines of Javascript to activate the Live Clipboard controls. The remaining script should be added to a <SCRIPT> block near the end of your page body.

var hCard1 = new HCard("Gavin", "Bowman", "gb@oriador.com", null, 
     null, null, null, null, null, null, null, "1 Codesnipers Way", "Bluemond", "CS", "12345","Cyberspace");
var hCard2 = new HCard(null, null, null, null, null, null, null, null, null, null, null, null, null, 
     null, null, null);

[breaks inserted above to preserve the sanity and screens of our visitors - ed.]

Those first two lines represent the hCard data objects. One has been populated with some basic data, the second has been left empty to demonstrate copying and pasting. The inner workings and further properties of the hCard object can be found by digging into the hCard javascript file.

var contactBinding1 = new MicroFormatObjectBinding(document.getElementById("contactHcard1"), 
     hCard1, "hcardContainer", "hcardContainer selected");
var contactBinding2 = new MicroFormatObjectBinding(document.getElementById("contactHcard2"), 
     hCard2, "hcardContainer", "hcardContainer selected");

[breaks inserted above to preserve the sanity and screens of our visitors - ed.]

These lines build binding objects from the two hCards, linking them to the hCard container DIVs we created earlier and specifying the basic and selected CSS styles for the display elements. The MicroFormatObjectBinding object was defined in the Javascript block which we copied and pasted from the Technical Introduction.

var clipBoardControl1 = new WebClip(document.getElementById("webClipControl1"), contactBinding1.onCopy, 
     contactBinding1.onPaste, contactBinding1.onActive, contactBinding1.onInactive);
var clipBoardControl2 = new WebClip(document.getElementById("webClipControl2"), contactBinding1.onCopy, 
     contactBinding1.onPaste, contactBinding1.onActive, contactBinding1.onInactive);

[breaks inserted above to preserve the sanity and screens of our visitors - ed.]

Those final two lines activate the actual Live Clipboard control, passing in the container DIV we created, along with the callback implementations from the binding object.

With all of the Javascript and HTML in place, the page now has a functioning clipboard control. We can cut, copy and paste within our page, or to and from any other web page using the same hCard format. I’ve posted up my sample page here, and you can see the original Microsoft demo page here.

It’s obviously possible to go deeper with this, as we haven’t touched on the contents of the Javascript files we included, or fully examined the workings of the binding object. For now, though, I hope this shows the potential of the Live Clipboard concept, and how easy it is to add the functionality to your own site.