[英]GWT unable to scroll on SimplePanel with fixed position
I have a uibinder (CWArticles) that as the following xml body: 我有一个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>
The last SimplePanel is an empty panel that I use to display the choosen article by the user adding another uibinder (ArticleViewer): 最后一个SimplePanel是一个空面板,我用来显示由用户添加另一个uibinder(ArticleViewer)的所选文章:
final ArticleViewer av = new ArticleViewer(visibleArticles, pos);
articleViewerPanel.add(av);
Wich has the following xml body: Wich具有以下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>
This panel is forced to be on top by applying the following css rules: 通过应用以下css规则,可以将该面板置于顶部:
.content {
position: fixed;
width: 100%;
margin: 0;
padding: 0;
top: 170px;
left: 0;
box-shadow: 0px 0px 10px 1px grey;
z-index: 9000;
}
Everything works fine. 一切正常。 The only problem is that when the user try to scroll only the original panel in the back (CWArticles) moves.
唯一的问题是,当用户尝试滚动仅背面的原始面板时(CWArticles)移动。
What do I have to do to scroll the panel with fixed position (the one in the front)? 要滚动固定位置的面板(前面的面板),我该怎么做?
In the image the white panel with a picture and a red caption is the what I call the front panel. 在图像中,带有图片和红色标题的白色面板就是我所说的前面板。 Everything behind is the panel in the back (CwArticles).
后面的所有内容都是背面的面板(CwArticles)。 As you can see in the pictures when I scroll only the back panel moves.
正如您在图片中看到的那样,当我滚动时,只有后面板移动。 I want to scroll the front panel.
我要滚动前面板。
Simply put I'm trying to achieve something like gmail attachment viewer. 简而言之,我正在尝试实现类似gmail附件查看器的功能。
Thank you very much. 非常感谢你。
Use ScrollPanel
and make articleViewerPanel
in different ui.xml
and then finally add them using third ui.xml
. 使用
ScrollPanel
并articleViewerPanel
不同ui.xml
,最后使用第三添加它们ui.xml
。
This is a sample code. 这是示例代码。 It might help you to understand.
它可能会帮助您理解。
Try this one 试试这个
public void onModuleLoad() {
RootPanel.get().add(new SimplePanel3());
}
SimplePanel1.ui.xml SimplePanel1.ui.xml
contains FlexTable
and navigation buttons 包含
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 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 SimplePanel2.ui.xml
There is no change in it. 没有变化。 It is same as you have mentioned.
和你提到的一样。
<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 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 SimplePanel3.ui.xml
It combines above two simple panels. 它结合了两个简单的面板。
<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 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;
}
Screenshot: 屏幕截图:
I figured this one out. 我想通了。 I had to change the front panel (the one with the big picture) position from fixed to absolute.
我不得不将前面板(显示大图的)位置从固定更改为绝对。
.content {
position: absolute;
width: 100%;
margin: 0;
top: 40px;
padding: 0;
left: 0;
box-shadow: 0px 0px 10px 1px grey;
z-index: 9000;
}
Thank you for your contribution. 感谢您的贡献。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.