GWT - Widget TextArea

introduction

le TextArea widget représente une zone de texte qui permet de saisir plusieurs lignes de texte.

Déclaration de classe

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

public class TextArea
   extends TextBoxBase
      implements HasDirection

Règles de style CSS

Les règles de style CSS par défaut suivantes seront appliquées à tous les widgets TextBox. Vous pouvez le remplacer selon vos besoins.

.gwt-TextArea {}

.gwt-TextArea-readonly {}

Constructeurs de classe

N ° Sr.	Constructeur et description
1	TextArea() Crée une zone de texte vide.

Méthodes de classe

N ° Sr.	Nom de la fonction et description
1	int getCharacterWidth() Obtient la largeur demandée de la zone de texte (ce n'est pas une valeur exacte, car tous les caractères ne sont pas créés égaux).
2	int getCursorPos() Obtient la position actuelle du curseur (cela sert également de début de la sélection de texte).
3	HasDirection.Direction getDirection() Obtient la directionnalité du widget.
4	int getSelectionLength() Obtient la longueur de la sélection de texte actuelle.
5	int getVisibleLines() Obtient le nombre de lignes de texte visibles.
6	void setCharacterWidth(int width) Définit la largeur demandée de la zone de texte (ce n'est pas une valeur exacte, car tous les caractères ne sont pas créés égaux).
sept	void setDirection(HasDirection.Direction direction) Définit la directionnalité d'un widget.
8	void setVisibleLines(int lines) Définit le nombre de lignes de texte visibles.

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.FocusWidget
com.google.gwt.user.client.ui.TextBoxBase
java.lang.Object

Exemple de widget TextBox

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget TextBox 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;
}

.gwt-TextArea {
   color: green; 
}

.gwt-TextArea-readonly {
   background-color: yellow;	
}

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>TextArea 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 TextBox.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      //create textarea elements
      TextArea textArea1 = new TextArea(); 
      TextArea textArea2 = new TextArea();

      //set width as 10 characters
      textArea1.setCharacterWidth(20);
      textArea2.setCharacterWidth(20);
     
      //set height as 5 lines
      textArea1.setVisibleLines(5);
      textArea2.setVisibleLines(5);
      
      //add text to text area
      textArea2.setText(" Hello World! \n Be Happy! \n Stay Cool!");

      //set textbox as readonly
      textArea2.setReadOnly(true);

      // Add text boxes to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.add(textArea1);
      panel.add(textArea2);

      RootPanel.get("gwtContainer").add(panel);
   }	
}

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