Engineering the Presentation Layer of Adaptable Web

Information Systems

Zoltán Fiala1, Flavius Frasincar2, Michael Hinz1, Geert-Jan Houben2, Peter Barna2,

Klaus Meissner1

1Technische Universität Dresden 2Technische Universiteit Eindhoven

{zoltan.fiala, mh5, kmeiss}@inf.tu-dresden.de

{flaviusf, houben, pbarna}@win.tue.nlICWE 2004, July 28-30 2004, Munich

ICWE2004, July 28-30 2004, Munich2/17

Structure

Motivation Hera Design Methodology Presentation Layer

– Adaptation in the PL AMACONT

– Component-based Document Format– Layout Manager

Realizing the Hera PL with AMACONT Conclusion and Future Work

ICWE2004, July 28-30 2004, Munich3/17

Motivation Adaptive Web Information Systems

– Dynamic publication of up-to-date information, adapted to both user preferences and client platforms

– Complex development process -> Need for systematic design methodologies

» Specify hypermedia applications in an appropriate level of abstraction

» Help designers and programmers to proceed in a structured way

Hera– Model-driven design methodology

» Conceptual, navigational, and presentation design– Uses Semantic Web technologies (RDF/RDFS) for explicit

model semantics – Identifies adaptation hot spots in each design model– Previously:

» Missing formalization of the presentation model» Adaptation not implemented in the presentation layer

ICWE2004, July 28-30 2004, Munich4/17

Motivation AMACONT project

– Component-based Development of Adaptive Web Presentations– Composition of adaptive Web applications by the aggregation and

linkage of reusable document components– Special focus on adaptive presentation layer: layout managers – Previously:

» No focus on design process» Missing high-level specifications

Hera-AMACONT cooperation– Combination of Hera’s modeling power with AMACONT’s flexible

adaptive presentation layer– Adoption of AMACONT’s layout managers to the Hera PM– Benefits:

» Automatic translation of Hera models to an AMACONT implementation» Versatile implementation (presentation) layer for Hera » Complete specification framework with automatic presentation

generation

ICWE2004, July 28-30 2004, Munich5/17

Hera- Conceptual Design

Conceptual Model (CM)– Represents the application domain

by concepts and concept attributes– Based on RDFS

Media Model– Submodel of CM– Hierarchically composed of

media types– Adapting media quality by

conditional inclusion ofmedia variants

ICWE2004, July 28-30 2004, Munich6/17

Hera - Application Design Application Model

– Logical, structural and navigational aspects

– Grouping concept attributes to Slices

– Slice: meaningful presentation unit of some media items

– Adaptation Design:» Assigning appearance conditions to slice references

ICWE2004, July 28-30 2004, Munich7/17

Presentation Design

Presentation Design– Important aspect of hypermedia modeling – Declares the „look and feel” of a Web

application independent from its implementation

– Utilizes abstract user interface elements for layout composition

– Adaptation required to» Users‘ layout preferences» Presentation capabilities of client devices» System environment

ICWE2004, July 28-30 2004, Munich8/17

Presentation Layer Adaptation Media adaptation to

technical system parameters – Bandwidth, display

resolution, color depth– Providing quality

alternatives of selected media elements

Corporate Design– Look-and-feel: background

colors, fonts, icons etc.– Users’ layout preferences

and visual impairments– External parameters:

seasons, anniversaries

ICWE2004, July 28-30 2004, Munich9/17

Presentation Layer Adaptation Spatial and temporal adjustment of layout

elements– Reorganization

» Adapting the arrangement of layout elements– Excluding

» Information being unsuitable for a particular browser» Design elements without specific semantic meaning

– Separation» Putting certain content pages to separate pages» Dynamic generation of links to those pages

Dynamic Adaptation– According to users’ changing browsing behavior

» Dynamical browser window resizing– Environmental events:

» bandwidth fluctuation

ICWE2004, July 28-30 2004, Munich10/17

AMACONT

Component-based Web Application Development

ICWE2004, July 28-30 2004, Munich12/17

AMACONT

Adaptive Layout– Layout Managers : XML-based abstract layout descriptions– Inspired by Java– Describe the spatial arrangement of immediate

subcomponents

– OverlayLayout– BoxLayout– BorderLayout– GridLayout

– XSLT Transformers» xHTML» cHTML» WML

ICWE2004, July 28-30 2004, Munich13/17

Layout Manager ExampleLayout attributes

Subcomponent attributes

ICWE2004, July 28-30 2004, Munich14/17

Hera - Presentation Model Analogies between Hera slices

and components:– Meaningful presentation units

bearing some semantic role– Both top-level slices and top-

level document components correspond to pages shown on the user’s display

– Contain adaptation issues

Presentation Model (PM)– Adopting AMACONT’s layout

managers– Assigning layout managers to

Hera Slices– Formalization in RDF(S)– Result: Automatic mapping to

an AMACONT implementation

ICWE2004, July 28-30 2004, Munich15/17

Data Transformation Process

ICWE2004, July 28-30 2004, Munich16/17

Data Transformation ProcessApplication Model Instance Unfolding

Transforming AM Instances to AMACONT components

Adding layout managers to components according to Hera PM

Transforming components to different output formats

ICWE2004, July 28-30 2004, Munich17/17

Prototype: Component-based WIS

ICWE2004, July 28-30 2004, Munich18/17

Conclusion and Future Work Conclusion

– Aspects of presentation layer adaptation in WIS design– Adoption of AMACONT’s layout managers to the Hera

design framework– Formalization of Hera’s Presentation Model– Integrated framework

» Automatic Mapping of high-level specifications to a component-based implementation

Future Work

– Dynamic coupling of AMACONT and Hera– Feedback mechanisms for dynamically reacting on user

input– Acquirement and evaluation of user interactions – Utilizing AMACONT components in all Hera layers– Realizing dynamic adaptation (adaptivity) in the joint

system

ICWE2004, July 28-30 2004, Munich19/17

Layout Editor