GWT - Widget ScrollPanel

Introducción

los ScrollPanel widget representa un panel simple que envuelve su contenido en un área desplazable.

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.ScrollPanel clase -

public class ScrollPanel
   extends SimplePanel
      implements SourcesScrollEvents, HasScrollHandlers,
         RequiresResize, ProvidesResize

Constructores de clases

No Señor.	Constructor y descripción
1	ScrollPanel() Crea un panel de desplazamiento vacío.
2	ScrollPanel(Widget child) Crea un nuevo panel de desplazamiento con el widget secundario dado.

Métodos de clase

No Señor.	Nombre y descripción de la función
1	HandlerRegistration addScrollHandler(ScrollHandler handler) Agrega un controlador ScrollEvent.
2	void addScrollListener(ScrollListener listener) Obsoleto. Utilice addScrollHandler (com.google.gwt.event.dom.client.ScrollHandler) en su lugar
3	void ensureVisible(UIObject item) Asegura que el elemento especificado sea visible, ajustando la posición de desplazamiento del panel.
4	protected Element getContainerElement() Reemplace este método para especificar que un elemento que no sea el elemento raíz sea el contenedor del widget secundario del panel.
5	int getHorizontalScrollPosition() Obtiene la posición de desplazamiento horizontal.
6	int getScrollPosition() Obtiene la posición de desplazamiento vertical.
7	void onResize() Este método se debe llamar siempre que se haya modificado el tamaño del implementador.
8	void removeScrollListener(ScrollListener listener) Obsoleto. Utilice el método HandlerRegistration.removeHandler () en el objeto devuelto por addScrollHandler (com.google.gwt.event.dom.client.ScrollHandler) en su lugar
9	void scrollToBottom() Desplácese hasta la parte inferior de este panel.
10	void scrollToLeft() Desplácese hasta el extremo izquierdo de este panel.
11	void scrollToRight() Desplácese hasta el extremo derecho de este panel.
12	void scrollToTop() Desplácese hasta la parte superior de este panel.
13	void setAlwaysShowScrollBars(boolean alwaysShow) Establece si este panel siempre muestra sus barras de desplazamiento o solo cuando es necesario.
14	void setHeight(java.lang.String height) Establece la altura del objeto.
15	void setHorizontalScrollPosition(int position) Establece la posición de desplazamiento horizontal.
dieciséis	void setScrollPosition(int position) Establece la posición de desplazamiento vertical.
17	void setSize(java.lang.String width, java.lang.String height) Establece el tamaño del objeto.
18	void setWidth(java.lang.String width) Establece el ancho del objeto.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Panel
com.google.gwt.user.client.ui.SimplePanel
java.lang.Object

Ejemplo de widget ScrollPanel

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget ScrollPanel en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

A continuación se muestra el contenido del archivo de hoja de estilo modificado war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

A continuación se muestra el contenido del archivo de host HTML modificado war/HelloWorld.html.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>ScrollPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el uso del widget ScrollPanel.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.ScrollPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      // Create scrollable text 
      HTML contents = new HTML("This is a ScrollPanel."
         +" By putting some fairly large contents in the middle"
         +" and setting its size explicitly, it becomes a scrollable area"
         +" within the page, but without requiring the use of an IFRAME."
         +" Here's quite a bit more meaningless text that will serve primarily"
         +" to make this thing scroll off the bottom of its visible area."
         +" Otherwise, you might have to make it really, really"
         +" small in order to see the nifty scroll bars!");

      //create scrollpanel with content
      ScrollPanel scrollPanel = new ScrollPanel(contents);
      scrollPanel.setSize("400px", "100px");

      DecoratorPanel decoratorPanel = new DecoratorPanel();

      decoratorPanel.add(scrollPanel);

      // Add the widgets to the root panel.
      RootPanel.get().add(decoratorPanel);
   }  
}

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

↰ Previous page