Introducción a JavaFX
-
Upload
flekoso -
Category
Technology
-
view
4.240 -
download
0
Transcript of Introducción a JavaFX
![Page 1: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/1.jpg)
JAVAFX
Ezequiel ArandaSun Microsystems Campus Ambassador
1
![Page 2: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/2.jpg)
¿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
![Page 3: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/3.jpg)
PARTE 1 - JAVAFX
![Page 4: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/4.jpg)
¿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.
![Page 5: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/5.jpg)
El Stack de JavaFX
![Page 6: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/6.jpg)
¿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.
![Page 7: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/7.jpg)
“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
![Page 8: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/8.jpg)
PARTE 2 – JAVAFX SCRIPT
5
![Page 9: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/9.jpg)
JavaFX Script es un lenguaje declarativo pensado para la
creación interfaces de usuario de aplicaciones multiplataforma
con gran cantidad de contenido multimedia
![Page 10: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/10.jpg)
JavaJFrame 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);
![Page 11: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/11.jpg)
JavaFX ScriptFrame {
stage: Stage {
content: Circle {
centerX: 50
centerY: 50
radius: 50
fill: Color.RED
}
fill: null // sin relleno
}
}
![Page 12: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/12.jpg)
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
![Page 13: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/13.jpg)
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
![Page 14: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/14.jpg)
Clasesclass Caballero { var salud = 100; var fuerza = 10;
function morir(){ salud = 0 }
function daniar(cantidadDanio: Integer){ salud -= cantidadDanio }}
![Page 15: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/15.jpg)
Objetosvar unCaballero = Caballero {}
var caballeroGrosso = Caballero { salud: 150; fuerza: 15;}
unCaballero.daniar(caballeroGrosso.fuerza);
// unCaballero.salud = 75
![Page 16: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/16.jpg)
Tipos básicos
Java
String
Number
Boolean Boolean
Integer
Duration
JavaFX Script
java.lang.String
java.lang.Number
byte, short, int, long, BigInteger
No disponible
![Page 17: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/17.jpg)
Stringvar s1 = "Java";
var s2 = "FX";
var s3 = "Java{s2}"; // s3 = "JavaFX"
var s4 = "{s1}{s2}"; // s4 = "JavaFX"
![Page 18: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/18.jpg)
Boolean
var cool = true;var s = "Java{if(cool)"FX"else"Script"}";//s = "JavaFX"
var a = true; // a = truevar b = false; // b = falsevar c = a and b; // c = falsevar d = a or b; // d = truevar e = not a; // e = false
![Page 19: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/19.jpg)
Durationvar 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
![Page 20: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/20.jpg)
Secuenciasvar 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,]
![Page 21: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/21.jpg)
![Page 22: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/22.jpg)
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.
![Page 23: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/23.jpg)
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.
![Page 24: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/24.jpg)
Scene Graph – Ubicación en el stack Java
![Page 25: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/25.jpg)
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
![Page 26: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/26.jpg)
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
![Page 27: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/27.jpg)
Circleimport javafx.scene.geometry.*;
import javafx.scene.paint.*;
Circle { centerX: 100centerY: 100radius: 50fill: Color.BLACK
}
![Page 28: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/28.jpg)
Rectangleimport javafx.scene.geometry.*;
import javafx.scene.paint.*;
Rectangle {
x: 50
y: 50
width: 200
height: 100
arcWidth: 20
arcHeight: 20
fill: Color.BLACK
}
![Page 29: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/29.jpg)
Ellipseimport javafx.scene.geometry.*;
import javafx.scene.paint.*;
Ellipse {
centerX: 50
centerY: 50
radiusX: 50
radiusY: 25
fill: Color.BLACK
}
![Page 30: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/30.jpg)
ShapeIntersectimport javafx.scene.geometry.*;
import javafx.scene.paint.*;
ShapeIntersect {
fill: Color.BLACK
a: Rectangle { width: 100 height: 50 }
b: Ellipse {centerX: 100centerY: 25radiusX: 50radiusY: 25
}
}
![Page 31: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/31.jpg)
ShapeSubtractimport javafx.scene.geometry.*;
import javafx.scene.paint.*;
ShapeSubtract {
fill: Color.BLACK
a: Rectangle { width: 100 height: 50 }
b: Ellipse {centerX: 100centerY: 25radiusX: 50radiusY: 25
}
}
![Page 32: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/32.jpg)
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.
![Page 33: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/33.jpg)
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).
![Page 34: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/34.jpg)
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.• Cada key value posee un valor final para una
propiedad y una función para calcular los valores intermedios.
![Page 35: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/35.jpg)
![Page 36: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/36.jpg)
Recursos JavaFX• Web del proyecto JavaFX> openjfx.dev.java.net
• Blog de Chris Oliver> blogs.sun.com/chrisoliver
• Blog de James Weaver> learnjavafx.typepad.com
• Javapassion (15 de Noviembre)> javapassion.com/javafx
• Blog de Silveira Neto> silveiraneto.net
• Web de JavaFX> javafx.com
![Page 37: Introducción a JavaFX](https://reader034.fdocuments.co/reader034/viewer/2022042602/55a3f0ce1a28ab24168b46e3/html5/thumbnails/37.jpg)
MUCHAS GRACIAS
Ezequiel [email protected]/argentina_ambassador
Basado en un trabajo original de Silveira Netohttp://silveiraneto.net