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!

1. Jeroen Benats
Vaadin TouchKit
Vaadin’s mobile framework

2. TouchKit?

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. Benefits?

5. All components
You already have the
knowledge
All regular components are
available

6. TouchKit components
Specifically for mobile
devices

7. Reuse code
Less duplication

8. Supports a lot!
GeoLocation
Home Screen launching
Splash Screen
Offline mode

9. t
r
e
h
n
e
u
o
Y
c
n
a
o
g
v
e
u
f
!
r

10. Licence?
AGPL - FREE
CVAL - $590 / DEV

11. Licence?
The choice is yours!

12. Licence?

13. Issues you need to consider

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. 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. 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. Components

18. NavigationView
•
•
Navigation bar
Content area

19. NavigationView
❖
Often used inside a NavigationManager
❖
> View change animations
❖
Full size by default
❖
setExpandRatio(content_area, 1)

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. ❖
NavigationManager
Takes care of sliding
animations
❖
3 components can be set

22. NavigationManager
❖
setPreviousComponent()
❖
setCurrentComponent()
❖
setNextComponent()
❖
NE
E
Previous and next components are cached NSIV
RE
PO
S
S!
S

23. NavigationManager

24. NavigationManager
Triggered on manager.navigateTo()

25. or in the view…

26. NavigationManager

27. NavigationButton
•
•
Special version of Button
Navigating in a NavigationManager

28. NavigationButton

29. recommended for
performance…

30. NavigationButton
Dynamically loading views

31. Popover
•
•
•
Like a Vaadin sub-Window
Fixed
Most useful for tablet devices

32. Popover

33. SwipeView
•
•
•
Is a wrapper
Navigation between views by swiping
left or right
Works together with a
NavigationManager

34. Switch
•
Mobile CheckBox alternative

35. VerticalComponentGroup
•
•
Vertical stack with border
Typically used with NavigationButtons

36. HorizontalButtonGroup
•
Intended for grouping Buttons in slots
of a VerticalComponentGroup

37. TabBarView
•
Tab bar with content area

38. Input fields
•
•
•
EmailField
NumberField
UrlField

39. Advanced topics

40. Fallback UI

42. GeoLocation

44. Storing data in the Local
Storage

46. Getting data from the Local
Storage

48. Certainly read…

49. Certainly read…
20.10. Building an Optimized Widget Set