UNIVERSIDAD LATINA (UNILA)

1. UNIVERSIDAD LATINA (UNILA) V.- INTERFASES GRAFICAS LE, EI, Profesor Ramón Castro Liceaga

2. Introducción • Esla interfaz gráfica de usuario, es el elemento tecnológico de un sistema interactivo que posibilita, a través del uso y la representación del lenguaje visual, una interacción amigable con un sistema informático. • La interfaz gráfica de usuario (GraphicalUser Interface, GUI) es un tipo de interfaz de usuario que utiliza un conjunto de imágenes y objetos gráficos. • para representar la información y acciones disponibles en la interfaz. En esta sesión nos referimos a estos objetos gráficos en forma de ventas (Como funciona el Sistema Operativo de Windows

3. AWT y Swing • En la interfáz gráfica de Usuario existen dos conjuntos basicos de componentes. • Para crear aplicaciones graficas o GUI • AWT abstract Window Toolkit • Swing

4. AWT y Swing • En sus orígenes Java introdujo la AWT (Abstract Window Toolkit). Ésta “creaba” los objetos delegando su creación y comportamiento a herramientas nativas de la plataforma donde corre la Máquina Virtual Java. • Este esquema condujo a problemas por diferencias en distintas plataformas y S.O. • La solución fue desarrollar todos los objetos de la GUI basados sólo en elementos muy básicos y comunes en todas las plataformas. Así surge Swing.

5. AWT • Podemos realizar aplicaciones solas o applets • Dependen del sistema nativo para manejar su funcionalidad. • Se les conoce como componentes pesados

6. Caracteristicas de AWT • Un gran conjunto de componentes de interfaz de usuario •    Un robusto modelo de manejo de eventos • Herramientas graficas y de imagen, incluyendo forma, color y tipo de letra. Manejadores de Layout, para un manejo de ventanas flexible que no dependan de una tamaño o resolucion especifico. • Clases de transferencia de datos, para copiar y pegar a traves de el clipboard de la plataforma en donde ejecutamos nuestra aplicación.

7. Swing • Estan construidos sobre la tecnologia AWT • Proveen de apariencia de acuerdo al sistema donde se ejecuta la aplicacion • Esta completamente implementada en java • Estos componentes no dependen del sistema donde se ejecuta para manejar su fincionalidad • Se les conoce como componentes ligeros.

8. Caracteristicas de Swing • Tiene todas las caracteristicas de AWT • Versiones del conjunto de componentes 100% en java. • Una gran conjunto de componentes de alto nivel ( vista de arbol, caja de lista, etc) • Diseño de java puro. • Apariencia modificable.

9. Componentes

11. Creación de ventanas con Java Swing • Aplicaciones con ventanas Swing es la biblioteca para la interfaz gráfica de usuario avanzada de la plataforma Java SE. • La clase JFrame proporciona operaciones para manipular ventanas. • -> Constructores: • ● JFrame() • ● JFrame(String titulo) • -> Una vez creado el objeto de ventana, hay que: • ● Establecer su tamaño. • ● Establecer la acción de cierre. • ● Hacerla visible.

12. Practica V01 import javax.swing.*; public class VentanaTest { public static void main(String[] args) { JFrame f = new JFrame(“Registro de Clientes"); f.setSize(400, 300); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setVisible(true); } }

13. Ventana de Menús • Algunos elementos de un menú JMenuBar JMenu JMenuItem JMenu JMenuItem

14. Practica V02 JFrame f = new JFrame("Servicios al Cliente"); JMenuBar mb = new JMenuBar(); JMenu menu = new JMenu("Directorio"); JMenuItem item1, item2; item1 = new JMenuItem("Clientes Nuevos"); item2 = new JMenuItem("Referencias"); menu.add(item1); menu.add(item2); mb.add( menu ); f.setJMenuBar( mb ); // Con los objetos anteriores intégralo en una clase llamada ventaMenu en NetBeans.

15. Salida en la práctica V02 Construye una nueva ventana de Menú para un sistema de biblioteca…

16. Extendiendo la clase JFrame Es usual extender la clase JFrame, y realizar las operaciones de inicializacion en su constructor. public class MiVentanaextends JFrame { public MiVentana() { super(“Servicios al Cliente"); setSize(400, 300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } public class VentanaTest { public static void main(String[] args) { MiVentana v = new MiVentana(); v.setVisible(true); } }

17. Componentes • JButton • JLabel • JTextField • JCheckBox • JRadioButton • Una vez que se crean estos objetos o componentes con new, se añaden al contentPane de la ventana correspondiente mediante su método add.

18. Ejemplo de componentes • Agregar tres componentes a la clase MiVentana (etiqueta, texto y botón). setSize(600, 300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Containercp = getContentPane(); cp.setLayout(new FlowLayout()); JLabel etiqueta = new JLabel("Nombre del Cliente: "); JTextField texto = new JTextField(20); JButtonboton = new JButton("Buscar"); cp.add(etiqueta); cp.add(texto); cp.add(boton);

19. Salida de la práctica V03 Construye una nueva ventana con diversos componentes para un sistema de control escolar…

20. Construcción de un método para componentes • Practica V04 • Construye la clase verLogin • Dentro del método main…. // Crear el objeto frame JFrameframe = new JFrame("Acceso al Sistema"); frame.setSize(300, 150); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JPanel panel = new JPanel(); frame.add(panel); placeComponents(panel); frame.setVisible(true);

21. //Después del método main … private static void placeComponents(JPanel panel){ panel.setLayout(null); // Crea la etiqueta del usuario JLabel userLabel = new JLabel("Usuario: "); userLabel.setBounds(10, 10, 80, 25); panel.add(userLabel); // Crea el Texbox del usuario JTextField userText = new JTextField(20); userText.setBounds(100, 10, 160,25); panel.add(userText); // Crea la etiqueta del password JLabel passwordLabel = new JLabel("Password: "); passwordLabel.setBounds(10, 40, 80, 25); panel.add(passwordLabel); // Crea el Texbox del password JPasswordField passwordText = new JPasswordField(); passwordText.setBounds(100, 40, 160, 25); panel.add(passwordText); // Crea el boton del Login del usuario JButton loginButton = new JButton("login"); loginButton.setBounds(10, 80, 80, 25); panel.add(loginButton); // Crea el boton para registro del usuario JButton registerButton = new JButton("Registro"); registerButton.setBounds(180, 80, 90, 25); panel.add(registerButton); }

22. //Después del método main … private static void placeComponents(JPanel panel){ panel.setLayout(null); // Crea la etiqueta del usuario JLabel userLabel = new JLabel("Usuario: "); userLabel.setBounds(10, 10, 80, 25); panel.add(userLabel); // Crea el Texbox del usuario JTextField userText = new JTextField(20); userText.setBounds(100, 10, 160,25); panel.add(userText); // Crea la etiqueta del password JLabel passwordLabel = new JLabel("Password: "); passwordLabel.setBounds(10, 40, 80, 25); panel.add(passwordLabel); // Crea el Texbox del password JPasswordField passwordText = new JPasswordField(); passwordText.setBounds(100, 40, 160, 25); panel.add(passwordText); // Crea el boton del Login del usuario JButton loginButton = new JButton("login"); loginButton.setBounds(10, 80, 80, 25); panel.add(loginButton); // Crea el boton para registro del usuario JButton registerButton = new JButton("Registro"); registerButton.setBounds(180, 80, 90, 25); panel.add(registerButton); }

23. Salida de la práctica V04 Construye una nueva ventana con diversos componentes para un sistema de control acceso…

24. Introducción al manejo de eventos • El manejo de eventos es una función muy importante en la programación orientada a objetos ya que a través de esta podemos programar las acciones que realizará nuestra aplicación

25. Que son los eventos La interacción del usuario con un programa GUI(graphicaluserinterface) se efectúa a través de eventos. Cada evento tiene una fuente, la cual es la componente que lo produce. Sólo ciertas clases de objetos pueden atrapar eventos: objetos que tienen implementado el acceso a los métodos de ciertas clases especiales que escuchan eventos (listener).

26. Ejemplo de un evento Cuando un usuario oprime un botón en una GUI, el evento producido por el botón puede ser atrapado (escuchado) por cualquier objeto cuya clase tenga implementado acceso a métodos ActionListener

27. ActionListener: Manejo de eventos • Practica V05 • Modificando el proyecto anterior, clases VentanaTest y MiVentana(en esta clase comenta el codigo anterior y agrega el siguiente) publicMiVentana() { super("Eventos de acción"); setSize(400,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Containercp = getContentPane(); cp.setLayout(new FlowLayout()); JButtonboton = new JButton("Acceso al Sistema"); boton.addActionListener(new EventoBotonPulsado()); cp.add(boton); }

28. ActionListener: Manejo de eventos • Practica V05 • Crea la clase : EventoBotonPulsado • Con el siguiente código publicclassEventoBotonPulsadoimplementsActionListener{ publicvoidactionPerformed(ActionEvent e) { JOptionPane.showMessageDialog(null,"!! ERROR AL ABRIR EL SISTEMA !!.. "); } }

29. ActionListener: Manejo de eventos e imagenes //Ruta donde se encuentra el logo o la imagen ImageIcon image = new ImageIcon("C:/Users/WIN7/Documents/mariposa.gif"); JLabel imagelabel = new JLabel(image); //JLabel eti2 = new JLabel(new ImageIcon("mariposa.gif")); JButton rojo = new JButton("Rojo"); JButton azul = new JButton("Azul"); JButton verde = new JButton("Verde"); Container p; • Practica V06: Crea una clase con método main : Gui12 extends Jframe. public Gui12() { super("Colores del fondo"); p = this.getContentPane(); setLayout(new FlowLayout()); //Agrega los botones add(rojo); add(azul); add(verde); //Agrega un logo o la imagen add(imagelabel); rojo.addActionListener(new OyenteRojo()); azul.addActionListener(new OyenteAzul()); verde.addActionListener(new OyenteVerde()); setSize(500, 300); setVisible(true); setDefaultCloseOperation(EXIT_ON_CLOSE); • }

30. ActionListener: Manejo de eventos e imagenes public static void main(String[] args) { Gui12 ventana = new Gui12(); } class OyenteRojo implements ActionListener { public void actionPerformed(ActionEvent evento) { p.setBackground(Color.red); } } class OyenteAzul implements ActionListener { public void actionPerformed(ActionEvent evento) { p.setBackground(Color.blue); } } class OyenteVerde implements ActionListener { public void actionPerformed(ActionEvent evento) { p.setBackground(Color.green); } }

31. Grupos de eventos Los eventos se catalogan por su naturaleza, que se indicará en el miembro id de su estructura. Los grandes grupos de eventos son: Eventos de Ventana Eventos de Teclado Eventos de Ratón Eventos de Barras Eventos de Lista Eventos Varios

32. Gráficos • La interfaz gráfica de usuario, es el elemento tecnológico de un sistema interactivo que posibilita, a través del uso y la representación del lenguaje visual, una interacción amigable con un sistema informático

33. Que es un API de Java El API Java es una Interfaz de Programación de Aplicaciones (API: por sus siglas en inglés) provista por los creadores del lenguaje Java, y que da a los programadores los medios para desarrollar aplicaciones Java

34. Que es GUI La interfaz gráfica de usuario (GraphicalUser Interface, GUI) es un tipo de interfaz de usuario que utiliza un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz.

35. Objetos Gráficos • Java proporciona la clase Graphics, que permite mostrar texto a través del método drawString(), pero también tiene muchos otros métodos de dibujo.

36. Métodos para Dibujos • Son métodos funcionan solamente cuando son invocados por una instancia válida de la clase Graphics, su ámbito de aplicación se restringe a los componentes que se utilicen en los métodos paint() y update(). Algunos de estos métodos son:

37. Métodos para Dibujos • drawLine( x1,y1,x2,y2 ) • drawRect( x,y,ancho,alto ) • fillRect( x,y,ancho,alto ) • clearRect( x,y,ancho.alto ) • drawRoundRect( x,y,ancho,alto,anchoArco,altoArco ) • fillRoundRect( x,y,ancho,alto,anchoArco,altoArco ) • draw3DRect( x,y,ancho,alto,boolean elevado ) • fill3DRect( x,y,ancho,alto,boolean elevado ) • drawOval( x,y,ancho,alto ) • fillOval( x,y,ancho,alto ) • drawArc( x,y,ancho,alto,anguloInicio,anguloArco ) • fillArc( x,y,ancho,alto,anguloInicio,anguloArco ) • drawPolygon( int[] puntosX,int[] puntosY[],numPuntos ) • fillPolygon( int[] puntosX,int[] puntosY[],numPuntos ) • drawString( strings,x,y ) • drawChars( char data[],offset,longitud,x,y ) • drawBytes( byte data[],offset,longitud,x,y ) • copyArea( xSrc,ySrc,ancho,alto,xDest,yDest )

38. Practica V6: Clase que dibuja Lineas, Rectangulos y Ovalos // Dibujo de líneas, rectángulos y óvalos. importjava.awt.*; importjavax.swing.*; publicclassLineasRectsOvalosextendsJFrame { // establecer la cadena de la barra de título y dimensiones de la ventana publicLineasRectsOvalos() { super( "Dibujo de líneas, rectángulos y óvalos" ); setSize( 400, 165 ); setVisible( true ); } // mostrar varias líneas, rectángulos y óvalos publicvoidpaint( Graphics g ) { super.paint( g ); // llamar al método paint de la superclase g.setColor( Color.RED ); g.drawLine( 5, 30, 350, 30 ); g.setColor( Color.BLUE ); g.drawRect( 5, 40, 90, 55 ); g.fillRect( 100, 40, 90, 55 ); g.setColor( Color.CYAN ); g.fillRoundRect( 195, 40, 90, 55, 50, 50 ); g.drawRoundRect( 290, 40, 90, 55, 20, 20 ); g.setColor( Color.YELLOW ); g.draw3DRect( 5, 100, 90, 55, true ); g.fill3DRect( 100, 100, 90, 55, false ); g.setColor( Color.MAGENTA ); g.drawOval( 195, 100, 90, 55 ); g.fillOval( 290, 100, 90, 55 ); } // fin del método paint // ejecutar la aplicación publicstaticvoidmain( Stringargs[] ) { JFrame.setDefaultLookAndFeelDecorated(true); LineasRectsOvalosaplicacion = new LineasRectsOvalos(); aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); } } // fin de la clase

39. Gracias por tu atención…!