Iniciando con JavaFX: Manejo básico de etiquetas.

Submitted by Jose Manuel on Dom, 04/22/2012 - 12:09

Siguiendo con los tutoriales sobre JavaFX daremos inicio a la creación de componentes o como son llamados en JavaFX: controles. En esta entrada veremos como crear Labels (etiquetas) y veremos algunas instrucciones de uso básico sobre ellas.

Si nunca han usado etiquetas que sepan que son componentes visuales, osea que son parte de la GUI (Graphical User Interface, en español Interfaz Gráfica de Usuario ). Y son usadas principalmente para mostrar datos, ya sea en texto, imagen o ambas.

Para crear un objeto de tipo Label es tan fácil como:

Label label = new Label("esta es una etiqueta");

Simple, ¿Verdad?
¿Y ahora que sigue? Pues modificar algunas de sus propiedades, veamos cuales son las que tienen relación con el tema:

setTextAlignment(TextAlingment value);
Este método recibe una constante de tipo TextAlignment donde la constante representa la alineación horizontal del texto. Las constantes son:

TextAlignment.CENTER //Texto centrado
TextAlignment.JUSTIFY //Texto justificado
TextAlignment.LEFT //Texto a la izquierda
TextAlignment.RIGTH //Texto a la derecha

setContentDisplay(ContentDisplay value);
Con este método se especifica la posición de el gráfico respecto al texto, recibe una constante de tipo ContentDisplay que determina la posición de un elemento contenido en el label, en este caso una imagen. Las constantes son:

ContentDisplay.BOTTOM //El grafico en la parte de abajo del label
ContentDisplay.CENTER //En el centro del label
ContentDisplay.GRAPHIC_ONLY //Solo mostrara el contenido (el gráfico)
ContentDisplay.LEFT //A la izquierda del label
ContentDisplay.RIGHT  //A la derecha del label
ContentDisplay.TEXT_ONLY //Solo muestra el texto
ContentDisplay.TOP //El gráfico en la parte superior del label

setGraphicTextGap(Double value);
Establece la separación entre el gráfico y el texto. Recibe un objeto de tipo Double.

setGraphic(Node value);
Establece el icono para el label. Recibe un objeto de tipo Node.

NOTA:Dentro de un escenario hay un árbol de elementos, estos elementos son llamados nodos, los nodos pueden ser "leaf" ( hoja ), que no se pueden agregar otros nodos a ellos o pueden ser una "branch" ( rama ), que pueden contener mas nodos. Cada elemento dentro de una escena es un nodo. Los nodos hoja tienen 0 sub-elementos y los nodos rama tienen cero o mas sub-elementos. Dentro de un árbol de escenario solo habrá un nodo que no tendrá padre/rama, al que se le llama root o raiz.

Esta explicación termina en que el objeto que recibe el método es un nodo de tipo hoja. Mas claramente un objeto de tipo ImageView. Cada vez que queramos mostrar una imagen debemos hacerlo usando dos clases. La ImageView y la clase Image (esta clase es de JavaFX). Y se puede hacer de la siguiente manera.

Image img = new Image("cachorro.jpg") //Existen diferentes constructores, por ahora nos quedamos con este.  
ImageView image = new ImageView(img); //Ahora el nodo ImageView es una imagen.

setTooltip(Tooltip);
Establece el texto de información sobre el label. Recibe un objeto de tipo Tooltip. Tan simple como hacer un:

label.setTooltip(new Tooltip("Información para label"));

Con esto termina la explicación de los métodos que usaremos mas comúnmente a la hora de crear etiquetas. Veamos ahora un programa de ejemplo:

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.control.Tooltip;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;

public class UsoDeLabels extends Application {
    private Label etiquetaTexto, etiquetaImagen, etiquetaTextoImagen;
    private Image img;
    @Override
    public void start(Stage ventana)  {
        //Etiqueta solo con texto
        etiquetaTexto = new Label("Etiqueta solo con texto");
        etiquetaTexto.setTooltip(new Tooltip("Una etiqueta con texto..."));
        //Etiqueta con imagen
        img = new Image("C:\\Users\\leon\\Pictures\\lobo.jpg", false);
        etiquetaImagen = new Label();              
        etiquetaImagen.setGraphic(new ImageView(img));
        etiquetaImagen.setTooltip(new Tooltip("Una etiqueta con una imagen..."));
        //Etiqueta con texto e imagen.
        etiquetaTextoImagen = new Label("Etiqueta con texto e imagen");
        etiquetaTextoImagen.setTextAlignment(TextAlignment.CENTER);
        etiquetaTextoImagen.setContentDisplay(ContentDisplay.TOP);
        etiquetaTextoImagen.setGraphicTextGap(1);
        etiquetaTextoImagen.setGraphic(new ImageView(
                new Image("C:\\Users\\leon\\Pictures\\cachorro.jpg")));
        etiquetaTextoImagen.setTooltip(new Tooltip("Tengo texto e imagen!"));
        //Creando el panel y agregando los componentes
        StackPane panel = new StackPane();
        //Alineacion de los componentes en el panel
        StackPane.setAlignment(etiquetaTexto, Pos.TOP_CENTER);
        StackPane.setAlignment(etiquetaImagen, Pos.CENTER_LEFT);
        StackPane.setAlignment(etiquetaTextoImagen, Pos.CENTER_RIGHT);
        //Los agregamos
        panel.getChildren().addAll(etiquetaTexto, etiquetaImagen, etiquetaTextoImagen);
        //Caracteristicas de la escena
        Scene escena = new Scene(panel, 300, 200);        
        ventana.setScene(escena);
        ventana.setTitle("Uso de etiquetas");
        //Mostramos la ventana
        ventana.show();
    }
    public static void main(String args[]) {
        Application.launch(args);
    }
}

Dando como resultado la siguiente imagen:

Eso es todo por ahora. Espero que les sirva y que le entiendan. Se aceptan comentarios, sugerencias, criticas, etc. Saludos!

Comentarios

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.
Imagen de rodrigo salado anaya

Excelente trabajo...

Submitted by rodrigo salado anaya on Mié, 04/25/2012 - 14:22.

Excelente trabajo el que haces siempre en tus post (no solo los dedicados a JavaFX), muy claros, sin tanto adornito y al grano. Por otro lado que bueno que estas interesado en una tecnología tan menospreciada como JavaFX, que bueno que lo estas conociendo apenas, si no talves lo odiarias y nunca le hubieras dado otra oportunidad.

Yo use la priemra versión para desarrollo en chamba, así que tube que meterme de lleno en esos tiempos, pero eso es otra historia.

Saludos. : )

Imagen de Sr. Negativo

JavaFX y Java Swing

Submitted by Sr. Negativo on Sáb, 04/28/2012 - 20:48.

Tal parece que te decidiste a usar JavaFX, se ve bien y se parece mucho Swing.

Buen post.

Imagen de Jose Manuel

Muchas gracias por los

Submitted by Jose Manuel on Dom, 04/29/2012 - 22:22.

Muchas gracias por los comentarios. Pues ya ven hay le estoy metiendo mano al JavaFX. Me agrada por ahora, no se mas adelante si tenga problemas con algún componente, espero que no. Voy a seguir con los tutoriales :)

A la mejor le meto un poco el pie al acelerador para ir abarcando mas terreno en el Framework. Ya tengo varias ideas para mostrar las capacidades de JavaFX claro que van a estar ligadas a mi experiencia y a la mejor son un poco chuscas pero bueno.

Si alguien tiene dudas y esta en mi capacidad, con todo gusto las resolveré. Saludos!