Re: [xwiki-users] jQuery UI components in XWiki

2015-08-13 Thread Thomas Mortagne 
Yes bootstrap is bundled mostly because XWiki skin is based on it.
Le 13 août 2015 6:42 AM, Bryn Jeffries bryn.jeffr...@sydney.edu.au a
écrit :

 Vincent Massol wrote:
  Would be great if you could help us and add this information
  on http://platform.xwiki.org/xwiki/bin/view/DevGuide/FrontendResources :
 )
 
  If you don’t have the time, I’ll do it when I’m back from holidays
 (still on
  holidays for the coming 4 days :)).

 Sure, I'll add what I can. Incidentally, am I right in thinking Bootstrap
 is also bundled with XWiki?

 Many thanks for responding during your well-earned time off.

 Bryn
 ___
 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

Re: [xwiki-users] jQuery UI components in XWiki

2015-08-12 Thread vinc...@massol.net 
Hi Bryn,

On 12 Aug 2015 at 12:09:56, Bryn Jeffries 
(bryn.jeffr...@sydney.edu.au(mailto:bryn.jeffr...@sydney.edu.au)) wrote:

 Hi,
  
 I'm experimenting with including some jQuery UI elements into some wiki pages 
 using XWiki 7.1. As a test, I've been trying to get the spinner example from 
 http://api.jqueryui.com/spinner/ to work:
  
 I have constructed a minimal page, with content body:
 {{velocity}}
 {{html}}
  
 {{/html}}
 {{/velocity}}
  
 And for the page I've added an objects of type XWiki.JavaScriptExtension 
 containing code:
 require(['jquery'], function($) {
 $( #spinner ).spinner();
 });
  
 However, viewing the page yields an error
 TypeError: a(...).spinner is not a function
 require([jquery],function(a){a(#spinner).spinner()});
  
 So it looks as though the spinner UI code is missing, so I'm guessing I need 
 to include the jQuery UI library somehow. I'm a little confused because there 
 is a jquery-ui-1.11.1.jar file in /usr/lib/xwiki/WEB-INF/lib/ which led me to 
 believe that it was already bundled with XWiki.
 http://platform.xwiki.org/xwiki/bin/view/DevGuide/FrontendResources says 
 Prototype is the only JavaScript library that is systematically shipped with 
 any wiki page in XWiki. But it's a bit old.
  
 Any pointers?

I’m far from a JS expert, but it seems your code is saying that it depends on 
jquery but not on jquery-ui and https://api.jqueryui.com/spinner/ seems to 
indicate that the spinner is located in jquery-ui…

Try depending on jquery-ui maybe?

Thanks
-Vincent

 Thanks,
  
 Bryn
___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users

Re: [xwiki-users] jQuery UI components in XWiki

2015-08-12 Thread vinc...@massol.net 
I’ve tried to improve a bit 
http://platform.xwiki.org/xwiki/bin/view/DevGuide/FrontendResources but I’m 
sure I’ve forgotten some.

We also need to update that page to explain requirejs and the webjar mechanisms 
I think.

Thanks
-Vincent


On 12 Aug 2015 at 16:50:47, vinc...@massol.net 
(vinc...@massol.net(mailto:vinc...@massol.net)) wrote:

 Hi Bryn,
  
 On 12 Aug 2015 at 12:09:56, Bryn Jeffries 
 (bryn.jeffr...@sydney.edu.au(mailto:bryn.jeffr...@sydney.edu.au)) wrote:
  
  Hi,
 
  I'm experimenting with including some jQuery UI elements into some wiki 
  pages using XWiki 7.1. As a test, I've been trying to get the spinner 
  example from http://api.jqueryui.com/spinner/ to work:
 
  I have constructed a minimal page, with content body:
  {{velocity}}
  {{html}}
   
  
  {{/html}}
  {{/velocity}}
 
  And for the page I've added an objects of type XWiki.JavaScriptExtension 
  containing code:
  require(['jquery'], function($) {
  $( #spinner ).spinner();
  });
 
  However, viewing the page yields an error
  TypeError: a(...).spinner is not a function
  require([jquery],function(a){a(#spinner).spinner()});
 
  So it looks as though the spinner UI code is missing, so I'm guessing I 
  need to include the jQuery UI library somehow. I'm a little confused 
  because there is a jquery-ui-1.11.1.jar file in /usr/lib/xwiki/WEB-INF/lib/ 
  which led me to believe that it was already bundled with XWiki.
  http://platform.xwiki.org/xwiki/bin/view/DevGuide/FrontendResources says 
  Prototype is the only JavaScript library that is systematically shipped 
  with any wiki page in XWiki. But it's a bit old.
 
  Any pointers?  
  
 I’m far from a JS expert, but it seems your code is saying that it depends on 
 jquery but not on jquery-ui and https://api.jqueryui.com/spinner/ seems to 
 indicate that the spinner is located in jquery-ui…  
  
 Try depending on jquery-ui maybe?  
  
 Thanks  
 -Vincent
  
  Thanks,
 
  Bryn

___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users

Re: [xwiki-users] jQuery UI components in XWiki

2015-08-12 Thread vinc...@massol.net 
 

On 12 Aug 2015 at 22:31:11, vinc...@massol.net 
(vinc...@massol.net(mailto:vinc...@massol.net)) wrote:

 Hi Bryn,
  
 On 12 Aug 2015 at 22:05:25, Bryn Jeffries 
 (bryn.jeffr...@sydney.edu.au(mailto:bryn.jeffr...@sydney.edu.au)) wrote:
  
  Vincent suggested:
Try depending on jquery-ui maybe?
  
   Right, I'd misunderstood the purpose of require(), which I thought was to
   provide compatibility vs prototype when using '$'.
  
   However, this still doesn't fix things completely, but does move them
   forwards a bit.
   require(['jquery','jquery-ui'], function($) {
   $( #spinner ).spinner();
   });
  
 
  Actually, more playing around eventually gave me this, which does work:
  require(['jquery',$services.webjars.url('jquery-ui', 'jquery-ui.js')], 
  function($) {
  $( #spinner ).spinner();
  });
 
  I wouldn't say I'm 100% sure of what I'm doing with require, or if this is 
  the best way to do it, but at least it works without errors.
  
 That looks correct. The reason you could simply use “jquery” in the require() 
 function is because it’s declared in javascript.vm:
  
 require.config({
 paths: {
 'jquery': '#removeJsSuffix($services.webjars.url(jquery, 
 jquery${jsExtension}))',
 'bootstrap': '#removeJsSuffix($services.webjars.url(bootstrap, 
 js/bootstrap${jsExtension}))',
 'xwiki-meta': '$stringtool.removeEnd($xwiki.getSkinFile('js/xwiki/meta.js'), 
 '.js')',
 'xwiki-events-bridge': 
 $stringtool.removeEnd($xwiki.getSkinFile('js/xwiki/eventsBridge.js'), '.js')
 },
 …
  
 This is not the case for jquery-ui or for other webjars. This is why you need 
 to use $services.webjars.url(..).
  
 Would be great if you could help us and add this information on 
 http://platform.xwiki.org/xwiki/bin/view/DevGuide/FrontendResources :)
  
 If you don’t have the time, I’ll do it when I’m back from holidays (still on 
 holidays for the coming 4 days :)).

errr…. 11 days… :)

-Vincent

 Thanks
 -Vincent
  
  Thanks,
 
  Bryn
  

___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users

Re: [xwiki-users] jQuery UI components in XWiki

2015-08-12 Thread vinc...@massol.net 
Hi Bryn,

On 12 Aug 2015 at 22:05:25, Bryn Jeffries 
(bryn.jeffr...@sydney.edu.au(mailto:bryn.jeffr...@sydney.edu.au)) wrote:

 Vincent suggested:
   Try depending on jquery-ui maybe?
 
  Right, I'd misunderstood the purpose of require(), which I thought was to
  provide compatibility vs prototype when using '$'.
 
  However, this still doesn't fix things completely, but does move them
  forwards a bit.
  require(['jquery','jquery-ui'], function($) {
  $( #spinner ).spinner();
  });
 
  
 Actually, more playing around eventually gave me this, which does work:
 require(['jquery',$services.webjars.url('jquery-ui', 'jquery-ui.js')], 
 function($) {
 $( #spinner ).spinner();
 });
  
 I wouldn't say I'm 100% sure of what I'm doing with require, or if this is 
 the best way to do it, but at least it works without errors.

That looks correct. The reason you could simply use “jquery” in the require() 
function is because it’s declared in javascript.vm:

require.config({
  paths: {
    'jquery': '#removeJsSuffix($services.webjars.url(jquery, 
jquery${jsExtension}))',
    'bootstrap': '#removeJsSuffix($services.webjars.url(bootstrap, 
js/bootstrap${jsExtension}))',
    'xwiki-meta': 
'$stringtool.removeEnd($xwiki.getSkinFile('js/xwiki/meta.js'), '.js')',
    'xwiki-events-bridge': 
$stringtool.removeEnd($xwiki.getSkinFile('js/xwiki/eventsBridge.js'), '.js')
  },
…

This is not the case for jquery-ui or for other webjars. This is why you need 
to use $services.webjars.url(..).

Would be great if you could help us and add this information on 
http://platform.xwiki.org/xwiki/bin/view/DevGuide/FrontendResources :)

If you don’t have the time, I’ll do it when I’m back from holidays (still on 
holidays for the coming 4 days :)).

Thanks
-Vincent

 Thanks,
  
 Bryn

___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users

Re: [xwiki-users] jQuery UI components in XWiki

2015-08-12 Thread Bryn Jeffries 
Vincent Massol wrote:
 Would be great if you could help us and add this information
 on http://platform.xwiki.org/xwiki/bin/view/DevGuide/FrontendResources : )
 
 If you don’t have the time, I’ll do it when I’m back from holidays (still on
 holidays for the coming 4 days :)).

Sure, I'll add what I can. Incidentally, am I right in thinking Bootstrap is 
also bundled with XWiki?

Many thanks for responding during your well-earned time off.

Bryn
___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users

Re: [xwiki-users] jQuery UI components in XWiki

2015-08-12 Thread Bryn Jeffries 
I wrote:
 I'm experimenting with including some jQuery UI elements into some wiki 
 pages using XWiki 7.1. As a test, I've been trying to get the spinner 
 example from http://api.jqueryui.com/spinner/ to work:
 
 I have constructed a minimal page, with content body:
 {{velocity}}
 {{html}}
 input id=spinner /
 {{/html}}
 {{/velocity}}
 
 And for the page I've added an objects of type XWiki.JavaScriptExtension 
 containing code:
 require(['jquery'], function($) {
 $( #spinner ).spinner();
 });

Vincent replied:
 I’m far from a JS expert, but it seems your code is saying that it depends on 
 jquery but not on jquery-ui and https://api.jqueryui.com/spinner/ seems to 
 indicate that the spinner is located in jquery-ui…

 Try depending on jquery-ui maybe?

Right, I'd misunderstood the purpose of require(), which I thought was to 
provide compatibility vs prototype when using '$'.

However, this still doesn't fix things completely, but does move them forwards 
a bit.
require(['jquery','jquery-ui'], function($) {
$( #spinner ).spinner();
});

Now gives me NetworkError: 404 Not Found - 
https://brynswiki.net/xwiki/bin/view/TestJQ/jquery-ui.js; so it's still looking 
in the wrong place.

Do I need to be configure RequireJS to find jquery-ui.js? I see in the rendered 
page source
require.config({
  paths: {
'jquery': '/xwiki/webjars/jquery/1.11.1/jquery.min.js?r=1',
'bootstrap': '/xwiki/webjars/bootstrap/3.3.4/js/bootstrap.min.js?r=1',
'xwiki-meta': '/xwiki/resources/js/xwiki/meta',
'xwiki-events-bridge': /xwiki/resources/js/xwiki/eventsBridge
  },
[...]
So jQuery gets mentioned but not jQuery-UI, even though I believe webjars for 
both are present in the XWiki installation (in /usr/lib/xwiki/WEB-INF/lib/ )

Thanks,

Bryn
___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users

Re: [xwiki-users] jQuery UI components in XWiki

2015-08-12 Thread Bryn Jeffries 
Vincent suggested:
  Try depending on jquery-ui maybe?
 
 Right, I'd misunderstood the purpose of require(), which I thought was to
 provide compatibility vs prototype when using '$'.
 
 However, this still doesn't fix things completely, but does move them
 forwards a bit.
 require(['jquery','jquery-ui'], function($) {
 $( #spinner ).spinner();
 });
 

Actually, more playing around eventually gave me this, which does work:
require(['jquery',$services.webjars.url('jquery-ui', 'jquery-ui.js')], 
function($) {
$( #spinner ).spinner();
});

I wouldn't say I'm 100% sure of what I'm doing with require, or if this is the 
best way to do it, but at least it works without errors.

Thanks,

Bryn
___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users