Skin Extension Plugin

Allows the interface components to pull the CSS and JavaScript they need

Description

Avoids the inclusion by default of many styling and scripting files that are only used in some pages. See the SkinExtensions design page for more information.

Usage

• $xwiki.jsx.use('Space.Page') pulls a JavaScript skin extension located in the wiki.
• $xwiki.ssx.use('Space.Page') pulls a style sheet skin extension located in the wiki.
• $xwiki.jsfx.use('path/to/file.js') pulls a JavaScript file located in the current skin, or on the filesystem, in the resources folder.
• $xwiki.ssfx.use('path/to/file.css') pulls a style sheet file located in the current skin, or on the filesystem, in the resources folder.
• $xwiki.jsrx.use('path/to/file.js') pulls a JavaScript file located in a JAR (located either in WEB-INF/lib or added through an Extension).
• $xwiki.ssrx.use('path/to/file.css') pulls a style sheet file located in a JAR (located either in WEB-INF/lib or added through an Extension).
• All the above versions accept as a second parameter a map of parameters, as in $xwiki.jsx.use('Document.Name', {'minify' : false, 'language': $context.language)
• jsfx and ssfx have an optional second boolean parameter, which allows to specify whether the URL of the pulled file extension should always pass through the skin action: $xwiki.jsfx.use('path/to/file.js', true); for enabling this behavior with the generic parameter map, use $xwiki.jsfx.use('file.js', {'forceSkinAction': true})

Important parameters:

• language is used by default for javascript extensions, set to the current context language, so that messages can be correctly translated with $msg.get
• minify allows to prevent minifying the javascript and css code, for debug purposes; defaults to true
• forceSkinAction, used only for skin resources, forces to construct URLs which pass through the skin action, which enables velocity parsing of the file; defaults to false
• defer, used only for javascript extension, which can be used to prevent scripts from being defered; defaults to true
• colorTheme allows to render a ssx extension using a specific color theme (including color themes from other wikis on a XEM)

Creating a skin extension

A skin extension is a wiki document which contains an instance of
XWiki.StyleSheetExtention class or XWiki.JavaScriptExtention class. The objects
holds the actual code (CSS or JavaScript, respectively), caching policy, and whether this code should be parsed (if it is generated by velocity or groovy code).

Using the skin extension

A style sheet or a javascript code defined in a skin extension can be used in a wiki page or in a velocity template by including one of the following lines:

Here, "My.CSS" & "My.JavaScript" are the names of those pages which contains your StyleSheetExtension / JavaScriptExtension.

Tip: How to refer a file from a skin extension

Referring files from the code of a skin extensions is useful, for example, in StyleSheetExtensions, when images are needed for styling. The StyleSheetExtension can use images that are 1) in the XWiki skin directory or 2) attached to a wiki document.

1) The $xwiki.getSkinFile() function obtains a file located on the disk. The file will be looked for in the configured skins (first in the current skin, then in the base skin, then in the default skin, and finaly, in the templates directory; see the skin documentation for details about skin structure). Example:

2) For using images that are attached to a document in the wiki:

• If the image is attached to the wiki document containing the refering StyleSheetExtension, it can be accessed as shown in the following example:

• An image attached to another wiki document can be accessed this way:

In all cases, the "Parse content" property of the StyleSheetExtension object must be set to "yes", so the code that obtains the actual url can be evaluated.

See also

• Skin Extensions Tutorial

Prerequisites & Installation Instructions

Follow these steps:

• Add the JAR in your container classpath (WEB-INF/lib)
• Edit xwiki.cfg and add the following line to the list of plugins :
  xwiki.plugins=\
        [...]
         ... ,\
       <plugin package>
• Restart your container
• Verify the plugin is properly installed by typing the following in a wiki page :
  {{velocity}}
  $xwiki.<plugin name>.name
  {{/velocity}}

  If the installation has been successful, you will see <plugin name>.