我目前正在开发一个GWT项目，我需要使用“carousel”小部件。轮播小部件应该显示信息和2个箭头 - 当用户点击其中一个箭头时，内容随动画移动并替换为新内容。
我一直在查看可用的小部件库，但“carousel”小部件似乎不可用。我找到的唯一真正的候选人是gwt-yui-carousel小部件（见下面的链接），但这似乎是资源的重载 - 虽然它几乎完全符合我的需要，但我没有显示简单的图像，以MVP术语显示视图/演示者。
（来自这里：http://code.google.com/p/gwt-yui-carousel/）。
是否有更好的轮播小部件可供我不知道？或者我应该扩展现有的一个来创造所需的效果？你会建议使用gwt-yui-carousel（我不这么认为）？ 如果没有更好的选择，您认为自己创建小部件是个好主意吗？
请注意，我认为关键在于，我必须显示演示者/视图，这将通过箭头点击等方式获取DataBase中的数据 - 因此需要自定义现有小部件，或者所选小部件应该能够显示GWT小部件列表。
我不认为我可以使用现有的通常轮播小部件之一，因为那些不是“面向gwt”并且不能支持视图/演示者和所有这些gwt的东西;）
任何答案都将不胜感激：）
致以最诚挚的问候，
尼尔斯
答案 0 :(得分：1)
不知道任何可用的实现，但您可以立即编写此小部件。
创建一个包含URL列表（您的图像）的小部件：
CarouselWidget(ArrayList<String> urls) extends HorizontalPanel
然后在面板中添加两个按钮和要显示的所需图像。
左键 / image / image / image ... / image / 右键
图片从您的网址列表中提取，并在点击左侧或右侧按钮时显示 你移动起始索引 - 或++ ...并刷新图像视图。
从起始索引中计算数组中的“真实”索引。
答案 1 :(得分：1)
另一个自制的解决方案可以基于GWT LayoutPanel。这将允许在LayoutPanel实现AnimatedLayout接口时显示滚动动画。
public class CarouselPanel extends LayoutPanel {
int itsCurrentWidget = 0;
private ArrayList<Widget> itsWidgets;
private Button itsLeftButton;
private Button itsRightButton;
addToCarousel（窗口小部件窗口小部件）会将窗口小部件添加到窗口小部件列表，但不会添加到面板。面板中的实际小部件是应该显示的小部件。
您可以通过以下方式控制显示的中心窗口小部件的布局：
private void setCenter(Widget widget, boolean newWidget) {
if (widget != null) {
if (newWidget)
add(widget);
setWidgetLeftWidth(widget, 10, Unit.PCT, 80, Unit.PCT);
setWidgetTopHeight(widget, 10, Unit.PCT, 80, Unit.PCT);
widget.removeStyleName("sideCarousel");
widget.setStylePrimaryName("centerCarousel");
}
}
和正确的小部件：
private void setRight(Widget widget, boolean newWidget) {
if (widget != null) {
if (newWidget)
add(widget);
setWidgetLeftWidth(widget, 50, Unit.PCT, 45, Unit.PCT);
setWidgetTopHeight(widget, 20, Unit.PCT, 60, Unit.PCT);
widget.removeStyleName("centerCarousel");
widget.setStylePrimaryName("sideCarousel");
if (itsRightHandler != null)
itsRightHandler.removeHandler();
itsRightHandler = widget.addDomHandler(new ClickHandler() {
public void onClick(final ClickEvent event) {
scrollRight();
}
}, ClickEvent.getType());
}
}
您还可以通过向其添加点击侦听器，将右侧（或左侧）小部件用作滚动按钮。
，滚动方法可能如下所示：
public void scrollRight() {
if (itsCurrentWidget >= getWidgetCountInCarousel()-1)
return;
if (itsCurrentWidget > 0) {
Widget hideWidget = getWidgetInCarousel(itsCurrentWidget-1);
remove(hideWidget);
}
Widget leftWidget = getWidgetInCarousel(itsCurrentWidget);
Widget centerWidget = getWidgetInCarousel(++itsCurrentWidget);
Widget rightWidget = null;
if (itsCurrentWidget+1 < getWidgetCountInCarousel()) {
rightWidget = getWidgetInCarousel(itsCurrentWidget+1);
}
setLeft(leftWidget, false);
setRight(rightWidget, true);
setCenter(centerWidget, false);
animate(500);
}
注意最后的animate方法可以平滑地移动小部件。
不要忘记定义CSS规则来控制中心窗口小部件的z索引：
.sideCarousel {
z-index: 0;
}
.centerCarousel {
z-index: 1;
}
我希望它有所帮助。
答案 2 :(得分：0)
这是一个轮播实现，它使用gwt-query和gwt-queryui。它既可以水平使用，也可以垂直使用。 gwt-query用法的目的是在旋转木马移动时启用动画。此外，它支持螺旋行为。我没有在代码中添加java-docs，但只要你阅读，你就会发现解释性注释。
希望这会有用。
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.query.client.Function;
import java.util.ArrayList;
import java.util.List;
import static com.google.gwt.query.client.GQuery.$;
/**
GWTCrousel implementation.
@author: Andrés82
*/
public class GWTCarousel extends Composite {
/*
Public constants
*/
public static final int HORIZONTAL = 0; // used for orientation
public static final int VERTICAL = 1;
/*
Constructor
*/
public GWTCarousel () {
// inits the widget
mainPanel = new FlexTable ();
initWidget(mainPanel);
// structure
viewport = new AbsolutePanel ();
widgetsTable = new FlexTable ();
viewport.add(widgetsTable);
viewport.setWidgetPosition(widgetsTable,0,0);
// default behavior (not spiral, not animations enabled)
spiral = false; animationEnabled = false;
nextRow = 0; nextCol = 0; numberOfWidgetsToShow = 0;
movement = 0; animationTime = DEFAULT_ANIMATION_TIME;
widgetsList = new ArrayList<Widget> ();
// basics styling
$(viewport).css("overflow","hidden");
widgetsTable.setCellSpacing(SPACING);
mainPanel.setCellSpacing(SPACING);
}
// sets the carousel orientation
public void setOrientation (int orientation) {
switch (orientation) {
case HORIZONTAL:
setHorizontalOrientation ();
break;
case VERTICAL:
setVerticalOrientation ();
break;
default:;
}
previous.addClickHandler(getpreviousClickHandler());
next.addClickHandler(getnextClickHandler());
}
/*
Getters and setters
*/
public int getOrientation () { return orientation; }
public void setSpiral(boolean spiral) { this.spiral = spiral; }
public boolean isSpiral() { return spiral; }
public T2VoiceButton getprevious() { return previous; }
public T2VoiceButton getnext() { return next; }
public int getNumberOfWidgetsToShow() { return numberOfWidgetsToShow; }
// sets the number of widgets to show in the viewport
public void setNumberOfWidgetsToShow(int numberOfWidgetsToShow) { this.numberOfWidgetsToShow = numberOfWidgetsToShow; }
public void setAnimationEnabled(boolean animationEnabled) { this.animationEnabled = animationEnabled; }
public boolean isAnimationEnabled() { return animationEnabled; }
public double getWidgetWidth() { return widgetWidth; }
public void setWidgetWidth(double widgetWidth) {
this.widgetWidth = widgetWidth;
double viewportWidth = orientation == HORIZONTAL ? widgetWidth * numberOfWidgetsToShow + (numberOfWidgetsToShow + 1) * SPACING : widgetWidth + 2 * SPACING;
viewport.setWidth(viewportWidth + "px");
}
public double getWidgetHeight() { return widgetHeight; }
public void setWidgetHeight(double widgetHeight) {
this.widgetHeight = widgetHeight;
double viewportHeight = orientation == VERTICAL ? widgetHeight * numberOfWidgetsToShow + (numberOfWidgetsToShow + 1) * SPACING : widgetHeight + 2 * SPACING;
viewport.setHeight(viewportHeight + "px");
}
public void setanimationTime(int animationTime) { this.animationTime = animationTime; }
public int getanimationTime() { return animationTime; }
/*
Other methods
*/
public void addWidget (Widget widgetToAdd) {
switch (orientation) {
case HORIZONTAL:
addWidgetHorizontally(widgetToAdd);
break;
case VERTICAL:
addWidgetVertically(widgetToAdd);
break;
default:;
}
}
/*
Fields and constants
*/
// constants
private final int SPACING = 5;
private final int DEFAULT_ANIMATION_TIME = 300; // defined in millis
// structure
private Button previous;
private Button next;
private AbsolutePanel viewport;
private FlexTable widgetsTable;
private FlexTable mainPanel;
// control variables
private boolean spiral;
private boolean animationEnabled;
private long animationTime; // defined in millis
private double widgetWidth;
private double widgetHeight;
private int orientation;
private int numberOfWidgetsToShow;
private int nextRow;
private int nextCol;
private int movement;
private List<Widget> widgetsList;
/*
Private methods
*/
private void addWidgetVertically(Widget widgetToAdd) {
nextRow++;
widgetsList.add(widgetToAdd);
widgetsTable.setWidget(nextRow, nextCol, widgetToAdd);
widgetsTable.getCellFormatter().setAlignment(nextRow, nextCol, HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);
if (spiral && nextRow > numberOfWidgetsToShow) {
shiftDown();
$(widgetsTable).css("top", -(widgetHeight + SPACING) + "px");
}
}
private void addWidgetHorizontally(Widget widgetToAdd) {
nextCol++;
widgetsList.add(widgetToAdd);
widgetsTable.setWidget(nextRow, nextCol, widgetToAdd);
widgetsTable.getCellFormatter().setAlignment(nextRow, nextCol, HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);
if (spiral && nextCol > numberOfWidgetsToShow) {
shiftRight();
$(widgetsTable).css("left", -(widgetWidth + SPACING) + "px");
}
}
private void setHorizontalOrientation () {
orientation = HORIZONTAL;
// botones
previous = new T2VoiceButton (null,null,null);
next = new T2VoiceButton (null,null,null);
mainPanel.setWidget(0, 0, previous);
mainPanel.setWidget(0, 1, viewport);
mainPanel.setWidget(0, 2, next);
mainPanel.getFlexCellFormatter().setAlignment(0, 0, HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);
mainPanel.getFlexCellFormatter().setAlignment(0, 1, HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);
mainPanel.getFlexCellFormatter().setAlignment(0, 2, HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);
}
private void setVerticalOrientation () {
orientation = VERTICAL;
// botones
previous = new T2VoiceButton (null,null,null);
next = new T2VoiceButton (null,null,null);
mainPanel.setWidget(0, 0, previous);
mainPanel.setWidget(1, 0, viewport);
mainPanel.setWidget(2, 0, next);
mainPanel.getFlexCellFormatter().setAlignment(0, 0, HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);
mainPanel.getFlexCellFormatter().setAlignment(1, 0, HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);
mainPanel.getFlexCellFormatter().setAlignment(2, 0, HasHorizontalAlignment.ALIGN_CENTER, HasVerticalAlignment.ALIGN_MIDDLE);
}
private ClickHandler getpreviousClickHandler () {
switch (orientation) {
case HORIZONTAL:
return new ClickHandler () {
@Override
public void onClick(ClickEvent event) {
moveLeft();
}
};
case VERTICAL:
return new ClickHandler () {
@Override
public void onClick(ClickEvent event) {
moveUp();
}
};
default:
return null;
}
}
private ClickHandler getnextClickHandler () {
switch (orientation) {
case HORIZONTAL:
return new ClickHandler () {
@Override
public void onClick(ClickEvent event) {
moveRight();
}
};
case VERTICAL:
return new ClickHandler () {
@Override
public void onClick(ClickEvent event) {
moveDown();
}
};
default:
return null;
}
}
private void moveLeft() {
if (!spiral && movement > (numberOfWidgetsToShow - nextCol - 1)) {
movement--;
$(widgetsTable).animate("left: -=" + (widgetWidth + SPACING), animationEnabled ? animationTime : 0);
} else if (spiral) {
$(widgetsTable).animate("left: -=" + (widgetWidth + SPACING), animationEnabled ? animationTime : 0, new Function () {
@Override
public void f () {
shiftLeft();
$(widgetsTable).css("left", -(widgetWidth + SPACING + 1) + "px");
}
});
}
}
private void shiftLeft() {
Widget widgetToMove = widgetsList.get(0);
widgetsList.remove(0);
widgetsList.add(widgetToMove);
for (int column = 0; column < nextCol; column++) {
widgetsTable.setWidget(0, column, widgetsList.get(column));
}
}
private void moveRight() {
if (!spiral && movement < 1) {
movement++;
$(widgetsTable).animate("left: +=" + (widgetWidth + SPACING), animationEnabled ? animationTime : 0);
} else if (spiral) {
$(widgetsTable).animate("left: +=" + (widgetWidth + SPACING), animationEnabled ? animationTime : 0, new Function () {
@Override
public void f () {
shiftRight();
$(widgetsTable).css("left", -(widgetWidth + SPACING + 1) + "px");
}
});
}
}
private void shiftRight() {
Widget widgetToMove = widgetsList.get(nextCol - 1);
widgetsList.remove(nextCol - 1);
widgetsList.add(0, widgetToMove);
for (int column = 0; column < nextCol; column++) {
widgetsTable.setWidget(0, column, widgetsList.get(column));
}
}
private void moveUp() {
if (!spiral && movement < (nextRow - numberOfWidgetsToShow)) {
movement++;
$(widgetsTable).animate("top: -=" + (widgetHeight + SPACING), animationEnabled ? animationTime : 0);
} else if (spiral) {
$(widgetsTable).animate("top: -=" + (widgetHeight + SPACING), animationEnabled ? animationTime : 0, new Function () {
@Override
public void f () {
shiftUp();
$(widgetsTable).css("top", -(widgetHeight + SPACING + 1) + "px");
}
});
}
}
private void shiftUp () {
Widget widgetToMove = widgetsList.get(0);
widgetsList.remove(0);
widgetsList.add(widgetToMove);
for (int row = 0; row < nextRow; row++) {
widgetsTable.setWidget(row, 0, widgetsList.get(row));
}
}
private void moveDown() {
if (!spiral && movement > 0) {
movement--;
$(widgetsTable).animate("top: +=" + (widgetHeight + SPACING), animationEnabled ? animationTime : 0);
} else if (spiral) {
$(widgetsTable).animate("top: +=" + (widgetHeight + SPACING), animationEnabled ? animationTime : 0, new Function () {
@Override
public void f () {
shiftDown();
$(widgetsTable).css("top", -(widgetHeight + SPACING + 1) + "px");
}
});
}
}
private void shiftDown () {
Widget widgetToMove = widgetsList.get(nextRow - 1);
widgetsList.remove(nextRow - 1);
widgetsList.add(0, widgetToMove);
for (int row = 0; row < nextRow; row++) {
widgetsTable.setWidget(row, 0, widgetsList.get(row));
}
}
}
使用示例
// shows 5 widgets in the viewport
GWTCarousel horizontalSpiralCarousel = new GWTCarousel ();
horizontalSpiralCarousel.setAnimationEnabled(true);
horizontalSpiralCarousel.setSpiral(true);
horizontalSpiralCarousel.setMillisToMove(200);
horizontalSpiralCarousel.setOrientation(T2VoiceCarousel.HORIZONTAL);
horizontalSpiralCarousel.setNumberOfWidgetsToShow(5);
horizontalSpiralCarousel.setWidgetWidth(100.0);
horizontalSpiralCarousel.setWidgetHeight(100.0);
// adding widgets to carousel
HorizontalPanel maroonTile = new HorizontalPanel ();
$(maroonTile).css("background-color","maroon");
$(maroonTile).css("width", 100.0 + "px");
$(maroonTile).css("height", 100.0 + "px");
HorizontalPanel greenTile = new HorizontalPanel ();
$(greenTile).css("background-color","green");
$(greenTile).css("width", 100.0 + "px");
$(greenTile).css("height", 100.0 + "px");
HorizontalPanel redTile = new HorizontalPanel ();
$(redTile).css("background-color","red");
$(redTile).css("width", 100 + "px");
$(redTile).css("height", 100 + "px");
HorizontalPanel yellowTile = new HorizontalPanel ();
$(yellowTile).css("background-color","yellow");
$(yellowTile).css("width", 100.0 + "px");
$(yellowTile).css("height", 100.0 + "px");
HorizontalPanel blueTile = new HorizontalPanel ();
$(blueTile).css("background-color","blue");
$(blueTile).css("width", 100.0 + "px");
$(blueTile).css("height", 100.0 + "px");
horizontalCarousel.addWidget(maroonTile);
horizontalCarousel.addWidget(greenTile);
horizontalCarousel.addWidget(redTile);
horizontalCarousel.addWidget(blueTile);
horizontalCarousel.addWidget(yellowTile);