Document revision: 2024-10-28
Refers to WEBDLG2 version: B0840 2409-1
As of Eloquence B.08.40 2407-1, WEBDLG2 implements
pointer events, which is a prerequisite to support
mobile applications.
All kinds of input devices (mouse, touch, pen/stylus) are now handled as
expected, including context menus (triggered by a tap-hold / long press).
In this context, a mobile application is considered to run on mobile devices
using a touch user interface. Less commonly, a stylus may be used
as input device as well. However, this document covers the specific
requirements of a touch user interface.
Table of contents
Touch interface layout
The layout of an application supporting a touch user interface
requires that the user interface elements are sized large enough for
reliable interaction. If the elements are too small, a touch event may
be wrongly assigned, e.g., to a different element than intended.
Because WEBDLG2 uses CSS to define an application's visual appearance, it is
possible to override the default WEBDLG2 CSS layout rules in order to achieve
a touch-friendly user interface.
To demonstrate this, an example is available for download:
touch-layout.css
All rules are prefixed with html.touch-layout so that they are
activated as soon as the touch-layout CSS class is set on the
<html> document element. This can be achieved by setting the
CssClass application
configuration.
The size of the layout grid (i.e., the Dialog raster) is forced to
150% of the element font size which is fixed to 16 pixels for all elements.
A 16px element font size is commonly recommended for a touch user
interface.
In addition, selective user interface elements not covered by the layout grid
are adjusted to touch-friendly sizes. This includes the window resize handles
(although a touch user interface should avoid
resizable windows).
To use this in your WEBDLG2 applications,
configure an URI in the
eloqwebd2.uri file for the
directory containing the touch-layout.css style sheet file,
for example:
[/plugin]
Path = /directory/in/web/server/document/hierarchy
This configuration associates the /plugin URI with the directory
containing the style sheet in the file system. Now the
application can be configured to
activate the CSS by setting
PluginURL,
and to set the
touch-layout CSS class name when the application is active,
as shown below:
PluginURL = /plugin/touch-layout.css
CssClass = touch-layout
For more information about loading customized CSS, please refer to the
customizing the visual appearance document.
Please note: This is a work in progress. We appreciate and hope
for your feedback. We are happy to include your suggestions.
Inline Dialogs
Users do not expect to encounter Dialog windows in a touch user
interface. Instead, Dialogs are expected to take up the entire display
area, i.e., they should be displayed
inline.
To define that all Dialogs take up the entire display area:
- Either set the
Layout
application configuration to
inline max:
Layout = inline max
This is appropriate if the application is dedicated to run on
mobile devices with touch user interface.
- Or do not set the x/y/w/h attributes of any Dialog, or set them all to zero.
This is the preferred method if the application is used both on the desktop
as well as on mobile devices. Typically, the application would load different
DLG files for desktop or mobile use.
Use application on desktop or mobile
It is straightforward to define separate
application configurations to use
an application either on the desktop or on mobile devices.
It is also possible to programmatically initialize an application to run either
in desktop mode or in mobile mode. Typically, the mode would be distinguished
based on the display/screen size: The application is configured for desktop
if the size is above a defined threshold (aka. breakpoint), it is
configured for mobile if the size is below the breakpoint.
This can be achieved by querying the System screenwidth and
screenheight attributes on application start,
such as:
DLG GET "System.screenwidth",Screen_w
DLG GET "System.screenheight",Screen_h
In addition, this reveals whether the device orientation is portrait or
landscape: Portrait mode is assumed when the screen height is greater than the
width. Landscape mode is assumed when the width is greater than the height.
It is important to choose an appropriate breakpoint.
This document contains a comprehensive list of different
mobile phone and tablet devices and their display sizes (the Vieport
Size column is relevant, not the Device Resolution).
According to this list, a possible breakpoint calculation could be:
- Take the minimum of screen with and height.
- Assume a mobile phone device if the result is below 768 pixels.
- Assume a tablet device if the result is below 1000 pixels.
- Otherwise assume a desktop device.
This choice would then affect how the application's Dialogs are displayed.
For a mobile phone or tablet, Dialogs should be inline.
For desktop, Dialog windows could be used. Also, Dialog information density
(aka. number of Dialog elements) could be adjusted. Compared to the desktop
Dialogs, information density could be low on a mobile phone and medium on
a tablet.
If desired, an application could set the Dialog
vcrule attribute so that it is
notified whenever the screen size or the display orientation has changed, e.g.,
from portrait mode to landscape mode or vice versa.
Please note: The System screenwidth and screenheight
attributes as well as the Dialog vcrule attribute are supported since
Eloquence version B.08.40 2407-1. They are not supported in Eloquence
B.08.30 WEBDLG2.
Furthermore, the application needs to conditionally set or reset the
touch-layout CSS class on the <html> document
element so that the touch-layout.css rules
are conditionally activated or deactivated.
To achieve that, the application does not set the
CssClass application
configuration. Instead it loads a custom JavaScript file:
(function() {
var
brk = 1000,
scr = window.screen,
w = Math.ceil(scr.availWidth),
h = Math.ceil(scr.availHeight),
cl = document.documentElement.classList;
if (w < brk || h < brk) {
if (!cl.contains('touch-layout'))
cl.add('touch-layout');
}
else if (cl.contains('touch-layout'))
cl.remove('touch-layout');
})();
Here, the brk variable is set to 1000 pixels which is the desktop/mobile
breakpoint mentioned above.
To use this, save the code shown above into a text file located in the
directory associated with the /plugin URI, then configure the
application to load the script by setting
PluginURL.
For example, assumed the script file name is touch-layout.js:
PluginURL = /plugin/touch-layout.js
This is equivalent to integrating the touch-layout.css CSS rules
as documented above.
|
