Browse Prior Art Database

Wrapper Widget for the Migration to Mashups

IP.com Disclosure Number: IPCOM000178121D
Original Publication Date: 2009-Jan-16
Included in the Prior Art Database: 2009-Jan-16
Document File: 3 page(s) / 32K

Publishing Venue

IBM

Abstract

This article introduces a Web user interface development mechanism and its implementation to make legacy code work in Mashup composite applications.

This text was extracted from a PDF file.
This is the abbreviated version, containing approximately 56% of the total text.

Page 1 of 3

Wrapper Widget for the Migration to Mashups

Disclosed are a Web user interface development mechanism and its implementation to make legacy code work in Mashup composite applications and stage the migration in both development and production.

A sophisticated Web user interface often consists of a set of related components. The components are managed by a UI framework and cooperate with each other to support all the user interactions needed by an application. As an application evolves, new components can be created and incorporated into its user interfaces while old components may need upgrade. During the development phrase, the UI components and the UI framework may stay on different code levels. For example, some existing components rely on a particular version of a JavaScript library while new components are built on new libraries. The framework, new and legacy components need to interact, but they cannot be loaded into one browser due to the code level difference caused problems such as JavaScript function name confliction, DOM object name/ID confliction, and inter-component communication protocol incompatibilities. It is very difficult to develop new components and/or migrate legacy components in parallel. The scenario is illustrated below in Figure 1.

Events

Dojo 0.90

Enabler

Component

Com

p

onent

Component

Component

Mashu

p

Manages

Legacy JSP

Dojo 0.43 No namespace in

ID/Names

Assemble pre- built

com

p

onents

Global data Information shared among com

p

Events

onents

Access global data

SVG Viewer

Figure 1. UI components at different code levels

To cope with the difficulties, we implemented a light-weighted wrapper widget that loads UI components into separate IFrames. Individual components are isolated; the name/ID/function

1

Page 2 of 3

conflictions are eliminated. The wrapper widget also serves as a proxy for individual components to communicate with other parts of the UI. It relays events from outside to the wrapped component and posts events on behalf of it. The wrapper widget also provides a means for components to share globally available data, such as system and UI state, and provides global logging to facilitate debugging. Figure 2 shows the basic structure of this implementation.

Figure 2. UI component in wrapper widgets

The UI component wrapper is implemented as a JavaScript class. It manages the life cycle (loading, initialization, working, and cleanup) of the wrapped component. The wrapper handles both JavaScript UI...