It is a common requirement to tune default interfaces to provide polished, production worthy applications. In most products, you do this by editing HTML files containing complex tags and markups for data binding.
OpenXava provides higher level abstractions to customize your applications, by using the following basic approaches:
Note: to avoid mis-communications, the non-customized versions are shown in thumbnails - click to see them full size.
Here are the Layout Annotations we have used for basic UI customization in this Tutorial. Their effects are described in the sections below.
All of the User Interface Annotations used in the Tutorial are shown above, except the List Properties for the Customer's Purchaseorder list attributes, which is specified just as shown above for Purchaseorder Lineitems.
OpenXava supports extensible styles, which enable you to make the page look like this (note the shading of the field, group and tab controls):
Quick aside - while this is a very attractive style, we have used the standard style in some of the screen shots below. Why? We do this to illustrate both alternatives, and because our screen shot technology is too blurry using this (more shaded) style when there are layered dialogs.
OpenXava will also render your app appropriately for an iPad (try an address like http://10.0.1.4:8080/BusLogicOX/modules/Customer):
In addition to the visual style, there are several interesting User Interface elements shown above, such as the Tab Sheets and Attribute Groups. These are described in the following sections.
By default, fields are not grouped and presented in a single, and each child collection is presented in a separate table, such as the Purchaseorders and Audits for a Customer as at right:
A better interface is shown in the screen shot above:
You can easily do this with by using
By default, OpenXava generates a form as shown at right, where:
A better interface is illustrated in the diagram below (it is a nested dialog, which is why originating page is dark). In particular, note:
There effects are achieved as shown in the first diagram, specifically note:
In the screen shot above, observe the Purchaseorder page shows the Customer (parent of Purchase Order) Name and Balance. You achieve this by
The screen shot above illustrates the use of a Combo Box to choose Products. This is great for cases where the set of "parent" data is very small (such as the Tutorial), but it is not efficient when the list is large. No one wants a combo box of hundreds or thousands of items.
So, OpenXava also provides a mechanism for this. In the example below, Edit - Lineitem provides a "lantern" to search for and Choose a new value for Product, which provides for filtering (e.g, filter on name as shown the cursor position).
You achieve this as shown below. At the cursor position, we have commented out the @DescriptionsList which generates the Combo Box. We have defined our filtered chooser by:
The diagram below illustrates you can specify Tab Sheets not only for child collections, but also for attributes of the current Domain Object, here a rich text field.
By default, each Domain Attribute is displayed in a text box. OpenXava enables you to customize the control with
The Tutorial illustrates that the Images control not only displays images, but enables you to upload them. The delivered Tutorial data was previously initialized to contain images as follows:
OpenXava builds filter controls by default, enabling the End User to specify search criteria applied to the list as shown above. If you find these unnecessary for collections, you can specify the following in your properties/xava.properties file with the following:
It's beyond the scope of this introduction to do more than just hint, but OpenXava is architected as a standard Java web app. Hence, you can extend the system with new Controllers, and new Editors. In the example below, we have altered the standard MONEY editor to designate that "$" (the default) is replaced by "$US":
Here is a comparison of the same screen using the 4.5 extended Layout Manager. Note that (click the diagrams to view in full screen):