Interface Grfica

Programacin II
Prof. Guillermo de Majo Tec. Superior en Anlisis y Programacin de Sistemas IES 9-012 San Rafael en Informtica Sede General Alvear

Objetivos
Interfacess grficas del usuario
Explicar AWT (Abstract Window Toolkit), Swing y JFC (Java Foundation Classes) Detallar la jerarqua de contencin UI de Swing Describir cmo se utilizan los gestores de diseos Agregar contenedores UI a una aplicacin para agrupar componentes Embeber componentes UI en contenedores UI Utilizar el Look and Feel conectable de Swing

Cohorte 2012

Programacin II

Ejecucin de Aplicaciones UI Java

Cohorte 2012

Programacin II

AWT, Swing y JFC

AWT o Abstract Window Toolkit (java.awt):
Biblioteca de interfaz grfica de usuario Predecesor de los componentes Swing y base de Swing y JFC Swing (javax.swing):
Biblioteca de interfaz grfica de usuario ms potente Creado sobre la jerarqua de clases AWT

JFC (Java Foundation Classes):

Recopilacin de API, incluidos AWT, Swing, API Accessibility, Look and Feel Conectable API 2D de Java, soporte para arrastrar y soltar (a partir de JDK 1.2)

Cohorte 2012

Programacin II

Funciones Swing
Es un juego de componentes visuales disponible a partir de JDK 1.1, pero forma parte del paquete principal de JDK a partir de la versin 1.2:
Componentes sencillos en comparacin con AWT API Look and Feel conectable InventoryItem Muchos ms componentes que AWT

JButton

JSlider

JTree

JComboBox
Cohorte 2012

JTextField
Programacin II

JProgressBar
5

Componentes Sencillos o Complejos?

Componentes complejos
Dependencia fuerte de cdigo peer nativo. Cada uno se presenta en su propia ventana opaca. Casi todos los primeros componentes AWT eran complejos. Incluyen algunos componentes de nivel superior Swing (JFrame, JApplet, JDialog).

Componentes sencillos
Independencia de cdigo peer nativo. Pueden tener fondos transparentes. Casi todos los componentes Swing son sencillos. Cuando se muestran, su forma puede ser no rectangular. Se deben visualizar en un contenedor complejo.

Cohorte 2012

Programacin II

Planificacin del Diseo de UI

La creacin de una aplicacin UI implica una planificacin, especialmente al crear aplicaciones Swing. La planificacin requiere la comprensin de los siguientes conceptos y de la relacin entre ellos:
Jerarqua de contencin de UI (componente raz que incluye componentes y contenedores anidados) Tipos y niveles de contenedores (por ejemplo, contenedores intermedios o de nivel superior) Gestores de diseos y sus tipos (utilizados por cada contenedor) Los componentes que se pueden agregar a los Cohorte 2012 Programacin II

Jerarqua de Contencin
Contenedores de nivel superior
Marco Dilogo Applet
Marco

Contenedores intermedios
Panel Panel de desplazamiento

Componentes atmicos
Etiqueta Elementos de texto Botones
Panel Componentes atmicos

Cohorte 2012

Programacin II

Contenedores de Nivel Superior

Swing proporciona JFrame, JDialog o JApplet con propiedades modificables como, por ejemplo:
Un panel de contenido para componentes o contenedores intermedios, mediante los mtodos getContentPane() o setContentPane() Un borde, mediante un mtodo setBorder() Un ttulo, mediante un mtodo setTitle() Decoraciones de ventana como, por ejemplo, botones para cerrar y minimizar (se excluyen los applets)

AWT proporciona Frame, Dialog o Applet.

Estos elementos no proporcionan propiedades (como, por ejemplo, bordes o un panel de contenido).

Cohorte 2012

Programacin II

Contenedores Intermedios
Diseados para contener componentes (o contenedores): Se pueden anidar dentro de otros contenedores Tipos de contenedores intermedios:
Paneles para agrupar contenedores o componentes Paneles de desplazamiento para agregar barras de desplazamiento en componentes que pueden aumentar como, por ejemplo, una lista o un rea de texto Paneles de divisin para visualizar dos componentes en un rea fija, que puede ajustar el usuario Paneles de separador para contener varios componentes, mostrando slo uno a la vez, segn la seleccin del usuario Barras de herramientas para agrupar componentes como, por ejemplo, botones Marcos internos para ventanas anidadas
Cohorte 2012 Programacin II 10

Componentes Atmicos
Botones Casillas de control Recuadros combinados Texto Listas Etiquetas

Cohorte 2012

Programacin II

11

Visin General de la Gestin del Diseo

Cohorte 2012

Programacin II

12

Diseo Border
Tiene cinco reas: North, South, West, East y Center. El rea Center se ampla hasta rellenar todo el espacio disponible. Muestra un solo componente en cada rea. Hace que las reas sean tiles para contener paneles intermedios.

Cohorte 2012

Programacin II

13

Diseo GridBag
Se basa en una cuadrcula. Permite que los componentes abarquen varias filas y varias columnas. Permite tamaos diferentes de las filas y de las columnas. Utiliza el tamao preferido del componente para controlar el tamao de celda.

Cohorte 2012

Programacin II

14

Restricciones de GridBag
Recuadros externos Relleno de componente

Posicin de celda Ampliacin de celda Peso de expansin

Fijacin

Reglas de relleno

Cohorte 2012

Programacin II

15

Uso de Gestores de Diseos

El objetivo de los gestores de diseos es gestionar varios componentes al mismo tiempo. El uso de un gestor de diseos con contenedores requiere:
Crear un contenedor y un objeto de gestor de diseos Definir la propiedad de diseo del contenedor Agregar elementos (componentes u otros contenedores) a las regiones que define el gestor de diseos

Los gestores de diseos diferentes requieren argumentos diferentes para controlar la ubicacin del componente.

Cohorte 2012

Programacin II

16

Combinacin de Gestores de Diseos

Border null

VerticalFlow

GridBag

Grid

Cohorte 2012

Programacin II

17

Uso de Marcos o Recuadros de Dilogo

Un marco Java es equivalente a una ventana de aplicacin.
Utilice JFrame para una ventana principal
Tiene propiedades para los iconos, el ttulo y las decoraciones de ventana para los botones de minimizar, maximizar y cerrar. Utiliza por defecto BorderLayout. Proporciona un panel de contenido por defecto que ocupa la regin central del diseo. Puede definir el tamao del marco con el mtodo setSize() y hacer que sea visible mediante el mtodo setVisible().

Utilice JDialog para una ventana modal

Debe desactivar la ventana modal para que se pueda activar la aplicacin que la llama.
Cohorte 2012 Programacin II 18

Uso de Contenedores JPanel

JPanel es un contenedor de uso general.
Puede utilizar cualquier gestor de diseos (utiliza por defecto Flowlayout). Puede utilizar cualquier borde. Puede tener componentes agregados u otros paneles/contenedores mediante el mtodo add().
JPanel myPanel = new JPanel(new BorderLayout()); JTextArea jTextArea1 = new JTextArea();

myPanel.setBorder(BorderFactory.createRaisedBevelBorder());
myPanel.add(jTextArea1, BorderLayout.SOUTH);

Cohorte 2012

Programacin II

19

Adicin de Bordes a Componentes

Los bordes son objetos Swing.
Se definen en javax.swing.borders.

Utilice setBorder() para asignar un borde a un componente. Cree bordes con la clase javax.swing.BorderFactory. Cree los bordes por separado para utilizarlos con muchos componentes.
jPanel1.setBorder(BorderFactory.createBevelBorder( BevelBorder.LOWERED,Color.lightGray,Color.darkGray)); Border etchedBorder = BorderFactory.createEtchedBorder();//pre-create border jPanel2.setBorder(etchedBorder); // use border`

Cohorte 2012

Programacin II

20

Uso de Marcos Internos

Un marco interno es el equivalente a una ventana de documento contenida dentro de una ventana de aplicacin para aplicaciones de ventanas MDI (interfaz de varios documentos).
Utilice JInternalFrame para una ventana interna:
De forma similar a JFrame, puede contener componentes y contenedores intermedios y utilizar un gestor de diseos. Por defecto, no se puede cerrar, minimizar, ni maximizar y no es visible.

Utilice JDesktopPane como panel de contenido en el que se agregan los marcos internos:
Controla el tamao y la ubicacin de los marcos internos. Utiliza un gestor de diseos null por defecto.

Cohorte 2012

Programacin II

21

Controles de Texto Swing

Cohorte 2012

Programacin II

22

Adicin de Componentes con Oracle JDeveloper 10g

Utilice el asistente para crear un JFrame. Seleccione un gestor de diseos. Agregue componentes desde la paleta de componentes. Ajuste las propiedades de componente.

Cohorte 2012

Programacin II

23

Creacin de un Marco

Marco

Cohorte 2012

Programacin II

24

Adicin de Componentes
Utilice la paleta de componentes para agregar elementos de Swing al marco

Cohorte 2012

Programacin II

25

Definicin del Look and Feel Conectable

Las aplicaciones Swing proporcionan soporte para adaptar un aspecto diferente al entorno visual del sistema operativo. El aspecto:
Es especfico de la aplicacin:
Se puede inicializar al iniciar la aplicacin. Puede cambiar dinmicamente.

Afecta a los componentes Swing sencillos. Soporta Win, Mac, Java (Metal) y Motif. Utiliza la clase javax.swing.UIManager.
Proporciona el mtodo setLookAndFeel(), que acepta una cadena de nombre de clase de aspecto.

Cohorte 2012

Programacin II

26

Ejercicio propuesto
Esta prctica cubre:
Creacin de una clase basada en JFrame para la ventana principal de la aplicacin OrderEntry.
Agregue una barra de estado y un men por defecto. Agregue un objeto JDesktopPane y defnalo como panel de contenido.

Creacin de una clase basada en JInternalFrame para gestionar la creacin de pedidos y la introduccin de datos.
Cree la estructura jerrquica de diseo de contenedor para los componentes de marco de registro de pedidos. Agregue algunos componentes a este marco.

Definicin de gestores de diseos para cada contenedor

Cohorte 2012 Programacin II 27

Resumen
En esta leccin, ha aprendido lo siguiente:
Los marcos son contenedores de nivel superior. Los paneles son contenedores intermedios que se pueden anidar. Cada contenedor puede tener su propio gestor de diseos. Los gestores de diseos controlan la ubicacin del componente. Puede combinar gestores de diseos dentro de una aplicacin. Puede controlar el aspecto de la aplicacin.
Cohorte 2012 Programacin II 28