Example Sticky Notes

  • Revision slug: XBL/XBL_1.0_Reference/Example_Sticky_Notes
  • Revision title: Example Sticky Notes
  • Revision id: 165342
  • Created:
  • Creator: V K
  • Is current revision? No
  • Comment /* notes.xml */

Revision Content

notes.html

All parts are made and commented by VK {{mediawiki.external('schools_ring@yahoo.com')}}. All rights are given to the world.

View this example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//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;
}
h2 {
 font-size: 1.2em;
}
/* 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="http://www.w3.org/Icons/valid-html401"
  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 (is 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 anu 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;
}

View this example

Revision Source

<p>
</p>
<h2 name="notes.html">notes.html</h2>
<p>All parts are made and commented by VK {{mediawiki.external('schools_ring@yahoo.com')}}. All rights are given to the world.
</p><p><a class="external" href="http://www.nskom.com/external/xbl/notes.html">View this example</a>
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
 "http://www.w3.org/TR/html401/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;XBL Demo : Sticky Notes&lt;/title&gt;
&lt;meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1"&gt;
&lt;style type="text/css"&gt;
body {
 background-color: #FFFFFF;
 color: #000000;
 font: 1em Verdana, sans-serif;
}
h1 {
 font-size: 1.5em;
}
h2 {
 font-size: 1.2em;
}
/* Binding: */
.sticker {
 -moz-binding: url(notes.xml#default);
}
&lt;/style&gt; 
&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt;&lt;a href="http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference"&gt;XBL&lt;/a&gt; Demo :
    Sticky Notes&lt;/h1&gt;


&lt;div class="sticker"&gt;&lt;p&gt;ACME, Inc. fax - respond today.&lt;/p&gt;&lt;/div&gt;

&lt;div class="sticker"&gt;&lt;p&gt;Don't forget the eggs!&lt;/p&gt;&lt;/div&gt;

&lt;div class="sticker"&gt;&lt;p&gt;The new project - who's on charge?&lt;/p&gt;&lt;/div&gt;

&lt;div class="sticker"&gt;&lt;p&gt;Learn more about XBL.&lt;/p&gt;&lt;/div&gt;


&lt;p style="clear: left"&gt;&lt;a 
  href="http://validator.w3.org/check?uri=referer"&gt;&lt;img 
  src="http://www.w3.org/Icons/valid-html401"
  width="88" height="31"
  alt="Valid HTML 4.01"
  style="border: 1px none"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 name="notes.xml">notes.xml</h2>
<pre>&lt;?xml version="1.0"?&gt;

&lt;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"&gt;

&lt;!--
 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.
--&gt;



&lt;binding id="default"&gt;
&lt;!--
 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).
--&gt;


&lt;resources&gt;
&lt;!--
 Obtaining the stylesheet we'll use
 to (re)style the bound element.
--&gt;
 &lt;stylesheet src="notes.css"/&gt;
&lt;/resources&gt;



&lt;content&gt;
&lt;!--
 This SVG graphics will be added automatically around each bound element.
 The position of the original content is indicated by &lt;children/&gt; tag.
--&gt;
 &lt;svg:svg width="60px" height="60px"&gt;
  &lt;svg:g fill-opacity="0.6" stroke="#FFFFFF" stroke-width="1px"&gt;
   &lt;svg:circle cx="25px" cy="12px" r="12" fill="#FF0000" transform="translate(0,0)"/&gt;
   &lt;svg:circle cx="25px" cy="12px" r="12" fill="#00FF00" transform="translate(7,12)"/&gt;
   &lt;svg:circle cx="25px" cy="12px" r="12" fill="#0000FF" transform="translate(-7,12)"/&gt;
  &lt;/svg:g&gt;
 &lt;/svg:svg&gt;
 &lt;children/&gt;
&lt;/content&gt;



&lt;implementation&gt;
&lt;!--
 Here and futher CDATA wrappers around JavaScript code
 are not mandatory but recommended. This way you protect
 yourselve from &lt; and &gt; 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.
--&gt;



&lt;constructor&gt;&lt;![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

]]&gt;&lt;/constructor&gt;



&lt;destructor&gt;&lt;![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

]]&gt;&lt;/destructor&gt;



&lt;field name="priority"&gt;&lt;![CDATA[
/**
 * New "real" property for the bound element.
 * Within this block the content is interpreted
 * as JavaScript code. The result of this code
 * evaluation (is any) will be used as initial value.
 */

 "normal";

]]&gt;&lt;/field&gt;



&lt;property name="innerText"&gt;
&lt;!--
 New "virtual" property for the bound element.
 Unlike &lt;field&gt; 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.
--&gt;

&lt;getter&gt;&lt;![CDATA[
 var st = this.innerHTML || '';
 if (st != '') {
  var re = /&lt;\/?[^&gt;]+&gt;/gi;
  return st.replace(re,'');
 }
 else {
  return '';
 }
]]&gt;&lt;/getter&gt;

&lt;setter&gt;&lt;![CDATA[
 // "val" in setter contains the assignment value.
 // Here we simply echoing it back:
 return val;
]]&gt;&lt;/setter&gt;

&lt;/property&gt;



&lt;method name="setBorder"&gt;
&lt;!--
 New method for the bound element.
 Unlike virtual property it is called in
 function context: this.setBorder(arg)
 You also may define anu amount of named arguments
 using &lt;parameter name="argumentName"/&gt;
--&gt;
 &lt;parameter name="arg"/&gt;
 &lt;body&gt;&lt;![CDATA[

 this.style.border = arg;

 ]]&gt;&lt;/body&gt;
&lt;/method&gt;



&lt;/implementation&gt;



&lt;handlers&gt;
&lt;!--
 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.
--&gt;



&lt;handler event="click"&gt;&lt;![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);
]]&gt;&lt;/handler&gt;



&lt;handler event="mouseover"&gt;&lt;![CDATA[
 this.$bg = this.style.backgroundColor || '#FFFF00';
 this.style.backgroundColor = '#FFCC00';
]]&gt;&lt;/handler&gt;



&lt;handler event="mouseout"&gt;&lt;![CDATA[
 this.style.backgroundColor = this.$bg;
]]&gt;&lt;/handler&gt;


&lt;/handlers&gt;



 &lt;/binding&gt;
&lt;/bindings&gt;
</pre>
<h2 name="notes.css">notes.css</h2>
<pre>.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;
}
</pre>
<p><a class="external" href="http://www.nskom.com/external/xbl/notes.html">View this example</a>
</p>
Revert to this revision