GWT - Widget ScrollPanel

introduzione

Il ScrollPanel widget rappresenta un semplice pannello che avvolge il suo contenuto in un'area scorrevole.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per com.google.gwt.user.client.ui.ScrollPanel classe -

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

Costruttori di classi

Sr.No.	Costruttore e descrizione
1	ScrollPanel() Crea un pannello di scorrimento vuoto.
2	ScrollPanel(Widget child) Crea un nuovo pannello di scorrimento con il widget figlio specificato.

Metodi di classe

Sr.No.	Nome e descrizione della funzione
1	HandlerRegistration addScrollHandler(ScrollHandler handler) Aggiunge un gestore ScrollEvent.
2	void addScrollListener(ScrollListener listener) Deprecato. Utilizza invece addScrollHandler (com.google.gwt.event.dom.client.ScrollHandler)
3	void ensureVisible(UIObject item) Assicura che l'elemento specificato sia visibile, regolando la posizione di scorrimento del pannello.
4	protected Element getContainerElement() Sostituisci questo metodo per specificare che un elemento diverso dall'elemento root sia il contenitore del widget figlio del pannello.
5	int getHorizontalScrollPosition() Ottiene la posizione di scorrimento orizzontale.
6	int getScrollPosition() Ottiene la posizione di scorrimento verticale.
7	void onResize() Questo metodo deve essere chiamato ogni volta che la dimensione dell'implementatore è stata modificata.
8	void removeScrollListener(ScrollListener listener) Deprecato. Utilizza invece il metodo HandlerRegistration.removeHandler () sull'oggetto restituito da addScrollHandler (com.google.gwt.event.dom.client.ScrollHandler)
9	void scrollToBottom() Scorri fino alla fine di questo pannello.
10	void scrollToLeft() Scorri all'estrema sinistra di questo pannello.
11	void scrollToRight() Scorri fino all'estrema destra di questo pannello.
12	void scrollToTop() Scorri fino all'inizio di questo pannello.
13	void setAlwaysShowScrollBars(boolean alwaysShow) Determina se questo pannello mostra sempre le sue barre di scorrimento o solo quando necessario.
14	void setHeight(java.lang.String height) Imposta l'altezza dell'oggetto.
15	void setHorizontalScrollPosition(int position) Imposta la posizione di scorrimento orizzontale.
16	void setScrollPosition(int position) Imposta la posizione di scorrimento verticale.
17	void setSize(java.lang.String width, java.lang.String height) Imposta la dimensione dell'oggetto.
18	void setWidth(java.lang.String width) Imposta la larghezza dell'oggetto.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di widget ScrollPanel

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget ScrollPanel in GWT. Segui i passaggi seguenti per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione .
2	Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni invariato il resto dei file.
3	Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato 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>

Di seguito è riportato il contenuto del file del foglio di stile modificato 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;
}

Di seguito è riportato il contenuto del file host HTML modificato 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>

Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java che dimostrerà l'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 volta che sei pronto con tutte le modifiche fatte, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato:

↰ Previous page