GWT-检索未显示的小部件的大小

GWT-检索未显示的小部件的大小,gwt,Gwt,我需要根据其子级大小设置absolutePanel的大小,但是getOffset*方法返回0,因为(我认为)子级尚未显示 一个简单的例子: AbsolutePanel aPanel = new AbsolutePanel(); HTML text = new HTML(/*variable lenght text*/); int xPosition = 20; // actually variable aPanel.add(text, xPosition, 0); aPanel.setSize(

我需要根据其子级大小设置absolutePanel的大小,但是getOffset*方法返回0,因为(我认为)子级尚未显示

一个简单的例子:

AbsolutePanel aPanel = new AbsolutePanel();
HTML text = new HTML(/*variable lenght text*/);
int xPosition = 20; // actually variable
aPanel.add(text, xPosition, 0);
aPanel.setSize(xPosition + text .getOffsetWidth() + "px", "50px"); // 20px 50px
我还可以通过使用AbsolutePanel size设置子级位置和大小来解决我的问题:

AbsolutePanel aPanel = new AbsolutePanel();
aPanel.setSize("100%", "50px");
HTML text = new HTML(/*variable lenght text*/);
int xPosition = aPanel.getOffsetWidth() / 3; // Once again, getOffsetWidth() returns 0;
 aPanel.add(text, xPosition, 0);
在这两种情况下,我必须找到一种方法:

  • 检索尚未显示的小部件的大小
  • 显示小部件时收到通知

    • 我认为你应该尝试用css样式来解决这个问题。如果我是你,我会尝试使用addStyle或AddStyleName为父面板和/或绝对面板设置样式。也许像

      AbsolutePanel aPanel = new AbsolutePanel();
      aPanel.setSize("100%", "50px");
      HTML text = new HTML(/*variable lenght text*/);
      text.addStyleName("my-custom-style");
      
      在css中,您将创建一个css样式,然后适当调整小部件的大小

      另一种方法是

      您可以创建一个函数来创建一个与您需要的大小完全相同的HTML小部件

      以下是一些代码供您开始使用:

      public native void customizeHTMLElement(Element elem, String widthInPx) /*-{ 
        elem.style.width = widthInPx;   //this is basically pure js. 
      }-*/ 
      
      Then somewhere within your widget make a call to the above function like
      
      public void foo() {
        ...
        customizeHTMLElement(someElement, "20");
        ...
      }
      

      关于JSNI的一些信息-

      小部件有一个onLoad()方法,当小部件连接到DOM时可以重写该方法,此时getOffsetWidth()将返回呈现的文本大小,除非字符串所在的小部件已经应用了某个大小。如果你能用CSS做你需要的事情(包括可能只是设置“overflow:visible;”),那可能会更好,但有时你真的需要大小,这项技术会给你。

      你应该在放置和计算小部件后调用getOffsetHeight()。所以GWT有

      com.google.gwt.core.client.Scheduler
      
      类来执行此操作

      在我的项目中,我使用LayoutPanel在顶部显示菜单,在中心显示其他内容。但我不知道菜单的大小。因此,我向使用GetOffsetSight计算的LayoutPanel提供如下信息:

      layoutPanel.add(widget);
      Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand()
      {
          public void execute()
          {
              int offsetHeight = widget.getOffsetHeight();
              layoutPanel.setWidgetTopHeight(widget, 0, Style.Unit.PX, offsetHeight, Style.Unit.PX);
          }
      });
      

      实际上,在我的AbsolutePanel中有几个小部件,具有特定的大小和位置。由于大小和位置不是固定的(取决于数据),我不能使用css…你能描述一下使用了什么样的小部件吗?基本上提供一些关于你所面临问题的更多细节-我可能会想出一些其他解决方案。我现在想的是原生js方法,我很有信心它会起作用——但我认为如果你能设法使用css样式会更好。我需要创建一个及时表示事件的小部件。因此,我使用一个HTML小部件来表示这些事件的每次发生(也可以是一个包含描述符小部件的水平面板),位置=开始日期,宽度=事件持续时间。由于AbsolutePanel.add()方法仅将int作为像素位置,因此我无法使用percentage。所以我需要一个以像素为单位的参考大小,无论是从AbsolutePanel还是其中一个事件。我认为你应该选择原生js。。您可以使用gwt的jsni来实现这一点。您可以创建一个函数来创建一个与您需要的大小完全相同的HTML小部件。这里有一些代码供您开始:public native void customizehTMlement(Element elem,String widthInPx)/*-{elem.style.width=widthInPx;//这基本上是纯js。}-*/然后在小部件中的某个地方调用上述函数,如public void foo(){…customizehTMlement(someElement,“20”);}关于JSNI的一些信息-效果很好,我使用了如下百分比:elem.style.left=start+“%”;elem.style.width=大小+“%”;elem.style.height=“100%”;