Файл: book-of-vaadin.pdf

Vaadin JPAContainer

21.8.3. Master-Detail Editor

The MasterDetailEditor is a field component that allows editing an item property that has one- to-many relationship.The item can be a row in a table or bound to a form. It displays the referenced collection as an editable Table and allows adding and removing items in it.

You can use the MasterDetailEditor manually, or perhaps more commonly use a JPAContainer FieldFactory to create it automatically. As shown in the example in Figure 21.6, “Using FieldFactory with One-to-Many Relationship”, the factory creates a MasterDetailEditor for all properties with a @OneToMany or an @ElementCollection annotation.

21.9. Using JPAContainer with Hibernate

Hibernate needs special handling in some cases.

21.9.1. Lazy loading

In order for lazy loading to work automatically, an entity must be attached to an entity manager. Unfortunately, Hibernate can not keep entity managers for long without problems.To work around the problem, you need to use a special lazy loading delegate for Hibernate.

JPAContainer entity providers handle lazy loading in delegates defined by the LazyLoadingDelegate interface. The default implementation for Hibernate is defined in HibernateLazyLoadingDelegate. You can instantiate one and use it in an entity provider with setLazyLoadingDelegate().

The default implementation works so that whenever a lazy property is accessed through the Vaadin Property interface, the value is retrieved with a separate (JPA Criteria API) query using the currently active entity manager. The value is then manually attached to the entity instance, which is detached from the entity manager. If this default implementation is not good enough, you may need to make your own implementation.

21.9.2. The EntityManager-Per-Request pattern

One issue with Hibernate is that it is designed for short-lived sessions. The lifetime of an entity manager is roughly that of a session. However, if an error occurs in a session or entity manager, the manager becomes unuseable. This causes big problems with long-lived sessions that would work fine with EclipseLink.

The recommended solution is to the EntityManager-per-Request pattern. It is highly recommended always when using Hibernate.

An entity manager can only be open during the request-response cycle of the Vaadin application servlet, so that one is created at the beginning of the request and closed at the end.

You can use the EntityManagerPerRequestHelper as follows:

1.Create a new instance in the constructor or init() method of your Vaadin application class.

2.Override onRequestStart() in the application class and call requestStart() in the helper instance.

Vaadin JPAContainer

3.Override onRequestEnd() in the application class and call requestEnd() in the helper.

4.Whenever a new JPAContainer instance is created in the application, register it in the helper by calling addContainer() with the container.

5.If you use the JPAContainer FieldFactory, as described in Section 21.8, “Automatic Form Generation”, you need to set the helper for the factory either by passing it in the constructor (new FieldFactory(myEMPRH)) or with setEntityManagerPerRequestHelper().The FieldFactory creates JPAContainers internally and these instances need to be updated with the entity manager instances when they change between requests.

21.9.3.Joins in Hibernate vs EclipseLink

EclipseLink supports implicit joins, while Hibernate requires explicit joins. In SQL terms, an explicit join is a "FROM a INNER JOIN b ON a.bid = b.id" expression, while an implicit join is done in a WHERE clause, such as: "FROM a,b WHERE a.bid = b.id".

In a JPAContainer filter with EclipseLink, an implicit join would have form:

new Equal("skills.skill", s)

In Hibernate you would need to use JoinFilter for the explicit join:

new JoinFilter("skills", new Equal("skill", s))

Chapter 22

Mobile Applications with TouchKit

This chapter describes how to write mobile applications using the Vaadin TouchKit.

22.1. Overview

Web browsing is becoming ever increasingly mobile and web applications need to satisfy users with both desktop computers and mobile devices, such as phones and tablets. While the mobile browsers can show the pages just like in regular browsers, the screen size, finger accuracy, and

Mobile Applications with TouchKit

mobile browser features need to be considered to make the experience more pleasant. Vaadin TouchKit gives the power of Vaadin for creating mobile user interfaces that complement the regular web user interfaces of your applications. Just like the purpose of the Vaadin Framework is to make desktop-like web applications, the purpose of TouchKit is to allow creation of web applications that give the look and feel of native mobile applications.

Figure 22.1. The Vornitologist Demo for Vaadin TouchKit

Creating a mobile UI is much like a regular Vaadin UI. You can use all the regular Vaadin components and add-ons available from Vaadin Directory, but most importantly the special TouchKit components.

@Theme("mobiletheme")

public class SimplePhoneUI extends UI { @Override

protected void init(VaadinRequest request) {

//Set the window or tab title getPage().setTitle("Hello Phone!");

//Use the TouchKit TabBarView for content TabBarView mainView = new TabBarView(); setContent(mainView);

//Create a view - usually a regular class class MyView extends VerticalLayout {

Table table = new Table("Planets", planetData());

public MyView() {

addComponent(new Label("This is a view")); table.setWidth("100%"); table.setPageLength(table.size()); addComponent(table);

addComponent(new Button("Go")); setSpacing(true);

}

}

mainView.addTab(new MyView(), "Planets");

// Add some more sub-views mainView.addTab(new Label("Dummy"), "Map");

mainView.addTab(new Label("Dummy"), "Settings");

}

...

}

The resulting UI is shown in Figure 22.2, “Simple TouchKit UI”.

Mobile Applications with TouchKit

Figure 22.2. Simple TouchKit UI

TouchKit supports many special mobile browser features, such as geolocation, home screen launching, splash screen, and web app mode, especially in iOS.

In addition to developing regular server-side UIs, TouchKit allows a special offline mode, which is a client-side Vaadin UI that is stored in the browser cache and switched to automatically when the network connection is not available, either when starting the application or while using it. For more information, see Section 22.7, “Offline Mode”.

In this chapter, we first consider some special aspects of mobile browsing. Then, we look how to create a project that uses TouchKit.TouchKit offers a number of specialized mobile components,

Mobile Applications with TouchKit

which are described in a dedicated section. We treat phone and tablet applications separately, and discuss testing briefly.

Vornitologist and Mobile Mail Demos

The Vornitologist is a demo application that showcases most of the features in TouchKit. You can try it out at http://demo.vaadin.com/vornitologist with your iOS or Android device. You can read the sources on-line or check them out from the repository and import them in Eclipse as described in Section 22.3.3, “Importing the Vornitologist Demo”.

The Mobile Mail is another demo application, which shows how to implement browsing of deep category trees and make forms.

Licensing

Vaadin TouchKit is a commercial product licensed under a dual-licensing scheme. The AGPL license allows open-source development, while the CVAL license needs to be purchased for closed-source use, including web deployments and internal use. Commercial licenses can be purchased from the Vaadin Directory, where you can also find the license details and download Vaadin TouchKit.

22.2. Considerations Regarding Mobile Browsing

When developing web applications that support mobile browsing, you need to consider various issues that are different from non-mobile use. TouchKit is designed to help with these issues.

22.2.1. Mobile Human Interface

Mobile devices use very different human interfaces than regular computers. For example, the screen can be rotated easily to switch between portrait and landscape views. This does not just change the dimensions of the display, but also affects the most useful layout.

The user interface is used with a finger instead of a mouse, so there are no features such as "right-finger-button". Double-tap is not normally used in mobile user interfaces, unlike the doubleclick with a mouse. Instead, a "long tap" usually has the same meaning as the double click. Finger gestures also play a large role, such as using a vertical swipe gesture for scrolling instead of a scroll bar.

There is normally no physical but a virtual keyboard, and the keyboard can change depending on the context. You also need to ensure that it does not hide the input field to which the user is trying to enter data when it pops up. This should be handled by the browser, but is among the issues that requires special testing.

22.2.2. Bandwidth

Mobile Internet connections are often significantly slower than with fixed lines. With a low-end mobile connection, such as 384 kbps, just loading the Vaadin client-side engine can take several seconds.This can be helped by compiling a widget set that includes only the widgets for the used components, as described in Section 22.8, “Building an Optimized Widget Set”.

Even with mobile broadband, the latency can be significant factor, especially with highly interactive rich applications. The latency is usually almost unnoticeable in fixed lines, typically less than 100 ms, while mobile Edge connections typically have latency around 500 ms, and sometimes much