Mobile Applications with TouchKit

3.Heading

4.Speed

If any of the position data is unavailable, its value will be zero.

The onFailure() is called if the positioning fails for some reason. The errorCode explains the reason. Error 1 is returned if the permission was denied, 2 if the position is unavailable, 3 on positioning timeout, and 0 on an unknown error.

Notice that geolocation can take significant time, depending on the location method used by the device. With Wi-Fi and cellular positioning, the time is usually less than 30 seconds. With GPS, it can reach minutes or longer, especially if the reception is bad. However, once a location fix has been made, updates to the location will be faster. If you are making navigation software, you need to update the position data fairly frequently by calling Geolocator.detect() multiple times.

Displaying Position on a Map

Geographical positions are often visualized with a map. There are countless ways to do that, for example, in Vornitologist we use the OpenLayers Wrapper [http://vaadin.com/directory#addon/openlayers-wrapper] add-on component.

The OpenLayers Wrapper add-on contains a custom widget set, which needs to be included in the project widget set. In addition, the OpenLayers JavaScript library needs to be referenced in the widget set descriptor. You need to edit it manually and include the following lines:

<!-- WS Compiler: manually edited --> <script src="OpenLayers.js"></script>

<inherits name="org.vaadin.vol.VolWidgetset" />

The MapView in Vornitologist populates a vector layer containing markers of the latest observations.

public class MapView extends NavigationView

implements PositionCallback, VectorSelectedListener { public static StyleMap STYLEMAP_BIRD_MARKER;

private OpenLayersMap openLayersMap; private double latestLongitude; private double latestLatitude;

private VectorLayer markerLayer = new VectorLayer();

...]

22.7. Offline Mode

While regular Vaadin TouchKit applications are server-side applications, it allows a special offline mode, which is a client-side Vaadin UI that switched to automatically when the network connection is not available.The offline UI is included in the widget set of the regular server-side UI and stored in the browser cache. By providing a special cache manifest, the browser caches the page so strongly that it persists even after browser restart.

494	Offline Mode

Mobile Applications with TouchKit

Figure 22.7. Offline Mode in Vornitologist

During offline operation, the offline UI can store data in the HTML5 local storage of the mobile browser and then passed to the server-side application when the connection is again available.

See the Vornitologist demo and its source code for a complete example of the offline mode.

22.7.1. Enabling the Cache Manifest

HTML5 supports a cache manifest, which makes offline web applications possible. It controls how different resources are cached. The manifest is generated by TouchKit, but you need to enable it in the TouchKit settings. To do so, you need to define a custom servlet, as described in Section 22.4.2, “Creating a Custom Servlet”, and call setCacheManifestEnabled(true) for the cache settings, as follows:

TouchKitSettings s = getTouchKitSettings();

...

s.getApplicationCacheSettings()

.setCacheManifestEnabled(true);

Enabling the Cache Manifest

495

Mobile Applications with TouchKit

You also need to define a MIME type for the manifest in the web.xml deployment descriptor as follows:

<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type>

</mime-mapping>

22.7.2. Enabling Offline Mode

To enable the offline mode, you need to add the OfflineModeSettings extension to the UI.

OfflineModeSettings offline = new OfflineModeSettings();

...

offline.extend(this);

You can extend the OfflineModeSettings extension to to transfer data conveniently from the offline UI to the server-side, as described in Section 22.7.4, “Sending Data to Server”.

22.7.3. The Offline User Interface

An offline mode is built like any other client-side module, as described in Chapter 13, Client-Side Vaadin Development. You can use any GWT, Vaadin, add-on, and also TouchKit widgets in the offline user interface.

Most typically, a client-side application builds a simplified UI for data browsing and entry. It stores the data in the HTML5 local storage. It watches if the server connection is restored, and if it is, it sends any collected data to the server and suggests to return to the online mode.

Please see the Vornitologist source code for an example implementation of an offline mode user i n t e r f a c e . T h e com.vornitologist.widgetset.client.VornitologistOfflineMode.java is the main module of the offline application.

22.7.4. Sending Data to Server

Once the connection is available, the offline UI can send any collected data to the server-side. You can send the data from the offline UI, for example, by making a server RPC call to a serverside UI extension, as described in Section 16.6, “RPC Calls Between Clientand Server-Side”.

22.7.5. The Offline Theme

Normally, client-side modules have their own stylesheets in the public folder that is compiled into the client-side target, as described in Section 16.8, “Styling a Widget” and Section 13.3.1, “Specifying a Stylesheet”. However, you may want to have the offline mode have the same visual style as the online mode. To use the same theme as the server-side application, you need to define the theme path in the widget set definition file as follows.

<set-configuration-property name='touchkit.manifestlinker.additionalCacheRoot'

value='src/main/webapp/VAADIN/themes/mytheme:../../../VAADIN/themes/mytheme />

You need to follow a CSS style structure required by the Vaadin theme in your offline application. If you use any Vaadin widgets, as described in Section 15.3, “Vaadin Widgets”, they will use the Vaadin theme.

496	Enabling Offline Mode