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;" +
"remarks"
)
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.
Summary
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.
