Google Web Toolkit VIE Wrapper

OpenCms from Alkacon Software is a professional content management system that helps content managers worldwide to create and maintain websites fast and efficiently.

Interactive Knowledge Stack (IKS) is an EU funded project bringing semantic technologies (capabilities) to CMS systems. Alkacon Software is an industrial partner in the IKS project.

IKS now provides the Vienna IKS Editables (VIE), a JavaScript based software component to semantically enhance and edit web pages inline through annotations. IKS also provides Apache Stanbol, a reusable set of software components that are meant to be accessed over RESTful interfaces to provide semantic services for content management. Both the VIE and Stanbol components have been developed as part of the IKS project over the last 2 years and are now close a release version.

By adopting the IKS software stack, Alkacon will try to reach the following goals for OpenCms:

  1. Allow the generation of semantically annotated content for search engine optimization (SEO).
  2. Enhance the advanced direct edit mode of OpenCms with inline-editing capabilities using VIE.
  3. Support for semantic content enrichment, using VIE as frontend and Stanbol as backend.

A GWT wrapper around the VIE JavaScript library:

For client side programming, the Google Web Toolkit (GWT) is used in OpenCms to provide content managers with a modern and easy to use web 2.0 user interface. In order to minimize development time, code maintaining costs and also to increase code transparency, Alkacon wants to stay with GWT and Java technology. Therefore Alkacon wants to avoid writing native JavaScript code that is part of the OpenCms core system. To make use of the VIE capabilities inside OpenCms, it is our goal to create a GWT wrapper around the VIE JavaScript library. This is a common approach to provide access to feature-rich native JavaScript widget libraries in GWT, for example used for projects like “Ext GWT”, “Smart GWT” and others.

Implementation design for the VIE wrapper:

Alkacon aims to develop a VIE-GWT wrapper that is independent from OpenCms and enables a Java / GWT developer to make full use of the VIE capabilities without knowledge about the JavaScript internals of VIE. In general there are a number of possible approaches when creating a wrapper for an existing JavaScript API using the GWT: JavaScript Native Interface (JSNI), JavaScriptObject overlays, JavaScript InterOp library, GWT Linker extensions, GWT Generators and maybe more. In the first prototype of the wrapper implementation – that is already available on GitHub – we use the JavaScript Native Interface approach. In the upcoming month Alkacon will evaluate if there are useful alternatives out there.

RDFa as precondition to use VIE:

To use the power of VIE with OpenCms the delivered content has to be RDFa annotated, so Alkacon needs to get RDFa support for OpenCms. Therefore the possible approaches are:

  • Replace relational DB with Triple-Store.
  • Use Apache Stanbol to perform a semantic lifting of content.
  • Insert RDFa annotations directly in the rendering process of templates.
  • Maybe there are more possibilities to get RDFa.

Alkacon aims to develop API-tools for the template developer that enables him to create RDFa annotations for his content without technical knowledge about semantic details like ontology, vocabulary, RDF, …

Steps to be performed by the template developer:

A mapping from the XSD-Content-Definition to RDFa has to be done inside the <app:info>-node of the XSD, that could look like:

<semantics typeof="" about="{id|url}">
<semantic element="Title" mapto="name" />
<semantic element="EventDates/EventStartDate" mapto="startDate" />
<semantic element="EventDates/EventEndDate" mapto="endDate" />
<semantic element="Paragraph" mapto="description" />

Inside the JSP that renders a specific content the template developer has to declare the section that should be RDFa annotated that could look like:

<cms:semantic type="RDFa">

Communication between VIE and the CMS:

VIE enables the developer to determine, access, manipulate and save entities found in some RDFa annotated document. To interact with the found entities VIE has a service orientated architecture that allows to implement CMS specific functionality. Moreover backbone.js is used as Model View Controller pattern to manage the entities inside the browsers memory. The event mechanism of backbone triggers amongst others the execution of the sync function. This sync function must be overridden to call a service that sends an RPC-request to OpenCms that will internally save the manipulated content in the repository. In the GWT VIE wrapper, this will be done in an interface that can be implemented for other CMS systems according to their requirements.

Example for a save action executed by a content manager:

  • The click on save triggers the sync-function of backbone
  • Override this sync-function and call the save-function of a service
  • Implement the save-function (saveable) in a VIE-service (e.g. RPC-Service)

The data that will be shared between the client and the server could be the entities themselves (maybe as JSON what is supported by VIE right now). To meet the OpenCms repository requirements, an entity send to the server must have a unique identifier that points to the according content. Identifiers supported by VIE are:

Furthermore the entity attributes have to be mapped to the fields of an OpenCms XML-Content. For this we use the mapping inside the XSD-Content-Definition explained above.

VIE Widgets:

The content manipulation (inline-editing) itself is done by widgets. Those widgets use an instance of VIE for working on the found entities. The support of full inline-editing capabilities within OpenCms requires a lot of “editable widgets” that are not in the list of available IKS-VIE widgets right now. A shorted list of those “editable widgets” is available on the IKS Wiki. Potentially here is an intersection between CMS providers in general. We are going to evaluate how it will be possible to develop generic VIE widgets using GWT that can be used independent of the server technology.

Related links:

One Comment