이것은 회전식 구현이며 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);