Successfully reported this slideshow.

Building mobile applications with Vaadin TouchKit

6,220 views

Published on

'Building Mobile Applications with
 Vaadin TouchKit' presented at GWT.create US/EU

Published in: Technology, Education

Building mobile applications with Vaadin TouchKit

  1. 1. Building Mobile Applications with Vaadin TouchKit Sami Ekblad, Vaadin @samiekblad
  2. 2. t is ha W ou T it? chK
  3. 3. When should I use it?
  4. 4. QA new Label(“Hello Touch”)
  5. 5. java html
  6. 6. Java EE Applications
  7. 7. 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
  8. 8. 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
  9. 9. How does it work, really?
  10. 10. 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
  11. 11. 1. Initial HTML 2. CSS (theme) 3. Images 4. JavaScript 830k total compress 250k reduced widget set 120k
  12. 12. 1. name=”Sami” 2. button clicked 150 bytes
  13. 13. 1. name=”Sami” 2. button clicked 150 bytes “showNotification(‘Sami’)” 466 bytes
  14. 14. Server-driven HTML5 web applications
  15. 15. going mobile with Java
  16. 16. Device support?
  17. 17. Android iOS Windows Phone
  18. 18. Android 2.3 or newer Android iOS 5 or newer iOS Windows Phone 8 (IE 10) Windows Phone
  19. 19. mobile optimized HTML5 widgets
  20. 20. TouchKit App home screen getTouchKitSettings() .getApplicationIcons() .addApplicationIcon("/VAADIN/themes/icon.png");
  21. 21. splash screen getTouchKitSettings() . setStartupImage("/VAADIN/themes/splash.png");
  22. 22. geolocation Geolocator.detect(new PositionCallback() {     public void onSuccess(Position pos) {         double latitude = pos.getLatitude();         double longitude = pos.getLongitude();         double accuracy = pos.getAccuracy();
  23. 23. responsive <code intentionally left blank>
  24. 24. Responsive design Window.addResizeHandler( new ResizeHandler() {      @Override      public void onResize(ResizeEvent event) {        if (Window.getClientWidth() > 800) {           addStyleName(TABLET);        } else {           removeStyleName(TABLET);        } });
  25. 25. Responsive design Window.addResizeHandler( new ResizeHandler() {      @Override      public void onResize(ResizeEvent event) {        if (Window.getClientWidth() > 800) {           addStyleName(TABLET);        } else {           removeStyleName(TABLET);        } });
  26. 26. offline detection if (isNetworkOnline()) {         persistData(ticket); } else {      OfflineDataService.localStoreTicket(ticket);     } }
  27. 27. 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
  28. 28. We are still in browser, so what about Camera and accelerometer?
  29. 29. 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
  30. 30. So,when is this a good approach?
  31. 31. Puma Product portfolio management
  32. 32. Existing process Technology renewal
  33. 33. <picture this>
  34. 34. Need: process optimization
  35. 35. When to use TouchKit then?
  36. 36. You need crossdevice support on iOS, Android and Windows phones
  37. 37. You already have a Java backend in place
  38. 38. You cannot deliver though app stores
  39. 39. Good looking mobile applications quickly
  40. 40. let’s goMobile()
  41. 41. 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> ...
  42. 42. 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
  43. 43. github.com/vaadin/parking-demo
  44. 44. vaadin.com/touchkit Licensing: - Open source: AGPL - Commercial: CVAL $590/developer
  45. 45. thank you @samiekblad vaadin.com/sami

×