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

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

我稍微改变了你的代码，我就得到了图像。

示例.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>

示例.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=";
    }

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