Directory

nanoscrollpanel

Provide a simplistic way of implementing Mac OS X Lion-styled scrollbars

View larger

Close

NanoScrollPanel wraps nanoScroller.js (http://jamesflorentino.github.io/nanoScrollerJS/) in order to provide OS X experience when scrolling the content.

How to use:

1. Add following settings to your widget set configure file.

2. Create a new NanoScrollPanel, e.g. NanoScrollPanel nPanel = new NanoScrollPanel();

Sample code

NanoScrollPanel nPanel = new NanoScrollPanel();
nPanel.setWidth("400px");
nPanel.setHeight("400px");
        
final VerticalLayout vLayout = new VerticalLayout();
for(int i=0; i<50; ++i) {
    vLayout.addComponent(new Label("This is a test "+i+"."));
}
        
nPanel.setContent(vLayout);

package org.vaadin.hhe.nanoscrollpanel.demo;

import org.vaadin.hhe.nanoscrollpanel.NanoScrollPanel;
import org.vaadin.hhe.nanoscrollpanel.NanoScrollPanel.NanoScrollEvent;
import org.vaadin.hhe.nanoscrollpanel.NanoScrollPanel.NanoScrollPanelListener;

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.Component;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

public class NanoScrollPanelDemoUI extends UI {

    private static final long serialVersionUID = 7992657815796718844L;
    
    private Component scrollToTarget = null;
    
    @SuppressWarnings("serial")
    @Override
    protected void init(VaadinRequest request) {
        final NanoScrollPanel nPanel = new NanoScrollPanel();
        nPanel.setWidth("400px");
        nPanel.setHeight("400px");
        // flash user there are more content
        nPanel.flashScrollbar();
        nPanel.setPreventPageScrolling(true);
        nPanel.addNanoScrollListener(new NanoScrollPanelListener() {
            @Override
            public void onScroll(NanoScrollEvent event) {
                Notification.show("NanoScrollEvent catched",
                        "Event type is "+event.getType(),
                        Notification.Type.HUMANIZED_MESSAGE);
            }
        });
        
        final VerticalLayout vLayout = new VerticalLayout();
        for(int i=0; i<50; ++i) {
            Label l = new Label("This is a test "+i+".");
            l.setId("Label"+i);
            if(i==25) scrollToTarget = l;
            vLayout.addComponent(l);
        }
        
        Button btn = new Button("Add more");
        vLayout.addComponent(btn);
        btn.addClickListener(new ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                vLayout.addComponent(new Label("This is more and more test."));
            }
        });
        
        Button btn2 = new Button("Remove one");
        vLayout.addComponent(btn2);
        btn2.addClickListener(new ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                if(vLayout.getComponentCount()>54)
                    vLayout.removeComponent(vLayout.getComponent(vLayout.getComponentCount()-1));
            }
        });
        
        Button btn3 = new Button("Shrink");
        vLayout.addComponent(btn3);
        btn3.addClickListener(new ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                nPanel.setHeight(nPanel.getHeight()*0.8f, nPanel.getHeightUnits());
            }
        });
        
        Button btn4 = new Button("Expand");
        vLayout.addComponent(btn4);
        btn4.addClickListener(new ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                nPanel.setHeight(nPanel.getHeight()/0.8f, nPanel.getHeightUnits());
            }
        });
        
        nPanel.setContent(vLayout);
        
        VerticalLayout overallLayout = new VerticalLayout();
        overallLayout.addComponent(nPanel);
        
        Button flashBtn = new Button("Flash Scrollbar");
        flashBtn.addClickListener(new ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                nPanel.flashScrollbar();
            }
        });
        overallLayout.addComponent(flashBtn);
        
        Button scrollTopBtn = new Button("Scroll To Top");
        scrollTopBtn.addClickListener(new ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                nPanel.flashScrollbar();
                nPanel.scrollToTop();
            }
        });
        overallLayout.addComponent(scrollTopBtn);
        
        Button scrollBottomBtn = new Button("Scroll To Bottom");
        scrollBottomBtn.addClickListener(new ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                nPanel.flashScrollbar();
                nPanel.scrollToBottom();
            }
        });
        overallLayout.addComponent(scrollBottomBtn);
        
        Button scrollToBtn = new Button("Scroll To 25");
        scrollToBtn.addClickListener(new ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                nPanel.flashScrollbar();
                nPanel.scrollTo(scrollToTarget);
            }
        });
        overallLayout.addComponent(scrollToBtn);
        
        setContent(overallLayout);
    }
}

Links

• Online Demo
• Source Code
• Issue Tracker

Compatibility