Desarrollo de Interfaces

Herramientas de usuario

Herramientas del sitio

Traza: • interfaces
bloque1:interfaces

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

bloque1:interfaces [2020/10/30 13:41] – fernandobloque1:interfaces [2024/09/16 20:55] (actual) – editor externo 127.0.0.1
Línea 393: Línea 393:
 === Ventana sin Layout Manager === === Ventana sin Layout Manager ===
  
-Para poder emplazar elementos en una ventana de cualquier tipo debemos indicar una organización (Layout). Si al principio no queremos complicarnos demasiado con un layout podemos trabajar de forma sencilla con **AbsoluteLayout**. Con este Layout podemos emplazar los elementos en el lugar que queramos, aunque no quedará tan bién a la hora de redimensionar la ventana. **Usando AbsoluteLayout los elementos se emplazan atendiendo a 4 coordenadas. Esto se desaconseja en el futuro, ya que no mantiene un orden al redimensionar la ventana.**+Para poder emplazar elementos en una ventana de cualquier tipo debemos indicar una organización (Layout). Si al principio no queremos complicarnos demasiado con un layout podemos trabajar de forma sencilla con ''AbsoluteLayout''. Con este Layout podemos emplazar los elementos en el lugar que queramos, aunque no quedará tan bién a la hora de redimensionar la ventana. **Usando AbsoluteLayout los elementos se emplazan atendiendo a coordenadas. Esto se desaconseja en el futuro, ya que no mantiene un orden al redimensionar la ventana.**
  
 {{:bloque1:contentpane.png?300 |}} {{:bloque1:contentpane.png?300 |}}
Línea 407: Línea 407:
  
  
-En algunos componentes deberemos crear un manejador de eventos para otro tipo de eventos (KeyEvent, StateChanged, p.e.), aunque como se ha comentado, en la mayoría de los casos bastará con el evento //actionPerformed//.+En algunos componentes deberemos crear un manejador de eventos para otro tipo de eventos (''KeyEvent'', ''StateChanged'', p.e.), aunque como se ha comentado, en la mayoría de los casos bastará con el método ''actionPerformed()''.
  
 {{ :bloque1:addeventhandler2.png?300|}} {{ :bloque1:addeventhandler2.png?300|}}
Línea 427: Línea 427:
   - Marcar el checkbox **Create bound class**, e indicar el nombre   - Marcar el checkbox **Create bound class**, e indicar el nombre
  
-En la siguiente videoclase se enseña la creación de una aplicacion MVC desde 0, con el IDe IntelliJ.+En la siguiente videoclase se enseña la creación de una aplicacion MVC desde 0, con el IDE IntelliJ.
  
 {{ vimeo>296086288?medium }} {{ vimeo>296086288?medium }}
  
 ===== Manejadores de Eventos ===== ===== Manejadores de Eventos =====
 +Una interfaz gráfica se maneja mediante eventos. Los eventos le indican al programa como debe actuar: qué codigo debe ejecutar. La parte del programa que está atenta de esos eventos se conoce como //manejador de eventos// o //listener//.
  
 ==== Eventos ==== ==== Eventos ====
Línea 439: Línea 440:
 Para que nuestro programa pueda responder (ejecutar código) ante un evento, debemos usar un manejador de eventos. Para que nuestro programa pueda responder (ejecutar código) ante un evento, debemos usar un manejador de eventos.
  
-El manejador de eventos es un objeto que implementa los métodos necesarios para responder a ciertos tipos de eventos. Por ejemplo, para responder a los eventos de tipo **ActionEvent** necesitamos un objeto que haya implementado el método actionPerformed(ActionEvent event). +El manejador de eventos es un objeto que implementa los métodos necesarios para responder a ciertos tipos de eventos. Por ejemplo, para responder a los eventos de tipo ''ActionEvent'' necesitamos un objeto que haya implementado el método ''actionPerformed(ActionEvent event)''. 
  
 <code java> <code java>
Línea 521: Línea 522:
 |WindowEvent|WindowListener|Al abrir o cerrar ventanas, o cambiar el icono|**windowActivated**(); **windowClosed**(); **windowClosing**(); **windowDeactivated**(); **windowDeiconified**(); **windowIconified**(); **windowOpened**()| |WindowEvent|WindowListener|Al abrir o cerrar ventanas, o cambiar el icono|**windowActivated**(); **windowClosed**(); **windowClosing**(); **windowDeactivated**(); **windowDeiconified**(); **windowIconified**(); **windowOpened**()|
 |FocusEvent|FocusListener|Cuando un elemento recibe el foco|**focusGained**(); **focusLost**()| |FocusEvent|FocusListener|Cuando un elemento recibe el foco|**focusGained**(); **focusLost**()|
 +|MouseEvent|MouseListener|Cuando uso el ratón en algún componente|**mouseClicked**(); **mouseEntered**(); **mouseExited**(); **mousePressed**(); **mouseReleased**()|
 |ContainerEvent|ContainerListener|Cuando añado o quito elementos de un contenedor|**componentAdded**(); **componentRemoved**()| |ContainerEvent|ContainerListener|Cuando añado o quito elementos de un contenedor|**componentAdded**(); **componentRemoved**()|
 |TableModelEvent|TableModelListener|Al modificar valores de celdas|**tableChanged**()| |TableModelEvent|TableModelListener|Al modificar valores de celdas|**tableChanged**()|
Línea 531: Línea 533:
 Cuando se diseña una aplicacion aplicando el patrón de diseño //modelo-vista-controlador//, se persigue separar la aplicación en 3 capas diferenciadas: Cuando se diseña una aplicacion aplicando el patrón de diseño //modelo-vista-controlador//, se persigue separar la aplicación en 3 capas diferenciadas:
  
-  * La **vista** hace referencia a la ventana principal de la aplicación, la que contiene la mayoría de los elementos sobre los que el usuario va a interactuar. En MVC, la vista solo contiene el código referente a la construcción y organización de los componentes gráficos. Esta clase no contiene ningún //manejador de eventos// ni ningun código que haga alguna operación. No tiene ninguna interacción con el modelo.+  * La **vista** hace referencia a la ventana principal de la aplicación, la que contiene la mayoría de los elementos sobre los que el usuario va a interactuar. En MVC, la vista solo contiene el código referente a la construcción y organización de los componentes gráficos. Esta clase no contiene ningún //manejador de eventos// ni ningun código que haga alguna operación. Tampoco tiene ninguna interacción con el modelo, y es independiente del modelo y del controlador; de este modo es un componente reutilizable.
  
-  * El **modelo** es la capa que contiene los datos de la aplicación y los gestiona. Es la que se encarga de satisfacer las peticiones del usuario que se indican en la vista. Recordemos que el usuario solo interactua con la vista. El modelo contiene todos los métodos para realizar las operaciones de nuestra aplicación. Dar de alta elementos, eliminar, buscar, guardar, cargar, etc. No tiene ninguna constancia de la vista.+  * El **modelo** es la capa que contiene los datos de la aplicación y los gestiona. Es la que se encarga de satisfacer las peticiones del usuario que se indican en la vista. Recordemos que el usuario solo interactua con la vista. El modelo contiene todos los métodos para realizar las operaciones de nuestra aplicación. Dar de alta elementos, eliminar, buscar, guardar, cargar, etc. Es completamente independiente de la vista y del controlador.
  
-  * El **controlador** es la capa que comunica a las otras dos. Al llamar a su constructor, se le pasar como parámetro una instancia de la vista, y otra del modelo. El controlador es quien tiene implementados los manejadores de eventos y se los añade a los componentes de la vista indicados, y también es quien ejecuta las operaciones del modelo en respuesta a esos eventos. +  * El **controlador** es la capa que comunica a las otras dos. Al llamar a su constructor, se le pasa como parámetro una instancia de la vista, y otra del modelo. El controlador es quien tiene implementados los manejadores de eventos y se los añade a los componentes de la __vista__ indicados, y también es quien ejecuta las operaciones del __modelo__ en respuesta a esos eventos. 
  
-Resulta aconsejable que al menos las clases que representan el modelo, la vista y el controlador **estén dentro del mismo paquete** (''package'').+Resulta aconsejable que al menos las clases que representan la vista y el controlador **estén dentro del mismo paquete** (''package''). De este modo podemos hacer uso del modificador ''package-private'', también conocido como //default//.
  
 ==== Vista ==== ==== Vista ====
Línea 661: Línea 663:
     @Override     @Override
     public void actionPerformed(ActionEvent evt) {     public void actionPerformed(ActionEvent evt) {
 +       //El ActionCommand es una propiedad que se define en cada boton
        String comando = evt.getActionCommand();        String comando = evt.getActionCommand();
                
 +       //Dicha propiedad nos sirve para saber qué boton se ha pulsado
        switch(comando){        switch(comando){
           case "nuevo":           case "nuevo":
bloque1/interfaces.1604065289.txt.gz · Última modificación: 2024/09/16 20:55 (editor externo)