[xwiki-users] Create Javascript application in XWiki
I would like to create a Javascript application in XWiki. My precise goal is to go get some content from Jenkins (build status) and render it over a static image using d3.js or any other rich rendering framework. I suppose the only way to implement that is to write my webpage as HTML. But, then, how will I use external frameworks ? (typically d3.js) Thanks -- Nicolas Delsaux
Hi Nicolas, Typically, the flow is the following: 1. You create a page and the markup (wiki syntax + additional HTML if you need form UI elements or if you can not reuse property displayers from velocity, e.g. $doc.display('someProperty', 'edit') [1] ) 2. You add a skin extension [2] object to that document where you add your CSS and JS needs 3. Inside that JSX object you can depend on 3rd party libraries using the recommended require.js approach [3] or anything else that suites you 4. Profit More such information is available on the dev guide's tutorials and resources page [4]. Hope this helps, Eduard P.S.: Regarding javascript, be aware that we are currently moving away from Prototype.js and towards jQuery, but a lot of documentation still talks about how to do things with Prototype.js, you just need to digg deep enough to find the jQuery alternatives, figure them out, ask people for help and, document back your findings (on xwiki.org pages) so that you can help others in your same situation :) ---------- [1] http://platform.xwiki.org/xwiki/bin/view/DevGuide/API [2] http://extensions.xwiki.org/xwiki/bin/view/Extension/Skin+Extension+Plugin [3] http://platform.xwiki.org/xwiki/bin/view/DevGuide/JavaScriptAPI#HRequireJSan... [4] http://platform.xwiki.org/xwiki/bin/view/DevGuide/ On Mon, Mar 23, 2015 at 5:33 PM, Nicolas Delsaux <nicolas.delsaux@gmx.fr> wrote:
I would like to create a Javascript application in XWiki. My precise goal is to go get some content from Jenkins (build status) and render it over a static image using d3.js or any other rich rendering framework. I suppose the only way to implement that is to write my webpage as HTML. But, then, how will I use external frameworks ? (typically d3.js)
Thanks
-- Nicolas Delsaux _______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
OK I however have another question on that topic. As a Java dev, I'm quite fond of Webjars as they provide me a way to make sure which version of a Javascript I use. I've seen that XWiki can integrate webjars (http://extensions.xwiki.org/xwiki/bin/view/Extension/WebJars+Integration) but, as far as I understand, it's only available when writing extensions ... When writing that, I realize the same question can be asked about Groovy : if I try to use a dependency using Groovy grapes, will it work ? It seems to me it won't work, but can anyone confirm ? Le 23/03/2015 17:09, Eduard Moraru a écrit :
Hi Nicolas,
Typically, the flow is the following: 1. You create a page and the markup (wiki syntax + additional HTML if you need form UI elements or if you can not reuse property displayers from velocity, e.g. $doc.display('someProperty', 'edit') [1] ) 2. You add a skin extension [2] object to that document where you add your CSS and JS needs 3. Inside that JSX object you can depend on 3rd party libraries using the recommended require.js approach [3] or anything else that suites you 4. Profit
More such information is available on the dev guide's tutorials and resources page [4].
Hope this helps, Eduard
P.S.: Regarding javascript, be aware that we are currently moving away from Prototype.js and towards jQuery, but a lot of documentation still talks about how to do things with Prototype.js, you just need to digg deep enough to find the jQuery alternatives, figure them out, ask people for help and, document back your findings (on xwiki.org pages) so that you can help others in your same situation :)
---------- [1] http://platform.xwiki.org/xwiki/bin/view/DevGuide/API [2] http://extensions.xwiki.org/xwiki/bin/view/Extension/Skin+Extension+Plugin [3] http://platform.xwiki.org/xwiki/bin/view/DevGuide/JavaScriptAPI#HRequireJSan... [4] http://platform.xwiki.org/xwiki/bin/view/DevGuide/
On Mon, Mar 23, 2015 at 5:33 PM, Nicolas Delsaux <nicolas.delsaux@gmx.fr> wrote:
I would like to create a Javascript application in XWiki. My precise goal is to go get some content from Jenkins (build status) and render it over a static image using d3.js or any other rich rendering framework. I suppose the only way to implement that is to write my webpage as HTML. But, then, how will I use external frameworks ? (typically d3.js)
Thanks
-- Nicolas Delsaux _______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
On Tue, Mar 24, 2015 at 10:59 AM, Nicolas Delsaux <nicolas.delsaux@gmx.fr> wrote:
OK I however have another question on that topic. As a Java dev, I'm quite fond of Webjars as they provide me a way to make sure which version of a Javascript I use. I've seen that XWiki can integrate webjars (http://extensions.xwiki.org/xwiki/bin/view/Extension/WebJars+Integration) but, as far as I understand, it's only available when writing extensions ...
Not really, it's mostly used as extension dependency but you can install any jar you want. It's just that the simple search is supported only with XWiki repositories like http://extensions.xwiki.org. If you want to install a jar from any of the maven repositories registered you can use "Advanced Search" and indicate the exact id and version you want to install it.
When writing that, I realize the same question can be asked about Groovy : if I try to use a dependency using Groovy grapes, will it work ? It seems to me it won't work, but can anyone confirm ?
As far as I know Groovy grapes automatically download and load jar you declare as long as ivy is provided and XWiki embeds Ivy (it's actually embedding it only for this reason since we don't use it directly). Not sure where it search by default but I guess it should find any Maven Central jar.
Le 23/03/2015 17:09, Eduard Moraru a écrit :
Hi Nicolas,
Typically, the flow is the following: 1. You create a page and the markup (wiki syntax + additional HTML if you need form UI elements or if you can not reuse property displayers from velocity, e.g. $doc.display('someProperty', 'edit') [1] ) 2. You add a skin extension [2] object to that document where you add your CSS and JS needs 3. Inside that JSX object you can depend on 3rd party libraries using the recommended require.js approach [3] or anything else that suites you 4. Profit
More such information is available on the dev guide's tutorials and resources page [4].
Hope this helps, Eduard
P.S.: Regarding javascript, be aware that we are currently moving away from Prototype.js and towards jQuery, but a lot of documentation still talks about how to do things with Prototype.js, you just need to digg deep enough to find the jQuery alternatives, figure them out, ask people for help and, document back your findings (on xwiki.org pages) so that you can help others in your same situation :)
---------- [1] http://platform.xwiki.org/xwiki/bin/view/DevGuide/API [2] http://extensions.xwiki.org/xwiki/bin/view/Extension/Skin+Extension+Plugin [3]
http://platform.xwiki.org/xwiki/bin/view/DevGuide/JavaScriptAPI#HRequireJSan... [4] http://platform.xwiki.org/xwiki/bin/view/DevGuide/
On Mon, Mar 23, 2015 at 5:33 PM, Nicolas Delsaux <nicolas.delsaux@gmx.fr> wrote:
I would like to create a Javascript application in XWiki. My precise goal is to go get some content from Jenkins (build status) and render it over a static image using d3.js or any other rich rendering framework. I suppose the only way to implement that is to write my webpage as HTML. But, then, how will I use external frameworks ? (typically d3.js)
Thanks
-- Nicolas Delsaux _______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
-- Thomas Mortagne
Hi Nicolas, On 24 Mar 2015 at 11:07:45, Thomas Mortagne (thomas.mortagne@xwiki.com(mailto:thomas.mortagne@xwiki.com)) wrote:
On Tue, Mar 24, 2015 at 10:59 AM, Nicolas Delsaux wrote:
OK I however have another question on that topic. As a Java dev, I'm quite fond of Webjars as they provide me a way to make sure which version of a Javascript I use. I've seen that XWiki can integrate webjars (http://extensions.xwiki.org/xwiki/bin/view/Extension/WebJars+Integration) but, as far as I understand, it's only available when writing extensions ...
Not really, it's mostly used as extension dependency but you can install any jar you want. It's just that the simple search is supported only with XWiki repositories like http://extensions.xwiki.org. If you want to install a jar from any of the maven repositories registered you can use "Advanced Search" and indicate the exact id and version you want to install it.
When writing that, I realize the same question can be asked about Groovy : if I try to use a dependency using Groovy grapes, will it work ? It seems to me it won't work, but can anyone confirm ?
As far as I know Groovy grapes automatically download and load jar you declare as long as ivy is provided and XWiki embeds Ivy (it's actually embedding it only for this reason since we don't use it directly). Not sure where it search by default but I guess it should find any Maven Central jar.
Yes Groovy Grapes work inside groovy script in wiki pages. For example: http://extensions.xwiki.org/xwiki/bin/view/Extension/Twitter+Search Thanks -Vincent
Le 23/03/2015 17:09, Eduard Moraru a écrit :
Hi Nicolas,
Typically, the flow is the following: 1. You create a page and the markup (wiki syntax + additional HTML if you need form UI elements or if you can not reuse property displayers from velocity, e.g. $doc.display('someProperty', 'edit') [1] ) 2. You add a skin extension [2] object to that document where you add your CSS and JS needs 3. Inside that JSX object you can depend on 3rd party libraries using the recommended require.js approach [3] or anything else that suites you 4. Profit
More such information is available on the dev guide's tutorials and resources page [4].
Hope this helps, Eduard
P.S.: Regarding javascript, be aware that we are currently moving away from Prototype.js and towards jQuery, but a lot of documentation still talks about how to do things with Prototype.js, you just need to digg deep enough to find the jQuery alternatives, figure them out, ask people for help and, document back your findings (on xwiki.org pages) so that you can help others in your same situation :)
---------- [1] http://platform.xwiki.org/xwiki/bin/view/DevGuide/API [2] http://extensions.xwiki.org/xwiki/bin/view/Extension/Skin+Extension+Plugin [3]
http://platform.xwiki.org/xwiki/bin/view/DevGuide/JavaScriptAPI#HRequireJSan... [4] http://platform.xwiki.org/xwiki/bin/view/DevGuide/
On Mon, Mar 23, 2015 at 5:33 PM, Nicolas Delsaux wrote:
I would like to create a Javascript application in XWiki. My precise goal is to go get some content from Jenkins (build status) and render it over a static image using d3.js or any other rich rendering framework. I suppose the only way to implement that is to write my webpage as HTML. But, then, how will I use external frameworks ? (typically d3.js)
Thanks
-- Nicolas Delsaux
Hi Nicolas, On 23 Mar 2015 at 16:33:55, Nicolas Delsaux (nicolas.delsaux@gmx.fr(mailto:nicolas.delsaux@gmx.fr)) wrote:
I would like to create a Javascript application in XWiki. My precise goal is to go get some content from Jenkins (build status) and render it over a static image using d3.js or any other rich rendering framework. I suppose the only way to implement that is to write my webpage as HTML. But, then, how will I use external frameworks ? (typically d3.js)
Regarding D3js you have an example here: http://extensions.xwiki.org/xwiki/bin/view/Extension/D3+Example And there’s even a macro here (not tried it myself): http://extensions.xwiki.org/xwiki/bin/view/Extension/d3js Hope it helps -Vincent
Thanks
-- Nicolas Delsaux
On 24 Mar 2015 at 11:12:54, vincent@massol.net (vincent@massol.net(mailto:vincent@massol.net)) wrote:
Hi Nicolas,
On 23 Mar 2015 at 16:33:55, Nicolas Delsaux (nicolas.delsaux@gmx.fr(mailto:nicolas.delsaux@gmx.fr)) wrote:
I would like to create a Javascript application in XWiki. My precise goal is to go get some content from Jenkins (build status) and render it over a static image using d3.js or any other rich rendering framework. I suppose the only way to implement that is to write my webpage as HTML. But, then, how will I use external frameworks ? (typically d3.js)
Regarding D3js you have an example here: http://extensions.xwiki.org/xwiki/bin/view/Extension/D3+Example
And there’s even a macro here (not tried it myself): http://extensions.xwiki.org/xwiki/bin/view/Extension/d3js
Just a note: these examples were written prior to us having the webjar integration support. So with webjars, it’s even easier and you don’t need to include d3js in an XWiki Object anymore. You can just put the webjar in WEB-INF/lib and it’ll be usable. See http://extensions.xwiki.org/xwiki/bin/view/Extension/WebJars+Integration Thanks -Vincent
Hope it helps -Vincent
Thanks
-- Nicolas Delsaux
Thanks for all your replies, Vincent and Thomas. I'm quite ... worried by the fact to directly put my webjars dependencies in WEB-INF/lib, directly or through "Advanced Search", as it would prevent me to have explicit link between the JS lib and the place where it is used. What I fear is the WEB-INF/lib folder becoming kind of messy, with all JS dependencies dropped there without proper usage identification, and a zealous sysadmin coming there and purging the folder aggresively. Have you got any kind of best practices to avoid that ? Le 24/03/2015 11:16, vincent@massol.net a écrit :
On 24 Mar 2015 at 11:12:54, vincent@massol.net (vincent@massol.net(mailto:vincent@massol.net)) wrote:
Hi Nicolas,
On 23 Mar 2015 at 16:33:55, Nicolas Delsaux (nicolas.delsaux@gmx.fr(mailto:nicolas.delsaux@gmx.fr)) wrote:
I would like to create a Javascript application in XWiki. My precise goal is to go get some content from Jenkins (build status) and render it over a static image using d3.js or any other rich rendering framework. I suppose the only way to implement that is to write my webpage as HTML. But, then, how will I use external frameworks ? (typically d3.js)
Regarding D3js you have an example here: http://extensions.xwiki.org/xwiki/bin/view/Extension/D3+Example
And there’s even a macro here (not tried it myself): http://extensions.xwiki.org/xwiki/bin/view/Extension/d3js Just a note: these examples were written prior to us having the webjar integration support. So with webjars, it’s even easier and you don’t need to include d3js in an XWiki Object anymore. You can just put the webjar in WEB-INF/lib and it’ll be usable.
See http://extensions.xwiki.org/xwiki/bin/view/Extension/WebJars+Integration
Thanks -Vincent
Hope it helps -Vincent
Thanks
-- Nicolas Delsaux
users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
On 24 Mar 2015 at 11:22:52, Nicolas Delsaux (nicolas.delsaux@gmx.fr(mailto:nicolas.delsaux@gmx.fr)) wrote:
Thanks for all your replies, Vincent and Thomas. I'm quite ... worried by the fact to directly put my webjars dependencies in WEB-INF/lib, directly or through "Advanced Search", as it would prevent me to have explicit link between the JS lib and the place where it is used. What I fear is the WEB-INF/lib folder becoming kind of messy, with all JS dependencies dropped there without proper usage identification, and a zealous sysadmin coming there and purging the folder aggresively. Have you got any kind of best practices to avoid that ?
If you’re doing dev and writing an extension for your code then all you need is add a dependency to the webjar in your extension’s POM and then install it through the Extension Manager and it won’t go in WEB-INF/lib :) Thanks -Vincent
Le 24/03/2015 11:16, vincent@massol.net a écrit :
On 24 Mar 2015 at 11:12:54, vincent@massol.net (vincent@massol.net(mailto:vincent@massol.net)) wrote:
Hi Nicolas,
On 23 Mar 2015 at 16:33:55, Nicolas Delsaux (nicolas.delsaux@gmx.fr(mailto:nicolas.delsaux@gmx.fr)) wrote:
I would like to create a Javascript application in XWiki. My precise goal is to go get some content from Jenkins (build status) and render it over a static image using d3.js or any other rich rendering framework. I suppose the only way to implement that is to write my webpage as HTML. But, then, how will I use external frameworks ? (typically d3.js)
Regarding D3js you have an example here: http://extensions.xwiki.org/xwiki/bin/view/Extension/D3+Example
And there’s even a macro here (not tried it myself): http://extensions.xwiki.org/xwiki/bin/view/Extension/d3js Just a note: these examples were written prior to us having the webjar integration support. So with webjars, it’s even easier and you don’t need to include d3js in an XWiki Object anymore. You can just put the webjar in WEB-INF/lib and it’ll be usable.
See http://extensions.xwiki.org/xwiki/bin/view/Extension/WebJars+Integration
Thanks -Vincent
Hope it helps -Vincent
Thanks
-- Nicolas Delsaux
users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
Extensions don't go in WEB-INF/lib, they go in a special local repository in the configured permanent directory. On Tue, Mar 24, 2015 at 11:24 AM, vincent@massol.net <vincent@massol.net> wrote:
On 24 Mar 2015 at 11:22:52, Nicolas Delsaux (nicolas.delsaux@gmx.fr(mailto:nicolas.delsaux@gmx.fr)) wrote:
Thanks for all your replies, Vincent and Thomas. I'm quite ... worried by the fact to directly put my webjars dependencies in WEB-INF/lib, directly or through "Advanced Search", as it would prevent me to have explicit link between the JS lib and the place where it is used. What I fear is the WEB-INF/lib folder becoming kind of messy, with all JS dependencies dropped there without proper usage identification, and a zealous sysadmin coming there and purging the folder aggresively. Have you got any kind of best practices to avoid that ?
If you’re doing dev and writing an extension for your code then all you need is add a dependency to the webjar in your extension’s POM and then install it through the Extension Manager and it won’t go in WEB-INF/lib :)
Thanks -Vincent
Le 24/03/2015 11:16, vincent@massol.net a écrit :
On 24 Mar 2015 at 11:12:54, vincent@massol.net (vincent@massol.net(mailto:vincent@massol.net)) wrote:
Hi Nicolas,
On 23 Mar 2015 at 16:33:55, Nicolas Delsaux (nicolas.delsaux@gmx.fr(mailto:nicolas.delsaux@gmx.fr)) wrote:
I would like to create a Javascript application in XWiki. My precise goal is to go get some content from Jenkins (build status) and render it over a static image using d3.js or any other rich rendering framework. I suppose the only way to implement that is to write my webpage as HTML. But, then, how will I use external frameworks ? (typically d3.js)
Regarding D3js you have an example here: http://extensions.xwiki.org/xwiki/bin/view/Extension/D3+Example
And there’s even a macro here (not tried it myself): http://extensions.xwiki.org/xwiki/bin/view/Extension/d3js Just a note: these examples were written prior to us having the webjar integration support. So with webjars, it’s even easier and you don’t need to include d3js in an XWiki Object anymore. You can just put the webjar in WEB-INF/lib and it’ll be usable.
See http://extensions.xwiki.org/xwiki/bin/view/Extension/WebJars+Integration
Thanks -Vincent
Hope it helps -Vincent
Thanks
-- Nicolas Delsaux
users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________ users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
users mailing list users@xwiki.org http://lists.xwiki.org/mailman/listinfo/users
-- Thomas Mortagne
Le 24/03/2015 11:24, vincent@massol.net a écrit :
If you’re doing dev and writing an extension for your code then all you need is add a dependency to the webjar in your extension’s POM and then install it through the Extension Manager and it won’t go in WEB-INF/lib :)
Oh, I see, you're enforcing good practices by making sure any other practice will be a tremendous pain. Nicely done ;-) (I'm not joking on you, I really find it is the right way) -- Nicolas Delsaux
participants (4)
-
Eduard Moraru -
Nicolas Delsaux -
Thomas Mortagne -
vincent＠massol.net