Home

Webbox Client Documentation

This documentation walks you through setting up a Webbox and a Chrome browser with a set of example Webbox applications ("lenses") and utilities.

Step one: Get the server

The first thing you should do is set up a Webbox server. Follow the instructions here:

https://github.com/danielsmith-eu/webbox/wiki

The rest of this document pertains to the WebBox Client for Chrome, which is currently the only supported client for Webbox. (Pure HTML5 and Safari, Firefox, and IE support are on the roadmap.)

Step two: Set up Webbox for Chrome

Grab it from the repository

1. Clone the webbox client repository, e.g.,

    git clone git://github.com/electronicmax/webbox.git
   

2. Open your Google Chrome or Chromium browser. Go to the Preferences menu, select Extensions.

3. Click "Load Unpacked Extension", and navigate to the directory where you cloned the repository

4. Click on the webbox-chrome folder and click "Choose".

You should notice a small blue box appear in your toolbar this is the Webbox icon.

Set it up

Click on the Webbox icon and click Settings.

In the field marked "Your Webbox", type the URL and port of your WebBox server. For example, if you are merely experimenting with WebBox on your local machine with the default port, type:

   http://localhost:8212/webbox

If you get it correct, the URL should say "Server is up and running". Note: this URL should match the URL in your securestore.cfg, check the Webbox Server set up instructions for more info

Make sure 4store mode is set Off (this is merely for debugging), and hit Save Settings.

Step three: Check out featured Webbox lenses

There are five lenses that are in various stages of development.

Browser

The browser is a view on to your webbox and a quick way to edit, create (coming soon!) and delete entities. Everything and anything in your webbox is shown in the Browser.

Entities are currently organised by their rdf:type. Furthermore, each item can be rendered with a custom lens which controls exactly how it is represented (visually) in the browser. The property webbox:browser can be specified on individual entities or on the corresponding type.

Bookmarking / quick copy context menu

If you select some text on any web site, a context menu item becomes available Save selection on the right click menu. This quickly creates

Similarly, if you right click anywhere on the page you can create a quick Bookmark item in your Webbox.

Note taking tool

The note taking tool allows you to quickly create and search for notes that you have created. These notes become items of rdf:type webbox:Infoscrap and also appear in the Browser lens.

Personal journal

A work in progress, coming soon.

Inbox

A work in progress, coming soon.

Step four: Party - make your own Webbox app!

Webbox Chrome client makes it easy to store and retrieve data from your Webbox. It maps RDF to Backbone.js's Model structure so that readng and writing items to a WebBox becomes as easy as calling .fetch() and .save() on model items.

Let's get started.

1. Create a new Webbox app. Create a new html file under webbox-chrome/ui . Add the following script headers

    <!-- core frameworks --> 
    <script type="text/javascript" src="/lib/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/underscore-min.js"></script>
    <script type="text/javascript" src="/lib/backbone.js"></script>
    
    <!-- add rdfquery dependencies. SO MANY FILES ! -->
    <script type="text/javascript" src="/lib/rdfquery/jquery.uri.js"></script>
    <script type="text/javascript" src="/lib/rdfquery/jquery.xmlns.js"></script>
    <script type="text/javascript" src="/lib/rdfquery/jquery.curie.js"></script>
    <script type="text/javascript" src="/lib/rdfquery/jquery.datatype.js"></script>
    <script type="text/javascript" src="/lib/rdfquery/jquery.rdf.js"></script>
    <script type="text/javascript" src="/lib/rdfquery/jquery.rdfa.js"></script>
    <script type="text/javascript" src="/lib/rdfquery/jquery.rdf.xml.js"></script>
    <script type="text/javascript" src="/lib/rdfquery/jquery.rdf.turtle.js"></script>
    <script type="text/javascript" src="/lib/rdfquery/jquery.rdf.json.js"></script>
    <script type="text/javascript" src="/lib/json.js"></script>
    
    <!-- require.js bootstrapping into our main app -->
    <!-- CHANGE DATA MAIN HERE TO POINT TO YOUR LENS'S JS FILE -->
    <script type="text/javascript" src="/lib/require.js" data-main="/ui/yourapp/example.js"></script>
   

2. Create the yourapp/example.js javascript file (name it whatever you want and change the data-main parameter above). In it, start with a require statement.

     require(['/webbox/webbox-core.js','/webbox/webbox-model.js','/webbox/webbox-ns.js'],
             function(core, models) {
   
   
                // your beautiful code goes here.  this gets
                // called after document is initialized and 
                // dom is initialized too
   
             });
   

3. Now create a new Webbox object by URI. To do this simply use the get_resource() method of model

    var note = models.get_resource('http://foo.bar.com/notes/my_new_note');
    note.fetch().then(function() { /* do something with it */ });;
   

4. Then you can set values on the model ...

    note.set2('rdf:type', m.get_resource('webbox:Note'));
    note.set2('dc:contents', "hello i am a note");
    note.save().then(function() { console.log('done saving'); });
   

5. And read them too:

    var contents = note.get('dc:contents')
   

6. Namespace definitions are bound by webbox-ns; new namespace prefixes can be added using the ns.addPrefix(prefix,baseURI) call.

Questions?

Please send email to our google group and join the discussion!