SkinExtensions Plugin

SkinExtensions Plugin

Purpose

Allows the interface components to pull the CSS and JavaScript they need, thus avoiding 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

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:

$xwiki.ssx.use("My.CSS")

$xwiki.jsx.use("My.JavaScript")

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:

background-image: url($xwiki.getSkinFile("path/to/the/image.png"));

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

  background-image: url($doc.getAttachmentURL("image.png"));

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

  background-image: url($xwiki.getDocument("Some.Document").getAttachmentURL("image.png"));

See also

• Skin Extensions Tutorial