## Dibujo

Podrías no necesitar la información de esta sección, en absoluto. Sin embargo, si tus componentes parece que no se dibujan correctamente, entender los conceptos de esta sección podría ayudarte a ver qué hay erróneo. De igual modo, necesitarás entender esta sección si creas código de dibujo personalizado para un componente.

#### Cómo funciona el dibujo

> Cuando un GUI Swing necesita dibujarse a sí mismo -- la primera vez, o en respuesta a la vuelta de un ocultamiento, o porque necesita reflejar un cambio en el estado del programa -- empieza con el componente más alto que necesita ser redibujado y va bajando por el árbol de contenidos. Esto está orquestado por el sistema de dibujo del AWT, y se ha hecho más eficiente mediante el manejador de dibujo de Swing y el código de doble buffer.

> Los componentes Swing generalmente se redibujan a sí mismos siempre que es necesario. Por ejemplo, cuando llamamos al método setText de un componente, el cómponente debería redibujarse automáticamente a sí mismo, y si es necesario, redimensionarse. Si no lo hace así es un bug. El atajo es llamar al método repaint sobre el componente para pedir que el componente se ponga en la cola para redibujado. Si se necesita cambiar el tamaño o la posición del componente pero no automáticamente, deberíamos llamar al método revalidate sobre el componente antes de llamar a repaint.

> Al igual que el código de manejo de eventos, el código de dibujo se ejecuta en el thread del despacho de eventos. Mientras se esté manejando un evento no ocurrirá ningún dibujo. De forma similar, si la operación de dibujado tarda mucho tiempo, no se manejará ningún evento durante ese tiempo.

> Los programas sólo deberían dibujarse cuando el sistema de dibujo se lo diga. La razón es que cada ocurrencia de dibujo de un propio componente debe ser ejecutado sin interrupción. De otro modo, podrían ocurrir resultados imprecedibles. como que un botón fuera dibujado medio pulsado o medio liberado.

> Para acelerar, el dibujo Swing usa doble-buffer por defecto -- realizado en un buffer fuera de pantalla y luego lanzado a la pantalla una vez finalizado. Podría ayudar al rendimiento si hacemos un componente Swing opaco, para que el sistema de dibujo de Swing pueda conocer lo que no tiene que pintar detrás del componente. Para hacer opaco un componente Swing, se llama al método setOpaque(true) sobre el componente.

> Los componentes no-opacos de Swing puede parecer que tienen cualquier forma, aunque su área de dibujo disponible es siempre rectangular. Por ejemplo, un botón podría dibujarse a sí mismo dibujando un octógono relleno. El componente detrás del botón, (su contenedor, comunmente) sería visible, a través de las esquinas de los lados del botón. El botón podría necesitar incluir código especial de detección para evitar que un evento action cuando el usuario pulsa en las esquinas del botón.

#### Un Ejemplo de Dibujo

> Para ilustrar el dibujado, usaremos el programa SwingApplication, que se explicó en Una Ruta Rápida a través del Código de una Aplicación Swing. Aquí podemos ver el GUI de SwingApplication:

> Y aquí su árbol de contenidos:

>                             JFrame (a top-level container)
>                               |
>                              ...
>                               |
>                          content pane

>                               |
>                             JPanel
>                               |
>                       +----------------+
>                       |                |
>                    JButton          JLabel

> Aquí está lo que sucede cuando se dibuja el GUI de SwingApplication:
> 1. El contenedor de alto nivel, JFrame, se dibuja as sí mismo.
> 2. El panel de contenido primero dibuja su fondo, que es un rectángulo sólido de color gris. Luego le dice al JPanel que se dibuje el mismo. El rectángulo del panel de contenido realmente no aparece en el GUI finalizado porque está oscurecido por el JPanel.

>    Nota: Es importante que el panel de contenido sea opaco. De otro modo, resultará en dibujados confusos. Cómo el JPanel es opaco, podemos hacer que sea el panel de contenido (sustituyendo setContentPane por el código existente getContentPane().add). Esto simplifica considerablemente el árbol de contenidos y el dibujado, eliminado un contenedor innecesario.

> 3. El JPanel primero dibuja su fondo, un rectángulo sólido de color gris. Luego dibuja su borde. Esl borde es un EmptyBorder, que no tendrá efecto excepto para incrementar el tamaño del JPanel reservando algún espacio extra en los laterales del panel. Finalmente, el panel le pide a sus hijos que se dibujen a sí mismos.
> 4. Para dibujarse a sí mismo, el JButton dibuja su rectángulo de fondo si es necesario y luego dibuja el texto que contiene. Si el botón tiene el foco del teclado, significa que cualquier cosa que se teclee va directamente al botón para su procesamiento, luego el botón realiza algún dibujado específico del Aspecto y Comportamiento para aclarar que tiene el foco.
> 5. Para dibujarse a sí misma, la JLabel dibuja su texto.

> De este modo, cada componente se dibuja a sí mismo antes de que lo haga cualquier componente que contenga, Esto asegura que el fondo de un JPanel, por ejemplo, sólo se dibuja cuando no está cubierto por uno de los componentes que contiene. La siguiente figura ilustra el orden en que cada componente que desciende de JComponent se dibuja a sí mismo:

> > 1. fondo (si es opaco) | 2. dibujo personalizado (si existe) | 3. borde (si existe) | 4. hijos (si existen)
> > --- | --- | --- | ---
> >     .............
> >     .............
> >     .............
> >     .............
> >     .............
> >     .............
> >     .............
> >     ....().......
> >     .............
> >     .............
> >     .............
> >     .............
> >     =============
> >     =...()......=
> >     =...........=
> >     =...........=
> >     =...........=
> >     =============
> >     =============
> >     =...()......=
> >     =.---------.=
> >     =.|JButton|.=
> >     =.---------.=
> >     =============

> Para más información sobe el dibujado, puedes ver la lección Trabajar con Gráficos.

Ozito