Implement sliding panel with GWT layout panel

  • Posted on: 14 June 2014
  • By: Zhijun Chen

Google Web Toolkit doesn't come with sliding widget which is quite common in other JavaScript library. However, using LayoutPanel provided by GWT, we can easily implement sliding widget by using CSS and animation effect. The following code gives an example of horizontal sliding widget.

 // import statements
public class SlidingPanel extends ResizeComposite implements HasWidgets, HasOneWidget {

  private final LayoutPanel layoutPanel = new LayoutPanel();
  private int currentIndex = -1;

  /**
   * Default constructor
   */
  public SlidingPanel() {
    initWidget(layoutPanel);
  }

  /**
   * Add a widget
   *
   * @param w the widget to be added
   */
  public void add(IsWidget w) {
    add(w.asWidget());
  }

  /**
   * Add a widget
   */
  public void add(Widget w) {
    layoutPanel.add(w);
    if (currentIndex < 0) {
      currentIndex = 0;
    } else {
      layoutPanel.setWidgetLeftWidth(w, 100, Unit.PCT, 100, Unit.PCT);
    }
  }

  /**
   * Clear the widgets
   */
  public void clear() {
    setWidget(null);
  }

  public Widget getWidget() {
    return layoutPanel.getWidget(currentIndex);
  }

  /**
   * @return widget iterator
   */
  public Iterator iterator() {
    return layoutPanel.iterator();
  }

  /**
   * Remove a widget
   *
   * @param w widget to be removed
   * @return result
   */
  public boolean remove(Widget w) {
    return layoutPanel.remove(w);
  }

  /**
   * Set the widget
   *
   * @param w the widget
   */
  public void setWidget(IsWidget w) {
    if (w != null) {
      setWidget(asWidgetOrNull(w));
    }
  }

  @Override
  public void setWidget(Widget widget) {
    int newIndex = layoutPanel.getWidgetIndex(widget);

    if (newIndex < 0) {
      newIndex = layoutPanel.getWidgetCount();
      add(widget);
    }

    show(newIndex);
  }

  private void show(int newIndex) {
    if (newIndex == currentIndex) {
      return;
    }

    boolean fromLeft = newIndex < currentIndex;
    final Widget current = layoutPanel.getWidget(currentIndex);
    Widget widget = layoutPanel.getWidget(newIndex);
    currentIndex = newIndex;

    layoutPanel.setWidgetLeftWidth(widget, 0, Unit.PCT, 100, Unit.PCT);
    if (fromLeft) {
      layoutPanel.setWidgetLeftWidth(current, 100, Unit.PCT, 100, Unit.PCT);
    } else {
      layoutPanel.setWidgetLeftWidth(current, -100, Unit.PCT, 100, Unit.PCT);
    }
    layoutPanel.animate(500);
  }
}

So now we've created a custom sliding widget, the way to use it is also very straightforward: Add all the widgets, and show one of the widgets when needed.

SlidingPanel slidingPanel = new SlidingPanel();
FlowPanel panel1 = new FlowPanel();
slidingPanel.add(panel1);
FlowPanel panel2 = new FlowPanel();
slidingPanel.add(panel2);

// slide when needed
slidingPanel.setWidget(panel2);

The custom sliding widget has been tested using two widgets.

Tags: 

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.