The following sections gives an introduction to the layouting tool.

 

Interactive applications that are deployed to smart environments must be able to support different context-of-use scenarios. Such scenarios include e.g. adapting the user interface seamlessly to various interaction devices or  distributing the user interface to a set of devices that the user feels comfortable with in a specific situation. Such adaptations require flexible and robust (re-) layouting mechanisms of the user interface and need to consider the underlying  tasks and concepts of the application to generate a consistent layout presentation for all states and distributions of the user interface. The broad range of possible user interface distributions and the diversity of available interaction devices make a complete specification of each potential context-of-use scenario during the application design impossible. Specifying the interdependencies between the user interface components using constraints is a common approach to address these issues and nowadays constraint solvers can calculate hundreds of constraints in a reasonable amount of time. To our knowledge there is still an approach missing that supports designers of a user interface in generating these constraints based on the design specifications. A manual constraint setup has two disadvantages: first the pure amount of constraints that is required even to address small interactive systems is hard to handle, and second, the fault tolerance of the constraint setup is complex to attain. Even one single constraint that is not properly specified can destroy the complete layout in a specific situation that has not been considered by the designer during the development process. Therefore we introduce an approach for a model-based user interface layouting that differs from previous approaches in two general aspects:

1. We interpret the information from already existing user interface design models, such as the task tree, the dialog model, the abstract user interface model (AUI), the concrete user interface model (CUI), the domain model and the context model for deriving the user interface layout. Therefore we propose an interactive, tool-supported process that reduces the amount of information that needs to be specified for the layout. The tool enables designers to comfortably define design model interpretations by specifying statements and subsequently applying them to all screens of the user interface.
2. We shift the decision about which of the statements are applied from  design-time to run-time to enable flexible context-of-use adaptations of  the user interface layout. This allows us to describe new context-of-use adaptations of the layout without the need to change the application itself just by describing the layout characteristics of a new platform or a new user profile.

The "Layouting Tool" helps to define a interface structure and to describe the relationship between the elements of the interface. Based on the ConcurrentTaskTree you are free to change the structure and to define relationships between the elements. At the end define the size and add statements for situations.

The video (sorry no sound...) shows an exemplary layout model design using the MASP layout editor, that we did for the cooking assistant case study. In the video we show first the final  recipe search screen after we successfully added a layout model to the application. Then we present the overall task model that the cooking assistant is based on and that we use as one source to derive the layout model. Thereafter we demonstrate how to define layout statements and how the boxed-based preview of the layout changes based on these statements. Finally we add image previews for individual boxes of the preview window to demonstrate how the final screen will look like. 

To try out the MASP Layouting Tool please download the Installer JAR file linked in the section below and execute it with a double-click or by executing the following command:

java -jar <Installer JAR path>

The MASP Layouting Tool requires Java Runtime Environment 1.6 and can be started by using one of the two start scripts ("StartDemocase.bat" or "StartDemocase.sh") depending whether you ar on linux or windows. The MASP Layouting Tool can be used under the restrictions of the GPL Version 3 Licence.

To get started please try out to follow the MASP Tutorial, which includes a section that describes how to design a basic layout model with the help of the layouting editor.

Please check out our publications section as well, there you can find a paper about model-based layouting, which presents more detailed concepts and further information about our approach.

This JAR file is executable and starts an installer that will guide you through the installation process. The MASP Layouting Tool can be used under the restrictions of the GPL Version 3 Licence.

MASPLayoutingToolInstaller191208.jar