Author: shane.bryzak(a)jboss.com
Date: 2009-08-26 04:05:50 -0400 (Wed, 26 Aug 2009)
New Revision: 11428
Modified:
sandbox/trunk/modules/xwidgets/examples/helloworld/index.html
sandbox/trunk/modules/xwidgets/examples/helloworld/test.xw
sandbox/trunk/modules/xwidgets/examples/helloworld/xw.Panel.js
sandbox/trunk/modules/xwidgets/src/main/javascript/xw.js
Log:
layout manager functionality
Modified: sandbox/trunk/modules/xwidgets/examples/helloworld/index.html
===================================================================
--- sandbox/trunk/modules/xwidgets/examples/helloworld/index.html 2009-08-26 02:34:26 UTC
(rev 11427)
+++ sandbox/trunk/modules/xwidgets/examples/helloworld/index.html 2009-08-26 08:05:50 UTC
(rev 11428)
@@ -2,7 +2,7 @@
<body style="background-color:#eeeeee">
<h1>Hello World Example</h1>
- <div id="container"></div>
+ <div id="container" style="border:1px solid
black;width:50%;height:50%"></div>
<script src="../../src/main/javascript/xw.js"></script>
Modified: sandbox/trunk/modules/xwidgets/examples/helloworld/test.xw
===================================================================
--- sandbox/trunk/modules/xwidgets/examples/helloworld/test.xw 2009-08-26 02:34:26 UTC
(rev 11427)
+++ sandbox/trunk/modules/xwidgets/examples/helloworld/test.xw 2009-08-26 08:05:50 UTC
(rev 11428)
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<view
xmlns="http://jboss.com/products/xwidgets">
- <panel>
+ <panel align="top" height="100">
<label value="Hello World!"/>
<button value="Click me!">
@@ -10,5 +10,24 @@
</action>
</event>
</button>
+ </panel>
+ <panel align="right" width="100">
+ <label value="right"/>
+ </panel>
+
+ <panel align="bottom" height="30">
+ <label value="bottom"/>
+ </panel>
+
+ <panel align="left" width="40">
+ <label value="left"/>
+ </panel>
+
+ <panel align="left" width="40">
+ <label value="left2"/>
+ </panel>
+
+ <panel align="client">
+ <label value="client"/>
</panel>
-</view>
\ No newline at end of file
+</view>
Modified: sandbox/trunk/modules/xwidgets/examples/helloworld/xw.Panel.js
===================================================================
--- sandbox/trunk/modules/xwidgets/examples/helloworld/xw.Panel.js 2009-08-26 02:34:26 UTC
(rev 11427)
+++ sandbox/trunk/modules/xwidgets/examples/helloworld/xw.Panel.js 2009-08-26 08:05:50 UTC
(rev 11428)
@@ -5,29 +5,53 @@
this.width = 200;
this.height = 100;
this.parent = null;
- this.control = null;
+ this.control = null;
+ this.align = null;
xw.controls.Panel.prototype.setParent = function(parent)
{
this.parent = parent;
+ }
+
+ xw.controls.Panel.prototype.setAlign = function(align)
+ {
+ this.align = align;
+ }
+
+ xw.controls.Panel.prototype.setWidth = function(width)
+ {
+ this.width = width;
+ }
+
+ xw.controls.Panel.prototype.setHeight = function(height)
+ {
+ this.height = height;
}
- xw.controls.Panel.prototype.paint = function()
+ xw.controls.Panel.prototype.paint = function(layout)
{
if (this.control == null)
{
this.control = document.createElement("div");
- this.control.widget = this;
- this.parent.control.appendChild(this.control);
-
- this.control.style.width = "400";
- this.control.style.height = "200";
-
+ this.control.widget = this;
this.control.style.backgroundColor = "#ece9d6";
this.control.style.borderTop = "1px solid white";
this.control.style.borderLeft = "1px solid white";
this.control.style.borderBottom = "1px solid #555555";
- this.control.style.borderRight = "1px solid #555555";
+ this.control.style.borderRight = "1px solid #555555";
+
+ if (layout != null)
+ {
+ layout.setBounds(this);
+ }
+ else
+ {
+ this.control.style.width = this.width;
+ this.control.style.height = this.height;
+ this.control.style.display = "inline";
+ }
+
+ this.parent.control.appendChild(this.control);
}
for (var i = 0; i < this.children.length; i++)
Modified: sandbox/trunk/modules/xwidgets/src/main/javascript/xw.js
===================================================================
--- sandbox/trunk/modules/xwidgets/src/main/javascript/xw.js 2009-08-26 02:34:26 UTC (rev
11427)
+++ sandbox/trunk/modules/xwidgets/src/main/javascript/xw.js 2009-08-26 08:05:50 UTC (rev
11428)
@@ -114,6 +114,82 @@
// really old browsers
// alert("your browser doesn't support adding event listeners");
}
+}
+
+/**
+ * A Map implementation
+ */
+xw.Map = function()
+{
+ this.elements = new Array();
+
+ xw.Map.prototype.size = function()
+ {
+ return this.elements.length;
+ }
+
+ xw.Map.prototype.isEmpty = function()
+ {
+ return this.elements.length == 0;
+ }
+
+ xw.Map.prototype.keySet = function()
+ {
+ var keySet = new Array();
+ for (var i = 0; i < this.elements.length; i++)
+ keySet[keySet.length] = this.elements[i].key;
+ return keySet;
+ }
+
+ xw.Map.prototype.values = function()
+ {
+ var values = new Array();
+ for (var i = 0; i < this.elements.length; i++)
+ values[values.length] = this.elements[i].value;
+ return values;
+ }
+
+ xw.Map.prototype.get = function(key)
+ {
+ for (var i = 0; i < this.elements.length; i++)
+ {
+ if (this.elements[i].key == key)
+ return this.elements[i].value;
+ }
+ return null;
+ }
+
+ xw.Map.prototype.put = function(key, value)
+ {
+ for (var i = 0; i < this.elements.length; i++)
+ {
+ if (this.elements[i].key == key)
+ {
+ this.elements[i].value = value;
+ return;
+ }
+ }
+ this.elements.push({key:key,value:value});
+ }
+
+ xw.Map.prototype.remove = function(key)
+ {
+ for (var i = 0; i < this.elements.length; i++)
+ {
+ if (this.elements[i].key == key)
+ this.elements.splice(i, 1);
+ }
+ }
+
+ xw.Map.prototype.contains = function(key)
+ {
+ for (var i = 0; i < this.elements.length; i++)
+ {
+ if (this.elements[i].key == key)
+ return true;
+ }
+ return false;
+ }
}
/**
@@ -389,20 +465,152 @@
}
}
+/**
+ * Defines the physical bounds of a control
+ */
+xw.Bounds = function(top, left, height, width)
+{
+ this.top = top;
+ this.left = left;
+ this.height = height;
+ this.width = width;
+ this.style = new Object();
+
+ xw.Bounds.prototype.getTop = function()
+ {
+ return this.top;
+ }
+
+ xw.Bounds.prototype.getLeft = function()
+ {
+ return this.left;
+ }
+
+ xw.Bounds.prototype.getHeight = function()
+ {
+ return this.height;
+ }
+
+ xw.Bounds.prototype.getWidth = function()
+ {
+ return this.width;
+ }
+
+ xw.Bounds.prototype.addStyleProperty = function(property, value)
+ {
+ this.style[property] = value;
+ return this;
+ }
+
+ xw.Bounds.prototype.applyToControl = function(control)
+ {
+ if (this.height != null) control.style.height = this.height;
+ if (this.width != null) control.style.width = this.width;
+ if (this.height != null) control.style.height = this.height;
+ if (this.width != null) control.style.width = this.width;
+ for (var i in this.style) control.style[i] = this.style[i];
+ }
+}
+
/** LAYOUT MANAGERS **/
xw.BorderLayout = function(container)
{
this.container = container;
+ this.bounds = new xw.Map();
xw.BorderLayout.prototype.layout = function()
- {
- for (var i = 0; i < container.children.length; i++)
+ {
+ this.container.control.style.position = "relative";
+ var topControls = new Array();
+ var bottomControls = new Array();
+ var leftControls = new Array();
+ var rightControls = new Array();
+ var clientControls = new Array();
+
+ for (var i = 0; i < this.container.children.length; i++)
+ {
+ var child = this.container.children[i];
+ if ("top" == child.align) topControls.push(child);
+ else if ("bottom" == child.align) bottomControls.push(child);
+ else if ("left" == child.align) leftControls.push(child);
+ else if ("right" == child.align) rightControls.push(child);
+ else if ("client" == child.align) clientControls.push(child);
+ }
+
+ var topSpace = 0;
+ var bottomSpace = 0;
+ var leftSpace = 0;
+ var rightSpace = 0;
+
+ // TODO - take border widths into account so we don't need all the +2's
everywhere
+
+ for (var i = 0; i < topControls.length; i++)
+ {
+ this.bounds.put(topControls[i], new xw.Bounds(null, null, topControls[i].height,
null)
+ .addStyleProperty("position", "absolute")
+ .addStyleProperty("top", topSpace)
+ .addStyleProperty("left", "0")
+ .addStyleProperty("right", "0")
+ );
+ topSpace += 1.0 * topControls[i].height;
+ }
+
+ for (var i = 0; i < bottomControls.length; i++)
+ {
+ this.bounds.put(bottomControls[i], new xw.Bounds(null, null,
bottomControls[i].height, null)
+ .addStyleProperty("position","absolute")
+ .addStyleProperty("bottom", bottomSpace)
+ .addStyleProperty("left", "0")
+ .addStyleProperty("right", "0")
+ );
+ bottomSpace += 1.0 * bottomControls[i].height;
+ }
+
+ for (var i = 0; i < leftControls.length; i++)
+ {
+ this.bounds.put(leftControls[i], new xw.Bounds(null, null, null,
leftControls[i].width)
+ .addStyleProperty("position", "absolute")
+ .addStyleProperty("left", leftSpace + (leftSpace > 0 ? 2 : 0))
+ .addStyleProperty("top", topSpace + 2)
+ .addStyleProperty("bottom", bottomSpace + 2)
+ );
+ leftSpace += 1.0 * leftControls[i].width;
+ }
+
+ for (var i = 0; i < rightControls.length; i++)
+ {
+ this.bounds.put(rightControls[i], new xw.Bounds(null, null, null,
rightControls[i].width)
+ .addStyleProperty("position", "absolute")
+ .addStyleProperty("right", rightSpace)
+ .addStyleProperty("top", topSpace + 2)
+ .addStyleProperty("bottom", bottomSpace + 2)
+ );
+ rightSpace += 1.0 * rightControls[i].width;
+ }
+
+ for (var i = 0; i < clientControls.length; i++)
+ {
+ this.bounds.put(clientControls[i], new xw.Bounds(null, null, null, null)
+ .addStyleProperty("position", "absolute")
+ .addStyleProperty("left", leftSpace + 4)
+ .addStyleProperty("right", rightSpace + 2)
+ .addStyleProperty("top", topSpace + 2)
+ .addStyleProperty("bottom", bottomSpace + 2)
+ );
+ }
+
+ for (var i = 0; i < this.container.children.length; i++)
{
- container.children[i].paint();
+ this.container.children[i].paint(this);
}
}
+ xw.BorderLayout.prototype.setBounds = function(ctl)
+ {
+ var bounds = this.bounds.get(ctl);
+ if (bounds != null) bounds.applyToControl(ctl.control);
+ }
}
xw.layoutManagers = new Object();