JavaFX Sintaxis Declarativa

En el post anterior hemos visto un ejemplo sobre cómo realizar un Hello World con JavaFX pero sin entrar en mucho detalle sobre algunas líneas del código, ahora seguiremos con algunos ejemplos más y explicando un poco sobre esto de Sintaxis Declarativa, por ejemplo un objeto puede ser creado con un Objeto Literal. Lo que significa una sintaxis declarativa concisa parecida a javascript, en lugar de explicar "como" realizar algo (el algoritmo, en los lenguajes imperativos), deberemos describir "que" es ese algo. Por ejemplo, en HTML, se declara el contenido de la página, pero no se explica cómo este será mostrado en la pantalla. Ahora veremos algunos ejemplos para aclarar esto.

Iremos desarrollando un ejemplos casi línea por línea para ir notando la simpleza del lenguaje e ir viendo algunos efectos, para este ejemplo usaremos una imagen que la pueden encontrar en el siguiente link ,comencemos.

Paso 1:

import javafx.stage.Stage;

Stage {
    width: 400
    height: 400 
}

con las pocas líneas de arriba ya hemos definido una instancia de un objeto Stage, el cual es necesario para renderizar una ventana.

Paso 2:

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;

var image = Image {
    url: "{__DIR__}JavaFX.png"
}

Stage {
    width: 400
    height: 400 
    scene: Scene {
        content: [
            ImageView {
                x: 75
                y: 60
                image: image
            }
        ]
    }
}

aquí hemos complicado un poco la cosa, pero veremos cada detalles, los primeros import de Scene, Image e ImageView son necesarios por los siguiente motivos.
Scene es el objeto el cual nos permite renderizar elementos gráficos dentro de el, el ImageView es el contenedor para una determinada imagen, y por último el Image es la imagen en sí. Si notamos la definición de Scene, vemos que a su propiedad content(Aquí dibujamos los elementos gráficos), hemos agregado una instancia de ImageView y a esta le hemos asignado la imagen previamente cargada en la variable image. Como podrán notar toda la sintaxis es muy simple y siempre nos preocupamos en la declaración de lo que deseamos y no en como generar todo esto.
El código hasta ahora nos generaría una ventana, con la imagen posicionada en el centro, pero nuestra Scene por defecto tiene un color blanco de fondo, si vemos en posts anteriores veremos que podíamos asignar colores en forma de gradientes, pues bueno eso haremos como siguiente paso.

Paso 3:

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.paint.Color;

/**
 * @author softdesigner
 */

var image = Image {
    url: "{__DIR__}JavaFX.png"
}

Stage {
    width: 400
    height: 400 
    scene: Scene {
        content: [
            ImageView {
                x: 75
                y: 60
                image: image
            }
        ]
        fill: LinearGradient {
            startX : 0.0
            startY : 0.0
            endX : 0.0
            endY : 1.0
            stops: [
                Stop {
                    color : Color.WHITE
                    offset: 0.0
                },
                Stop {
                    color : Color.BLACK
                    offset: 1.0
                }
            ]
        }
    }
}

Si vemos la propiedad fill del objeto Scene, nos damos cuenta que estamos asignando un LinearGradient a esta propiedad, como podemos deducir esto generara un Gradiente linear por medios de las propiedades startX, startY, endX, endY definimos la dirección lineal y por medio de los stops definimos que distintos Stop usar, cada Stop define necesita su propiedad color y su propiedad offset la cual indicada cuando se detendrá ese gradiente.

Muchas veces cuando estamos retocando imágenes o logrando algún efecto se nos plantea la necesidad de lograr un efecto de reflejo sobre el agua o algún material, JavaFX viene con muchas de estas dificultades resueltas ya que brinda diversos efectos para ser aplicados a nuestras imágenes, para ver esto usaremos un efecto de Reflection para lograr reflejar nuestra imagen.

Paso 4:

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.paint.Color;
import javafx.scene.effect.Reflection;

/**
 * @author softdesigner
 */

var image = Image {
    url: "{__DIR__}JavaFX.png"
}

Stage {
    width: 400
    height: 600
    scene: Scene {
        content: [
            ImageView {
                x: 75
                y: 60
                image: image
                effect: Reflection {
                        fraction: 0.75
                        topOffset: 0.0
                        topOpacity: 0.5
                        bottomOpacity: 0.0
                    }
            }
        ]
        fill: LinearGradient {
            startX : 0.0
            startY : 0.0
            endX : 0.0
            endY : 1.0
            stops: [
                Stop {
                    color : Color.WHITE
                    offset: 0.0
                },
                Stop {
                    color : Color.BLACK
                    offset: 1.0
                }
            ]
        }
    }
}

Ahora tenemos nuestra imagen con un efecto de Reflection, este es asignado al ImageView ya que es el contenedor de la imagen y ahora explicaremos cada propiedad de este efecto.
fraction: Es la fracción que se muestra reflejada en base a la imagen original(Valor porcentual).
topOffset: Es la distancia entre la imagen y el comienzo de su reflejo(Valor libre).
topOpacity: Es la opacidad del comienzo del reflejo(Valor porcentual).
bottomOpacity: Es la opacidad del final del reflejo(Valor porcentual).

Para ir terminando el ejemplo como último detalle, queremos mostrar dos efectos al mismo tiempo, los cuales serán una DropShadow y un efecto Reflection.

Paso 5:

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.paint.Color;
import javafx.scene.effect.Reflection;
import javafx.scene.effect.DropShadow;

/**
 * @author softdesigner
 */

var image = Image {
    url: "{__DIR__}JavaFX.png"
}

Stage {
    width: 400
    height: 600
    scene: Scene {
        content: [
            ImageView {
                x: 75
                y: 60
                image: image
                effect: Reflection {
                        fraction: 0.75
                        topOffset: 0.0
                        topOpacity: 0.5
                        bottomOpacity: 0.0
                        input: DropShadow {
                                offsetX: 10
                                offsetY: 10
                                color: Color.BLACK
                                radius: 10
                            }
                    }
            }
        ]
        fill: LinearGradient {
            startX : 0.0
            startY : 0.0
            endX : 0.0
            endY : 1.0
            stops: [
                Stop {
                    color : Color.WHITE
                    offset: 0.0
                },
                Stop {
                    color : Color.BLACK
                    offset: 1.0
                }
            ]
        }
    }
}

Si leemos acerca de la propiedad effect del ImageView descubriremos que solo acepta un objeto effect, y aquí nos entra la duda de cómo haremos mas agregar dos efectos al mismo tiempo, para esto casi todos los efectos tiene una propiedad input la cual recibe un effect, así que si nosotros quisiéramos ir encadenando efectos deberíamos hacerlo por medio de esta propiedad, en la parte superior del código se nota que el efecto Reflection recibe un input de un DropShadow, las propiedades del DrowShadow son las siguientes:
offsetX: Cantidad de pixeles sobre el eje x.
offsetY: Cantidad de pixeles sobre el eje y.
color: Color de relleno de la sombra.
radius: Radio del difuminado para la sombra.

Con esto daremos por finalizada esta mínima explicación y demostración sobre la Sintaxis declarativa que ofrece JavaFX y la simplicidad y poder de este lenguaje.
Les dejo un link al ejemplo del proyecto netbeans, luego intentare dejar el jnlp para que lo puedan descargar.

Proyecto
DeclarativeSyntax.rar



Saludos

Leer más...

JavaFX GUI

El Api de JavaFX brinda a los desarrolladores la posibilidad de crear interfaces UI que seran independientes del dispositivo, podemos definir una division entre lo que seria un Common profile y un Desktop profile. El Common profile puede ser usado en aplicaciones de escritorio asi como en aplicaciones para mobiles. En cambio el Desktop profile es espefico de aplicaciones de escritorio.El SDK de JavaFX posee un JavaFX Mobile Emulator en el cual podemos ver como quedan nuestras aplicaciones sobre telefonos mobiles, en algun post veremos como usar esto. Daremos una breve explicacion sobre la separacion de categorias y que paquetes entran en juego, y dejaremos un link a los archivos de ejemplo de Sun.Este post sera una presentacion sobre el mundo JavaFX y dejaremos un videotutorial sobre como crear el indispensable HelloWorld para no fracasar en un nuevo lenguaje.

Contenidos

Common Profile:

• User Interface Elements
• Charts
• Colors
• Shapes
• Fill Styles
• Line Cap and Join Style
• Text
• Transformations
• Layout
  

Desktop Profile:

• Effects
• Cursors
  

Common Profile:

User Interface Elements
Aqui encontraremos todos los componentes para poder crear interfaces de usuario,todos estos componentes se hayan en el paquete javafx.scene.control.

Archivo de ejemplo:
UIControls.fx

Charts
JavaFX ya provee muchos tipos de graficas prefabricadas, estas las podemos encontrar en el paquete javafx.scene.chart veremos una lista de las graficas disponibles:
Graficas de Area
Graficas de Barras
Graficas de Burbujas
Graficas de Lineas
Graficas de Pastel
Graficas de Dispersion

Colors
JavaFX nos provee una clase que se haya en el paquete javafx.scene.paint.Color la cual posee constantes de los colores predefinidos y a su vez metodos especificos para trabajar con ellos.

Archivo de ejemplo:
Colores

Shapes
Los Shapes son las formas basicas que podemos realizar obviamente que mezclandolas entre si podremos obtener otras figuras mas complejas. Esta se encuentra en el paquete javafx.scene.shape.

Archivo de ejemplo:
Shapes

Fill Styles
Los Fill son los tipos de relleno que podemos aplicar cuando pintamos ciertos elementos, a estos le podemos agregar patrones para lograr efecto de pintado ya sea degrade ya sea del tipo radial o lineal, y tambien colores solidos.

Archivo de ejemplo:
Fill Styles

Line Cap and Join Styles
Cuando construimos figuras geometricas muchas veces juntamos lineas y distinos estilos, esto es posible en base a las clases del paquete javafx.scene.shape el cual provee las herramientas necesarias para esto.

Archivo de ejemplo:
Line Cap and Join Styles

Text
Cuando escribimos texto, podemos asignar distintos formatos, estas caracteristicas estan englobadas en el paquete javafx.scene.text, podremos rotar las letras, moverlas de posicion, asignar distinas tipografias, etc.

Archivo de ejemplo:
Text

Transformations
Podemos aplicar diversas transformaciones por ejemplo rotaciones, translaccion de coordenadas, escalado de imagenes, etc.

Archivo de ejemplo:
Transformations

Layout
Los layout nos marcan la distribuccion de los elementos por la ventana, hay diversos tipos y estan almacenados en el paquete javafx.scene.layout.

Archivo de ejemplo:
HBox
VBox

Desktop Profile:

Effects
Podemos aplicar distintos efectos que ya vienen incorporados con JavaFX, estos efectos pueden ser aplicados a los elementos JavaFX UI.

Archivo de ejemplo:
Effects

Cursors
Podemos asignar distintos cursores sobre los elementos de JavaFX.

Archivo de ejemplo:
Cursors

Link General
Les dejo un link con un rar que posee todos los ejemplos de la pagina de Sun, por si el link de algun ejemplo no anda aca estan todos juntos.
Ejemplos

Después de esta pequeña introducción sobre los elementos gráficos y distintas caracterizas incluidas en JavaFX procederemos a hacer el primer ejemplo de nuestro largo camino de aprendizaje, sin más palabras el Hello World!!!
Espero el video tutorial sea entendible ya que este es el primero que hago y hay demasiados errores, espero pueda serle de utilidad y les sirva.

Saludos

Leer más...