Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interfaces Usuario 3

2,180 views

Published on

  • Be the first to comment

  • Be the first to like this

Interfaces Usuario 3

  1. 1. Interfaces de Usuario Componentes Swing (III)
  2. 2. Menús (I) <ul><li>Ejemplo: </li></ul><ul><ul><li>“ Menús” </li></ul></ul><ul><li>Jerarquía: </li></ul>
  3. 3. Menús (II) <ul><li>Menús normales y desplegables: </li></ul><ul><ul><li>JMenuBar (menú normal) </li></ul></ul><ul><ul><ul><li>Constructor: </li></ul></ul></ul><ul><ul><ul><ul><li>public JMenuBar() </li></ul></ul></ul></ul><ul><ul><ul><li>Métodos: </li></ul></ul></ul><ul><ul><ul><ul><li>public JMenu add(JMenu c) </li></ul></ul></ul></ul><ul><ul><ul><li>Asignación de menús (en objetos de tipo JFrame, JDialog y JApplet); no se hace en el “contentPane”: </li></ul></ul></ul><ul><ul><ul><ul><li>public void setJMenuBar(JMenuBar menubar) </li></ul></ul></ul></ul><ul><ul><li>JPopupMenu (menú desplegable) </li></ul></ul><ul><ul><ul><li>Constructor: </li></ul></ul></ul><ul><ul><ul><ul><li>public JPopupMenu(String label) </li></ul></ul></ul></ul><ul><ul><ul><li>Métodos: </li></ul></ul></ul><ul><ul><ul><ul><li>public JMenuItem add (JMenuItem menuItem) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public void addSeparator() </li></ul></ul></ul></ul><ul><ul><ul><li>Mostrar el menú: </li></ul></ul></ul><ul><ul><ul><ul><li>public void show(Component invoker, int x, int y) </li></ul></ul></ul></ul>
  4. 4. Menús (III) <ul><li>JMenu </li></ul><ul><ul><li>Constructor: </li></ul></ul><ul><ul><ul><li>public JMenu(String s) </li></ul></ul></ul><ul><ul><li>Métodos: </li></ul></ul><ul><ul><ul><li>public JMenuItem add(JMenuItem menuItem) </li></ul></ul></ul><ul><ul><ul><li>public void addSeparator() </li></ul></ul></ul><ul><li>JMenuItem </li></ul><ul><ul><li>Constructor: </li></ul></ul><ul><ul><ul><ul><li>public JMenuItem(String text) </li></ul></ul></ul></ul><ul><ul><li>Eventos: ActionEvent </li></ul></ul><ul><li>JCheckBoxMenuItem </li></ul><ul><ul><li>Constructor: </li></ul></ul><ul><ul><ul><ul><li>public JCheckBoxMenuItem(String text, boolean selected) </li></ul></ul></ul></ul><ul><ul><li>Eventos: ActionEvent, ItemEvent </li></ul></ul>
  5. 5. Menús (IV) <ul><li>JRadioButtonMenuItem </li></ul><ul><ul><li>No permite selección múltiple </li></ul></ul><ul><ul><li>Constructor: </li></ul></ul><ul><ul><ul><ul><li>public JRadioButtonMenuItem(String text, boolean selected) </li></ul></ul></ul></ul><ul><ul><li>Eventos: ActionEvent, ItemEvent </li></ul></ul><ul><ul><li>Para permitir uno solo activable, se crea un grupo: </li></ul></ul><ul><ul><ul><li>ButtonGroup: </li></ul></ul></ul><ul><ul><ul><ul><li>public void add(AbstractButton b) </li></ul></ul></ul></ul>
  6. 6. Ejemplo
  7. 7. Operación de pintar <ul><li>¿Cómo se pinta? </li></ul><ul><ul><li>Clase java.awt.Graphics </li></ul></ul><ul><ul><ul><li>Contexto gráfico o pincel virtual </li></ul></ul></ul><ul><ul><ul><li>Métodos: </li></ul></ul></ul><ul><ul><ul><ul><li>public abstract void drawString(String str, int x, int y) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public abstract void fillOval(int x, int y, int width, int height) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public void drawRect(int x, int y, int width, int height) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public abstract void setFont(Font font) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public abstract void setColor(Color c) </li></ul></ul></ul></ul><ul><ul><li>Una vez creada una componente, se puede acceder a su contexto gráfico: </li></ul></ul><ul><ul><ul><li>Clase JComponent </li></ul></ul></ul><ul><ul><ul><ul><li>public Graphics getGraphics() </li></ul></ul></ul></ul>
  8. 8. Eventos de pintar (I) <ul><li>¿Cuándo se pinta? </li></ul><ul><ul><ul><li>Una vez creada una componente, haciendo: </li></ul></ul></ul><ul><ul><ul><ul><li>Graphics g = <componente>.getGraphics(); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>g.<método-de-pintar> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Inconveniente: habría que ejecutarlo en muchas ocasiones </li></ul></ul></ul></ul><ul><ul><ul><li>En respuesta a la generación de un evento de “pintar” que llega a la cola de eventos. </li></ul></ul></ul><ul><li>Respuesta al evento de “pintar”: </li></ul><ul><ul><li>Se ejecuta el método “paint” de la componente </li></ul></ul><ul><ul><li>JComponent </li></ul></ul><ul><ul><ul><ul><li>public void paint (Graphics g) </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Es público </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Llama a “paintComponent”, a “paintBorder” y a “paintChildren” </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>protected void paintComponent(Graphics g) </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Pinta el background </li></ul></ul></ul></ul></ul>
  9. 9. Eventos de pintar (II) <ul><li>Modos de generación de un evento de “pintar” </li></ul><ul><ul><li>Automático: </li></ul></ul><ul><ul><ul><li>Mostrar la ventana por primera vez; desiconizar una ventana; activar la ventana que se encontraba total o parcialmente oculta, etc. </li></ul></ul></ul><ul><ul><li>Llamada al método (java.awt.Component): </li></ul></ul><ul><ul><ul><li>public void repaint() </li></ul></ul></ul><ul><li>Componentes no predefinidas: </li></ul><ul><ul><li>Subclase de JPanel, redefiniendo “paintComponent” </li></ul></ul><ul><ul><ul><ul><li>Llamando primero a “super.paintComponent” </li></ul></ul></ul></ul><ul><li>Ejemplo: </li></ul><ul><ul><li>“ Pintar-Imagen-Animación“ </li></ul></ul>
  10. 10. Imágenes y animaciones <ul><li>Creación de imágenes: </li></ul><ul><ul><li>Clase Graphics </li></ul></ul><ul><ul><ul><ul><li>public abstract boolean drawImage(Image img, int x, int y, int width, int height, ImageObserver observer) </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>JComponent desciende de ImageObserver (interface) </li></ul></ul></ul></ul></ul><ul><ul><li>Clase java.awt.Toolkit </li></ul></ul><ul><ul><ul><ul><li>public static Toolkit getDefaultToolkit() </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public abstract Image getImage(String filename) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public abstract Image getImage(URL url) </li></ul></ul></ul></ul><ul><li>Animaciones: </li></ul><ul><ul><li>Creación de un thread que duerme y repinta </li></ul></ul><ul><ul><ul><li>Uso de “timers” (threads predefinidos), mediante la clase Timer </li></ul></ul></ul><ul><ul><ul><ul><li>Ejemplo </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>“ Animación-Timers” </li></ul></ul></ul></ul></ul>
  11. 11. Ejemplo
  12. 12. Movimientos de ratón (I) <ul><li>Clase java.awt.event.MouseEvent </li></ul><ul><ul><li>Constructor </li></ul></ul><ul><ul><ul><ul><li>public MouseEvent(Component source, int id, long when, int modifiers, int x, int y, int clickCount, boolean popupTrigger, int button) </li></ul></ul></ul></ul><ul><ul><li>Métodos: </li></ul></ul><ul><ul><ul><ul><li>public int getButton() (botón del ratón) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public int getClickCount() </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public int getX() </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public int getY() </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public Object getSource() </li></ul></ul></ul></ul><ul><li>Movimientos de ratón: </li></ul><ul><ul><ul><li>java.awt.event.MouseMotionListener </li></ul></ul></ul><ul><ul><ul><ul><li>public void mouseDragged(MouseEvent e) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public void mouseMoved(MouseEvent e) </li></ul></ul></ul></ul>
  13. 13. Movimientos de ratón (II) <ul><li>Dos tipos de interacciones: </li></ul><ul><ul><li>1) Mover ratón sin tocar sus botones </li></ul></ul><ul><ul><li>2) Arrastrar ratón </li></ul></ul><ul><li>1) Mover ratón sin tocar sus botones </li></ul><ul><ul><li>Eventos generados: </li></ul></ul><ul><ul><ul><li>Un MouseEvent por cada “desplazamiento infinitesimal” </li></ul></ul></ul><ul><ul><ul><ul><li>El “getSource”, “getX” y “getY” son relativos a la componente bajo el ratón </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Recogido por un MouseMotionListener y procesado por “mouseMoved” </li></ul></ul></ul></ul>
  14. 14. Movimientos de ratón (III) <ul><li>2) Arrastrar ratón </li></ul><ul><ul><li>Eventos generados: </li></ul></ul><ul><ul><ul><li>Un MouseEvent inicial </li></ul></ul></ul><ul><ul><ul><ul><li>Recogido por un MouseListener y procesado por “mousePressed” </li></ul></ul></ul></ul><ul><ul><ul><li>Un MouseEvent por cada “desplazamiento infinitesimal” </li></ul></ul></ul><ul><ul><ul><ul><li>El “getSource”, “getX” y “getY” son relativos a la componente desde donde se arrastra </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Recogido por un MouseMotionListener y procesado por “mouseDragged” </li></ul></ul></ul></ul><ul><ul><ul><li>Un MouseEvent final </li></ul></ul></ul><ul><ul><ul><ul><li>Recogido por un MouseListener y procesado por “mouseRealeased” </li></ul></ul></ul></ul><ul><li>Ejemplo </li></ul><ul><ul><li>“ Movimientos-Ratón” </li></ul></ul>
  15. 15. Ejemplo
  16. 16. Applets <ul><li>Interfaces de usuario que se muestran en navegadores Web. </li></ul><ul><ul><li>Análogos a JFrame, aunque: </li></ul></ul><ul><ul><ul><li>Su tamaño es fijo en la página web </li></ul></ul></ul><ul><ul><ul><li>No tienen los permisos que una interfaz de usuario normal creada dentro del método “main” </li></ul></ul></ul><ul><ul><ul><ul><li>Por seguridad </li></ul></ul></ul></ul><ul><ul><ul><li>No tienen método “main”. Se define una subclase de “JApplet” y el navegador ejecuta: </li></ul></ul></ul><ul><ul><ul><ul><li>1) El constructor “JApplet()” </li></ul></ul></ul></ul><ul><ul><ul><ul><li>2) Métodos “init”, “start”, “stop”, “destroy” cuando corresponda </li></ul></ul></ul></ul>
  17. 17. Dentro de una página Web <ul><li>Un applet se incluye en una página Web entre código HTML: </li></ul><HTML> <HEAD> <TITLE> Una página con un applet </TITLE> </HEAD> <BODY> A continuación aparece el applet: <APPLET CODE=“MiApplet2.class” WIDTH=350 HEIGHT=200> </APPLET> </BODY> </HTML> Fichero ejemplo.html
  18. 18. Ejemplo Ejemplo: “Applets”
  19. 19. Jerarquía de clases <ul><li>Jerarquía </li></ul><ul><ul><li>java.lang.Object </li></ul></ul><ul><ul><li>java.awt.Component </li></ul></ul><ul><ul><li>java.awt.Container </li></ul></ul><ul><ul><li>java.awt.Panel </li></ul></ul><ul><ul><li>java.applet.Applet </li></ul></ul><ul><ul><li>javax.swing.JApplet </li></ul></ul>
  20. 20. Características generales <ul><li>No necesita método main; se extiende la clase JApplet </li></ul><ul><li>Los simuladores de applets (“appletviewers”) emulan a applets. </li></ul><ul><ul><li>Desde línea de comandos: </li></ul></ul><ul><ul><ul><li>“ appletviewer ejemplo.html” </li></ul></ul></ul><ul><ul><ul><ul><li>ignora el código html fuera de <applet>..</applet> </li></ul></ul></ul></ul><ul><ul><ul><li>Dimensiones modificables interactivamente </li></ul></ul></ul><ul><li>Los navegadores “Internet Explorer” y “Netscape” soportan JDK 1.1. </li></ul><ul><ul><li>Al instalar una versión superior (por ejemplo J2SK 1.4), se instala un “plug-in” para que el navegador admita applets de esa versión superior. </li></ul></ul><ul><li>Applets más convenientes en intranets (mayor velocidad de “download”). </li></ul>
  21. 21. Métodos característicos de un applet <ul><li>Dentro de la clase JApplet: </li></ul><ul><ul><li>init() : </li></ul></ul><ul><ul><ul><li>Inicialización de una página en el navegador (se ejecuta una sola vez) </li></ul></ul></ul><ul><ul><li>start() : </li></ul></ul><ul><ul><ul><li>Inicializacion o revisita de una página </li></ul></ul></ul><ul><ul><li>stop() : </li></ul></ul><ul><ul><ul><li>Al destruir la página o abandonarla </li></ul></ul></ul><ul><ul><li>destroy() : </li></ul></ul><ul><ul><ul><li>Al destruir la página </li></ul></ul></ul><ul><li>Algunos navegadores (como Internet Explorer) no cumplen este estándar: </li></ul><ul><ul><li>Destruyen el applet al abandonar una página (haciendo también “destroy”) y reinicializan completamente el applet al revisitarla. </li></ul></ul><ul><li>Hilos generados (no estándar): </li></ul><ul><ul><li>Algunos navegadores generan un hilo de eventos por cada applet de una página y otros lo hacen de otra manera </li></ul></ul>
  22. 22. Limitaciones de applets <ul><li>Dependientes del navegador. Algunas de ellas: </li></ul><ul><ul><li>No pueden leer o escribir en ficheros. </li></ul></ul><ul><ul><li>Conexiones imposibles a otra máquina distinta de la que proviene. </li></ul></ul><ul><ul><li>No puede arrancar ningún programa en el ordenador donde se está ejecutando, ni tampoco leer sus propiedades. </li></ul></ul><ul><li>En el appletviewer aparecen menos restricciones (se pueden leer propiedades locales, ejecutar otro programa, ...) </li></ul><ul><li>En Java, sin embargo, hay otros servicios que permiten ignorar estas limitaciones: </li></ul><ul><ul><li>A los “signed applets” de confianza se les puede dar los mismos privilegios que a una aplicación. </li></ul></ul>
  23. 23. Sintaxis (I) para <applet>....</applet> <ul><li><APPLET </li></ul><ul><li>[CODEBASE = codebaseURL ] </li></ul><ul><li>CODE = appletFile </li></ul><ul><li>[ARCHIVE = JARFiles ] </li></ul><ul><li>[NAME = appletInstanceName ] </li></ul><ul><li>WIDTH= pixels HEIGHT= pixels </li></ul><ul><li>… </li></ul><ul><li>> </li></ul><ul><li>[<PARAM NAME = AttributeName1 </li></ul><ul><li> VALUE = AttributeValue1 >] </li></ul><ul><li>[<PARAM NAME = AttributeName2 </li></ul><ul><li> VALUE = AttributeValue2 >] </li></ul><ul><li>... </li></ul><ul><li></APPLET> </li></ul>
  24. 24. Sintaxis (II) para <applet>....</applet> <ul><li>El contenido del classpath son direcciones internet: </li></ul><ul><ul><li>codebase </li></ul></ul><ul><ul><ul><li>Análogo a los directorios locales que se añaden al “classpath” en “Netbeans” </li></ul></ul></ul><ul><ul><li>archive </li></ul></ul><ul><ul><ul><li>Análogo a los ficheros “.zip” o “.jar” que se añaden al “classpath” en “Netbeans” </li></ul></ul></ul><ul><li>Un applet puede recibir parámetros dentro de “<param> …</param>” </li></ul><ul><ul><li>Análogo a los parámetros del método “main” de una aplicación Java normal. </li></ul></ul><ul><ul><li>Método: </li></ul></ul><ul><ul><ul><li>public String getParameter(String name) </li></ul></ul></ul>
  25. 25. Páginas HTML dinámicas (I) <ul><li>Interfaz web </li></ul><ul><ul><li>Páginas HTML </li></ul></ul><ul><ul><li>JSP (Java Server Pages) </li></ul></ul><ul><ul><ul><li>Comentario </li></ul></ul></ul><ul><ul><ul><ul><li><%-- --%> </li></ul></ul></ul></ul><ul><ul><ul><li>Directiva (de página) </li></ul></ul></ul><ul><ul><ul><ul><li><%@page %> </li></ul></ul></ul></ul><ul><ul><ul><li>Scriptlets (mezclables con HTML) </li></ul></ul></ul><ul><ul><ul><ul><li><% %> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><%= %> (conversión a String) </li></ul></ul></ul></ul><ul><ul><ul><li>Uso de un bean de sesión </li></ul></ul></ul><ul><ul><ul><ul><li>Bean (atributos con métodos get/set) </li></ul></ul></ul></ul><ul><ul><li>Javascript </li></ul></ul><ul><ul><ul><li>Alternativa a JSP </li></ul></ul></ul><ul><ul><ul><ul><li>JSP envía al servidor y espera respuesta </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Javascript ejecuta en cliente </li></ul></ul></ul></ul>
  26. 26. Páginas HTML dinámicas (II) <ul><li>Ejemplo </li></ul><ul><ul><li>“ Interfaz-Web” </li></ul></ul><ul><ul><ul><li>Sesión  Bean </li></ul></ul></ul><ul><ul><li>Uso del patrón MVC (Model View Controller) </li></ul></ul><ul><li>Programación Web Visual (Rapid Web Development) </li></ul><ul><ul><li>Sun Java Studio Creator </li></ul></ul>
  27. 27. Patrones de diseño <ul><li>Patrones de diseño (UML). Ejemplos: </li></ul><ul><ul><li>MVC </li></ul></ul><ul><ul><li>Patrón de Fábrica Abstracta </li></ul></ul><ul><li>Ejemplo: </li></ul><ul><ul><li>Patrón de “Fábrica Abstracta” </li></ul></ul><ul><li>Ejemplo: </li></ul><ul><ul><li>Realización de preguntas basadas en menús </li></ul></ul><ul><ul><ul><li>Ejemplo 1 (estilo números) </li></ul></ul></ul><ul><ul><ul><li>Ejemplo 2 (estilo subcadenas) </li></ul></ul></ul><ul><li>Implementación en Java </li></ul><ul><ul><li>Ejemplo: </li></ul></ul><ul><ul><ul><li>“ Patrón-Diseño” </li></ul></ul></ul>
  28. 28. Ejemplo 1 <ul><li>Estilo de menús basados en números (respuesta con un número) </li></ul><ul><li>Pregunta: Capital de Francia </li></ul><ul><li>1. Londres </li></ul><ul><li>2. Roma </li></ul><ul><li>3. Paris </li></ul><ul><li>4. Caracas </li></ul><ul><li>Introduce el numero correcto </li></ul><ul><li>1 </li></ul><ul><li>Respuesta incorrecta </li></ul><ul><li>Pregunta: Capital de Francia </li></ul><ul><li>1. Londres </li></ul><ul><li>2. Roma </li></ul><ul><li>3. Paris </li></ul><ul><li>4. Caracas </li></ul><ul><li>Introduce el numero correcto </li></ul><ul><li>3 </li></ul><ul><li>Respuesta correcta </li></ul>
  29. 29. Ejemplo 2 <ul><li>Estilo de menús basados en subcadenas (respuesta </li></ul><ul><li>con dos primeras letras) </li></ul><ul><li>Pregunta: Capital de Francia </li></ul><ul><li>- Londres </li></ul><ul><li>- Roma </li></ul><ul><li>- Paris </li></ul><ul><li>- Caracas </li></ul><ul><li>Introduce las dos primeras letras de la solucion </li></ul><ul><li>Pa </li></ul><ul><li>Respuesta correcta </li></ul><ul><li>Pregunta: Capital de Francia </li></ul><ul><li>- Londres </li></ul><ul><li>- Roma </li></ul><ul><li>- Paris </li></ul><ul><li>- Caracas </li></ul><ul><li>Introduce las dos primeras letras de la solucion </li></ul><ul><li>Ca </li></ul><ul><li>Respuesta incorrecta </li></ul>
  30. 30. Método main <ul><li>int main(int argc, char* argv[]) </li></ul><ul><li>{ </li></ul><ul><li><Creación de una fábrica de menús de números> // Ejemplo 1 </li></ul><ul><li>// Ejemplo 2: Utilización del patrón: </li></ul><ul><li>// <Creación de una fábrica de menús de subcadenas> </li></ul><ul><li><Creación por la fábrica de un menú > </li></ul><ul><li><Crear la pregunta &quot;Capital de Francia&quot; para el menú> </li></ul><ul><li><Crear la opción &quot;Londres&quot; para el menú> </li></ul><ul><li><Crear la opción &quot;Roma&quot; para el menú> </li></ul><ul><li><Crear la opción &quot;París&quot; para el menú, como la correcta> </li></ul><ul><li><Crear la opción &quot;Caracas&quot; para el menú> </li></ul><ul><li><repetir dos veces> </li></ul><ul><li><Ejecutar la acción “preguntar” en el menú> </li></ul><ul><li><Ejecutar la acción “responder” en el menú> </li></ul><ul><li><fin de repetición> </li></ul><ul><li>} </li></ul>
  31. 31. Diagrama de clases
  32. 32. Diagrama de secuencia

×