Skip to content

Configuration versus Injection of Context Information in Rich Internet Applications

by on May 21, 2013

Most modern Rich Internet Applications (RIA) are composed of reusable UI components which are organized in a component hierarchy. The state of a component depends on its place in the hierarchy. So the context of a component has to be propagated down the hierarchy, often passing numerous levels. In a customizable and dynamically pluggable application, it can be a challenge to propagate these values in an equally dynamic way.

Problem

We describe the problem based on a real life product, the CoreMedia Studio. The Studio is a RIA to create and edit content for the CoreMedia CMS. It is a hierarchical and component based application based on Ext JS. Many of the Studio’s components are reusable and they can be used in multiple contexts.  To make the context propagation more challenging, the Studio provides a public API to plug custom components into the component hierarchy at runtime. While this adds a huge amount of flexibility to the application, it makes the context propagation more difficult.

So far context information was wired explicitly between a parent and its child components at compile time. While at first glance this might look like a suitable approach, it comes with two major drawbacks:

  • This approach only works for child components that are known at compile time. Unfortunately, as stated above, it is part of the Studio’s nature to be customized and extended at runtime.
  • When context information has to be propagated over multiple levels in the component hierarchy, each intermediate component has to forward the information to its children explicitly. This produces plenty of boilerplate, error-prone code.

Solution

To address the aforementioned challenges, a solution has to shift the context propagation and wiring from compile time to run time and to pull the implementation out of the component’s code. Both these requirements should sound familiar to a software developer as there is a well known technique to meet them: Inversion of control (IoC).

The idea of our IoC flavour is that some components in the component hierarchy (providers) can provide named context information while others (consumers) can ask to get certain context information injected. A central context manager then uses the component hierarchy to decide at run time which provided values have to be injected into which consumers. While there is no suitable IoC framework out there that is working on a component hierarchy, two ingredients enabled us to write our own framework:

  • The life cycle of Ext JS components is managed by a central registry and we have full access to the component hierarchy.
  • ActionScript which is the source language of the CoreMedia Studio (compiled to JavaScript) supports annotations.

Implementation

The idea of Component IoC is originally caused by the question how the public-API of the content-related actions in CoreMedia Studio should be designed.

Assume that the providedContentProperty is the name of the content context provided by the parent container of a content action. Then the content action class declares now itself as a context consumer using annotation at the setter method of the content property:

[InjectFromExtParent(variable=’providedContentProperty’)]
public function setContents(contents:Array):void {
...
}

The content configuration is no longer passed statically from the container down to the action. Instead the context manager recognizes the provider and consumer of the provided context at run time and establishes a dependency between them.

Conclusion

Component IoC enables us to avoid boilerplate codes and we use the framework to design a clear, dynamic extensions API for content actions.

However it can be used to unwire the static configuration of other Studio components. Maybe this post encourages you to define your own context consumer or even context provider. Let us know.

From → Dev

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s