using offsetHeight/offsetWidth in design view [IE/Windows]

[peterblazejewicz]

hi,

is there a way to make widget based on subcomponents which are resized according to parent component size using "offsetHeight" properties to work in design view?

here is example code:

Code: Select all

package com.mycompany.project.client;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Widget;

public class TestPanel extends Widget {
  Element header;
  Element body;
  Element footer;

  public TestPanel() {
    setElement(DOM.createDiv());
    DOM.setStyleAttribute(getElement(), "border", "1px solid #666666");
    header = DOM.createDiv();
    setText(header, "header");
    DOM.appendChild(getElement(), header);
    DOM.setStyleAttribute(header, "backgroundColor", "yellow");
    body = DOM.createDiv();
    setText(body, "body");
    DOM.appendChild(getElement(), body);
    DOM.setStyleAttribute(body, "backgroundColor", "red");
    footer = DOM.createDiv();
    setText(footer, "footer");
    DOM.appendChild(getElement(), footer);
    DOM.setStyleAttribute(footer, "backgroundColor", "yellow");
  }

  private void setText(Element element, String text) {
    DOM.setInnerText(element, text);
  }

  /* @Override */
  public void setHeight(String height) {
    super.setHeight(height);
    updateBodyHeight();
  }

  private void updateBodyHeight() {
    int pHeight = getOffsetHeight();
    int hHeight = DOM.getElementPropertyInt(header, "offsetHeight");
    int fHeight = DOM.getElementPropertyInt(footer, "offsetHeight");
    int bH = pHeight - hHeight - fHeight;
    setText(header, pHeight + ":" + hHeight + ":" + fHeight + ":" + bH);
    DOM.setStyleAttribute(body, "height", bH + "");
  }
}

body content (red color) should be resized to fill parent content, header/footer are left as is,
this is like common Panel UI is modelled,
the required Designer view is inverted Spain flag colors (y/r/y) and it works in hosted mode but fails in design view when red area take all available height,

I could upload .zip-ped designer project but code just works without errors,
use in entry point:

Code: Select all

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class TestPanelHeight implements EntryPoint {
   public void onModuleLoad() {
      RootPanel rootPanel = RootPanel.get();
      final TestPanel testPanel = new TestPanel();
      rootPanel.add(testPanel, 5, 5);
      testPanel.setSize("320px", "240px");
   }
}

regadrs,
Peter

[Eric Clayberg]

We have not been able to make this work.

There appear to be some low level GWT bugs that are preventing this from working correctly.

We are investigating possible work arounds.

[peterblazejewicz]

hi Eric,

thanks, this is just rudimentary panel-like widget with api that should be use to measure height at runtime for subcomponents,
I'll test on OSX and let you know how it works,

regards,
Peter

[Eric Clayberg]

Further investigation and testing indicates that this is definitely caused by some low level GWT bugs.

We still don't have a work around yet.

[roger]

Works perfectly for me. Very good example.

[Eric Clayberg]

Works perfectly for me. Very good example.

Using what exact configuration?

[roger]

Take any GWT example.
1. Put the 2 classes mentioned in the example in your client package.
2. Modify your .gwt.xml file to point to the entry point class, mine looks like this:
<entry-point class='com.mycompany.client.TestPanelHeight'/>
3. Run your app specific *-shell script and you should see the example working.

[Eric Clayberg]

Using what configuration of GWT, GWT Designer, OS, IE, JDK, etc.?

[roger]

GWT version: gwt-linux-1.4.61
OS: Redhat Enterprise Linux(2.6.9-34.EL)
Firefox: 2.0
java version : "1.6.0_04"

[Eric Clayberg]

GWT version: gwt-linux-1.4.61
OS: Redhat Enterprise Linux(2.6.9-34.EL)
Firefox: 2.0
java version : "1.6.0_04"

Good. As indicated by the title of the thread, this is an IE/Windows issue.