Skin Editor Application

Last modified by Thomas Mortagne on 2023/10/16 00:08

skineditorlogo.pngEase development of XWiki Skins and Skin Extensions by embedding Bespin
TypeXAR
Category
Developed by

Jerome

Active Installs26
Rating
0 Votes
LicenseMozilla Public License 1.1

Installable with the Extension Manager

Description

The Skin Editor Application eases the development of XWiki Skins and Skin eXtensions. It embeds Mozilla's Bespin Editor to offer developers a new editing experience in the browser.

This application is licensed under the Mozilla Public License. Bespin's original code is the work of the Mozilla Labs Bespin Team

Features

Editing features

The Skin Editor provides edition of wiki skin and skin extensions files with Bespin's code editor. Syntax coloration is available for JavaScript and CSS files. Velocity templates will benefit from HTML coloration for the HTML bits of the templates. Bespin's default 3 themes are available : coffee, white and black. Three font sizes are available.

editor1.png

editor2.png

The list on the right displays all available files for the Skin or the Skin eXtension currently being edited. An option allows to hide files that are empty (which in general means that the skin uses instead the file with same name from the skin the edited skin inherits). Pseudo-locks allows you to know which files are currently being edited by other developers. The list of files and locks is updated automatically every 10 seconds while you are editing, so that you are informed of new locks, and of locks being released.

files.png

If you try to edit a locked file, as for regular wiki pages, a warning message will inform you the file is being locked, and will provide you a link to force the lock. Be aware then that when saving your changes you are potentially overwriting the other developer work.

locked.png

Viewing features

In view mode, your skin or skin extension document will display a list of available files, and for each of them provide both a link to edit with the skin editor or a "zoom" link to view the source code for this file.

view.png

How to use

Download and import the application XAR in your wiki. Make sure the page XWiki.SkinEditor is saved with the programming right (If it's not, a warning message will inform you when you will try to use the skin editor.)

To make the skin editor available for a Skin or a Skin Extension document, simply write the following line as the content of this document :

#includeInContext("XWiki.SkinEditor")

The line above should be the only content of the skin document, or the skin editor will not work properly when editing.

Mozilla's Bepsin editor is built upon the HTML canvas element. You will be able to experience the editor only in browsers that supports natively this element, that is recent versions of Firefox or Safari.

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes

v0.1

Initial release of the XWiki Skin Editor.

  • Mozilla's Bespin version 0.1.1
  • Edition of Skin and Skin eXtension files with Bespin Editor
  • Pseudo-locks on files to handle conflicts between developers
  • Files browser and code inspector in view mode
Tags: IDE
    

Get Connected