GWT旋转木马插件
问题描述：
我目前工作的一个GWT项目，我需要使用“旋转木马”窗口小部件。旋转木马小部件应该显示多条信息和2个箭头 - 当用户点击其中一个箭头时，内容将随动画移动并替换为新内容。GWT旋转木马插件
我一直在寻找通过可用的插件库，但“旋转木马”插件似乎并没有是可用的。我发现的唯一真正的候选人是gwt-yui-carousel小部件（请参阅下面的链接），但这似乎是资源的重载 - 虽然它几乎完全符合我的需求，但不显示简单图像，我将拥有以MVP术语显示视图/演示者。
（从这里来的：http://code.google.com/p/gwt-yui-carousel/）。
是否有更好的旋转木马插件可用，我会不知道？或者我应该扩展一个现有的创建所需的效果？你会推荐使用gwt-yui-carousel（我不这么认为）？ 如果没有更好的选择，你认为自己创建widget会是一个好主意吗？
请注意，我认为关键的是，在这里，我将不得不显示演示者/视图，它将通过箭头点击等获取DataBase中的数据 - 所以需要定制现有的窗口小部件，或者所选的小部件应该能够显示GWT小部件的列表。
同样，我不认为我可以使用现有常用的旋转木马小部件之一，因为这些都不是“GWT为本”，不能支持视图/主持人和所有这些东西GWT）
任何答案将不胜感激:)
最好的问候，
尼尔斯
答
不知道任何可用的执行，但你可以写这个小部件在任何时间。
创建窗口小部件拿着URL列表（你的图像）：
CarouselWidget(ArrayList<String> urls) extends HorizontalPanel
然后添加到面板上的两个按钮和所需要的图像显示。
左键 /图像/影像/图像... /图片/ 右按钮
图像是从您的网址列表饲料和左或右键单击 当您移动起点index - 或++ ...并刷新图像视图。
从您的阵列中计算出的“真实”指数的起始索引。
答
另一个自家酿制的解决方案可以基于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());
}
}
还可以使用的右（或左）widget作为滚动按钮通过添加点击监听器。
和滚动方法可以是这样的：
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);
}
注意最后的动画的方法来移动部件的一路畅通。
不要忘记定义的CSS规则来控制*部件的z指数：
.sideCarousel {
z-index: 0;
}
.centerCarousel {
z-index: 1;
}
我希望它帮助。
答
这是一个传送带实施，它使用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));
}
}
}
USAGE例
// 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);