openxava / documentación / Lección 4: Refinar la interfaz de usuario

Curso: 1. Primeros pasos | 2. Modelo básico del dominio (1) | 3. Modelo básico del dominio (2) | 4. Refinar la interfaz de usuario | 5. Desarrollo ágil | 6. Herencia de superclases mapedas | 7. Herencia de entidades | 8. Herencia de vistas | 9. Propiedades Java | 10. Propiedades calculadas | 11. @DefaultValueCalculator en colecciones |12. @Calculation y totales de colección |13. @DefaultValueCalculator desde archivo |14. Evolución del esquema manual |15. Cálculo de valor por defecto multiusuario |16. Sincronizar propiedades persistentes y calculadas |17. Lógica desde la base de datos |18. Validación avanzada | 19. Refinar el comportamiento predefinido | 20. Comportamiento y lógica de negocio | 21. Referencias y colecciones | A. Arquitectura y filosofía | B. Java Persistence API | C. Anotaciones | D. Pruebas automáticas

---

La interfaz de usuario para tu aplicación de facturación escribiendo simplemente clases de Java simples y llanas es bastante decente, de toda formas con solo unas pocas anotaciones en tus clases puedes personalizar tu interfaz de usuario para hacer frente a cualquier caso que te encuentres en una aplicación de gestión.

Interfaz de usuario por defecto

Así es la interfaz de usuario por defecto para Factura:

Como ves, OpenXava muestra todos los miembros, uno debajo de otro, en el orden en que los has declarado en el código fuente. También ves como en el caso de la referencia cliente se usa la vista por defecto de Cliente.
Vamos a hacer algunas pequeñas mejoras. Primero, definiremos la disposición de los miembros explícitamente, de esta forma podemos poner anyo, numero y fecha en la misma línea. Segundo, vamos a usar una vista más simple para Cliente. El usuario no necesita ver todos los datos del cliente cuando está introduciendo la factura.

Usar @View para definir la disposición

Para definir la disposición de los miembros de Factura en la interfaz de usuario has de usar la anotación @View. Es fácil, sólo has de enumerar los miembros a mostrar. Mira el código:

@View(members= // Esta vista no tiene nombre, por tanto será la vista usada por defecto
 "anyo, numero, fecha;" + // Separados por coma significa en la misma línea
 "cliente;" + // Punto y coma significa nueva línea
 "detalles;" +
 "observaciones"
)
public class Factura {

Mostramos todos los miembros de Factura, pero usamos comas para separar anyo, numero y fecha, así son mostrados en la misma línea, produciendo una interfaz de usuario más compacta, como esta:

Usar @ReferenceView para refinar la interfaz de referencias

Todavía necesitas refinar la forma en que la referencia cliente se visualiza, porque visualiza todos los miembros de Cliente, y para introducir los datos de una Factura una vista más simple del cliente puede ser mejor. Para hacer esto, has de definir una vista Simple en Cliente, y entonces indicar en Factura que quieres usar esa vista Simple de Cliente para visualizarlo.
Primero definamos la vista Simple en Cliente:

@View(name="Simple", // Esta vista solo se usará cuando se especifique “Simple”
    members="numero, nombre" // Muestra únicamente numero y nombre en la misma línea
)
public class Cliente {

Cuando una vista tiene un nombre, como en este caso, esa vista solo se usa cuando ese nombre se especifica. Es decir, aunque Cliente solo tiene esta anotación @View, cuando tratas de visualizar un Cliente no usará esta vista Simple, sino la generada por defecto. Si defines una @View sin nombre, esa vista será la vista por defecto, aunque este no es el caso.
Ahora has de indicar que la referencia a Cliente desde Factura use esta vista Simple. Esto se hace mediante @ReferenceView. Edita la referencia cliente en la clase Factura de esta forma:

@ManyToOne(fetch=FetchType.LAZY, optional=false)
@ReferenceView("Simple") // La vista llamada 'Simple' se usará para visualizar esta referencia
Cliente cliente;

Realmente sencillo, solo has de indicar el nombre de la vista de la entidad referenciada que quieres usar.
Después de esto la referencia cliente se mostrará de una forma más compacta:

Hemos refinado un poco la interfaz de Factura.

La interfaz de usuario refinada

Este es el resultado de nuestros refinamientos en la interfaz de usuario de Factura:

Has visto lo fácil que es usar @View y @ReferenceView para obtener una interfaz de usuario más compacta para Factura.
Ahora tienes una interfaz de usuario suficientemente buena para empezar a trabajar, y realmente hemos hecho poco trabajo para conseguirlo.

Resumen

En esta lección has aprendido como refinar la interfaz de usuario por defecto usando algunas anotaciones de OpenXava. Si quieres conocer todas las posibilidades que ofrece OpenXava para definir la interfaz de usuario lee la guía de referencia.

¿Problemas con la lección? Pregunta en el foro ¿Ha ido bien? Ve a la lección 5