Question

我的ui.xml有这个片段：

<g:VerticalPanel ui:field="fooPanel">
    <g:Image ui:field="fooImage" />
</g:VerticalPanel>

其他地方也有一个按钮。在这个按钮的onClick事件中，我进行了RPC服务调用，在其中我获得了一个base64编码的字符串，并将其设置为图像：

@UiHandler("fooButton")
public void onSubmit(ClickEvent clickEvent) {
    ...
    AsyncCallback<String> callback = new AsyncCallback<String> {

        @Override
        public void onSuccess(String foo) {
            fooImage.setUrl("data:image/png;base64," + foo);
            fooImage.setPixelSize(304, fooImage.getHeight() * 304 / fooImage.getWidth());
        }

        @Override
        public void onFailure(Throwable caught) {
            Window.alert(caught.getMessage());
        }
    };
    fooServiceAsync.getFoo(bar, callback);
}

该服务运作正常。但为什么不显示图像呢？

Answer 1

我最少改变了你的代码，我得到了图片。

<强> Example.ui.xml

<g:HTMLPanel>
        <g:Button ui:field="fooButton"></g:Button>
        <g:VerticalPanel ui:field="fooPanel">
            <g:Image ui:field="fooImage" />
        </g:VerticalPanel>
</g:HTMLPanel>

<强> Example.java

    final ExampleServiceAsync exampleInstance = GWT.create(ExampleService.class);

    @UiField
    Button fooButton;
    @UiField
    VerticalPanel fooPanel;
    @UiField
    Image fooImage;

    public Example() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    @UiHandler("fooButton")
    public void onSubmit(ClickEvent clickEvent) {

    mainInstance.getFoo(new AsyncCallback<String>() {

        @Override
        public void onSuccess(String foo) {
            fooImage.setUrl("data:image/png;base64," + foo);
            fooImage.getElement().getStyle()
                    .setVisibility(Visibility.HIDDEN);
        }

        @Override
        public void onFailure(Throwable caught) {
            Window.alert(caught.getMessage());
        }
      });
    }

    @UiHandler("fooImage")
    public void onLoad(LoadEvent event) {
          fooImage.setPixelSize(304,
            fooImage.getHeight() * 304 / fooImage.getWidth());
          fooImage.getElement().getStyle().setVisibility(Visibility.VISIBLE);
    }

在对图像进行操作时，实际上它没有添加到DOM中。您需要在加载后对其执行该操作。如果要调整图像大小，用户可以先查看原始图像然后更改图像。为了防止隐藏第一张图片。

<强> ExampleServiceImpl.java

@Override
    public String getFoo() {
        return "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSgnBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kTZdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5CYII=";
    }

P.S。我删除了变量bar，因为我不知道你是如何使用它的。也许您将从getFoo()类提供YourServiceImpl.java方法的实现。

Answer 2

好吧，问题是这一行：

fooImage.setPixelSize(304, fooImage.getHeight() * 304 / fooImage.getWidth());

fooImage.getHeight（）返回0.但是当我在Window.alert("random");和setUrl命令之间放置setPixelSize时，图像以我指定的尺寸显示。

因此，为了解决这个问题，我在setUrl和setPixelSize命令之间插入了以下代码。

Timer timer = new Timer() {

    @Override
    public void run() {
    }
};
timer.schedule(500);

可能通过延迟500毫秒，它允许图像初始化其尺寸。

更新：原来是一个浏览器问题。我在RHEL5上使用Firefox（这是我们使用的开发机器）。当我使用具有最新操作系统的另一台机器连接到GWT应用程序时，一切都按预期工作。对不起，误报！

更新2：即使在最近的操作系统（Windows 7顺便说一句）上，Firefox上也存在问题。使用olgacosta的解决方案证明是完美的！

setUrl不会改变GWT中的任何内容

2 个答案: