]> source.dussan.org Git - vaadin-framework.git/commitdiff
ContainerResizedListener for CustomLayout and api to attach to those events via custo...
authorMatti Tahvonen <matti.tahvonen@itmill.com>
Wed, 10 Oct 2007 10:17:32 +0000 (10:17 +0000)
committerMatti Tahvonen <matti.tahvonen@itmill.com>
Wed, 10 Oct 2007 10:17:32 +0000 (10:17 +0000)
svn changeset:2478/svn branch:trunk

WebContent/ITMILL/themes/demo/layouts/featurebrowser-mainlayout.html
src/com/itmill/toolkit/demo/features/PropertyPanel.java
src/com/itmill/toolkit/terminal/gwt/client/ui/ICustomLayout.java

index ee66b4919e8a77f6aecd96f613139cf6766a47db..e859c763e07a6c5c3f17d2e9cf68ead9f5ae5a98 100644 (file)
@@ -3,8 +3,7 @@
 <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>
@@ -67,7 +66,7 @@ _UID_layout = function() {
        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");
@@ -169,6 +168,10 @@ _UID_layout = function() {
        if (animationNeeded) {
                setTimeout("_UID_layout()",30);
        }
+       
+       /* call custom layouts bridge to notify sub components */
+       mainDiv.notifyChildrenOfSizeChange();
+       
 };
 
 /** Recalculate tabs content width */
@@ -229,7 +232,14 @@ _UID_initFeatureBrowserLayout = function() {
        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();
 };
 
index 9b9ae09b1d8e0f1c74b732590d08db69aa3554e8..3c402ec468991cff3d80db820e25707a44110039 100644 (file)
@@ -110,9 +110,8 @@ public class PropertyPanel extends Panel implements Button.ClickListener,
                allProperties.setPageLength(0);
                allProperties.setWidth(100);
                allProperties.setWidthUnits(Table.UNITS_PERCENTAGE);
-               // TODO Add as soon as supported
-               // allProperties.setHeight(100);
-               // allProperties.setHeightUnits(Table.UNITS_PERCENTAGE);
+               allProperties.setHeight(100);
+               allProperties.setHeightUnits(Table.UNITS_PERCENTAGE);
                updatePropertyList();
 
        }
index 135a20cce73ed16394497005d7d573115314fc3a..efe21a7b8f809ba6d1501161849cc2f3451db6b6 100644 (file)
@@ -11,8 +11,10 @@ import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection;
 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.
@@ -20,7 +22,8 @@ import com.itmill.toolkit.terminal.gwt.client.UIDL;
  * @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();
@@ -159,6 +162,8 @@ public class ICustomLayout extends ComplexPanel implements Paintable, Container
                        throw (new IllegalStateException(
                                        "Could not find IView; maybe updateFromUIDL() was called before attaching the widget?"));
                }
+
+               publishResizedFunction(DOM.getFirstChild(getElement()));
        }
 
        private boolean hasTemplate() {
@@ -338,4 +343,60 @@ public class ICustomLayout extends ComplexPanel implements Paintable, Container
                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;
+               }
+       }-*/;
 }