Mobile Applications with TouchKit

22.8. Building an Optimized Widget Set

Mobile networks are generally somewhat slower than DSL Internet connections. When starting a Vaadin application, the widget set is the biggest resource that needs to be loaded in the browser. As most of the Vaadin components are not used by most applications, especially mobile ones, it is beneficial to create an optimized version of the widget set.

Vaadin supports lazy loading of individual widget implementations when they are needed. The TouchKitWidgetSet used in TouchKit applications optimizes the widgetset to only download the most essential widgets first and then load other widget implementation lazily. This is a good compromise for most TouchKit applications. Nevertheless, because of the high latency of most mobile networks, loading the widget set in small pieces might not be the best solution for every case.With custom optimization, you can create a monolithic widget set stripped off all unnecessary widgets. Together with proper GZip compression, is should be quite light-weight for mobile browsers.

However, if the application has big components which are rarely used or not on the initial views, it may be best to load those widgets eagerly or lazily.

You can fine-tune a widget set by using a custom WidgetMapGenerator implementation. It needs to be defined in the .gwt.xml widget set definition file as follows:

<generate-with class="com.myprj.WidgetLoaderFactory">

<when-type-assignable class="com.vaadin.client.metadata.ConnectorBundleLoader" /> </generate-with>

The WidgetMapGenerator should override TouchKitWidgetMapGenerator and its getUsedPaintables() method. The method returns an array of user interface component classes used by the application. Many largeish component implementations can be left out. The list of used components can be built manuall. You can also, for example, use a debugger to dig into the CommunicationManager class in Vaadin, which opens all the views of the application. It contains a set of all components that have been used.

public class WidgetLoaderFactory

extends TouchKitBundleLoaderFactory {

private final ArrayList<Class<? extends ServerConnector>> eagerWidgets;

public WidgetLoaderFactory() { eagerWidgets =

new ArrayList<Class<? extends ServerConnector>>(); eagerWidgets.add(SwitchConnector.class); eagerWidgets.add(EmbeddedConnector.class); eagerWidgets.add(NumberFieldConnector.class);

...

The getLoadStyle() method should return the widget loading style, which should be EAGER to get a monolithic widgetset.

@Override

protected LoadStyle getLoadStyle(JClassType connectorType) { if (eagerWidgets.contains(connectorType)) {

return LoadStyle.EAGER; } else {

return super.getLoadStyle(connectorType);

}

}

}

Building an Optimized Widget Set

497