Embed Size (px)
Citation preview
A XWiki skin is used to customizethe interface of a XWiki Enterpriseinstance.
A skin is composed of:
Velocity templatesCSS filesLESS filesJavaScript filesImagesFonts
What is a Skin?
·
·
······
2/16
Skin Support
Skin Used as
default
Replaced as default
in
Replaced
by
Support maintained
until
Unbundled
since
Dodo 1.2 1.3
Finch 1.2 1.3
Albatross 1.0 - 1.2 1.3 (Mar 08) Toucan 2.5 3.2
Toucan 1.3 - 1.9 2.0 (Sep 09) Colibri 4.3 4.4
Colibri 2.0 - 3.4 - 6.1 6.2 (Sep 14) Flamingo 7.0 8.0 (planned)
Flamingo 6.2 -
Lists of Skins that were bundled with XWiki Platform 3/16
Colibri vs. Colibri 3.4
Flamingo's Add button position
Flamingo's Menu Go to options
XCS Flavors (Documentation, etc.)
What do we do for Nestedchanges?
Create a new skin? (Macaw)Make Flamingo configurable?
Harder to testIncreases complexityChoosing the defaults
Skin Variations
·
·
·
·
·
··
···
4/16
Credits
How different a new skin needs to be?
Credits
Can we support multiple skins at the same time?
Responsive
HTML5
Bootstrap
LESSAlso in SSXOverride LESS templates
Icon ThemesSilk ThemeFont Awesome Theme
Flamingo ThemesBootswatch Themes
Flamingo Enhancements
·
·
·
···
···
··
< >
1 / 4
Bootswatch Themes Integration
extensions.xwiki.org Themes
7/16
PRO
PowerfulAbility to write LESS
Less complexExcludes Velocity templatesPreserves structure
CON
Overrides the Skin mechanismPossible source of bugs
Predisposed to duplication Rely on a particular structure
Confusing differences withColor Themes
Flamingo Themes vs. Skins
·
··
···
·
··
··
·8/16
Credits
Flamingo Themes: an evolution? or something to avoid?
UI generated from multiple places:Velocity, JavaScript, Macros, Sheets,etc.
Hard to achieve global consistency:Applications Isolation Missing a Style Guide
Not so extensible skin structure
Slower UI novelties adoption:Material Design GuidelinesNew JavaScript frameworks
Proposal: UI Standards fornow and the future (Jul 7, 2014)Marry to Bootstrap (+ our own add-ons built on top ofBootstrap)
Create our own standard (and bind it to whateverframework you want)
Mix Standard: XWiki specific classes + a selection ofBootstrap classes
Skin Issues
·
···
·
···
·
·
·
10/16
Credits
What will happen when Bootstrap goes out-of-style?
Skin as a collection of Extensions Points (UIXP):
Interface Extensions (UIX)
Skin as a collection of Layout Templates:
At Skin levelAt Page level
Example: Totem Application
Discussion: Stop using UIExtension Points anddeprecate this concept (Mar 4, 2014)
Define LayoutClass andContainerClass
Skin Extensibility
·
·
·
··
·12/16
Credits
How extensible should a skin be?
Skin Balance
Simplicity vs. Customisable
Standard vs. Extensible
Modern vs. Stable
Accommodation of new features
·
·
·
·
14/16
