5,5. Enlace/Empalme (Link)

5,5. Enlace/Empalme (Link)

La pieza Link te permite hacer hyperlinks. Referencias a localizacions són representadas como objetos recurso, explicados en la Sección 4.5 “Recursos de referencia”. El link es un HTML regular hyperlink, que és un antepasado elemento que es manejado nativamente por el navegador. A diferencia de cuando clicamos un boton, clicando un link no causa un sucecsso en el lado del server.

Links a un URL arbitrario puede ser creado usando un “ExternalResource” como a continuación:


// Textual link
Link link = new Link("Click Me!",
        new ExternalResource("http://vaadin.com/"));


Link

Puedes usar “setIcon()” para crear links imagenes como a continuación:


// Image link
Link iconic = new Link(null,
        new ExternalResource("http://vaadin.com/"));
iconic.setIcon(new ThemeResource("img/nicubunu_Chain.png"));

// Image + caption
Link combo = new Link("To appease both literal and visual",
        new ExternalResource("http://vaadin.com/"));
combo.setIcon(new ThemeResource("img/nicubunu_Chain.png"));

Los links resultados son mostrados en la Figura 5.19, “Ejemplo link”. Podrias anyadir un “display: block” estilo para el icono elemento huvicar el titulo a continuacion.

Figura 5.19, “Ejemplo link”

Con el constructor simple usado en el ejemplo a continuacion, el recurso es abierto en la ventana actual. Usando el constructor que coge la ventana objetivo como codigo, o a través de colocar el objetivo ventana con “setTargetName()”, puedes abrir el recurso en otra ventana, como con una ventana popup nativa. Como el nombre objetivo es un objetivo HTML cadena manejada por el navegador, cualquier ventana puede ser el objetivo, incluyendo ventana no manejada por la App en si. Puedes usar la especial subrayada objetivo nombres, como por ejemplo “_blank” para abrir el link en un navegador nuevo o ventana o pestanya.


// Hyperlink to a given URL
Link link = new Link("Take me a away to a faraway land",
        new ExternalResource("http://vaadin.com/"));

// Open the URL in a new window/tab
link.setTargetName("_blank");
        
// Indicate visually that it opens in a new window/tab
link.setIcon(new ThemeResource("icons/external-link.png"));
link.addStyleName("icon-after-caption");


Link

Normalmente, el icono del link es antes que el titulo. Puedes tenerlo a la derecha del titulo regirando la direccion del texto en el elemento contenido.


/* Position icon right of the link caption. */
.icon-after-caption {
    direction: rtl;
}
/* Add some padding around the icon. */
.icon-after-caption .v-icon {
    padding: 0 3px;
}

El link resultado és mostrado en la Figura 5.20 “Link que abre una ventana nueva”.

Figura 5.20 “Link que abre una ventana nueva”.

Con el objetivo “_blank”, una nueva ventana de navegador es abierta. Si deseas abrir en una ventana separada popup, tienes que dar un tamanyo para la ventana con “setTargetWidth()” y “setTargetHeight()”. Puedes controlar el borde de la ventana estilo con "setTargetBorder(), que coge cualquier de los bordes definidos estilos TARGET_BORDER_DEFAULT, TARGET_BORDER_MINIMAL, y TARGET_BORDER_NONE. El resultado exacto depende del navegador.


// Open the URL in a popup
link.setTargetName("_blank");
link.setTargetBorder(Link.TARGET_BORDER_NONE);
link.setTargetHeight(300);
link.setTargetWidth(400);

Ademas de la pieza link, Vaadin te permite caminos alternativo para hacer hyperlinks. La pieza boton tiene un estilo “Reindeer.BUTTON_LINK” nombre que hace ver como un hyperlink, manejando click en el lado del server el escuchador de clicks en vez de en el navegador. Tambien, puedes hace hyperlinks (o cualquier otro HTML) en una etiqueta en XHTML modo contenido.

Reglas Estilo CSS.


.v-link { }
  a { }
    .v-icon {}
    span {}

El estilo total para una pieza link és “v-link”. La raíz elemento contiene el hyperlink antepasado. Dentro del antepasado esta el icono, con el estilo “v-icon”, y el titulo en un texto lapso.

Los hyperlinks anclajes tienen un numero de pseudo-classes que son activas en diferentes tiempos. Un link no visitado tiene una classe “a:link” i uno visitado “a:visited”. Cuando el puntero del mouse pasa por encima del link, va a tener un “a:hover”, i cuando el boton de mouse es pulsado sobre el link, la classe “a:active”. Cuando comvinando el pseudo-classes en un selector, porfavor date cuenta que “a:hover” tiene que venir a continuacion un “a:link” y “a:visited”, y “a:active” despues de “a:hover”.