MicroViews: Mobile Views & Inplace Views

Summary

I realize that it hasn’t been a full week since my last post but I figured I should get back into the habit of posting at the end of each week after my blogging lapse. Also I fancied keeping that old adage of waiting around for one blog post and then two come along at once.

During the latter part of this week I have been finalizing MicroViews on the iPhone and have made a start on the last user visible feature of MicroViews, which I have dubbed Inplace Views. Also in a small case of feature creep I have now added links which support social bookmarking for the linked EPrints.

Mobile Views

The main work done on the iPhone view was to ensure that back functionality was supported. This was achieved by using URL fragments. URL fragments are the part of the url that come after a # symbol. Now when you click on a MicroViews enabled link the URL in the browser will change from http://example.com/article.html to http://example.com/article.html#index=main. This doesn’t force the page to change in the browser but it does make an entry in the browser history. As a result I didn’t have to add a lot of extra JavaScript to support back functionality, instead it is now possible to rely purely on the user pressing the back button as the view behaves as though you are browsing normally though different pages, despite never leaving the original page.

There are 4 separate views on the iPhone version of MicroViews. The first is the abstract view which also contains links for getting to 2 of the other views and a link to the EPrint on the repository. There is a view which lists all of the files attached to the EPrint and another which lists all of the social bookmarking links. Then finally at any point, when viewing the MicroViews page, that you turn the device into a landscape perspective you get the image coverflow generated for the EPrint. The following diagram illustrates the different views;

Also the iPhone view now also supports iPod touches after a few minor changes to the browser detection script.

The next iteration on mobile views will be to bring them to the Android platform. Fortunately this shouldn’t pose too much of a problem as the Android browser is also based on the WebKit rendering engine, which is the same rendering engine as used by Mobile Safari. The only issue which prevents a direct port is the orientation detection. Mobile Safari implements a handler which runs a method when the orientation of the device is changed. On Android the browser is aware of the orientation of the device but not when the orientation changes. Fortunately the jQuery library which I am using for MicroViews implements firing custom events. This means that I can emulate the orientation change detection that is available on Mobile Safari on the Android browser.

Hopefully the only other major work for the Android port will be changing the look and feel of the page to make them seem more like an Android native application.

Inplace Views

Inplace Views were a feature that was suggested at the Developer Hapiness event for the prototype of MicroViews. These are expected to be of real use to lecturers who want to link to EPrint resources on course web pages. They do require a few minor modifications to the web page that is supporting MicroViews but I have aimed to keep these to a minimum.

To produce the following Inplace MicroView;

then I would need to add the following code;

<div class="microviews_inplace">
<a href="http://example.com/123/">Web Conference</a>
</div>

This would work for any number of links inside the div tag. Also the div can be used multiple times around the page. The plan for this view is for it to make full use of the MicroViews data layer so that any client side caching can take place if the same EPrint is referred to in multiple Inplace views and tooltips.