Downloaded 24 times
Uploaded byJeroen Benats
Vaadin Touchkit 4
The document discusses Vaadin's mobile framework, TouchKit, which enhances mobile application development by supporting native look-and-feel, responsive design, and essential features for mobile devices like geolocation and offline mode. Key components and their functionalities, such as navigation view, toolbar, and popover, are explained, alongside considerations for mobile user interfaces. Licensing options are provided, indicating TouchKit can be used for free under AGPL or for $590 with a commercial license.
![[1C7] Developing with Oculus](https://cdn.slidesharecdn.com/ss_thumbnails/1c7developingwithoculus-140928204557-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Vaadin Touchkit 4
- 1. Jeroen Benats Vaadin TouchKit Vaadin’smobile framework
- 2.
- 3. Why use it… …whenyou have Vaadin? • • • • Screen size Finger accuracy Native Look&Feel for iOS ! Vaadin 7 can be made responsive • CSS @media queries
- 4.
- 5. All components You alreadyhave the knowledge All regular components are available
- 6. TouchKit components Specifically formobile devices
- 7.
- 8. Supports a lot! GeoLocation HomeScreen launching Splash Screen Offline mode
- 9.
- 10. Licence? AGPL - FREE CVAL- $590 / DEV
- 11. Licence? The choice isyours!
- 12.
- 13. Issues you needto consider
- 14. Mobile user interface ❖ Otherthan 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-sideengine 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 onWebKit ❖ ❖ 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.
- 18.
- 19. NavigationView ❖ Often used insidea 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 ofsliding animations ❖ 3 components can be set
- 22. NavigationManager ❖ setPreviousComponent() ❖ setCurrentComponent() ❖ setNextComponent() ❖ NE E Previous and nextcomponents are cached NSIV RE PO S S! S
- 23.
- 24.
- 25. or in theview…
- 26.
- 27. NavigationButton • • Special version ofButton Navigating in a NavigationManager
- 28.
- 29.
- 30.
- 31. Popover • • • Like a Vaadinsub-Window Fixed Most useful for tablet devices
- 32.
- 33. SwipeView • • • Is a wrapper Navigationbetween views by swiping left or right Works together with a NavigationManager
- 34.
- 35. VerticalComponentGroup • • Vertical stack withborder Typically used with NavigationButtons
- 36. HorizontalButtonGroup • Intended for groupingButtons in slots of a VerticalComponentGroup
- 37. TabBarView • Tab bar withcontent area
- 38.
- 39.
- 40.
- 42.
- 44. Storing data inthe Local Storage
- 46. Getting data fromthe Local Storage
- 48.
- 49. Certainly read… 20.10. Building anOptimized Widget Set