Tcnicas avanzadas de programacin Aplicaciones

1
Técnicas avanzadas de programaciónAplicaciones

• Ramiro Lago

2
Introducción (I)

• Sun creó para Java una librería para la creación
  de aplicaciones y applets con GUI AWT. Todos los
  navegadores dan soporte por defecto para esta
  librería.
• Debido a las limitaciones de AWT, en la versión
  1.1 se creó la librería SWING, a la que no da
  soporte por defecto el navegador Microsoft
  Explorer
• Toda aplicación SWING tiene al menos una ventana
  principal del tipo JFrame. Un ejemplo mínimo
• import java.awt.
• import javax.swing.
• /
  
• Las aplicaciones Java tienen como ventana
  principal una clase que hereda de JFrame.
• 
  /
• public class Marco extends JFrame
• /
  
• El constructor llama a jbInit() para
  inicializar componentes
• 
  /
• public Marco()
• enableEvents(AWTEvent.WINDOW_EVENT_MASK) //
  Acepta eventos AWT
• try
• jbInit()

3
Introducción (II)

• La aplicación requiere
• Un punto de entrada en la ejecución main()
• Hacer una instancia del JFrame
• import java.awt.
• public class Inicio
• /
  
• Construye la aplicación
• 
  /
• public static void main(String args)
• try
• //// Creamos JFrame con estilo y operación
  de cierre
• Marco frame new Marco()
• javax.swing.JFrame.setDefaultLookAndFeelDeco
  rated(true)
• frame.setDefaultCloseOperation(
  javax.swing.JFrame.EXIT_ON_CLOSE)
• //// Centra la ventana principal
• Dimension screenSize Toolkit.getDefaultToo
  lkit().getScreenSize()
• Dimension frameSize new Dimension(
  screenSize.width/2, screenSize.height/2 )

4
Menús (I)

• Para hacer un menú (http//java.sun.com/docs/books
  /tutorial/uiswing/components/menu.html) no hay
  mas que usar las clases
• JMenuBar barra de menú Principal
• Jmenu un menú
• JMenuItem una opción de menú
• Con JRadioButtonMenuItem y JCheckBoxMenuItem
  podemos usar opciones del estilo RadioButton o
  CheckBox
• Para una línea separadora tenemos
  JMenu.addSeparator()
• Estos objetos los manejaremos como atributos,
  tanto los objetos de menú como los String para
  títulos (aunque en un diseño más acertado los
  títulos estarían en un archivo properties)
• public class Marco extends JFrame implements
  ActionListener
• JMenuBar menuPrincipal new JMenuBar() //
  MenuBar
• //// Menú Archivo
• JMenu menuArchivo new JMenu()
• JMenuItem menuItemSalir new JMenuItem()
• //// Manú Ayuda
• JMenu menuAyuda new JMenu()
• JMenuItem menuItemAcercaDe new JMenuItem()
• //// Cadenas de opciones de menú

5
Menús (II)

• Desde jbInit() configuramos el menú
• private void jbInit() throws Exception
• this.setTitle("Título de la aplicación")
• definirMenu()
• Los JMenuItem se añaden (add) a los JMenu y los
  JMenu se añaden a la barra principal de menú
  (JMenuBar menuPrincipal). Finalmente se añade
  el JMenuBar menuPrincipal al JFrame
• private void definirMenu()
• //// Menú de Archivo
• menuArchivo.setText( this.ITEM_ARCHIVO)
• menuItemSalir.setText( this.ITEM_SALIR)
• menuItemSalir.addActionListener(this)
• menuArchivo.add(menuItemSalir)
• //// Menú de Ayuda
• menuAyuda.setText(this.ITEM_AYUDA)
• menuItemAcercaDe.setText(this.ITEM_ACERCADE)
  
• menuItemAcercaDe.addActionListener(this)
• menuAyuda.add(menuItemAcercaDe)

IMPORTANTE
6
Menús (III)

• Antes hemos visto que la clase implementa un
  listener
• public class Marco extends JFrame implements
  ActionListener .
• Cualquier clase que implemente el listener es
  la que recibe los eventos. Implementar este
  listener implica que se debe implementar el
  método actionPerformed(). Los eventos se reciben
  en este método
• public void actionPerformed(ActionEvent e)
• //// Opción Acerca_de
• if ( e.getActionCommand().compareTo(
  ITEM_ACERCADE ) 0 )
• System.out.println( "Acerca de")
• //// Salir
• if ( e.getActionCommand().compareTo(
  ITEM_SALIR ) 0 )
• System.out.println( "Salimos")
• System.exit(0)
• return

7
Panel principal o panel raíz

• Toda ventana tiene un panel raíz. En el siguiente
  ejemplo se incluyen dos atributos uno para el
  panel principal y otro para un botón
• public class Marco extends JFrame implements
  ActionListener
• JPanel panelPrincipal
• JButton boton
• .
• Configuración
• El panel principal se obtiene desde el propio
  JFrame con getContentPane()
• Le indicamos al panel que la disposición (layout)
  de sus componentes es del tipo FlowLayout.
• A continuación se añade (add) el botón al panel.
  Sin hacer add(), el botón no podría verse
• private void jbInit() throws Exception
• this.setTitle("Con un botón")
• panelPrincipal (JPanel) this.getContentPane
  ()
• this.setLayout( new FlowLayout())
• boton new JButton( "Un botón")
• Dimension tamanioBoton new
  Dimension(200,40)
• boton.setPreferredSize( tamanioBoton)
• panelPrincipal.add( boton )
• definirMenu()

8
Administradores de diseño introducción

• La norma en Swing no es colocar los componentes
  de acuerdo a una posición (x,y). Lo que se
  recomienda es que la posición de los componentes
  dependa del administrador de diseño (Layout
  Manager). El más sencillo de los administradores
  de diseño es el FlowLayout.
• La ventaja de usar un administrador es que al
  cambiar el tamaño de la ventana los componentes
  se recolocan de acuerdo al administrador
  utilizado
• Un administrador define una disposicíón u orden
  para todo el conjunto de elementos. Imaginemos
  una situación cotidiana si tienes que organizar
  un grupo de personas en una habitación supón que
  tienes dos opciones
• La primera es la más usual, decir a cada persona
  la posición exacta que debe ocupar.
• La segunda opción es más "abstracta" y más
  interesante, les digo a todos que se organicen en
  función de un cierto orden, por ejemplo, en filas
  paralelas empezando desde la izquierda, o en
  diagonal, etc. En la segunda opción lo único que
  tienes que hacer es ordenar a todos los elementos
  que se organicen de una forma determinada y
  suponemos que todos los elementos tienen la
  suficiente "inteligencia" como para adoptar ese
  orden. Esto es algo muy semejante a lo que hacen
  nuestros administradores de diseño.
• Cómo se define el administrador de diseño? Por
  medio de la llamada a la función setLayout. Esta
  llamada se realiza desde jbInit
• setLayout( new TIPO_DE_ADMINISTRADOR_DE_DISEÑO()
  )

9
FlowLayout

• Organiza los elementos de izquierda a derecha y
  de arriba hacia abajo. Por defecto la alineación
  es centrada. En el siguiente ejemplo hemos puesto
  un FlowLayout con una alineación a la izquierda
  (LEFT)
• private void jbInit() throws Exception
• JPanel panelPrincipal (JPanel)
  this.getContentPane()
• panelPrincipal.setLayout( new FlowLayout(FlowLayo
  ut.LEFT ) )
• ....
• Las versiones del constructor de FlowLayout son
• FlowLayout( )
• FlowLayout( int align ) El parámetro debe ser
  una constante static de la clase FlowLayout que
  indica el alineamiento horizontal
  FlowLayout.LEFT, FlowLayout.RIGHT o
  FlowLayout.CENTER. .
• FlowLayout( int align, int hgap, int vgap ) el
  segundo y tercer parámetro indican la separación
  horizontal y vertical en píxeles.
• En el siguiente ejemplo hemos usado
• setLayout( new FlowLayout( FlowLayout.LEFT, 20,
  10 ) )

10
BorderLayout (I)

• Este administrador organiza los elementos por
  zonas Norte, Sur, Este, Oeste y Centro. Veamos
  el siguiente ejemplo, en el que la zona se indica
  en el segundo argumento de la llamada a a add()
• private void jbInit() throws Exception
• JPanel panelPrincipal (JPanel)
  this.getContentPane()
• panelPrincipal.setLayout( new BorderLayout( )
  )
• panelPrincipal.add(b_juan, BorderLayout.NORTH)
• panelPrincipal.add(b_pedro, BorderLayout.CENTER)
  
• panelPrincipal.add(b_pablo, BorderLayout.SOUTH)
  
• panelPrincipal.add(b_santiago,
  BorderLayout.EAST)
• panelPrincipal.add(b_mateo, BorderLayout.WEST)
• El aspecto final es

11
BorderLayout (II)

• Observe dos características importantes cada
  elemento (en este caso botones) se expande sobre
  la zona asignada. Además el último elemento de
  una zona oculta a los anteriores elementos de esa
  zona. Para entender esto, supongamos que
  incluimos un botón, denominado b_judas, y lo
  añadimos a la misma zona (NORTH) que b_juan
• private void jbInit() throws Exception
• ....
• panelPrincipal.add(b_juan, BorderLayout.NORTH)
• panelPrincipal.add(b_judas, BorderLayout.NORTH)
• ....
• Cuál es el botón que se observa?Cuál se oculta?
• Las versiones del constructor de BorderLayout
  son
• BorderLayout( )
• BorderLayout( int hgap, int vgap ) para indicar
  la separación horizontal y vertical en píxeles.

12
GridLayout

• La disposición o aspecto que indica este
  administrador de diseño es la típica un eje
  cartesiano, como una hoja de cálculo estructurada
  en filas y columnas. Proseguimos con nuestro
  ejemplo de los botones aplicando este nuevo
  administrador
• Para usar GridLayout debe especificar las filas y
  columnas a la hora de construirlo. Los elementos
  se añaden al applet con el orden
  izquierda-derecha y arriba-abajo
• private void jbInit() throws Exception
• panelPrincipal.setLayout( new GridLayout( 2, 3 )
  ) // Dos filas y tres columnas
• panelPrincipal.add(b_juan)
• panelPrincipal.add(b_pedro)
• panelPrincipal.add(b_pablo)
• panelPrincipal.add(b_santiago)
• panelPrincipal.add(b_mateo)
• Existe un segundo tipo de constructor que permite
  especificar la distancia horizontal y vertical de
  los elementos
• GridLayout(int rows, int cols, int hgap,
  int vgap)

13
BoxLayout (I)

• http//java.sun.com/docs/books/tutorial/uiswing/la
  yout/
• El constructor del BoxLayout exige dos
  argumentos, el primero es el contenedor al que se
  asigna. El segundo es la orientación general
• PAGE_AXIS se ordenan los componentes de arriba
  hacia abajo.
• LINE_AXIS se ordenan los componentes de
  izquierda a derecha
• Dos ideas para empezar
• Al no especificar tamaño en los JTextField, estos
  componentes se expanden sobre el espacio
  disponible. Las etiquetas y el botón tienen un
  tamaño, que corresponde con el texto que le hemos
  asociado.
• Lo que no cabe no se ve, el layout no lo coloca
  en huecos libres.
• El siguiente paso será
• Alinear el contenido de los campos de texto a la
  derecha (como se hace habitualmente con los
  números). Para que no haya confusión se alinea
  el contenido del JTextField, no se alinea el
  JTextField respecto al contenedor raíz
• txtAncho.setHorizontalAlignment(
  JTextField.RIGHT)
• txtAlto.setHorizontalAlignment(
  JTextField.RIGHT)
• Definir tamaños para los campos de texto, con la
  finalidad de que no se expandan. Para ello
  necesitamos de setMaximumSize(), que limita el
  tamaño máximo del componente. Además tenemos
  setPreferredSize(), que no es estrictamente
  necesario ahora, pero resulta de utilidad cuando
  pongamos el componente en un subpanel. Para no
  repetir líneas de código, construimos un método
  que haga el trabajo
• private void setTamaño( JComponent comp, int x,
  int y )
• Dimension tam new Dimension( x, y )
• comp.setMaximumSize( tam )
• comp.setPreferredSize( tam )
• De esta forma podemos determinar el tamaño de
  cada campo
• setTamaño( txtAncho, 80,20)

14
BoxLayout (II)

• Inicio.java
• public class Inicio
• /
  
• Construye la aplicación. Ejemplo de BoxLayout
• 
  /
• public static void main(String args)
• try
• //// Creamos JFrame con estilo y operación de
  cierre
• Marco frame new Marco()
• javax.swing.JFrame.setDefaultLookAndFeelDec
  orated(true)
• frame.setDefaultCloseOperation(
  javax.swing.JFrame.EXIT_ON_CLOSE)
• frame.setVisible(true)
• catch(Exception e)
• e.printStackTrace()

15
BoxLayout (III)

• Marco.java (I)
• public class Marco extends JFrame
• JPanel panelPrincipal
• JLabel etiAncho new JLabel( "Ancho" )
• JTextField txtAncho new JTextField()
• JLabel etiAlto new JLabel( "Alto" )
• JTextField txtAlto new JTextField()
• JButton btnBoton1 new JButton( "Botón 1" )
• public Marco()
• enableEvents(AWTEvent.WINDOW_EVENT_MASK)
• try
• jbInit()
• catch(Exception e)
• e.printStackTrace()

16
BoxLayout (IV)

• Marco.java (II)
• private void jbInit() throws Exception
• this.setTitle("Ejemplo de BoxLayout")
• //// Centra la ventana
• Dimension screenSize Toolkit.getDefaultToo
  lkit().getScreenSize()
• Dimension frameSize new Dimension(
  screenSize.width/2, screenSize.height/2 )
• setLocation((screenSize.width -
  frameSize.width) / 2, (screenSize.height -
  frameSize.height) / 2)
• setSize(frameSize.width, frameSize.height)
• //// Configura panel principal
• panelPrincipal (JPanel)
  this.getContentPane()
• panelPrincipal.setLayout( new BoxLayout(
  panelPrincipal, BoxLayout.PAGE_AXIS))
• panelPrincipal.setAlignmentX(
  Component.LEFT_ALIGNMENT)
• panelPrincipal.setBackground( Color.cyan)
• //// Configuro etiquetas
• setTamanio( etiAncho, 100, 20 )
• etiAncho.setHorizontalAlignment(SwingConstan
  ts.LEFT)
• setTamanio( etiAlto, 100, 20 )

17
Anidando paneles

• En el siguiente ejemplo se puede ver que cada
  etiqueta y su correspondiente campo de texto lo
  incluimos en un subpanel
• //// Añado etiquetas y campos a subpaneles
• JPanel pnlAncho new JPanel()
  // Subpanel del ancho
• pnlAncho.setLayout( new FlowLayout(FlowLayou
  t.LEFT))
• pnlAncho.setBackground( Color.BLUE)
• pnlAncho.add( etiAncho )
• pnlAncho.add( txtAncho )
• setTamanio( pnlAncho, frameSize.width, 30
  )
• JPanel pnlAlto new JPanel()
  // Subpanel de la altura
• pnlAlto.setLayout( new FlowLayout(FlowLayout
  .LEFT))
• pnlAlto.setBackground( Color.RED)
• pnlAlto.add( etiAlto )
• pnlAlto.add( txtAlto )
• setTamanio( pnlAlto, frameSize.width, 30 )
• btnBoton1.setAlignmentX( Component.CENTER_AL
  IGNMENT )
• //// Añado al panel raiz
• panelPrincipal.add( pnlAncho )