html - GWT 无法在固定位置的 SimplePanel 上滚动

Question

我有一个 uibinder (CWArticles) 作为以下 xml 正文:

<g:HTMLPanel>
        <div align="center">
            <g:FlexTable ui:field="articlesTable" />
            <div align="right">
                <div>
                    <g:Button ui:field="btnPrevious" styleName="{style.nav-button}">Anterior</g:Button>
                    <g:Button ui:field="btnNext" styleName="{style.nav-button}">Seguinte</g:Button>
                </div>
            </div>
        </div>
        <g:SimplePanel ui:field="articleViewerPanel" />
    </g:HTMLPanel>

最后一个 SimplePanel 是一个空面板，我用它来显示用户添加另一个 uibinder (ArticleViewer) 所选择的文章:

final ArticleViewer av = new ArticleViewer(visibleArticles, pos);
articleViewerPanel.add(av);

它具有以下 xml 正文:

<g:HTMLPanel>
        <g:SimplePanel styleName="{style.clickable-layer}"
            ui:field="clickablePanel" />
        <div align="center" class="{style.content}">
            <div class="{style.img-holder}" align="center">
                <g:SimplePanel ui:field="image" styleName="{style.img}" />
            </div>
            <div class="{style.img-data}">
                <!-- Image Label-->
            </div>
        </div>
    </g:HTMLPanel>

通过应用以下 css 规则，此面板强制位于顶部:

.content {
        position: fixed;
        width: 100%;
        margin: 0;
        padding: 0;
        top: 170px;
        left: 0;
        box-shadow: 0px 0px 10px 1px grey;
        z-index: 9000;
    }

一切正常。唯一的问题是，当用户尝试滚动时，只有后面的原始面板 (CWArticles) 移动。

要滚动固定位置(前面的那个)的面板，我需要做什么？

在图像中，带有图片和红色标题的白色面板就是我所说的前面板。后面的一切都是后面的面板(CwArticles)。正如您在图片中看到的那样，当我滚动时只有后面板移动。我想滚动前面板。

简单地说，我正在尝试实现类似 gmail 附件查看器的功能。

非常感谢。

Answer 1

使用 ScrollPanel 并在不同的 ui.xml 中制作 articleViewerPanel 然后最后使用第三个 ui.xml 添加它们>.

这是一个示例代码。它可能会帮助您理解。

试试这个

public void onModuleLoad() {
    RootPanel.get().add(new SimplePanel3());
}

SimplePanel1.ui.xml

包含FlexTable 和导航按钮

<ui:style>
    .outer {
        border-left: 1px solid #999;
        border-bottom: 1px solid #999;
        cursor: pointer;
        cursor: hand;
    }

    .header {
        background-color: #d3d6dd;
        table-layout: fixed;
        width: 100%;
        height: 100%;
    }

    .header td {
        font-weight: bold;
        text-shadow: #fff 0 2px 2px;
        padding: 2px 0 1px 10px;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
    }

    .table {
        table-layout: fixed;
        width: 100%;
    }

    .table td {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 2px 0 2px 10px;
    }

    .nav-button {
        border: 1px solid black;
        background: #CCC;
    }

    .alignRight {
        float: right;
    }

    .border {
        border: 1px solid #999;
    }
</ui:style>

<g:HTMLPanel>
    <g:FlexTable ui:field='header' styleName='{style.header}'
        cellSpacing='0' cellPadding='0' />

    <g:ScrollPanel height="100px" styleName="{style.border}">
        <g:FlexTable ui:field='articlesTable' styleName='{style.table}'
            cellSpacing='0' cellPadding='0' />
    </g:ScrollPanel>

    <g:HorizontalPanel styleName="{style.alignRight}">
        <g:Button ui:field="btnPrevious" styleName="{style.nav-button}">Anterior
        </g:Button>
        <g:Button ui:field="btnNext" styleName="{style.nav-button}">Seguinte
        </g:Button>
    </g:HorizontalPanel>
</g:HTMLPanel>

SimplePanel1.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HTMLTable.Cell;
import com.google.gwt.user.client.ui.Widget;

public class SimplePanel1 extends Composite {

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    /*
     * @UiTemplate is not mandatory but allows multiple XML templates to be used for the same
     * widget. Default file loaded will be <class-name>.ui.xml
     */
    @UiTemplate("SimplePanel1.ui.xml")
    interface MyUiBinder extends UiBinder<Widget, SimplePanel1> {
    }

    public SimplePanel1() {
        initWidget(uiBinder.createAndBindUi(this));

        header.setText(0, 0, "Name");
        header.setText(0, 1, "Reference");
        header.setText(0, 2, "Price");
        header.setText(0, 3, "Description");

        for(int i=0;i<10;i++){
            articlesTable.setText(i, 0, String.valueOf("Name "+'A'+i));
            articlesTable.setText(i, 1, String.valueOf("Reference "+'A'+i));
            articlesTable.setText(i, 2, String.valueOf("Price "+'A'+i));
            articlesTable.setText(i, 3, String.valueOf("Desc "+'A'+i));
        }

    }

    @UiField
    FlexTable header;

    @UiField
    FlexTable articlesTable;

    public void addClickHandler(final SimplePanel2 simplePanel2) {

        articlesTable.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                System.out.println("Click");

                Cell clickedCell = articlesTable.getCellForEvent(event);
                int rowIndex = clickedCell.getRowIndex();

                simplePanel2.setMessage(articlesTable.getHTML(rowIndex, clickedCell.getCellIndex()));

            }
        });
    }

}

SimplePanel2.ui.xml

没有变化。跟你说的一样。

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:style>
        .clickable-layer {
            border: 1px solid black;
            background: #CCC;
        }

        .content {
            position: fixed;
            width: 100%;
            margin: 0;
            padding: 0;
            top: 170px;
            left: 0;
            box-shadow: 0px 0px 10px 1px grey;
            z-index: 9000;
        }

        .img-holder,.img-data,.img {
            background: blue;
        }
    </ui:style>
    <g:HTMLPanel>
        <!-- <g:SimplePanel styleName="{style.clickable-layer}"
            ui:field="clickablePanel" /> -->
        <div align="center" class="{style.content}">
            <div class="{style.img-holder}" align="center">
                <g:SimplePanel ui:field="image" styleName="{style.img}" />
            </div>
            <div class="{style.img-data}">
                <table>
                    <tr>
                        <td>
                            <b>Nome:</b>
                        </td>
                        <td width="5px" />
                        <td>
                            <g:Label ui:field="lblName" />
                        </td>
                        <td width="5px" />
                        <td>
                            <b>Ref:</b>
                        </td>
                        <td width="5px" />
                        <td>
                            <g:Label ui:field="lblReference" />
                        </td>
                        <td width="5px" />
                        <td>
                            <b>Preço:</b>
                        </td>
                        <td width="5px" />
                        <td>
                            <g:Label ui:field="lblPrice" />
                        </td>
                    </tr>
                </table>
                <g:Label ui:field="lblDescription" />
            </div>
        </div>
    </g:HTMLPanel>
</ui:UiBinder>

SimplePanel2.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;

public class SimplePanel2 extends Composite {

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    /*
     * @UiTemplate is not mandatory but allows multiple XML templates to be used for the same
     * widget. Default file loaded will be <class-name>.ui.xml
     */
    @UiTemplate("SimplePanel2.ui.xml")
    interface MyUiBinder extends UiBinder<Widget, SimplePanel2> {
    }

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

    @UiField
    SimplePanel image;

    @UiField
    Label lblName;

    @UiField
    Label lblReference;

    @UiField
    Label lblPrice;

    @UiField
    Label lblDescription;

    public void setMessage(String html) {
        lblDescription.setText(html);
    }


}

SimplePanel3.ui.xml

它结合了上面两个简单的面板。

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:p='urn:import:com.gwt.test.client'>

    <g:HTMLPanel>
        <p:SimplePanel1 ui:field='list' />

        <p:SimplePanel2 ui:field='detail' />
    </g:HTMLPanel>
</ui:UiBinder> 

SimplePanel3.java

package com.gwt.test.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class SimplePanel3 extends Composite {

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    /*
     * @UiTemplate is not mandatory but allows multiple XML templates to be used for the same
     * widget. Default file loaded will be <class-name>.ui.xml
     */
    @UiTemplate("SimplePanel3.ui.xml")
    interface MyUiBinder extends UiBinder<Widget, SimplePanel3> {
    }

    public SimplePanel3() {
        initWidget(uiBinder.createAndBindUi(this));

        list.addClickHandler(detail);
    }

    @UiField
    SimplePanel1 list;

    @UiField
    SimplePanel2 detail;

}

截图: