RDF Editing on the Web
Claus Stadler Natanael Arndt
Department of Computer Department of Computer
Science, University of Leipzig Science, University of Leipzig
cstadler@informatik.uni- arndt@informatik.uni-
leipzig.de leipzig.de
Michael Martin Jens Lehmann
Department of Computer Department of Computer
Science, University of Leipzig Science, University of Leipzig
martin@informatik.uni- lehmann@informatik.uni-
leipzig.de leipzig.de
ABSTRACT lution is based on using the popular AngularJS framework2
While several tools for simplifying the task of visualizing to define a custom set of HTML attributes which add an
(SPARQL accessible) RDF data on the Web are available RDF context to form controls in the DOM-tree. While this
today, there is a lack of corresponding tools for exploiting approach is similar to RDFa3 , there are two fundamental
standard HTML forms directly for RDF editing. The few differences: First, RDFa is intended for static annotation of
related existing systems roughly fall in the categories of (a) HTML documents, whereas our annotations are processed
applications that are not aimed at being reused as compo- by AngularJS and our framework at runtime based on the
nents, (b) form generators, which automatically create forms applications’ state. Second, RDFa is aligned with the HTML
from a given schema – possibly derived from instance data standard, whereas our approach exploits concepts of Angu-
– or (c) form template processors which create forms from a larJS and builds upon its abstractions, most prominently
manually created specification. Furthermore, these systems the one introduced by ngModel 4 Also, a key distinguish-
usually come with their own widget library, which can only ing feature that contrasts current related work is, that our
be extended by wrapping existing widgets. In this paper, we system does not introduce a widget framework of its own.
present the AngularJS-based Rdf Edit eXtension (REX) sys- Instead, by building on the AngularJS framework and its
tem, which facilitates the enhancement of standard HTML abstractions, many already available widgets can be re-used
forms as well as many existing AngularJS widgets with RDF directly without the need of wrapping.
editing support by means of a set of HTML attributes. We
demonstrate our system though the realization of several Our contributions in this paper are twofold: First, we present
usage scenarios. the Rdf Edit eXtension system (REX), which makes HTML
forms RDF-aware using a set of custom HTML attributes.
Second, we devise several usage patterns of our system for
1. INTRODUCTION solving common problems related to RDF editing.
RDF is designed to provide a uniform data model for repre-
senting knowledge across domain boundaries. However, sus- Our RDF editing system is implemented as a user interface
taining this flexibility in the context of RDF editing systems module as part of our Javascript S uite for S PARQL Access
has turned out to be a difficult task. While there are Web (Jassa) library [5]. The module is freely available on Github5
applications for editing RDF data, such as WebProtege1 , and is registered for use as a dependency with the popular
there is a lack of components for the light-weight integra- bower tool6 under the name jassa-ui-angular-edit. Fur-
tion of such capabilities into Web applications. In this pa- ther, demos are available online7 .
per, we present a novel approach to RDF authoring, which,
to the best of our knowledge, delivers unprecedented flexi- The structure of this paper is as follows: In Section 2, we
bility and ease in converting HTML form data to RDF and introduce our REX approach and discuss its use in several
demonstrate its applicability in various use cases. Our so- scenarios. A brief outline of use cases is given in Section 3. In
Section 4, we review existing approaches to RDF authoring
1
http://protegewiki.stanford.edu/wiki/WebProtege and presentation on the Web and discuss their strengths and
weaknesses. Finally, in Section 5 we conclude this paper.
2
https://angularjs.org/
3
http://www.w3.org/TR/rdfa-syntax/
4
https://docs.angularjs.org/api/ng/directive/ng
Model
5
https://github.com/GeoKnow/Jassa-UI-Angular/tree
/master/jassa-ui-angular-edit
6
http://bower.io/
7
http://js.geoknow.eu/demos/rex/
96
2. RDF EDIT EXTENSIONS Note, that the Talis RDF JSON is used as an intermediate
In this section we, explain our REX annotation system for representation. The final RDF graph, that corresponds to
extending HTML forms with support for RDF editing. We the form state, can be serialized in any RDF syntax, includ-
introduce our approach using a simple example, then explain ing JSON-LD10 .
what types of data REX manages and finally we present sev-
eral patterns for solving common problems. Note, that our For convenience, prefixes can be used to abbreviate IRIs. By
annotations can also be used for retrieving data intended default, all prefixes of the RDFa initial context11 are readily
for display. However, REX is focused on the support of bi- available. Custom namespaces can be enabled by specifying
directional mapping of values between an RDF graph and rex-prefix, where the argument must follow the same syn-
the model of form controls. Thus, support for arbitrary tax as in RDFa12 . Also, REX features the short hands rex-
SPARQL queries and post-processing of result sets, such as iri="m" and rex-literal="m", which are expanded to rex-
chosing the best label in regard to preferences on vocabular- type="‘uri’", rex-value="m" and rex-type="‘literal’"
ies and languages, is not part of the core. and rex-value="m", respectively.
It is important to understand, that AngularJS makes it pos- Whenever multiple attributes occur on the same element,
sible to annotate HTML form controls with ng-model="foo", the order of processing depends on their priority value. For
which declares a JavaScript variable foo as the model of the details please refer to the documentation on Github.
control. When the user enters input, the model’s value is
changed accordingly, and when the model changes, Angu- 2.2 Accessing the Data and Modifications
larJS automatically updates the form control to reflect the
The rexContext object is a container for all relevant infor-
new state. Our approach is based on the introduction of a
mation about the state of the form and performed modifi-
set of annotations which give model values an RDF context.
cations. It provides the following attributes:
In the subsequent sections we explain the REX attributes.
2.1 Core HTML Attributes • .base The base RDF graph, in Talis RDF JSON, which
Consider the example in Listing 1. First of all, the rex- holds information about the resources referenced by
context is used to activate the REX system on a DOM the form controls. This information is automatically
element and its descendants. The presence of the attribute updated accordingly when the set of subject resources
creates the rexContext object in the corresponding scope, and or lookup functions change.
whose purpose is to keep track of (a) RDF values referenced
in form controls, (b) initial data for prefilling forms, (c) mod- • .override A (partial) Talis RDF JSON object which
ifications to the initial data for computing diffs, and (d) the holds the state of the data entered into the form and
final RDF data. which can be seen to “override” any base data.
1
to the base data for all data referenced by coordinates
4 base data and referenced coordinates.
9
Listing 1: A minimal REX example Listing 2 shows how a turtle representation of the current
state of the RDF graph and the SPARQL Insert/Delete
queries based on the diff can be rendered in real-time using
Within a rex-context section, the basic annotations are:
AngularJS. The neccessary serialization functions are part
rex-subject, rex-predicate, and rex-object. While rex-
of the REX utility belt.
subject and rex-predicate accept strings with markup8 for
IRIs as values, rex-object takes an index. The index refers to 1
the ith RDF term for a given subject and predicate. Inter- 2 {{graphToTurtle(rc.graph, rexPrefixMapping)}}
nally, the Talis RDF JSON9 model is used for representing 3 {{createInsertRequest(rc. diff .added, rexPrefixMapping)}}
RDF data. Hence, RDF objects comprise four components 4 {{createDeleteRequest(rc. diff .removed, rexPrefixMapping)}}
5
of type string, that can be accessed using the annotations
rex-type, rex-value, rex-lang, and rex-datatype. In ad- Listing 2: Example of serializing the current state of the
dition, rex-deleted can be used to flag an object at a cer- RDF graph as turtle, and creating SPARQL 1.1 Update
tain index – and thus the corresponding triple – as deleted. queries from the diff
We refer to the combination of a subject IRI, predicate IRI,
object index and component name as a coordinate. A coordi-
nate uniquely references a primitive value in an RDF graph. 10
http://json-ld.org/
8 11
https://docs.angularjs.org/api/ng/service http://www.w3.org/2011/rdfa-context/rdfa-1.1
12
/$interpolate http://www.w3.org/TR/rdfa-syntax/#A-prefix
9 13
http://www.w3.org/TR/rdf-json/ http://www.w3.org/TR/rdf-interfaces/
97
2.3 Conditional RDF generation
There are cases when RDF output should be constructed 1
example, consider a form that allows a user to enter a Well 3
1
2 ng-if="PointUtils.isWktPoint(wkt)"
Listing 5: Data binding with conversions
3 rex-predicate="geo:long"
4 rex-literal="‘’ + PointUtils.wktToXy(wkt).x"
5 rex-datatype="‘xsd:float’">
2.6 Navigation and Filtering
Listing 3: Generating triples only for valid WKT strings Especially with nested forms it is necessary to navigate be-
tween sets of related resources. For example, consider an
RDF resource that represents the DBpedia dataset, and an-
other set of resources that represent distributions in SPARQL
2.4 Data Lookups for Prefilling Forms endpoints on the Web. Further, assume that the distribu-
Forms can be connected to a SPARQL endpoint using rex-
tions refer to the dataset of which they are a distribution
sparql-service="sparqlService" and rex-lookup="true".
of.
Whenever the value of a rex-subject changes and rex-
lookup is enabled, a lookup will be performed, and the
1
6 rex-nav-values="distIris">
2 $scope.sparqlService = new jassa.service 7
5 10
6
8 rex-sparql-service="sparqlService"
9 rex-lookup="true"
10 rex-subject="http://dbpdia.org/resource/Leipzig"> The variable distIri will be an array containing all distribu-
11 tions that are reachable from the current subject by follow-
12 ing the predicate o:distributionOf in inverse direction. The
array distIri has special behaviour attached to it: Pushing
Listing 4: Registering a lookup function for prefilling out
items to it will implicitly create new triples that connect the
forms based on subject resources
given subject with the added URI via the given property.
2.7 Renaming resources
2.5 Synchronization with Conversion While it may seem intriguing to make use of the rex-subject
Sometimes (datatype) conversions are necessary to map val- annotation for the purpose of renaming resources, this is not
ues between their representation in a form control and the directly in the scope of the REX system. REX uses the con-
one in the RDF structure. For example, the model of the cept of coordinates to give model values an RDF context.
date picker of AngularUI Bootstrap14 stores values of type Under this perspective, coordinates are only references used
Date. However, its appropriate (lexical) representation as a to get and put model values from resp. into an RDF space,
literal of xsd:date is a string conforming to ISO8601. We i.e. a component of a triple in an RDF graph. But coor-
solve this problem by introducing a set of sync-* anno- dinates are distinct from operations to be performed on an
tations for synchronizing model values, as shown in List- RDF graph.
ing 5. The source and target of a sync are declared using
sync-source, sync-target. With sync-to-target and/or
sync-to-source any changes in the values are propagated 3. USE CASES
in the respective direction. Both attributes take a conver- In this section we briefly outline two use cases that we re-
sion function as an optional argument. If desired, syncing in alized with REX and which are part of the online demo.
one of the directions can be enabled/disabled by specifying The first one is the simple generic resource editor depicted
a condition expression using sync-to-target-cond and/or in Figure 1. When the user configures a SPARQL endpoint
sync-to-source-cond. and enters the URI of a resource to edit, a form is generated
by iterating over the corresponding properties and objects
14
http://angular-ui.github.io/bootstrap/ of the data in rexContext. This data is automatically loaded
98
Figure 1: A generic resource editor realized with REX
using REX’s lookup mechanism. For each RDF term, an in- realize a number of use cases, such as prefilling form fields,
stance of our rdf-term-input widget is created. This widget is conditionally emitting data, converting values between the
realized as an AngularJS directive whose model represents fields and the RDF graph, and creating SPARQL 1.1 Update
an RDF term using the attributes defined by Talis RDF requests for persisting changes. We showed how our sys-
JSON. We also created a geometry-input widget that can tem enables idiomatic re-use of existing widgets, such as the
two-way data bind on models with WKT strings. Another date picker of AngularUI Bootstrap, and our own widgets
use case is a simple form for registering datasets together for editing RDF terms and geometries. Further, investigat-
with information about which SPARQL endpoints they are ing the use of REX for form generation approaches, which
distributed in. could arrange predefined HTML building blocks to create
appropriate forms for RDF resources seems worthwhile. Fi-
4. RELATED WORK nally, there are several possibilities of combining this work
There exist several tools for matching, transforming and
with other efforts, such as the RDF Changeset systems or
templating RDF data for visual presentation: Fresnel [3] was
access control approaches in general.
one of the first approaches in this regard. Sgvizler [4] is
a library that enables one to use SPARQL queries as at- Acknowledgment
tribute values in HTML elements and bind their result sets This work was supported by grants from the EU’s 7th Frame-
to different types of visualizations. Recent approaches in work Programme provided for the GeoKnow project (GA no.
this category are the AngularJS-based RDF Stylesheet Lan- 318159).
guage Transformations [2] and Uduvudu15 .
References
A different approach is taken by frameworks that feature [1] P. Frischmuth et al. OntoWiki—An Authoring, Pub-
RDF widgets: SemWidg [6] is a JavaScript based library lication and Visualization Interface for the Data Web.
that provides a framework and tooling for creating wid- Semantic Web Journal, 2014.
gets, a widget library and a path query language called
SemwidgQL. Vie.js is a JavaScript library for building de- [2] S. Peroni and F. Vitali. Rslt: Rdf stylesheet language
coupled Content Management Systems, and implements a transformations. In Proceedings of the ESWC Developers
bridge between Backbone.js and Semantic Web data. Vie Workshop 2015, CEUR Workshop Proceedings, 2015.
also features a form generation component16 . RDFauthor 17
is a JavaScript library that adds a feature-rich authoring [3] E. Pietriga, C. Bizer, D. Karger, and R. Lee. Fresnel: A
component to either a specified region of a Web page or its browser-independent presentation vocabulary for rdf. In
own window-like overlay. The semantic web-ISWC 2006, pages 158–171. 2006.
[4] M. G. Skjæveland. Sgvizler: A javascript wrapper for
Semantic Web platforms, such as OntoWiki [1], PoolParty 18 easy visualization of sparql result sets. In ESWC (Satel-
and VocBench 19 offer features for many aspects of RDF lite Events), volume 7540 of Lecture Notes in Computer
data management, as for example data aquisition, analysis Science, pages 361–365. Springer, 2012.
and publishing.
[5] C. Stadler, P. Westphal, and J. Lehmann. Jassa - A
5. CONCLUSIONS & FUTURE WORK javascript suite for sparql-based faceted search. In Proc.
In this demo paper, we presented the REX system for creat-
ISWC Developers Workshop 2014, pages 31–36, 2014.
ing highly dynamic HTML forms for RDF data based on the
AngularJS framework. We showed how the system is used to [6] T. Stegemann and J. Ziegler. Semwidgjs: A seman-
15
https://github.com/uduvudu/uduvudu tic widget library for the rapid development of user
16
http://viejs.org/widgets/forms/ interfaces for linked open data. In 44. Jahrestagung
17
https://github.com/AKSW/RDFauthor der Gesellschaft für Informatik, Informatik 2014, Big
18
http://www.poolparty.biz Data - Komplexität meistern, 22.-26. September 2014 in
19
http://vocbench.uniroma2.it/ Stuttgart, Deutschland, pages 479–490, 2014.
99