Using Live Clipboard, part 1

Last week, I was talking about Live Clipboard, and how it was well worth investigating. Now I’m taking a closer look at the technical introduction, to see how it works, and find out how easy it is to add to a page.

One of the great things about Live Clipboard is that it uses standard HTML, CSS and Javascript, and can already be used in existing browsers. That means that you could take advantage of the functionality within your own website, using only the currently published code. You will have to change your site at a later date for external compatibility, as it will take a while for the standard to take off, and I’m sure the objects and the xml standards will change.

The technical intro includes links to the four files that are required to enable Live Clipboard:-

The CSS File
The Javascript File
The images: Selected & Unselected

You should copy those to an appropriate place on your server, and update the image urls in the CSS file to point to your copies. Additionally, the Javascript for the hCal and hCard data specifications used in the Live Clipboard demos are available.

The Live Clipboard UI control that will be added to the webpage starts with a DIV element. The web developer gives the DIV a unique ID, and the CSS class which assigns the Live Clipboard icon as the background image. When the control is activated and hooked up to the data with a few of lines of Javascript, the code in the included script file will put a transparent input control inside the DIV. The focus events of this input control will be used to give the control a clicked appearance, and prepare the data for the clipboard. The formatted data is then placed inside the input control and selected. This means that the browser’s standard copy and paste context menu or shortcut keys can be used to transfer the data to and from the clipboard.

Similarly, when the contents of the input control are changed via the standard Paste command, the control events are used to decipher the data on the clipboard, check for a recognised format, and take the appropriate action.

In the current implementation, the web developer gets four callback functions to respond to the Live Clipboard events. The Copy and Paste callbacks are required to get the data object to and from the page. The ControlSelected and ControlUnselected callbacks are optional, but can be used to update the page appearance to indicate what data will be copied.

To be continued....

Everything covered so far, and more information if you want to go further, can be found via the technical introduction.