Wiki source code of Front-end Resources

Last modified by Lucas Charpentier (Sereza7) on 2024/03/12

Hide last authors
Manuel Smeria 21.3 1 {{box cssClass="floatinginfobox" title="**Contents**"}}
2 {{toc/}}
3 {{/box}}
4
Marius Dumitru Florea 35.1 5 This section aims to document all the front-end resources available in XWiki for application developers and for developers of the XWiki products. Front-end resources are of two main types:
Silvia Macovei 16.1 6
Jerome 6.1 7 * External Libraries
Manuel Smeria 21.3 8 * Internal components (based or not on some of the external libraries)
Jerome 5.1 9
Marius Dumitru Florea 35.1 10 Front-end resources are mainly composed of JavaScript libraries, CSS stylesheets and their corresponding HTML reusable snippets (or velocity macro to output this snippet) and velocity macros.
Jerome 6.1 11
Vincent Massol 39.2 12 Some of the resources presented in here are not included by default with all HTML-rendered wiki pages (it would be too much to send to the client!). You have to request their inclusion from a skin template or from the wiki page itself using the ##jsfx## plugin. For example, to request the inclusion of the [[Page Suggest Picker>>Documentation.DevGuide.FrontendResources.AutoSuggestWidget.WebHome#HSuggestPages]], you can write, in [[XWiki Syntax 2.1>>xwiki:Documentation.UserGuide.Features.XWikiSyntax]]:
Jerome 11.1 13
Ecaterina Moraru (Valica) 21.1 14 {{code}}
Jerome 11.1 15 {{velocity}}
Vincent Massol 39.3 16 $xwiki.jsfx.use('uicomponents/suggest/suggestPages.js')
Jerome 11.1 17 {{/velocity}}
Silvia Macovei 16.1 18 {{/code}}
Jerome 11.1 19
Silvia Macovei 16.1 20 The path you indicate to the ##jsfx## plugin is the relative path where the library can be found under the ##resources## directory of the XWiki webapp. Similarly to the ##jsfx## plugin, there is a ##ssfx## plugin that can be used to request the inclusion of CSS stylesheets files.
Jerome 11.1 21
Silvia Macovei 17.1 22 = External resources =
Jerome 6.1 23
Ecaterina Moraru (Valica) 28.1 24 XWiki contains some third-party libraries bundled by default.
Jerome 11.1 25
Marius Dumitru Florea 33.1 26 Hereunder is a table presenting some of the external libraries XWiki comes with:
Jerome 11.1 27
Vincent Massol 22.1 28 |=Library Name|=Description
beldaz 24.1 29 | JQuery| [[jQuery>>https://jquery.com/]] is //"a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript."//
30 | JQuery UI| [[jQuery UI>>https://jqueryui.com/]] is //"a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice."//
Lucas Charpentier (Sereza7) 42.1 31 | Bootstrap| [[Bootstrap>>https://getbootstrap.com/docs/3.4/]] is //"the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.""// Bootstrap is bundled with XWiki mainly because the XWiki skin is based on it.
Jerome 9.1 32
Simon Urli 38.2 33 See [[Using jQuery and jQuery UI>>xwiki:Documentation.DevGuide.UsingJQuery]] for an example of using jQuery and jQuery UI in an XWiki page, and more generally check [[how to integrate JavaScript Libraries in XWiki>>Documentation.DevGuide.FrontendResources.IntegratingJavaScriptLibraries.WebHome]].
beldaz 26.1 34
Silvia Macovei 17.1 35 = Internal resources =
Guillaume Lerouge 1.1 36
Silvia Macovei 17.1 37 == Front-end Components ==
Jerome 12.2 38
Marius Dumitru Florea 36.1 39 * [[Pickers>>Documentation.DevGuide.FrontendResources.Pickers.WebHome]]
Simon Urli 38.2 40 * [[Suggest Widget>>xwiki:Documentation.DevGuide.AutoSuggestWidget]]
41 * [[Live Table>>xwiki:Documentation.DevGuide.LiveTable]]
Manuel Leduc 41.1 42 * [[Live Data>>extensions:Extension.Live Data Macro.WebHome]]
Simon Urli 38.2 43 * [[XWiki Select>>xwiki:Documentation.DevGuide.XWikiSelect]]
44 * [[HTML5 Upload>>xwiki:Documentation.DevGuide.HTML5Upload]]
45 * [[Notification Widget>>xwiki:Documentation.DevGuide.XWikiNotifications]]
Lucas Charpentier (Sereza7) 40.1 46 * [[Icons>>.Icons.WebHome]]
Simon Urli 38.2 47 * [[Autosave>>xwiki:Documentation.DevGuide.Autosave]]
48 * [[Confirmation Box>>xwiki:Documentation.DevGuide.ConfirmationBox]]
49 * [[Modal Popup>>xwiki:Documentation.DevGuide.ModalPopup]]
Ecaterina Moraru (Valica) 34.1 50 * [[Table Sorter>>snippets:Extension.Table Sorter]]
Lucas Charpentier (Sereza7) 39.1 51 * {{version product="XWiki" since="15.10"}} [[Drawer>>xwiki:Documentation.DevGuide.FrontendResources.Drawer]] {{/version}}
Jerome 12.2 52
Silvia Macovei 17.1 53 == JavaScript resources ==
Jerome 11.2 54
Simon Urli 38.2 55 * [[xwiki:Documentation.DevGuide.JavaScriptAPI]]
56 * [[XWiki RESTFul API>>xwiki:Documentation.UserGuide.Features.XWikiRESTfulAPI]]
Jerome 11.2 57
Silvia Macovei 17.1 58 == StyleSheet resources ==
Jerome 11.2 59
Simon Urli 38.2 60 * [[Pagination>>xwiki:Documentation.DevGuide.Pagination]]
61 * [[Special CSS Classes>>xwiki:Documentation.DevGuide.FrontendResources.SpecialCSSClasses]]
62 * [[CSS classes used for icons>>xwiki:Documentation.DevGuide.StandardIconClasses]]
Ecaterina Moraru (Valica) 20.3 63 * Forms Layout Type:
Simon Urli 38.2 64 ** [[Vertical Layout>>xwiki:Documentation.DevGuide.VerticalForms]]
65 ** [[Inline Layout>>xwiki:Documentation.DevGuide.InlineForms]]

Get Connected