GWT旋转木马小部件

我目前正在从事一个GWT项目，其中我需要使用一个“carousel”小部件。carousel小部件应该显示信息片段和两个箭头-当用户单击其中一个箭头时，内容会随着动画移动并替换为新内容

我一直在查看可用的小部件库，但“carousel”小部件似乎没有那么可用。我找到的唯一真正的候选者是gwt yui carousel小部件（见下面的链接），但这似乎是一个超负荷的资源——虽然它几乎完全符合我的需要，但我必须用MVP术语显示视图/演示者，而不是显示简单的图像

下面是正在运行的小部件：

（从这里传来：）

有没有更好的旋转木马小部件，我不知道？或者我应该扩展现有的一个来创建所需的效果？你会推荐使用gwt yui旋转木马吗（我不这么认为）？ 如果没有更好的选择，你认为自己创建小部件是个好主意吗

请注意，我认为关键的是，在这里，我必须显示presenter/视图，它将通过箭头单击等方式获取数据库中的数据-因此需要对现有小部件进行定制，或者所选小部件应该能够显示GWT小部件的列表

同样，我不认为我可以使用现有的常用旋转木马小部件，因为这些小部件不是“面向gwt的”，不支持视图/演示者和所有这些gwt东西；）

任何答案都将不胜感激：）

致以最良好的祝愿

---

Nils

不知道任何可用的实现，但您可以立即编写此小部件

创建包含URL列表（图像）的小部件：

CarouselWidget（ArrayList URL）扩展水平面板

然后将两个按钮和所需图像添加到面板中以显示

左按钮/image/image/image…/图像/右键

图像从url列表中馈送，单击左或右按钮时 移动起始索引--或+++。。。并刷新图像视图

---

从起始索引计算数组中的“真实”索引。

另一个自制解决方案可以基于GWT LayoutPanel。这将允许在LayoutPanel实现AnimatedLayout界面时显示滚动的动画

   public class CarouselPanel extends LayoutPanel {

    int itsCurrentWidget = 0;
    private ArrayList<Widget> itsWidgets;
    private Button itsLeftButton;
    private Button itsRightButton;

和正确的小部件：

    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());
    }
}

您还可以通过向右（或左）小部件添加click listener，将其用作滚动按钮

滚动方法可以如下所示：

    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);
}

---

我希望它能有所帮助。

这是一个旋转木马实现，它使用和。它可以水平使用，也可以垂直使用。使用gwt查询的目的是在旋转木马移动时启用动画。此外，它支持螺旋行为。我没有向代码中添加java文档，但只要您阅读，就会发现解释性注释

希望这会有用

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));
    }
}

}

 .sideCarousel {
    z-index: 0;
}

.centerCarousel {
    z-index: 1;
}

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);