vaadin touchkit 4
DESCRIPTION
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!TRANSCRIPT
![Page 1: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/1.jpg)
Jeroen Benats
Vaadin TouchKit Vaadin’s mobile framework
![Page 2: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/2.jpg)
TouchKit?
![Page 3: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/3.jpg)
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
![Page 4: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/4.jpg)
Benefits?
![Page 5: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/5.jpg)
All componentsYou already have the knowledgeAll regular components are available
![Page 6: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/6.jpg)
TouchKit components Specifically for mobile devices
![Page 7: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/7.jpg)
Reuse code Less duplication
![Page 8: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/8.jpg)
Supports a lot!GeoLocation Home Screen launching Splash ScreenOffline mode
![Page 9: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/9.jpg)
You ca
n go e
ven fu
rther!
![Page 10: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/10.jpg)
Licence?AGPL - FREECVAL - $590 / DEV
![Page 11: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/11.jpg)
Licence?The choice is yours!
![Page 12: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/12.jpg)
Licence?
![Page 13: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/13.jpg)
Issues you need to consider
![Page 14: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/14.jpg)
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
![Page 15: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/15.jpg)
Bandwidth and Performance
❖ Client-side engine can take some time to load
❖ > Only compile widgetset with used components
❖ Latency is very important for mobile
❖ > Limit the use of immediate
❖ Use components can affect performance
❖ > TouchKit components are light-weight
❖ > CssLayout
![Page 16: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/16.jpg)
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
![Page 17: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/17.jpg)
Components
![Page 18: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/18.jpg)
NavigationView
• Navigation bar • Content area
![Page 19: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/19.jpg)
NavigationView
❖ Often used inside a NavigationManager
❖ > View change animations
❖ Full size by default
❖ setExpandRatio(content_area, 1)
![Page 20: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/20.jpg)
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
![Page 21: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/21.jpg)
NavigationManager❖ Takes care of sliding
animations
❖ 3 components can be set
![Page 22: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/22.jpg)
❖ setPreviousComponent()
❖ setCurrentComponent()
❖ setNextComponent()
❖ Previous and next components are cached
NavigationManager
RESPONSIVENESS!
![Page 23: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/23.jpg)
NavigationManager
![Page 24: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/24.jpg)
NavigationManager
Triggered on manager.navigateTo()
![Page 25: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/25.jpg)
or in the view…
![Page 26: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/26.jpg)
NavigationManager
![Page 27: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/27.jpg)
NavigationButton
• Special version of Button • Navigating in a NavigationManager
![Page 28: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/28.jpg)
NavigationButton
![Page 29: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/29.jpg)
recommended for performance…
![Page 30: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/30.jpg)
NavigationButton
Dynamically loading views
![Page 31: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/31.jpg)
Popover
• Like a Vaadin sub-Window • Fixed • Most useful for tablet devices
![Page 32: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/32.jpg)
Popover
![Page 33: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/33.jpg)
SwipeView
• Is a wrapper • Navigation between views by swiping
left or right • Works together with a
NavigationManager
![Page 34: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/34.jpg)
Switch
• Mobile CheckBox alternative
![Page 35: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/35.jpg)
VerticalComponentGroup
• Vertical stack with border • Typically used with NavigationButtons
![Page 36: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/36.jpg)
HorizontalButtonGroup
• Intended for grouping Buttons in slots of a VerticalComponentGroup
![Page 37: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/37.jpg)
TabBarView
• Tab bar with content area
![Page 38: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/38.jpg)
Input fields
• EmailField • NumberField • UrlField
![Page 39: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/39.jpg)
Advanced topics
![Page 40: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/40.jpg)
Fallback UI
![Page 41: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/41.jpg)
![Page 42: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/42.jpg)
GeoLocation
![Page 43: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/43.jpg)
![Page 44: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/44.jpg)
Storing data in the Local Storage
![Page 45: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/45.jpg)
![Page 46: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/46.jpg)
Getting data from the Local Storage
![Page 47: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/47.jpg)
![Page 48: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/48.jpg)
Certainly read…
![Page 49: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/49.jpg)
Certainly read…20.10. Building an Optimized Widget Set
![Page 50: Vaadin Touchkit 4](https://reader034.vdocuments.mx/reader034/viewer/2022042515/5484020cb07959380c8b4a7f/html5/thumbnails/50.jpg)