uPortal Javascript Framework Use Cases
Portlet Overview
The news reader portlet collects recent news stories from multiple sources for a given user. Â These sources are typically RSS feeds, and feeds may be distributed by user role.
The current user interface has two main subcomponents. Â The first provides a list feeds, with some way to choose between them, while the second displays stories associated with the chose feed. Â Eventually a third subcomponent might display the content of the story itself, which might be an article, a video, or some other resource.
Desktop Views
In the desktop interface, each subcomponent can be displayed in multiple ways. Â The feed list can be either a set of tabs or a select menu, and story descriptions may be displayed either as flyouts or paragraphs. Â The default choice for these views is set by an administrator but can be overridden by end users, and each of the four possible combinations is valid.
 Â
Mobile Views
The mobile client displays all feeds in a list, then displays stories in a list.
Implementation Notes
This portlet provides a representative example of the flexibility requirements of uPortal. Â A single javascript file provides resources common to all display styles shown above. Â This shared script is paired with inline template scripts defining template markup and post-render hooks. Â These post-render hooks are used to perform important tasks like initializing the flyouts or calling jQuery Mobile's initialization task.
Current implementation files (based on Backbone.js):
- Desktop JSP:Â https://github.com/Jasig/NewsReaderPortlet/blob/master/src/main/webapp/WEB-INF/jsp/viewNews.jsp
- Mobile JSP:Â https://github.com/Jasig/NewsReaderPortlet/blob/master/src/main/webapp/WEB-INF/jsp/viewNews-jQM.jsp
- Shared JavaScript file:Â https://github.com/Jasig/NewsReaderPortlet/blob/master/src/main/webapp/scripts/news.js
Â
Â