Tuesday, September 15, 2009

CSS stylesheets in Lotus Connections 2.5

From Lotus Connections 2.0 to 2.5 the handling of theme and styles has been changed. While LC20 used static stylesheets, LC25 uses a specialized servlet for that purpose. This servlet called JAWR bundles multiple files and sends them compressed to the client. The HTML that is styled by this JAWR servlet refer to a normal URL, in LC25 this URL points to something like "/bundle/css/gzip_something/coreBundle.css". The context of the URL - /bundle/css - is mapped to the JAWR servlet, and the id of the bundle - /coreBundle.css - may look like file and is resolved by the servlet.. That makes it difficult, to find the proper stylesheet in the filesystem - simply, because it does not exist.

Looking at a sinlge LC25 component (i.e. Communities), the configuration file for the JAWR servlet can be found in /WEB-INF/properties.
In the configuration file, a bundle with the name "core" and the id "/coreBundle.css" is defined. The /coreBundle.css is mapped to the files
  • /stylesheet/update_styles.css,
  • /stylesheet/update_community.css,
  • /nav/common/styles/base/core.css,
  • /nav/common/styles/defaultTheme/defaultTheme.css,
  • /javascript/build/dijit/themes/dijit.css,
  • /nav/common/styles/base/dojo.css,
  • /nav/common/styles/defaultTheme/dojoTheme.css,
  • /javascript/source/lconn/comm/typeahead/themes/lconn.typeahead.css,
  • /javascript/source/lconn/comm/typeahead/themes/lotusBlue/LotusBlue.css,
  • /nav/common/styles/base/connectionsCore.css,
  • /nav/common/styles/base/semanticTagStyles.css,
  • /nav/lconn/styles/sprite-lconn.css
These files are located relative to the root of the web archive comm.web.war.

For faster development, the JAWR servlet offers a debug mode. According to the JAWR documentation the debug mode is enable by setting the jawr.debug.on=true in the jawr.properties file. The setting is applied after restarting the application.
The debug mode has two advantages:
  1. changes to the css stylesheets in the filesystem are effective immediately
  2. stylesheets are not included as a single, one-lined compressed file but as a set of files pointing to every single stylesheet. In the html, each mapped stylesheet is included via a separate link-tag. That way, it is transparent, which css definition is set in which stylesheet. Second, the stylesheets are not reformatted meaning that the line-numbers of tools such as firebug point to the correct line of the included stylesheet.

1 comment:

Luis Benitez said...

Thanks for documenting this. While I don't expect most people to modify these CSS files directly, it's extremely useful to understand how that bundle gets generated. You rock!