Rich Portlet Development in uPortal

Rich Portlet
Development

Jennifer Bourey
Jasig Spring Conference, March 9, 2010

© Copyright Unicon, Inc., 2006. This work is the intellectual property of Unicon, Inc. Permission is granted for this material to be shared for non-
commercial, educational purposes, provided that this copyright statement appears on the reproduced materials and notice is given that the copying is
by permission of Unicon, Inc. To disseminate otherwise or to republish requires written permission from Unicon, Inc.

Portlet Development Goals

• Make
– life easier
– development faster
– portlets shinier

Create an Accessible 2-Column Layout

Using the Fluid Skinning System
<div class="fl-col-flex2">


<div class="fl-col">

<h1>I'm the left column!</h1>

</div>


<div class="fl-col">

<h1>I'm the right column!</h1>

</div>

</div>

Accessible Two-Column Layout

fl-col fl-col

fl-col-flex2

Fluid Skinning System

• Layout wrappers and containers
• Convenience classnames
– GUI elements: Tabs, menus, icons, widgets
– font family, size, and formatting

• Theming
• Accessibility
– easy page linearization
– tested for usabiltity effectiveness, specifically
colorblindness
– works with Assistive Technology

Allow Users to Page Through a List

More from Fluid Infusion

• Components
– Pager
– Reorderers (list, grid, and image)
– Uploader
– Progressbar
– Inline text edit

• http://fluidproject.org/releases/1.1.2/demos/

jQuery UI Datepicker
<div>
<label>Start date:</label>
<input class="cal-datepicker"></input>
</div>

<script type="text/javascript">
$(document).ready(function(){
$(".cal-datepicker").datepicker();
});
</script>

jQuery UI Widgets

• Widgets
– Accordion
– Datepicker
– Dialog
– Progressbar
– Slider
– Tabs

• Demos: http://jqueryui.com/demos/

jQuery UI

• Effects
– show, hide, toggle, color animation
– add/remove/toggle/switch css class

• Demos: http://jqueryui.com/demos/

Improve Javascript Performance

Improve UI Performance

• Minify code
• Minimize HTTP requests
• Apply cache headers
• GZip resources

Jasig Resource Server

• Server Webapp
– Library of popular CSS, JS, and image resources
– Provide consistent URLs
– Cache, minify, and gzip hosted resources

• Utilities
– Filters for caching and gzipping
– JSP tag for including files from resource server

• Bundled with uPortal 3.1+

Minify code: YUI Maven Plugin
<plugin>
<groupId>net.sf.alchim</groupId>
<artifactId>yuicompressor-maven-plugin</artifactId>
<version>0.7.1</version>
<executions>
<execution>
<goals><goal>compress</goal></goals>
</execution>
</executions>
<configuration>
<excludes>
<exclude>**/*.min.js</exclude>
</excludes>
<linebreakpos>10000</linebreakpos>
<suffix>.min</suffix>
<jswarn>false</jswarn>
</configuration>
</plugin>

Cache Headers: Resource Server
<filter>
<filter-name>CacheExpiresFilter</filter-name>
<filter-class>
org.jasig.resourceserver.utils.filter.CacheExpirationFilter
</filter-class>


<init-param>
<param-name>cacheMaxAge</param-name>
<param-value>31536000</param-value>
</init-param>


<init-param>
<param-name>regenerateHeadersInterval</param-name>
<param-value>1000</param-value>
</init-param>
</filter>

<filter-mapping>
<filter-name>CacheExpiresFilter</filter-name>
<url-pattern>/rs/*</url-pattern>
</filter-mapping>

GZip CSS and JS
<filter>
<filter-name>pageCachingFilter</filter-name>
<filter-class>org.springframework.web.filter.DelegatingFilterProxy</
filter-class>
<init-param>
<param-name>targetFilterLifecycle</param-name>
<param-value>true</param-value>
</init-param>
</filter>

<filter-mapping>
<url-pattern>*.js</url-pattern>
</filter-mapping>
<filter-mapping>
<url-pattern>*.css</url-pattern>
</filter-mapping>

GZip CSS and JS
<bean id="cacheManager"
class="org.springframework.cache.ehcache.EhCacheManagerFactoryBean">
<property name="cacheManagerName" value="ResourceServer.cacheManager" />
</bean>

<bean id="pageCachingFilter"
class="org.jasig.resourceserver.utils.cache.ConfigurablePageCachingFilter">
<constructor-arg ref="cacheManager"/>
<constructor-arg value="SimplePageCachingFilter"/>
</bean>

GZip HTML: Tomcat

<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000" redirectPort="8443"
emptySessionPath="true"
compression="on"
compressableMimeType="text/html,text/xml,text/plain" />

Interact with Portlet Session and
Preferences via AJAX

AJAX Servlet

Portlet
Controller
Browser

Servlet
Controller

No portlet preferences access
No portlet session access

Jasig Ajax Portlet Support

Portlet
Browser
Controller

Servlet
Controller

Weather Portlet Example

• Save location preferences via AJAX POST
• Return success or failure

Editing Portlet Preferences via Ajax
@RequestMapping(params = {"action=delete"})
public void deleteCity(
@RequestParam(value = "locationCode") String locationCode,
ActionRequest request, ActionResponse response) throws Exception {

Map<Object, Object> model = new HashMap<Object, Object>();

// remove location from preferences
final PortletPreferences prefs = request.getPreferences();
this.weatherService.deleteWeatherLocation(prefs, locationCode);

// return success
model.put("status", "success");
this.ajaxPortletSupport
.redirectAjaxResponse("ajax/json", model, request, response);
}

Ajax Response Controller
@Controller
public class AjaxResponseController {

private AjaxPortletSupport ajaxPortletSupport;

@Autowired
public void setAjaxPortletSupport(
AjaxPortletSupport ajaxPortletSupport) {
this.ajaxPortletSupport = ajaxPortletSupport;
}

@RequestMapping("/json")
public ModelAndView renderAjaxResponse(HttpServletRequest request,
HttpServletResponse response)
throws ServletRequestBindingException, IOException {

final Map<Object, Object> model = this.ajaxPortletSupport
.getAjaxModel(request, response);

return new ModelAndView("jsonView", model);
}
}

Jasig Dictionary Portlet

• Uses Aonaware Dictionary XML REST service
• Want to make AJAX requests DictService server
• Single Origin Policy prevents request
– need same protocol, domain, and port

Using Jasig’s ProxyView

@RequestMapping(method = RequestMethod.GET)
public ModelAndView getProxyView(HttpServletRequest request,
@RequestParam(value="searchTerm") String searchTerm) {

Map<String, Object> model = new HashMap<String, Object>();

// build the URL to be proxied and add it to our model
String url = “http://www.proxied.com/url”;
model.put(ProxyView.URL, url.toString());

// return a proxy view of the URL
return new ModelAndView("proxyView", map);

}

Prevent Cross-side Scripting Attacks

Unescaped Javascript

document.write('${title}');
</script>

document.write('' + alert('pwnd!') + '');
</script>

Escaped Javascript

document.write('<spring:escapeBody
javaScriptEscape="true">${title}</spring:escapeBody>');
</script>

document.write('' + alert('pwnd!') + '');
</script>

Unescaped HTML

<h1>
${ title }
</h1>

<h1>
<script type="text/javascript">alert('pwnd!');</script>
</h1>

Escaped HTML

<h1>
<spring:escapeBody htmlEscape="true">
${ title }
</spring:escapeBody>
</h1>

<h1>
<script type="text/javascript">alert
('pwnd!');</script>
</h1>

XSS: Dictionary Portlet
// parse the definition from the response
in = get.getResponseBodyAsStream();
String def = service.getDefinitionFromXml(in);

// escape any HTML characters
return StringEscapeUtils.escapeHtml(def);

XSS: News Reader Portlet

• Display RSS feeds in a portlet
• Allow HTML, but maintain security
• Might need different policies for different sites

OWASP AntiSamy

• Java API for filtering HTML/CSS
• Define allowed tags and attributes through XML
• Clean input by stripping unwanted tags
– strip malicious scripts from external content
– improve presentation by removing images, etc.

News Reader: OWASP AntiSamy
// retrieve
InputStream in = get.getResponseBodyAsStream();

//parse
SyndFeed feed = input.build(new XmlReader(in));

//clean
AntiSamy as = new AntiSamy();

List<SyndEntry> a = feed.getEntries();

for (SyndEntry entry : a) {
SyndContent description = entry.getDescription();

Policy policy = Policy.getInstance(policyFile);

CleanResults cr = as.scan(description.getValue(), policy);
description.setValue(cr.getCleanHTML());
entry.setDescription(description);
log.info("Feed " + url + " cleaned in " +
cr.getScanTime() + " seconds");

}

XSS: Calendar Portlet

• Custom AntiSamy JSP tag
• Wraps Spring-configured string cleaning utility

<antisamy:clean value="${ event.description.value }"/>

AntiSamy-based String Cleaning

// clean a string using the configured AntiSamy file
public String getCleanString(String dirtyInput) throws ScanException,
PolicyException {

AntiSamy as = new AntiSamy();
CleanResults cr = as.scan(dirtyInput, this.policy);
return cr.getCleanHTML();

}

AntiSamy-based JSP Tag
<%@ tag isELIgnored="false" dynamic-attributes="attributes" body-
content="empty" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ attribute name="value" required="true" %>
<%@ tag import="org.springframework.web.context.WebApplicationContext" %>
<%@ tag
import="org.springframework.web.context.support.WebApplicationContextUtils"
%>
<%@ tag import="org.jasig.portlet.calendar.util.StringCleaningUtil" %>
<%
WebApplicationContext ctx =
WebApplicationContextUtils.getWebApplicationContext(application);
StringCleaningUtil util =
(StringCleaningUtil) ctx.getBean("stringCleaningUtil");
%>
<%= util.getCleanString(value) %>

Preventing Non-Portlet Access

HttpSession session = request.getSession(false);
if (session == null ||
!((Boolean) session.getAttribute("hasDictionarySession"))) {
return new ModelAndView("jsonView", map);
}

Data as XML

• Javascript parsing
– jQuery
• Java output and parsing
– Maven JAXB plugin
– XStream, etc.
• Groovy

Dictionary Parsing in Groovy
Groovy Implementation
import java.io.InputStream
import groovy.xml.StreamingMarkupBuilder
import org.jasig.portlet.widget.service.IDictionaryParsingService

class DictionaryParsingServiceImpl implements IDictionaryParsingService {

String getDefinitionFromXml(InputStream xml) {
def response = new XmlSlurper().parse(xml)
return response.Definitions.Definition.WordDefinition
}

}

Spring Wiring
<lang:groovy id="dictionaryParsingService"
script-source="classpath:org/jasig/portlet/widget/service/
DictionaryParsingServiceImpl.groovy"/>

Dictionary Parsing in Groovy
import java.io.InputStream
import groovy.xml.StreamingMarkupBuilder
import org.jasig.portlet.widget.service.IDictionaryParsingService

class DictionaryParsingServiceImpl implements IDictionaryParsingService {

String getDefinitionFromXml(InputStream xml) {
def response = new XmlSlurper().parse(xml)
return response.Definitions.Definition.WordDefinition
}

}

Data as JSON

• Javascript parsing
– jQuery
• Java output and parsing
– JSONlib
– net.sf.json’s JsonView

JsonView
Controller code
@RequestMapping("/json")
public ModelAndView renderAjaxResponse(HttpServletRequest request,
HttpServletResponse response)
throws ServletRequestBindingException, IOException {

final Map<Object, Object> model = this.ajaxPortletSupport
.getAjaxModel(request, response);

return new ModelAndView("jsonView", model);
}

views.xml
<bean id="jsonView"
class="net.sf.json.spring.web.servlet.view.JsonView">
<property name="contentType" value="application/json" />
</bean>

Response
{ response: success }

Example: Calendar Portlet

• Three views
– Mobile View
– Narrow Column View
– MAXIMIZED View

• Simple interface for view selection

M
Calendar Views

Column

Maximized

Mobile

Calendar View Selection
public String getCalendarViewName(PortletRequest request) {
String userAgent = request.getProperty("user-agent");

// check to see if this is a mobile device
if (this.mobileDeviceRegexes != null && userAgent != null) {
for (Pattern regex : this.mobileDeviceRegexes) {
if (regex.matcher(userAgent).matches()) {
return CALENDAR_MOBILE_VIEW;
}
}
}

// otherwise check the portlet window state
WindowState state = request.getWindowState();
if (WindowState.MAXIMIZED.equals(state)) {
return CALENDAR_WIDE_VIEW;
} else {
return CALENDAR_NARROW_VIEW;
}

}

Interesting Web APIs

• Google APIs
– http://code.google.com/more/
• Yahoo APIs
– http://developer.yahoo.com/everything.html#apis

• Programmable Web
– http://www.programmableweb.com/apis

• Many Popular Sites
– Twitter, YouTube, Last.fm

Personal Favorites

• Google Visualizations
• Google Maps
• Yahoo Stock Data
• Yahoo Weather
• Twitter

Spring 3.0

• Portlet 2.0 (JSR-286)
– Resource URLs: @ResourceMapping
• Spring 3.0
– REST template
– JSR-286 support

Ajax in JSR-168 and Spring 2.5

JSP/Javascript
$.get('<c:url value="/ajax/dictionary"/>', {}, function(){}, "json");

Servlet Controller
@RequestMapping(method = RequestMethod.GET)
public ModelAndView getDefinition(HttpServletRequest request,
@RequestParam(value="word") String word,
@RequestParam(value="dictId") String dict) throws Exception {

// stuff goes here

}

Ajax with Jasig Library

JSP/Javascript
$.get('${dictionaryUrl}', {}, function(){}, "json");

Portlet Controller
@RequestMapping(params = {"action=delete"})
public ModelAndView getDefinition(ActionRequest request,
ActionResponse response, @RequestParam(value="word") String word,

// stuff goes here
this.ajaxPortletSupport
.redirectAjaxResponse("ajax/json", model, request, response);
}

Ajax in JSR-286 and Spring 3.0

JSP/Javascript
$.get('<portlet:resourceURL/>', {}, function(){}, "json");

Portlet Controller
@ResourceMapping()
public ModelAndView getDefinition(PortletRequest request,
@RequestParam(value="word") String word,

// stuff goes here

}

Presentation Examples

• Jasig Portlet Examples
– Calendar Portlet
– News Reader Portlet
– Weather Portlet
– Widget Portlets
• Dictionary

• uPortal Examples
– Portlet Administration Portlet

Questions?

Jennifer Bourey
jbourey@unicon.net
www.unicon.net

Rich Portlet Development in uPortal

More Related Content

What's hot (20)

Similar to Rich Portlet Development in uPortal (20)

More from Jennifer Bourey (7)

Recently uploaded (20)

Rich Portlet Development in uPortal