在居中的PopupPanel onLoad中显示GWT图像 [英] Display a GWT Image in a centered PopupPanel onLoad

问题描述

使用GWT我使用ClickHandler显示图像缩略图，然后在居中的PopupPanel中显示完整图像（可以是几MB）。为了让它居中，必须在显示弹出窗口之前加载图像，否则图像的左上角将放置在屏幕中间（图像认为它是1px大）。这是我用来做到这一点的代码：

  private void showImagePopup（）{
 final PopupPanel popupImage = new PopupPanel（）; 
 popupImage.setAutoHideEnabled（true）; 
 popupImage.setStyleName（popupImage）; / *使图像填充屏幕的90％* / 
 
 final Image image = new Image（）; 
 image.addLoadHandler（new LoadHandler（）{
 @Override 
 public void onLoad（LoadEvent event）{
 popupImage.add（image）; 
 popupImage.center（ ）; 
} 
}）; 
 image.setUrl（attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE）; 
 Image.prefetch（attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE）; 
} 
  

然而， LoadEvent 事件永远不会被触发，因此图像从不显示。我该如何克服这一点？我想避免使用 http://code.google.com/p/gwt-image -loader / ，因为如果我可以避免它，我不想添加额外的库。

  ... 
 
 final Image image = new Image（attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE）; 
 image.addLoadHandler（new LoadHandler（）{
 @Override 
 public void onLoad（LoadEvent event）{
 //由于图像已经加载，尺寸已知
 popupImage.center（）; 
 //只显示图片
 popupImage.setVisible（true）; 
} 
}）; 
 
 popupImage.add（image）; 
 //隐藏图像直到获取图像
 popupImage.setVisible（false）; 
 //这会导致图像被加载到DOM 
 popupImage.show（）; 
 
 ... 
  

希望有所帮助。

Using GWT I am displaying an image thumbnail with a ClickHandler that then shows the full image (can be several MB) in a centered PopupPanel. In order to have it centered the image must be loaded before the popup is shown, otherwise the top-left corner of the image is placed in the middle of the screen (the image thinks it is 1px large). This is the code I am using to do this:

    private void showImagePopup() {
        final PopupPanel popupImage = new PopupPanel();
        popupImage.setAutoHideEnabled(true);
        popupImage.setStyleName("popupImage"); /* Make image fill 90% of screen */

        final Image image = new Image();
        image.addLoadHandler(new LoadHandler() {
            @Override
            public void onLoad(LoadEvent event) {
                popupImage.add(image);
                popupImage.center();
            }
        });
        image.setUrl(attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE);
        Image.prefetch(attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE);
    }

However, the LoadEvent event is never fired, and thus the image is never shown. How can I overcome this? I want to avoid using http://code.google.com/p/gwt-image-loader/ because I do not want to add extra libraries if I can avoid it at all. Thanks.

解决方案

The onLoad() method will only fire once the image has been loaded into the DOM. Here is a quick workaround:

...

final Image image = new Image(attachmentUrl + CFeedPostAttachment.ATTACHMENT_FILE);
image.addLoadHandler(new LoadHandler() {
    @Override
    public void onLoad(LoadEvent event) {
        // since the image has been loaded, the dimensions are known
        popupImage.center(); 
        // only now show the image
        popupImage.setVisible(true);
    }
 });

 popupImage.add(image);
 // hide the image until it has been fetched
 popupImage.setVisible(false);
 // this causes the image to be loaded into the DOM
 popupImage.show();

 ...

Hope that helps.

这篇关于在居中的PopupPanel onLoad中显示GWT图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！