GWT - Widget RichTextArea

introduction

le RichTextAreawidget représente un éditeur de texte riche qui permet un style et une mise en forme complexes. Étant donné que certains navigateurs ne prennent pas en charge l'édition de texte enrichi et que d'autres ne prennent en charge qu'un sous-ensemble limité de fonctionnalités, il existe deux interfaces de formateur, accessibles via getBasicFormatter () et getExtendedFormatter ().

Un navigateur qui ne prend pas du tout en charge l'édition de texte enrichi renverra null pour les deux, et celui qui ne prend en charge que les fonctionnalités de base renverra null pour ce dernier getExtendedFormatter ().

Déclaration de classe

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

public class RichTextArea
   extends FocusWidget
      implements HasHTML, HasInitializeHandlers, HasSafeHtml

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-RichTextArea {}

Constructeurs de classe

N ° Sr.	Constructeur et description
1	RichTextArea() Crée un nouvel objet RichTextArea vide sans feuille de style.

Méthodes de classe

N ° Sr.	Nom et description de la fonction
1	HandlerRegistration addInitializeHandler(InitializeHandler handler) Ajoute un gestionnaire InitializeEvent.
2	RichTextArea.BasicFormatter getBasicFormatter() Obsolète. utilisez plutôt getFormatter ().
3	RichTextArea.ExtendedFormatter getExtendedFormatter() Obsolète. utilisez plutôt getFormatter ().
4	RichTextArea.Formatter getFormatter() Obtient l'interface de mise en forme de texte enrichi.
5	java.lang.String getHTML() Obtient le contenu de cet objet au format HTML.
6	java.lang.String getText() Obtient le texte de cet objet.
sept	boolean isEnabled() Obtient si ce widget est activé.
8	protected void onAttach() Cette méthode est appelée lorsqu'un widget est attaché au document du navigateur.
9	protected void onDetach() Cette méthode est appelée lorsqu'un widget est détaché du document du navigateur.
dix	void setEnabled(boolean enabled) Définit si ce widget est activé.
11	void setFocus(boolean focused) Focalisez / détachez explicitement ce widget.
12	void setHTML(java.lang.String safeHtml) Définit le contenu de cet objet via HTML sécurisé.
13	void setHTML(java.lang.String html) Définit le contenu de cet objet via HTML.
14	void setText(java.lang.String text) Définit le texte de cet 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.FocusWidget
java.lang.Object

Exemple de widget RichTextBox

Cet exemple vous guidera à travers des étapes simples pour montrer l'utilisation d'un widget RichTextBox 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-RichTextArea {
   padding:10px; 
}

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>RichTextArea 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.RichTextArea;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      //create RichTextArea elements
      RichTextArea richTextArea = new RichTextArea(); 
      
      richTextArea.setHeight("200");
      richTextArea.setWidth("200");
      
      //add text to text area
      richTextArea.setHTML("<b>Hello World!</b> <br/> <br/>" + 
	  "<i>Be Happy!</i> </br> <br/> <u>Stay Cool!</u>");

      // Add text boxes to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.add(richTextArea);      

      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