Skin Extension Plugin

The Skin Extension Plugin allows interface components to pull CSS and JavaScript resources in order to avoid the inclusion by default of styling and scripting files that are only used in some pages. The Skin Extension Plugin is enabled by default in XWiki Enterprise, so you will find it in the "xwiki.plugins" list of the xwiki.cfg file:

xwiki.plugins=\
...
  com.xpn.xwiki.plugin.skinx.JsSkinExtensionPlugin,\
  com.xpn.xwiki.plugin.skinx.JsSkinFileExtensionPlugin,\
  com.xpn.xwiki.plugin.skinx.JsResourceSkinExtensionPlugin,\
  com.xpn.xwiki.plugin.skinx.CssSkinExtensionPlugin,\
  com.xpn.xwiki.plugin.skinx.CssSkinFileExtensionPlugin,\
  com.xpn.xwiki.plugin.skinx.CssResourceSkinExtensionPlugin,\
  com.xpn.xwiki.plugin.skinx.LinkExtensionPlugin,\
...

The source code is available on GitHub at xwiki-platform-skin.

Usage

  • $xwiki.jsx.use('PageFullName') pulls a JavaScript skin extension located in the wiki.
  • $xwiki.ssx.use('PageFullName') 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 folder or in the "resources" folder.
  • $xwiki.ssfx.use('path/to/file.css') pulls a style sheet file located in the current skin folder or in the resources folder.
        
  • $xwiki.jsrx.use('path/to/file.js') pulls a JavaScript file located in a JAR located either in the "WEB-INF/lib" folder or added through an extension.
  • $xwiki.ssrx.use('path/to/file.css') pulls a style sheet file located in a JAR located either in the "WEB-INF/lib" folder or added through an extension.
        

Extra Parameters

In all the above use cases is possible to have a map of parameters as a second parameter. For instance:

$xwiki.jsx.use('Document.Name', {'minify' : false, 'language': $context.language)

The minify parameter prevents minifying the JavaScript and CSS code for debug purposes. The default value is true.

The language parameter is used by default for JavaScript extensions and it is set to the current context language, so that messages can be correctly translated with $services.localization.render.

In case you are using jsfx or ssfx there is an optional second Boolean parameter which allows you to specify whether the URL of the pulled file extension should always pass through the skin action. For instance:

$xwiki.jsfx.use('path/to/file.js', true); 

To enable this behavior with the generic parameter map, you can use the syntax below:

$xwiki.jsfx.use('file.js', {'forceSkinAction': true})

The forceSkinAction parameter is used only for skin resources and it forces to construct URLs which pass through the skin action, which enables the Velocity parsing of the file. The default value is false.

Other 2 additional parameters are:

  • defer is used only for JavaScript extensions to prevent scripts from being deferred. The default value is true.
  • colorTheme allows to render a StyleSheet extension using a specific color theme, including the ones from other wikis.

To learn how to create XWiki "JavaScript" and "StyleSheet" extensions, check the dedicated documentation page.

LESS CSS

Starting with version 6.4 XWiki has integrated the LESS Module, allowing to write LESS CSS inside a skin extension by setting the field "Content Type" to "LESS".

LESSContentType.png 

   

Related Pages

Search this space

 

Most popular tags

Failed to execute the [groovy] macro
  1. access rights
  2. activity stream
  3. annotation
  4. attachment
  5. comment
  6. Document Tree Macro
  7. export
  8. Extension Manager
  9. Flamingo skin
  10. global user
  11. Groovy event listener
  12. group
  13. nested page
  14. search
  15. skin
  16. syntax
  17. user
  18. user profile
  19. velocity macros
  20. wiki
  21. wysiwyg
  22. XWiki Applications
  23. xwikiattachment_archive table
  24. xwikiattachment table
  25. xwikiattrecyclebin table
  26. xwikiproperties table

[Display all tags from this space]