using rsf to develop a sakai tool – lessons learned mark norton, nolaria consulting
TRANSCRIPT
![Page 1: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/1.jpg)
Using RSF to Develop a Sakai Tool – Lessons Learned
Mark Norton,
Nolaria Consulting
![Page 2: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/2.jpg)
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.
![Page 3: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/3.jpg)
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).
![Page 4: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/4.jpg)
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.
![Page 5: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/5.jpg)
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.
![Page 6: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/6.jpg)
Wireframes using OmnigraffleGetting Started Gallery Selection
Thumbnail View Image Sequencing
![Page 7: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/7.jpg)
Iterative Design Refinement
This is the thumbnail view as originally conceived by Seamus. Note that the thumbnails are fixed size. This was rendered as …
![Page 8: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/8.jpg)
Initial Thumbnail Design
Looks good, but ….
![Page 9: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/9.jpg)
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 …
![Page 10: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/10.jpg)
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.
![Page 11: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/11.jpg)
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.
![Page 12: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/12.jpg)
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.
![Page 13: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/13.jpg)
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.
![Page 14: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/14.jpg)
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.
![Page 15: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/15.jpg)
Write the Producers
Rather than relying on the presentation tech engine to build a component tree, RSF requires the developer to create one explicitly.
![Page 16: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/16.jpg)
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.
![Page 17: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/17.jpg)
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.
![Page 18: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/18.jpg)
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.
![Page 19: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/19.jpg)
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.
![Page 20: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/20.jpg)
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.
![Page 21: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/21.jpg)
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.
![Page 22: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/22.jpg)
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.
![Page 23: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/23.jpg)
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.
![Page 24: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/24.jpg)
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.
![Page 25: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/25.jpg)
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.
![Page 26: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/26.jpg)
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.
![Page 27: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/27.jpg)
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.
![Page 28: Using RSF to Develop a Sakai Tool – Lessons Learned Mark Norton, Nolaria Consulting](https://reader036.vdocuments.net/reader036/viewer/2022062806/5697bfdf1a28abf838cb2eca/html5/thumbnails/28.jpg)
Questions?
Mark J.Norton
Senior Consultant
Nolaria Consulting
Bedford, Massachusetts, USA