notes.html
All parts are made and commented by VK [schools_ring@yahoo.com]. All rights are given to the world.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>XBL Demo : Sticky Notes</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color: #FFFFFF;
color: #000000;
font: 1em Verdana, sans-serif;
}
h1 {
font-size: 1.5em;
}
/* Binding: */
.sticker {
-moz-binding: url(notes.xml#default);
}
</style>
</head>
<body>
<h1><a href="http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference">XBL</a> Demo :
Sticky Notes</h1>
<div class="sticker"><p>ACME, Inc. fax - respond today.</p></div>
<div class="sticker"><p>Don't forget the eggs!</p></div>
<div class="sticker"><p>The new project - who's on charge?</p></div>
<div class="sticker"><p>Learn more about XBL.</p></div>
<p style="clear: left"><a
href="http://validator.w3.org/check?uri=referer"><img
src="https://udn.realityripple.com/samples/e2/dd625ef1cd.png"
width="88" height="31"
alt="Valid HTML 4.01"
style="border: 1px none"></a></p>
</body>
</html>
notes.xml
<?xml version="1.0"?>
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!--
In above only XBL namespace declaration is mandatory.
The others are only needed if you plan to handle
XUL (XML User Interface Language) or/and
SVG (Scalable Vector Graphics) in your bindings;
xlink in XML also may come useful sometimes.
All namespaces above are supported by default and they
do not require any additional downloads or initializations.
-->
<binding id="default">
<!--
A separate binding. You add a binding file using -moz-binding
style rule and you address a particular binding by its ID:
-moz-binding: url(notes.xml#default)
This ID is local within the binding file (not visible in the
target document DOM tree).
-->
<resources>
<!--
Obtaining the stylesheet we'll use
to (re)style the bound element.
-->
<stylesheet src="notes.css"/>
</resources>
<content>
<!--
This SVG graphics will be added automatically around each bound element.
The position of the original content is indicated by <children/> tag.
-->
<svg:svg width="60px" height="60px">
<svg:g fill-opacity="0.6" stroke="#FFFFFF" stroke-width="1px">
<svg:circle cx="25px" cy="12px" r="12" fill="#FF0000" transform="translate(0,0)"/>
<svg:circle cx="25px" cy="12px" r="12" fill="#00FF00" transform="translate(7,12)"/>
<svg:circle cx="25px" cy="12px" r="12" fill="#0000FF" transform="translate(-7,12)"/>
</svg:g>
</svg:svg>
<children/>
</content>
<implementation>
<!--
Here and futher CDATA wrappers around JavaScript code
are not mandatory but recommended. This way you protect
yourselve from < and > signs breaking your XML layout.
It also speeds up the parsing as the engine doesn't go
through CDATA sections but simply skip on them.
-->
<constructor><![CDATA[
/**
* The code below will be called one time only after
* the binding is successfully prepared and bound.
* "this" in this context refers to the bound element.
*/
// your code goes here
]]></constructor>
<destructor><![CDATA[
/**
* The code below will be called one time only before
* binding is unbound. You cannot cancel this event,
* but you may accomplish some last minute clean up.
* "this" in this context refers to the bound element.
*/
// your code goes here
]]></destructor>
<field name="priority"><![CDATA[
/**
* New "real" property for the bound element.
* Within this block the content is interpreted
* as JavaScript code. The result of this code
* evaluation (if any) will be used as initial value.
*/
"normal";
]]></field>
<property name="innerText">
<!--
New "virtual" property for the bound element.
Unlike <field> these are really two functions
(getter and setter). Within the virtual properties
you cannot set or get the named property itself.
Say an attempt to assign this.innerText='something'
will lead to circular setter call and stack overflow.
-->
<getter><![CDATA[
var st = this.innerHTML || '';
if (st != '') {
var re = /<\/?[^>]+>/gi;
return st.replace(re,'');
}
else {
return '';
}
]]></getter>
<setter><![CDATA[
// "val" in setter contains the assignment value.
// Here we simply echoing it back:
return val;
]]></setter>
</property>
<method name="setBorder">
<!--
New method for the bound element.
Unlike virtual property it is called in
function context: this.setBorder(arg)
You also may define any amount of named arguments
using <parameter name="argumentName"/>
-->
<parameter name="arg"/>
<body><![CDATA[
this.style.border = arg;
]]></body>
</method>
</implementation>
<handlers>
<!--
Event handlers.
Mouse events sent to bindings are refactored, so
event.target / event.relatedTarget always points
to the bound element, even if it was originated
to/from a child.
-->
<handler event="click"><![CDATA[
if (this.priority == 'normal') {
this.priority = 'high';
this.setBorder('2px solid red');
}
else {
this.priority = 'normal';
this.setBorder('2px solid blue');
}
var str = this.innerText + '\n\n';
str+= ('On ' + event.type + ' priority set to: ' + this.priority);
window.alert(str);
]]></handler>
<handler event="mouseover"><![CDATA[
this.$bg = this.style.backgroundColor || '#FFFF00';
this.style.backgroundColor = '#FFCC00';
]]></handler>
<handler event="mouseout"><![CDATA[
this.style.backgroundColor = this.$bg;
]]></handler>
</handlers>
</binding>
</bindings>
notes.css
.sticker {
position: relative;
left: 0px;
right: 0px;
float: left;
clear: none;
width: 10em;
height: 10em;
overflow: visible;
margin: 1em 1em;
padding: 0.5em 0.5em;
border: 2px solid blue;
background-color: yellow;
font: 1em normal "Times New Roman",serif;
font-style: italic;
cursor: default;
}