1
00:00:06,270 --> 00:00:08,860
Proyecto FPMADdigital

2
00:00:08,910 --> 00:00:12,280
Recursos digitales y multimedia
para formación profesional.

3
00:00:16,710 --> 00:00:18,570
Ciclo formativo
de grado superior

4
00:00:18,780 --> 00:00:20,950
Desarrollo de aplicaciones
multiplataforma.

5
00:00:21,810 --> 00:00:22,890
Módulo profesional

6
00:00:23,130 --> 00:00:24,700
Desarrollo de interfaces.

7
00:00:25,470 --> 00:00:26,800
Unidad didáctica

8
00:00:26,850 --> 00:00:29,710
Confección integración
de informes en la aplicación.

9
00:00:30,750 --> 00:00:32,322
Resultados de aprendizaje

10
00:00:33,480 --> 00:00:37,150
Crea informes evaluando y
utilizando herramientas gráficas.

11
00:00:43,950 --> 00:00:45,990
Representación
de datos en gráficos

12
00:00:46,015 --> 00:00:47,710
en JavaFX.

13
00:00:50,580 --> 00:00:52,897
el objetivo de este
video es generar informes

14
00:00:52,922 --> 00:00:55,600
básicos a partir de
una fuente de datos.

15
00:00:56,910 --> 00:00:59,642
En concreto generaremos
un gráfico a partir

16
00:00:59,667 --> 00:01:02,318
de los datos existentes
en nuestra aplicación.

17
00:01:05,640 --> 00:01:07,230
Para realizar este ejercicio

18
00:01:07,440 --> 00:01:10,380
utilizaremos IntelliJ
y OpenJDK 17.

19
00:01:10,560 --> 00:01:13,170
Opcionalmente se
puede utilizar la aplicación

20
00:01:13,195 --> 00:01:16,270
SceneBuilder de forma
independiente al IDE.

21
00:01:20,310 --> 00:01:23,500
Partiendo de nuestra
aplicación ImágenesFX,

22
00:01:23,610 --> 00:01:25,960
vamos a modificar
la vista de datos

23
00:01:26,670 --> 00:01:27,780
para mover la tabla

24
00:01:28,260 --> 00:01:29,830
a región izquierda.

25
00:01:34,110 --> 00:01:35,520
Después
iremos

26
00:01:35,640 --> 00:01:37,470
a la pestaña
gráficos

27
00:01:37,680 --> 00:01:41,140
e incluiremos nuevo gráfico
de tarta en el área central.

28
00:01:41,520 --> 00:01:44,800
Después modificaremos
las características del gráfico

29
00:01:45,316 --> 00:01:46,325
para que ocupe

30
00:01:46,350 --> 00:01:47,980
todo el espacio disponible.

31
00:01:49,470 --> 00:01:50,790
Añadiremos un margen

32
00:01:50,910 --> 00:01:53,350
de diez píxeles en
todos sus extremos.

33
00:01:54,870 --> 00:01:56,500
Y daremos un tamaño

34
00:01:58,260 --> 00:01:59,440
por defecto

35
00:01:59,610 --> 00:02:00,630
a la tabla de

36
00:02:00,750 --> 00:02:01,950
trescientos píxeles,

37
00:02:02,130 --> 00:02:04,000
cien por cada columna.

38
00:02:04,704 --> 00:02:05,735
A continuación

39
00:02:05,760 --> 00:02:07,510
crearemos un identificador

40
00:02:07,650 --> 00:02:09,130
para nuestro gráfico.

41
00:02:09,660 --> 00:02:11,530
Lo llamaremos
pieChart.

42
00:02:13,320 --> 00:02:14,340
Ahora podemos ir

43
00:02:14,520 --> 00:02:15,880
a nuestro controlador.

44
00:02:17,790 --> 00:02:20,470
Añadiremos una
referencia a nuestro gráfico

45
00:02:27,360 --> 00:02:30,221
y crearemos un
método para inicializarlo.

46
00:02:35,850 --> 00:02:36,939
Lo llamaremos

47
00:02:37,560 --> 00:02:39,849
updatePieChart.

48
00:02:43,260 --> 00:02:48,310
Los gráficos de tarta o circulares representan
el peso de un elemento sobre el total.

49
00:02:48,559 --> 00:02:49,565
Por ejemplo,

50
00:02:49,590 --> 00:02:50,850
podríamos representar

51
00:02:51,030 --> 00:02:56,033
el porcentaje de imágenes que pertenecen a
cada categoría en nuestra lista de imágenes.

52
00:02:56,640 --> 00:02:57,746
En primer lugar

53
00:02:57,900 --> 00:02:59,980
crearemos una lista observable,

54
00:03:01,260 --> 00:03:04,750
y contendrá elementos
de tipo PieChart.Data.

55
00:03:09,870 --> 00:03:12,900
Para obtener estos valores
vamos a crear un mapa

56
00:03:13,080 --> 00:03:15,390
utilizando los streams de java.

57
00:03:15,840 --> 00:03:17,710
Definimos un nuevo mapa

58
00:03:18,240 --> 00:03:19,590
tipado como

59
00:03:19,710 --> 00:03:22,660
String y Long

60
00:03:23,220 --> 00:03:26,050
para el nombre de
la categoría y el valor.

61
00:03:26,730 --> 00:03:28,360
Lo llamamos categories.

62
00:03:29,760 --> 00:03:30,760
Obtenemos

63
00:03:31,230 --> 00:03:33,640
el streaming de nuestra
lista de imágenes.

64
00:03:33,780 --> 00:03:35,800
Mediante el método collect

65
00:03:36,120 --> 00:03:37,120
agrupamos

66
00:03:37,500 --> 00:03:39,310
los valores por categoría.

67
00:03:47,220 --> 00:03:49,330
El segundo valor
será

68
00:03:49,470 --> 00:03:51,640
la cuenta de elementos
en la categoría.

69
00:03:51,840 --> 00:03:55,060
Esto nos devolverá una
conexión de tipo mapa.

70
00:03:56,490 --> 00:03:57,880
Ahora recorreremos

71
00:03:58,290 --> 00:03:59,470
el mapa

72
00:04:00,450 --> 00:04:01,750
con un foreach,

73
00:04:14,850 --> 00:04:17,020
y para cada entrada del mapa

74
00:04:18,540 --> 00:04:19,540
añadiremos

75
00:04:20,760 --> 00:04:22,956
un nuevo PieChart.Data

76
00:04:23,070 --> 00:04:24,850
a nuestra serie de datos,

77
00:04:25,020 --> 00:04:26,140
que recibirá

78
00:04:26,490 --> 00:04:28,150
la clave de la categoría

79
00:04:28,230 --> 00:04:29,890
y el valor de la categoría.

80
00:04:35,790 --> 00:04:37,570
Añadimos los datos

81
00:04:38,060 --> 00:04:39,490
a nuestra gráfica.

82
00:04:43,237 --> 00:04:44,280
Llamamos al método

83
00:04:44,324 --> 00:04:45,970
updatePieChart

84
00:04:46,748 --> 00:04:48,790
Desde el método showData.

85
00:04:53,370 --> 00:04:54,370
Ejecutamos.

86
00:04:56,190 --> 00:04:58,980
Como nuestro modelo estrextraía
la categoría de la carpeta,

87
00:04:59,190 --> 00:05:01,300
vamos a cargar las imágenes

88
00:05:01,770 --> 00:05:03,940
clasificadas por carpetas.

89
00:05:20,580 --> 00:05:21,840
Ahora tenemos

90
00:05:21,990 --> 00:05:23,230
tres categorías.

91
00:05:24,090 --> 00:05:27,880
Si pulsamos en el botón
datos podemos ver el gráfico.

92
00:05:29,010 --> 00:05:30,360
Si volvemos a pulsar

93
00:05:30,600 --> 00:05:33,520
podemos ver como el
gráfico se va actualizando.