-
101 | *
- 'c' (CENTER): Contenido centrado (por defecto). 102 | *
- 't' (TOP): Contenido centrado con texto arriba de una imágen. 103 | *
- 'l' (LEFT): Contenido en la izquierda [Si tiene imágen y texto la imágen se posiciona primero]. 104 | *
- 'r' (RIGHT): Contenido en la derecha [Si tiene imágen y texto el texto se posiciona primero]. 105 | *
- 'b' (BOTTOM): Contenido centrado con texto abajo de una imágen. 106 | *
-
217 | *
- 'l' (LEFT): Contenido en la izquierda (por defecto). 218 | *
- 'c' (CENTER): Contenido centrado [Si tiene imágen y texto la imágen se posiciona primero]. 219 | *
- 't' (TOP): Contenido centrado con texto arriba de una imágen. 220 | *
- 'r' (RIGHT): Contenido en la derecha [Si tiene imágen y texto el texto se posiciona primero]. 221 | *
- 'b' (BOTTOM): Contenido centrado con texto abajo de una imágen. 222 | *
-
280 | *
- 'l' (LEFT): Contenido en la izquierda (por defecto). 281 | *
- 'c' (CENTER): Contenido centrado. 282 | *
- 'r' (RIGHT): Contenido en la derecha. 283 | *
-
327 | *
- 'l' (LEFT): Contenido en la izquierda (por defecto). 328 | *
- 'c' (CENTER): Contenido centrado. 329 | *
- 'r' (RIGHT): Contenido en la derecha. 330 | *
-
402 | *
- 'l' (LEFT): Contenido en la izquierda (por defecto). 403 | *
- 'c' (CENTER): Contenido centrado. 404 | *
- 'r' (RIGHT): Contenido en la derecha. 405 | *
24 | 
25 |
27 |
28 | ### **Ajustes en el servicio Recursos Service**
29 |
30 | En el servicio **RecursosService** se crea un nuevo objeto decorador **Font**:
31 |
32 | **Declaración:**
33 | ```javascript
34 | // Al inicio del servicio
35 | private Font fontLigera;
36 | ```
37 |
38 | **Ejemplificación:**
39 | ```javascript
40 | // Dentro del método crearFuentes
41 | fontLigera = new Font("LuzSans-Book", Font.PLAIN, 12);
42 | ```
43 |
44 | **Método get:**
45 | ```javascript
46 | public Font getFontLigera() { return fontLigera; }
47 | ```
48 |
49 | También se crea un objeto tipo **ImageIcon**:
50 |
51 | **Declaración:**
52 | ```javascript
53 | // Al inicio del servicio
54 | private ImageIcon iMinimizar;
55 | ```
56 |
57 | **Ejemplificación:**
58 | ```javascript
59 | // Dentro del método crearImagenes
60 | iMinimizar = new ImageIcon("Clase6/resources/images/minimizar.png");
61 | ```
62 |
63 | **Método get:**
64 | ```javascript
65 | public ImageIcon getIMinimizar() { return iMinimizar; }
66 | ```
67 |
68 | ### **Recordatorio**
69 |
70 | Recordando el recorrido, el componente gráfico **login** esta listo y funcional, tiene una vista agradable para los usuarios, un código modularizado y optimizado, además realiza eventos por acción permitiendo cerrar la aplicación, mostrar la información recibida del usuario o abrir la ventana principal.
71 |
72 |
25 | Carpeta perfiles dentro de resources/images en el repositorio
26 |
73 | 
74 |
76 |
77 | La ventana principal ya quedo lista para empezar a construir la Single-Page App a traves de componentes gráficos.
78 |
79 |
74 | Login de usuario en funcionamiento
75 |
80 | 
81 |
83 |
84 | # Componentes Gráficos dentro de un Single-Page App y navegación.
85 |
86 | En esta sesión se verán tres items importantes relacionados con la creación, gestión y navegación de componentes gráficos:
87 | * **Construcción e incorporación de componentes gráficos dentro de Single-Page app**.
88 | * **Navegación y gestión de visibilidad de componentes gráficos**.
89 | * **Control en la creación de componentes gráficos en memoria**.
90 |
91 |
92 | # Construcción e incorporación de componentes gráficos dentro de Single-Page app.
93 |
94 | ## Ajustes
95 |
96 | Ya se realizo una maquetización en la ventana principal y esta cuenta con sus respectivos paneles, los cuales se evidencian por medio de sus colores, sin embargo, su contenido será reemplazado, asi que se procede a retirar el color a los paneles.
97 |
98 |
81 | Vista Principal lista para construirse
82 |
99 | 
100 |
102 |
103 | Realmente en la ventana principal no se usaran objetos decoradores asi que también se removerá el uso del servicio RecursosService y la importación de la librería Color.
104 |
105 |
100 | Paneles de VistaPrincipalTemplate sin color
101 |
106 | 
107 |
109 |
110 | ## Creación e incorporación del Componente Barra Titulo
111 |
112 | Se va a incorporar el componente encargado de mostrar la barra de titulo, primero se crea un nuevo paquete **barraTitulo** dentro del paquete **Components**, en el paquete **barraTitulo** se crearán las clases **BarraTituloTemplate** y **BarraTituloComponent**:
113 |
114 |
107 | A la izquierda se ve el código removido y a la derecha el resultado
108 |
115 | 
116 |
118 |
119 | Como se menciono en la sesión anterior, la clase **Component** puede implementar de alguna interfaz que gestiona eventos de ser necesario, en este caso el componente **barraTitulo** contendrá varios botones para realizar acciones como minimizar o cerrar la aplicación por lo que será necesaria la implementación:
120 |
121 | **implementación de interfaz**
122 | ```javascript
123 | public class BarraTituloComponent implements ActionListener{
124 | }
125 | ```
126 | **implementación de métodos de la interfaz**
127 | ```javascript
128 | @Override
129 | public void actionPerformed(ActionEvent e) {
130 | }
131 | ```
132 |
133 | Se crea el atributo que hace referencia a la clase **Template** y se ejemplifica enviándose como argumento una referencia a si misma con la palabra clave **this** para realizar la inyección de dependencias:
134 |
135 | **Declaración**
136 | ```javascript
137 | private BarraTituloTemplate barraTituloTemplate;
138 | ```
139 |
140 | **Ejemplificación**
141 | ```javascript
142 | // Dentro del constructor
143 | this.barraTituloTemplate = new BarraTituloTemplate(this);
144 | ```
145 | Se debe añadir un método **get** de su único atributo **barraTituloTemplate**, para que otros componentes puedan acceder a la clase gráfica del componente como se explico con anterioridad.
146 |
147 | ```javascript
148 | public BarraTituloTemplate getBarraTituloTemplate() {
149 | return this.barraTituloTemplate;
150 | }
151 | ```
152 |
153 | Ahora se codifica a la clase **BarraTituloTemplate**, esta al tener propiedades gráficas va heredar de un **JPanel**:
154 | ```javascript
155 | public class BarraTituloTemplate extends JPanel{
156 | }
157 | ```
158 |
159 | Recibe por parámetro dentro del constructor a la clase **Component** para igualarla con un atributo global de la misma referencia para cerrar la inyección, ademas obtendrá los servicios de **ObjGraficosService** y **RecursosService**:
160 |
161 | **Declaración:**
162 | ```javascript
163 | private BarraTituloComponent barraTituloComponent;
164 | private ObjGraficosService sObjGraficos;
165 | private RecursosService sRecursos;
166 | ```
167 |
168 | **Obtención de servicios y recibimiento de la clase Component:**
169 | ```javascript
170 | public BarraTituloTemplate(BarraTituloComponent barraTituloComponent){
171 | this.barraTituloComponent = barraTituloComponent;
172 | this.sObjGraficos= ObjGraficosService.getService();
173 | this.sRecursos = RecursosService.getService();
174 | }
175 | ```
176 |
177 | Como la clase hereda de un **JPanel** es necesario darle propiedades gráficas asi que se realizan varias configuraciones:
178 | ```javascript
179 | // Dentro del constructor al final
180 | this.setSize(850, 50);
181 | this.setBackground(Color.WHITE);
182 | this.setLayout(null);
183 | this.setVisible(true);
184 | ```
185 |
186 | Note que el tamaño del panel de esta clase **Template** debe ser exactamente igual que el panel en la **VistaPrincipal** al que se incorporará, en este caso a el panel **pBarra**:
187 |
188 |
116 | Creación componente barraTitulo con su respectivo paquete y clases
117 |
189 | 
190 |
192 |
193 | Se agregarán en el componente 4 objetos gráficos principales, un **Logo**, un **Título**, un **Botón de minimizar** y un **Botón de cerrar**, también se agregarán algunos objetos decoradores, por lo que se realiza el proceso de creación reflejado en las sesiones anteriores:
194 |
195 | **Declaración**
196 | ```javascript
197 | //Declaración objetos gráficos
198 | private JLabel lLogoApp, lTituloApp;
199 | private JButton bCerrar, bMinimizar;
200 |
201 | //Declaración Objetos Decoradores
202 | private ImageIcon iLogoApp, iDimAux;
203 | private Font fontTituloBarra;
204 | ```
205 | Se puede observar que se creará una fuente que solo se utilizará para el titulo de la interfaz asi que se crea dentro del componente especifico y no en **RecursosService**
206 |
207 | **Método crearObjetosDecoradores:**
208 | ```javascript
209 | public void crearObjetosDecoradores(){
210 | iLogoApp = new ImageIcon("Clase6/resources/images/logo_app.png");
211 | fontTituloBarra= new Font("Britannic Bold", Font.PLAIN, 24);
212 | }
213 | ```
214 |
215 | **Método crearJButtons:**
216 | ```javascript
217 | public void crearJButtons(){
218 | // BOTÓN CERRAR ----------------------------------------------------
219 | iDimAux = new ImageIcon(
220 | sRecursos.getICerrar().getImage()
221 | .getScaledInstance(23, 23, Image.SCALE_AREA_AVERAGING)
222 | );
223 | bCerrar = sObjGraficos.construirJButton(
224 | null,
225 | 800, 10, 45, 30,
226 | sRecursos.getCMano(),
227 | iDimAux,
228 | null, null, null, null,
229 | "c",
230 | false
231 | );
232 | bCerrar.addActionListener(barraTituloComponent);
233 | this.add(bCerrar);
234 |
235 | // BOTÓN MINIMIZAR ----------------------------------------------------
236 | iDimAux = new ImageIcon(
237 | sRecursos.getIMinimizar().getImage()
238 | .getScaledInstance(28, 28, Image.SCALE_AREA_AVERAGING)
239 | );
240 | bMinimizar = sObjGraficos.construirJButton(
241 | null,
242 | 750, 10, 45, 30,
243 | sRecursos.getCMano(),
244 | iDimAux,
245 | null, null, null, null,
246 | "c",
247 | false
248 | );
249 | bMinimizar.addActionListener(barraTituloComponent);
250 | this.add(bMinimizar);
251 | }
252 | ```
253 | Como el botón cerrar va a utilizar la misma imagen usada en el login se llama al servicio **RecursosService** para obtener dicha imagen compartida. También se observa que se agrego de una vez la propiedad **addActionListener** en ambos botones.
254 |
255 | **Método crearJLabels:**
256 | ```javascript
257 | public void crearJLabels(){
258 | // LABEL LOGO APP--------------------------------------------------------------------
259 | iDimAux = new ImageIcon(
260 | iLogoApp.getImage()
261 | .getScaledInstance(50, 50, Image.SCALE_AREA_AVERAGING)
262 | );
263 | lLogoApp = sObjGraficos.construirJLabel(
264 | null,
265 | 20, 0, 50, 50,
266 | null,
267 | iDimAux,
268 | null, null, null, null,
269 | "c"
270 | );
271 | this.add(lLogoApp);
272 |
273 | // LABEL TITULO APP--------------------------------------------------------------------
274 | lTituloApp = sObjGraficos.construirJLabel(
275 | "ProductList",
276 | 40, 5, 200, 40,
277 | null, null,
278 | fontTituloBarra,
279 | null,
280 | sRecursos.getColorPrincipal(),
281 | null,
282 | "c"
283 | );
284 | this.add(lTituloApp);
285 | }
286 | ```
287 | Note que en el label **lTituloApp** se esta usando la fuente exclusiva de este componente gráfico.
288 |
289 | **Llamada de métodos de creación desde el constructor:**
290 | ```javascript
291 | //Dentro del constructor después de obtener servicios
292 | this.crearObjetosDecoradores();
293 | this.crearJLabels();
294 | this.crearJButtons();
295 | ```
296 |
297 | Por ultimo se crean métodos **get** para los botones para puedan ser manipulados desde la clase **Component**:
298 | ```javascript
299 | public JButton getBCerrar() { return bCerrar; }
300 |
301 | public JButton getBMinimizar() { return bMinimizar; }
302 | ```
303 |
304 | La clase **Template** del componente **barraTitulo** esta lista. Por otro lado para la clase **Component** solo falta añadir la configuración de los eventos de acción. En este caso serán el de minimizar y salir de la aplicación, primero se procede a crear una discriminación por objetos:
305 | ```javascript
306 | @Override
307 | public void actionPerformed(ActionEvent e) {
308 | if (e.getSource() == barraTituloTemplate.getBMinimizar())
309 | // Acción para minimizar
310 | if (e.getSource() == barraTituloTemplate.getBCerrar())
311 | // Acción para Cerrar
312 | }
313 | ```
314 | ### **Comunicación bidireccional entre componentes gráficos**
315 | Note que aunque el componente **barraTitulo** contiene los botones que realizan estas acciones, el componente que se debe encargar realmente de cerrar o minimizar la ventana debe ser **vistaPrincipal**. Así que se crean los métodos encargados de realizar estas acciones dentro de la clase **VistaPrincipalComponent**:
316 | ```javascript
317 | // Dentro de la clase VistaPrincipalComponent
318 | public void cerrar() {
319 | System.exit(0);
320 | }
321 |
322 | public void minimizar() {
323 | this.vistaPrincipalTemplate.setExtendedState(Frame.ICONIFIED);
324 | }
325 | ```
326 |
327 | El anterior código para minimizar la ventana se debe llamar a la clase de la ventana **VistaPrincipalTemplate** y se usa el método:
328 |
329 | * **setExtendedState:** Que recibe como parámetro un estado de la clase Frame y que cambia la perspectiva de la ventana haciendo posible acciónes como minimizar, expandir etc. El Argumento **Frame.ICONIFIED** le indica a la ventana que se minimize.
330 |
331 | Es necesario para llamar a este estado importar la librería del Frame dentro de la clase VistaPrincipalComponent:
332 | ```javascript
333 | import java.awt.Frame;
334 | ```
335 |
336 | Ahora se debe llamar a los métodos correspondientes de la vista principal dentro del componente **barraTitulo**, sin embargo es necesario obtener una referencia del componente **vistaPrincipal**, así que se recibirá por parámetro un objeto que haga referencia a la clase component y luego se utilizará:
337 | * **Declaración:**
338 | ```javascript
339 | private VistaPrincipalComponent vistaPrincipalComponent;
340 | ```
341 |
342 | * **Obtención de referencia por inyección**
343 | ```javascript
344 | public BarraTituloComponent(VistaPrincipalComponent vistaPrincipalComponent) {
345 | this.vistaPrincipalComponent = vistaPrincipalComponent;
346 | ...
347 | ...
348 | }
349 | ```
350 |
351 | * **Uso de objeto recibido para llamar a los métodos:**
352 | ```javascript
353 | @Override
354 | public void actionPerformed(ActionEvent e) {
355 | if (e.getSource() == barraTituloTemplate.getBMinimizar())
356 | vistaPrincipalComponent.minimizar();
357 | if (e.getSource() == barraTituloTemplate.getBCerrar())
358 | vistaPrincipalComponent.cerrar();
359 | }
360 | ```
361 |
362 | En este caso se esta recibiendo una referencia del componente padre **VistaPrincipal** por el constructor creando así una inyección de dependencia y esto crea a su vez una comunicación bidireccional entre ambos componentes, Ahora el componente padre **VistaPrincipal** puede enviar peticiones a **barraTitulo** y viceversa. (Este proceso de comunicación bidireccional entre componentes se explica con mas detalle en la sección de navegación.)
363 |
364 | Esta comunicación entre componentes solo se debe realizar en caso de ser necesario, por lo general solamente existe una comunicación unidireccional donde el componente padre realiza peticiones al hijo nada mas.
365 |
366 | El Componente esta totalmente listo, sin embargo, falta incorporarlo a la ventana principal:
367 |
368 | ### **Incorporación de componente en la Single-Page app**
369 |
370 | En la clase **VistaPrincipalComponent** se va a declarar un objeto del componente **barraTitulo** y como se explico en la sesión anterior, debe hacerse el llamando exclusivamente a la clase **Component**:
371 |
372 | **Declaración:**
373 | ```javascript
374 | //Declaración componentes
375 | private BarraTituloComponent barraTituloComponent;
376 | ```
377 | **Ejemplificación:**
378 | ```javascript
379 | //Dentro del constructor
380 | this.barraTituloComponent = new BarraTituloComponent(this);
381 | ```
382 |
383 | Note que dentro de la ejemplificación se enviá una referencia asi misma con la palabra clave **this** para terminar la inyección de dependencias.
384 |
385 | Ahora se realiza la parte **más importante** que es la incorporación del componente a la ventana, como se quiere que al abrir la ventana este componente ya este incorporado se realiza el siguiente proceso dentro del constructor:
386 | * Primero se obtiene el panel que incorporará al componente, en este caso **pBarra** y para esto se llama al método **get** correspondiente de la clase **VistaPrincipalTemplate**:
387 | ```javascript
388 | //Dentro del constructor
389 | vistaPrincipalTemplate.getPBarra();
390 | ```
391 |
392 | * Una vez obtenido el panel, se le indica al panel que se agregará un objeto, para eso se llama a su método de configuración **add**:
393 | ```javascript
394 | //Dentro del constructor
395 | vistaPrincipalTemplate.getPBarra().add();
396 | ```
397 |
398 | * Se debe especificar que se va a incorporar, entonces dentro de los paréntesis se llama a la clase **Component** que antes se ha ejemplificado:
399 | ```javascript
400 | //Dentro del constructor
401 | vistaPrincipalTemplate.getPBarra().add(barraTituloComponent);
402 | ```
403 | * Sin embargo la clase **BarraTituloComponent** no cuenta con propiedades gráficas, es la clase **BarraTituloTemplate** la que si las tiene ya que hereda de un **JPanel**, es por eso que el editor muestra un error con el código anterior. Sin embargo, la clase **BarraTituloComponent** tiene un método **get** que devuelve la clase **Template**, asi que se invoca:
404 | ```javascript
405 | //Dentro del constructor
406 | vistaPrincipalTemplate.getPBarra().add(
407 | barraTituloComponent.getBarraTituloTemplate()
408 | );
409 | ```
410 | Por cuestiones de espacio horizontal se acomoda la linea de código.
411 |
412 | Si se ejecuta la aplicación y abrimos la ventana principal se observa que se ha incorporado exitosamente su primer componente gráfico:
413 |
190 | Mismo tamaño de componente con Panel al que se incorporará
191 |
414 | 
415 |
417 |
418 | Incluso al darle click al botón de cerrar o al botón minimizar estos funcionarán de forma adecuada.
419 |
420 | ## Creación e incorporación del Componente Navegación Usuario
421 |
422 | Se va a repetir el mismo proceso para el componente gráfico **navegacionUsuario** este componente es el encargado de mostrar en pantalla los botones con los que el usuario podrá navegar dentro de la aplicación. Se crea a continuación su paquete con sus respectivas clases dentro del paquete **components**:
423 |
424 |
415 | Vista principal con su primer componente agregado
416 |
425 | 
426 |
428 |
429 | Se empieza con la clase **Component**, como el componente contendrá botones, es necesaria la implementación de la interfaz **ActionListener** y su método:
430 | ```javascript
431 | public class NavegacionUsuarioComponent implements ActionListener {
432 |
433 | @Override
434 | public void actionPerformed(ActionEvent e) {
435 | }
436 | }
437 | ```
438 |
439 | Se crea el atributo que referencia a la clase **Template** y se ejemplifica enviándose como argumento a si mismo con la palabra clave **this** para realizar la inyección:
440 |
441 | **Declaración**
442 | ```javascript
443 | private NavegacionUsuarioTemplate navegacionUsuarioTemplate;
444 | ```
445 |
446 | **Ejemplificación**
447 | ```javascript
448 | //dentro del constructor
449 | this.navegacionUsuarioTemplate = new NavegacionUsuarioTemplate(this);
450 | ```
451 |
452 | Se debe generar también el método **get** de su clase **Template** correspondiente:
453 | ```javascript
454 | public NavegacionUsuarioTemplate getNavegacionUsuarioTemplate() {
455 | return this.navegacionUsuarioTemplate;
456 | }
457 | ```
458 |
459 | Ahora en la clase **NavegacionUsuarioTemplate** esta debe heredar de un **JPanel**:
460 |
461 | ```javascript
462 | public class NavegacionUsuarioTemplate extends JPanel{
463 | }
464 | ```
465 |
466 | Se obtienen los servicios y la clase **Component** desde el constructor:
467 |
468 | **Declaración de servicios y clase Component**
469 | ```javascript
470 | private NavegacionUsuarioComponent navegacionUsuarioComponent;
471 | private ObjGraficosService sObjGraficos;
472 | private RecursosService sRecursos;
473 | ```
474 |
475 | **Obtención de servicios y recibimiento del objeto de clase Component**
476 | ```javascript
477 | public NavegacionUsuarioTemplate(NavegacionUsuarioComponent navegacionUsuarioComponent){
478 | this.navegacionUsuarioComponent = navegacionUsuarioComponent;
479 | this.sObjGraficos= ObjGraficosService.getService();
480 | this.sRecursos = RecursosService.getService();
481 | }
482 | ```
483 |
484 | Se dan las propiedades gráficas al componente gráfico y se debe prestar atención al tamaño ya que debe ser el mismo al panel en la ventana principal que lo va a incorporar, en este caso el panel **pNavegacion**:
485 | ```javascript
486 | // Dentro del constructor
487 | this.setSize(250, 700);
488 | this.setLayout(null);
489 | this.setVisible(true);
490 | ```
491 |
492 | Este componente va a contener los siguientes objetos gráficos:
493 |
494 | * Panel que muestra información del usuario:
495 | * Label con un icono de usuario.
496 | * Label con el nombre del usuario.
497 | * Label con fotografiá del usuario.
498 | * Label con un pequeño eslogan.
499 | * Panel que contiene los botones de navegación:
500 | * Botones de navegación (serán 6 en total)
501 |
502 | **Declaraciones:**
503 | ```javascript
504 | //Declaración objetos gráficos
505 | private JPanel pSuperior, pInferior;
506 | private JLabel lNombreUsuario, lEslogan, lImagenUsuario, lIconoUsuario;
507 | private JButton bInicio, bPerfil, bAmigos, bProductos, bConfiguracion, bCerrarSesion;
508 |
509 | //Declaración Objetos Decoradores
510 | private ImageIcon iIconoUsuario, iInicio, iPerfil, iAmigos, iProductos,
511 | iConfiguracion, iCerrarSesion, iImagenUsuario, iDimAux;
512 | private Border bVacio;
513 | ```
514 |
515 | **Método construirJPanels:**
516 | ```javascript
517 | public void crearJPanels(){
518 | this.pSuperior = sObjGraficos.construirJPanel(
519 | 0, 0, 250, 300,
520 | sRecursos.getColorPrincipal(),
521 | null
522 | );
523 | this.add(pSuperior);
524 |
525 | this.pInferior = sObjGraficos.construirJPanel(
526 | 0, 300, 250, 400,
527 | sRecursos.getColorPrincipal(),
528 | null
529 | );
530 | this.add(pInferior);
531 | }
532 | ```
533 |
534 | **Método crearObjetosDecoradores:**
535 | ```javascript
536 | public void crearObjetosDecoradores(){
537 | this.iIconoUsuario = new ImageIcon("Clase6/resources/images/usuario_navegacion.png");
538 | this.iInicio = new ImageIcon("Clase6/resources/images/inicio.png");
539 | this.iPerfil = new ImageIcon("Clase6/resources/images/perfil.png");
540 | this.iAmigos = new ImageIcon("Clase6/resources/images/amigos.png");
541 | this.iProductos = new ImageIcon("Clase6/resources/images/productos.png");
542 | this.iConfiguracion = new ImageIcon("Clase6/resources/images/configuracion.png");
543 | this.iCerrarSesion = new ImageIcon("Clase6/resources/images/salir.png");
544 | this.iImagenUsuario = new ImageIcon("Clase6/resources/images/perfiles/perfil1.png");
545 | this.bVacio = new EmptyBorder(2, 20, 2, 2);
546 | }
547 | ```
548 | Se puede observar que se crea un borde vació, este borde será utilizado para crear un espació interno o Padding entre el borde de los botones y el contenido de los mismos.
549 |
550 | **Método crearJLabels:**
551 | ```javascript
552 | public void crearJLabels(){
553 | // LABEL ICONO USUARIO--------------------------------------------------------------------
554 | iDimAux = new ImageIcon(
555 | iIconoUsuario.getImage()
556 | .getScaledInstance(40, 40, Image.SCALE_AREA_AVERAGING)
557 | );
558 | this.lIconoUsuario = sObjGraficos.construirJLabel(
559 | null,
560 | 10, 20, 40, 40,
561 | null,
562 | iDimAux,
563 | null, null, null, null,
564 | "c"
565 | );
566 | this.pSuperior.add(lIconoUsuario);
567 |
568 | // LABEL NOMBRE USUARIO--------------------------------------------------------------------
569 | this.lNombreUsuario = sObjGraficos.construirJLabel(
570 | "Nombre de Usuario",
571 | ((this.pSuperior.getWidth() - 200) / 2) + 10, 20, 200, 40,
572 | null, null,
573 | sRecursos.getFontTitulo(),
574 | null,
575 | Color.WHITE,
576 | null,
577 | "c"
578 | );
579 | this.pSuperior.add(lNombreUsuario);
580 |
581 | // LABEL IMAGEN USUARIO--------------------------------------------------------------------
582 | iDimAux = new ImageIcon(
583 | iImagenUsuario.getImage()
584 | .getScaledInstance(180, 180, Image.SCALE_AREA_AVERAGING)
585 | );
586 | this.lImagenUsuario = sObjGraficos.construirJLabel(
587 | null,
588 | (this.pSuperior.getWidth() - 180) / 2, 75, 180, 180,
589 | null,
590 | iDimAux,
591 | null, null, null, null,
592 | "c"
593 | );
594 | this.pSuperior.add(lImagenUsuario);
595 |
596 | // LABEL ESLOGAN--------------------------------------------------------------------
597 | this.lEslogan = sObjGraficos.construirJLabel(
598 | "
426 | Creación del componente gráfico navegacionUsuario
427 | Nuestros clientes son
lo mas importante
",
599 | (this.pSuperior.getWidth() - 180) / 2, 265, 180, 40,
600 | null, null,
601 | sRecursos.getFontLigera(),
602 | null,
603 | Color.WHITE,
604 | null,
605 | "c");
606 | this.pSuperior.add(lEslogan);
607 | }
608 | ```
609 |
610 | Note que en el label **lEslogan** hay algo diferente, y es que el texto se ha escrito dentro de etiquetas **HTML**. Esto es debido a que java no permite dar saltos de linea dentro de un label, es decir que si se escribe **\n** que representa un salto de linea en consola no va a funcionar para los Labels, es por eso que se usan etiquetas HTML para poder dar saltos de linea al texto y ademas brindar de varias otras características como:
611 | * **``** indica que se va a iniciar un formato html y se debe cerrar al final con **``**.
612 | * **`lo mas importante
`** Le da al texto propiedad de centrado, la etiqueta **div** debe tener una etiqueta de cerrado **`
`**.
613 | * **``** Le da al texto propiedad de texto justificado, la etiqueta **div** debe tener una etiqueta de cerrado **`
`**.
614 | * **``** indica un salto de linea, esto es solo cuando se quiere dar un salto de linea explicito, si no se coloca esta etiqueta de todos modos el html realiza el salto de linea automático una vez ocupa todo el espacio de ancho. 615 | 616 | **Método crear JButtons** 617 | ```javascript 618 | public void crearJButtons(){ 619 | // BOTÓN INICIO-------------------------------------------------------------------- 620 | iDimAux = new ImageIcon( 621 | iInicio.getImage() 622 | .getScaledInstance(20, 20, Image.SCALE_AREA_AVERAGING) 623 | ); 624 | this.bInicio = sObjGraficos.construirJButton( 625 | " Inicio", 626 | 30, 30, 200, 40, 627 | sRecursos.getCMano(), 628 | iDimAux, 629 | sRecursos.getFontMediana(), 630 | null, 631 | Color.WHITE, 632 | bVacio, 633 | "l", 634 | false 635 | ); 636 | this.bInicio.addActionListener(navegacionUsuarioComponent); 637 | this.pInferior.add(bInicio); 638 | 639 | // BOTÓN PERFIL-------------------------------------------------------------------- 640 | iDimAux = new ImageIcon( 641 | iPerfil.getImage() 642 | .getScaledInstance(20, 20, Image.SCALE_AREA_AVERAGING) 643 | ); 644 | this.bPerfil = sObjGraficos.construirJButton( 645 | " Perfil", 646 | 30, 80, 200, 40, 647 | sRecursos.getCMano(), 648 | iDimAux, 649 | sRecursos.getFontMediana(), 650 | null, 651 | Color.WHITE, 652 | bVacio, 653 | "l", 654 | false 655 | ); 656 | this.bPerfil.addActionListener(navegacionUsuarioComponent); 657 | this.pInferior.add(bPerfil); 658 | 659 | // BOTÓN AMIGOS-------------------------------------------------------------------- 660 | iDimAux = new ImageIcon( 661 | iAmigos.getImage() 662 | .getScaledInstance(20, 20, Image.SCALE_AREA_AVERAGING) 663 | ); 664 | this.bAmigos = sObjGraficos.construirJButton( 665 | " Amigos", 666 | 30, 130, 200, 40, 667 | sRecursos.getCMano(), 668 | iDimAux, 669 | sRecursos.getFontMediana(), 670 | null, 671 | Color.WHITE, 672 | bVacio, 673 | "l", 674 | false 675 | ); 676 | this.bAmigos.addActionListener(navegacionUsuarioComponent); 677 | this.pInferior.add(bAmigos); 678 | 679 | // BOTÓN PRODUCTOS-------------------------------------------------------------------- 680 | iDimAux = new ImageIcon( 681 | iProductos.getImage() 682 | .getScaledInstance(20, 20, Image.SCALE_AREA_AVERAGING) 683 | ); 684 | this.bProductos = sObjGraficos.construirJButton( 685 | " Productos", 686 | 30, 180, 200, 40, 687 | sRecursos.getCMano(), 688 | iDimAux, 689 | sRecursos.getFontMediana(), 690 | null, 691 | Color.WHITE, 692 | bVacio, 693 | "l", 694 | false 695 | ); 696 | this.bProductos.addActionListener(navegacionUsuarioComponent); 697 | this.pInferior.add(bProductos); 698 | 699 | // BOTÓN CONFIGURACIÓN-------------------------------------------------------------------- 700 | iDimAux = new ImageIcon( 701 | iConfiguracion.getImage() 702 | .getScaledInstance(20, 20, Image.SCALE_AREA_AVERAGING) 703 | ); 704 | this.bConfiguracion = sObjGraficos.construirJButton( 705 | " Configuraciones", 706 | 30, 230, 200, 40, 707 | sRecursos.getCMano(), 708 | iDimAux, 709 | sRecursos.getFontMediana(), 710 | null, 711 | Color.WHITE, 712 | bVacio, 713 | "l", 714 | false 715 | ); 716 | this.bConfiguracion.addActionListener(navegacionUsuarioComponent); 717 | this.pInferior.add(bConfiguracion); 718 | 719 | // BOTÓN CERRAR SESIÓN-------------------------------------------------------------------- 720 | iDimAux = new ImageIcon( 721 | iCerrarSesion.getImage() 722 | .getScaledInstance(20, 20, Image.SCALE_AREA_AVERAGING) 723 | ); 724 | this.bCerrarSesion = sObjGraficos.construirJButton( 725 | " Cerrar Sesión", 726 | 30, 280, 200, 40, 727 | sRecursos.getCMano(), 728 | iDimAux, 729 | sRecursos.getFontMediana(), 730 | null, 731 | Color.WHITE, 732 | bVacio, 733 | "l", 734 | false 735 | ); 736 | this.bCerrarSesion.addActionListener(navegacionUsuarioComponent); 737 | this.pInferior.add(bCerrarSesion); 738 | } 739 | ``` 740 | 741 | Estos botones tienen unas características peculiares: 742 | * Todos cuentan con una imagen y ademas un texto, esto es posible y el servicio **ObjGraficosService** esta configurado para estos casos. 743 | * Para que exista una separación visible entre el icono y el texto, este ultimo empieza con unos espacios de la forma: 744 |
745 | 
746 |
748 |
749 | * El botón esta vez cuenta con una dirección hacia la izquierda para que la imágen este antes que el texto, por lo que se envía como argumento **"l"** para el parámetro **dirección**.
750 | * Cuenta con un padding para que exista una separación entre el borde y el contenido, por lo que se utiliza el borde **bVacio**, esto no se verá reflejado aun ya que el botón no cuenta con fondo, pero en futuras sesiones cuando se hable de eventos del Mouse se resaltará la importancia del uso de este borde.
751 | * No tienen fondo por lo que se envía como argumento un **false** para el parámetro **esSolido**.
752 |
753 | **Llamada de métodos de creación desde el constructor:**
754 | ```javascript
755 | //Dentro del constructor después de obtener servicios
756 | this.crearObjetosDecoradores();
757 | this.crearJPanels();
758 | this.crearJLabels();
759 | this.crearJButtons();
760 | ```
761 |
762 | El componente gráfico esta casi listo solo falta realizar la configuración de los eventos de acción pero esto se discutirá en la siguiente sección **Navegación y gestión de visibilidad de componentes gráficos**. Por el momento se va a incorporar en la vista principal.
763 |
764 | ### **Incorporación de componente en la Single-Page app**
765 |
766 | Nuevamente en la clase **VistaPrincipalComponent** se declara un objeto del componente **navegacionUsuario** y como se explico en la sesión anterior, debe hacerse el llamando exclusivamente a la clase **Component**.
767 |
768 | **Declaración:**
769 | ```javascript
770 | //Declaración componentes
771 | private NavegacionUsuarioComponent navegacionUsuarioComponent;
772 | ```
773 | **Ejemplificación:**
774 | ```javascript
775 | //Dentro del constructor
776 | this.navegacionUsuarioComponent = new NavegacionUsuarioComponent();
777 | ```
778 |
779 | La incorporación se realiza de la misma manera que se explicó con el anterior componente gráfico, esta vez será incorporado sobre el panel **pNavegacion**:
780 | ```javascript
781 | //Dentro del constructor
782 | vistaPrincipalTemplate.getPNavegacion().add(
783 | navegacionUsuarioComponent.getNavegacionUsuarioTemplate()
784 | );
785 | ```
786 |
787 | Si se corre la aplicación y se abre la ventana principal se observa que se ha incorporado exitosamente el segundo componente:
788 |
746 | Separación de texto con icono dentro del botón
747 |
789 | 
790 |
792 |
793 | Sin embargo al dar click sobre cualquiera de los botónes, estos no hacen nada aun, esto se discutirá en la siguiente sección.
794 |
795 | # Navegación y gestión de visibilidad de componentes gráficos.
796 |
797 | Ya están incorporados los dos componentes a la ventana principal, esto da una ventaja enorme ya que cada componente tiene su propia responsabilidad y su código será mucho más entendible. Lo que se quiere hacer ahora es que cuando se oprima cualquiera de los botones del componente **navegacionUsuario** la ventana principal gestione que componentes se verán dentro del panel **pPrincipal** este proceso se conoce como **navegación** que para paginas web se conoce como **enrutamiento** ya que esta gestión de visibilidad de componentes se hace mediante rutas en el navegador, sin embargo dentro del curso se referirá a este proceso como navegación, al final es el mismo resultado lo que se quiere realizar.
798 |
799 | La clase que se debe encargar de gestionar que es visible y que no dentro de la misma es solamente la clase **VistaPrincipalComponent**, se podría pensar que el componente **navegacionUsuario** al tener los botones se debería encargar de esta labor pero es erróneo, es la misma ventana principal la que debe hacer su propia gestión.
800 |
801 | ## Creación de componentes Gráficos
802 |
803 | Primero se van a crear los componentes gráficos a los cuales se quiere gestionar su visibilidad en la ventana principal.
804 |
805 |
790 | Vista principal con el componente Navegación usuario agregado
791 |
806 | 
807 |
809 |
810 | A continuación se realiza el proceso de creación de uno de estos componentes (**inicio**), los demás tendrán el mismo proceso salvo por un pequeño cambio en cada uno que se explicará más adelante:
811 |
812 | Se inicia con la codificación de la clase **InicioComponent**:
813 |
814 | * Como por ahora este componente no va a contar con ningún botón no es necesario que implemente ninguna interfaz aun, si en el futuro cuando se este creando este componente con mas detalle se nota que contendrá botónes o necesita eventos se realizará en ese caso la implementación, pero por ahora no:
815 | ```javascript
816 | public class InicioComponent{
817 | }
818 | ```
819 | * Se un objeto de la clase **Template** correspondiente y se realiza la inyección:
820 |
821 | **Declaración:**
822 | ```javascript
823 | private InicioTemplate inicioTemplate;
824 | ```
825 | **Ejemplificación:**
826 | ```javascript
827 | // Dentro del constructor
828 | this.inicioTemplate= new InicioTemplate(this);
829 | ```
830 |
831 | * Se crea el método **get** Correspondiente:
832 | ```javascript
833 | public InicioTemplate getInicioTemplate() {
834 | return this.inicioTemplate;
835 | }
836 | ```
837 |
838 | Ahora en la clase **InicioTemplate**:
839 | * Al igual que con los otros componentes creados, esta clase esta heredada de un **JPanel**:
840 | ```javascript
841 | public class InicioTemplate extends JPanel{
842 | }
843 | ```
844 |
845 | * Se recibe la inyección como se ha explicado previamente:
846 |
847 | **Declaración:**
848 | ```javascript
849 | private InicioComponent inicioComponent;
850 | ```
851 | **Recibimiento de inyección e igualación:**
852 | ```javascript
853 | public InicioTemplate(InicioComponent inicioComponent){
854 | this.inicioComponent = inicioComponent;
855 | }
856 | ```
857 | * Se configuran las propiedades gráficas al componente:
858 | ```javascript
859 | // Dentro del constructor
860 | this.setSize(850, 600);
861 | this.setBackground(Color.DARK_GRAY);
862 | this.setLayout(null);
863 | this.setVisible(true);
864 | ```
865 |
866 | Como se ha explicado antes este debe tener exactamente el mismo tamaño que el panel que lo incorporará, en este caso sera el panel **pPrincipal**.
867 |
868 | ***Nota:** Para la creación de los otros componentes gráficos (amigos, configuraciones, perfil, productos) el proceso será exactamente el mismo con la diferencia del color en el **setBackground**, deben ser distintos, esto para diferenciar cada uno de los componentes.*
869 |
870 | ## Comunicación bidireccional entre componentes
871 |
872 | Como lo que se quiere es realizar la gestión de visibilidad desde la clase **VistaPrincipalComponent** pero los botones de activación se encuentra en el componente **navegacionUsuario** debe existir una comunicación bidireccional entre ambos componentes, para lo que realizaremos una **inyección de dependencia entre componentes gráficos** tal y como se realizó con el componente **barraTitulo**.
873 |
874 | * En la clase **NavegacionUsuarioComponent** y se va a recibir por parámetro un objeto de referencia a **VistaPrincipalComponent**:
875 |
876 | ```javascript
877 | public NavegacionUsuarioComponent(VistaPrincipalComponent vistaPrincipalComponent) {
878 |
879 | ...
880 | ```
881 |
882 | * Se declará un objeto (Atributo) de la misma referencia y se iguala al objeto recibido para que sea conocido de forma global en la clase:
883 | ```javascript
884 | private VistaPrincipalComponent vistaPrincipalComponent;
885 |
886 | public NavegacionUsuarioComponent(VistaPrincipalComponent vistaPrincipalComponent) {
887 | this.vistaPrincipalComponent = vistaPrincipalComponent;
888 |
889 | ...
890 | ```
891 |
892 | * Ahora en la clase **VistaPrincipalComponent** va a salir un error en la linea en la que se ejemplifico a la clase **NavegacionUsuarioComponent** ya que este exige el envío de un parámetro por constructor de un objeto de tipo **VistaPrincipalComponent**, simplemente entre los paréntesis se coloca un **this** enviándose a si mismo como argumento:
893 | ```javascript
894 | this.navegacionUsuarioComponent = new NavegacionUsuarioComponent(this);
895 | ```
896 | Ya se ha creado la inyección y con esto hay comunicación bidireccional entre componentes gráficos.
897 |
898 | Antes de continuar, como la clase **VistaPrincipalComponent** se va a encargar de la navegación, se crea un método llamado **mostrarComponente** y recibirá por parámetro un String llamado **comando**:
899 | ```javascript
900 | public void mostrarComponente(String comando){
901 | }
902 | ```
903 |
904 | ## Configurando eventos en componente NavegaciónUsuario
905 |
906 | Aprovechando que todos los botones dentro del componente tienen texto, se va a tomar su comando (texto del botón) para ser enviado a la clase **VistaPrincipalComponent** y asi gestionar la navegación. De esta forma se puede evitar también la creación de los métodos **get** dentro de la clase **NavegacionUsuarioTemplate** por cada botón.
907 |
908 | Dentro de la clase **NavegacionUsuarioComponent** específicamente en el método implementado **ActionPerformed** se va a enviar el comando del botón a la vista principal:
909 |
910 | ```javascript
911 | @Override
912 | public void actionPerformed(ActionEvent e) {
913 | this.vistaPrincipalComponent.mostrarComponente(e.getActionCommand());
914 | }
915 | ```
916 |
917 | Del anterior código se pueden notar varias cosas:
918 | * Como la gestión de navegación se hace desde la vista principal no es necesario realizar una discriminación de acción desde aquí, esto se realizara en la clase **VistaPrincipalComponent**.
919 | * Es posible notar aquí la importancia de declarar un objeto inyectado para igualarlo dentro del constructor, si esto no se hiciera el objeto inyectado solo existiría dentro del constructor y cuando se intente llamar al método **mostrarComponente** desde el método **actionPerformed** sacaría un error en ejecución ya que para este entorno no existiría el objeto **vistaPrincipalComponent**.
920 | * Recordar que el método **getAtionCommand()** va a retornar el texto que contiene el botón que activo el evento (el que se oprimió) en forma de String asi que puede enviarse sin problema como argumento al método **mostrarComponente**.
921 |
922 | Sin embargo, como se vió anteriormente, para hacer la separación del texto con el icono en cada botón el texto iniciaba con unos espaciós, para probar esto, se realiza una muestra por consola asi:
923 | ```javascript
924 | @Override
925 | public void actionPerformed(ActionEvent e) {
926 | System.out.println(e.getActionCommand());
927 | this.vistaPrincipalComponent.mostrarComponente(e.getActionCommand());
928 | }
929 | ```
930 | Cuando se ejecuta el programa y se oprime cualquier botón del componente **navegacionUsuario** y se observa la consola se puede notar lo siguiente:
931 |
932 |
807 | Creación de componentes para gestionar la navegación
808 |
933 | 
934 |
936 |
937 | No se quieren enviar esos espacios que tiene cada botón en su texto por que no se tiene la certeza de cuantos espacios son o si son los mismos en cada botón, ademas contarlos seria un desperdicio de tiempo.
938 |
939 | Se va a hacer uso del método **trim** este método:
940 | * **trim()**: Quita todos los espacios que existan antes y al finalizar un texto dentro de un String.
941 | la configuración queda asi:
942 |
943 | ```javascript
944 | @Override
945 | public void actionPerformed(ActionEvent e) {
946 | System.out.println(e.getActionCommand().trim());
947 | this.vistaPrincipalComponent.mostrarComponente(e.getActionCommand().trim());
948 | }
949 | ```
950 |
951 | Una vez se ejecuta la aplicación y se ve la consola se puede notar lo siguiente:
952 |
934 | Texto de cada botón con espacios al inicio
935 |
953 | 
954 |
956 |
957 | Se puede observar que incluso si existe espacio entre el texto este se conserva como es el caso del comando **cerrar Sesión**.
958 |
959 | ***Nota:** El método para mostrar por consola **(System.out.println)** se uso como una prueba, asi que se puede retirar.*
960 |
961 | ## Configuración de la navegación
962 |
963 | Ya esta casi todo listo para configurar la navegación, ahora se codificará en el método **mostrarComponente** de la clase **VistaPrincipalComponent**.
964 | Una vez se recibe el comando del botón desde el componente **navegacionUsuario** se puede llamar a los demás componentes de acuerdo a la petición del usuario. Esto se realiza con un **switch / case** de la siguiente forma:
965 |
966 | ```javascript
967 | public void mostrarComponente(String comando){
968 | switch(comando){
969 | case "Inicio":
970 | break;
971 | case "Perfil":
972 | break;
973 | case "Amigos":
974 | break;
975 | case "Productos":
976 | break;
977 | case "Configuraciones":
978 | break;
979 | case "Cerrar Sesión":
980 | break;
981 | }
982 | }
983 | ```
984 |
985 | Note que cada caso dentro del **switch** corresponde al comando de cada botón. Ahora dentro de cada caso se va a realizar la incorporación de cada uno de los componentes de acuerdo a la petición. Se realiza el ejemplo para el componente **inicio**, sin embargo para el resto de los componentes es igual:
986 |
987 | ***Nota:** La opción cerrar sesión tendrá un tratamiento diferente y se discutirá de esto en la sección final **Control en la creación de componentes gráficos en memoria** por ahora se deja vacía.*
988 |
989 | * Primero se obtiene el panel que va a incorporar al componente gráfico desde la clase **VistaPrincipalTemplate** con su método **get** correspondiente, en este caso se llama al panel **pPrincipal**:
990 | ```javascript
991 | case "Inicio":
992 | vistaPrincipalTemplate.getPPrincipal();
993 | break;
994 | ```
995 |
996 | * Se le indica al panel que va a agregar un Objeto gráfico:
997 | ```javascript
998 | case "Inicio":
999 | vistaPrincipalTemplate.getPPrincipal().add();
1000 | break;
1001 | ```
1002 |
1003 | * Ahora se debe indicar al panel que componente será agregado, para esto es posible realizar una **ejemplificación anónima del componente** en cuestión. Para este caso será el componente gráfico **inicio**, se realiza entonces la ejemplificación de la clase **InicioComponent**:
1004 |
1005 | ```javascript
1006 | case "Inicio":
1007 | vistaPrincipalTemplate.getPPrincipal().add(new InicioComponent());
1008 | break;
1009 | ```
1010 |
1011 | * Sin embargo como se sabe, la clase **Component** no cuenta con características gráficas por lo que se debe llamar a su clase **Template** correspondiente, se hace a traves del método **get** de esta:
1012 |
1013 | ```javascript
1014 | case "Inicio":
1015 | vistaPrincipalTemplate.getPPrincipal().add(
1016 | new InicioComponent().getInicioTemplate()
1017 | );
1018 | break;
1019 | ```
1020 | Se re acomoda el código para no ocupar mucho espacio horizontal.
1021 |
1022 | Esto se realiza con los demás componentes y en teoría estaría listo, sin embargo, si se ejecuta la aplicación y se oprimen los botones se puede notar que este no realiza ningún cambio aparente.
1023 |
1024 | **¿Por qué sucede esto?**
1025 |
1026 | Hacen falta un par de configuraciones adicionales:
1027 | * Para empezar cada vez que se vuelva a llamar un nuevo componente para ser incorporado en el panel **pPrincipal** es necesario que antes de la incorporación se remueva todo lo que este panel contiene, para que esto sea posible se debe llamar al método **removeAll()**. Esto debe hacerse justamente antes de que empiece el switch:
1028 |
1029 | ```javascript
1030 | public void mostrarComponente(String comando){
1031 | vistaPrincipalTemplate.getPPrincipal().removeAll();
1032 | switch(comando){
1033 | ...
1034 | ...
1035 | }
1036 | ```
1037 |
1038 | * Cada vez que un componente sea agregado en el panel **pPrincipal** se debe actualizar toda la ventana para que esta esta pueda mostrar en la pantalla los cambios ocurridos. Para esto se debe llamar al método **repaint()**. Como este método se realiza una vez se haya incorporado el componente en el panel se debe escribir justo debajo del switch:
1039 |
1040 | ```javascript
1041 | public void mostrarComponente(String comando){
1042 | vistaPrincipalTemplate.getPPrincipal().removeAll();
1043 | switch(comando){
1044 | ...
1045 | ...
1046 | }
1047 | vistaPrincipalTemplate.repaint();
1048 | }
1049 | ```
1050 |
1051 | Si se la aplicación y se oprimen los botones de la navegación se puede observar que ya reemplaza los componentes en el panel principal:
1052 |
1053 |
954 | Texto de cada botón sin espacios al inicio
955 |
1054 | 
1055 |
1057 |
1058 |
1055 | VentanaPrincipal una vez se oprimió el botón Inicio
1056 |
1059 | 
1060 |
1062 |
1063 | # Control en la creación de componentes gráficos en memoria
1064 |
1065 | Cuando se oprima el botón **Cerrar sesión** se quiere que la vista principal deje de ser visible y pueda verse de nuevo el Login. Una opción simple para esto puede ser declarar un objeto de tipo **LoginComponent** desde la clase **VistaPrincipalComponent**, ejemplificarla y decirle a la clase **VistaPrincipalTemplate** que deje de ser visible:
1066 |
1067 |
1060 | VentanaPrincipal una vez se oprimió el botón Configuraciones
1061 |
1068 | 
1069 |
1071 |
1072 | El anterior ejemplo funciona, sin embargo, es necesario recordar que cuando se inicio la aplicación la clase ejecutora **App** ya creo un objeto en memoria del componente **login**, y si se realiza el proceso anterior descrito se estaría creando otro objeto en memoria nuevo del componente **login** cada vez que se cierre sesión, ´por ende el objeto que se creo desde **App** quedaría en el *limbo*.
1073 |
1074 | De hecho si se hecha un vistazo a la clase **LoginComponent** en su método **Entrar** se observa que cada vez que se entra a la ventana principal crea un nuevo objeto de esta:
1075 |
1076 |
1069 | Posible caso de regreso al Login
1070 |
1077 | 
1078 |
1080 |
1081 | Esto es un problema enorme, imagine que un usuario entra y cierra sesión 10 veces, en memoria se estarían creando 10 objetos tanto del componente **login** como de **VistaPrincipal**, incluso cuando se habla de objetos en memoria de componentes gráficos en realidad se hace alusión a todas las clases que conforman un componente por lo que el problema se extiende a medida que se entra en mas detalle. Este problema debe ser arreglado.
1082 |
1083 | Para empezar se va a hacer una **inyección de dependencia entre componentes** esta vez no con el propósito de crear una comunicación bidireccional, lo importante de esta inyección es garantizar que solo existirá un objeto en memoria para el componente de login y uno solo para el componente de la vista principal. **Esto no significa que siempre que se quiera controlar la creación de objetos de algún componente se deba realizar inyección de dependencia**, en este caso se hace por que desde el login se va a gestionar la visibilidad de la ventana principal una vez se inicie sesión y desde la ventana principal se va a gestionar la visibilidad del login una vez se cierre sesión y para eso es necesaria una comunicación bidireccional.
1084 |
1085 | Como el programa inicia con el login la inyección se realizará desde la clase **LoginComponent** a la clase **VistaPrincipalComponent**:
1086 |
1087 | * En la clase **LoginComponent**, específicamente en el método **entrar**, cuando se ejemplifica la clase **VistaPrincipalComponent**, se pasa ahora como argumento el **this** para mandar el objeto de esta clase inyectado:
1088 | ```javascript
1089 | this.vistaPrincipal = new VistaPrincipalComponent(this);
1090 | ```
1091 |
1092 | * En la clase **VistaPrincipalComponent**, ahora se va a recibir por parámetro un objeto de la clase **LoginComponent** y se iguala a un objeto (atributo) declarado del mismo:
1093 |
1094 | ```javascript
1095 | private LoginComponent loginComponent;
1096 |
1097 | public VistaPrincipalComponent(LoginComponent loginComponent){
1098 | this.loginComponent = loginComponent;
1099 | ...
1100 | }
1101 | ```
1102 |
1103 | La inyección ya esta hecha y ahora se tiene una comunicación bidireccional entre ambos componentes gráficos, sin embargo, aun no se ha evitado la creación de muchos objetos del componente **VistaPrincipal** para esto dentro del método **entrar** de la clase **LoginComponent** se realiza el siguiente cambio:
1104 | ```javascript
1105 | public void entrar(){
1106 | if(vistaPrincipal == null)
1107 | this.vistaPrincipal = new VistaPrincipalComponent(this);
1108 | else
1109 | this.vistaPrincipal.getVistaPrincipalTemplate().setVisible(true);
1110 | loginTemplate.setVisible(false);
1111 | }
1112 | ```
1113 |
1114 | En el anterior código se realiza lo siguiente:
1115 | * Se pregunta si el objeto de la clase **VistaPrincipalComponent** no se ha ejemplificado, si aun no se ha entrado a la vista principal este objeto efectivamente estará vacío ya que no se ha ejemplificado antes.
1116 | * Si este esta vacío se ejemplifica enviando como argumento una referencia de la clase **LoginComponent** con un **this** y asi realizar la inyección.
1117 | * Si este ya se ha ejemplificado previamente (por ejemplo se inicio sesión una vez, se cerro la sesión y se volvió a iniciar) entonces se obtiene la clase **VistaPrincipalTemplate** mediante el método **get** y se le indica que sea Visible nuevamente.
1118 | * Para ambos casos la visibilidad del Login cambiara para que no se vea en pantalla.
1119 |
1120 | Ya se ha arreglado una parte del problema, ahora solo queda configurar finalmente la opción de cerrar sesión. Dentro del método **mostrarComponente** de la clase **VistaPrincipalComponent** en la opción **Cerrar Sesión** se codifica:
1121 |
1122 | ```javascript
1123 | case "Cerrar Sesión":
1124 | this.loginComponent.getLoginTemplate().setVisible(true);
1125 | this.vistaPrincipalTemplate.setVisible(false);
1126 | break;
1127 | ```
1128 |
1129 | De esta manera se ha controlado la forma de iniciar y cerrar sesión gestionando correctamente la creación de objetos en los componentes gráficos.
1130 |
1131 | Ahora si se observa a las demás opciónes de navegación se puede notar nuevamente que cada vez que se oprime cualquier botón que incorpora los componentes gráficos que se muestran en el panel **pPrincipal** se esta creando un objeto nuevo de estos. Esto es el mismo problema que acabamos de tratar.
1132 |
1133 |
1078 | Creación de un nuevo objeto cada vez que se entra a la aplicación
1079 |
1134 | 
1135 |
1137 |
1138 | Para corregir esto, una alternativa puede ser la de **declarar** los objetos de los componentes, **ejemplificarlos** en el constructor e **incorporar** ese objeto en las opciones de navegación:
1139 |
1140 | ***Nota:** Se realizara el proceso solo con el componente gráfico **inicio** pero será igual para los demás componentes*.
1141 |
1142 | **Declaración:**
1143 | ```javascript
1144 | // Al inicio de la clase VistaPrincipalComponent
1145 | private InicioComponent inicioComponent;
1146 | ```
1147 |
1148 | **Ejemplificación:**
1149 | ```javascript
1150 | // Dentro del constructor
1151 | this.inicioComponent = new InicioComponent();
1152 | ```
1153 |
1154 | **Incorporación:**
1155 | ```javascript
1156 | // Dentro del método mostrarComponente
1157 | case "Inicio":
1158 | vistaPrincipalTemplate.getPPrincipal().add(
1159 | inicioComponent.getInicioTemplate()
1160 | );
1161 | break;
1162 | ```
1163 |
1164 | Es posible notar que este enfoque funciona y se tiene de forma controlada la creación de sus componentes, sin embargo, como todos los componentes gráficos se van a cargar desde el constructor esto le va a restar rendimiento a la aplicación, imaginen que algún usuario ingresa solamente a revisar los productos y nunca oprime el botón de configuración o amigos, se habrá cargado todo el componente de configuraciones o amigos en vano y gastará memoria y rendimiento.
1165 |
1166 | Una mejor alternativa es la que se uso en la clase **LoginComponent** donde con un condicional se controla la ejemplificación del objeto asi:
1167 |
1168 | ```javascript
1169 | case "Inicio":
1170 | if (this.inicioComponent == null)
1171 | this.inicioComponent = new InicioComponent();
1172 | vistaPrincipalTemplate.getPPrincipal().add(
1173 | inicioComponent.getInicioTemplate()
1174 | );
1175 | break;
1176 | ```
1177 | ***Nota:** Como se esta ejemplificando ahora desde el método mostrarComponente se debe retirar la ejemplificación que se realizó en el constructor*.
1178 |
1179 | De esta forma la primera vez que se oprima el botón inicio se creara el objeto en memoria y se incorporara en la ventana principal, pero cuando se vuelva a oprimir simplemente incorporará el objeto que previamente se ejemplifico. Ademas de controlar la cantidad de objetos también lo se crean solamente en caso de ser necesario y de esta forma se gana también en el rendimiento de la aplicación.
1180 |
1181 | # Resultado
1182 | Si has llegado hasta aquí **!felicitaciones!** se ha aprendido como incorporar componentes gráficos a la ventana principal para crear un Single-Page App. Se aprendió también como realizar navegación para gestionar la visibilidad de los componentes dentro de la ventana principal. Ademas se ha corregido la creación masiva de objetos de los componentes cuando se quiere gestionar su visibilidad.
1183 |
1184 | # Actividad
1185 |
1186 | Realizar la incorporación de componentes gráficos sobre la ventana principal de su proyecto y realizar navegación de tal forma que se controle la creación de objetos en memoria de los componentes.
1187 |
--------------------------------------------------------------------------------
1135 | Problema en creación descontrolada de objetos de los componentes gráficos
1136 |