Wiki source code of Create a Skin Extension
Last modified by Eleni Cojocariu on 2026/10/02 09:12
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | Add a [[skin extension>>doc:documentation.xs.dev.skin-extensions.WebHome]] to a wiki page, JavaScript or CSS, using the object editor, which is offered in [[advanced mode>>doc:documentation.xs.user.base.page.edit.simple-advanced.WebHome||anchor="HAdvancedMode"]] only. | ||
| 2 | |||
| 3 | 1. Open the page that will hold the extension in the [[object editor>>doc:documentation.xs.user.base.page.edit.edit-object-editor.WebHome]]; any page will do, new or existing. In the "New object" list start typing ##JavaScriptExtension##, pick it under "XWiki" and click "Add":((( | ||
| 4 | {{image reference="add-javascript-extension-object.png" size="large" alt="The New object list of the object editor, filtered to JavaScriptExtension under the XWiki group, with the Add button beside it"/}} | ||
| 5 | ))) | ||
| 6 | 1. The page reloads with an empty object. Write in "Code" the JavaScript to run, give the object a "Name" that says what it does, and set "Use this extension" to "On demand only". Leave "Parse content" and "Caching policy" as they are; [[Skin Extension Object Fields>>doc:documentation.xs.dev.skin-extensions.object-fields.WebHome]] covers both. Save the page:((( | ||
| 7 | {{image reference="javascript-extension-object.png" size="large" alt="A filled XWiki.JavaScriptExtension object: the name Hello World, four lines of JavaScript in the Code field, Use this extension set to On demand only"/}} | ||
| 8 | ))) | ||
| 9 | 1. A style sheet extension is the same procedure with ##XWiki.StyleSheetExtension## in place of ##XWiki.JavaScriptExtension##, and CSS in "Code", or [[LESS>>doc:documentation.xs.dev.skin-extensions.less.WebHome]], which that class alone accepts:((( | ||
| 10 | {{image reference="stylesheet-extension-object.png" size="large" alt="A filled XWiki.StyleSheetExtension object: the name Blue Background, a CSS rule in the Code field, and the Content Type field set to CSS"/}} | ||
| 11 | ))) | ||
| 12 | 1. Pull the extension where it is wanted. Edit such a page in wiki mode and name the page that holds the object, ##ssx## standing in for ##jsx## to pull a style sheet extension; [[Skin Extension Script API>>doc:documentation.xs.dev.skin-extensions.script-api.WebHome]] lists the five other pull methods and the parameters they accept:((( | ||
| 13 | {{code language="velocity"}} | ||
| 14 | {{velocity}} | ||
| 15 | #set ($discard = $xwiki.jsx.use('Sandbox.HelloWorld.WebHome')) | ||
| 16 | {{/velocity}} | ||
| 17 | {{/code}} | ||
| 18 | ))) | ||
| 19 | 1. An extension that belongs on every page of the wiki is not pulled at all: set "Use this extension" to "On this wiki" instead, a value that comes with a [[right its page author must have>>doc:documentation.xs.dev.skin-extensions.object-fields.WebHome]]. | ||
| 20 | 1. Open a page that pulls the extension. The JavaScript has run:((( | ||
| 21 | {{image reference="javascript-extension-result.png" size="extra" alt="A wiki page whose content opens with an information box reading Hello from a skin extension, written there by the extension"/}} | ||
| 22 | |||
| 23 | The style sheet has restyled the content of the page: | ||
| 24 | |||
| 25 | {{image reference="stylesheet-extension-result.png" size="extra" alt="A wiki page whose content area has the light blue background the style sheet extension sets"/}} | ||
| 26 | |||
| 27 | Both arrive in the ##head## element of the response, beside the files of the skin itself. The JavaScript extension above is written there as: | ||
| 28 | |||
| 29 | {{code language="html"}} | ||
| 30 | <script src='/xwiki/bin/jsx/Sandbox/HelloWorld/WebHome?language=en&docVersion=2.1' defer='defer'></script> | ||
| 31 | {{/code}} | ||
| 32 | |||
| 33 | Opening that address returns the code as the browser receives it, minified; [[##minify=false##>>doc:documentation.xs.dev.skin-extensions.script-api.WebHome]] returns it as it was written. | ||
| 34 | ))) |
