Descubrí el CustomScrollPanel de GWT y cómo puede personalizar la barra de desplazamiento, pero no encuentro ningún ejemplo ni cómo configurarlo. ¿Hay algún ejemplo que muestre barras de desplazamiento personalizadas en uso?GWT CustomScrollPanel ejemplo
Respuesta
Así es como personalizaría las barras de desplazamiento nativas, sin embargo, también podría desarrollar sus propias clases de barra de desplazamiento que implementan VerticalScrollbar y HorizontalScrollbar que son mucho más personalizables.
de recursos (estilo) definiciones:
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();
}
}
uso a través de 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());
Para obtener las barras de desplazamiento elegante de la barra de desplazamiento vertical en GWT, es necesario añadir siguiente código en el verticalScrollBar. css. que no funcionará para IE al igual que 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;
}
del mismo modo que puede hacer para la barra de desplazamiento horizontal también. Por favor, consulte el siguiente enlace para más detalles. http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task – Saritha
Gracias por VerticalScrollbar.css, esto realmente ayudó mucho. ¿Tienes una muestra HorizontalScrollbar.css? – MattWeiler
Si alguien está interesado en tener el CSS tanto vertical como horizontal, esto es lo que estoy usando.
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 /* *********** * * SCROLLBAR * ********* **/
.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;
}
- 1. Simple GWT OpenID Ejemplo
- 2. GWT MVP Ejemplo
- 3. GWT + UiBinder + Gin + + Guice JDO + GAE ejemplo
- 4. gwt-openlayers con el ejemplo de openstreetmap
- 5. ¿Dónde puedo encontrar un buen ejemplo de iPhone/GWT/AppEngine?
- 6. Diferencia entre gwt, gwt-rpc, ext-gwt, smart gwt
- 7. Ext GWT vs GWT-EXT
- 8. GWT code O GWT Designer?
- 9. GWT: UiBinder o GWT Designer?
- 10. Ejemplo sencillo para cargar datos en un ListStore Sencha GXT (3.0) usando una llamada GWT RPC?
- 11. Escalando los "contactos" de gwt (proyecto de ejemplo) AppController con MVP
- 12. Cómo configurar Ext GWT con GWT Designer?
- 13. Diferencia entre gwt-ext y ext-gwt
- 14. Migrar GWT 2.0.4 Proyecto de GWT 2.1.0
- 15. GWT: cómo cambiar el color fila de GWT CellTable
- 16. Imagen en botón GWT
- 17. GWT removeClickHandler
- 18. Andamios GWT
- 19. Aprendiendo GWT
- 20. GWT IncompatibleRemoteServiceException
- 21. GWT Compilación
- 22. GWT: Gotcha's
- 23. GWT Recorte de imagen
- 24. ejemplo
- 25. GWT SimplePager - LastPageButton deshabilitado?
- 26. GWT Anchor to Place?
- 27. GWT SE aplicación amigable
- 28. Reemplazo GWT para java.net.URL
- 29. Marco de GWT Editor
- 30. GWT botón Atrás navegador
¿Los archivos CSS son los que permiten la personalización? ¿podría proporcionar una muestra para VerticalScrollbar.css? – sworded
Sí, lo son, pero no hay mucho que pueda hacer porque están utilizando las barras de desplazamiento nativas, si desea mucha personalización, es posible que desee crear una implementación de DOM completamente personalizada. Por ejemplo, debe consultar la fuente de GWT descomprimiendo gwt-user.jar y buscando en com \ google \ gwt \ user \ client \ ui en AbstractNativeScrollbar.java y NativeVerticalScrollbar.java NativeVerticalScrollbar.ui.xml y NativeVerticalScrollbarTransparent.css. – LINEMAN78