La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

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

Presentaciones similares


Presentación del tema: "LE, EI, Profesor Ramón Castro Liceaga UNIVERSIDAD LATINA (UNILA) V.- INTERFASES GRAFICAS."— Transcripción de la presentación:

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

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 AppletJapplet ButtonJbutton CanvasJpanel CheckboxJCheckBox o JRadioButton ChoiceJComboBox ComponentJcomponent

10 FrameJframe LabelJlabel ListJlist PanelJpanel TextAreaJTextArea TextFieldJTextField WindowJWindow

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 JMenuBar JMenu JMenuItem Algunos elementos de un menú

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 { 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 (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.

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.setColor( Color.CYAN ); g.fillRoundRect( 195, 40, 90, 55, 50, 50 ); g.fillRoundRect( 195, 40, 90, 55, 50, 50 ); g.drawRoundRect( 290, 40, 90, 55, 20, 20 ); g.drawRoundRect( 290, 40, 90, 55, 20, 20 ); g.setColor( Color.YELLOW ); g.setColor( Color.YELLOW ); g.draw3DRect( 5, 100, 90, 55, true ); g.draw3DRect( 5, 100, 90, 55, true ); g.fill3DRect( 100, 100, 90, 55, false ); g.fill3DRect( 100, 100, 90, 55, false ); g.setColor( Color.MAGENTA ); g.setColor( Color.MAGENTA ); g.drawOval( 195, 100, 90, 55 ); g.drawOval( 195, 100, 90, 55 ); g.fillOval( 290, 100, 90, 55 ); g.fillOval( 290, 100, 90, 55 ); } // fin del método paint } // fin del método paint // ejecutar la aplicación // ejecutar la aplicación public static void main( String args[] ) public static void main( String args[] ) { JFrame.setDefaultLookAndFeelDecorated(true); JFrame.setDefaultLookAndFeelDecorated(true); LineasRectsOvalos aplicacion = new LineasRectsOvalos(); LineasRectsOvalos aplicacion = new LineasRectsOvalos(); aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); } } // fin de la clase

39 Gracias por tu atención…!


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

Presentaciones similares


Anuncios Google