While several tools for simplifying the task of visualizing (SPARQL accessible) RDF data on the Web are available today, there is a lack of corresponding tools for exploiting standard HTML forms directly for RDF editing. The few related existing systems roughly fall in the categories of (a) applications that are not aimed at being reused as components, (b) form generators, which automatically create forms from a given schema { possibly derived from instance data { or (c) form template processors which create forms from a manually created speci cation. Furthermore, these systems usually come with their own widget library, which can only be extended by wrapping existing widgets. In this paper, we present the AngularJS-based Rdf Edit eXtension (REX) system, which facilitates the enhancement of standard HTML forms as well as many existing AngularJS widgets with RDF editing support by means of a set of HTML attributes. We demonstrate our system though the realization of several usage scenarios.
lution is based on using the popular AngularJS framework2 to de ne a custom set of HTML attributes which add an RDF context to form controls in the DOM-tree. While this approach is similar to RDFa3, there are two fundamental di erences: First, RDFa is intended for static annotation of HTML documents, whereas our annotations are processed by AngularJS and our framework at runtime based on the applications' state. Second, RDFa is aligned with the HTML standard, whereas our approach exploits concepts of AngularJS and builds upon its abstractions, most prominently the one introduced by ngModel 4 Also, a key distinguishing feature that contrasts current related work is, that our system does not introduce a widget framework of its own. Instead, by building on the AngularJS framework and its abstractions, many already available widgets can be re-used directly without the need of wrapping.
Our contributions in this paper are twofold: First, we present
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
solving common problems related to RDF editing.
Our RDF editing system is implemented as a user interface
module as part of our Javascript S uite for S PARQL Access
(Jassa) library [
The structure of this paper is as follows: In Section 2, we introduce our REX approach and discuss its use in several scenarios. A brief outline of use cases is given in Section 3. In Section 4, we review existing approaches to RDF authoring and presentation on the Web and discuss their strengths and weaknesses. Finally, in Section 5 we conclude this paper.
3http://www.w3.org/TR/rdfa-syntax/ 4https://docs.angularjs.org/api/ng/directive/ng Model 5https://github.com/GeoKnow/Jassa-UI-Angular/tree /master/jassa-ui-angular-edit 6http://bower.io/ 7http://js.geoknow.eu/demos/rex/
In this section we, explain our REX annotation system for extending HTML forms with support for RDF editing. We introduce our approach using a simple example, then explain what types of data REX manages and nally we present several patterns for solving common problems. Note, that our annotations can also be used for retrieving data intended for display. However, REX is focused on the support of bidirectional mapping of values between an RDF graph and the model of form controls. Thus, support for arbitrary SPARQL queries and post-processing of result sets, such as chosing the best label in regard to preferences on vocabularies and languages, is not part of the core.
It is important to understand, that AngularJS makes it possible to annotate HTML form controls with ng-model="foo", which declares a JavaScript variable foo as the model of the control. When the user enters input, the model's value is changed accordingly, and when the model changes, AngularJS automatically updates the form control to re ect the new state. Our approach is based on the introduction of a set of annotations which give model values an RDF context. In the subsequent sections we explain the REX attributes.
Consider the example in Listing 1. First of all, the rexcontext is used to activate the REX system on a DOM element and its descendants. The presence of the attribute creates the rexContext object in the corresponding scope, whose purpose is to keep track of (a) RDF values referenced in form controls, (b) initial data for pre lling forms, (c) modi cations to the initial data for computing di s, and (d) the nal RDF data. 1 <div rex-context 2 rex-prefix="dbr: http://dbpedia.org/resource/" 3 rex-subject="dbr:Chemnitz"> 4 <input type="text" 5 ng-model="cityName" 6 rex-predicate="rdfs:label" 7 rex-object rex-type="literal" 8 rex-value="cityName"> 9 </div> Note, that the Talis RDF JSON is used as an intermediate representation. The nal RDF graph, that corresponds to the form state, can be serialized in any RDF syntax, including JSON-LD10.
For convenience, pre xes can be used to abbreviate IRIs. By default, all pre xes of the RDFa initial context11 are readily available. Custom namespaces can be enabled by specifying rex-prefix, where the argument must follow the same syntax as in RDFa12. Also, REX features the short hands rexiri="m" and rex-literal="m", which are expanded to rextype="`uri'", rex-value="m" and rex-type="`literal'" and rex-value="m", respectively.
Whenever multiple attributes occur on the same element, the order of processing depends on their priority value. For details please refer to the documentation on Github. 2.2 Accessing the Data and Modifications The rexContext object is a container for all relevant information about the state of the form and performed modi cations. It provides the following attributes: .base The base RDF graph, in Talis RDF JSON, which holds information about the resources referenced by the form controls. This information is automatically updated accordingly when the set of subject resources and or lookup functions change. .override A (partial) Talis RDF JSON object which holds the state of the data entered into the form and which can be seen to \override" any base data. .graph The RDF graph that holds the e ective set of triples. This is thus obtained by applying the overrides to the base data for all data referenced by coordinates of the form. .di .added and .di .removed RDF graphs13 containing the triples that were added/removed in regard to the base data and referenced coordinates.
/$interpolate 9http://www.w3.org/TR/rdf-json/
Within a rex-context section, the basic annotations are: rex-subject, rex-predicate, and rex-object. While rexsubject and rex-predicate accept strings with markup8 for IRIs as values, rex-object takes an index. The index refers to 1 <pre ng init="rc=rexContext"> the i th RDF term for a given subject and predicate. Inter- 2 ffgraphToTurtle(rc.graph, rexPre xMapping)gg nally, the Talis RDF JSON9 model is used for representing 3 ffcreateInsertRequest(rc. di .added, rexPre xMapping)gg RDF data. Hence, RDF objects comprise four components 4 ffcreateDeleteRequest(rc. di .removed, rexPre xMapping)gg of type string, that can be accessed using the annotations 5 </pre> rex-type, rex-value, rex-lang, and rex-datatype. In addition, rex-deleted can be used to ag an object at a certain index { and thus the corresponding triple { as deleted.
We refer to the combination of a subject IRI, predicate IRI, object index and component name as a coordinate. A coordinate uniquely references a primitive value in an RDF graph.
Listing 2: Example of serializing the current state of the RDF graph as turtle, and creating SPARQL 1.1 Update queries from the di Listing 2 shows how a turtle representation of the current state of the RDF graph and the SPARQL Insert/Delete queries based on the di can be rendered in real-time using AngularJS. The neccessary serialization functions are part of the REX utility belt. 10http://json-ld.org/ 11http://www.w3.org/2011/rdfa-context/rdfa-1.1 12http://www.w3.org/TR/rdfa-syntax/#A-prefix 13http://www.w3.org/TR/rdf-interfaces/ 1 <input type="hidden" 2 ng-if="PointUtils.isWktPoint(wkt)" 3 rex-predicate="geo:long" 4 rex-literal="`' + PointUtils.wktToXy(wkt).x" 5 rex-datatype="`xsd:float'">
Listing 3: Generating triples only for valid WKT strings
Forms can be connected to a SPARQL endpoint using rexsparql-service="sparqlService" and rex-lookup="true". Whenever the value of a rex-subject changes and rexlookup is enabled, a lookup will be performed, and the 1 <ul data is converted to Talis RDF JSON and stored at rex- 2 Context.json. Listing 4 shows an example set up using a utility method from the Jassa library.
There are cases when RDF output should be constructed 1 <div rex-predicate="dbo:birthDate" conditionally based on the form and validation state. For 2 rex-literal="bdateStr" rex-datatype="`xsd:date'"> example, consider a form that allows a user to enter a Well 3 <input type="text" ng-model="bdate" Known Text (WKT) string, and corresponding WGS84 lat/- 4 sync-source="bdate" sync-target="bdateStr" long triples should be generated for valid POINT geometries. 5 sync-to-target="dateToString" One way to accomplish this is using a combination of ng-if 6 sync-to-source="stringToDate" and hidden elds, as shown in Listing 3. 7 datepicker-popup="dd-MMMM-yyyy" 8 datepicker-options="dateOptions"> 9 </div> 1 <script type="text/javascript"> 2 $scope.sparqlService = new jassa.service 3 .SparqlServiceHttp(endpointUrl, defaultGraphIri); 4 } 5 </script> 6 <form 7 rex-context 8 rex-sparql-service="sparqlService" 9 rex-lookup="true" 10 rex-subject="http://dbpdia.org/resource/Leipzig"> 11 <!-- ... further form controls ... --> 12 </form>
Listing 4: Registering a lookup function for pre lling out forms based on subject resources
Sometimes (datatype) conversions are necessary to map values between their representation in a form control and the one in the RDF structure. For example, the model of the date picker of AngularUI Bootstrap14 stores values of type Date. However, its appropriate (lexical) representation as a literal of xsd:date is a string conforming to ISO8601. We solve this problem by introducing a set of sync-* annotations for synchronizing model values, as shown in Listing 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 in the respective direction. Both attributes take a conversion function as an optional argument. If desired, syncing in one of the directions can be enabled/disabled by specifying a condition expression using sync-to-target-cond and/or sync-to-source-cond. 14http://angular-ui.github.io/bootstrap/
Especially with nested forms it is necessary to navigate between sets of related resources. For example, consider an RDF resource that represents the DBpedia dataset, and another set of resources that represent distributions in SPARQL endpoints on the Web. Further, assume that the distributions refer to the dataset of which they are a distribution of.
rex-subject="http://.../dataset/dbpedia" 3 rex-nav-predicate="o:distributionOf" 4 rex-nav-inverse="true" 5 rex-nav-filter-type="iri" 6 rex-nav-values="distIris"> 7 <li 8 ng-repeat="distIri in distIris" 9 rex-subject="{{distIri}}"> 10 <!-- sub-form for each distribution --> 11 </li> 12 </ul>
The variable distIri will be an array containing all distributions that are reachable from the current subject by following the predicate o:distributionOf in inverse direction. The array distIri has special behaviour attached to it: Pushing items to it will implicitly create new triples that connect the given subject with the added URI via the given property.
While it may seem intriguing to make use of the rex-subject annotation for the purpose of renaming resources, this is not directly in the scope of the REX system. REX uses the concept of coordinates to give model values an RDF context. Under this perspective, coordinates are only references used to get and put model values from resp. into an RDF space, i.e. a component of a triple in an RDF graph. But coordinates are distinct from operations to be performed on an RDF graph.
In this section we brie y outline two use cases that we realized with REX and which are part of the online demo. The rst one is the simple generic resource editor depicted in Figure 1. When the user con gures a SPARQL endpoint and enters the URI of a resource to edit, a form is generated by iterating over the corresponding properties and objects of the data in rexContext. This data is automatically loaded using REX's lookup mechanism. For each RDF term, an instance of our rdf-term-input widget is created. This widget is realized as an AngularJS directive whose model represents an RDF term using the attributes de ned by Talis RDF JSON. We also created a geometry-input widget that can two-way data bind on models with WKT strings. Another use case is a simple form for registering datasets together with information about which SPARQL endpoints they are distributed in.
There exist several tools for matching, transforming and
templating RDF data for visual presentation: Fresnel [
A di erent approach is taken by frameworks that feature
RDF widgets: SemWidg [
Semantic Web platforms, such as OntoWiki [
This work was supported by grants from the EU's 7th Framework Programme provided for the GeoKnow project (GA no. 318159).