GWT - Widget ScrollPanel

introduction

le ScrollPanel widget représente un panneau simple qui enveloppe son contenu dans une zone de défilement.

Déclaration de classe

Voici la déclaration pour com.google.gwt.user.client.ui.ScrollPanel classe -

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

Constructeurs de classe

N ° Sr.	Constructeur et description
1	ScrollPanel() Crée un panneau de défilement vide.
2	ScrollPanel(Widget child) Crée un nouveau panneau de défilement avec le widget enfant donné.

Méthodes de classe

N ° Sr.	Nom de la fonction et description
1	HandlerRegistration addScrollHandler(ScrollHandler handler) Ajoute un gestionnaire ScrollEvent.
2	void addScrollListener(ScrollListener listener) Obsolète. Utilisez plutôt addScrollHandler (com.google.gwt.event.dom.client.ScrollHandler)
3	void ensureVisible(UIObject item) Garantit que l'élément spécifié est visible, en ajustant la position de défilement du panneau.
4	protected Element getContainerElement() Remplacez cette méthode pour spécifier qu'un élément autre que l'élément racine soit le conteneur du widget enfant du panneau.
5	int getHorizontalScrollPosition() Obtient la position de défilement horizontal.
6	int getScrollPosition() Obtient la position de défilement vertical.
sept	void onResize() Cette méthode doit être appelée chaque fois que la taille de l'implémenteur a été modifiée.
8	void removeScrollListener(ScrollListener listener) Obsolète. Utilisez plutôt la méthode HandlerRegistration.removeHandler () sur l'objet renvoyé par addScrollHandler (com.google.gwt.event.dom.client.ScrollHandler)
9	void scrollToBottom() Faites défiler vers le bas de ce panneau.
dix	void scrollToLeft() Faites défiler vers l'extrême gauche de ce panneau.
11	void scrollToRight() Faites défiler vers l'extrême droite de ce panneau.
12	void scrollToTop() Faites défiler vers le haut de ce panneau.
13	void setAlwaysShowScrollBars(boolean alwaysShow) Définit si ce panneau affiche toujours ses barres de défilement, ou uniquement lorsque cela est nécessaire.
14	void setHeight(java.lang.String height) Définit la hauteur de l'objet.
15	void setHorizontalScrollPosition(int position) Définit la position de défilement horizontal.
16	void setScrollPosition(int position) Définit la position de défilement vertical.
17	void setSize(java.lang.String width, java.lang.String height) Définit la taille de l'objet.
18	void setWidth(java.lang.String width) Définit la largeur de l'objet.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

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

Exemple de widget ScrollPanel

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget ScrollPanel dans GWT. Suivez les étapes suivantes pour mettre à jour l'application GWT que nous avons créée dans GWT - Chapitre Créer une application -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application .
2	Modifiez HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié 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>

Voici le contenu du fichier de feuille de style modifié 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;
}

Voici le contenu du fichier hôte HTML modifié 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>

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java qui démontrera l'utilisation du 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);
   }  
}

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode développement comme nous l'avons fait dans le chapitre GWT - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant -

↰ Previous page