Wiki source code of Front-end Resources
Version 28.2 by Vincent Massol on 2017/09/05
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{box cssClass="floatinginfobox" title="**Contents**"}} | ||
| 2 | {{toc/}} | ||
| 3 | {{/box}} | ||
| 4 | |||
| 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: | ||
| 6 | |||
| 7 | * External Libraries | ||
| 8 | * Internal components (based or not on some of the external libraries) | ||
| 9 | |||
| 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. | ||
| 11 | |||
| 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 scriptaculous slider library, you can write, in [[XWiki Syntax 1.0>>platform:Main.XWikiSyntax]]: | ||
| 13 | |||
| 14 | {{code}} | ||
| 15 | $xwiki.jsfx.use("js/scriptaculous/slider.js") | ||
| 16 | {{/code}} | ||
| 17 | |||
| 18 | In [[XWiki Syntax 2.0>>platform:Main.XWikiSyntax]]: | ||
| 19 | |||
| 20 | {{code}} | ||
| 21 | {{velocity}} | ||
| 22 | $xwiki.jsfx.use("js/scriptaculous/slider.js") | ||
| 23 | {{/velocity}} | ||
| 24 | {{/code}} | ||
| 25 | |||
| 26 | 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. | ||
| 27 | |||
| 28 | = External resources = | ||
| 29 | |||
| 30 | XWiki contains some third-party libraries bundled by default. | ||
| 31 | |||
| 32 | Hereunder is a table presenting some of the external libraries XWiki comes with: | ||
| 33 | |||
| 34 | |=Library Name|=Description | ||
| 35 | |[[image:prototype.gif]]|[[Prototype>>http://prototypejs.org]] is a //"JavaScript framework that aims to ease development of web applications"//. It extends the JavaScript native objects and browser objects providing utilities for Ajax, OOP-style classes, and much more. Prototype is the only JavaScript library that is systematically shipped with any wiki page in XWiki. | ||
| 36 | |[[image:smartclient.png]]|[[Smartclient>>http://www.smartclient.com/]] is an AJAX RIA system that allows the easy development of rich interface components. Using it in XWiki, you can build powerful front-end widgets that can leverage [[XWiki's RESTful API>>platform:Features.XWikiRESTfulAPI]]. | ||
| 37 | | Scriptaculous|\\ | ||
| 38 | | YUI|\\ | ||
| 39 | | [[platform:DevGuide.LiveValidation]]|\\ | ||
| 40 | | 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."// | ||
| 41 | | 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."// | ||
| 42 | | Bootstrap| [[Bootstrap>>http://getbootstrap.com/]] 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. | ||
| 43 | |||
| 44 | See [[Using jQuery and jQuery UI>>platform:DevGuide.UsingJQuery]] for an example of using jQuery and jQuery UI in an XWiki page. | ||
| 45 | |||
| 46 | = Internal resources = | ||
| 47 | |||
| 48 | == Front-end Components == | ||
| 49 | |||
| 50 | * [[Modal Popup>>platform:DevGuide.ModalPopup]] | ||
| 51 | * [[Confirmation Box>>platform:DevGuide.ConfirmationBox]] | ||
| 52 | * [[platform:DevGuide.LiveTable]] | ||
| 53 | * [[Auto Suggest Widget>>platform:DevGuide.AutoSuggestWidget]] | ||
| 54 | * [[Notification Widget>>platform:DevGuide.XWikiNotifications]] | ||
| 55 | * [[HTML5 Upload>>platform:DevGuide.HTML5Upload]] | ||
| 56 | * [[Autosave>>platform:DevGuide.Autosave]] | ||
| 57 | * [[XWiki Select>>platform:DevGuide.XWikiSelect]] | ||
| 58 | |||
| 59 | == JavaScript resources == | ||
| 60 | |||
| 61 | * [[platform:DevGuide.JavaScriptAPI]] | ||
| 62 | * [[XWiki RESTFul API>>platform:Features.XWikiRESTfulAPI]] | ||
| 63 | |||
| 64 | == StyleSheet resources == | ||
| 65 | |||
| 66 | * [[Pagination>>platform:DevGuide.Pagination]] | ||
| 67 | * [[Result List>>platform:DevGuide.ListOfResults]] | ||
| 68 | * [[Search Box>>platform:DevGuide.SearchBox]] | ||
| 69 | * [[Suggest Box>>platform:DevGuide.SuggestBox]] | ||
| 70 | * [[Special CSS Classes>>platform:DevGuide.SpecialCSSClasses]] | ||
| 71 | * [[CSS classes used for icons>>platform:DevGuide.StandardIconClasses]] | ||
| 72 | * Forms Layout Type: | ||
| 73 | ** [[Vertical Layout>>platform:DevGuide.VerticalForms]] | ||
| 74 | ** [[Inline Layout>>platform:DevGuide.InlineForms]] |
