GWT Bootstrap 3 库

Question

我正在尝试运行 gwt bootstrap 3 - 图库的演示功能。

当我在 GWTBootstrap3 演示中打开图片时，它会以弹出框的形式打开。 当我在我的应用程序中打开它时。它遵循我选择的图片链接。 我做错了什么？

我的 ui-binder 代码是

<gallery:Gallery ui:field="gallery" thumbnailWidth="100px" thumbnailHeight="100px">
    <gallery:GalleryImage url="https://farm1.static.flickr.com/655/21391422043_68c98789bf_b.jpg" />
    <gallery:GalleryImage url="https://farm1.static.flickr.com/582/21830878218_f7e24ec74d_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5707/21832711448_02e33b3b3b_b.jpg" />
    <gallery:GalleryImage url="https://farm1.static.flickr.com/567/22011206725_9d0b3dc1ae_b.jpg" />
    <gallery:GalleryImage url="https://farm1.static.flickr.com/670/22016240921_6fca2b20ce_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5833/21401954003_27f145bc32_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5686/21997628766_9845a40fdc_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5637/21393309814_17ca189d39_b.jpg" />
    <gallery:GalleryImage url="https://farm1.static.flickr.com/660/22018439171_06358ee107_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5757/21829896778_e9febcfec8_b.jpg" />
    <gallery:GalleryImage url="https://farm6.static.flickr.com/5799/21837884439_b5cfe23d60_b.jpg" />
    <gallery:GalleryImage url="https://farm1.static.flickr.com/616/21833374820_2c2a1ee5a7_b.jpg" />
</gallery:Gallery>

与http://gwtbootstrap3.github.io/gwtbootstrap3-demo/snapshot/#gallery中的示例代码完全相同

Answer 1

此 ui-binder 代码将为每个图像生成如下内容：

<a data-gallery="data-gallery" href="https://farm1.static.flickr.com/655/21391422043_68c98789bf_b.jpg" style="display: inline-table; width: 100px; height: 100px;"><img src="https://farm1.static.flickr.com/655/21391422043_68c98789bf_b.jpg" class="gwt-Image" style="width: 100px; height: 100px;"></a>

没有任何关联的 javascript 代码，将简单地打开图像，就像您正在经历的那样。

将本地代码与 GWTBootstrap3 网站上的演示进行比较，尤其是每个链接元素上的 javascript 处理程序，您可以看到本地代码中缺少 jquery.blueimp-gallery.js。在演示网站上也找不到这个文件，但是代码被缓存了，这似乎是它在那里工作的原因。

此问题是使用已停产和弃用的库和项目的结果。 GwtBootstrap3 已停产，并且不推荐使用 Bootstrap-Image-Gallery 以支持 blueimp Gallery。因此，我强烈建议完全停止使用 GwtBootstrap3，特别是对于画廊，使用项目 https://github.com/blueimp/Gallery。您可以一起使用 GWT、Bootstrap 和其他库。 GwtBootstrap3 只是 Bootstrap 的 GWT 包装器。它不是必需的，我认为它甚至是不可取的，因为您最终依赖于停止的项目，并且没有按照 Bootstrap 和 GWT 的速度发展。在我看来，像这样的包装器只会给项目增加不必要的复杂性。

Answer 2

由于我无法解决最初的问题，我解决了设置 DecoretedPopupPanel “po”的问题。我的示例代码看起来像。首先，我使用点击处理程序添加图片缩略图：

                ClickHandler cH= new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                
                Image iImg=(Image)event.getSource();
                showPicture (iImg.getUrl());
                }                                                               
                };

如果拇指被按下，我会打开弹出窗口...

/**
 * Zeige in einem PopupFenster ein Bild möglichst groß an 
 * @param strURL
 */
public static void showPicture(String strURL) {
    po.clear();
    Image iNew=new Image(strURL);
    float iY=iNew.getHeight();
    float iX=iNew.getWidth();
    
    float iWX=Window.getClientWidth();
    float iWY=Window.getClientHeight()-120;
    
    boolean bDo=true;
    
    //adjustiere die Bildgröße
    while (bDo) {
        float iXAdjust=iX/iWX;
        float iYAdjust=iY/iWY;
        if (iXAdjust<0.5 && iYAdjust<0.5) {
            iY=iY*2;
            iX=iX*2;
        }
        else if (iXAdjust>1 || iYAdjust>1) {
            if (iXAdjust>iYAdjust) {
                iY=iY/iXAdjust;
                iX=iX/iXAdjust;                                             
            }
            else {
                iY=iY/iYAdjust;
                iX=iX/iYAdjust;                                             
            }
            bDo=false;
            //iY=iY/2;
            //iX=iX/2;
        }
        else {
            bDo=false;
        }
    }
    mI.setImageData(strURL);
    
    //neu
    mI.iImage.setUrl(iNew.getUrl());//=iNew;
    mI.iImage.setPixelSize((int)iX, (int)iY);
    mI.iImage.addClickHandler(  new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            
            po.hide();
        }                               
    });

    po.add(mI);
    po.center();
    po.setGlassEnabled(true);
    po.setAutoHideEnabled(true);    
    po.show();
}