openxava / documentation / Lesson 4: Refining the user interface

Course: 1. Getting started | 2. Basic domain model (1) | 3. Basic domain model (2) | 4. Refining the user interface | 5. Agile development | 6. Mapped superclass inheritance | 7. Entity inheritance | 8. View inheritance | 9. Java properties | 10. Calculated properties | 11. @DefaultValueCalculator in collections | 12. @Calculation and collections totals | 13. @DefaultValueCalculator from file | 14. Manual schema evolution | 15. Multi user default value calculation | 16. Synchronize persistent and computed propierties | 17. Logic from database  | 18. Validating with @EntityValidator 19. Validation alternatives  | 20. Validation on remove  21. Custom Bean Validation annotation  | 22. REST service call from validation  | 23. Attributes in annotations  | 24. Refining the standard behavior | 25. Behavior & business logic | 26. References & collections | A. Architecture & philosophy | B. Java Persistence API | C. Annotations | D. Automated testing

Table of contents

Lesson 4: Refining the user interface
Default user interface
Using @View for defining layout
Using @ReferenceView to refine the user interface for reference
Refined user interface
The default user interface for your invoicing application just writing plain Java classes is pretty decent, anyways with just some annotations in your classes you can customize your user interface to fit any case you will face with a business application.
In this lesson we're going to make our application looks better with a small amount of code.

If you don't like videos follow the instructions below.

Default user interface

This is the default user interface for Invoice:
As you can see, OpenXava shows all the members, one per row, in the order you have declared them in the source code. Also, you can see how in the case of the customer reference the default view of the Customer is created.
We are going to do some improvements. First, we'll define the layout of the members explicitly. In this way we can put year, number and date in the same row. Second, we are going to use a simpler view for Customer. The user does not need to see all the data of the customer when he is entering the invoice.

Using @View for defining layout

For defining the layout of Invoice members in the user interface you have to use the @View annotation. It is easy because you only have to enumerate the members to be shown. Look at the code:
@View(members= // This view has no name, so it will be the view used by default
    "year, number, date;" + // Comma separated means in the same line
    "customer;" + // Semicolon means a new line
    "details;" +
public class Invoice {
At the end, we show all the members of Invoice, but we use commas to separate year, number and date. Thus they are in the same line, producing a more compact user interface, as this:

Using @ReferenceView to refine the user interface for reference

You still need to refine the way the customer reference is displayed, because it displays all the members of Customer, and for entering data for an Invoice, a simpler view of the customer may be better. To do so, you have to define a Simple view in Customer, and then indicate in Invoice that you want to use the Simple view of Customer to display it.
First, let's define the Simple view in Customer:
@View(name="Simple", // This view is used only when “Simple” is specified
    members="number, name" // Shows only number and name in the same line
public class Customer {
When a view has a name, as in this case, then that view is only used when that name is specified. That is, though Customer has only this @View annotation, when you try to display a Customer it will not use this Simple view, but the one generated by default. If you define a @View with no name, that view will be the default one, though that is not the case here.
Now, you have to indicate that the reference to Customer from Invoice must use this Simple view. This is done by means of @ReferenceView. Edit the customer reference in the Invoice class in this way:
@ManyToOne(fetch=FetchType.LAZY, optional=false)
@ReferenceView("Simple") // The view named 'Simple' is used to display this reference
Customer customer;
Really simple, you only have to indicate the name of the view of the referenced entity you want to use.
After this the customer reference will be shown in a more compact way:
You can see below how you have refined your Invoice interface.

Refined user interface

This is the result of our refinements in the Invoice user interface:
You have seen how easy it is to use @View and @ReferenceView to get a more compact user interface for Invoice.
Now you have a user interface good enough to start working, and you really have done little work to get it going.


In this lesson you have learned how to refine the default user interface using some OpenXava annotations. If you want to know all possible ways of refining the user interface with OpenXava look at the reference guide.

Download source code of this lesson

Any problem with this lesson? Ask in the forum Everything fine? Go to Lesson 5