Vaadin Touchkit 4
1 like2,478 views
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!
Vaadin Touchkit 4
- 1. Jeroen Benats Vaadin TouchKit Vaadins 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. 京艶稼艶鍖t壊?
- 5. All components You already have the knowledge All regular components are available
- 6. TouchKit components Speci鍖cally for mobile devices
- 8. Supports a lot! GeoLocation Home Screen launching Splash Screen Of鍖ine mode
- 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-鍖nger-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 doesnt > URI fragments can be used to cover this
- 17. Components
- 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 speci鍖c 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
- 25. or in the 厩庄艶敬
- 27. NavigationButton Special version of Button Navigating in a NavigationManager
- 28. NavigationButton
- 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
- 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
- 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