Revision 165335 of Example Sticky Notes

  • Revision slug: XBL/XBL_1.0_Reference/Example_Sticky_Notes
  • Revision title: Example Sticky Notes
  • Revision id: 165335
  • Created:
  • Creator: Dasch
  • Is current revision? No
  • Comment /* notes.html */

Revision Content

notes.html

<html> 
  <head> 
    <style> 
      body {
	background-color: black;
	color: white;
	font-size: 10pt;
	font-family: Verdana;
      }

      .board {
	-moz-binding: url(notes.xml#board);
      }
    </style> 
    <title>Sticky Notes</title>
  <head> 
  <body> 
    <h1>Demo - Sticky Notes</h1> 
    <p>The following demo uses XBL to create a widget that functions
    as a board for PostIt notes. In this
    example, we create a binding that enables the user to define
    a board and to supply notes that can be dragged around on
    the board.</p>

    <div class="board" style="width: 600px; height: 600px;"> 
      <div flex="1" class="note" style="left: 5; top: 5">
	<div class="caption">Pre-Checkin Tests</div>
	<ul> 
	  <li>Compose and send mail.
	  <li>Read and sort mail.
	  <li>Bookmark a page.
	  <li>Send an instant message.
	  <p>
	    <font face="Jokerman" size="+1">
	      The Ones In Charge
	    </font>
	  </p>
	</ul> 
      </div> 

      <div class="note" style="left: 250; top: 200;">
	<div class="caption">Grocery Order</div>
	Apples, oranges, milk, orange juice, bread.
	<p>
	  <i>Don't forget the eggs!</i> 
	</p>
	<font face="Jokerman" size="+1">SWMBO</font>
      </div> 
    </div> 
  </body>
</html> 

notes.xml

<?xml version="1.0"?>  
<?xml-stylesheet href="notes.css"?>  
<bindings xmlns="http://www.mozilla.org/xbl"
  xmlns:html="http://www.w3.org/1999/xhtml">  
  <binding id="board" styleexplicitcontent="true"> 
    <implementation>
      <property name="dragging">
        null
      </property> 
      <property name="currX">
        0
      </property> 
      <property name="currY">
        0
      </property> 
    </implementation>
    <handlers>
      <handler event="mousedown">
        if (event.originalTarget.parentNode.className == 'caption') {
          this.dragging = event.originalTarget.parentNode.parentNode;
          this.currX = event.clientX;
          this.currY = event.clientY;
        }
    </handler> 
    <handler event="mouseup"> 
      this.dragging = null;
    </handler> 
    <handler event="mousemove"> 
      if (!this.dragging)
        return;

      deltaX = event.clientX - this.currX;
      deltaY = event.clientY - this.currY;
      leftV = parseInt(this.dragging.style.left);
      topV = parseInt(this.dragging.style.top);
      leftV += deltaX; topV += deltaY; if (leftV < 0) leftV = 0; 
      if (topV < 0) topV = 0;
      if (leftV > 390) leftV = 390;
      if (topV > 390) topV = 390;
      this.dragging.style.left = leftV;
      this.dragging.style.top = topV;
      this.currX = event.clientX;
      this.currY = event.clientY;
    </handler> 
  </handlers> 
</binding>  

notes.css

.board {
  background-color: #808080;
  position: relative;
}

.note {
  background-color      : #FFFFCC;
  border                : 1px outset #FFFFCC;
  color                 : #000000;
  font                  : smaller;
  padding               : 3px;
  width: 200px;
  height: 200px;
  position: absolute;
}

.caption {
  cursor: pointer; 
  font-weight: bold;
  background-color: #ccccaa;
}

View this example.

Revision Source

<p>
</p>
<h2 name="notes.html">notes.html</h2>
<pre>&lt;html&gt; 
  &lt;head&gt; 
    &lt;style&gt; 
      body {
	background-color: black;
	color: white;
	font-size: 10pt;
	font-family: Verdana;
      }

      .board {
	-moz-binding: url(notes.xml#board);
      }
    &lt;/style&gt; 
    &lt;title&gt;Sticky Notes&lt;/title&gt;
  &lt;head&gt; 
  &lt;body&gt; 
    &lt;h1&gt;Demo - Sticky Notes&lt;/h1&gt; 
    &lt;p&gt;The following demo uses XBL to create a widget that functions
    as a board for PostIt notes. In this
    example, we create a binding that enables the user to define
    a board and to supply notes that can be dragged around on
    the board.&lt;/p&gt;

    &lt;div class="board" style="width: 600px; height: 600px;"&gt; 
      &lt;div flex="1" class="note" style="left: 5; top: 5"&gt;
	&lt;div class="caption"&gt;Pre-Checkin Tests&lt;/div&gt;
	&lt;ul&gt; 
	  &lt;li&gt;Compose and send mail.
	  &lt;li&gt;Read and sort mail.
	  &lt;li&gt;Bookmark a page.
	  &lt;li&gt;Send an instant message.
	  &lt;p&gt;
	    &lt;font face="Jokerman" size="+1"&gt;
	      The Ones In Charge
	    &lt;/font&gt;
	  &lt;/p&gt;
	&lt;/ul&gt; 
      &lt;/div&gt; 

      &lt;div class="note" style="left: 250; top: 200;"&gt;
	&lt;div class="caption"&gt;Grocery Order&lt;/div&gt;
	Apples, oranges, milk, orange juice, bread.
	&lt;p&gt;
	  &lt;i&gt;Don't forget the eggs!&lt;/i&gt; 
	&lt;/p&gt;
	&lt;font face="Jokerman" size="+1"&gt;SWMBO&lt;/font&gt;
      &lt;/div&gt; 
    &lt;/div&gt; 
  &lt;/body&gt;
&lt;/html&gt; 
</pre>
<h2 name="notes.xml">notes.xml</h2>
<pre>&lt;?xml version="1.0"?&gt;  
&lt;?xml-stylesheet href="notes.css"?&gt;  
&lt;bindings xmlns="http://www.mozilla.org/xbl"
  xmlns:html="http://www.w3.org/1999/xhtml"&gt;  
  &lt;binding id="board" styleexplicitcontent="true"&gt; 
    &lt;implementation&gt;
      &lt;property name="dragging"&gt;
        null
      &lt;/property&gt; 
      &lt;property name="currX"&gt;
        0
      &lt;/property&gt; 
      &lt;property name="currY"&gt;
        0
      &lt;/property&gt; 
    &lt;/implementation&gt;
    &lt;handlers&gt;
      &lt;handler event="mousedown"&gt;
        if (event.originalTarget.parentNode.className == 'caption') {
          this.dragging = event.originalTarget.parentNode.parentNode;
          this.currX = event.clientX;
          this.currY = event.clientY;
        }
    &lt;/handler&gt; 
    &lt;handler event="mouseup"&gt; 
      this.dragging = null;
    &lt;/handler&gt; 
    &lt;handler event="mousemove"&gt; 
      if (!this.dragging)
        return;

      deltaX = event.clientX - this.currX;
      deltaY = event.clientY - this.currY;
      leftV = parseInt(this.dragging.style.left);
      topV = parseInt(this.dragging.style.top);
      leftV += deltaX; topV += deltaY; if (leftV &lt; 0) leftV = 0; 
      if (topV &lt; 0) topV = 0;
      if (leftV &gt; 390) leftV = 390;
      if (topV &gt; 390) topV = 390;
      this.dragging.style.left = leftV;
      this.dragging.style.top = topV;
      this.currX = event.clientX;
      this.currY = event.clientY;
    &lt;/handler&gt; 
  &lt;/handlers&gt; 
&lt;/binding&gt;  
</pre>
<h2 name="notes.css">notes.css</h2>
<pre>.board {
  background-color: #808080;
  position: relative;
}

.note {
  background-color      : #FFFFCC;
  border                : 1px outset #FFFFCC;
  color                 : #000000;
  font                  : smaller;
  padding               : 3px;
  width: 200px;
  height: 200px;
  position: absolute;
}

.caption {
  cursor: pointer; 
  font-weight: bold;
  background-color: #ccccaa;
}
</pre>
<p><a class="external" href="http://www.shadowland.org/xbl/test5/test.html">View this example</a>.
</p>
Revert to this revision