GWT CustomScrollPanel ví dụ

Question

Tôi đã tìm hiểu về CustomScrollPanel của GWT và cách bạn có thể tùy chỉnh thanh cuộn, nhưng tôi không thể tìm thấy bất kỳ ví dụ nào hoặc cách thiết lập nó. Có bất kỳ ví dụ nào ở đó hiển thị thanh cuộn tùy chỉnh đang được sử dụng không?

Answer 1

Đây là cách bạn sẽ tùy chỉnh thanh cuộn gốc, tuy nhiên bạn cũng có thể phát triển các lớp cuộn của riêng bạn để triển khai VerticalScrollbar và HorizontalScrollbar có thể tùy chỉnh nhiều hơn.

Resource (phong cách) định nghĩa:

public class ScrollResourcesContainer { 

    public interface ScrollPanelResources extends CustomScrollPanel.Resources 
    { 
     @Override 
     @Source({ "ScrollPanel.css", CustomScrollPanel.Style.DEFAULT_CSS }) 
     CustomScrollPanel.Style customScrollPanelStyle(); 
    } 

    public interface HorizontalResources extends NativeHorizontalScrollbar.Resources 
    { 
     @Override 
     @Source({ "HorizontalScrollbar.css", NativeHorizontalScrollbar.StyleTransparant.DEFAULT_CSS }) 
     NativeHorizontalScrollbar.Style nativeHorizontalScrollbarStyle(); 
    } 

    public interface VerticalResources extends NativeVerticalScrollbar.Resources 
    { 
     @Override 
     @Source({ "VerticalScrollbar.css", NativeVerticalScrollbar.StyleTransparant.DEFAULT_CSS }) 
     NativeVerticalScrollbar.Style nativeVerticalScrollbarStyle(); 
    } 
} 

Cách sử dụng qua CustomScrollPanel:

CustomScrollPanel csp = new CustomScrollPanel((ScrollResourcesContainer.ScrollPanelResources) GWT.create(ScrollResourcesContainer.ScrollPanelResources.class)); 
    csp.setHorizontalScrollbar(new NativeHorizontalScrollbar((HorizontalResources) GWT.create(HorizontalResources.class)), 
    AbstractNativeScrollbar.getNativeScrollbarHeight()); 
    csp.setVerticalScrollbar(new NativeVerticalScrollbar((VerticalResources) GWT.create(VerticalResources.class)), 
    AbstractNativeScrollbar.getNativeScrollbarWidth()); 

Answer 2

Để có được cuộn kiểu dáng đẹp cho thanh cuộn dọc trong gwt, bạn cần phải thêm mã sau đây trong VerticalScrollbar. css. Điều này sẽ không hoạt động đối với IE giống như gmail.

/* Turn on a 16x16 scrollbar */ 
::-webkit-scrollbar { 
    width: 16px; 
    height: 16px; 
} 

/* Turn on single button up on top, and down on bottom */ 
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment { 
    display: block; 
} 

/* Turn off the down area up on top, and up area on bottom */ 
::-webkit-scrollbar-button:vertical:start:increment, 
::-webkit-scrollbar-button:vertical:end:decrement { 
    display: none; 
} 

/* Place The scroll down button at the bottom */ 
::-webkit-scrollbar-button:end:increment { 
    background-image: url(images/scroll_cntrl_dwn.png); 
} 

/* Place The scroll up button at the up */ 
::-webkit-scrollbar-button:start:decrement { 
    background-image: url(images/scroll_cntrl_up.png); 
} 

/* Top area above thumb and below up button */ 
::-webkit-scrollbar-track-piece:vertical:start { 
    background-image: url(images/scroll_gutter_top.png), url(images/scroll_gutter_mid.png); 
    background-repeat: no-repeat, repeat-y; 
} 

/* Bottom area below thumb and down button */ 
::-webkit-scrollbar-track-piece:vertical:end { 
    background-image: url(images/scroll_gutter_btm.png), url(images/scroll_gutter_mid.png); 
    background-repeat: no-repeat, repeat-y; 
    background-position: bottom left, 0 0; 
} 

/* The thumb itself */ 
::-webkit-scrollbar-thumb:vertical { 
    height: 56px; 
    -webkit-border-image: url(images/scroll_thumb.png) 8 0 8 0 stretch stretch; 
    border-width: 8 0 8 0; 
} 

Answer 3

Nếu có ai quan tâm đến việc có CSS ​​cho cả dọc/ngang, thì đây là những gì tôi đang sử dụng.

HorizontalScrollbar.css

/* *********** 
* SCROLLBAR * 
* ***********/ 
.nativeHorizontalScrollbar::-webkit-scrollbar 
{ 
    width: 10px; 
    height: 10px; 
} 

/* ************* 
* BUTTON AREA * 
* *************/ 
.nativeHorizontalScrollbar::-webkit-scrollbar-button:horizontal 
{ 
    background-color: transparent; 
} 

/* Increment scroll left/right button. */ 
.nativeHorizontalScrollbar::-webkit-scrollbar-button:start:decrement, 
.nativeHorizontalScrollbar::-webkit-scrollbar-button:end:increment 
{ 
    display: block; 

    width: 10px; 
    height: 8px; 

    background-repeat: no-repeat; 
    background-size: 10px 8px; 
} 

/* Increment scroll left button. */ 
.nativeHorizontalScrollbar::-webkit-scrollbar-button:start:decrement 
{ 
    background-image: url('images/scroll-left.png'); 
} 

/* Increment scroll right button. */ 
.nativeHorizontalScrollbar::-webkit-scrollbar-button:end:increment 
{ 
    background-image: url('images/scroll-right.png'); 
} 

/* Jump left/right buttons. */ 
.nativeHorizontalScrollbar::-webkit-scrollbar-button:horizontal:start:increment, 
.nativeHorizontalScrollbar::-webkit-scrollbar-button:horizontal:end:decrement 
{ 
    display: none; 
} 

/* ****************** 
* TRACKING SECTION * 
* ******************/ 
.nativeHorizontalScrollbar::-webkit-scrollbar-track:horizontal 
{ 
    background-color: transparent; 
} 

/* Area between the thumb and the left button. */ 
.nativeHorizontalScrollbar::-webkit-scrollbar-track-piece:horizontal:start 
{ 

} 

/* Area between the thumb and and right button. */ 
.nativeHorizontalScrollbar::-webkit-scrollbar-track-piece:horizontal:end 
{ 

} 

/* 
* The tracking area. 
* This is the area that the thumb travels along. 
*/ 
.nativeHorizontalScrollbar::-webkit-scrollbar-track-piece 
{ 
    background-color: rgba(255, 255, 255, 0.1); 
} 

/* The tracking piece. */ 
.nativeHorizontalScrollbar::-webkit-scrollbar-thumb:horizontal 
{ 
    height: 15px; 

    background-color: rgba(255, 255, 255, 0.75); 

    border: none; 
    -webkit-border-top-left-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    -moz-border-radius-topleft: 6px; 
    -moz-border-radius-topright: 6px; 
    -moz-border-radius-bottomleft: 6px; 
    -moz-border-radius-bottomright: 6px; 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
    border-bottom-right-radius: 6px; 
} 

/* ******** 
* CORNER * 
* ********/ 
.nativeHorizontalScrollbar::-webkit-scrollbar-corner:horizontal 
{ 
    background-color: transparent; 
} 

/* ********* 
* RESIZER * 
* *********/ 
.nativeHorizontalScrollbar::-webkit-scrollbar-resizer:horizontal 
{ 
    background-color: transparent; 
} 

VerticalScrollbar.css /* *********** * cuộn * * ********* **/

.nativeVerticalScrollbar::-webkit-scrollbar 
{ 
    width: 10px; 
    height: 10px; 
} 

/* ************* 
* BUTTON AREA * 
* *************/ 
.nativeVerticalScrollbar::-webkit-scrollbar-button:vertical 
{ 
    background-color: transparent; 
} 

/* Increment scroll up/down buttons. */ 
.nativeVerticalScrollbar::-webkit-scrollbar-button:start:decrement, 
.nativeVerticalScrollbar::-webkit-scrollbar-button:end:increment 
{ 
    display: block; 

    width: 10px; 
    height: 8px; 

    background-repeat: no-repeat; 
    background-size: 10px 8px; 
} 

/* Increment scroll up button. */ 
.nativeVerticalScrollbar::-webkit-scrollbar-button:start:decrement 
{ 
    background-image: url('images/scroll-up.png'); 
} 

/* Increment scroll down button. */ 
.nativeVerticalScrollbar::-webkit-scrollbar-button:end:increment 
{ 
    background-image: url('images/scroll-down.png'); 
} 

/* Jump up/down buttons. */ 
.nativeVerticalScrollbar::-webkit-scrollbar-button:vertical:start:increment, 
.nativeVerticalScrollbar::-webkit-scrollbar-button:vertical:end:decrement 
{ 
    display: none; 
} 

/* ****************** 
* TRACKING SECTION * 
* ******************/ 
.nativeVerticalScrollbar::-webkit-scrollbar-track:vertical 
{ 
    background-color: transparent; 
} 

/* Area between the thumb and the up button. */ 
.nativeVerticalScrollbar::-webkit-scrollbar-track-piece:vertical:start 
{ 

} 

/* Area between the thumb and and down button. */ 
.nativeVerticalScrollbar::-webkit-scrollbar-track-piece:vertical:end 
{ 

} 

/* 
* The tracking area. 
* This is the area that the thumb travels along. 
*/ 
.nativeVerticalScrollbar::-webkit-scrollbar-track-piece 
{ 
    background-color: rgba(255, 255, 255, 0.1); 
} 

/* The tracking piece. */ 
.nativeVerticalScrollbar::-webkit-scrollbar-thumb:vertical 
{ 
    height: 15px; 

    background-color: rgba(255, 255, 255, 0.75); 

    border: none; 
    -webkit-border-top-left-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    -moz-border-radius-topleft: 6px; 
    -moz-border-radius-topright: 6px; 
    -moz-border-radius-bottomleft: 6px; 
    -moz-border-radius-bottomright: 6px; 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
    border-bottom-right-radius: 6px; 
} 

/* ******** 
* CORNER * 
* ********/ 
.nativeVerticalScrollbar::-webkit-scrollbar-corner:vertical 
{ 
    background-color: transparent; 
} 

/* ********* 
* RESIZER * 
* *********/ 
.nativeVerticalScrollbar::-webkit-scrollbar-resizer:vertical 
{ 
    background-color: transparent; 
}