• Markup-based: adding dojoType properties to HTML elements in the markup
• Programmatic: creating HTML elements in JavaScript

When using a toolkit such as dojo for layout rather than standard CSS, my preference would be to keep the dojo layout stuff entirely in JavaScript, separate from the markup, whilst still using HTML to describe my content. This allows an easy transition to/from dojo and CSS layout techniques, doesn’t clutter the markup with dojo specific stuff that would only be needed when JavaScript is enabled, and just provides a cleaner separation. I was sure this must be possible in dojo and it is; it just doesn’t seem to be well documented anywhere.

After playing for a while (and with quite a bit of help from James), I turned this…

<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
</script>

<div dojoType="dijit.layout.BorderContainer"
  style="width: 100%; height: 100%;">
  <div dojoType="dijit.layout.ContentPane" region="top">
    Top pane
  </div>
  <div dojoType="dijit.layout.AccordionContainer" region="leading">
    <div dojoType="dijit.layout.AccordionPane" title="pane #1">
      accordion pane #1
    </div>
    <div dojoType="dijit.layout.AccordionPane" title="pane #2">
      accordion pane #2
    </div>
    <div dojoType="dijit.layout.AccordionPane" title="pane #3">
      accordion pane #3
    </div>
  </div>
  <div dojoType="dijit.layout.TabContainer" region="center">
    <div dojoType="dijit.layout.ContentPane" title="tab #1">
      tab pane #1
    </div>
    <div dojoType="dijit.layout.ContentPane" title="tab #2">
      tab pane #2
    </div>
    <div dojoType="dijit.layout.ContentPane" title="tab #3">
      tab pane #3
    </div>
  </div>
  <div dojoType="dijit.layout.ContentPane" region="trailing">
    Trailing pane
  </div>
  <div dojoType="dijit.layout.ContentPane" region="bottom">
    Bottom pane
  </div>
</div>

<style type="text/css">
 html, body {
 width: 100%;
 height: 100%;
 margin: 0;
 }
</style>

…into this…

<script type="text/javascript">
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.TabContainer");
  dojo.require("dijit.layout.AccordionContainer");
  dojo.require("dijit.layout.ContentPane");

  dojo.ready(function () {
    var mainContainer = new dijit.layout.BorderContainer(
      {}, 'mainContainer');
    var topPane = new dijit.layout.ContentPane(
      {'region': 'top'}, 'topPane');
    mainContainer.addChild(topPane);
    var leftPane = new dijit.layout.AccordionContainer(
      {'region': 'leading'}, 'leftPane');
    var accordionPane1 = new dijit.layout.AccordionPane(
      {'title': 'pane #1'}, 'accordionPane1');
    var accordionPane2 = new dijit.layout.AccordionPane(
      {'title': 'pane #2'}, 'accordionPane2');
    var accordionPane3 = new dijit.layout.AccordionPane(
      {'title': 'pane #3'}, 'accordionPane3');
    leftPane.addChild(accordionPane1);
    leftPane.addChild(accordionPane2);
    leftPane.addChild(accordionPane3);
    mainContainer.addChild(leftPane);
    var centerPane = new dijit.layout.TabContainer(
      {'region': 'center'}, 'centerPane');
    var tabPane1 = new dijit.layout.AccordionPane(
      {'title': 'tab #1'}, 'tabPane1');
    var tabPane2 = new dijit.layout.AccordionPane(
      {'title': 'tab #2'}, 'tabPane2');
    var tabPane3 = new dijit.layout.AccordionPane(
      {'title': 'tab #3'}, 'tabPane3');
    centerPane.addChild(tabPane1);
    centerPane.addChild(tabPane2);
    centerPane.addChild(tabPane3);
    mainContainer.addChild(centerPane);
    var rightPane = new dijit.layout.ContentPane(
      {'region': 'trailing'}, 'rightPane');
    mainContainer.addChild(rightPane);
    var bottomPane = new dijit.layout.ContentPane(
      {'region': 'bottom'}, 'bottomPane');
    mainContainer.addChild(bottomPane);
    mainContainer.startup();
  });
</script>

<div id="mainContainer">
  <div id="topPane">Top pane</div>
  <div id="leftPane">
    <div id="accordionPane1">accordion pane #1</div>
    <div id="accordionPane2">accordion pane #2</div>
    <div id="accordionPane3">accordion pane #3</div>
  </div>
  <div id="centerPane">
    <div id="tabPane1">tab pane #1</div>
    <div id="tabPane2">tab pane #2</div>
    <div id="tabPane3">tab pane #3</div>
  </div>
  <div id="rightPane">Trailing pane</div>
  <div id="bottomPane">Bottom pane</div>
</div>

<style type="text/css">
  html, body, #mainContainer {
    width: 100%;
    height: 100%;
    margin: 0;
  }
</style>

There’s lots of code but I prefer the separation. In reality I’d move the JavaScript etc into a separate files but it’s easier to demonstrate like this.

A couple of gotchas:

• Adding extra HTML elements dynamically
  Sometimes dojo will require extra divs for layout purposes (for different digit classes, e.g. dijit.layout.BorderContainer). Clearly it would be wrong to modify markup to include extra divs just for this so you’ll probably want to create them programmatically. This is fine, but instead of using addChild to append a child, you’ll need to place the new element in the DOM yourself using dojo.place(myDynamicElement.domNode, myExistingElement.domNode);.
• Specifying the top level widget
  If you use dojo’s markup method (with djConfig="parseOnLoad:true" set or running dojo.parser.parse()), the top level widgets are determined automatically. With this method, we need to manually start it by calling startup() on the top level widget (in our case, the mainContainer element). Otherwise, no layout occurs at all.

I figured that it would be nice to use some of the new features in HTML5/CSS3 to do this so you can just put together a standard HTML page (which is your 2D canvas – not to be confused with the new canvas element!) and have the traversing/zooming/rotating for free. This would also mean no need to require browser plug-ins (e.g. Flash for Prezi). SVG is a nice option but I’m guessing more people have standard HTML skills.

I’ve put together some code (called fivePrez for want of a better name), a rough attempt at doing some of this stuff. Unfortunately it currently only works on Firefox 4 which is still in beta. I haven’t even managed getting it working on Chrome because Webkit seems to do things differently (possibly positioning differences when you’ve scaled an element?). So if you have a version of Firefox 4 running, please try the demo. Otherwise, check out the video below. It’s not the best example but hopefully it gets the point across. Remember, the elements on the canvas are not moving/scaling/rotating into view, the canvas itself is moving so all the elements stay where they are in relation to each other.

Currently fivePrez works simply by including the fivePrez.js JavaScript file (and jQuery) and specifying (using JavaScript) a list of CSS selectors to define the path to traverse (e.g. fivePrez.setPath(['#element1', '#element2']);). Keyboard and mouse controls are option and work by including the appropriate keyboard/mouse script. The keyboard module allows you to traverse the path as follows (which should allow for using a remote clicker):

• Right/Page Down: next
• Left/Page Up: previous
• Up: home (i.e. standard rendering for the page)

The mouse navigation allows you to double-click an element on the path to zoom straight to it.

I’ve also implemented a callback option to allow you to be notified when an item on the path is being moved to / away from as follows:

fivePrez.viewChange(
  function (viewId, viewSelector) {
    // View displayed
  },
  function (viewId, viewSelector) {
    // View hidden
  }));

This is useful for e.g. starting/stopping video as I do in my example.

The code generally works by finding the element using the CSS selector provided in the path, determining the element’s current position, rotation etc and then performing a CSS transform on a parent container (generated by fivePrez) so all elements move with each other and the selected element is moved to the centre of the window and rotated appropriately.

Obviously this is very rough round the edges but interesting for a proof of concept. I might give it a go for my next speaking engagement if I’m confident it’ll do the trick. The main problems at present seem to be to do with editing rather than viewing; ideally it would at least have some user interface controls and the ability to drag around the canvas with the mouse.

Worth noting that Google have put together a nice example using HTML5 as a presentation technology to demonstrate the new standard (and Chrome of course).

First add the PPA. Then edit /etc/apt/preferences.d/ubuntu-mozilla-daily-pin-400 and /var/lib/synaptic/preferences (the latter to ensure ‘Mark all upgrades’ in Synaptic does the same as Update Manager / apt-get) to contain the following:

Package: *
Pin: release o=LP-PPA-ubuntu-mozilla-daily
Pin-Priority: 400


Now the firefox-4.0 and firefox-4.0-gnome-support packages are theoretically ready to be installed. However, I had some installation issues which were solved by created a couple of files:

• /usr/bin/firefox-4.0sudo (link to the executable using ‘ln -s /usr/lib/firefox-4.0b2pre/firefox-4.0 /usr/bin/firefox-4.0‘)
• /usr/lib/firefox-4.0b2pre/firefox-4.0-restart-required.update-notifier (just create an empty file)

Now your Firefox 4 nightly build should be regularly updated and can be run by executing the firefox-4.0 command. Your existing stable Firefox 3 build should be unaffected.

For these reasons and for general flexibility, my current project wanted to be able to easily swap the underlying triple store from ARC to Jena as needed so I needed to investigate how to expose a Jena triple store as a SPARQL endpoint. After working this out, I now really really appreciate how easy ARC makes this.

Jena doesn’t appear to ship with the ability to expose the ARQ SPARQL processor as a SPARQL endpoint and hence you need to make use of a separate piece of software called Joseki. The following is the list of things I needed to do to get this working in my environment. Note that your setup may have different requirements and also I may have completely misunderstood the best way of doing this!

1. Setup a database to use as your triple store and get a JDBC driver so Joseki can interact with it from Java
2. Download and extract Joseki
3. Add the JDBC driver to the Joseki classpath (e.g. for Windows by adding the following line to bin\joseki_path.bat: set CP=%CP%;C:\my_jdbc_driver\my_jdbc_driver.jar)
4. Add the following to joseki-config.ttl:

    <#myProjectUpdate>
      rdf:type            joseki:Service ;
      rdfs:label          "My Project SPARQL/Update" ;
      joseki:serviceRef   "sparql/myproject/update" ;
      joseki:dataset      <#myProject> ;
      joseki:processor    joseki:ProcessorSPARQLUpdate .
   
    <#myProjectRead>
      rdf:type            joseki:Service ;
      rdfs:label          "SPARQL" ;
      joseki:serviceRef   "sparql/myproject/read" ;
      joseki:dataset      <#myProject> ;
      joseki:processor    joseki:ProcessorSPARQL_FixedDS .
   
    <#myProject>
      rdf:type            ja:RDFDataset ;
      rdfs:label          "My Project" ;
      ja:defaultGraph     <#myProjectDB> .
   
    <#myProjectDB>
      rdf:type            ja:RDBModel ;
      ja:connection       [
                            ja:dbType "MySQL" ;
                            ja:dbURL           ;
                            ja:dbUser         "myproject-database-username" ;
                            ja:dbPassword     "myproject-database-password" ;
                            ja:dbClass        "com.mysql.jdbc.Driver"
                           ] ;
      ja:reificationMode    ja:minimal ;
      ja:modelName        "DEFAULT" .
       

5. Set the JOSEKIROOT environment variable to the location you extracted Joskei
6. Run Joseki (from it’s directory) by executing bin/rdfserver.bat

Note that I wanted to be able to make use of SPARUL to update data using the SPARQL endpoint. In ARC I can use SPARQL+ (which is effectively the same for my purposes) on the same endpoint as normal SPARQL queries. For Joseki however, I needed to expose two different endpoints, one for standard SPARQL queries and one for updating.

The one thing I haven’t yet worked out how to do it to be able to use named graphs in my Jena triple store when inserting data. I discovered that the SPARUL update specification requires you to create the graph first (unlike ARC’s SPARQL+) but executing e.g. CREATE GRAPH <http://mygraph/> seems to fail silently as any following INSERT INTO <http://mygraph/> statement fails saying that the graph doesn’t exist. Something to keep investigating. It may be something to do with support for the different types of Jena store (RDB, SDB, TDB, etc) which I don’t fully understand yet (I think my instructions above are using RDB which appears to be old but I couldn’t get TDB or SDB working at all).

So all in all I’m pleased to have worked out how to set this up but I will most certainly continue to use ARC where possible as Jena environments seem unnecessarily complex (although this might simply be because it tends to support the W3 specifications fully!).

This is pretty easy using the Ubuntu restricted drivers tools: Ubuntu Menu -> System -> Hardware Drivers (in the 2nd box of applications). Note that you’ll need an Internet connection to actually install this so hopefully you can make use of a wired connection temporarily! When I initially installed this driver there were actually two to choose from but it was the Broadcom STA driver that worked. Now I only see a single option available.

Creating the indicator
The class used to represent an indicator appears to have changed from IndicatorMessage to Indicator so I threw in the following code to try the new one and fallback to the old one:

try:
  # Ubuntu 9.10 and above
  indicator = indicate.Indicator()
except:
  # Ubuntu 9.04
  indicator = indicate.IndicatorMessage()

Drawing attention
Previously, indicators automatically made the indicator applet draw your attention with a green dot. In Karmic the green dot appears to have been replaced with a change of the envelope colour to black but it is no longer automatic. To make this work you need to set the draw-attention property:

indicator.set_property('draw-attention', 'true');

Note that they’ve also added a count property to display how many notifications are from the same source.

Recently I wanted to build a .deb package for an internal IBM application I was writing so that users could easily install it and also so we could distribute them through some internal repositories. This proved a bit harder than I expected so this is a quick summary of how I ended up doing it. Note that your requirements might be entirely different!

The first thing to do is to create the files required by the packaging process. I discovered that the dh_make command can create a load of sample files that can be used as part of this process. To do this, create a directory in the format [package-name]-[version] (e.g. my-great-app-1.0) and run dh_make from within it (I specified ‘s’ for single binary when prompted). This will create a load of sample files in a ‘debian’ subdirectory. Delete any of these you don’t need (which is probably most of them); I kept the following:

• changelog – change history for all versions of the app (keep to the format specified by the Debian Policy Manual)
• compat – no idea why I needed this but things don’t work properly later if I don’t
• control – the details of the package you are creating (see the specification for all configuration options)
• dirs – the list of directories in which your app will install files (e.g. /usr/bin, /usr/share/pyshared/my-great-app, /usr/share/applications)
• README.Debian – the README for your app
• rules – a MakeFile with instructions for how to create the package (for my Python app the important bit here was in the ‘install’ section; here I created a $(CURDIR)/debian/my-great-app subdirectory and copied all files into it as if it were /, e.g. binary to $(CURDIR)/debian/my-great-app/usr/bin/my-great-app)

Once I’d created all those files and put them in my-great-app/packaging/debian and my source in my-great-app/src I created a simple build script my-great-app/bin/build. This looked something like the following:


#!/bin/bash

cd ../build
sudo rm -rf my-great-app*
mkdir -p my-great-app-$VERSION
cp -u ../src/*.py ../src/*.desktop ../src/*.ico ../packaging/my-great-app my-great-app-$VERSION
tar -czf my-great-app-$VERSION.orig.tar.gz my-great-app-$VERSION/
cd my-great-app-$VERSION
mkdir debian
cp -u ../../packaging/debian/* debian/
gksu dpkg-buildpackage


This should create you a my-great-app_1.0-1_all.deb and the my-great-app_1.0-1_i386.changes, my-great-app_1.0-1.dsc and my-great-app_1.0-1.tar.gz files your repository maintainer might want.

A really useful video I found for helping me fill in the contents of the debian control files (and getting me through the whole process) was here. Definitely worth checking out if you need to do this yourself.

This is quite a long article and you might only be interested in some of it so here are the sections:

• Getting access to request data
• Returning appropriate responses
• Handling different data formats
• Passing all requests to a single PHP script
• Determining the full requested URL
• A generic REST Service class

If you have an suggestions for improvement, please let me know – this was a first attempt!

Some credit for this article should go to lornajane for her PHP REST Server articles (Part 1, Part 2, Part 3) which I used as a good starting point.

Getting access to request data

Getting access to HTTP GET arguments or POST data is well known and easy. With a REST interface you are likely to support other HTTP verbs such as PUT and DELETE. Getting data from these requests is not obvious but luckily lornajane had worked this out for me:

parse_str(file_get_contents('php://input'), $arguments);


Returning appropriate responses

With REST you should really make use of the HTTP Status Codes for all requests (rather that using 200 OK for everything). In PHP, this can be done with the header function in a couple of ways:

// When setting just the status code
header('HTTP/1.1 405 Method Not Allowed');
// When you're setting another header at the same time
header('Allow: GET, HEAD, POST, DELETE', true, 405);


I haven’t found a way of sending just the status code number (e.g. 405) without specifying the exact text (‘Method Not Allowed’) but these are part of a fixed specification so it’s not a huge problem.

The following is a list of status codes that I’ve used and why:

• 200 OK: successful request when data is returned
• 201 Created: Successful request when something is created at another URL (specified by the value returned in the Location header)
• 204 No Content: Successful request when no data is returned
• 400 Bad Request: Incorrect parameters specified on request
• 404 Not Found: No resource at the specified URL
• 405 Method Not Allowed: when a client makes a request using an HTTP verb not supported at the requested URL (supported verbs are returned in the Allow header)
• 406 Not Acceptable: Requested data format not supported
• 500 Internal Server Error: An unexpected error occurred
• 501 Not Implemented: when a client makes a request using an unknown HTTP verb

Handling different data formats

As URLs are supposed to represent resources in REST, it is a feasible requirement that client applications would like to receive responses from the same URL in different formats. Clients can specify the data formats they are capable of understanding using the HTTP Accept header. In Javacript this can be set using the setRequestHeader method on the XMLHttpRequest object. Using jQuery as my current Javascript library of choice, the code for doing this is as follows:

$.ajax({
  type: method, // GET, POST, PUT, DELETE etc.
  url: url, // The actual URL to make the request
  data: data, // Any data/parameters to send to the server
  beforeSend: function(xmlHttpRequest) {
    xmlHttpRequest.setRequestHeader('Accept', format); // MIME Type
  }
});


This then needs to be handled by the server. In PHP this data can be retrieved using $_SERVER['HTTP_ACCEPT']. I also found a handy library for parsing this header according to the specification (not trivial), cleverly named ‘HTTP_ACCEPT‘. I then wanted a way of knowing the most appropriate format from a list of formats I would support so I threw the following code together:

$accept = new HTTP_Accept($_SERVER['HTTP_ACCEPT']);
foreach ($supportedFormats as $supportedFormat) {
  $supportedFormatQuality = $accept->getQuality($supportedFormat);
  if ((!isset($bestFormat) && $supportedFormatQuality > 0) ||
       $bestQuality < $supportedFormatQuality) {
    $bestFormat = $supportedFormat;
    $bestQuality = $supportedFormatQuality;
  }
}


The server also needs to specify the type of content it is returning; this can be done using the Content-Type header as follows:

header("Content-Type: $format");


Passing all requests to a single PHP script

I needed all requests with a certain URL prefix to be handled by a single script. This was easily solved using the following URL re-writing rule in a .htaccess file:

Options +FollowSymLinks
RewriteEngine on
RewriteRule ^.*$ index.php


Note that I had to enable the mod_rewrite module in Apache and ensure that directives could be overridden with the following:

<Directory /var/www/>
  AllowOverride All
</Directory>


Determining the full requested URL

Another requirement of my application complicated by URL rewriting was that I needed access to the full URL. I achieved this with the following bit of code:

$protocol = $_SERVER['HTTPS'] == 'on' ? 'https' : 'http';
$location = $_SERVER['REQUEST_URI'];
if ($_SERVER['QUERY_STRING']) {
  $location = substr($location, 0, strrpos($location, $_SERVER['QUERY_STRING']) - 1);
}
$url = $protocol.'://'.$_SERVER['HTTP_HOST'].$location;


A generic REST Service class

To allow me to reuse some of the REST code I'd created, I put it into a generic REST Service class which I subclassed and replaced different methods for different means:

class RestService {

  private $supportedMethods;

  public function __construct($supportedMethods) {
    $this->supportedMethods = $supportedMethods;
  }

  public function handleRawRequest($_SERVER, $_GET, $_POST) {
    $url = $this->getFullUrl($_SERVER);
    $method = $_SERVER['REQUEST_METHOD'];
    switch ($method) {
      case 'GET':
      case 'HEAD':
        $arguments = $_GET;
        break;
      case 'POST':
        $arguments = $_POST;
        break;
      case 'PUT':
      case 'DELETE':
        parse_str(file_get_contents('php://input'), $arguments);
        break;
    }
    $accept = $_SERVER['HTTP_ACCEPT'];
    $this->handleRequest($url, $method, $arguments, $accept);
  }

  protected function getFullUrl($_SERVER) {
    $protocol = $_SERVER['HTTPS'] == 'on' ? 'https' : 'http';
    $location = $_SERVER['REQUEST_URI'];
    if ($_SERVER['QUERY_STRING']) {
      $location = substr($location, 0, strrpos($location, $_SERVER['QUERY_STRING']) - 1);
    }
    return $protocol.'://'.$_SERVER['HTTP_HOST'].$location;
  }

  public function handleRequest($url, $method, $arguments, $accept) {
    switch($method) {
      case 'GET':
        $this->performGet($url, $arguments, $accept);
        break;
      case 'HEAD':
        $this->performHead($url, $arguments, $accept);
        break;
      case 'POST':
        $this->performPost($url, $arguments, $accept);
        break;
      case 'PUT':
        $this->performPut($url, $arguments, $accept);
        break;
      case 'DELETE':
        $this->performDelete($url, $arguments, $accept);
        break;
      default:
        /* 501 (Not Implemented) for any unknown methods */
        header('Allow: ' . $this->supportedMethods, true, 501);
    }
  }

  protected function methodNotAllowedResponse() {
    /* 405 (Method Not Allowed) */
    header('Allow: ' . $this->supportedMethods, true, 405);
  }

  public function performGet($url, $arguments, $accept) {
    $this->methodNotAllowedResponse();
  }

  public function performHead($url, $arguments, $accept) {
    $this->methodNotAllowedResponse();
  }

  public function performPost($url, $arguments, $accept) {
    $this->methodNotAllowedResponse();
  }

  public function performPut($url, $arguments, $accept) {
    $this->methodNotAllowedResponse();
  }

  public function performDelete($url, $arguments, $accept) {
    $this->methodNotAllowedResponse();
  }

}


# convert to pdf
unoconv -f pdf myfile1.odt myfile2.odt ...
# merge pdfs
pdftk myfile1.pdf myfile2.pdf ...
# remove individual pdf documents
rm myfile1.pdf myfile2.pdf ...


A handy little hack to generate my entire portfolio.