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

If you get it correct, the URL should say "Server is up and running".

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 with code!

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

  <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>
  
  <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>
  <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'],
         function(core, models) {
   
   
        // your beautiful code goes here.  this gets
        // called after document is initialized and 
        // dom is initialized too
   
     });