wiki:UsingNepomukEditor

Nepomuk Thing Editor

Using the Nepomuk Thing Editor you can describe things with a text (Wiki) and with attributes. You can also create relations to other things and follow them.

Editing the Wiki-Text of a thing

Press the "Edit page"-Button to change the text.

Add attributes

A thing can have properties describing it, such as its name. Based on the special types of things (Locations, Organizations, Tasks, Meetings, People), different attributes are available. For a Meeting, a possible attribute is its date and time, or for a task, the priority.

Attributes are edited by

  • open the thing in the Nepomuk Editor
  • on the right side you can see the existing attributes or empty fields for common attributes.
  • to edit existing properties change the text and press save.
  • you can also add new text in an empty field. For example the empty field labeled "fullName" can have a value in the textbox right to it.
  • with the button "more properties" (below the existing properties) you can add more properties to the thing, for example the "fax number" for a contact entry. Valid properties appear in a list below the "more properties" button, you can search fore more properties (that have not been used on this kind of thing before) using the search field (a text box). The selected property will be editable below the existing properties, above the "more properties" button.
  • to remove values press the "remove" button which is located right of the value.
  • some properties describe relationships between things. When editing one of them you will see textboxes for possible things to relate.

There are other operations you can do with the thing

  • delete it
  • merge it (you have to do that, when you have created the same thing twice)
  • you can also create new properties, for this a new window will open to enter the facts about the property.

Embedding the Editor Tutorial

The Nepomuk PIMO Editor is a reusable JSP component that can be deployed in other Java Web-applications as well. It is based on JSP, Servlets, DWR for complex AJAX communication, DOJO for complex client-side interaction.

To embed the PIMO Editor into an application (such as Kaukoluwiki), the following steps need to be taken: TODO: read up how to use Beans in Web.xml files to register singleton objects for the whole "web application context", so that servlet and jsp can connect to it.

  • Configuration and bootstrapping is done by the WebquireModel Javabean, which is registered at the web.xml. You have to implement the WebquireModel interface, using the WebquireModelDefault implementation as basis. Properties to set at the WebquireModel are:
    • absolute URI of web-application where Webquire runs. (http://example.com/webquire/wiki)
    • URI of the DWR endpoint to be embedded into the HTML output.
    • URI of DOJO to be embedded in the HTML output.
    • URI of the JSP page of "WebquireRenderer" for including it using forwarding.
    • method for browsing to resources by URI (implement getBrowsePageFor(String resourceURI)). This method is used by the jsp to get links to browse related objects.
    • implement getNepomukServices() bootstrapping a connection to the Nepomuk infrastructure
    • etc.
  • Add the WebquireController Servlet to your web.xml file.
  • Add the webquirerenderer.jsp to your web-application, preferably into WEB-INF/webquire directory.
  • Add DWR support (todo), registering the !WebquireDWRBean as an interface object

Then, when the servlet, jsp, and DWR are connected to NepomukServices and configured using WequireModel, the servlet can be embedded into any other page by including it.

public static void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  // output your normal page here.
  // then forward to webquire
  RequestDispatcher rd = getServletContext().getRequestDispatcher("/webquire/WebquireController");
  // set parameters
  req.setAttribute("webquireparams", new WebquireParams("http://example.com/theUriToEditAtThisPoint"));  
  rd.include(req, resp);
  // output the rest of the page.
}

Architecture

The Editor is based on Hyena from Axel Rauschmayer. Further information about Hyena can be found here.

Source Code

The code is stored in a branch from Kaukolu: source code

Using with Nepomuk

There are several to use Hyena effective with Nepomuk. Hyena add his own statements (hypergraphs) in the ModelSet. These statements have nothing to do with Nepomuk. We considered copying all data from nepomuk into the in-memory Hyena ModelSet, but that would not work as nepomuk can grow up to 1 mio triples and the synchronization is not trivial. We also consiered buffering the hyena statements (fresnel lenses) in-memory on the hyena side, using the pimo ClientSession object, which would not support sparql queries. Also, buffering would hinder the reuse of fresnel lenses in other applications than Hyena. Leo favors putting the lenses in the rdfrepository so that other applications can also access them, for example when both kaukoluwiki run with hyena and an eclipse-based swt hyena.

Todo List

  • look at http://www.freebase.com and peek into their Javascript application using firebug. find Out:
    • how they represent their data in the HTML output (how do they reference to URIs, how the data structures are in the html)
      • They use a big JavaScript array:
        <script type="text/javascript">var TOPIC_DATA = {
         "\/freebase\/user_profile\/biography": [],
         "\/freebase\/user_profile\/my_full_name": [
         {
         "index": 0,
         "type": "\/type\/text",
         "value": "Martin Klinkigt"
         }
         ],
         "\/freebase\/user_profile\/watched_discussions_show_empty": [],
         "\/freebase\/user_profile\/favorite_films": [],
         "\/freebase\/user_profile\/personal_quote": [],
         "\/common\/topic\/article": [],
         "\/freebase\/user_profile\/person": [],
         "\/freebase\/user_profile\/hometown": [],
         "\/freebase\/user_profile\/watched_items": [],
         "\/common\/topic\/image": [],
         "\/freebase\/user_profile\/picture_s": [],
         "\/freebase\/user_profile\/location": [],
         "\/type\/object\/timestamp": [
         {
         "type": "\/type\/datetime",
         "value": "2007-11-14T13:18:04.0004Z"
         }
         ],
         "id": "\/user\/klinkigt",
         "\/freebase\/user_profile\/favorite_topics": [],
         ...
        
    • what framework or Javascript library they use to parse the html and interpret the data structures (= who reads properties like "conceptguid", "propertyname", which are embedded in the MediatorCollection Divs, etc)
    • how they connect to the server using ajax and mqlwrite - what are the parameters sent and received to the mqlwrite api -> this is our WebquireDWRBean
      • data is transferd this way
        queries	{"q":{"query":{"/common/topic/alias":[{"connect":"insert","index":0,"lang":"/lang/en","type":"/type/text","value":"klinki"}],"id":"/user/klinkigt"}}
        
    • same with autocomplete. (this then maps to pimoquery)
      • one big url in which they pack everything like this one for Dresden
  • Extend the HTML mockup from above with your new knowledge, making it have buttons that indicate functionalities to
    • search for existing things to add as value to a property
    • create a new thing to add as value to a property
    • remove a value from a property
    • add a new property
    • show/hide empty properties
  • Extend the HTML mockup with a list of all components the gui contains, for each component we need exactly to know: every data it displays (even to the level of "ok" on a button), all actions that are possible. somehow like this:
    • Resource label: shows label of resource
    • Type editor: show/add/remove types
    • one Property: contains property label and values
    • property label: shows label, option to add new values..
    • property values: shows all values of property, option to ....
    • one value: shows one value, option to browse to it, remove it....
    • popup related search: edit field with search-text, shows search results after ajax call.
  • Analyze what backend service functions are needed to implement the frontend. These methods end up in the single !WebquireDWRBean.

Components

OneValue

It only displays the label of one value o of a resource s. On the left side of the value is a little icon. With a click on it, a menu is overlayed over the site. In this menu different actions are possible:

  • Edit: The value is transformed in an editing field which takes the place of the original value. In this editing windows you can change the text. It depends an the type of the property what happends next:
    • objectproperty: In this case the autocompletation feature is activ. It displays possible objects which matches the so far entered text in a Machting Window. This objects are displayed in a windows below the editing field. With a click on one object the text in the editing field will be completed and the Matching Window disappears. When the user change the value in the editing field again, a new Matching Window shows the matching objects. Rest of the description see Editing Window.
    • literalproperty: In this case no special feature is activ.

When the changes are done, you can click the save button to submit the changes. With a click on the cancel button none of the changes were stored.

  • Remove: removes this one value and deletes the correspondent triple out of the store.

PropertyValues

Contains all values x from the triple (s,p,x) s is the actual resource and p is one fixed property from this resource.

PropertyLabel

It displays the label of one property which is possible for this resource. If there is a object which stands in relation with this resource over this property a Property Values is shown. If there is no such object the text "empty property" is shown. On the left side of this label one little icon is shown. a menu is overlayed over the site. In this menu different actions are possible:

  • Add: one new editing field appears below the already displayed values of this property. In this field you can enter text. Depending on the type of the property, different things can happen:
    • objectproperty: In this case the autocompletation feature is activ. It displays possible objects which matches the so far entered text in a Machting Window. This objects are displayed in a windows below the editing field. With a click on one object the text in the editing field will be completed and the Matching Window disappears. When the user change the value in the editing field again, a new Matching Window shows the matching objects. Rest of the description see Editing Window.
    • literalproperty: In this case no special feature is activ.

When the changes are done, you can click the save button to submit the changes. With a click on the cancel button none of the changes were stored.

  • Remove All: This removes all triples (s,p,x) from the store for this resource s and property p. A new window is overlayed in which the user must confirm the deletion.

OneProperty

Contains everything of one property of one resource.

PropertyList

Contains all property of one resource. The boxes within are One Property.

ResourceLabel

Displayes the label of this resource. With a click on it, the label changes in a editing field with the text of the label in it. Rest of the description see Editing Window.

TypeEditor

The Type Editor is only the text "is a". With a click on it, a menu is displayed which allows the following actions:

  • Add: one new editing field appears below the already displayed types of the resource. In this field you can enter text. The autocompletiong function is activ. A window with possible matches appears below the editing field. When there are two or more types which share the same Label the user must choose the needed type from the matching list. Rest of the description see Editing Window.

TypeList

The types ware displayed at the right from the Resource Label. This box contains all acutal types of the resource. Every type is in a "One Type" box.

OneType

Displayes only one type of the resource. On the left there is a little icon. With a click on it a menu is displayed. Here you can choose different actions:

  • Edit: the type is transformed in a editing windows appears below all "Type List". In this field you can enter text. Again the autocomplete function is activ and shows possible matches in a windows below the editing field. When there a two of more possible types which share the same label, the user must choose the needed type from the list. The Matching Window disappears. Rest of the description see Editing Window.
    • Exception: the property already exists in the Property List. In this case the property is not added again to the list. A window will show up and says the user that this property already exists.
  • Remove: the resource isn't this type anymore.

EditingWindow

The Editing window has a field, a save and a cancel button. You can type text in the editing field. The editing field either edits a object property (selecting a resource using search, or creating a new one) or a literal property (showing a text field). When the object of an edited statement is set, the save button is active. With a click on canel the editing field disappears and nothing is changed at the resource. With a click on save (when this is possible) the changes will be submited.

MatchingWindow

The mathing window appears every time if the autocompletion function is active. It show possible matches for the text which is entered in the editing field. Is show some information to clearly identify different matches which share the same label, because the label mustn't be unique. With a click on one possible match, the complete label is entered in the editing field and the Matching Window disappears.

ResourceMenu

On the right side there is a. With a click on it, a menu is displayed with the following actions are possible for this resource:

  • Add: a new editing windows appears below all "one properties" at the and of the "Property list". In this field you can enter text. Again the autocomplete function is activ and shows possible matches in a windows below the editing field. When there a two of more possible property which share the same label, the user must choose the needed property from the list. The Matching Window disappears. Rest of the description see Editing Window.
    • Exception: the property already exists in the Property List. In this case the property is not added again to the list. A window will show up and says the user that this property already exists.
  • Remove: removes the hole resource from the store.

ResourceHeader

Contains all elements from the header, which are: ResourceLabel, TypeEditor, TypeList, ResourceMenu.

Template

The code from an example.

<html>
<head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Resource Editor</title>


<style type="text/css">
box { border-width: 1px;
border-style: solid;
border-color: black;
}

div#ResourceEditor{width:300px;margin:0 auto}
div#ResourceHeader{float:left;width:100%}
div#ResourceLabel{float:left;width:110px;}
div#TypeEditor{float:left;width:30px;}
div#TypeList{float:left;width:100px;}
div#OneType{float:left;margin-left:3px;}
div#ResourceMenu{float:right;width:50px;}
div#PropertyList{float:left;width:100%;}
div#OneProperty{float:left;width:100%;}
div#PropertyLabel{float:left;width:100px;}
div#PropertyValues{float:left;width:200px;}
div#OneValue{float:left;width:100%}

</style>
</head>
<body>

<br>

<div class="box" id="ResourceEditor">
  <div class="box" id="ResourceHeader">
    <div class="box" id="ResourceLabel">Claudia Stern</div>
    <div class="box" id="TypeEditor">is a</div>
    <div class="box" id="TypeList">
      <div class="box" id="OneType">X Person</div>
      <div class="box" id="OneType">X Agent</div>
      <div class="box" id="OneType">X Thing</div>
    </div>
    <div class="box" id="ResourceMenu">X Menu</div>
  </div>

  <div class="box" id="PropertyList">

   <div class="box" id="OneProperty">
    <div class="box" id="PropertyLabel">X First Name</div>
    <div class="box" id="PropertyValues">
      <div class="box" id="OneValue">X Claudia</div>
    </div>
   </div>

   <div class="box" id="OneProperty">
    <div class="box" id="PropertyLabel">X Last Name</div>
    <div class="box" id="PropertyValues">
      <div class="box" id="OneValue">X Stern</div>
    </div>
   </div>

   <div class="box" id="OneProperty">
    <div class="box" id="PropertyLabel">X attends</div>
    <div class="box" id="PropertyValues">
      <div class="box" id="OneValue">X Belfast Meeting</div>
      <div class="box" id="OneValue">X Claudia Stern</div>
    </div>
   </div>

   <div class="box" id="OneProperty">
    <div class="box" id="PropertyLabel">X hasLocation</div>
    <div class="box" id="PropertyValues">
      <div class="box" id="OneValue">X Belfast</div>
    </div>
   </div>

  </div>

</div>

</body>
</html>

Related Work

Last modified 15 years ago Last modified on 11/27/07 13:39:52