Page Comparison

...

Code Block

	xml
	xml

<c:if test="${includeJQuery}">
    <script type="text/javascript" src="<rs:resourceURL value="/rs/jquery/1.3.2/jquery-1.3.2.min.js"/>"></script>
    <script type="text/javascript" src="<rs:resourceURL value="/rs/jqueryui/1.7.2/jquery-ui-1.7.2.min.js"/>"></script>
</c:if>

<script type="text/javascript" src="<rs:resourceURL value="/rs/fluid/1.1.2/js/fluid-all-1.1.2.min.js"/>"></script>

Including Fluid CSS

Step 1: Link to fluid css resources.

Navigate to and open the css.jsp file. This file is located in the Calendar portlet.
- Source Location: CalendarPortlet/trunk/src/main/webapp/WEB-INF/jsp/css.jsp
Add the code snippet depicted in figure 1 to your css.jsp file.

...


<!-- INSTRUCTIONS
| The below code snippet should be placed just below the include.jsp directive
| and above the tag that links to the calendar.css file.
-->
<c:set var="RESOURCE"><rs:resourceURL value="/rs"/></c:set>
<link rel="stylesheet" href="${RESOURCE}/fluid/1.1.2/fss/css/fss-layout.css" type="text/css"></link>
<link rel="stylesheet" href="${RESOURCE}/fluid/1.1.2/fss/css/fss-text.css" type="text/css"></link>

...

Step 2: Place fluid css resources in rs directory.

Download the Fluid Skinning System (FSS) css files. For the latest version of FSS please see the Fluid Project and download Fluid Infusion.
Once downloaded, extract the calendar_portlet_fss.zip file.
The calendar_portlet_fss.zip file extracts to the fss directory.

...

Resolve the T.ui.keyCode fluid bug.

...

Switch to a compatible version of Fluid

While the instructions above will succeed in suppressing this portlet's inclusion of jQuery (since the Liferay portal already provides jQuery) and yet having the portlet include Fluid (since Liferay does not provide Fluid), alas, the version of Fluid the portlet trunk is configured to use by default is not compatible with the older version of jQuery included in Liferay 5.2 SP3.

The most recent version of Fluid that works with the version of jQuery in Liferay 5.2 SP 3 is Fluid 0.8.1.

This switch will resolve the T.ui.keyCode is undefined error message, as depicted below. The error message is due to the inclusion of incompatible versions of the jQuery and Fluid libraries.

Image Added

As a general rule, try to use the latest releases of both fluid and jQuery libraries. However, Liferay 5.2 SP 3 uses jQuery 1.2.6. Fluid version 0.8.1 is the recommended Fluid version for use with jQuery 1.2.6. See the Fluid Wiki Download page for a list of past releases.

Declare dependency on Fluid 0.8.1

In pom.xml, find the resources declaration:

Code Block

	xml
	xml


<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-war-plugin</artifactId>
  <configuration>
    <warName>CalendarPortlet</warName>
    <webXml>${basedir}/src/main/webapp/WEB-INF/web.xml</webXml>
    <overlays>
      <overlay>
        <groupId>org.jasig.resourceserver</groupId>
        <artifactId>resource-server-content</artifactId>
        <includes>
          <include>rs/famfamfam/silk/1.3/add.png</include>
          <include>rs/famfamfam/silk/1.3/arrow_left.png</include>
          <include>rs/famfamfam/silk/1.3/arrow_right.png</include>
          <include>rs/famfamfam/silk/1.3/calendar*.png</include>
          <include>rs/famfamfam/silk/1.3/cross.png</include>
          <include>rs/famfamfam/silk/1.3/page_edit.png</include>
          <include>rs/famfamfam/silk/1.3/tick.png</include>
          <include>rs/jquery/1.3.2/</include>
          <include>rs/jqueryui/1.7.2/</include>
          <include>rs/fluid/1.1.2/</include>
        </includes>
      </overlay>
    </overlays>
  </configuration>
</plugin>

and add the additional dependency as so:

Code Block

	xml
	xml


<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-war-plugin</artifactId>
  <configuration>
    <warName>CalendarPortlet</warName>
    <webXml>${basedir}/src/main/webapp/WEB-INF/web.xml</webXml>
    <overlays>
      <overlay>
        <groupId>org.jasig.resourceserver</groupId>
        <artifactId>resource-server-content</artifactId>
        <includes>
          <include>rs/famfamfam/silk/1.3/add.png</include>
          <include>rs/famfamfam/silk/1.3/arrow_left.png</include>
          <include>rs/famfamfam/silk/1.3/arrow_right.png</include>
          <include>rs/famfamfam/silk/1.3/calendar*.png</include>
          <include>rs/famfamfam/silk/1.3/cross.png</include>
          <include>rs/famfamfam/silk/1.3/page_edit.png</include>
          <include>rs/famfamfam/silk/1.3/tick.png</include>
          <include>rs/jquery/1.3.2/</include>
          <include>rs/jqueryui/1.7.2/</include>
          <include>rs/fluid/1.1.2/</include>
          
          <!-- additional include for Liferay 5.2 SP3 compatibility -->
          <!-- This is the latest version of Fluid that will work with the 
               version of jQuery in Liferay 5.2 SP3. -->
          <include>rs/fluid/0.8.1/</include>
        </includes>
      </overlay>
    </overlays>
  </configuration>
</plugin>

Modify the JSPs to use this version of Fluid

In each of the three JSP pages calendarMobileView.jsp, calendarNarrowView.jsp, and calendarWideView.jsp, change this:

Code Block

	xml
	xml


<script type="text/javascript" src="<rs:resourceURL value="/rs/fluid/1.1.2/js/fluid-all-1.1.2.min.js"/>"></script>

(as already modified above)

to this:

Code Block

	xml
	xml



<!-- Switched to a back version compatible with Liferay 5.2 SP3's jQuery 1.2.6 -->
<script type="text/javascript" src="<rs:resourceURL value="/rs/fluid/1.1.2/js/fluid-all-0.8.1.min.js"/>"></script>

Including Fluid CSS

This portlet depends on the Fluid Skinning System (fss). Alas, Liferay 5.2 SP3 doesn't make the Fluid Skinning System CSS available, so this portlet needs to be modified to explicitly include these files.

In order for it to be able to reference these CSS files, the fss files must be included in the portlet-local resources directory.

Step 1: Link to fluid css resources.

Navigate to and open the css.jsp file. This file is located in the Calendar portlet.
- Source Location: CalendarPortlet/trunk/src/main/webapp/WEB-INF/jsp/css.jsp
Add the code snippet depicted in figure 1 to your css.jsp file.

Code Block

	xml
	xml
title	css.jsp


<!-- INSTRUCTIONS
| The below code snippet should be placed just below the include.jsp directive
| and above the tag that links to the calendar.css file.
-->
<c:set var="RESOURCE"><rs:resourceURL value="/rs"/></c:set>
<link rel="stylesheet" href="${RESOURCE}/fluid/1.1.2/fss/css/fss-layout.css" type="text/css"></link>
<link rel="stylesheet" href="${RESOURCE}/fluid/1.1.2/fss/css/fss-text.css" type="text/css"></link>

_{Figure 1}

Step 2: Place fluid css resources in rs directory.

Download the Fluid Skinning System (FSS) css files. For the latest version of FSS please see the Fluid Project and download Fluid Infusion.
Once downloaded, extract the calendar_portlet_fss.zip file.
The calendar_portlet_fss.zip file extracts to the fss directory.

The fss directory needs to be placed in the following directory: LIFERAY_PORTAL_DIR/TOMCAT_DIR/webapps/CalendarPortlet/rs/fluid

...

/1.1.2

Map roles

Enable Calendar Administration

...

Versions Compared

Old Version 24

New Version 25

Key

Including Fluid CSS

Step 1: Link to fluid css resources.

Step 2: Place fluid css resources in rs directory.

Resolve the T.ui.keyCode fluid bug.

Switch to a compatible version of Fluid

Declare dependency on Fluid 0.8.1

Modify the JSPs to use this version of Fluid

Including Fluid CSS

Step 1: Link to fluid css resources.

Step 2: Place fluid css resources in rs directory.

Map roles

Enable Calendar Administration