Skip to content

Commit

Permalink
create XBL binding to simulate application windows
Browse files Browse the repository at this point in the history
  • Loading branch information
Jason Johnston committed Dec 28, 2005
1 parent c8f1740 commit 8891bdd
Show file tree
Hide file tree
Showing 3 changed files with 171 additions and 48 deletions.
81 changes: 33 additions & 48 deletions Window-test.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -59,15 +44,7 @@ <h1>Window Number One</h1>
<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>
Expand All @@ -79,20 +56,28 @@ <h1 id="twoTitle">Window Number Two</h1>
<p>Central Command said 11 bodies also were discovered at the Nasiriya hospital. It's not clear if the bodies are those of U.S. soldiers. The military is trying to identify the bodies. </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>

<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, 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>
<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>
Expand Down
48 changes: 48 additions & 0 deletions Window.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
90 changes: 90 additions & 0 deletions Window.xml
View file
Original file line number Diff line number Diff line change
@@ -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.