UNIVERSIDAD FRANCISCO DE PAULA SANTANDER

PROGRAMA DE INGENIERÍA DE SISTEMAS

PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

JavaFX Scene Builder Versión 11.0

Plantilla Guía de Usuario

CONTENIDO

1. Introducción

2. Prerrequisitos del Sistema

3. Conociendo la Ventana Principal

4. Trabajando con el Panel de Contenido

5. Uso del Panel de Documentos

6. Diseño de GUI con el Panel de Biblioteca

6.1 Administrar Elementos GUI personalizados

6.2 Uso de Contenedor de Panel de Cuadrícula (Grid Pane Container)

6.3 Trabajando con un Contenedor de Panel de Borde (Border Pane Container)

6.4 Uso de Contenedor de Panel de Pestañas (Tab Pane Container)

6.5 Trabajando con Controles de Menú (Menu Controls)

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

1) Introducción

Esta plantilla guía sobre el Framework de Interfaz Gráfica de Usuario JavaFX pretende que
estudiantes del programa ingeniería de sistemas de la Universidad Francisco De Paula Santander
aprendan sobre los principales contenedores y controles de JavaFX haciendo uso de la
herramienta Scene Builder en su versión 11.0 para que cada uno de ellos pueda desarrollar
destrezas y aptitudes que le permitirá lograr unos buenos resultados académicos.

2) Prerrequisitos del Sistema

Requerimientos Mínimos de Hardware:

● Procesador: Intel Core i3 o superior.

● Memoria RAM: 2 Gigabytes (GB) o superior.
● Disco Duro: 320 Gb o superior.
● Arquitectura de 64 bits

Requerimientos Mínimos de Software:

● Sistema Operativo: Windows 7, 8, 10 o superior/ MacOs / Linux.
● Tener instalado JDK 11.
● Tener JavaFX Scene Builder v.11.0 instalado.
● o Haber instalado NetBeans 7.3 con Java EE 7 incluyendo GlassFish 4.0 y asegurarse que
está abierto y corriendo.

Antes de Instalación

 Antes de la instalación de SceneBuilder debemos instalar en nuestro equipo, el jdk

de Java en su versión 11, el cual lo encontrará en el siguiente enlace:
https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-
5066655.html?printOnly=1

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

 Nos pedirá iniciar sesión en la cuenta de Oracle, aunque sino posee una deberá
registrarse en ella.

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

 Luego se nos descargará un archivo como en la siguiente imagen que se puede

observar:

 Después, abrimos el archivo con el nombre jdk-11.0.4_windows-x64_bin.exe y

procedemos a instalarlo.

 Ya teniendo instalado Java, nos dirigimos al navegador (el de tu preferencia) y

damos clic en el siguiente enlace: https://gluonhq.com › products › scene-builder

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

 Nos aparecerá la siguiente página

 Procedemos a descargar la aplicación, en donde dice Download Now

 Seleccionamos la distribución de nuestro Sistema Operativo, en este ejemplo es

Windows 7 Professional, así que le damos clic en Download en Platform Windows
Installer.

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

 Nos aparecerá un programa ejecutable llamado SceneBuilder-11.0.msi, que apenas

termine la descarga, procedemos a instalar.

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

Proceso de Instalación

 El archivo SceneBuilder-11.0.msi, damos clic en abrir y nos aparecerá lo siguiente:

 Damos clic en el botón Ejecutar y nos aparecerá lo siguiente:

 Damos clic al checkbox I accept the agreement y luego al botón Next >

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

 Dejamos en la ruta que nos aparece (Esta ruta nos permitirá recordar donde se va
encontrar instalado nuestro programa), damos clic en Next > y comenzará el
proceso de instalación:

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

 Luego nos aparece la ventana principal para comenzar a utilizar el programa:

3) Conociendo la Ventana Principal

 Barra de Menú (Menu Bar): Proporciona acceso al menú de comandos disponibles en

JavaFX Scene Builder.
 Ruta, Selección y Barra de Mensajes (Path, Selection and Message Bar): muestra la
ruta a un elemento seleccionado y le permite seleccionar un elemento para enfocarlo.
También muestra cualquier error o mensajes de estado.
 Panel de Contenido (Content Panel): Es el contenedor de Scene Builder para los
elementos de la GUI que componen su diseño FXML. Por defecto, se abre un nuevo
archivo FXML vacío en JavaFX Scene Builder.
 Panel de la Biblioteca (Library Panel): Enumera los elementos o controles de la GUI
JavaFX disponibles, incluidos los controles personalizados, que puede usar para crear su
diseño FXML. Selecciona los elementos de la GUI de este panel y los agrega al panel
contenido o al panel de jerarquía.
 Panel de Documentos (Document Panel): Contiene las secciones de Jerarquía y
Controlador. La sección Jerarquía muestra una representación en vista de árbol del
diseño FXML que está creando en el Panel de Contenido. Los elementos que no están

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

visibles en el Panel de Contenido pueden enfocarse seleccionándolos en el panel de

Jerarquía. La sección Controlador, le permite administrar la información de origen de
controlador y proporciona información sobre los valores de fx: id asignados (fx: id
values).
 Panel de Inspector (Inspector Panel): Contiene las secciones Propiedades, Diseño y
Código. Las secciones Propiedades y Diseño lo ayudan a administrar las propiedades
del elemento GUI seleccionado actualmente en el panel Contenido o en el panel
Jerarquía. La sección Código le permite administrar las acciones de manejo de eventos
para usar para el elemento GUI seleccionado. El panel Inspector también contiene un
campo de texto Buscar que le permite aislar propiedades específicas que desea
modificar. El siguiente panel también se muestra en la ventana principal cuando
selecciona Ver en el menú principal y luego Mostrar analizador CSS.
 Panel del analizador CSS (CSS Analyzer Panel): le permite explorar todas las
propiedades CSS disponibles para un componente JavaFX en su diseño FXML y le
ayuda a construir las reglas CSS.

4) Trabajando con el Panel de Contenido

En esta sección decimos que el panel de Contenido de JavaFX Scene Builder, es el área
rectangular que ocupa el centro de la ventana de JavaFX Scene Builder. Cuando se comienza un
trabajo lo ideal es comenzar con un proyecto vacío “Empty” pero también está las opciones

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

Aplicación Básica “Basic Application”, el cual permitirá crear un proyecto nuevo una barra de
menú simple o Aplicación Compleja “Complex Application”, el cual permitirá crear una barra
de menú simple más la división del Panel de Contenido en tres secciones para Escritorio aunque
también está móvil.

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

5) Uso del panel de Documentos

El Panel de Documentos se encuentra ubicado en el lado inferior izquierdo en la ventana de la

herramienta. Se compone de las secciones de Jerarquía y Controlador. Puede ocultar el panel de
documentos seleccionando View que se encuentra en la Barra de Menú seguido Hide Left Side
Panel.

 Sección de Jerarquía (Hierarchy Section): La sección Jerarquía muestra todos los

elementos de la GUI que comprenden su diseño FXML, incluidos los que no están
visibles en el panel Contenido. Puedes usar el Panel de Jerarquía para centrarse en un
elemento GUI específico, ya sea un nodo primario o un nodo hoja.

El Panel de Jerarquía también es útil para agregar un elemento gráfico a un elemento

GUI que tiene la propiedad gráfica, según su API. Por ejemplo, puede agregar un
elemento gráfico a un elemento de botón, pero no a un elemento GridPane. Para ello

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

use los siguientes pasos para agregar un círculo elemento gráfico a un elemento Button
usando el Panel de Jerarquía:
 Desde el Panel de Biblioteca, arrastre un elemento Círculo a la capa del Botón de
destino en el Panel de Jerarquía.
 Sin soltar el cursor del mouse, desplace el mouse sobre la capa Button por un segundo y
notará que se crea una nueva subcapa para el Círculo.
 Suelte el cursor del mouse y el Círculo aparece en el Panel de Contenido, con su radio
predeterminado de tamaño 100.
 En la sección Diseño del Panel Inspector, reduzca el tamaño del radio del círculo a 6
para que pueda ocupar más apropiadamente en el botón. Solo puede tener un elemento
gráfico agregado a un elemento Botón (Button) al mismo tiempo. Para agregar un nuevo
gráfico, primero debe eliminar el existente. Si el elemento es un Contenedor, entonces
puede contener cualquier cantidad de elementos gráficos.

 Sección Controlador (Section Controller): le permite administrar la clase

Controlador que desea usar con su documento FXML. La Clase Controlador
proporciona la lógica para manejar el comportamiento de los objetos en su diseño
FXML. En el campo de texto de la Clase Controlador, establece el nombre de clase
Java totalmente calificado del archivo de Clase Controlador que desea utilizar. Este
archivo debe estar en la misma carpeta, una subcarpeta o una carpeta principal en la que
el archivo FXML también se encuentra. Si el archivo de Clase Controlador ya existe en
la misma carpeta que el archivo FXML con el que está trabajando, puede seleccionar la
Clase Controlador desde la lista desplegable haciendo clic en la flecha hacia abajo que
se encierra en un círculo el cual se encuentra en la siguiente figura.

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

Si usted está usando NetBeans IDE con JavaFX Scene Builder y su archivo FXML está
ubicado en un Proyecto NetBeans, entonces el archivo java de la clase Controller puede
ubicarse en cualquier paquete java dentro de la carpeta src de tu proyecto NetBeans.
La lista de todos los valores de fx: id values, utilizados en el documento FXML se
muestra en una vista de tabla. También se encuentra incluida en la sección Controlador
la casilla de verificación fx: root constructor, que crea una referencia a un elemento raíz
previamente definido. Para obtener más información sobre <fx: root> elemento, consulte
el documento API JavaFX.

6) Diseño de GUI con el Panel de Biblioteca

El panel Biblioteca se compone de secciones plegables para contenedores, controles, menús,

formas, gráficos, 3D y elementos diversos que están disponibles para su uso. Para construir su
diseño FXML. Estos elementos de la GUI son los mismos elementos de la GUI de JavaFX que
se entregan con el lanzamiento de Java SE. Para ubicar los componentes de la GUI, como
TextFlow, SwingNode y objetos 3D, que se introdujeron con la versión JDK 8, escriba FX8 en el
campo de texto Buscar del panel Biblioteca. También hay una sección personalizada, que
enumera los componentes personalizados de la GUI que han sido importados a la biblioteca. Los
elementos de tipo personalizado son aquellos componentes de la GUI que no se entrega con las
bibliotecas de API JavaFX en JDK 8.

La compatibilidad con elementos de la GUI 3D es limitada. Puede abrir archivos FXML que
contienen objetos 3D, pero solo puede editar algunas de sus propiedades a través del Panel
Inspector y usted no puede manipular directamente los objetos en el Panel de Contenido. Las
formas 3D predefinidas (Caja, Esfera y Cilindro) que están disponibles en la API JavaFX se
proporcionan en el Sección de formas del Panel de Biblioteca. En la sección 3D hay objetos
relacionados con luces y cámaras Estos están disponibles en la Biblioteca para que pueda editar
sus propiedades y agregue su fx: id para que puedan ser referenciados desde el código fuente de
su controlador.

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

6.1) Administrar Elementos de GUI personalizados.

Enumera todos los elementos personalizados de la GUI que no forman parte de las bibliotecas
API JavaFX 8, pero están disponibles para su uso en el diseño de su GUI. Un elemento GUI
personalizado es una clase Java que ha sido creada por el usuario o por un tercero y agregada a
Biblioteca de componentes disponibles que puede usar en su diseño FXML.

 Agregar componentes personalizados a la biblioteca: Puede importar componentes de

GUI personalizados utilizando Importar del Panel Biblioteca. Puede agregar cualquier
objeto gráfico simple o complejo desde la Jerarquía o Panel de Contenido en la
Biblioteca y conviértalo en un componente reutilizable disponible en Panel de
biblioteca. También puede importar un componente gráfico desde un documento
FXML, o importe un archivo JAR y seleccione un subconjunto de los componentes

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

personalizados que contiene, para hacer componentes reutilizables disponibles

permanentemente en la Biblioteca.

 Para importar componentes de GUI personalizados desde un archivo JAR o

FXML:
1. Seleccione el comando Importar archivo JAR / FXML en el menú del
panel Biblioteca o arrastre el archivo JAR o FXML directamente desde
el administrador de archivos nativo de su sistema (Explorer o Finder) y
colóquelo en el Panel Biblioteca.
2. En la ventana de diálogo Abrir, navegue a la ubicación del archivo JAR
o FXML que quieres importar. El contenido del archivo JAR se
inspecciona y todas las clases de Java que se determinan siendo
adecuados los componentes personalizados se muestran en la ventana de
diálogo. El contenido del archivo FXML se analiza para asegurarse de
que el componente que se agrega es válido y autónomo.
3. Desde la ventana de diálogo Importar, seleccione o anule la selección de
elementos de la lista de elementos que puedes importar.
4. Haga clic en Importar componentes. Los elementos importados se
agregan a la sección Personalizada del Panel Biblioteca. Ellos se puede
usar de inmediato y persisten en la biblioteca incluso después de Scene
Builder es reiniciado.

Ejemplo de importar archivo JAR/FXML

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

6.2) Uso de Contenedor de Panel de Cuadrícula (Grid Pane Container)

Permite crear un diseño flexible de elementos GUI que están organizados en filas y columnas.
Use el Panel de cuadrícula en su diseño seleccionando Panel de cuadrícula desde la sección
Contenedor del panel Biblioteca y arrastrándolo al Panel de contenido o jerarquía. Luego puede
agregar otros elementos de la GUI dentro de la cuadrícula, el contenedor del panel y los
elementos se organizan automáticamente según el relleno, el espacio y otras propiedades.
También puede agregar un elemento contenedor del Panel de cuadrícula para que contenga los
elementos de la GUI que ya ha agregado a su diseño. Use los siguientes pasos:

1. Seleccione Editar y luego Seleccionar todo en el menú principal para seleccionar todos los
elementos en su diseño.
2. Agregue el contenedor del Panel de cuadrícula seleccionando Organizar en el menú Principal,
Ajustar, y luego Panel de cuadrícula de la lista de contenedores.
Un panel de cuadrícula vacío y no seleccionado no está visible en el panel Contenido. Para hacer
sus bordes visibles, haga clic en la capa correspondiente en el panel Jerarquía para ese elemento
de Panel de cuadrícula. Para trabajar con un panel de cuadrícula específico, haga clic
directamente dentro de su perímetro, pero no en cualquiera de los elementos que contiene.
Cuando se selecciona, un Panel de cuadrícula está rodeado por unas pestañas de borde de color
azul claro y se muestra cada número de índice correspondiente, como se muestra en la figura.

Para seleccionar una sola columna o fila, haga clic en la selección pestaña de borde. Las pestañas
de una columna o fila seleccionada adquieren un fondo amarillo, como se muestra en la columna
1 en la Figura. También puede seleccionar múltiples filas o múltiples columnas simultáneamente
para que pueda editar los valores de esos elementos seleccionados en una vez. Sin embargo, no
puede seleccionar una combinación de filas o columnas al mismo tiempo.

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

6.3) Trabajando con Contenedor de Panel de Borde (Border Pane Container)

El contenedor del Panel de Borde le permite diseñar elementos de GUI en la parte superior,
derecha, izquierda, posiciones inferiores y centrales del contenedor. Use el Panel de Bordes en
su diseño, seleccionando el elemento BorderPane de la sección Contenedor del panel Biblioteca
y arrastrándolo al panel Contenido. La Figura muestra el Panel de Jerarquía después se agrega
el elemento BorderPane.

Puede agregar un elemento GUI al contenedor del Panel de borde arrastrando el elemento desde
el Panel de Biblioteca en la posición específica en el Panel de Bordes. También puedes arrastrar
un elemento del panel Biblioteca al Panel de Jerarquía, como se muestra en la siguiente Figura.
Tenga en cuenta que cuando el elemento se arrastra sobre una capa de destino en el panel
Jerarquía, en la posición correspondiente de la capa en el Panel del Borde cambia a un tono de
color más oscuro, como se muestra en el lado derecho de la Figura.

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

6.4) Uso de Contenedor de Panel de Pestañas (Tab Pane Container)

Por defecto, el Panel de pestañas viene con dos elementos de pestañas, cada uno de los cuales
contiene un elemento del panel de anclaje, como se muestra en la figura:

Puede cambiar el título predeterminado de un elemento Tab haciendo doble clic en la pestaña y
directamente editando su propiedad Text en el Panel de Contenido. Para agregar otro elemento
de pestaña a una pestaña Contenedor de paneles, arrastre y suelte un elemento de pestaña desde
el Panel Biblioteca al Panel de pestañas en el Panel de Contenido o el Panel de Jerarquía. El
nuevo elemento Tab se agrega a la derecha de los elementos Tab existentes. Para cambiar el
orden de los elementos de la pestaña dentro del panel de pestañas, use el Panel Jerarquía.
Arrastra y suelta la fila del elemento Tab en el Panel de Jerarquía a la ubicación de destino
dentro del contenedor del Panel de Pestañas. También puede usar el Panel de Contenido para
arrastrar su pestaña a la ubicación de destino dentro del contenedor del Panel de Pestañas.
Para agregar elementos de la GUI al panel de anclaje de un elemento de pestaña, haga clic en el
título del elemento de pestaña de destino para seleccionarlo. Arrastre y suelte el elemento GUI
que desea agregar desde el Panel de Biblioteca al elemento Tabulador, como se muestra en la
Figura.

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

Dependiendo de la longitud del título de cada elemento Tab y el número de elementos Tab en el
contenedor del Panel de Pestañas, llega un momento en que algunas pestañas se ocultan.
Cuando esto ocurre, se agrega automáticamente un menú desplegable al contenedor del Panel de
Pestañas en la barra de menú, como se muestra en la Figura.

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>
 UNIVERSIDAD FRANCISCO DE PAULA SANTANDER
PROGRAMA DE INGENIERÍA DE SISTEMAS
PROYECTO “IMPLEMENTACIÓN UN REPOSITORIO DE
CONTENIDOS DIGITALES SOBRE EL FRAMEWORK DE INTERFAZ
GRÁFICA DE USUARIO JAVA FX. “
IDENTIFICACIÓN: CI-MIC-03
PLANTILLA TECNICA FECHA EMISIÓN: 05/10/2019
Versión: 1.0

6.5) Trabajando con Controles de Menú (Menu Controls)

La sección Controles del Panel Biblioteca contiene tres elementos de control relacionados con el
menú: barra de menú, botón de menú y botón de menú dividido. Cuando arrastra y suelta un
MenuBar desde el panel Biblioteca hasta el Panel de Contenido, se completa con elementos del
menú etiquetados como Archivo, Editar y Ayuda. Por defecto, cada uno de estos menús
elementos contiene un elemento de elemento de menú, como se muestra en la Figura:

Elaborado: Angelica María Barrientos Vera

Aprobado: <Persona que revisó y aprobó el formato> Fecha: <Fecha revisado>