how to use javascript in uportal 3 - jasig · pdf filehow to use javascript in uportal 3 ......
TRANSCRIPT
![Page 1: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/1.jpg)
How to use JavaScript in uPortal 3
This presentation is licensed under a Creative Commons Attribution-Noncommercial 2.5 License.
Jasig Spring ConferenceMarch 1-4, 2009 | Dallas, Texas
User Experience Leader
Jen
BoureyJava Developer
Gary
Thompson
![Page 2: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/2.jpg)
JavaScript1
2
3
4
5
6
7
uPortal JavaScript
jQuery and Fluid
Writing JS as a jQuery plugin
Portlet-specific concerns
Performance Recommendations
Resource server
![Page 3: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/3.jpg)
JavaScriptA brief definition.
1
![Page 4: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/4.jpg)
Client-side Goodness
![Page 5: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/5.jpg)
uPortal JavaScriptScripts native to uPortal.
2
![Page 6: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/6.jpg)
![Page 7: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/7.jpg)
jQuery and FluidJavaScript libraries available to uPortal and
portlets.
3
![Page 8: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/8.jpg)
jQuery
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
![Page 9: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/9.jpg)
![Page 10: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/10.jpg)
![Page 11: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/11.jpg)
Fluid Infusion
![Page 12: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/12.jpg)
![Page 13: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/13.jpg)
Writing JS as a jQuery pluginA few simple things to make your JS a standard
jQuery plugin.
4
![Page 14: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/14.jpg)
Step 1 – Create a JS File
jquery.[ insert name of plugin ].js
jquery.formatList.js.
![Page 15: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/15.jpg)
Step 2 – Extend the jQuery object
![Page 16: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/16.jpg)
Step 3 – Add Custom Alias
![Page 17: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/17.jpg)
Step 4 – Add Loop
![Page 18: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/18.jpg)
Step 5 – Add Default Options
![Page 19: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/19.jpg)
Step 6 – Add Implementation Code
![Page 20: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/20.jpg)
Step 7 – Invoke the Plugin
![Page 21: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/21.jpg)
Step 7.2 – Write Markup
![Page 22: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/22.jpg)
Step 7.3 – Progressively Enhance
![Page 23: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/23.jpg)
Portlet-specific concernsThings to keep in mind when using JS in portlets.
5
![Page 24: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/24.jpg)
Portlets: Unique Challenges
Maintaining element ID uniquenessUnpredictable page contents
Portal themeOther portletsProxied websites
Multiple javascript libraries and library versions
![Page 25: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/25.jpg)
Ensuring unique element IDs
Portlets may be added more than once to the same page<portlet:namespace/> tag
use to namespace element IDsuse tag in inline javascript or pass result to function
Subscribe ID available in some legacy channelsNeed other solutions for webproxy content
![Page 26: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/26.jpg)
Using <portlet:namespace/>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="portlet" uri="http://java.sun.com/portlet" %>
<!-- Set the namespace variable --><c:set var=”namespace”><portlet:namespace/></c:set>
<div id=”${namespace}_mydiv”></div>
<script type=”text/javascript”>$(“#${namespace}_mydiv”).html(“Hello world!”);$.my.fn( {namespace: “${namespace}”} );</script>
![Page 27: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/27.jpg)
Resulting HTML
<div id=”Pluto_someId_mydiv”></div>
<script type=”text/javascript”>$(“#Pluto_someId_mydiv”).html(“Hello world!”);$.my.fn( { namespace: “Pluto_someId” } );</script>
![Page 28: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/28.jpg)
Minimizing Library Conflicts
Import necessary script libraries within each portletLimit visible variables and method names and name them carefullyUse jQuery no-conflict in extreme modeMake sure any other shared library variables are cleared
![Page 29: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/29.jpg)
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="portlet" uri="http://java.sun.com/portlet" %> <script type=”text/javascript” language=”javascript”src=”/scripts/jquery-1.3.1.min.js”></script><c:set var=”namespace”><portlet:namespace/></c:set>
<div id=”${namespace}_mydiv”></div>
<script type=”text/javascript”>var my = my || {};my.jQuery = jQuery.noConflict(true);my.jQuery(function(){var $ = my.jQuery;$(“#${namespace}_mydiv”).html(“Hello world!”);});</script>
![Page 30: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/30.jpg)
Performance RecommendationsTips to keep your JS in top performance.
6
![Page 31: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/31.jpg)
Performance Suggestions
Minify javascript and CSS resourcesGZip javascript and CSSSet long-lived expiration cache headers
trade-off between caching concerns and upgrade considerations
Minimize HTTP requests
![Page 32: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/32.jpg)
Minifying Scripts
Command-line toolsjsminYUI compressor
YUI compressor maven pluginMinify code as part of the build processCombine files
![Page 33: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/33.jpg)
YUI Compressor 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></configuration></plugin>
![Page 34: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/34.jpg)
GZipping and Caching Options
GZipEhCache filterTomcat and ApacheJasig resource server
Cache headersApacheJasig resource server
![Page 35: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/35.jpg)
Resource ServerA new home for JS resources.
7
![Page 36: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/36.jpg)
Resource Server Basics
Project goalsWeb application for serving standard library filesCache timeout filter
StatusNew Jasig sandbox project1.0.0 RC1 now available
Current UsageBundled with uPortal 3.1
![Page 37: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/37.jpg)
Resource Server Web Application
Independent web applicationAutomatically deployed by uPortal 3.1Available for use by
uPortalPortletsother applications
![Page 38: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/38.jpg)
Resource Server Web Application
Shared standard librariesJavascriptCSSImages
All resources gzipped with appropriate cache headersShared URLs for library resources
![Page 39: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/39.jpg)
Available Libraries
jQuerysupport for DOM browsing and manipulationAJAX requests
jQuery UIrich set of components and effects
Fluid ComponentsFamfamfam silk icon set<your-favorite-library-here>
![Page 40: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/40.jpg)
Resource Server Library
IncludesJSP tag for resource retrievalCache timeout filterConfigurable GZip filter
Technical detailsBuilds on ehcache technologyMay be included as a maven dependency
![Page 41: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/41.jpg)
Using the Resource Server
JSP tag libraryfile linked from the resource server if availableif unavailable, linked from projectallows compatibility with older versions of uPortal or other portals
Cache header setting filterConfigurable GZip filter
![Page 42: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/42.jpg)
Using the JSP tag
<%@ taglib prefix="rs" uri="http://www.jasig.org/resource-server" %>
<!-- Import a script in the resource server --><rs:resourceURL var=”scriptUrl” value=”/rs/jquery/1.3.1/jquery-1.3.1.min.js” /><script type=”text/javascript” language=”javascript”src=”${resourceURL}” />
<!-- Display an image from the resource server --><img src=”<rs:resourceURL value=”/rs/famfamfam/silk/1.3/application.png”/>”/>
![Page 43: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/43.jpg)
Filter Example
<filter><filter-name>SimplePageCchingFilter</filter-name><filter-class>net.sf.ehcache.constructs.web.filter ➡.SimplePageCachingFilter</filter-class></filter>
<filter-mapping><filter-name>SimplePageCachingFilter</filter-name><url-pattern>*.js</url-pattern></filter-mapping><filter-mapping><filter-name>SimplePageCachingFilter</filter-name><url-pattern>*.css</url-pattern></filter-mapping>
![Page 44: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/44.jpg)
More Resources
jQuery: http://docs.jquery.comjQuery UI: http://ui.jquery.comFluid: http://wiki.fluidproject.orgYahoo Performance Guide: http://developer.yahoo.com/yslow/help/Jasig Confluence: http://www.ja-sig.org/wiki/display/PLT/JavaScript+Best+Practices
![Page 45: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/45.jpg)
this.question
![Page 46: How to use JavaScript in uPortal 3 - Jasig · PDF fileHow to use JavaScript in uPortal 3 ... Import necessary script libraries within each portlet Limit visible variables and method](https://reader031.vdocuments.mx/reader031/viewer/2022021818/5aa7ece87f8b9a294b8cae03/html5/thumbnails/46.jpg)
Gary Thompson
www.unicon.net
Jen Bourey
www.unicon.net