GWT Bootstrap 3库

Question

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

当我在GWTBootstrap3演示中打开一张图片时，它会以弹出窗口的形式打开。当我在应用程序中打开它时。它跟随着我选择的图片的链接。我做错了什么？

我的ui绑定器代码是

<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绑定器代码将为每个图像生成类似如下的内容：

<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.Bluimp-Gallery.js。在演示网站上也找不到这个文件，但代码是缓存的，这似乎是它在那里工作的原因。

此问题是由于使用已停用和不推荐使用的库和项目造成的。GwtBootstrap3已经停止使用，并且支持blueimp Gallery而不推荐使用Bootstrap-Image-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();
}