Controlando Controles

Ivan Sanchez Vera

Programación Visual
UPSE 2017
ImageView

 El ImageView es un
contenedor y visualizador de
imágenes.
 El ImageView carga un objeto
de tipo Image
(javafx.scene.image.Image)

Código:
Image image = new
Image(“test.jpg”);
ImageView iv1 = new
ImageView();
Iv1.setImage(image);
ImageView: Propiedades interesantes

 fitHeight: Se redimensiona la imagen para ajustarse a la altura determinada.

 fitWeight: Se redimensiona la imagen para ajustarse al ancho determinado.
 preserveRatio: Si es true (verdadero), se conservaran las proporciones originales
de la imagen.
 Smooth: Si es true se utiliza un algoritmo de filtrado de mayor calidad (pero mas
lento), si es false se utiliza un algoritmo de filtrado de mayor velocidad (pero
menor calidad).
 ViewPort: Un contenedor rectangular que se utiliza para mostrar la imagen. Este
contenedor se especifica antes de cualquier operación de cambio de imagen
a mostrar (rotar, escalar, transformar). Si el viewPort es null, se despliega toda la
imagen. Si el viewport se especifica, entonces solo la porción de la imagen que
entra en el viewport se mostrara. Si la imagen no cubre todo el ViewPort,
entonces la sección no cubierta del viewPort estará vacia (y asi se mostrara).
 Media Player, Media View y Media
Queremos poner videos y otros
archivos de medios (media) en
nuestras interfaces graficas de usuario
con JavaFX.
Para poder hacer eso requerimos de 3
clases:
 Media: Contenido a reproducir
 MediaView: Contenedor que
desplegara el medio para su Las clases Media, MediaView y
visualizacion. MediaPlayer. Diagrama ilustrativo de
sus relaciones.
 Media Player: La clase que Tomado del tutorial oficial de JavaFX (MediaView).
https://docs.oracle.com/javase/8/javafx/media-
controlara la reproduccion del tutorial/playercontrol.htm

media.
MediaView

 El media view es un nodo que permite visualizar un archivo de media

(audio o video) tocado por un media Player.
 Es decir, el media view nos permite visualizar lo que este tocando un
media Player (asi que para usar este control necesitamos un media Player
obligatoriamente).
Media

 Construye una instancia de media.

 Es la unica manera de establecer una fuente de media.
 El objeto de la clase media debe tener un URI valido y este es inmutable.
 Solo soporta HTTP, FILE y JAR.
 Si la URL HTTP es invalida, se lanzara una excepcion. (RFC-2396)
 Si un error asincronico sucede, se seteara en la propiedad error. Debemos
escuchar esta propiedad para detectar posibles errores (despues lo haremos).
 Si existen errores no asincronicos, se lanzara un MediaException (como cuando
falla el archivo por corrupto).
 Media Formatos Soportados
Audio: MP3; AIFF containing uncompressed PCM;
WAV containing uncompressed PCM; MPEG-4
multimedia container with Advanced Audio Coding
(AAC) audio
Video: FLV containing VP6 video and MP3 audio;
MPEG-4 multimedia container with H.264/AVC
(Advanced Video Coding) video compression
Mas informacion en:
https://docs.oracle.com/javase/8/javafx/media-
tutorial/overview.htm
 Media Player
 La clase media Player provee de controles para reproducir media. Esta clase
controla la reproduccion.
 Se usa en combinacion con la clase Media (medio) y Media View.
 Tiene funcionalidad para:
 Reproducir: Play
 Pausar: Pause
 Parar: Stop
 Buscar en media: seek
 Velocidad: Rate
 Reproduccion Automatica: AutroPlay.
 Tiene propiedades de:
 Volumen: Volume
 Mudo: Mute
 Balanceo: Balance.
 Se puede obtener mas control sobre el audio a traves del ecualizador de audio:
AudioEqualizer.
 Media Player
 La clase Media Player permite tambien obtener Informacion acerca de la
posicion actual de reproduccion (currentTime), velocidad actual de
reproduccion (currentRate) y progreso en llenado de buffer
(bufferProgressTime).
 Para media de tiempo finito, MediaPlayer define un tiempo de inicio
(startTime), un tiempo de fin (stopTime), donde cualquier punto en el video
se encuentra entre startTime y stopTime.
 El periodo de tiempo entre startTime y stopTime es llamado un ciclo.
 Al terminar un ciclo el MediaPlayer puede parar o repetir la reproduccion.
 Su operacion es asincrona (Esto es bueno).
 Tambien hay propiedades de error y eventos en caso de Error (onError),
que permiten detectar errores y responder ante los mismos.
Media Player (Estados)

 Un Media Player tiene los siguientes estados:

 Unknown (Desconocido): Cuando aun no se inicializa.
 Ready (Listo): Una vez inicializado.
 Playing (Tocando): Cuando el reproductor esta tocando el media.
 Paused (Pausado): Cuando el reproductor pausa en un tiempo determinado.
 Stalled (Esperando): Esperando a que se llene el Buffer (como cuando no
funcional el internet de la UPSE).
 Stopped (Parado): Cuando se cancela la reproduccion y el marcador de video
vuelve a la posicion inicial (se limpia el buffer).
 Media Player (Estados y Transiciones)

Actual\ Listo Pausado Tocando Esperando Parado

Siguiente
Desconocido Pre-roll

Listo Autoplay,
play()
Pausado Play() Stop()
Tocando Pause() buffereando Stop()
Esperando Pause() Buffereando Stop()
Parado Pause() Play()
Media Player (Estados y Transiciones)
MediaView: Video de Ejemplo
 Big Buck Bunny
 Un video abierto.
 Es ideal porque el video viene en varios formatos, entre esos el formato MP4
(Media Soportado).
 Para probar el MediaView via HTTP:
https://www.quirksmode.org/html5/tests/video.html
 Para probar el MediaView via File, descargamos el mismo video del Big Buck
Bunny pero lo leemos directo de archivo desde nuestro computador (en
lugar de Streamearlo).
 Clips de Audio con Licencia Creative Commons (CC):
 http://freemusicarchive.org/curator/Creative_Commons/
 http://freemusicarchive.org/
 https://creativecommons.org/about/program-areas/arts-culture/arts-culture-
resources/legalmusicforvideos/
 Media, MediaPlayer Y MediaView: Mas
informacion
Como estos controles son un poco mas complejos de utilizar y tienen muchas mas opciones, les
dejo unos recursos que les pueden resultar de utilidad:
 https://docs.oracle.com/javase/8/javafx/api/javafx/scene/media/MediaView.html
 https://docs.oracle.com/javase/8/javafx/api/javafx/scene/media/MediaPlayer.html
 https://docs.oracle.com/javase/8/javafx/api/javafx/scene/media/Media.html

Tutorial completo en el manejo de Media con JavaFX:

 https://examples.javacodegeeks.com/desktop-java/javafx/javafx-media-api/
 https://docs.oracle.com/javase/8/javafx/media-tutorial/overview.htm

Manejando Errores con Media en JavaFX:

 https://docs.oracle.com/javase/8/javafx/api/javafx/scene/media/MediaException.html
 http://what-when-how.com/javafx-2/playing-audio-using-the-media-classes-javafx-2-part-1/
RadioButton

 El radio button es uno de los controles mas usados

en interfaces graficas de usuario; se utiliza para
que el usuario escoja una entre varias opciones
predefinidas (estaticas).
 Implicaciones: Solo una opción se puede
escoger.
 Si notamos, los radio buttons son un ToggleButton
especializado.
 Para que solo una opción se pueda seleccionar,
se debe definir el ToogleGroup al que pertenece
el boto.
 El ToogleGroup permite a JavaFX saber como se
agrupan los radioButtons porque pueden existir
varios diversos grupos.
Radio Button

 Dar Clic en un RadioButton que ya esta seleccionado no tendrá ningún efecto.

 Un RadioButton que no esta en un ToogleGroup puede ser seleccionado y
deseleccionado.
 Para obtener el RadioButton seleccionado se debe llamar al método
getSelectedToogle del Toogle Group: ToggleGroup.getSelectedToogle().
Código:
ToggleGroup group = new ToggleGroup();
RadioButton button1 = new RadioButton(“Masculino");
button1.setToggleGroup(group);
button1.setSelected(true);
RadioButton button2 = new RadioButton(“Femenino");
button2.setToggleGroup(group);
ScrollPane

 El ScrollPane (Panel Deslizable) es un control que provee movilidad a contenido

anclado estáticamente en un ViewPort (Puerto de Visualizacion).
 El ScrollPane permite al usuario deslizar el ViewPort para visualizar el contenido
a placer mediante Barras Deslizantes (ScrollBar).
 El ScrollPane también permite a la aplicación determinar los valores de
posicionamiento minimo, máximo y actual en ambas direcciones (horizontal y
vertical).
Codigo:
ImageView iv1 = new ImageView();
…
ScrollPane s1 = new ScrollPane();
s1.setPrefSize(120, 120);
s1.setContent(iv1);
DatePicker
WebView
MenuBar
MenuButton
ProgressBar
Pagination
Password Field
HyperLink
ColorPicker
Slider
TreeView