From version 6.1
edited by Thomas Mortagne
on 2017/08/18 10:20
To version 7.1
edited by Krzysztof PÅ‚achno
on 2017/08/24 13:03
Change comment: There is no comment for this version

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.ThomasMortagne
1 +xwiki:XWiki.cristof_p
ExtensionCode.ExtensionClass[0]
Description
... ... @@ -9,9 +9,27 @@
9 9  
10 10  == Example ==
11 11  
12 -Let's assume that you want to import to XWiki some usefull UI JS library - [[egjs>>https://naver.github.io/egjs/]]
13 -After installation of Extension Repository Connector - NPM, go to the "Extensions" page of the Administration. Then search for ##egjs## by choosing "All Extensions" from the drop down list filter. The result should be more less the following:
12 +Let's assume that you want to import to XWiki some usefull JS library for more complicated math operations - [[mathjs>>http://mathjs.org/]]
13 +After installation of Extension Repository Connector - NPM, go to the "Extensions" page of the Administration. Then search for ## mathjs## by choosing "All Extensions" from the drop down list filter. The result should be more less the following:
14 +
14 14  {{image reference="simpleSearch.PNG" width="600px"/}}
15 15  
16 -Then choose from the requests package from the result list and proceed to install it as you'd do for any XWiki extension:
17 +Then choose the #mathjs# from the the result list and choosing option "Install on farm" proceed to install it as you'd do for any XWiki extension:
17 17  {{image reference="install.PNG" width="600px"/}}
19 +
20 +
21 +=== Skin Extension using ##mathjs## ===
22 +
23 +To see your imported JS library in action you may create [[JavaScript Skin Extension>>Skin Extension Plugin]] (a.k.a ##jsx##). To get to know how to create such extension refer to [[Skin Extension Tutorial>>platform:DevGuide.SkinExtensionsTutorial]] particularly to [[Minimal JavaScript eXtension >>http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial#HMyfirstSkineXtension]] guide.
24 +Create this Minimal JavaScript eXtension as described in tutorial and then replace #Code section with following snippet:
25 +{{code language="JS"}}require(["$services.webjars.url('mathjs/3.16.2/dist/math.js')"], function(math){
26 + var res = math.sqrt(-4);
27 + alert("Square root of -4 is: " + res);
28 +});{{/code}}
29 +
30 +{{info}}
31 +You'll find more information about syntax of importing JS libraries into Skin Extensions code on [[WebJars API>>Extension.WebJars Integration]] page.
32 +{{/info}}
33 +
34 +When you refresh your page as the result you should see alert popup with text more less like following:
35 +{{image reference="result.PNG" width="600px"/}}

Get Connected