TouchKit allows developers to build mobile applications using Java and Vaadin that work across iOS, Android, and Windows Phone. It uses a client-server model where UI components are implemented on the server-side in Java but rendered on the client-side using JavaScript widgets. TouchKit provides mobile optimized widgets, support for device features like geolocation and cameras using Apache Cordova, and responsive design capabilities. It is a good option when you need cross-device support on major mobile platforms and already have a Java backend.

1. Building Mobile Applications with
Vaadin TouchKit
Sami Ekblad, Vaadin
@samiekblad

2. t is
ha
W
ou
T
it?
chK

3. When
should
I use it?

4. QA
new Label(“Hello Touch”)

7. java
html

8. Java EE
Applications

9. Javascript
handling
Cross-browser
issues
Typical Java
web application:
Browser
AJAX request
handling &
protocol
Security
UI
business logic
View config XMLs
JavaScript +
Server-side JSF
(or something)
Server
Backend API

10. Javascript
handling
Browser
Cross-browser
issues
d
e
l n
d i
n d
a a
H Va
y
b
AJAX request
handling &
protocol
Security
UI
business logic
View config XMLs
Server
Backend API
Vaadin TouchKit
Focus on
business logic

11. How
does it
work,
really?

12. Client-server UI components
“UI Component”
• Button, Table, Tree, ...
• Server-side data+logic
• Full Java API
HTTP(S)
“Widget”
• Client-side peer of the
component
• Runs on JavaScript
Java
Java
• Compiled with JDK
• Google Web Toolkit

14. 1. Initial HTML
2. CSS (theme)
3. Images
4. JavaScript
830k total
compress
250k
reduced
widget set
120k

16. 1. name=”Sami”
2. button clicked
150 bytes

18. 1. name=”Sami”
2. button clicked
150 bytes
“showNotification(‘Sami’)”
466 bytes

19. Server-driven
HTML5
web applications

20. going
mobile
with
Java

21. Device support?

22. Android
iOS
Windows Phone

23. Android 2.3 or newer
Android
iOS 5 or newer
iOS
Windows Phone 8 (IE 10)
Windows Phone

24. mobile
optimized
HTML5
widgets

25. TouchKit App
home screen
getTouchKitSettings()
.getApplicationIcons()
.addApplicationIcon("/VAADIN/themes/icon.png");

26. splash screen
getTouchKitSettings()
. setStartupImage("/VAADIN/themes/splash.png");

27. geolocation
Geolocator.detect(new PositionCallback() {
public void onSuccess(Position pos) {
double latitude = pos.getLatitude();
double longitude = pos.getLongitude();
double accuracy = pos.getAccuracy();

28. responsive
<code intentionally left blank>

29. Responsive
design
Window.addResizeHandler(
new ResizeHandler() {
@Override
public void onResize(ResizeEvent event) {
if (Window.getClientWidth() > 800) {
addStyleName(TABLET);
} else {
removeStyleName(TABLET);
}
});

30. Responsive
design
Window.addResizeHandler(
new ResizeHandler() {
@Override
public void onResize(ResizeEvent event) {
if (Window.getClientWidth() > 800) {
addStyleName(TABLET);
} else {
removeStyleName(TABLET);
}
});

31. offline detection
if (isNetworkOnline()) {
persistData(ticket);
} else {
OfflineDataService.localStoreTicket(ticket);
}
}

32. camera +
images
Switch
Calendar
icons
SwipeView
UrlField
status bar
TabBar
DatePicker
NumberField
Email
fallback UI
Toolbar
Cache
NavigationBar
local storage
Popover
use
device
features
from
server
in Java

33. We are still in browser,
so what about
Camera and
accelerometer?

34. Apache Cordova (PhoneGap)
•Interface between native and WebView components
•Access most of the device features
•Distribution in various app store portals
• Accelerometer
• Camera
• Compass
• Connection mode
• Contacts
• Device information
• Device events
• Notifications

35. So,when
is this a
good
approach?

36. Puma
Product portfolio
management

37. Existing process
Technology renewal

38. <picture this>

39. Need: process optimization

44. When to use
TouchKit then?

45. You need crossdevice support on
iOS, Android and
Windows phones

46. You already have a
Java backend in place

47. You cannot deliver
though app stores

48. Good looking mobile
applications quickly

49. let’s
goMobile()

50. pom.xml
<dependency>
" <groupId>com.vaadin.addon</groupId>
" <artifactId>vaadin-touchkit-agpl</artifactId>
" <version>4.0.0-SNAPSHOT</version>
</dependency>
<repository>
" <id>vaadin-addons</id>
" <url>http://maven.vaadin.com/vaadin-addons</url>
</repository>
...

51. use the archetype
mvn archetype:generate
-DarchetypeGroupId=com.vaadin
-DarchetypeArtifactId=vaadin-archetype-touchkit
-DarchetypeVersion=4.0.0.alpha2
-DgroupId=org.vaadin.se.myapp -DartifactId=gomobile
-Dversion=0.1.0
-Dpackaging=war

52. github.com/vaadin/parking-demo

53. vaadin.com/touchkit
Licensing:
- Open source: AGPL
- Commercial: CVAL $590/developer

54. thank you
@samiekblad
vaadin.com/sami