<html>
<head>
-<link REL="stylesheet" TYPE="text/css" HREF="../style.css">
+<link REL="stylesheet" TYPE="text/css">
</head>
<body>
-<div id="featurebrowser-mainlayout" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"><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; ">
-<table width="100%" height="100%" cellspacing="0" cellpadding="0"
- border="0">
- <tbody>
- <tr>
- <td valign="middle" align="center">
- <table>
- <tbody>
- <tr>
- <td id="featurebrowser-demo-td" style="text-align: left;">
-
- <div location="demo">demo</div>
-
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<div id="featurebrowser-tabs" style="overflow: hidden; position: absolute; left: 215px;">
- <div location="tabsheet">tabs</div>
-</div>
+<div id="_UID_main" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"><img src="img/header.png" />
-<img id="featurebrowser-properties-toggler" src="img/show_properties.png" style=" top: 23px; position: absolute;"/>
+ <div id="_UID_features" style="top: 62px; width: 200px; position: absolute; overflow: auto; left: 0;" location="tree">
+ <div style="width: 100%; height: 100%; border: 1px solid red;">tree</div>
+ </div>
-<div id="featurebrowser-properties" style="overflow: hidden; position: absolute; top: 23px; width: 0px;">
- <div location="properties">properties</div>
-</div>
+ <div id="_UID_demo" style="overflow: auto; position: absolute; top: 62px; left: 215px; ">
+ <table width="100%" height="100%" cellspacing="0" cellpadding="0"
+ border="0">
+ <tbody>
+ <tr>
+ <td valign="middle" align="center">
+ <table>
+ <tbody>
+ <tr>
+ <td style="text-align: left;" location="demo">
+ <div style="width: 100%; height: 100%; border: 1px solid red;">demo</div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
-<div id="featurebrowser-control"
- 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 location="themes">themes</div>
- </td>
- <td width="50%" valign="middle" align="center"
- id="featurebrowser-control-right">
-<div location="restart">restart</div>
- </td>
- </tr>
- </tbody>
-</table>
-</div>
+ <div id="_UID_tabs" style="overflow: hidden; position: absolute; left: 215px;" location="tabsheet">
+ <div style="width: 100%; height: 100%; border: 1px solid red;">tabsheet</div>
+ </div>
+
+ <img id="_UID_prop-toggle" src="img/show_properties.png" style=" top: 23px; position: absolute;"/>
+
+ <div id="_UID_props" style="overflow: hidden; position: absolute; top: 23px; width: 0px;" location="properties">
+ <div style="width: 100%; height: 100%; border: 1px solid red;">properties</div>
+ </div>
+
+ <div id="_UID_cntr"
+ 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="_UID_cntr-left" location="themes">themes</td>
+ <td width="50%" valign="middle" align="center" id="_UID_cntr-right" location="restart">restart</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <img id="_UID_divider" src="img/tab_handle.png" style="position: absolute;" />
</div>
-<div id="featurebrowser-divider"
- style="overflow: hidden; position: absolute; width: 137px; height: 17px;" />
-</div>
<script type="text/javascript">
/** Recalculate feature browser main layout dimensions for all components */
-recalcFeatureBrowserLayout = function() {
+_UID_layout = function() {
// Then animations are needed, this will be reset to true
var animationNeeded = false;
// References to all elements
- var mainDiv = document.getElementById("featurebrowser-mainlayout");
+ var mainDiv = document.getElementById("_UID_main");
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");
+ var featuresDiv = document.getElementById("_UID_features");
+ var demoDiv = document.getElementById("_UID_demo");
+ var tabsDiv = document.getElementById("_UID_tabs");
+ var propertiesDiv = document.getElementById("_UID_props");
+ var controlDiv = document.getElementById("_UID_cntr");
+ var dividerDiv = document.getElementById("_UID_divider");
// Logobar height
var logoBarHeight = 62;
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");
+ var buttonDiv = document.getElementById("_UID_prop-toggle");
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");
+ var propertiesDiv = document.getElementById("_UID_props");
propertiesDiv.targetWidth = propertiesDiv.targetWidth == 0 ? 265 : 0;
- recalcFeatureBrowserLayout();
+ _UID_layout();
};
// Recalc divider div dimensions
tabsDiv.style.left="" + (featuresWidth + 15) + "px";
tabsDiv.style.width="" + centerWidth + "px";
tabsDiv.style.height="" + (height - dividerDiv.demoHeight - dividerHeight - logoBarHeight) + "px";
- updateTabsContentHeight();
+ _UID_updateTabs();
// Recalc demo div dimensions
demoDiv.style.position="absolute";
controlDiv.style.left="0";
controlDiv.style.width="" + featuresWidth + "px";
controlDiv.style.height="" + controlHeight + "px";
-
+
if (animationNeeded) {
- setTimeout("recalcFeatureBrowserLayout()",30);
+ setTimeout("_UID_layout()",30);
}
};
/** Recalculate tabs content width */
-updateTabsContentHeight = function() {
+_UID_updateTabs = function() {
try {
- var tabsDiv = document.getElementById("featurebrowser-tabs");
- var tabsComponent = itmill.themes.Demo.prototype.elementByIndex(tabsDiv.childNodes,0);
+ var tabsDiv = document.getElementById("_UID_tabs");
+ var tabsComponent = itmill.themes.Demo.prototype._UID_elemByIndex(tabsDiv.childNodes,0);
if (tabsComponent == null) return;
- var tabs = itmill.themes.Demo.prototype.elementByIndex(tabsComponent.childNodes,0);
+ var tabs = itmill.themes.Demo.prototype._UID_elemByIndex(tabsComponent.childNodes,0);
if (tabs == null) return;
- var content = itmill.themes.Demo.prototype.elementByIndex(tabsComponent.childNodes,1);
+ var content = itmill.themes.Demo.prototype._UID_elemByIndex(tabsComponent.childNodes,1);
if (content == null) return;
content.style.height="" + (tabsDiv.offsetHeight - tabs.offsetHeight-13) + "px";
content.style.borderBottom="0";
};
/** Helper method. Get element from node array by index */
-elementByIndex = function(nodeArray, index) {
+_UID_elemByIndex = function(nodeArray, index) {
if (typeof nodeArray == 'undefined' || nodeArray == null) return null;
var i=0;
while (index>=0 && i < nodeArray.length) {
return null;
}
-dividerUpdate = function() {
- var dividerDiv = document.getElementById("featurebrowser-divider");
- var div = document.getElementById("featurebrowser-mainlayout");
+_UID_dividerUpdate = function() {
+ var dividerDiv = document.getElementById("_UID_divider");
+ var div = document.getElementById("_UID_main");
dividerDiv.isActive = true;
div.onmouseup = function() {
dividerDiv.isActive = false;
}
div.onmousemove = function(e) {
dividerDiv.mouseY = typeof e != 'undefined' ? e.clientY : window.event.clientY;
- recalcFeatureBrowserLayout();
+ _UID_layout();
}
return false;
};
-initFeatureBrowserLayout = function() {
- var dividerDiv = document.getElementById("featurebrowser-divider");
+_UID_initFeatureBrowserLayout = function() {
+ var dividerDiv = document.getElementById("_UID_divider");
if (dividerDiv == null) alert("no divider div");
dividerDiv.isActive = false;
- dividerDiv.onmousedown = dividerUpdate;
+ dividerDiv.onmousedown = _UID_dividerUpdate;
- window.onresize=recalcFeatureBrowserLayout;
- recalcFeatureBrowserLayout();
+ window.onresize=_UID_layout;
+ _UID_layout();
};
-initFeatureBrowserLayout();
+_UID_initFeatureBrowserLayout();
</script>
import java.util.HashMap;
import java.util.Iterator;
+import java.util.NoSuchElementException;
+import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
+import com.google.gwt.user.client.ui.ComplexPanel;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;
import com.itmill.toolkit.terminal.gwt.client.Paintable;
import com.itmill.toolkit.terminal.gwt.client.UIDL;
-public class ICustomLayout extends SimplePanel implements Paintable, Layout {
+public class ICustomLayout extends ComplexPanel implements Paintable, Layout {
- private HashMap componentToWrapper = new HashMap();
-
- HTMLPanel html;
+ private HashMap locationToElement = new HashMap();
+
+ private HashMap locationToWidget = new HashMap();
String currentStyle;
- String locationPrefix = HTMLPanel.createUniqueId() + "_";
-
String scripts = "";
+
+ String pid;
+
+ public ICustomLayout() {
+ setElement(DOM.createDiv());
+ }
+
+ public void add(Widget widget, String location) {
+ Element elem = (Element) locationToElement.get(location);
+ if (elem == null) {
+ throw new NoSuchElementException();
+ }
+ Widget previous = (Widget) locationToWidget.get(location);
+ if (widget.equals(previous)) return;
+ remove(previous);
+ super.add(widget, elem);
+ locationToWidget.put(location,widget);
+ }
public void updateFromUIDL(UIDL uidl, Client client) {
if (client.updateComponent(this, uidl, false))
return;
+ pid = uidl.getId();
+
updateHTML(uidl, client);
- componentToWrapper.clear();
- html.clear();
for (Iterator i = uidl.getChildIterator(); i.hasNext();) {
UIDL uidlForChild = (UIDL) i.next();
if (uidlForChild.getTag().equals("location")) {
String location = uidlForChild.getStringAttribute("name");
Widget child = client.getWidget(uidlForChild.getChildUIDL(0));
try {
- html.add(child, locationPrefix + location);
+ add(child, location);
} catch (Exception e) {
// If no location is found, this component is not visible
}
currentStyle = newStyle;
}
template = extractBodyAndScriptsFromTemplate(template);
- html = new HTMLPanel(template);
- addUniqueIdsForLocations(html.getElement(), locationPrefix);
+ DOM.setInnerHTML(getElement(), template);
+
+ locationToElement.clear();
+ scanForLocations(getElement());
Widget parent = getParent();
while (parent != null && !(parent instanceof IWindow))
parent = parent.getParent();
if (parent != null && ((IWindow) parent).getTheme() != null)
;
- prefixImgSrcs(html.getElement(), "../theme/"
+ prefixImgSrcs(getElement(), "../theme/"
+ ((IWindow) parent).getTheme() + "/layout/");
- add(html);
}
+ private void scanForLocations(Element elem) {
+
+ String location = getLocation(elem);
+ if (location != null) {
+ locationToElement.put(location, elem);
+ DOM.setInnerHTML(elem, "");
+ } else {
+ int len = DOM.getChildCount(elem);
+ for (int i=0; i<len; i++) {
+ System.out.print(i);
+ scanForLocations(DOM.getChild(elem, i));
+ }
+
+ }
+
+ }
+
+ private static native String getLocation(Element elem) /*-{
+ return elem.getAttribute("location");
+ }-*/;
+
/** Scripts must be evaluated when the document has been rendered */
protected void onLoad() {
super.onLoad();
+ // Evaluate scripts only once
if (scripts != null) {
eval(scripts);
scripts = null;
}
/** Evaluate given script in browser document */
- private native void eval(String script) /*-{
+ private static native void eval(String script) /*-{
try {
eval("{ var document = $doc; var window = $wnd; "+ script + "}");
} catch (e) {
}
}-*/;
- /** Scan for location divs and add unique ids for them */
- private native void addUniqueIdsForLocations(Element e, String idPrefix) /*-{
- try {
- var divs = e.getElementsByTagName("div");
- for (var i = 0; i < divs.length; i++) {
- var div = divs[i];
- var location = div.getAttribute("location");
- if (location != null) {
- div.setAttribute("id",idPrefix + location);
- div.innerHTML="";
- }
- }
- } catch (e) {}
-
- }-*/;
-
/** Prefix all img tag srcs with given prefix. */
private native void prefixImgSrcs(Element e, String srcPrefix) /*-{
try {
* Exctract body part and script tags from raw html-template.
*
* Saves contents of all script-tags to private property: scripts. Returns
- * contents of the body part for the html without script-tags.
+ * contents of the body part for the html without script-tags. Also replaces
+ * all _UID_ tags with an unique id-string.
*
* @param html
* Original HTML-template received from server
*/
private String extractBodyAndScriptsFromTemplate(String html) {
+ // Replace UID:s
+ html = html.replaceAll("_UID_", pid + "__");
+
// Exctract script-tags
scripts = "";
int endOfPrevScript = 0;
}
public void replaceChildComponent(Widget from, Widget to) {
- CaptionWrapper wrapper = (CaptionWrapper) componentToWrapper.get(from);
- if (wrapper != null) {
- componentToWrapper.remove(from);
- from = wrapper;
- }
- // TODO
- html.remove(from);
- html.add(to);
-
+ String location = getLocation(from);
+ if (location == null) throw new IllegalArgumentException();
+ add(to,location);
}
public boolean hasChildComponent(Widget component) {
- // TODO
- return componentToWrapper.get(component) != null;
+ return locationToWidget.containsValue(component);
}
public void updateCaption(Widget component, UIDL uidl) {
- // TODO
- /*
- * CaptionWrapper wrapper = (CaptionWrapper)
- * componentToWrapper.get(component); if (CaptionWrapper.isNeeded(uidl)) {
- * if (wrapper == null) { int index = getWidgetIndex(component);
- * remove(component); wrapper = new CaptionWrapper(component);
- * insert(wrapper, index); componentToWrapper.put(component, wrapper); }
- * wrapper.updateCaption(uidl); } else { if (wrapper != null) { int
- * index = getWidgetIndex(wrapper); remove(wrapper);
- * insert(wrapper.getWidget(), index);
- * componentToWrapper.remove(component); } }
- */
+ // TODO Currently not supported
+ }
+
+ public String getLocation(Widget w) {
+ for (Iterator i = locationToWidget.keySet().iterator(); i.hasNext();) {
+ String location = (String) i.next();
+ if (locationToWidget.get(location) == w)
+ return location;
+ }
+ return null;
+ }
+
+ public boolean remove(Widget w) {
+ String location = getLocation(w);
+ if (location != null)
+ locationToWidget.remove(location);
+ return super.remove(w);
+ }
+
+ public void add(Widget w) {
+ throw new UnsupportedOperationException();
+ }
+
+ public void clear() {
+ super.clear();
+ locationToWidget.clear();
}
}
projects / vaadin-framework.git / commitdiff