Creating Mobile Forms

LSPS provides support for creating mobile forms that can be used in mobile LSPS applications.

Important: A mobile LSPS application is by no means intended to substitute the desktop application and should be considered an extension of the desktop application.

The specific support for mobile forms in LSPS includes the following:

• mobile presentation hint for the vertical and horizontal layout component

Guidelines

• Use horizontal layout with the mobile hint only to hold a set of buttons.
• Wrap more complex forms either in the vertical layout component with the mobile hint or in the Tabbed container component. Every Tab component can then contain a part of the form. In the Tab component, use preferably icons instead since the used font is rather small.
• Do not nest a layout component with the mobile hint into another layout component with the mobile hint. The exception is a horizontal layout component with buttons.

• Adapt your forms to different screen sizes and resolutions: use Conditional components with different "versions" of the form.

  To detect the screen size on runtime do the following:

  • Create the custom getBrowserWindowWidth() that returns an Integer. The function is implemented as the getBrowserWindowWidth() method in com.whitestein.lsps.app.vaadin_touchkit.touchkit.MobileUtils and returns the width of the displayed page in DP(density independent pixel).
  • Define how to handle the ApplicationEvent with the ID internal_windowresize. The event is produced when the width of the browser window changes and therefore also when the device is rotated. It bears the window size in DP as its payload (held by the ui::Dimension record instance).

Important: If the user provides invalid values in the form and the window width changes, the invalid values are not transferred to the refreshed form. Consider handling such situations in your form.