Page History

Project

DSpace ClientUI built on RESTful API

Student

Vibhaj Rajan

Mentors

• Bojan Suzic (lead) 
• Mark Diggory

Technologies

DSpace REST
JavaScript jQuery FireSpark

Proposal

Melange

Repository

https://github.com/tr4n2uil/restclient

Demo

http://107.20.35.121:8080/restclient/

Presentation

DSpace REST ClientUI

Notes

jQuery
DSpace deployment on Amazon EC2

DSpace REST

Built on the DSpace REST API developed as GSoC project in 2009-10
https://wiki.duraspace.org/display/DSPACE/REST+API

FireSpark

Interface powered by FireSpark - JavaScript Service Computing Platform - which is an experimental platform currently
under my research.
https://github.com/tr4n2uil/firespark

RESTClient Extensions

Services and Workflows built for RESTClient using FireSpark for providing core UI functionality while interfacing the
RESTful API
https://github.com/tr4n2uil/restclient

jQuery Templates

Client side processing supported by flexible templates written in JavaScript thereby enabling easier evolution of the UI
http://api.jquery.com/category/plugins/templates/

CKEditor

HTML Rich Text Editor supported for easier text input during repository manipulation
http://ckeditor.com/

index.html

initialization page for loading all necessary client scripts + basic document layout

README

ui/

top level folder containing interface resources

ui/css/

styles and themes directory
default theme is redmond
other themes provided are smoothness and ui-lightness
more themes may be downloaded from http://jqueryui.com/themeroller/

ui/css/default.css

global styles

ui/css/jquery.css

jquery styles

ui/css/restclient-styles.css

RESTClient styles unified from dev/
see dev/ structure description for information on unification during build

ui/img/

images directory

ui/js/

scripts directory

ui/js/jquery-1.6.1.min.js

jQuery

ui/js/jquery-ui-1.8.13.min.js

jQuery UI

ui/js/jquery.tmpl.min.js

jQuery Templates

ui/js/jquery-firespark.js

jQuery FireSpark

ui/js/ckeditor

CKEditor directory

ui/js/restclient-jquery.js

RESTClient Extensions unified from dev/

ui/js/restclient-templates.js

RESTClient Templates unified from dev/

dev/

top level folder containing developer resources

dev/styles/

individual styles directory
files will be unified to ui/css/restclient-styles.css during build

• home.css
• layout.css
• all-communities.css
• all-collections.css
• all-items.css
• all-users.css
• all-groups.css
• all-stats.css
• community.css
• collection.css
• item.css
• user.css

dev/templates/

individual templatesdirectory
files will be unified to ui/js/restclient-templates.js during build

• Account.js
• Browse.js
• Login.js
• AllCommunities.js
• AllCollections.js
• AllItems.js
• AllUsers.js
• AllGroups.js
• AllStats.js
• Community.js
• Collection.js
• Item.js
• User.js
• Group.js
• CommunityEdit.js
• CollectionEdit.js
• CommunityDelete.js

dev/build.bat (build.sh for linux)

Build script for unification
Unification is the merging of individual files to single file for client use

dev/init.js

RESTClient initialization
It will be unified to ui/js/restclient-jquery.js during build

dev/helpers/

individual helpers directory
files will be unified to ui/js/restclient-jquery.js during build

• GetDate.js
• ReadFileSize.js

dev/services/

individual services directory
files will be unified to ui/js/restclient-jquery.js during build

• Resource.RESTURL.service.js
• Session.RESTURL.service.js
• Session.Write.service.js

dev/workflows/

individual workflows directory
files will be unified to ui/js/restclient-jquery.js during build

• Session.Begin.workflow.js
• Session.End.workflow.js
• Resource.Load.workflow.js
• Resource.Edit.workflow.js
• Resource.Delete.workflow.js

Stylesheets (CSS)

Yes

Individual stylesheets in dev/styles/ control the styles for different pages
Additionally, ui/css/default.css is the global style sheet
(Note : Individual stylesheets override global styles)

Layout

Yes

Layout is configured in dev/styles/layout.css
Currently jQuery UI Tabpanel (which is the container supported in FireSpark) is used for viewing different
pages as it provides faster navigation (without breadcrumbs) although simple layout is also possible.
(Containers may be developed/changed easily though it shall require understanding of FireSpark whose documentation will be
completed by the end of the 2011)
Other UI containers are under development in FireSpark.

Themes

Yes

Themes are supported natively by jQuery UI
Themes may be downloaded from http://jqueryui.com/themeroller

Internationalization

No

Support for i18n is planned to be integrated into FireSpark soon using the i18n plugin
This will allow easy internationalization for RESTClient

SessionWrite

Saves session information (email/password) for use in further requests

• form : string : Selector for login form : optional default false

None

ResourceRESTURL

Generates REST URL from resource information

• rsrctype : string : Resource type : values ('allcommunities', 'community', 'community-edit', 'community-delete', 'community-change', 'allcollections', 'collection', 'collection-edit', 'collection-delete', 'collection-change', 'allitems', 'item', 'item-edit', 'item-delete', 'item-change', 'allusers', 'user', 'allgroups', 'group', 'allstats')
• rsrcid : number : Resource ID : optional default false
• rsrcfield : string : Resource Field : optional default false
• rsrcvalue : string : Resource Value : optional default false
• end : boolean : Should '.json' be appended to URL formed : optional default false

• url : string : Resource URL generated

SessionRESTURL

Appends Session information (email/password) to URL

• url : string : Resource URL

• url : string : Resource URL with session appended

SessionBegin

Stores login information into session, authenticates and loads account template

• cntr : string : Container selector for account panel : optional default '#account-panel'
• sel : string : Selector for login form : optional default '#login-container'

None

SessionEnd

Deletes session and loads account template

• cntr : string : Container selector for account panel : optional default '#account-panel'
• sel : string : Selector for login form : optional default '#login-container'
• data : object : Indicate whether to show invalid message : optional default { invalid : false }

None

ResourceLoad

Loads resource using GET and applies template into selected element

• type : string : Resource Type : values (refer ResourceRESTURL service rsrctype values)
• tabui : string : Saved reference index for Tabpanel : optional default 'tabuipanel'
• title : string : Tab Title : optional default 'DSpace RESTUI'
• id : number : Resource ID : optional default false
• ld : string : HTML Loading content : optional default RESTClient.jquery.constant.loadmsg
• anm : string : Animation Type : optional default 'fadein' : values ('fadein', 'fadeout', 'slidein', 'slideout')
• dur : number : Animation Duration : optional default 100
• dly : number : Animation Delay : optional default 0

None

ResourceEdit

Edits resource fields using PUT

• type : string : Resource Type : values (refer ResourceRESTURL service rsrctype values)
• id : number : Resource ID : optional default false
• field : string : Resource Field
• sel : string : Selector for element where response is to be loaded
• cf : boolean : Confirm edit : optional default false
• cfmsg : string : Confirmation Message : optional default 'Are you sure you want to continue ?'
• ld : string : HTML Loading content : optional default RESTClient.jquery.constant.loadmsg
• anm : string : Animation Type : optional default 'fadein' : values ('fadein', 'fadeout', 'slidein', 'slideout')
• dur : number : Animation Duration : optional default 100
• dly : number : Animation Delay : optional default 0

None

ResourceDelete

Deletes resource fields using DELETE

• type : string : Resource Type : values (refer ResourceRESTURL service rsrctype values)
• id : number : Resource ID : optional default false
• field : string : Resource Field : optional default false
• sel : string : Selector for element where response is to be loaded
• cf : boolean : Confirm edit : optional default false
• cfmsg : string : Confirmation Message : optional default 'Are you sure you want to continue ?'
• ld : string : HTML Loading content : optional default RESTClient.jquery.constant.loadmsg
• anm : string : Animation Type : optional default 'fadein' : values ('fadein', 'fadeout', 'slidein', 'slideout')
• dur : number : Animation Duration : optional default 100
• dly : number : Animation Delay : optional default 0

None

getDate

Returns timestamp as properly formatted date string

time : number : Timestamp

date : string : Formatted Date

readFileSize

Returns size in bytes as properly formatted string

size : number : Size in bytes

size : string : Formatted Size

RESTClient.urls

URLs to be used

{
    base : '/dspace/',
    allcommunities : 'communities',
    community : 'communities/',
    allcollections : 'collections',
    collection : 'collections/',
    allitems : 'items',
    item : 'items/',
    bitstream : 'bitstream/',
    receive : 'receive',
    allusers : 'users',
    user : 'users/',
    allgroups : 'groups',
    group : 'groups/',
    allstats : 'stats'
};

RESTClient.jquery.constant.loadmsg

HTML content to show while loading content

'<p class="loading">Loading ...</p>'

RESTClient.jquery.constant.successimg

HTML content to indicate successful execution

'<img src="ui/img/icons/ok.gif">'

RESTClient.jquery.constant.errorimg

HTML content to indicate erroneous execution

'<img src="ui/img/icons/error.gif">'

FireSpark

No

Partially available in the heavily commented source code
https://github.com/tr4n2uil/firespark

jQuery Templates

Yes

Available as jQuery plugin API documentation
http://api.jquery.com/category/plugins/templates/template-tags/

Ready

Base done, Improvement phase

In Progress