5,4. Etiqueta (Label)

5.4, Etiqueta (Label)

Una etiqueta es una pieza de texto que muestra texto no-editable. Ademas de texto regular, puedes tambien mostrar texto preformateado i HTML, dependiendo en el modo del contenido de la etiqueta.


// A container that is 100% wide by default
VerticalLayout layout = new VerticalLayout();
 
Label label = new Label("Labeling can be dangerous");
layout.addComponent(label);


Link

El texto va a agruparse alrededor i continuar en la linea de texto si excede la anchura de la Etiqueta. La anchura estandard és 100%, así que el disenyo contenido tiene que tener también una anchura definida. Algunas piezas de dissenyo tienen una anchura no definida por Estandard, como en el caso de “HorizontalLayout”, así que tienes que procurar una atención especial con ellos.


// A container with a defined width. The default content layout
// of Panel is VerticalLayout, which has 100% default width.
Panel panel = new Panel("Panel Containing a Label");
panel.setWidth("300px");

panel.addComponent(
    new Label("This is a Label inside a Panel. There is " +
              "enough text in the label to make the text " +
              "wrap when it exceeds the width of the panel."));


Link

Como el tamanyo del Panel en los ejemplos de acontinuación son fijados i la anchura de la etiqueta és el estandard 100%, el texto de la etiqueta se va a agrupar para encuadrarse en el Panel, como se muestra en la Figura 5.16, “La pieza de etiqueta”.

La figura 5.15. La pieza de etiqueta.

Colocando una etiqueta a una anchura no definida va a causar de no agrupar al final de la linea, como la anchura del contenido define la anchura. Si és colocado dentro de un disenyo con la anchura definida, la etiqueta va a desbordar el disenyo horizontalmente i normalmente será interrumpida.

Incluso la estiqueta mencionada es texto i normalmente usada como Titulo, también tiene un Titulo, como cualquier otra pieza. Como con otras piezas, el titulo es manejado por el disenyo contenido.

5.4.1. Modo del contenido

Los contenidos de una etiqueta estan formados dependiendo en el modo del contenido. En estandard, el texto és assumido de ser texto plano y cualquier carácter XML-específico va a ser entrecomillizado apropiadamente para permitir assistir el contenido de la etiqueta en XHTML en el navegador. El modo del contenido puede ser colocado en el constructor o con “setContentMode()”, i puede tener los siguientes valores:

CONTENT_DEFAULT (contenido_standard)

El modo de contenido estandard és CONTENT_TEXT (ver abajo)

CONTENT_PREFORMATTED (contenido pre-formateado)

Modo del contenido, donde la etiqueta contiene texto pre-formateado. Va ser, por estandard, assistido con un fijado-anchura tipoescritura fuente. El texto preformateado puede contener lineas rotas, escritas en Java con la sequencia de escape “\n” para un caracter de nueva linea (ASCII 0x0a), o caracterers de tabulador escritos en “\t” (ASCII 0x08).

CONTENT_RAW (contenido_crudo)

El modo del contenido donde la etiqueta contiene texto crudo. La salida (Output) no es requerida de ser XML válido. Puede ser por ejemplo, HTML, que puede ser des-valanceado o por otro lado XML inválido. El ejemplo de a continuación usa el tag
de HTML. Mientras XHTML devería ser el mas preferido en muchos casos, esto puede ser útil en algunos casos en específico donde tu quiza deverás mostrar perdedor formato HTML contenido. El modo crudo tambien preserva entidades de carácteres, algunos de los cuales quizá pueden ser interpretadas incorrectamente.

Por favor date cuenta que la seguridad y advertencias de validacion respecto el modo del contenido mas adelante en esta sección.

CONTENT_TEXT (texto_contenido)

Modo contenido, donde la etiqueta contiene solo texto plano. Todos los carácteres son permitidos, incluyendo el especial <, >, y & caracteres en XML o HTML, que son encomillizados adecuadamente en XHTML mientras assisten la piza. Este és el modo estandard.

CONTENT_XHTML (xhtml_contenido)

El modo del contenido donde la etiqueta contiene XHTML. El contenido va a ser encerrado en un elemento DIV teniendo el espacionombre “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”.

Porfavor anota la seguridad y advertencias de validación respecto el modo del contenido mas tarde en esta sección.

CONTENT_XML (contenido_XML)

Modo contenido, donde la etiqueta contiene bien-fomado i bien-balanceado XML. Cada uno de los elementos raíz, tienen que tener su nombre-espacio especificado estandard.

Porfavor anota la seguridad y advertencias de validación respecto el modo del contenido mas tarde en esta sección.

CONTENT_UIDL (contenido_uidl)

El modo de contenido de formato, donde los contenidos son XML que es resctringido a UIDL 1.0, El lenguaje interno de Vaadin para AJAX comunicaciones entre el server i el navegador. Caducado desde IT Mill Toolkit 5.0.

Advertencia scripting pagina-encreuada.

Teniendo la etiqueta en crudo, xhtml, o xml contenido modos permite contenido puramente HTML. si el contenido viene de una entrada del usuario, tu deverias siempre con cuidado sanizar-lo para prevenir ataques pagina-encreuada scripting (XSS). Por favor mira la Sección 12.9.1 “Saneando usuario entrada para prevenir pagina-encreuada scripting”.

También, la validacion del contenido XML no és checkeada cuando assistiendo la pieza y cualquier error puede resultar un error en el navegador. Si el contenido viene de una fuente desconocida, tu deverias siempre validar antes mostrando en la pieza.

El siguiente ejemplo demuestra el uso de una etiqueta en diferentes modos.


GridLayout labelgrid = new GridLayout (2,1);

labelgrid.addComponent (new Label ("CONTENT_DEFAULT"));
labelgrid.addComponent (
    new Label ("This is a label in default mode: <plain text>",
               Label.CONTENT_DEFAULT));

labelgrid.addComponent (new Label ("CONTENT_PREFORMATTED"));
labelgrid.addComponent (
    new Label ("This is a preformatted label.\n"+
               "The newline character \\n breaks the line.",
               Label.CONTENT_PREFORMATTED));

labelgrid.addComponent (new Label ("CONTENT_RAW"));
labelgrid.addComponent (
    new Label ("This is a label in raw mode.<br>It can contain, "+
               "for example, unbalanced markup.",
               Label.CONTENT_RAW));

labelgrid.addComponent (new Label ("CONTENT_TEXT"));
labelgrid.addComponent (
    new Label ("This is a label in (plain) text mode",
               Label.CONTENT_TEXT));

labelgrid.addComponent (new Label ("CONTENT_XHTML"));
labelgrid.addComponent (
    new Label ("<i>This</i> is an <b>XHTML</b> formatted label",
               Label.CONTENT_XHTML));

labelgrid.addComponent (new Label ("CONTENT_XML"));
labelgrid.addComponent (
    new Label ("This is an <myelement>XML</myelement> "+
               "formatted label",
               Label.CONTENT_XML));
 
main.addComponent(labelgrid);

La assistencia va a ver-se como a continuación:

Figura 5.17. Etiqueta modos assistido en pantalla

5.4.2. Haciendo uso de modo XHTML

Usando XHTML, XML, o modos crudos inclusiones de, por ejemplo, imagenes dentro la corriente de texto, que no és possible con cualquier pieza de dissenyo regular. El siguiente ejemplo incluye una imagen dentro de la corriente de texto, con la imagen viniendo de una classe (loader) cargador de recursos.


ClassResource labelimage = new ClassResource ("labelimage.jpg",
                                              this);
main.addComponent(new Label("Here we have an image <img src=\"" +
                            this.getRelativeLocation(labelimage) +
                            "\"/> within text.",
                            Label.CONTENT_XHTML));

Cuando usas una classe de recurso (loader) de recarga, la imagen tienen que estar incluida en el JAR de la App web. En este caso, la etiquetaimagen.jpg nessesita ser en el pakete estandard. Cuando és assistido en el navegador, la salida va a verse como a continuación:

Figura 5.18. Referiendo a una imagen recurso en una etiqueta

Otra solución podría ser de usar la pieza “CustomLayout”, donde puedes escribir el contenido de la pieza como un codigo XHTML en la temática, pero una solucion asi puede ser demasiado pesada para la mayoria de casos.

Date cuenta que assistiendo XHTML depiende en la asumición de que el software del cliente i el adaptador final estan basados en XHTML. Puede ser possible de escribir un adaptador final para un cliente personalizado App, que pueda no poder assistir en XHTML del todo. Por eso hay diferencias entre navegadores en su soporte sobre XHTML.

5.4.3. Espaciando con una Etiqueta.

Puedes usar una etiqueta para crear vertical o horizontal espacio en un dissenyo. Si nessesitas una “linea” vacia en un disenyo vertical, solo teniendo una etiqueta con texto vacio no és suficiente, porque va a colapsar como altura 0. Lo mismo occurre para una etiqueta con solo espacioblanco como texto de etiqueta. Nessesitas usar caracterers no-rompedores espacios, como &hbsp; o  


layout.addComponent(new Label("&nbsp;", Label.CONTENT_XHTML));

Usando e modo “Label.CONTENT_PREFORMATTED” tiene el mismo efecto, preformateados espacios no se colapsan en un disenyo vertical. En “HorizontalLayout”, la anchura de un carácter espacio puede ser imprevecilbe si la fuente etiqueta es proporcional, así que puedes usar el modo preformateado para anyadir em-width espacio anchura.

Si quieres una brecha que tena una anchura ajustable o altura, puedes usar una etiqueta vacia si especificas una altura o anchura para ella. Por ejemplo, para crear un espacio en un “VerticalLayout”:


Label gap = new Label();
gap.setHeight("1em");
verticalLayout.addComponent(gap);

Puedes hacer una expansión flexible espaciadora a través de tener un relativo tamanyo vacio etiqueta con 100% altura o anchura i poniendo la etiqueta como expandiendo en el disenyo.


// A wide component bar
HorizontalLayout horizontal = new HorizontalLayout();
horizontal.setWidth("100%");
 
// Have a component before the gap (a collapsing cell)
Button button1 = new Button("I'm on the left");
horizontal.addComponent(button1);
 
// An expanding gap spacer
Label expandingGap = new Label();
expandingGap.setWidth("100%");
horizontal.addComponent(expandingGap);
horizontal.setExpandRatio(expandingGap, 1.0f);
 
// A component after the gap (a collapsing cell)
Button button2 = new Button("I'm on the right");
horizontal.addComponent(button2);

5.4.4. Reglas de estilo CSS

La pieza Etiqueta tiene un estilo total “v-label”.

La temática “Reindeer” assistiendo incluye un numero de estilos predefinido para casos tipicamente formateando. Eso incluye “h1” (Reindeer.LABEL_H1) y “h2” (Reindeer.LABEL_H2) encabezando estilos y “luz” (Reindeer.LABEL_SMALL) estilo.