UNIVERSIDAD LATINA (UNILA) V.- INTERFASES GRAFICAS

Presentación del tema: "UNIVERSIDAD LATINA (UNILA) V.- INTERFASES GRAFICAS"— Transcripción de la presentación:

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 (Graphical User 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 Componentes equivalentes en AWT y swing Applet Japplet
Button Jbutton Canvas Jpanel Checkbox JCheckBox o JRadioButton Choice JComboBox Component Jcomponent

10 Frame Jframe Label Jlabel List Jlist Panel Jpanel TextArea JTextArea TextField JTextField Window JWindow

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

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 MiVentana extends 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); Container cp = getContentPane(); cp.setLayout(new FlowLayout()); JLabel etiqueta = new JLabel("Nombre del Cliente: "); JTextField texto = new JTextField(20); JButton boton = 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 JFrame frame = 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 (graphical user interface) 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) public MiVentana() { super("Eventos de acción"); setSize(400,300); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Container cp = getContentPane(); cp.setLayout(new FlowLayout()); JButton boton = 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 public class EventoBotonPulsado implements ActionListener{ public void actionPerformed(ActionEvent e) { JOptionPane.showMessageDialog(null,"!! ERROR AL ABRIR EL SISTEMA !!.. "); }

29 ActionListener: Manejo de eventos e imagenes
Practica V06: Crea una clase con método main : Gui12 extends Jframe. //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; 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 { p.setBackground(Color.blue); class OyenteVerde implements ActionListener { 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 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 Son los que se generan en respuesta a los cambios de una ventana un frame o un dialogo. Eventos de Teclado Son generados en respuesta a cuando el usuario pulsa y suelta una tecla mientras un Componente tiene el foco de entrada. Eventos de Ratón Son los eventos generados por acciones sobre el ratón dentro de los límites de un Componente. Eventos de Barras Son los eventos generados como respuesta a la manipulación de barras de desplazamiento (scrollbars). Eventos de Lista Son los eventos generados al seleccionar elementos de una lista. Eventos Varios Son los eventos generados en función de diversas acciones.

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 (Graphical User 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. Para cualquier programador, es esencial el entendimiento de la clase Graphics, antes de adentrarse en el dibujo de cualquier cosa en Java. Esta clase proporciona el entorno de trabajo para cualquier operación gráfica que se realice dentro del AWT. Juega dos importantes papeles: por un lado, es el contexto gráfico, es decir, contiene la información que va a afectar a todas las operaciones gráficas, incluyendo los colores de fondo y texto, la fuente de caracteres, la localización y dimensiones del rectángulo en que se va a pintar, e incluso dispone de información sobre el eventual destino de las operaciones gráficas (pantalla o imagen). Por otro lado, la clase Graphics proporciona métodos que permiten el dibujo de primitivas, figuras y la manipulación de fonts de caracteres y colores. También hay clases para la manipulación de imágenes, doble-buffering, etc.

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( string s,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. import java.awt.*; import javax.swing.*; public class LineasRectsOvalos extends JFrame { // establecer la cadena de la barra de título y dimensiones de la ventana public LineasRectsOvalos() { super( "Dibujo de líneas, rectángulos y óvalos" ); setSize( 400, 165 ); setVisible( true ); } // mostrar varias líneas, rectángulos y óvalos public void paint( 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 public static void main( String args[] ) { JFrame.setDefaultLookAndFeelDecorated(true); LineasRectsOvalos aplicacion = new LineasRectsOvalos(); aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); } } // fin de la clase Se muestra un ejemplo de la clase Graphics que dibuja Lineas Rectangulos y Ovalos importando las librerías graficas AWT y SWING de Java

39 Gracias por tu atención…!