GWT: widget de etiquetas

Introducción

los Labelpuede contener solo texto arbitrario y no se puede interpretar como HTML. Este widget usa un elemento <div>, lo que hace que se muestre con un diseño de bloque.

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.Label clase -

public class Label 
   extends Widget 
      implements HasHorizontalAlignment, HasText, HasWordWrap, 
         HasDirection, HasClickHandlers, SourcesClickEvents, 
            SourcesMouseEvents, HasAllMouseHandlers

Reglas de estilo CSS

La siguiente regla de estilo CSS predeterminada se aplicará a todas las etiquetas. Puede anularlo según sus requisitos.

.gwt-Label { }

Constructores de clases

No Señor.	Constructor y descripción
1	Label() Crea una etiqueta vacía.
2	protected Label(Element element) Este constructor puede ser usado por subclases para usar explícitamente un elemento existente.
3	Label(java.lang.String text) Crea una etiqueta con el texto especificado.
4	Label(java.lang.String text, boolean wordWrap) Crea una etiqueta con el texto especificado.

Métodos de clase

No Señor.	Método y descripción
1	void addClickListener(ClickListener listener) Agrega una interfaz de escucha para recibir eventos de clic.
2	void addMouseListener(MouseListener listener) Agrega una interfaz de escucha para recibir eventos del mouse.
3	void addMouseWheelListener(MouseWheelListener listener) Obtiene el panel principal de este widget.
4	HasDirection.Direction getDirection() Obtiene la direccionalidad del widget.
5	HasHorizontalAlignment. HorizontalAlignmentConstant getHorizontalAlignment() Obtiene la alineación horizontal.
6	java.lang.String getText() Obtiene el texto de este objeto.
7	boolean getWordWrap() Obtiene si el ajuste de palabras está habilitado.
8	void onBrowserEvent(Event event) Elimina una interfaz de escucha agregada anteriormente.
9	void removeClickListener(ClickListener listener) Este método se llama inmediatamente antes de que se separe un widget del documento del navegador.
10	void removeMouseListener(MouseListener listener) Elimina una interfaz de escucha agregada anteriormente.
11	void removeMouseWheelListener(MouseWheelListener listener) Elimina una interfaz de escucha agregada anteriormente.
12	void setDirection(HasDirection.Direction direction) Establece la direccionalidad de un widget.
13	void setHorizontalAlignment(HasHorizontalAlignment. HorizontalAlignmentConstant align) Establece la alineación horizontal.
14	void setText(java.lang.String text) Establece el texto de este objeto.
15	void setWordWrap(boolean wrap) Establece si el ajuste de palabras está habilitado.
dieciséis	static Label wrap(Element element) Crea un widget de etiqueta que envuelve un elemento <div> o <span> existente.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget

Ejemplo de widget de etiqueta

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget de etiqueta en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado 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>

A continuación se muestra el contenido del archivo de hoja de estilo modificado 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-Label{ 
   font-size: 150%; 
   font-weight: bold;
   color:red;
   padding:5px;
   margin:5px;
}

.gwt-Green-Border{ 
   border:1px solid green;
}

.gwt-Blue-Border{ 
   border:1px solid blue;
}

A continuación se muestra el contenido del archivo de host HTML modificado war/HelloWorld.html para acomodar dos botones.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Label Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el uso del widget Label.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
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 two Labels
      Label label1 = new Label("This is first GWT Label");
      Label label2 = new Label("This is second GWT Label");

      // use UIObject methods to set label properties.
      label1.setTitle("Title for first Lable");
      label1.addStyleName("gwt-Green-Border");
      label2.setTitle("Title for second Lable");
      label2.addStyleName("gwt-Blue-Border");

      // add labels to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.add(label1);
      panel.add(label2);

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

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

↰ Previous page