Vaadin Touchkit 4
-
Upload
jeroen-benats -
Category
Education
-
view
1.085 -
download
2
description
Transcript of Vaadin Touchkit 4
Jeroen Benats
Vaadin TouchKit Vaadin’s mobile framework
TouchKit?
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
Benefits?
All componentsYou already have the knowledgeAll regular components are available
TouchKit components Specifically for mobile devices
Reuse code Less duplication
Supports a lot!GeoLocation Home Screen launching Splash ScreenOffline mode
You ca
n go e
ven fu
rther!
Licence?AGPL - FREECVAL - $590 / DEV
Licence?The choice is yours!
Licence?
Issues you need to consider
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
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
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
Components
NavigationView
• Navigation bar • Content area
NavigationView
❖ Often used inside a NavigationManager
❖ > View change animations
❖ Full size by default
❖ setExpandRatio(content_area, 1)
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
NavigationManager❖ Takes care of sliding
animations
❖ 3 components can be set
❖ setPreviousComponent()
❖ setCurrentComponent()
❖ setNextComponent()
❖ Previous and next components are cached
NavigationManager
RESPONSIVENESS!
NavigationManager
NavigationManager
Triggered on manager.navigateTo()
or in the view…
NavigationManager
NavigationButton
• Special version of Button • Navigating in a NavigationManager
NavigationButton
recommended for performance…
NavigationButton
Dynamically loading views
Popover
• Like a Vaadin sub-Window • Fixed • Most useful for tablet devices
Popover
SwipeView
• Is a wrapper • Navigation between views by swiping
left or right • Works together with a
NavigationManager
Switch
• Mobile CheckBox alternative
VerticalComponentGroup
• Vertical stack with border • Typically used with NavigationButtons
HorizontalButtonGroup
• Intended for grouping Buttons in slots of a VerticalComponentGroup
TabBarView
• Tab bar with content area
Input fields
• EmailField • NumberField • UrlField
Advanced topics
Fallback UI
GeoLocation
Storing data in the Local Storage
Getting data from the Local Storage
Certainly read…
Certainly read…20.10. Building an Optimized Widget Set