2

私は現在、「カルーセル」ウィジェットを使用する必要があるGWTプロジェクトに取り組んでいます。カルーセルウィジェットは、情報と2つの矢印を表示することになっています。ユーザーが矢印の1つをクリックすると、コンテンツがアニメーションで移動され、新しいコンテンツに置き換えられます。

利用可能なウィジェットライブラリを調べてきましたが、「カルーセル」ウィジェットは利用できないようです。私が見つけた唯一の本当の候補はgwt-yui-carouselウィジェット（以下のリンクを参照）ですが、これはリソースの過負荷のようです-それは私が必要とするものをほぼ正確に実行しますが、単純な画像を表示する代わりに、ビュー/プレゼンターをMVP用語で表示します。

実行中のウィジェットは次のとおりです：http： //gwt-yui-carousel.googlecode.com/svn/trunk/www/com.gwtyuicarousel.javascriptload.JavaScriptLoad/javascriptload.html

（ここから来る：http ：//code.google.com/p/gwt-yui-carousel/ ）。

私が知らないより良いカルーセルウィジェットが利用可能ですか？または、既存のものを拡張して、目的の効果を作成する必要がありますか？gwt-yui-carouselの使用をお勧めしますか（私はそうは思いません）？これ以上の選択肢がない場合は、自分でウィジェットを作成するのが良いと思いますか？

ここで重要なのは、プレゼンター/ビューを表示する必要があることです。これにより、矢印のクリックなどでデータベースのデータがフェッチされます。したがって、既存のウィジェットのカスタマイズが必要になるか、選択されます。ウィジェットは、GWTウィジェットのリストを表示できる必要があります。

繰り返しになりますが、既存の通常のカルーセルウィジェットの1つを使用できるとは思いません。なぜなら、それらは「gwt指向」ではなく、ビュー/プレゼンターやこのすべてのgwtのものをサポートできなかったからです;）

どんな答えでも大歓迎です:)

よろしくお願いします、

ニルス

4

3 に答える 3

1

別の自家製ソリューションは、GWT LayoutPanel に基づくことができます。これにより、LayoutPanel が AnimatedLayout インターフェイスを実装するため、スクロールのアニメーションを表示できます。

   public class CarouselPanel extends LayoutPanel {

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

addToCarousel(Widget widget) はウィジェットをウィジェット リストに追加しますが、パネルには追加しません。パネル内の実際のウィジェットは、表示されるべきものです。

表示される中央のウィジェットのレイアウトは、次の方法で制御できます。

    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 メソッドに注意してください。

センター ウィジェットの z-index を制御する CSS ルールを定義することを忘れないでください。

 .sideCarousel {
    z-index: 0;
}

.centerCarousel {
    z-index: 1;
}

それが役立つことを願っています。

于 2011-03-26T13:51:38.967 に答える
1

利用可能な実装については知りませんが、このウィジェットをすぐに作成できます。

URL (画像) のリストを保持するウィジェットを作成します。

CarouselWidget(ArrayList<String> urls) extends HorizontalPanel

次に、パネルに 2 つのボタンと表示する画像を追加します。

左ボタン/ 画像 / 画像 / 画像 ... / 画像 /右ボタン

画像は URL リストからフィードされ、左または右のボタンがクリックされると、開始インデックス -- または ++ ... を移動し、画像ビューを更新します。

開始インデックスから、配列内の「実際の」インデックスを計算します。

于 2010-02-22T15:20:31.720 に答える