Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: for the plan.

Jump to: navigation, search

Scout/Concepts/Device Transformation

Wiki Home

One essential part of the scout mobile support is the capability to transform the client model based on the used device. Transformation means, the existing client model gets modified so that the application can be displayed on smaller screens, in an appropriate way.

Essential Components

Responsible for this transformation is a so called device transformer (IDeviceTransformer), which knows several strategies (IDeviceTransformation) to optimize the model. One example for such a strategy is to move the label from left to top of the field. That allows the field to grab more space in the width, which is essential for slim screens.

Not all of the available stratagies are necessary for every device type. The priorly mentioned "Move label to top" strategy for example is not necessary, if the width of the screen is big enough, so that strategy doesn't need to be applied. These rules, which strategies should be used, are defined in a device transformation configuration (DeviceTransformationConfig). At the moment, such a configuration exists for tablet and mobile devices.

The activation of the device transformation can be done by using a service (IDeviceTransformationService). Typically, you don't have to use this service directly, instead you would rather register an extension to your desktop (DeviceTransformationDesktopExtension) which takes care of activating the transformer to the right point in time.

Example: transformation for mobile

Here some screenshot from an application rendered as Swing application (with Rayo look and feel) and as mobile application. It shows how the Fields are transformed for mobile.

A form containing a SmartField:

Swing Mobile
Scout smartfield desktop.png Scout smartfield mobile.png

A form containing a Table:

Swing Mobile
Scout table desktop.png Scout table mobile.png

Transformation of the Menus contained in a Table:

Swing Mobile
Scout table action desktop.png Scout table action mobile.png

Transforming the Desktop

Beside rather simple transformations like reorganizing the fields and theirs labels, the device transformer is also able to reorganize the whole desktop. This means the following: If you have an outline based application, you probably have a tree on the left side and a table right to the tree. This application layout works well on big screens, on smaller ones and especially on touch screens it just doesn't feel right. To optimize the layout, the device transformer removes the tree and just displays the table. Like in a regular, unmodified outline based application, the child nodes can be shown by selecting a table row. Only difference: Instead of a double click only a single click (or actually touch) is necessary.

Tablet Layout

If there is enough space, like on tablet devices, the device transformer creates a two sided layout. On the left side there is the table mentioned above. The right side is used to show details about the selected row on the left side. As you probably already know, the tree nodes represent pages, either node or table pages. So what you actually get with the two sided layout is a display of two pages at the same time.

Displaying a page means showing the detail form of the page and its child pages.

Imaging you have a person table page with person node pages as childs. The person table page is displayed on the left side showing all rows (persons) of the table. Selecting a row shows the corresponding person node page on the right side. The right side now shows the detail form of the person node page (if there is none it automatically creates one) and also shows its child pages. If such a child page gets selected the page on the left side gets replaced with the newly selected page.

This is the most common benaviour. However, there are more. To understand how it works, 3 rules are important to know.

  1. The right side displays the child page of the selected page on the left side.
  2. If a child page of the right page gets selected, the right page should move to the left, if possible (shifting).
  3. Table rows of table pages are not allowed to be shown on the right side, because doing a search is only possible at the left side.

These three rules have the following implications:

  1. If the left page is a node page and the selected child page too, the child page will be displayed on the right side.
  2. If the left page is a node page and the selected child a table page, the table page will be shown at the left side.
  3. If the left page is a table page and the selected child page a node page, the node page will be shown on the right side.
  4. If the left page is a table page and the selected child page too, the child page will be shown on the right side BUT without the actual table rows. Instead a placeholder child page is created.
  5. If the right page is a node page and the selected child too, the page can be moved to the left and the child will be displayed on the right side.
  6. If the right page is a node page and the selected child a table page, the table page will be shown on the left side.

Back to the top