...
| Info | ||||||||
|---|---|---|---|---|---|---|---|---|
Hold off on using CDN URLs until
|
...
| Code Block | ||
|---|---|---|
| ||
skin.xml:
<resources xmlns="http://www.jasig.org/uportal/web/skin" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.jasig.org/uportal/web/skin https://source.jasig.org/schemas/resource-server/skin-configuration/skin-configuration-v1.2.xsd">
<js included="plain">//code.jquery.com/jquery-1.10.2.js</js>
<js included="aggregated">//code.jquery.com/jquery-1.10.2.min.js</js>
<js included="plain">//code.jquery.com/ui/1.10.3/jquery-ui.js</js>
<js included="aggregated">//code.jquery.com/ui/1.10.3/jquery-ui.min.js</js>
</resources>
JSP file:
<%-- This example assumes the portlet.xml defines a portlet preference includeJsLibs=false that the installer can override to set to true if needed.
--%>
<c:if test="${portletPreferencesValues['includeJsLibs'][0] != 'false'}">
<rs:aggregatedResources path The portletPreferencesValues variable comes from the defineObjects tag library. --%>
<%@ taglib prefix="portlet" uri="http://java.sun.com/portlet_2_0" %>
<portlet:defineObjects/>
<c:if test="${portletPreferencesValues['includeJsLibs'][0] != 'false'}">
<rs:aggregatedResources path="/resources.xml"/>
</c:if>
<script type="text/javascript"><rs:compressJs>
var ${n} = {}; <%-- This is one way to namespace this portlet's version of jQuery --%>
<c:choose>
<c:when test="${portletPreferencesValues['includeJsLibs'][0] != 'false'}">
${n}.jQuery = jQuery.noConflict(true)
</c:when>
<c:otherwise>
${n}.jQuery = up.jQuery;
</c:otherwise>
</c:choose>
${n}.jQuery(function(){
...
}
</rs:compressJs></script> |
...
Below is an example of loading jQuery 1.10.2, jQuery TreeView 1.4.0 and assigning them under the myPortletName var with the portlet's namespace key. The myPortletName var with the portlet namespace property is used as a namespace for this portlet's JavaScript, allowing the portlet to declare its own functions without placing them in the global namespace.
...
the portlet to declare its own functions without placing them in the global namespace.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!-- Store the portlet namespace string in the JSP page variable "n" -->
<c:set var="n"><portlet:namespace/></c:set>
<!-- Use a resource URL for common javascript libraries that multiple portlets may share and is present in the Resource Serving Webapp. -->
<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="<rs:resourceURL value='/rs/jquery-treeview/1.4.0/jquery.treeview.js'/>" type="text/javascript" ></script>
<script src="${pageContext.request.contextPath}/javascript/myPortlet.js" type="text/javascript" ></script>
<!-- alternate style <script src="<c:url value='/javascript/myPortlet.js'/>" type="text/javascript" ></script> -->
<script type="text/javascript">
/*
* Don't overwrite an existing myPortletName variable, just add to it
*/
var myPortletName = myPortletName || {};
myPortletName["${n}"] = myPortletName["${n}"] || {};
/*
* Switch jQuery to extreme noConflict mode, keeping a reference to it in the myPortletName["${n}"] namespace
*/
myPortletName["${n}"].jQuery = jQuery.noConflict(true);
/**
* Use an anonymous function to initialize all JavaScript for this portlet.
*/
(function($) {
// treeview init
$('#${n}community ul.listing').treeview({
animated: {duration:300, easing:"swing"},
collapsed: true,
unique: false
});
$('#${n}community ul.treeview ul').siblings('a').click(function(e) {
e.preventDefault();
$(this).siblings('div.hitarea').trigger('click');
$(this).blur();
});
})(myPortletName["${n}"].jQuery);
</script>
|
...
| Tip | ||
|---|---|---|
| ||
On your local and dev instance, you can permanently disable JavaScript and CSS aggregation by adding to your .bash_profile: export JAVA_OPTS="$JAVA_OPTS -Dorg.jasig.resourceserver.utils.aggr.aggregated_theme=false” Also see UE Development Tips |
| Tip |
|---|
To use JSTL expressions like ${portletPreferencesValues['includeJsLibs'][0] != 'false', make sure you have the portlet 2.0 version of the portlet tag, not the portlet 1.0 version; e.g.
<%@ taglib prefix="portlet" uri="http://java.sun.com/portlet_2_0" %> <portlet:defineObjects/> not <%@ taglib prefix="portlet" uri="http://java.sun.com/portlet" %> <portlet:defineObjects/> |
| Info | ||||
|---|---|---|---|---|
| ||||