Vaadin Touchkit 4

1,888 views
1,597 views

Published on

These slides briefly describe what Vaadin TouchKit is all about. I just gave this presentation to a group of people I'm coaching to get the best out of their Vaadin project!

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,888
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Vaadin Touchkit 4

  1. 1. Jeroen Benats Vaadin TouchKit Vaadin’s mobile framework
  2. 2. TouchKit?
  3. 3. Why use it… …when you have Vaadin? • • • • Screen size Finger accuracy Native Look&Feel for iOS ! Vaadin 7 can be made responsive • CSS @media queries
  4. 4. Benefits?
  5. 5. All components You already have the knowledge
 
 All regular components are available
  6. 6. TouchKit components Specifically for mobile devices
  7. 7. Reuse code Less duplication
  8. 8. Supports a lot! GeoLocation Home Screen launching
 Splash Screen
 Offline mode
  9. 9. t r e h n e u o Y c n a o g v e u f ! r
  10. 10. Licence? AGPL - FREE
 
 CVAL - $590 / DEV
  11. 11. Licence? The choice is yours!
  12. 12. Licence?
  13. 13. Issues you need to consider
  14. 14. Mobile user interface ❖ Other than regular computers (rotation, …) ❖ Finger instead of mouse ❖ ❖ ❖ No right-finger-click Double-tap usually not used No physical keyboard ❖ Changes, depending on the context
  15. 15. Bandwidth and Performance ❖ Client-side engine can take some time to load ❖ ❖ Latency is very important for mobile ❖ ❖ > Only compile widgetset with used components > Limit the use of immediate Use components can affect performance ❖ > TouchKit components are light-weight ❖ > CssLayout
  16. 16. Compatibility ❖ TouchKit focuses on WebKit ❖ ❖ Leading mobile browser core (69% mobile market) Back-button ❖ Android devices have a dedicated back-button ❖ iOS doesn’t ❖ > URI fragments can be used to cover this
  17. 17. Components
  18. 18. NavigationView • • Navigation bar Content area
  19. 19. NavigationView ❖ Often used inside a NavigationManager ❖ > View change animations ❖ Full size by default ❖ setExpandRatio(content_area, 1)
  20. 20. NavigationView ❖ NavigationBar ❖ ❖ ❖ “Go left” + caption + “Go right” setLeftComponent() + setCaption() + setRightComponent() Toolbar area ❖ setToolBar() ❖ Can be any component ❖ TouchKit provides a specific ToolBar ❖ Is a CssLayout
  21. 21. ❖ NavigationManager Takes care of sliding animations
 ❖ 3 components can be set

  22. 22. NavigationManager ❖ setPreviousComponent() ❖ setCurrentComponent() ❖ setNextComponent()
 ❖ NE E Previous and next components are cached NSIV RE PO S S! S
  23. 23. NavigationManager
  24. 24. NavigationManager Triggered on manager.navigateTo()
  25. 25. or in the view…
  26. 26. NavigationManager
  27. 27. NavigationButton • • Special version of Button Navigating in a NavigationManager
  28. 28. NavigationButton
  29. 29. recommended for performance…
  30. 30. NavigationButton Dynamically loading views
  31. 31. Popover • • • Like a Vaadin sub-Window Fixed Most useful for tablet devices
  32. 32. Popover
  33. 33. SwipeView • • • Is a wrapper Navigation between views by swiping left or right Works together with a NavigationManager
  34. 34. Switch • Mobile CheckBox alternative
  35. 35. VerticalComponentGroup • • Vertical stack with border Typically used with NavigationButtons
  36. 36. HorizontalButtonGroup • Intended for grouping Buttons in slots of a VerticalComponentGroup
  37. 37. TabBarView • Tab bar with content area
  38. 38. Input fields • • • EmailField NumberField UrlField
  39. 39. Advanced topics
  40. 40. Fallback UI
  41. 41. GeoLocation
  42. 42. Storing data in the Local Storage
  43. 43. Getting data from the Local Storage
  44. 44. Certainly read…
  45. 45. Certainly read… 20.10. Building an Optimized Widget Set

×