</head>
<body>
-<div id="featurebrowser-mainlayout"
- style="width: 100%; height: 100%; position: absolute; top: 0pt; left: 0pt;"><img
- src="img/header.png" />
-<div id="featurebrowser-features"
- style="top: 62px; width: 200px; height: 443px;">
- <div location="tree"></div>
+<div id="featurebrowser-mainlayout" style="position: absolute; top: 0pt; left: 0pt;"><img src="img/header.png" />
+
+<div id="featurebrowser-features" style="top: 62px; width: 200px;">
+ <div location="tree">puu</div>
</div>
+
<div id="featurebrowser-demo"
- style="overflow: auto; position: absolute; top: 62px; left: 215px; width: 863px; height: 399px;">
+ style="overflow: auto; position: absolute; top: 62px; left: 215px; ">
<table width="100%" height="100%" cellspacing="0" cellpadding="0"
border="0">
<tbody>
<tbody>
<tr>
<td id="featurebrowser-demo-td" style="text-align: left;">
- <div id="PID7" class="orderedlayout">
- <table class="orderedlayout layout">
- <tbody class="layout">
- <tr class="layout">
- <td class="layout">
- <div id="PID8" class="panel">
- <div class="panelborder">
- <div class="caption panelcaption">Welcome to the IT Mill
- Toolkit feature tour!</div>
- <div class="content">
- <div id="PID9" class="orderedlayout">
- <table class="orderedlayout layout">
- <tbody class="layout">
- <tr class="layout">
- <td class="layout">
- <div id="PID10" class="label">
- <div>
- <div
- xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">This
- application lets you view and play with some features of IT
- Mill Toolkit. Use menu on the left to select component.<br />
- <br />
- Note the <b>Properties selection</b> on the top right
- corner. Click it open to access component properties and
- feel free to edit properties at any time.<br />
- <br />
- The area that you are now reading is the component demo
- area. Lower area from here contains component description,
- API documentation and optional code sample. Note that not
- all selections contain demo, only description and API
- documentation is shown.<br />
- <br />
- You may also change application's theme from below the menu.
- This example application is designed to work best with <em>Demo</em>
- theme, other themes are for demonstration purposes only.<br />
- <br />
- IT Mill Toolkit enables you to construct complex Web
- applications using plain Java, no knowledge of other Web
- technologies such as XML, HTML, DOM, JavaScript or browser
- differences is required.<br />
- <br />
- For more information, point your browser to <a target="_new"
- href="http://www.itmill.com">www.itmill.com</a>.</div>
- </div>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
-</table>
-</div>
-<div id="featurebrowser-tabs"
- style="overflow: hidden; position: absolute; top: 478px; left: 215px; width: 863px; height: 77px;">
-<div id="PID11" class="tabsheet">
-<div class="tabs-container">
-<table cellspacing="0" class="tabs">
- <tbody>
- <tr>
- <td class="tab-space"></td>
- <td class="tab-on">Description</td>
- <td class="tab-space"></td>
- <td class="tab clickable" style="-moz-user-select: none;">Properties</td>
- <td class="tab-space"></td>
- <td class="tab clickable" style="-moz-user-select: none;">Javadoc</td>
- <td class="tab-space"></td>
- <td class="tab clickable" style="-moz-user-select: none;">Code
- Sample</td>
- <td width="100%" class="tab-last"></td>
- </tr>
- </tbody>
-</table>
-</div>
-<div class="tab-content"
- style="border-bottom: 0pt none; overflow: auto; height: 30px;">
-<div id="PID12" class="orderedlayout">
-<table class="orderedlayout layout">
- <tbody class="layout">
- <tr class="layout">
- <td class="layout">
- <div id="PID13" class="orderedlayout">
- <table class="orderedlayout layout">
- <tbody class="layout">
- <tr class="layout">
- <td class="layout">
- <div id="PID14" class="embedded"><img class="embedded"
- src="/demo/FeaturesApplication/APP/1/icon_intro.png" alt="" /></div>
- </td>
- <td class="layout">
- <div id="PID15" class="label">
- <div>
- <div xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <h3>Welcome</h3>
- </div>
- </div>
- </div>
+
+ <div location="demo">demo</div>
+
</td>
</tr>
</tbody>
</table>
- </div>
- </td>
- </tr>
- <tr class="layout">
- <td class="layout">
- <div id="PID16" class="label">
- <div>
- <div xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">This
- area contains the selected component's description, list of
- properties, javadoc and optional code sample. Start your tour now by
- selecting features from the list on the left and remember to
- experiment with the <b>Properties panel</b> located at the top right
- corner area.<br />
- <br />
- IT Mill Toolkit version: 4.0.2<br />
- Browser: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US;
- rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4</div>
- </div>
- </div>
</td>
</tr>
</tbody>
</table>
</div>
+
+<div id="featurebrowser-tabs" style="overflow: hidden; position: absolute; left: 215px;">
+ <div location="tabsheet">tabs</div>
</div>
-</div>
-</div>
-<div id="featurebrowser-properties"
- style="overflow: hidden; position: absolute; top: 15px; left: 1103px; width: 0px; height: 540px;">
-<div location="propertiesButton"></div>
-<div id="PID19" style="display: none;" class="panel disabled" /></div>
-<img
- src="/demo/features/RES/demo/featurebrowser/img/show_properties.png"
- id="featurebrowser-properties-toggler"
- style="left: 1083px; height: 92px;" />
+
+<img id="featurebrowser-properties-toggler" src="img/show_properties.png" style=" top: 23px; position: absolute;"/>
+
+<div id="featurebrowser-properties" style="overflow: hidden; position: absolute; top: 23px; width: 0px;">
+ <div location="properties">properties</div>
+</div>
+
<div id="featurebrowser-control"
- style="overflow: hidden; position: absolute; top: 505px; left: 0pt; width: 200px; height: 50px;">
+ style="overflow: hidden; position: absolute; bottom: 10px; left: 0pt; width: 200px; height: 50px;">
<table width="100%" height="100%" border="0">
<tbody>
<tr>
<td width="50%" valign="middle" align="center"
- id="featurebrowser-control-left">
- <div id="PID4" class="select"><input type="hidden" value="1" /><select>
- <option>-</option>
- <option value="1">demo</option>
- <option value="2">corporate</option>
- <option value="3">base</option>
- </select></div>
+ id="featurebrowser-control-left">
+<div location="themes">themes</div>
</td>
<td width="50%" valign="middle" align="center"
id="featurebrowser-control-right">
- <div id="PID5" class="button-link button">
- <div class="link clickable" style="-moz-user-select: none;">
- <div>
- <div class="pad">
- <div class="caption">restart
- <div
- style="margin: 0px; padding: 0px; overflow: hidden; width: 0px; height: 0px;"><input
- type="button" /></div>
- </div>
- </div>
- </div>
- </div>
- </div>
+<div location="restart">restart</div>
</td>
</tr>
</tbody>
</table>
</div>
+
+</div>
+
<div id="featurebrowser-divider"
- style="overflow: hidden; position: absolute; top: 461px; left: 578px; width: 137px; height: 17px;" /></div>
+ style="overflow: hidden; position: absolute; width: 137px; height: 17px;" /></div>
</div>
+
+<script type="text/javascript">
+
+/** Recalculate feature browser main layout dimensions for all components */
+recalcFeatureBrowserLayout = function() {
+
+ // Then animations are needed, this will be reset to true
+ var animationNeeded = false;
+
+ // References to all elements
+ var mainDiv = document.getElementById("featurebrowser-mainlayout");
+ if (mainDiv == null) { alert("maindiv is null"); return;}
+ var featuresDiv = document.getElementById("featurebrowser-features");
+ var demoDiv = document.getElementById("featurebrowser-demo");
+ var tabsDiv = document.getElementById("featurebrowser-tabs");
+ var propertiesDiv = document.getElementById("featurebrowser-properties");
+ var controlDiv = document.getElementById("featurebrowser-control");
+ var dividerDiv = document.getElementById("featurebrowser-divider");
+
+ // Logobar height
+ var logoBarHeight = 62;
+
+ // Get whole window contents size
+ document.body.style.padding = 0;
+ document.body.style.margin = 0;
+ mainDiv.style.width="100%";
+ mainDiv.style.height="100%";
+
+ var width = mainDiv.offsetWidth;
+ var height = mainDiv.offsetHeight;
+ if (document.body.offsetWidth > mainDiv.offsetWidth) width = document.body.offsetWidth;
+ if (document.body.offsetHeight > mainDiv.offsetHeight) height = document.body.offsetHeight;
+
+ // Recalc features div dimensions
+ var featuresWidth = 200;
+ var controlHeight = 50;
+ featuresDiv.style.top="" + logoBarHeight + "px";
+ featuresDiv.style.width="" + featuresWidth + "px";
+ featuresDiv.style.height="" + (height-controlHeight-logoBarHeight) + "px";
+
+ // Recalc properties div dimensions
+ if (typeof propertiesDiv.targetWidth == 'undefined') propertiesDiv.targetWidth = 0;
+ var propWidth = Math.floor((propertiesDiv.offsetWidth + propertiesDiv.targetWidth)/2);
+ if (Math.abs(propWidth - propertiesDiv.targetWidth) <= 1) propWidth = propertiesDiv.targetWidth;
+ if (propWidth >width-featuresWidth) propWidth = width-featuresWidth;
+ if (propWidth < 0) propWidth = 0;
+ if ((propWidth+1) != (propertiesDiv.targetWidth+1)) animationNeeded=true;
+ var centerWidth = width - propWidth - featuresWidth - 40;
+ propertiesDiv.style.position="absolute";
+ propertiesDiv.style.overflow="hidden";
+ propertiesDiv.style.top="" + 23 + "px";
+ propertiesDiv.style.left="" + (centerWidth + featuresWidth + 40) + "px";
+ propertiesDiv.style.width=propWidth + "px";
+ propertiesDiv.style.height="" + (height - 23) + "px";
+ var buttonDiv = document.getElementById("featurebrowser-properties-toggler");
+ buttonDiv.style.left = "" + (centerWidth + featuresWidth - 20 + 40) + "px"
+ if (propWidth == 0) { //buttonDiv.src = buttonDiv.showPng;
+ buttonDiv.style.height = "92px"; }
+ if (propWidth == propertiesDiv.maxWidth) { //buttonDiv.src = buttonDiv.hidePng;
+ buttonDiv.style.height = "23px"; }
+ buttonDiv.onclick = function() {
+ var propertiesDiv = document.getElementById("featurebrowser-properties");
+ propertiesDiv.targetWidth = propertiesDiv.targetWidth == 0 ? 265 : 0;
+ recalcFeatureBrowserLayout();
+ };
+
+ // Recalc divider div dimensions
+ if (typeof dividerDiv.demoHeight == 'undefined') dividerDiv.demoHeight = Math.floor(height/2);
+ if (dividerDiv.isActive) {
+ dividerDiv.demoHeight = dividerDiv.mouseY-10 - logoBarHeight;
+ if (dividerDiv.demoHeight < 0) dividerDiv.demoHeight = 0;
+ } else {
+ if (dividerDiv.demoHeight + logoBarHeight > height - 20) dividerDiv.demoHeight = height - 20 - logoBarHeight;
+ if (dividerDiv.demoHeight < 0) dividerDiv.demoHeight = 0;
+ }
+ var dividerHeight = 17;
+ dividerDiv.style.position="absolute";
+ dividerDiv.style.overflow="hidden";
+ dividerDiv.style.top="" + (dividerDiv.demoHeight + logoBarHeight)+ "px";
+ dividerDiv.style.left="" + (15+featuresWidth+Math.round((centerWidth-137)/2)) +"px";
+ dividerDiv.style.width="" + 137 + "px";
+ dividerDiv.style.height="" + dividerHeight + "px";
+
+ // Recalc tabs div dimensions
+ tabsDiv.style.position="absolute";
+ tabsDiv.style.overflow="hidden";
+ tabsDiv.style.top="" + (dividerDiv.demoHeight + dividerHeight + logoBarHeight) + "px";
+ tabsDiv.style.left="" + (featuresWidth + 15) + "px";
+ tabsDiv.style.width="" + centerWidth + "px";
+ tabsDiv.style.height="" + (height - dividerDiv.demoHeight - dividerHeight - logoBarHeight) + "px";
+ updateTabsContentHeight();
+
+ // Recalc demo div dimensions
+ demoDiv.style.position="absolute";
+ demoDiv.style.overflow="auto";
+ demoDiv.style.top="" + logoBarHeight + "px";
+ demoDiv.style.left="" + (featuresWidth + 15) + "px";
+ demoDiv.style.width="" + centerWidth + "px";
+ demoDiv.style.height="" + dividerDiv.demoHeight + "px";
+
+ // Recalc control div dimensions
+ // TODO, make floating
+ controlDiv.style.position="absolute";
+ controlDiv.style.overflow="hidden";
+ controlDiv.style.top="" + (height - controlHeight) + "px";
+ controlDiv.style.left="0";
+ controlDiv.style.width="" + featuresWidth + "px";
+ controlDiv.style.height="" + controlHeight + "px";
+
+ if (animationNeeded) {
+ setTimeout("recalcFeatureBrowserLayout()",30);
+ }
+};
+
+/** Recalculate tabs content width */
+updateTabsContentHeight = function() {
+ try {
+ var tabsDiv = document.getElementById("featurebrowser-tabs");
+ var tabsComponent = itmill.themes.Demo.prototype.elementByIndex(tabsDiv.childNodes,0);
+ if (tabsComponent == null) return;
+ var tabs = itmill.themes.Demo.prototype.elementByIndex(tabsComponent.childNodes,0);
+ if (tabs == null) return;
+ var content = itmill.themes.Demo.prototype.elementByIndex(tabsComponent.childNodes,1);
+ if (content == null) return;
+ content.style.height="" + (tabsDiv.offsetHeight - tabs.offsetHeight-13) + "px";
+ content.style.borderBottom="0";
+ content.style.overflow='auto';
+ var iframe = content.getElementsByTagName("iframe").item(0);
+ if (iframe != null) {
+ content.style.overflow='hidden';
+ content.style.padding='0';
+ content.style.height="" + (tabsDiv.offsetHeight - tabs.offsetHeight) + "px";
+ iframe.height=content.style.height;
+ iframe.style.border='0';
+ }
+ } catch (e) {}
+};
+
+/** Helper method. Get element from node array by index */
+elementByIndex = function(nodeArray, index) {
+ if (typeof nodeArray == 'undefined' || nodeArray == null) return null;
+ var i=0;
+ while (index>=0 && i < nodeArray.length) {
+ while(i < nodeArray.length && nodeArray[i].nodeType != Node.ELEMENT_NODE) i++;
+ if (index == 0) return nodeArray[i];
+ index--; i++;
+ }
+ return null;
+}
+
+dividerUpdate = function() {
+ var dividerDiv = document.getElementById("featurebrowser-divider");
+ var div = document.getElementById("featurebrowser-mainlayout");
+ dividerDiv.isActive = true;
+ div.onmouseup = function() {
+ dividerDiv.isActive = false;
+ div.onmouseup = null;
+ div.onmousemove = null;
+ }
+ div.onmousemove = function(e) {
+ dividerDiv.mouseY = typeof e != 'undefined' ? e.clientY : window.event.clientY;
+ recalcFeatureBrowserLayout();
+ }
+ return false;
+};
+
+initFeatureBrowserLayout = function() {
+ var dividerDiv = document.getElementById("featurebrowser-divider");
+ if (dividerDiv == null) alert("no divider div");
+ dividerDiv.isActive = false;
+ dividerDiv.onmousedown = dividerUpdate;
+
+ window.onresize=recalcFeatureBrowserLayout;
+ recalcFeatureBrowserLayout();
+};
+
+initFeatureBrowserLayout();
+
+</script>
+
</body>
</html>
\ No newline at end of file
private Feature currentFeature = null;
- private OrderedLayout layout;
-
- private Button propertiesSelect;
-
- private OrderedLayout right;
+ private CustomLayout mainlayout;
private PropertyPanel properties;
features.setStyle("menu");
// Configure component layout
- layout = new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL);
- layout.setStyle("featurebrowser-mainlayout");
- setCompositionRoot(layout);
- OrderedLayout left = new OrderedLayout(
- OrderedLayout.ORIENTATION_VERTICAL);
- left.addComponent(features);
- layout.addComponent(left);
+ mainlayout = new CustomLayout("featurebrowser-mainlayout");
+ setCompositionRoot(mainlayout);
+ mainlayout.addComponent(features, "tree");
// Theme selector
- left.addComponent(themeSelector);
+ mainlayout.addComponent(themeSelector, "themes");
themeSelector.addItem("demo");
themeSelector.addItem("corporate");
themeSelector.addItem("base");
// Restart button
Button close = new Button("restart", getApplication(), "close");
close.setStyle("link");
- left.addComponent(close);
+ mainlayout.addComponent(close,"restart");
// Test component
registerFeature("/Welcome", new IntroWelcome());
// Add demo component and tabs
currentFeature = new IntroWelcome();
- layout.addComponent(currentFeature);
+ mainlayout.addComponent(currentFeature, "demo");
+ mainlayout.addComponent(currentFeature.getTabSheet(), "tabsheet");
// Add properties
- right = new OrderedLayout(OrderedLayout.ORIENTATION_VERTICAL);
- layout.addComponent(right);
-
- propertiesSelect = new Button("Show properties", this);
- propertiesSelect.setSwitchMode(true);
- right.addComponent(propertiesSelect);
properties = currentFeature.getPropertyPanel();
- properties.setVisible(false);
- right.addComponent(properties);
+ mainlayout.addComponent(properties, "properties");
}
public void registerFeature(String path, Feature feature) {
Property p = features.getContainerProperty(id, "feature");
Feature feature = p != null ? ((Feature) p.getValue()) : null;
if (feature != null) {
- layout.replaceComponent(currentFeature, feature);
+ mainlayout.removeComponent(currentFeature);
+ mainlayout.removeComponent(currentFeature.getTabSheet());
+ mainlayout.addComponent(feature,"demo");
+ mainlayout.addComponent(feature.getTabSheet(),"tabsheet");
currentFeature = feature;
properties = feature.getPropertyPanel();
if (properties != null) {
- Iterator i = right.getComponentIterator();
- i.next();
- PropertyPanel oldProps = (PropertyPanel) i.next();
- if (oldProps != null)
- right.replaceComponent(oldProps, properties);
- else
- right.addComponent(properties);
- properties.setVisible(((Boolean) propertiesSelect
- .getValue()).booleanValue());
+ mainlayout.addComponent(properties,"properties");
}
getWindow()
.setCaption(
// ignored, should never happen
}
- if (properties != null)
- properties.setVisible(((Boolean) propertiesSelect.getValue())
- .booleanValue());
}
public void addComponent(Component c) {
projects / vaadin-framework.git / commitdiff
