The SWP Application Component Library (SWA)

There are many different technologies for building HTML user interfaces based on semantic web models. TopQuadrant's SPARQL Web Pages (SWP) is aimed at a maximum of integration between RDF/OWL models and their visual representation. Not only can RDF resources and classes be linked to their most suitable renderings, but even the visual components themselves can be shared as linked data, taking the vision of model-driven development to the next stage. SWP is Linked Data taken to extremes.

SWP makes it easy to encapsulate HTML snippets into reusable components. The resulting components can be embedded into other HTML snippets as new XML/HTML tags. This makes it easier for web or RDF developers to reuse work prepared by others. Instead of reinventing the wheel, groups of developers across the web can share the same URIs for reusable components, and linked data principles can be used to discover and integrate them. Instead of hard-coding an application's behavior, this mechanism supports a new generation of web front ends that have a small, generic core architecture that is ready to work with any type of data, while specific types of behavior are brought in from web ontologies and their associated SWP triples.

The SWP Application Component Library (SWA) is the result of our (ongoing) work on defining a set of reusable components that lower the bar for developers who want to build user interfaces that are driven by semantic web models. It contains easy to use elements for building rich Ajax-based components including forms, trees, grids and more. The goal of this blog entry is to encourage you to take a look at the documentation of SWA which is built into TopBraid Composer ME 3.6.1 (or above) and accessible from the menu Help > SWA Help/Examples. Alternatively, start TBC-ME, open a browser and navigate to http://localhost:8083/tbl/swp?_viewClass=swadoc:Index. The help page of SWA is written in SWP itself and contains fully operational examples. Some highlights of these examples are illustrated below.

Starting with a simple example that shows a tree alongside a form, you can see how easy it is to use the SWA components.

If you need a tree, just insert a <swa:Tree> element. If you need to react on a click on a tree node, use arg:onSelect="(javascript)". Dynamic behavior can be achieved by reloading a section of your page, such as the form above. The whole library is based on jQuery and its UI widgets, but provides a convenience layer around it that makes interaction with RDF through SPARQL quite easy.

The next example shows how form layouts can be defined. There are default forms for all resources but these basically list all properties from top to bottom. If you want to customize this, you can use the <swa:Objects> tag. All you need to specify is the property that you want to be displayed:

A feature of SWA forms is that they can be used in different modes: in View mode, the UI will select pure display widgets such as labels and images. In Search mode the form will provide input fields for value ranges etc. In Edit mode the form will consist of editing elements such as text boxes and date widgets. All of those widgets are selected in a completely model-driven way based on information from the RDF models. This also makes it possible to define custom widgets for data and object types from your specific application or domain.

The Search form can easily be linked up with a table/grid viewer that displays the matching resources.

Another little widget is the swa:AutoComplete component that supports type-ahead data entry driven by the labels of instances of a given class.

The SWA library is still under active development. Its evolution is currently driven by the upcoming release of Enterprise Vocabulary Net with a pure HTML-based user interface. However, I believe the interface of most SWA components is sufficiently stable now so that interested users may want to play around with it. At the time of writing this blog entry, editing support is unfinished for the general use outside of EVN, but pure viewer applications for data browsing should work fine. We certainly appreciate feedback.