Hi,
One option would be to check the current screen size (available from UI.getCurrent().getPage().getWebBrowser().getScreenWidth() and …getScreenHeight() ) and provide a different component if the screen is smaller than some limit value.
-Olli
Hi there,
We are making an application with Vaadin Framework 8 and have run into the problem of needing a mobile version of some of the views in the application. Since TouchKit is no longer supported in the newest versions of the Framework, how would we go about achieving such a solution?
To specific, we have views that needs to be presented both in browser and on mobiles. The solution may accept that specific views for the mobile version are needed, it just needs mobile friendly elements, e.g. different combobox design.
While this would work for selecting a different view that might have components in a different layout to better fit a mobile device, it doesn’t solve the need for components that are more mobile friendly. As an example, the default ComboBox component just doesn’t work correctly in a mobile view; often wen you have a dropdown selection in a mobile app you have a popup with the values you can choose from.
One option for replacing ComboBox on mobile would be to use a TextField and a Grid. You can even add them inside a Window to make it a bit more ComboBox-like. So you type in the textfield and that filters the contents in the Grid, where you can then select the value you want.
-Olli
I have implemented a value on my UI called isMobile and then lets a factory method return either a mobile or a desktop version of the panel I want to show. And then letting both panels share a common interface to be able to “talk” to it.
In scala that method looks like:
lazy val isMobile: Boolean = Page.getCurrent.getWebBrowser.isAndroid || Page.getCurrent.getWebBrowser.isIOS || Page.getCurrent.getWebBrowser.isWindowsPhone