GWT - RichTextArea Widget

introduzione

Il RichTextAreawidget rappresenta un editor di testo ricco che consente stili e formattazioni complessi. Poiché alcuni browser non supportano la modifica di testo RTF e altri supportano solo un sottoinsieme limitato di funzionalità, sono disponibili due interfacce di formattazione, accessibili tramite getBasicFormatter () e getExtendedFormatter ().

Un browser che non supporta affatto la modifica di testo RTF restituirà null per entrambi e uno che supporta solo la funzionalità di base restituirà null per quest'ultimo getExtendedFormatter ().

Dichiarazione di classe

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

public class RichTextArea
   extends FocusWidget
      implements HasHTML, HasInitializeHandlers, HasSafeHtml

Regole di stile CSS

Le seguenti regole di stile CSS predefinite verranno applicate a tutto il widget TextBox. Puoi sovrascriverlo secondo le tue esigenze.

.gwt-RichTextArea {}

Costruttori di classi

Sr.No.	Costruttore e descrizione
1	RichTextArea() Crea un nuovo oggetto RichTextArea vuoto senza foglio di stile.

Metodi di classe

Sr.No.	Nome e descrizione della funzione
1	HandlerRegistration addInitializeHandler(InitializeHandler handler) Aggiunge un gestore InitializeEvent.
2	RichTextArea.BasicFormatter getBasicFormatter() Deprecato. usa invece getFormatter ().
3	RichTextArea.ExtendedFormatter getExtendedFormatter() Deprecato. usa invece getFormatter ().
4	RichTextArea.Formatter getFormatter() Ottiene l'interfaccia di formattazione RTF.
5	java.lang.String getHTML() Ottiene il contenuto di questo oggetto come HTML.
6	java.lang.String getText() Ottiene il testo di questo oggetto.
7	boolean isEnabled() Ottiene se questo widget è abilitato.
8	protected void onAttach() Questo metodo viene chiamato quando un widget è allegato al documento del browser.
9	protected void onDetach() Questo metodo viene chiamato quando un widget viene scollegato dal documento del browser.
10	void setEnabled(boolean enabled) Imposta se questo widget è abilitato.
11	void setFocus(boolean focused) Metti a fuoco / sfoca esplicitamente questo widget.
12	void setHTML(java.lang.String safeHtml) Imposta il contenuto di questo oggetto tramite HTML sicuro.
13	void setHTML(java.lang.String html) Imposta il contenuto di questo oggetto tramite HTML.
14	void setText(java.lang.String text) Imposta il testo di questo 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.FocusWidget
java.lang.Object

Esempio di widget RichTextBox

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un widget RichTextBox in GWT. Segui i seguenti passaggi 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 il resto dei file invariato.
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;
}

.gwt-RichTextArea {
   padding:10px; 
}

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>RichTextArea 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 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);
   }	
}

Una volta che sei pronto con tutte le modifiche apportate, 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