<link REL="stylesheet" TYPE="text/css">
</head>
-<body>
-<div id="_UID_main" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"><img src="img/header.png" />
+<body><div id="_UID_main" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"><img src="img/header.png" />
<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>
var animationNeeded = false;
// References to all elements
- var mainDiv = document.getElementById("_UID_main");
+ var mainDiv = document.getElementById("_UID_main");
if (mainDiv == null) { alert("maindiv is null"); return;}
var featuresDiv = document.getElementById("_UID_features");
var demoDiv = document.getElementById("_UID_demo");
if (animationNeeded) {
setTimeout("_UID_layout()",30);
}
+
+ /* call custom layouts bridge to notify sub components */
+ mainDiv.notifyChildrenOfSizeChange();
+
};
/** Recalculate tabs content width */
dividerDiv.isActive = false;
dividerDiv.onmousedown = _UID_dividerUpdate;
- window.onresize=_UID_layout;
+ var mainDiv = document.getElementById("_UID_main");
+
+ /* this will be called by custom layout when its containers size has changed */
+ mainDiv.iLayoutJS = function() {
+ _UID_layout();
+ };
+
+
_UID_layout();
};
import com.itmill.toolkit.terminal.gwt.client.Caption;
import com.itmill.toolkit.terminal.gwt.client.CaptionWrapper;
import com.itmill.toolkit.terminal.gwt.client.Container;
+import com.itmill.toolkit.terminal.gwt.client.ContainerResizedListener;
import com.itmill.toolkit.terminal.gwt.client.Paintable;
import com.itmill.toolkit.terminal.gwt.client.UIDL;
+import com.itmill.toolkit.terminal.gwt.client.Util;
/**
* Custom Layout implements complex layout defined with HTML template.
* @author IT Mill
*
*/
-public class ICustomLayout extends ComplexPanel implements Paintable, Container {
+public class ICustomLayout extends ComplexPanel implements Paintable,
+ Container, ContainerResizedListener {
/** Location-name to containing element in DOM map */
private HashMap locationToElement = new HashMap();
throw (new IllegalStateException(
"Could not find IView; maybe updateFromUIDL() was called before attaching the widget?"));
}
+
+ publishResizedFunction(DOM.getFirstChild(getElement()));
}
private boolean hasTemplate() {
locationToWidget.clear();
widgetToCaptionWrapper.clear();
}
+
+ public void iLayout() {
+ if (!iLayoutJS(DOM.getFirstChild(getElement()))) {
+ Util.runAnchestorsLayout(this);
+ }
+ }
+
+ /**
+ * This method is published to JS side with the same name into first DOM
+ * node of custom layout. This way if one implements some resizeable
+ * containers in custom layout he/she can notify children after resize.
+ */
+ public void notifyChildrenOfSizeChange() {
+ Util.runAnchestorsLayout(this);
+ }
+
+ public void onDetach() {
+ detachResizedFunction(DOM.getFirstChild(getElement()));
+ }
+
+ private native void detachResizedFunction(Element element)
+ /*-{
+ element.notifyChildrenOfSizeChange = null;
+ }-*/;
+
+ private native void publishResizedFunction(Element element)
+ /*-{
+ var self = this;
+ element.notifyChildrenOfSizeChange = function() {
+ self.@com.itmill.toolkit.terminal.gwt.client.ui.ICustomLayout::notifyChildrenOfSizeChange()();
+ };
+ }-*/;
+
+ /**
+ * In custom layout one may want to run layout functions made with
+ * JavaScript. This function tests if one exists (with name "iLayoutJS" in
+ * layouts first DOM node) and runs if it. Return value is used to determine
+ * is children needs to be notified of size changes.
+ *
+ * @param el
+ * @return true if layout function was run and it returned true.
+ */
+ private native boolean iLayoutJS(Element el)
+ /*-{
+ if(el && el.iLayoutJS) {
+ try {
+ return el.iLayoutJS();
+ } catch (e) {
+ alert("bar");
+ return false;
+ }
+ } else {
+ alert("boo");
+ return false;
+ }
+ }-*/;
}