Software Guru Conference & Expo 2014

blog de Jose Manuel

Iniciando con JavaFX: Layouts - Ejemplos de uso.

Exordio

Mas allá de querer impresionar al lector con palabras rebuscadas lo que pretendo es advertirle de lo que esta por ver. Contenido sobre los layouts y su uso básico en JavaFX. Esto no es un discurso, ni una novela pero debo advertir que por cuestiones de preferencias personales he decidido crear una publicación lo suficientemente grande como para resultar incomoda de leer. Sin mas que agregar ¡Que comience el codeo!

Layout VBox

Como habíamos mencionado este layout nos permite colocar nodos hijos en una columna , lista vertical o caja vertical, escojan la definición que prefieran.
Aclaración: usare un nodo de tipo Button para ejemplificar el uso de los diferentes layouts, ya que al tener un tamaño definido sera mas fácil de apreciar las características del layout.
Iniciemos con el primer ejemplo:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
 *
 * @author kalt
 */

public class VBoxTest extends Application {

Iniciando con JavaFX: Layouts - Introducción a los layouts

Retomando el "curso" de javafx daremos una introducción a lo que son los layouts.

¿Qué es un layout?

Layout en español tiene varias traducciones según su uso: disposición, diseño gráfico, plan. Pero el termino es usado para referirse a un esquema de distribución de elementos.

Los layouts en JavaFX

En javafx los layouts son llamados panels (paneles), estos son espacios/areas/regiones que siguen ciertas reglas para acomodar y cambiar el tamaño de los nodos en relación con sus propios tamaños. También se nos da la posibilidad de especificar una posición fija de nuestros componentes.

Características básicas de los layouts en JavaFX

Para conocer todos los paneles en JavaFX veamos la estructura de los nodos en la siguiente imagen: http://www.javamexico.org/system/files/JavaFX_0.png y nos vamos hasta la clase javafx.scene.layout.Pane, empecemos definiendo algunas de las características de cada tipo de panel:

  • VBox este panel nos brinda una forma simple para acomodar nodos en una fila.
  • HBox este otro panel nos brinda una forma simple para acomodar nodos en una columna.

JavaFX: Creando un dock simple.

Hace tiempo que vi una aplicación de un dock hecha en Java con Swing y se veia padre, lo unico feo eran los iconos. Para el que le interese aqui les dejo el enlace: https://weblogs.java.net/blog/elevy/archive/2007/07/java_dock_launc.html
Y que me entran ganas de hacer uno, pero muuucho mas simple y en JavaFX. Entonces me puse a buscar una forma de hacer un simple dock, que no es mas que un lanzador de aplicaciones. Lo hice para calmar la curiosidad. Y el resultado es tosco, simple y un poco tonto, PERO, da una idea de por donde iniciar.

Primero para poder hacer andar la aplicación veremos la estructura:
Captura de pantalla de 2014 03 03 23 50 13
Donde el fondo mide 400 x 70 y los iconos miden 48x48.

Ahora ocupamos el codigo: http://pastebin.com/XrFkmQbj

Y unas capturas de la applicación

Iniciando con JavaFX: Jython + JavaFX

Hace unas horas me puse a picarle al Jython y pues me gusto, allí andaba y luego me dije: ¿Y que onda con Swing? Pues que le sigo scripteando(ese termino siquiera existe?) me aventé unas cuantas ventanitas todo cool hasta que me acorde de JavaFX... no me pude quitar la idea de poder ejecutar código FX en Python (Jython pues...) entonces comenzó la travesía jeje.

Preparando el terreno

Antes que nada debemos establecer una variable de entorno que es la que le dirá a Jython de donde obtener las clases de JavaFX.
Para esto hacemos el procedimiento(Windows 7): Inicio > clic derecho en Equipo > Propiedades > Configuración Avanzada del Sistema > Variables de entorno.

En la ventana de Variables de entorno en la sección Variables del sistema damos clic a Nueva y colocamos los siguientes valores:
Nombre de la variable: CLASSPATH
Valor de la variable: ruta\al\sdk\de\javafx\rt\lib\jfxrt.jar en este caso yo estoy usando la siguiente: C:\Program Files\Oracle\JavaFX 2.1 SDK\rt\lib\jfxrt.jar

Ahora si, podemos continuar.

Código

Primero usaremos un .java de guía para pasarlo a .py
 

Iniciando con JavaFX : Creación del JAR ejecutable.

Cuando tengamos lista nuestra aplicación y queramos distribuirla en la forma de archivador jar ejecutable estos son los pasos que debemos seguir:

Requisitos:

  • Tener instalado JavaFX. Así como Java usa el JDK y el JRE. JavaFX usa el JavaFX SDK y el JavaFX Runtime, la versión de JavaFX que estamos usando es la 2.0.3 y el Runtime venia incluido con el SDK. En la pagina de Oracle se puede obtener el JFXR.
  • Tener NetBeans (el que estamos usando en el curso es la versión 7.1.1 con soporte para FX).
  • Y...yap.

Ahora digamos que tenemos un proyecto ya terminado, con la clase principal establecida, guardado, todo perfecto. Ahh pues crear el ejecutable es tan difícil como ir al menú Ejecutar > Limpiar y generar Proyecto. O presionar la combinación de teclas Mayus/Shift + F11

Iniciando con JavaFX: Estructura de Nodos

En el tutorial anterior vimos como crear etiquetas y usamos algunos de los métodos mas comunes para su manejo. Ahora veremos la estructura de los tipos llamados Nodos. Necesitamos, antes de continuar con el semi curso dar un vistazo a el árbol de herencia de los componentes Nodo. Ya que estos son los que mas manejaremos durante nuestro aprendizaje.

Empecemos con una imagen:

En la imagen se puede observar cuatro tipos de Nodo; ImageView, MediaView, Parent y Shape. Dentro de estas clases están la mayoría de componentes que se utilizaran en la creación de una escena de JavaFX. Para poder seguir con las siguientes imágenes debemos explicar que es un nodo.

Iniciando con JavaFX: Manejo básico de etiquetas.

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

JavaFX: Soporte en plataformas.

Durante mi introducción a JavaFX la plataforma que use fue un Windows 7 y no note algunas de las desventajas actuales de este framework. No hay soporte en GNU/Linux. Según he leído es por la dependencia de la aceleración por hardware. Ahora, como me suele pasar, me enfado de guindos y me cambio a mi Fedora. Y al instalar el JDK de la pagina oficial y el Netbeans y empezar un proyecto de prueba me lleve la noticia de que no existe soporte en GNU/Linux. Un total facepalm para mi.

Creo que se planea lanzar una versión pero, hasta que no aparezca no habrá mas tutoriales. Lo siento por dejar el mini-curso de esta manera. Pero no pienso desarrollar aplicaciones que solo puedan ser ejecutadas en una sola plataforma, aun soy estudiante y creo que puedo darme ese lujo, me lo pensaría si fuera en otra plataforma...

Lamento no haberme dado cuenta antes. Para que el aprendizaje en nuevas tecnologías no recaiga optare por un framework diferente. Estoy abierto a recomendaciones y sugerencias. Gracias.

JavaFX: Modo Pantalla Completa

Este ejemplo no pertenece a la serie de tutos que planeo realizar sobre JavaFX, es mas como un tip.

Código

import javafx.application.Application;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

/**
 *
 * @author kalt
 */

public class PantallaCompleta extends Application implements EventHandler {
    private Button boton;
    private StackPane panelPila;
    private boolean estaFull = false;
    private Stage escenaPrincipal = null;
   
    @Override
    public void start(Stage escenaPrincipal) {
        this.escenaPrincipal = escenaPrincipal;
       
        panelPila = new StackPane();
        boton = new Button("Pantalla Completa");
        boton.setOnAction(this);
       
        panelPila.getChildren().add(boton);
        Scene escena = new Scene(panelPila, 250, 150, Color.BROWN);
        escenaPrincipal.setScene(escena);
        escenaPrincipal.setTitle("Pantalla Completa");
        escenaPrincipal.show();
    }
    @Override

Iniciando con JavaFX: Hola mundo

Continuando con el post de la instalación de herramientas se viene asomando el clásico hola mundo! Empecemos!

Una aplicacion basica en JavaFX se declara de la siguiente manera:

import javafx.application.Application;
import javafx.stage.Stage;
 
public class HolaMundoJavaFX extends Application {
     
    public static void main(String args[]) {
        Application.launch(args);
    }
    @Override
    public void start(Stage escenaPrincipal) {
        escenaPrincipal.show();
    }    
}

La clase HolaMundoJavaFX hereda de Application y contiene dos métodos. El método main y el método start. Dentro de main se llama al método launch, como buena practica se recomienda que dentro de main solo exista el método launch. El método start recibe un parámetro escenaPrincipal del tipo Stage.
Si ejecutamos la clase obtenemos el siguiente resultado:

Distribuir contenido