Browse files

create XBL binding to simulate application windows

  • Loading branch information...
1 parent c8f1740 commit 8891bdddaffad3bee090ae80187ac58d33732a77 Jason Johnston committed Dec 28, 2005
Showing with 171 additions and 48 deletions.
  1. +33 −48 Window-test.html
  2. +48 −0 Window.css
  3. +90 −0 Window.xml
View
81 Window-test.html
@@ -1,51 +1,36 @@
<html>
<head>
-<script type="text/javascript" src="IEtoW3C-loader.js"></script>
-<script type="text/javascript" src="Window.js"></script>
-<script type="text/javascript">
-
-window.addEventListener("load", function() {
- //From elements with class="window":
- Window.enableScriptSheet();
-
- //Title from element within content element:
- new Window(document.getElementById("one"), document.getElementById("one").getElementsByTagName("h1")[0], 200, 200, 20, 20);
+ <title>Test Window Binding</title>
- //Title from element outside content element:
- new Window(document.getElementById("two"), document.getElementById("twoTitle"), 300, 500, 300, 20);
+ <link rel="stylesheet" type="text/css" href="Window.css" />
- //Title from text not in document:
- new Window(document.getElementById("three"), document.createTextNode("Window Number Three"), 400, 200, 50, 530);
+ <script type="text/javascript" src="XBL.js"></script>
- //Completely script-generated:
- var cont = document.createElement("div");
- var ttl = document.createTextNode("Script-Generated Window");
- var txt = document.createTextNode("Programming Web Services with Perl is principally a book on implementing solutions using XML-RPC and SOAP in Perl. It also covers complementary and alternative standards such as WSDL, UDDI, and REST in some detail. And on the periphery, it finishes with a whirlwind tour of developing message routing, alternative data encoding within XML, security, transactions, workflow, internationalization, service discovery, extension, and management techniques and specifications.");
- cont.appendChild(txt);
- new Window(cont, ttl, 200, 200, 40, 240);
-}, false);
-
-</script>
-
-
-<style type="text/css">
-
-html, body {font-family:Verdana,Arial,sans-serif; font-size:12px;}
-.window-container {position:absolute; border:2px outset #FFF; background:#EEE;}
-.window-content {border:2px inset #FFF; overflow:auto; padding-left:4px;}
-.window-title-bar {margin:0; padding:.25em 1em; margin:0; background:#009; color:#FFF; font-weight:bold; cursor:default; white-space:nowrap; -moz-user-select:none;}
-.window-resizer {position:absolute; right:-5px; bottom:-5px; width:16px; height:16px; border:solid #666; border-width:0 1px 1px 0; cursor:se-resize;}
-
-h1 {font-size:1em; margin:0; padding:0;}
-
-</style>
+ <script type="text/javascript">
+ function createWindow() {
+ //Completely script-generated:
+ var cont = document.createElement("div");
+ cont.className = "window";
+ cont.title = "Dynamically Generated Content"
+ var txt = document.createTextNode("Programming Web Services with Perl is principally a book on implementing solutions using XML-RPC and SOAP in Perl. It also covers complementary and alternative standards such as WSDL, UDDI, and REST in some detail. And on the periphery, it finishes with a whirlwind tour of developing message routing, alternative data encoding within XML, security, transactions, workflow, internationalization, service discovery, extension, and management techniques and specifications.");
+ cont.appendChild(txt);
+ document.body.appendChild(cont);
+ };
+ </script>
+
+
+ <style type="text/css">
+ @import url(Window.css);
+
+ html, body {font-family:Verdana,Arial,sans-serif; font-size:12px;}
+ </style>
</head>
<body>
- <div id="one">
+ <div class="window" id="one" title="Window Number One">
<h1>Window Number One</h1>
<p>In the 13th day of the ground campaign, coalition forces are moving closer to Baghdad, said Maj. Gen. Stanley McChrystal. The Baghdad Division in Kut and the Medina Division of the Republican Guard, he said, are no longer "credible forces."</p>
<p>At the same time, both McChrystal and Pentagon spokeswoman Victoria Clarke stressed that the most difficult battles may yet unfold.</p>
@@ -59,15 +44,7 @@
<p>The 3rd Infantry's 1st and 3rd Brigades took Karbala with little effort, Army sources told Rodgers. The 1st Brigade faced only a few tanks and some mortars as it moved through town. The 3rd Brigade came in behind the 1st to secure the city. </p>
</div>
- <div class="window">
- <p>A statement attributed to Iraqi President Saddam Hussein was read on Iraqi television Wednesday, urging Iraqis to defend their towns. Saddam did not appear.</p>
- <p>"Victory is at hand, God willing, although we have only utilized a third or less of our army while the criminals have used everything they brought in," a statement read by an Iraqi television announcer said. "Their failure was manifested and victory is glowing, God willing."</p>
- <p>POW rescued; bodies found</p>
- <p>U.S. forces launched a pre-dawn raid Wednesday to rescue an Army prisoner of war, who was being held at a Nasiriya hospital used as an Iraqi military post.</p>
- </div>
-
- <h1 id="twoTitle">Window Number Two</h1>
- <div id="two">
+ <div class="window" id="two" title="Window Number Two">
<p>A statement attributed to Iraqi President Saddam Hussein was read on Iraqi television Wednesday, urging Iraqis to defend their towns. Saddam did not appear.</p>
<p>"Victory is at hand, God willing, although we have only utilized a third or less of our army while the criminals have used everything they brought in," a statement read by an Iraqi television announcer said. "Their failure was manifested and victory is glowing, God willing."</p>
<p>POW rescued; bodies found</p>
@@ -80,19 +57,27 @@ <h1 id="twoTitle">Window Number Two</h1>
</div>
<div class="window">
+ <p>A statement attributed to Iraqi President Saddam Hussein was read on Iraqi television Wednesday, urging Iraqis to defend their towns. Saddam did not appear.</p>
+ <p>"Victory is at hand, God willing, although we have only utilized a third or less of our army while the criminals have used everything they brought in," a statement read by an Iraqi television announcer said. "Their failure was manifested and victory is glowing, God willing."</p>
+ <p>POW rescued; bodies found</p>
+ <p>U.S. forces launched a pre-dawn raid Wednesday to rescue an Army prisoner of war, who was being held at a Nasiriya hospital used as an Iraqi military post.</p>
+ </div>
+
+ <div class="window">
<p>"For the enemy invaders of Iraq, it soon will get truly hot in here," Hussein said in the speech, which was televised worldwide Monday. "No amount of clothing removal will be sufficient to withstand the fiery inferno that awaits them on the battlefield."</p>
<p>Many U.S. officials have speculated that Saddam may have been killed or injured in the initial March 19 air attacks on Baghdad, suggesting that his subsequent televised speeches were recorded weeks or even months ago.</p>
<p>"The 'hot in here' line has definitely raised some eyebrows," CIA director George Tenet said. "However, this may not prove anything: Even though that song is nine months old, you still hear people referencing its chorus all the time. It's even in the new Chris Rock movie."</p>
</div>
- <div id="three">
- <p>LANGLEY, VAThe CIA announced Monday that it suspects Saddam Hussein's latest televised address was pre-recorded, pointing to its suspiciously dated reference to Nelly's "Hot In Herre," a rap hit from the summer of 2002.</p>
+ <div id="three" class="window" title="Window Number Three">
+ <p>LANGLEY, VA The CIA announced Monday that it suspects Saddam Hussein's latest televised address was pre-recorded, pointing to its suspiciously dated reference to Nelly's "Hot In Herre," a rap hit from the summer of 2002.</p>
<p>Above: In a message believed to be pre-taped, Saddam warns the U.S. about rising heat levels in Iraq.</p>
<p>"For the enemy invaders of Iraq, it soon will get truly hot in here," Hussein said in the speech, which was televised worldwide Monday. "No amount of clothing removal will be sufficient to withstand the fiery inferno that awaits them on the battlefield."</p>
<p>Many U.S. officials have speculated that Saddam may have been killed or injured in the initial March 19 air attacks on Baghdad, suggesting that his subsequent televised speeches were recorded weeks or even months ago.</p>
<p>"The 'hot in here' line has definitely raised some eyebrows," CIA director George Tenet said. "However, this may not prove anything: Even though that song is nine months old, you still hear people referencing its chorus all the time. It's even in the new Chris Rock movie."</p>
</div>
+ <p><input type="button" onclick="createWindow()" value="Create Window" /></p>
</body>
</html>
View
48 Window.css
@@ -0,0 +1,48 @@
+
+.window {
+ -moz-binding:url(Window.xml#Window);
+ position:absolute;
+ z-index:1;
+ width:200px;
+ height:200px;
+ border:2px outset #FFF;
+ background:#EEE;
+}
+
+.window-title-bar {
+ -moz-binding:url(Window.xml#WindowTitleBar);
+ margin:0;
+ height:1.3em;
+ padding:0 1em;
+ background:#009;
+ color:#FFF;
+ font-weight:bold;
+ cursor:default;
+ white-space:nowrap;
+ -moz-user-select:none;
+}
+
+.window-content {
+ border:2px inset #FFF;
+ overflow:auto;
+ padding-left:4px;
+ position:absolute;
+ top:1.3em;
+ left:0;
+ right:0;
+ bottom:0;
+ z-index:2;
+}
+
+.window-resizer {
+ -moz-binding:url(Window.xml#WindowResizer);
+ position:absolute;
+ right:-5px;
+ bottom:-5px;
+ width:16px;
+ height:16px;
+ z-index:1;
+ border:solid #666;
+ border-width:0 1px 1px 0;
+ cursor:se-resize;
+}
View
90 Window.xml
@@ -0,0 +1,90 @@
+<?xml version="1.0"?>
+<bindings xmlns="http://www.mozilla.org/xbl"
+ xmlns:xbl="http://www.mozilla.org/xbl"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+
+ <binding id="Window">
+ <handlers>
+ <handler event="mousedown">
+ // make z-index the highest by using the current time:
+ this.style.zIndex = new Date().getTime();
+ </handler>
+ </handlers>
+
+ <content>
+ <html:div class="window-title-bar" xbl:inherits="xbl:text=title"></html:div>
+ <html:div class="window-resizer" />
+ <html:div class="window-content">
+ <children />
+ </html:div>
+ </content>
+ </binding>
+
+ <binding id="WindowTitleBar">
+ <implementation>
+ <field name="dragging">false</field>
+ <field name="xOffset">0</field>
+ <field name="yOffset">0</field>
+
+ <method name="updatePosition">
+ <parameter name="event" />
+ <body><![CDATA[
+ var win = this.parentNode;
+ win.style.left = (event.clientX + document.body.scrollLeft - this.xOffset) + "px";
+ win.style.top = (event.clientY + document.body.scrollTop - this.yOffset) + "px";
+ ]]></body>
+ </method>
+ </implementation>
+ <handlers>
+ <handler event="mousedown">
+ this.xOffset = event.clientX + document.body.scrollLeft - parseFloat(getComputedStyle(this.parentNode, null).getPropertyValue("left"));
+ this.yOffset = event.clientY + document.body.scrollTop - parseFloat(getComputedStyle(this.parentNode, null).getPropertyValue("top"));
+
+ var thisRef = this;
+ var moveListener = function(event) {
+ thisRef.updatePosition(event);
+ };
+ var clearListener = function() {
+ window.removeEventListener("mousemove", moveListener, true);
+ window.removeEventListener("mouseup", clearListener, true);
+ };
+ window.addEventListener("mousemove", moveListener, true);
+ window.addEventListener("mouseup", clearListener, true);
+ </handler>
+ </handlers>
+ </binding>
+
+ <binding id="WindowResizer">
+ <implementation>
+ <field name="xStart">0</field>
+ <field name="yStart">0</field>
+
+ <method name="updateSize">
+ <parameter name="event" />
+ <body><![CDATA[
+ var winX = parseFloat(getComputedStyle(this.parentNode, null).getPropertyValue("left"));
+ var winY = parseFloat(getComputedStyle(this.parentNode, null).getPropertyValue("top"));
+
+ this.parentNode.style.width = (event.clientX + document.body.scrollLeft - winX) + "px";
+ this.parentNode.style.height = (event.clientY + document.body.scrollTop - winY) + "px";
+ ]]></body>
+ </method>
+ </implementation>
+
+ <handlers>
+ <handler event="mousedown">
+ var thisRef = this;
+ var moveListener = function(event) {
+ thisRef.updateSize(event);
+ };
+ var clearListener = function() {
+ window.removeEventListener("mousemove", moveListener, true);
+ window.removeEventListener("mouseup", clearListener, true);
+ };
+ window.addEventListener("mousemove", moveListener, true);
+ window.addEventListener("mouseup", clearListener, true);
+ </handler>
+ </handlers>
+ </binding>
+
+</bindings>

0 comments on commit 8891bdd

Please sign in to comment.