Using RSF to Develop a Sakai Tool – Lessons Learned

Mark Norton,

Nolaria Consulting

The Gallery Project

• Mark Norton was contracted to implement a design for an image sequencing tool (Gallery Tool) in January of 2007.

• The tool was designed by Daphne Ogle and Sean Byrne of UC Berkeley.

• The project was led by Oliver Heyer and Mara Hancock.

Project Goals

• Leverage the Resources tool to allow images to be collected and ordered.

• Create a place for such collections (galleries) to be selected.

• Show the collection as thumbnails• Sequence the images manually and

automatically (with a five second delay).

Development Process

• Basic requirements established in writing before any design work or implementations were done.

• Wireframes developed based on user research at UCB.

• Wireframes converted to RSF templates.• Interative refinement of UI and behavior.• Full code and UI review.

Design Preliminaries

• The Gallery tool was originally conceived as part of the Lila image repository project.

• Extensive user research was conduced by Daphne in 2006.

• This led to a basic understand of what was needed in an image viewer / sequencer.

• Final requirements were negotiated to scope the project.

Wireframes using OmnigraffleGetting Started Gallery Selection

Thumbnail View Image Sequencing

Iterative Design Refinement

This is the thumbnail view as originally conceived by Seamus. Note that the thumbnails are fixed size. This was rendered as …

Initial Thumbnail Design

Looks good, but ….

Reflection on User Needs

• This tool is intended to be used in courses where the images are the central focus of learning.

• As such, they cannot be distorted in any way.

• But the first rendering caused the thumbnails to be rendered using a fixed height and width.

• RSF allows rapid UI design changes …

Resulting Implementation

Thumbnails are now shown in the proper aspect ratios, though this means that some are smaller than others. This was deemed an acceptable trade off.

Building a Sakai Tool with RSF

• RSF was selected as the presentation technology for several reasons:– Faciliated user centric design.– Allowed designers to modify look and content.– Supports rapid response to change – agile!– There was a desire to evalute it as a new

presentation technology for Sakai.

State Transitions

Implementation starts with understanding of how the applciation transitions from one view state to another.

This kind of documentation greatly helps the development process.

Create RSF Templates

The template is an XHTML file that can be previewed with any browser. Only the rsf:id tags make this an RSF template.

RSF Templates

• The simplicity of RSF templates is one of the great features of this approach to presentation technology.

• Besides being able to preview in a browser, it brings the designer directly into the development process.

• HTML wireframes are easy to convert to RSF templates.

Write the Producers

Rather than relying on the presentation tech engine to build a component tree, RSF requires the developer to create one explicitly.

Assembling Component Trees

• Rather than hiding the creating of the component tree from the developers (as JSF does), it is explicitly created in an RSF Producer class implementation.

• This gives a great deal of control over optional content.

• Table elements are generated iteratively.• Strings are externalized using UIMessage,

the MessageLocator, or RSF-EL.

Application Service

• Like all good Sakai tools, the Gallery tool has an application service that defines and implements it’s application logic.

• This helps separate abstract functionality from presentation issues.

• It also allows Gallery tool capability to be integrated with other applications.

• The ContentHosting service is used by this tool in a similar manner.

Learning to use RSF

• RSF is a new presentation technology with a lot of potential.

• There are some basic concepts that need to be mastered.

• After that, implementation choices drive the use if RSF.

UIBranchContainer

• The UIBranchContainer object is used when ever a component in the component tree needs to contain others (sub-nodes).

• Most commonly, this is used when elements are iteratively generated, such as in a table.

• Branch container components are identified by a colon, “:” in the RSF id.

Links and Internal Links

• Links between RSF views is handled by the UIInternalLink object.

• External links and image tags are handled by the UILink object.

• Access to local content in the application is defined in the Maven project file.

Use of UIVerbatim

• The UIVerbatim allows text to be entered directly into the rendering stream.

• This is dangerous if not handled carefully, since it could break the output integrity.

• However, there are times when it is needed.• The Gallery tool has large blocks of text

saved with markup in the Messages.properties file.

Forms in RSF

• RSF tries very hard to simplify creating and handling of forms.

• Both GET and POST form methods are supported.

• Parameters are defined and encapsulated by ViewParameters.

• ViewParameters are powerful and simple to use.

DHTML

• Tag parameters can be set using UIComponent decorators.

• This allows the producer code to set styles (if not defined by the template), handle dynamic actions such as onClick, image sizes, etc.

• Over time, best practices will arise on how best to use the capabilities of RSF to handle dynamic events.

Debugging RSF Code

• One of the great features of RSF is that it always TELLS you what’s going wrong.

• Usually this is done via excepts in catalina.out, but sometimes in the browser display.

• For example, RSF is very strict about the use of XHTML in the templates, but will tell you EXACTLY where it’s broken, if so.

Overall Impressions of RSF

• There is a learning curve associated with any presentation technology and RSF is no exception.

• It is well documented, conceptually simple, and has growing Sakai community support.

• Projects like Gallery and Evaluation will lead to a body of best practices that augment the existing examples.

The Future of Gallery Tool

• The Gallery Tool has been chosen to be a test vehicle for the Fluid project.

• The first Fuid component will be a lightbox image sequence editing gadget that will enable sequences to be defined directlyin the tool.

• Antranig Basman has assumed development of the Gallery tool and new code development.

Recommendations

• Give RSF a try. The examples are easy to follow.

• Training is available from Mark Norton and the Sakai Café project led by Aaron Zeckoski.

• Read the RSF documentation at http://www2.caret.cam.ac.uk/rsfwiki/

• Attend some of the other sessions on RSF at the conference.

Questions?

Mark J.Norton

Senior Consultant

Nolaria Consulting

Markjnorton@earthlink.net

Bedford, Massachusetts, USA