GWT NativeVerticalScrollbar CSS example

Question

I just discovered the "CustomScrollPanel" and it seems to be a great piece of GWT. I also noticed that is is also possible to add a custom "NativeVerticalScrollbar".

However, I could not find out so far how to apply CSS to this object. I searched the web but did not find anything. In the source repository on github I discovered the file https://github.com/gwtproject/gwt/blob/master/user/src/com/google/gwt/user/client/ui/NativeVerticalScrollbar.css however, it is empty.

So, can anybody please give an example what kind of css can be applied in order to style the scrollbar?

Answer 1

You you familiar with ClientBundle? Take a look at the source code of the CustomScrollPanel or the NativeVerticalScrollbar

They both have a declarion of a Resources interface, all you need to do is to extend this interface and bundle a new CSS (or GSS) with your style.

This is the current Resources interface for the NativeVerticalScrollbar

  /**
   * A ClientBundle of resources used by this widget.
   */
  public interface Resources extends ClientBundle {
    /**
     * The styles used in this widget.
     */
    @Source(Style.DEFAULT_CSS)
    Style nativeVerticalScrollbarStyle();
  }

Create the CSS (or GSS) that you want, customize it away. It has to respect the Style Interface declaration (and the compiler fails if you don't)

  public interface MyNewResource extends com.google.gwt.user.client.ui.NativeVerticalScrollbar.Resource {
    /**
     * The styles used in this widget.
     */
    @Source("/PATH_TO_YOUR_CSS/newCss.css")
    com.google.gwt.user.client.ui.NativeVerticalScrollbar.Style nativeVerticalScrollbarStyle();
  }

Then when you create a new widget, just pass MyNewResource instance to the widget

 MyNewResource resources = GWT.create(MyNewResource.class)
 NativeVerticalScrollbar myScrollBar = new NativeVerticalScrollbar(resources);