Introducción a JavaFX

JAVAFX

Ezequiel Aranda

Sun Microsystems Campus Ambassador

¿Porqué debería pasar la próxima hora aquí?

Para conocer la plataforma que posiblemente reemplazará a Java ME

Para aprender lo básico del lenguaje con el cual crear aplicaciones en esta plataforma

Junto con las características de la biblioteca gráfica principal del lenguaje

Finalmente, si algo de todo esto nos convenció, obtener información sobre como ingresar al mundo de JavaFX

PARTE 1 - JAVAFX

¿Qué es JavaFX?

JavaFX es una plataforma para dispositivos que funcionen como clientes de Rich Internet Applications (RIA).

Consiste de elementos comunes (gráficos, animaciones, texto y elementos multimedia) y elementos específicos para computadoras, dispositivos móviles y televisión.

El Stack de JavaFX

¿Porqué Sun esta trabajando en JavaFX?

Java ya ha conquistado el lado del servidor de las aplicaciones, sin embargo, aún resta un gran trabajo por hacer en el lado del cliente.

Crear una gran interfaz con Swing requiere mucho trabajo.

La popularidad de Java en la UI ha decaído en favor de Flash, Ajax y otras soluciones más “livianas”. Adicionalmente, otras empresas han comenzado a presentar tecnologías de este tipo, como Silverlight (de Microsoft).

Dado que no se esperan grandes innovaciones del lado del servidor, es un excelente momento para concentrarse en solucionar los problemas de usabilidad de las UIs Java.

“ Our goal with JavaFX is to deliver a 'Media Stack' for the Java platform … It means five things: Audio, Video , 2D and 3D Graphics and Animation” Christopher Oliver

PARTE 2 – JAVAFX SCRIPT 5

JavaFX Script es un lenguaje declarativo pensado para la creación interfaces de usuario de aplicaciones multiplataforma con gran cantidad de contenido multimedia

Java

JFrame f = new JFrame();

if (com.awt.sun.util.AWTUtilities.isTranslucentySupported()) {

com.awt.sun.util.AWTUtilities.setTranslucency(true);

}

frame.setUndecorated(true);

JPanel panel = new JPanel() {

protected void paintComponent(Graphics g) {

Graphics2D gfx = (Graphics2D)g.create();

gfx.setRenderingHints(RenderingHints.KEY_ANTIALIASING,

RenderingHints.VALUE_ANTIALIASING_ON):

gfx.setColor(Color.RED);

gfx.drawOval(0,0,100,100);

gfx.dispose();

}

}

frame.getRootPane().setcontent(panel);

frame.setVisible(true);

JavaFX Script

Frame {

stage: Stage {

content: Circle {

centerX: 50

centerY: 50

radius: 50

fill: Color.RED

}

fill: null // sin relleno

}

}

Caracteristicas principales de JavaFX Script

Sintaxis declarativa

GUI

Swing

Data binding

Incremental evaluation

Estáticamente tipado

Características de estructuración, rehuso y encapsulación de código que permiten crear y mantener grandes programas escritos en este lenguaje

Scripts

Un “script” es una o más declaraciones o expresiones

import java.lang.System;

var diez : Integer = 10;

System.out.println("Dos veces {diez} es {2 * diez}.");

// Dos veces diez es veinte.

No son obligatorios ni un “main” ni clases o funciones

Clases

class Caballero {

var salud = 100;

var fuerza = 10;

function morir(){

salud = 0

}

function daniar(cantidadDanio: Integer){

salud -= cantidadDanio

}

}

Objetos

var unCaballero = Caballero {}

var caballeroGrosso = Caballero {

salud: 150;

fuerza: 15;

}

unCaballero.daniar(caballeroGrosso.fuerza);

// unCaballero.salud = 75

Tipos básicos

String

var s1 = "Java";

var s2 = "FX";

var s3 = "Java{s2}"; // s3 = "JavaFX"

var s4 = "{s1}{s2}"; // s4 = "JavaFX"

Boolean

var cool = true;

var s = "Java{ if (cool)"FX" else "Script"}";

//s = "JavaFX"

var a = true; // a = true

var b = false; // b = false

var c = a and b; // c = false

var d = a or b; // d = true

var e = not a; // e = false

Duration

var t1 = 5ms; // 5 milisegundos

var t2 = 10s; // 10 segundos

var t3 = 30m; // 30 minutos

var t4 = 1h; // 1 hora

var t5 = t1 + t2 + t3 + t4;

// 1 hora 30 min 10 seg y 5 miliseg

Secuencias

var x = [1,2,3];

// inicialización

insert 10 into x;

// [1, 2, 3, 10]

insert 12 before x[1];

// [1, 12, 2, 3, 10]

delete 12 from x;

// [1, 2, 3, 10]

insert [1..8] into x;

// [1, 2, 3, 10, 1, 2, 3, 4, 5, 6, 7, 8,]

Scene Graph - ¿Qué es?

Es una nueva API de modo retenido para las bibliotecas gráficas de Java.

Creada por el equipo que desarrolló Java2D.

Posee soporte nativo para blurs, glows y shadows.

Funciona perfectamente en combinación con Swing.

Permite optimizaciones interesantes a futuro.

Scene Graph - ¿Qué tiene de bueno?

Hasta el momento, habia bibliotecas similares, pero ninguna equiparable en rendimiento, ni posibilidades de aceleración por hardware.

Es software libre (GPL v2), incluso antes de ser incluido en alguna versión del JRE.

Es un API Java: Groovy, Python, Ruby y otros lenguajes que corren sobre la JVM pueden beneficiarse de ella.

Permite enfocarse en QUE hace la aplicación, en vez de en COMO.

Scene Graph – Ubicación en el stack Java

Scene Graph - Componentes

Nodos

Gráficos, textos, componentes, imagenes

Al agruparlos, puede efectuarse la misma operación sobre todo el grupo

Estados

transformaciones, efectos, visibilidad

Eventos/ Listeners

Mouse, teclado, actualización de nodos

Animaciones

variación de propiedades en el tiempo

javafx.scene.geometry

Ellipse

Polyline

Arc

Path

ShapeSubtract

QuadCurve

LineTo

SVGPath

Polygon

Line

Circle

ArcTo

PathElement

HlineTo

DelegateShape

ClosePath

VlineTo

CurveTo

QuadTo

ShapeIntersect

MoveTo

Rectangle

CubicCurve

Shape

Circle

import javafx.scene.geometry.*;

import javafx.scene.paint.*;

Circle {

centerX: 100

centerY: 100

radius: 50

fill: Color.BLACK

}

Rectangle

Rectangle {

x: 50

y: 50

width: 200

height: 100

arcWidth: 20

arcHeight: 20

fill: Color.BLACK

}

Ellipse

Ellipse {

centerX: 50

centerY: 50

radiusX: 50

radiusY: 25

fill: Color.BLACK

}

ShapeIntersect

ShapeIntersect {

fill: Color.BLACK

a: Rectangle { width: 100 height: 50 }

b: Ellipse {

centerX: 100

centerY: 25

radiusX: 50

radiusY: 25

}

}

ShapeSubtract

ShapeSubtract {

fill: Color.BLACK

a: Rectangle { width: 100 height: 50 }

b: Ellipse {

centerX: 100

centerY: 25

radiusX: 50

radiusY: 25

}

}

Animación

Las animaciones en JavaFX Script son declarativas.

Se describen mediante “snapshots” (key frames).

Una animación es de uno de dos tipos, discreta o interpolada.

En cualquiera de los casos, el sistema inicia automáticamente la animación, la revierte o la detiene según sea indicado.

Animación (II)

Las animaciones ocurren dentro de una linea de tiempo (Timeline).

Cada “timeline” contiene dos o más “key frames”.

También provee atributos para describirla ( autoReverse, repeatCount, etc ), así como funciones para controlarla ( start, stop, pause, resume ).

Animación (III)

Cada key frame tiene asociado un momento relativo al timeline que lo contiene, además de una lista de key values y un trigger que puede ejecutar código en el momento en que el frame sucede.