Jennifer Bourey Jasig Conference, March ? , 2010 Make life easier development faster portlets shinier Double-click to edit Double-click to edit <div class="fl-col-flex2"> <!-- start: left panel --> <div class="fl-col"> <h1>I'm the left column!</h1> </div><!-- end: left panel --> <!-- start: right panel --> <div class="fl-col"> <h1>I'm the right column!</h1> </div><!-- end: right panel --> </div> Double-click to edit 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 Double-click to edit Double-click to edit Components Pager Reorderers (list, grid, and image) Uploader Progressbar Inline text edit http://fluidproject.org/releases/1.1.2/demos/ Double-click to edit Double-click to edit <div> <label>Start date:</label> <input class="cal-datepicker"></input> </div> <script type="text/javascript"> $(document).ready(function(){ $(".cal-datepicker").datepicker(); }); </script> Widgets Accordion Datepicker Dialog Progressbar Slider Tabs Demos: http://jqueryui.com/demos/ Double-click to edit Double-click to edit Effects show, hide, toggle, color animation add/remove/toggle/switch css class Demos: http://jqueryui.com/demos/ Double-click to edit Minify code Minimize HTTP requests Apply cache headers GZip resources 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+ <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> <filter> <filter-name>CacheExpiresFilter</filter-name> <filter-class> org.jasig.resourceserver.utils.filter.CacheExpirationFilter </filter-class> <!-- Length of time to set in cache headers (in seconds) --> <init-param> <param-name>cacheMaxAge</param-name> <param-value>31536000</param-value> </init-param> <!-- Time between regenerating cache header strings (in millis) --> <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> <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> <filter-name>pageCachingFilter</filter-name> <url-pattern>*.js</url-pattern> </filter-mapping> <filter-mapping> <filter-name>pageCachingFilter</filter-name> <url-pattern>*.css</url-pattern> </filter-mapping> <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> <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" emptySessionPath="true" compression="on" compressableMimeType="text/html,text/xml,text/plain" /> Before / after screenshots Before / after screenshots Double-click to edit Double-click to edit Double-click to edit Double-click to edit Save location preferences via AJAX POST Return success or failure @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); } @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); } } Double-click to edit Uses Aonaware Dictionary XML REST service Want to make AJAX requests DictService server Single Origin Policy prevents request need same protocol, domain, and port @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); } Double-click to edit demo here Double-click to edit Double-click to edit Double-click to edit Double-click to edit // parse the definition from the response in = get.getResponseBodyAsStream(); String def = service.getDefinitionFromXml(in); // escape any HTML characters return StringEscapeUtils.escapeHtml(def); Display RSS feeds in a portlet Allow HTML, but maintain security Might need different policies for different sites 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. // 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"); } Custom AntiSamy JSP tag Wraps Spring-configured string cleaning utility // 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(); } <%@ 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) %> HttpSession session = request.getSession(false); if (session == null || !((Boolean) session.getAttribute("hasDictionarySession"))) { return new ModelAndView("jsonView", map); } Double-click to edit Javascript parsing jQuery Java output and parsing Maven JAXB plugin XStream, etc. Groovy Double-click to edit 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 } } Javascript parsing jQuery Java output and parsing JSONlib net.sf.json’s JsonView Custom AntiSamy JSP tag Wraps Spring-configured string cleaning utility Double-click to edit Three views Mobile View Narrow Column View MAXIMIZED View Simple interface for view selection Double-click to edit 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; } } Double-click to edit Double-click to edit Double-click to edit 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 Google Visualizations Google Maps Yahoo Stock Data Yahoo Weather Twitter Double-click to edit Portlet 2.0 (JSR-286) Resource URLs: @ResourceMapping Spring 3.0 REST template JSR-286 support Double-click to edit Double-click to edit Double-click to edit Double-click to edit Jasig Portlet Examples Calendar Portlet News Reader Portlet Weather Portlet Widget Portlets Dictionary uPortal Examples Portlet Administration Portlet Double-click to edit

Oh and that and and this is an assessment . I have a budget Introducing standby . I actually think what the friendship that the appreciation . . if I'm going twenty of committers to the pope Add to add to the fun being a boy who portal . and I consulted that he harm her professional interest in the . given that it interface is conducting the kid who Pierre and Daryn . I . they secured their fifth of the . that's what they're The Developer Yale University and and then she were to on and then he and his portal proxy . . it's ten . what we're calling for this session rich Portlet Development which a practice is going to be up one shows sort of modern AJAX the . I CSS school Topics um SOAP goals for Portlet Development in general are to make life easier and make development faster CA's I don't think anybody here are suffering from having too much time on their hands little bit not the problem we need to solve ten . and generally make a portlets lament right here make you know some cool new content that we can put in the portal . so what I'm getting today is talk about a bunch of common use cases and then Quayle places where we've addressed those use cases some weren't chasing code so that we can use those and samples . and when you all go home if you what awaits and shiny Portlets UI actually have something to look at the on line actually did start out with the US as anger JavaScript a penny going to Java from there . so starting off with CSS . on our first goalie is going to be to create Accessible two Column Layout find primarily Java developer in univ certainly of learn Java script and see us us by having table free layouts is not something that's entirely intuitive to me how to develop gotten How did you know without going through but to see us ups Flow things that give me a headache so I'd really like something that I can just wait and not have to worry about it . I locally we actually have something for that the you can use . said you look at our new portlet Admin told The New portal three Ducks two that actually includes some content that had a two Column Layout . and even though this has a fairly complex Layout were doing it only with CSS with CSS Wedeman later sell its . so this doesn't have any tables in a bomb so that makes it in a much more acceptable and much more from the in screen Readers and things like that . I'm here if you really want to hear more about this ECP ASA people were walking in right now the edit . so the way that we implemented this is to we include the Fluid Skinning Susteren in your portal . so this is something that be you could all use out of box if you want of multi Column Layout Singapore with you can just use this gets us in ages from our perspective magically works . and so you actually have to go through inside all the floats and give yourself that CSS and use headache that I generally try to avoid . . he take a look here we're basically defining a layout that has two columns and you got the left channel and the right plan all and it's really pretty intuitive from looking at the code . and looking back at our civil screen . what you have here is one column on one side and then another column on the other and then we've got the bigger container . so that's something the you can take a look Guide The New portal if you're interested in use and an eager Portlets and they're actually of wanted more options that you can Using besides just the columns . so there's Layout wrappers and containers . there's a budget Convenience classnames for things like the column so they should be before an also for how Does for menus for some of that icons and then we did styling was on there's also going to continue classnames for wants . Seeking make use of all of those and all of those urged are documented in various places on the Fluid with DNA you go to their I demo server there's a bunch of the states demonstrated and that got HTML and JavaScript . an all out alongside that the you can Uses Examples . others also Budget the moon so there's a bunch of different skin see you can Using you can pick which ones you'd like and those Oxley include mobile skin cells the bouts actually where all of our icons styling is coming from the New portal three Document Pisani about yesterday . and Fluid also has p lot of attention to accessibility so we use all the stuff the kind of get out for free . which is reeling anthrax . so indexing it was can you JavaScript example on the pre all that coming use case especially in a portlet where Ukraine limited screen real estate is doing have to live content to fit in one case she knew Blake when users to people the peace or less . so we also doing this with Fluid Infusion . if you take it live here this is a demo Auburn New Portlet Administration Portlet say can see we can go through paste or the last . I mean it's also possible to sort of columns and we've actually I did some additional folks in here to allow you to filter through content and search . what . you'll password . OK . on one of their ruling things about the Fluid pager Implementation in particular is very flexible . and as a Java developer it's really fun to work with because it has a very similar feeling to Spring dependency injection and say you can actually started inject your own cost and heaters . so this is how we were able to make it Filter a ball in Search of all it all at this stuff . so it's got a lot more a hoax and flexibility is that a lot of the other sort of people widgets House . what has been for components so in addition to that pager they have a bunch of Reorderers . if anybody seeing you Portals try to drop interface and further layer Reorderer and that's actually backed by the Fluid whale Reorderer . we also have with creating imagery orders that are pretty useful fall . there's actually very nice file Uploader that we're looking to Integrated you portal some kind future . and they got a Progressbar and their bunted Inline text editing tools as well . so she was see any reason Action nine We definitely recommend going for their Demo slaying taking a look at it looking at some other simple code . . the next use his relate to talk about it is so lacking in deep so that's something that Spring common as well that something that we're doing New portal now . so if you take a look at the New Portlet Administration tool is actually allows you get too can be in the future where you're CONTENT LN e automatically expire automatically published if you've got something that should only read for as small amount of time you can have a true on one morning and then go away . the next . we take a look here When you click on Add input box you actually get a nice old Datepicker Widget and you can click on that and then it does something in what's use of the tightness while . so we're currently in twenty nine using big ticker UI Datepicker . it's actually quite UCB use so you basically just having input field and then your Script just Calls . I've got Datepicker on that elements and that the people with head and and you can choose to customization you can actually add on click Advanced YouTube to those he feels so if anybody seen the Calendar Portlet that I actually uses the Datepicker as well and we use . I don't click to bed so that when you click on a deep and actually changes the list of events that are shown . so it goes out and performs AJAX requests that Going India . . the mother g Green UI Widgets . so there's an accordion Widget . and there's the Datepicker that I showed you . there's also a dialogue so if anybody's seen were you Add Content in New portal when you get that menu that pops up over your portal slam page . that stock by DJ Query dialogue . there's Progressbar . and there's also is Slider and were using that I've actually pretty heavily in a portlet so if you've seen these Search port with a war time Cup or the other Portlets there is a Dictionary and to source Portlet that spawn will the new portal three at tea the uses that obscene gonna Dictionary cabinet the source of the . and those also includes an interesting folks as well were you can actually have Content looted via Ajax when you put on pads and things like that . and their number of really good Demos for the cheaper UI stuff as well . set your interest in seeing some without an action scenes of civil code that we'd definitely go to their Web site and check that out . we've also Bundled some still lacks g queries and Fluid . I Demos with your portal itself if you go to the JavaScript Demos Portlet Double show you a couple of the things that are available in New portal that she definitely go to the sites to check out even Marcus we haven't had a demos for everything features available . these are all things that are included in your portal in you can use from your Portlets on . we've also added some . features for skipping Javascript so that your Portlets can actually use it differ version of J Cleary . Denny is used by the portal say you don't necessarily have to worry about keeping all of your Portlets in your portal The using the same person . J Crew which is really cut apart . so that should ease migration possible al you to upgrade this component separately . so now the only doing his use of Javascript events are of talks maybe you one have seen Innovations preview on that like . file a call or something like that played a short demo that they uses some of seeker UI is the facts plugins . if you look here at the little practice arrangement a portlet . and if you take in the regular it screen and it's not it's bread . . so we don't Error so it be must be yet . where innovation and and and what that red so that I know they like Camel to one . . actually member of the seat of the sexy to show and hide things you've had an odd toggle back and forth between the two . FX the end of the new car in emissions than you can also reduce up with CSS process so I'm cost Remove clouds of Apollo between classes and things like dot . those are on those that demo pages while and there are a few twisted the facts of human take a look at any and then you can get out there . so we started to talk about a lot of different Javascript features and we're talking about pulling a lot of Javascript in to portal . at some point if you just include all that stuff and don't do any optimization on in your users are getting get really sad because you're pulling like five hundred Cayenne . yes Continue the browser and it's really shiny an old play . it's not not Kuwait It takes a minute from the peaceful end every time and no one's getting be happy with that especially as we move to some the mobile the Bolivar The skinny you can more of an issue . so we're looking at ways to improve the user interfaces Performance by not sending as much stuff to the browser or and not sending it is often . so there's about two ways that we can improve the browser performance . one is we Minify the code and so what that means he is all of economy right We've one include things like what's these comments because that means Developers can actually prevent . on It's really knowing three code that has no comments and we won include the end but the users don't need to download all of our comments . they're not really very hopeful for that . so what we do is we're using on a library to basically strip out all the lights baseball a Collison also does some things from Remaining Javascript variables so the your area will be in for about the plea contrast really short names . and a bunch of other things like that that make the code what exactly the same . but you're users personally doubling a much smaller file . on the other thing that we're doing is trying to Minimize HTTP requests . so if you had the year Javascript set up so the Spring is in its own file that makes it much easier to work with as a Developer . but died increases lead seal with other because it no pasta D'Alema ten files instead of one . another thing they can really help improve performance is up quite Cache headers . so here users assuming day your page your JavaScript Content hasn't changed their browser we only knew Saddam about once . and we also try to tease that resources so the browser can actually pull Resources donkeys Add and then expand on and then there's not as much that the ballot because this complex . so as a new portal three L one Who We started adding some schools to allow you to do all these things in your Portlet Senden to help support about a new portal . I've mentioned before today we had the system for Scoping Javascript a particular Portlets be simply the way that we do that use we you clear up the namespace after each time between pulling JavaScript and we asked all portlets basically to win Javascript Evan clear out the namespace . that's great in all the you'll really want your users to How did download it Dijit very library several times in a single page . so what we're doing at this point is we had all of Guide standard Libraries stock surged out of this new Resource serving webapp and that gives it a common your also that everything is using the same CAS version of the same file . because we and those consists in your also we've got things Lake I'm Fluid Infusion to clear e g three UI a We've got a budget image one reason they're so those are things that are actually ship with you portal at this point . it's not good Resource at all of the resources that are in on our cache there Minify a bit and that ease at Denver actually CAS for think the people then sleepy year . so very long term Cache headers . the other half of the Resource Server project is about to Utilities . so we've got some customize Filters for caching and cheesy thing we've taken some of that out filters that Yates CAPTCHA offers Enable will be more configurable in built on those . so that's available through Portlet projects . and actually non Portlet projects all of this stuff would also work with separate applications there's no reason you couldn't use it without . we also had a JSP tag for including files from resource server . so if you maybe have a portlet IT de Uses e e e you know perhaps the Uses decree when the for and that hasn't that added to the Resource Server yet . it actually doesn't cost costs contacts request to make sure that that resources really available and if it's not Evil feel back to a local person you can actually include those files in Maven overlay . what this is bundled with you portal three out one and Beyond on in their number JC Portlets that are using this now . this is also that I'm JSP tag with the bill back is also how we're ensuring the if you take the more recent Portlet in usage and say you for all three idea which is not viable all of this Middle so work because all of those resources are available locally . so I'd like to talk about how we actually implement some of these things under to show some example code at the very end of the presentation all list where all these examples are actually from to the you can see them in context if you'd like . so the person to talk about his new Define code . he knew portal and most of our Portlets we're currently doing this week the Maven Plugin the runs they knew we . I can crush a light rain . so basically what you do is just Define which things even like to compress or alternative with which things you would not like say to costs . and you can set some time Configuration variables they say how long each Minify and lying should be in things like that you can also define Aggregation moves so few whites you Aggregated much of files into one File You can actually do that through this one . . Furcal for setting cache headers I mentioned that we send in some of the Spring White very soft . so this is what we're currently using in New portal . we've got a cash expiration filtering you can actually configure . in that Filter how long you'd like that CAPTCHA lots . I'm you can also configure how long . how often you've like this headers to be regenerated . and of the casino right now this is actually from the Resource serving Web not so we're just I'm considering everything to be Cache . well so that Filters for and she's acting CSS in Javascript Content . this will lead use it content for browser snake actually Himalayas so if you get some browser they actually can handle . she's a content . I don't think Javascript probably an work that well anyway but it will offer the Content not . she's at . SIG is the way here were applying that to you JavaScript and CSS files you have said this one is using that delegating Filter proxy so basically what this allows Use you have your Filter configured in the web dot XML but you don't have to include all the configuration for thirty can actually Spring configured not . six years The Associated Spring configuration file the Let's see Define which how she'd like to use for the Content . . this is an example of Jesus thing Content your Tomcat is done so we actually did exterminate when you tease it bean HTML page Through some of those filters . we found was a little bit quirky on it probably didn't have the performance that we wanted however if you wanted g zipping Flake I HTML or XML I just plain resources you can actually do that through contact . you just you got late in the on call for slide server dot XML you can also you got going Apache or something like that so that's kind of up to you how you'd like to implement that if you like to do it . but this is certainly an example that works on it does make a difference . so Rusty think these things don't make a difference . I Let's take a look so this is before we turn on all the CAS to stop the new portal . we'll you actually get some benefit out of just the Browsers built in catching behavior . it's been assumed that the eighteen CAS those images of Weise for a little while . so that's was how call but you know the overall leader that he does so pre Heidi data hundred Can you for process really not ideal . so at this point in your portal . this is what we have it don t you can see that on the of the total weight is Reduce the little bag . by that I will we after UK that he did we Swansea is really Reduce at this point the only thing that the browser stellar day after the first will require US is going to be in the pages all . and we ticket that page to such a leak out that day . so this is actually needed the difference with the U . I'm Deal with Your Portal When and how responsive that this . . some of the some of it was added to three why not in dial one term cache headers on all the content was not added though and we've actually added some developer tools to IU to turn this off one of the complaints about you portal three balance Implementation was a pure actually modified that CSS and popping out you have to restart the server every time we have to go in and turn off all the filters a lot of people work on a frustrated with that . on and of course if we don't Aggregation it with an even worse because it's really hard to just copy a file Aggregated than and also all of that minification makes a really hard to separate points . you can't really separate point Xalan Minify file and it's really hard to get bogged pure Firefox . so we actually have a portlet now the law is you just hit a single bite and turned all about off . . . . Lee Yes . from . . . . Neil we actually implemented and I'm actually initial this leader although not Calendar I'm . we had major problems with the two will Maps Portlet loading . on that we took a really long time Hello again since we had another front pages Flow the entire page done and for a dive . Portlet specifically be about and son . functionality they basically made it so that it didn't Low to any of the JavaScript Libraries until you actually interacted with the portlet not actually be a huge difference . so you know certainly that makes your Portlet a little bit more complex by IT for a light breeze that you really find a performance from last . . . . . awesome . yes . manager Terry Getting was Flow . JL a light but what I done . so this actually is for the White Flow statistics if you want to take a look in your portal and see you wear a mediocre list Tuesday use of Improved radial actually stayed out useful reports alignment which things are G Zach to and where you're not setting cache headers in where you can change things around Will . C . yes yes yes you've got content that saw King She's it's it's really easy to do especially since we're offering all these filters in the shootout to we just go use the men . make more happy Portlets . anything else about the Aggregation and cheese if they know what this all before him Want other topics . . OK . OK so now we talked about all this good run and JavaScript outside like to talk about how you came to AJAX the balm in a portlet environment . I'm a big talent is is it's actually kind of difficult to work with Portlet Preferences a walk with the Portlet session . you're AJAX requests . so I got a very simple diagram here they can do shows with the browser does I'm normally it goes out and contacts a normal for the controllers then you might have a AJAX Target did to regular Servlet with the problem is your regular Servlet doesn't have access to the Portlet Preferences . see you can do something late . just admit me just request Update the Portlet Preferences on you also can Interact with Portlet session . you can place things in the application session by it . that's not really ideal either . so what you think has done is add this ajaxPortletSupport library . date basically you allows you to use it may actually request QA partly Controller which will better Redirect to your Servlet of choice . I'm We've done a kind of complicated Diagram from the with the here but essentially what this guy is use the You Use the library to sit to send a team view it and the model It will place that model in the section under randomly generated team . keep trying for gold I've said that three or to redirect the browser the browser will then go to disarm way that you actually have your ID Act Started I E and dot serve later Will pulled down and die non model . from the session . initial an example of the Weather Portlet using this idea whether portal a lot as you at this point to you . I Interact with editing mode via Ajax in you can actually just a week . one of the locations until just go a without having to Refreshed the page . so were using this light refill call course not . so we take a look here this is the main method eight Campbell's Zion deletions of those location preferences . they can see at the bottom eight holes in the index Portlets for Libraries Redirect AJAX Response to and so we debated view that's the first parameter and that we get them all . and then we give it the request of the response . anti-war Campbell actually redirecting it to our subway Response Controller which is on the next page . so you can see here we had that same library . and we call ajaxPortletSupport dot net . AJAX model . so we put the modeling view and on the portlet citing a report all back out again on the Servlet side . does anybody of any questions about that specifically . if you're looking for NBC News is actually being used an awful one to the Portlets at this point so there's some good examples in using this in chasing content . once you start doing this you may following the date you need to surgeries to Proxying an AJAX Target is a lot of the more interesting Portlets that were looking for . I'd actually get there data from somewhere else . so maybe you're getting information about the weather from Not to whether or you're getting Dictionary information from Iowa where a war something else . bite your browser . I'm here actually go out and get Not on its own . and there's something called the Single Origin Policy which basically says that OK if you're thinking in AJAX requests like dot com we're trying to not get you hacked so he needs to have the same poses import and and be the same protocol as what you're using now so the really coming design patterns and people get is . it is you just had a local person about see you go out to some URL this local date does about any ECP claim request or an average of proxies all that content . actually works out well . so we're actually doing on with the Dictionary Portlet rate now and I've got a example of the chasing tour that spot will be in that huge export would support . I library public ProxyView in this is actually a Spring view it that just return a proxy of some URL . so if you just put de UI le Not on this new water Nightly just or not that Content and proxy about it also on poppies all the response headers to you get dead one Titan all but set correctly as well . so the really great and it works really well but the reason the Single Origin Policy you was set in the first place it used to prevent Cross Site Scripting Attacks . so that you just kind of open yourself up to those so if you have Content the You Trust . you know maybe it's something that's coming from that . you know some sort in application and you're controlling locally they should all work well but I would recommend doing this to go to some other site this week at that site Spring getting the sort of Trust on what happens if they have the security issue . and there's like it's hacked Now your slate might be hacked sealed . so we knew it prevent these attacks . so I've got a little demo here . two Portlets one of which is not really controlling its content very well . and it's on the scene Lead as my blueprint Portlet . said Like year . I a . . we don't and I'm so I were to page it showed me they can eat Can I inject content year-end good actually . Double A Trace . and as a leader will . hearing it was just showing date information on the page . we were sick and you know when Email its my parents and tell them that I gotta see any election you know now I'm in trouble or you know maybe like email sent to the person I'm appointed up with and that's no good . so we What about that . and there's actually one two ways they can be done Monday to talk about we say We told into for Jason Portlets . the simplest things you can do particularly if you're using JS key is to output DAV users have entered them Sauls is you can make use of some of the Spring state body teachers . so there's a very simple JSP tag that what the Justice be Javascript in IChannel Content . so we have an example here of the EPA states known not as well written as it should be . Candy Keith you inject the right content and not that would actually cause it to you . call today how the pop up box that says you are now on . and that's bad . and so if we state that instead using this phrase the bodies had you can see here were using the Javascript estate person . so that would actually just laid out to the page that's how Smith the user tried to enter and and it would not successfully actually executed . so the actually makes a big difference . and if you're using . I'm JSP all to put out Content inside your Javascript on the pages often recommend using . there's something similar for HTML sake as see in this example somebody is injected something that actually includes the script I . and if you use the Spring is a body IChannel escape equal Stirling said . what it'll do we is this D Day HTML content they're so this is what I actually print out on the page and then the user on the page would actually see Script like equals JavaScript the love that . things really help and they're not hard to use especially to Using Spring it's just already there . . so in a Dictionary Portlet were pulling in Content More actually cleaning it on the back and on we decided we do want to do anything to elaborate . so we're just I'm skating and HTML using one of the String SDP tells the work learning that via Ajax so it's actually use your to do it on the back and CA's were not using it JSP on the front and we're just using adjacent you . Controller . another example on the of the Cold War and raising rates here for this actually News Reader Portlet and he actually started including the school called on it to Sammy and it's put up by a loss . so this is an interesting use case because it's not just speaking is he now because you might actually won the including summation all from the RSS feeds you Maybe you want to have content for some kibitz shows up and told to show up in Bolton Your Portal Islami you want include images that kind of thing . so what this does is actually allow you to allow some IChannel . but contrary what's going to come through and and you knew at some point you might configured to for policies for different sites or something like that disallowed due to start having some control over these things . so all Allows to UTC me to lose a job API for filtering things Lake Each Shyamalan and CSS attributes and you have this XML file war you define what's lot of and anything that so lob just get stripped out . so there's in some of the code from the News Reader Portlet in secrecy its Using Rome to impl and RSS Content and then it's using the Spring configured . Aulas policy file to define what things are allowed . so we just go ahead and clean older teens and then their seat a output on the page . the total is doing something similar . but it's not pulling in content . it's easily put through this Filter . I'm so we're actually using the and I'm a string cleaning utility and were using them on the JSP tiny . so we've actually Mina custom JSP tags are awful bouts of that's actually pretty convenient and we haven't Incorporated and he doc included into this Update that looks at those speeds to concede here about all we have on the JSP page . here's all the talk in code do is have a really simple utility that allows us to wire up the Spring had we to Spring configured policy file . and then we've got a little JSP tag they'd actually just looks for or that serve is in the Spring contacts . and then Queens the String . one other slightly unrelated thing that I'd like to mention just as far as boxing content goes new Diwaniya little they care for you like reopen proxy is so particularly you have click in API see for some service in meeting its not public . you might keep in mind it if you have something that sister really simple . Servlet proxied of other contests ui discovered that at some point in the future and use it . so we were going with the Dictionary Portlet is we're just doing a really simple chalk to make sure that that Portlets us . and that's premature . . it was a little bit about working with Jason XML on this is something that comes up a lot when you during AJAX development here you may have Content the you need to use your allies is either Jason are XML or you may also have the need to parse out from some other serve as slide in tools for doing this on for both Jason XML on the Javascript side I would recommend just using J Cleary convince not taken off sending stop and it's just great . so definitely would recommend that . there's a lot of different options for XML on the back inside . we struggle on different things be on the job aside I think to some extent it depends what you're looking and and it depends whether you actually have access to you whether it's any good so the schools can be a little bit quirky as far as their expectations for namespace thing and things like that so you made this one play around with a couple different things in see what's about to notch another pretty good option actually is use Groovy for parsing answer life in XML . it's really easy to use and you can actually Spring configure I'm Groovy Implementation cells we can do is write a Java interface have occurred the implantation and then just why are the top and eleven P ANA wiring . so I've got a example reads your the Dictionary . I'm Portlet actually Uses out so this is the Groovy Implementation SA very long we just pull out the thing that we Why . and then you can see were using the new . and Spring blame . calling Kirby tax you actually create that in the Spring bigger issue . . and that's the SyndContent . the super G send their for options as well on what were using most of the slain in chasing if this boy it is not the CAS up dot Jason's Jason view . that's actually a Spring view that basically lets you just said that Allow and he'll just your life that is Jason and it works pretty well re using and bunch of places including the adjacent Widget Portlets fifty one Essien example there . and that's that predict with a lot . Singh can see here we've Guide . the UN Spring and the scenes that actually just sends the model to the Jason view in News XML we've got the case and you . I wired up is a bean and and diverse parts that this sends out is just response is success . . another thing you want may want to do for Sunday's port which is Present Different Views on particularly for things like you might want to have a slightly wider version of your Portlet in the not so my CSS somebody hits on the focus binding you may want to present something different is you got more Spring real estate New can do more . I'm You may want also send out something different for a double interface . so as an example the Calendar Portlet and is actually Doctor licenses point to send out different use for the regular Portlet you but you might have been Narrow Column for the Mobile View in for the not Some mice view . so that's what these look like at this point so here is the Jason Calendar Portlet on a mobile phone . Curie a senior just everyday page layout and it knows that it has controllable in PGA renders an extra wide format with some other options . . how accomplish and not . so he can see there were actually doing Couple things here we're checking both the portlet window state in the userAgent . you portal actually sends the user agents and the portlet guys one of the . I properties says he has called dev property al userAgent about old battled kidney Double browsing user Agent string . that isn't necessarily you portal specific about is part of the optional stock and if you're working with another portal you'll probably need to check and see if that's actually implemented I don't think that life re in particular sense that through but you Profiles . I'm so in this example we've actually just had a is Spring configured list of Mobile read access so goes the attacks each of those red X's legacy user it what what it is not just . it sends back a mobile version . and if not it s the WindowState . so the WindowState can be you better not to my is normal on . Rely is war or it can also be exclusive explosive Busy Your Portal specific WindowState . but we're basically to say OK it's not to my send back the really big right person and if it's anything else . just send Doctor normal Portlet person . to talk a little bit about Mashups in and got a couple things that have been happening in the JC community with those . I'm . what Is said Like to shows the old custom not Portlet . said US hearing can certainly library . . and you can scroll through those results so they got a you know cost and the this set of just the old buildings that you can look for what you want for something else the also ahead is and Implementation the uses their regular who will local search . taken Search for both things that go Will knows about and things to yell knows about . this is kind of an interesting example I think that Maps is a really common target for Mashups and things like that is particularly interesting in a campus and Byron too because most of our campuses our physical places where students plane actually go to Building and Yale go to events there at a particular place . so I think this actually prevent are staying on . another kind of difference would not updates including New Pool three to one is the new auto grafting Cipel for a portlet . so what you can do is just putting a sequel queried and then choosing View Add a couple of those using ClearPass . so it will attempts you automatically graphs what comes back on . I basically just a big testable queried impl statistics out you can also there's a line grafting you can use it basically just assumes that the first column is back SAP since the you have to Deal will take careful with order by this is using that to initial efficient service but there's really a lot of protection here and there's a lot of potential to get creative . yes . . . C . yes he does what . you can access the Google JavaScript library over US us all without paying them out . so it works but you get guiding here Not Explorer for those of us who were using average think ways and me but people still built on if you would up the portal Lenya had collapsed while you'll get that annoying pop up every single sign that says are you sure you'll and what this page it has insecure content . on and there's not really anything date we can do about that that's actually part of the reasons that we . and change the portal totally pull down day to Maps Javascript when you actually interacted with there he was specifically because about an audience . . I'm dead Nux . no no it sign on that is something that we get Add and if people are interested in . big collapse API has improved significantly is so the performance problems that we saw before are much improved . now by time we actually did . it's very difficult to dynamic clean food a lot of the eight Google Libraries . because is it the use Document The trade very heavily in and it doesn't always Interact Well with the portal . so what we actually did the Use load up a night training . and then if they user interacted with a portlet . it would actually go Adding to the Rely Freeman input about content . so there's lot of trickery involved but it did work and I think that that's something the deal would probably be willing to contribute doc people are interested . some . and I think if you pay Google owned YouTube that the Social version . some Cannot . . there was a call and whether API isn't out at this point that you can use on certain legal was probably the most popular source so Kuali Shel additions and apps and surgeon all the cool stuff they actually had a lot more than just that it's worth going to the Paging to seeing what's there and sing what's in the Labs . there's a really neat stuff and you portal that new translations Portlet penalty language translations the pressure using one of the two will AJAX Services a while . Yahoo has led of course Office Well I didn't use the weather stuff . and there Weather Service is interesting because it's actually using RSS but it's Extending RSS to add some on custom namespace and slipping from a technical perspective that's actually pretty me and they had some other things that you can take a look at what I really including any the Yahoo Stock a new portal recount you too . I'm licensing concerned I think . else because we calIcon to Governance but there also some stock one if you look at Programmable Web they have a budget services listed some of the not Maintain but some aren't so look I need such a place to go . and then if there's a popular site that you're interested in is calIcon e went to play no Site there's actually a good chance of this point that they've got a webservice or Jason enter ers us for something the UK's Consume and actually even just RSS catalogs finds the pre compelling . so so my personal favorite I'm really really like the two will Visualizations . particularly when you're talking to some of the business takes a really want to see data on the Really hopes via will just create these cool chart on the fly and they will Query weeknights on the and not really being a divider like things that look nice without me having to be very impl except on the inside as I get that . uncle Maps of course you know really cool popular service . on Yahoo has a Stock Data Service . this sort and in visibility it's just this on random CSU final but its canny his you can actually get all the stock ticker information . I'm Yahoo Weather as I mentioned I think from a tactical standpoint it's pretty need the new portal Weather Portlet is actually using on the weather . on and we're doing that because actually we are not Shel him but that's another interesting person if you're looking for something that you ask only on and Twitter has a bunch of cool services as well . . should the use look briefly Ahead of the . coming Double line in the next version of the information have support for JSR to eighty six and we should also have Spring three out of support . on the public to Dojo stock is particularly interesting . I mentioned or earlier in the presentation that Guide working with Portlet it's an AJAX can be little tricky because those servers don't have access any the public private citizens don't have access to the Portlet session with the changes in JSR three de sacs . so what you do is use this magical Resource URL feature him . and it gives you something that certainly can serve with a can spell at the center file or whatever but he actually goes through the portal first say you have access to the Portlet Preferences in the session . . so we tell Create New portal AJAX library if you're just trying to talk to serve the Controller this is kind of what you get You Use just a regular your all then references some Servlet . in your Portlet . and then you have something that actually just you know normal Servlet here with AJAX Library we had something to when to act in URL . and then called the ajaxPortletSupport library to forgot all in the new House to have a separate Servlet controller . in JSR to eighty six with us this using Resource Merlin said And and this is all you need you don't need to Portlet him to serve with you can so Interact with those preferences and with a suction . select the slide had some Example Resources . I believe this is a comprehensive list of everything that I'd shown today on all of the Portlets are in ASCII and so you can go take a look at those thirty one al policies slides on one but if you like to see this stuff actually in contacts to get a better idea idea Powerful put together . look at some Portlets and get me New portal example that I showed was that Portlet I've been Portlets about the Spring Web Flow . I Portlet gets buried inside you portal itself . any cost Rules . . yes . . with it . how would you go . Saul . we and the most Extensible way do Aggregation reign OSU that Maven Plugin that I mentioned . there's actually New You portal one given day . handles Aggregation for the portal . I'm not sure is that will completely work from from the portlet re now . you win two of Aggregation . on that but we had some special stuff set up to actually import about Aggregated file automatically a not so using XML and I think it's kind Independent at this point I'm XML in XSLT . so I think that we need to make that will more generic . and that's only been around for a couple months like think it will get around to Refactor Not sleepy in the future that will be a good option as well that for now image Friday time meet in New we plugin . . and then for the Geezer think . hopefully some of those examples will be started . . the storms . . and our own . the the the the the the . he would talk about to lose something person feel free to catch me whenever . . .