requirejs question

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

requirejs question

Ric-01
Dear all,

after migrating to tapestry 5.4.3 it is not possible anymore, to use
inlines scripts in tml files.

In principle I understood the idea and usgage of requirejs, but I'm
confused, because they seem to be several ways to achieve certain goals
for individual solutions.

So I try to give a concrete example to illustrate my problems during
restructuring our inline scripts wiith requirejs. As precondition I
would like to say, that I set the javascipt infrastucture provider in
Tapestry to "jquery".

Currently we have these two kind of scripting in our Tapestry 5.3.8
project (I show them only because of the use of the aliases):

if ( jQuery( "#searchFilterSelector" ).length ) {
   jQuery("#deleteSearchFilter").show();
} else {
  jQuery("#deleteSearchFilter").hide();
}

(function($) {
  $('#finderSearchBtn').click(function() {
     showLoadingIndicator();
   });
})(jQuery);

1. question: what if my scripts need jquery or jqueryui? Do I have to
put a jquery.js and jqueryui.js in my own poject or can I use the one of
Tapestry 5.4.3?
2, question: If I can use the jquery libs of Tapestry, how do I have to
make them known to my appkication? Must I put them in requirejs.config
section and how (because they are in the Tapestry libs, not in the path
of may appliaction)
3. question: Do I have to reqrite the above inline scripts and make use
of another jquery alias?
4. question: How to process with already existing "browser global
scripts"? I read about the shim config framework as part of requirejs,
but it seems, that no scripts using define calls and such ones defined
via shim can be used together in one appliaction, or am I wrong?

I would appreciate, if you can give me an example how to make old
scripst work again under Tapestry 5.4.3

Thanks for your support!

Regards, Erich





---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: requirejs question

Dmitry Gusev
Hi Erich,

one example of using jQuery in inline scripts can be:

<script>
    require(['jquery'], function($) {
        <!-- Use $ as usual here -->
    });
</script>

I would suggest to replace inline scripts with JavaScript modules,
i.e. one per component/page:

http://tapestry.apache.org/javascript-modules.html


You can override jQuery version with the one you need, check
configuration symbols here:

https://github.com/apache/tapestry-5/blob/b3db0dd817d709a646b0a3e754f2e710c8f2a86f/tapestry-core/src/main/java/org/apache/tapestry5/modules/JavaScriptModule.java#L91


If you haven't already, check http://tapestry5-jquery.com, it can
still be helpful for 5.4.x, especially if you're using jQuery IU.

Here are the configuration symbols for tapestry5-jquery:

https://github.com/got5/tapestry5-jquery/blob/master/src/main/java/org/got5/tapestry5/jquery/services/JQueryModule.java



On Sat, Mar 24, 2018 at 2:51 PM, Erich Gormann <[hidden email]> wrote:

> Dear all,
>
> after migrating to tapestry 5.4.3 it is not possible anymore, to use
> inlines scripts in tml files.
>
> In principle I understood the idea and usgage of requirejs, but I'm
> confused, because they seem to be several ways to achieve certain goals for
> individual solutions.
>
> So I try to give a concrete example to illustrate my problems during
> restructuring our inline scripts wiith requirejs. As precondition I would
> like to say, that I set the javascipt infrastucture provider in Tapestry to
> "jquery".
>
> Currently we have these two kind of scripting in our Tapestry 5.3.8
> project (I show them only because of the use of the aliases):
>
> if ( jQuery( "#searchFilterSelector" ).length ) {
>   jQuery("#deleteSearchFilter").show();
> } else {
>  jQuery("#deleteSearchFilter").hide();
> }
>
> (function($) {
>  $('#finderSearchBtn').click(function() {
>     showLoadingIndicator();
>   });
> })(jQuery);
>
> 1. question: what if my scripts need jquery or jqueryui? Do I have to put
> a jquery.js and jqueryui.js in my own poject or can I use the one of
> Tapestry 5.4.3?
> 2, question: If I can use the jquery libs of Tapestry, how do I have to
> make them known to my appkication? Must I put them in requirejs.config
> section and how (because they are in the Tapestry libs, not in the path of
> may appliaction)
> 3. question: Do I have to reqrite the above inline scripts and make use of
> another jquery alias?
> 4. question: How to process with already existing "browser global
> scripts"? I read about the shim config framework as part of requirejs, but
> it seems, that no scripts using define calls and such ones defined via shim
> can be used together in one appliaction, or am I wrong?
>
> I would appreciate, if you can give me an example how to make old scripst
> work again under Tapestry 5.4.3
>
> Thanks for your support!
>
> Regards, Erich
>
>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>


--
Dmitry Gusev

AnjLab Team
http://anjlab.com
Reply | Threaded
Open this post in threaded view
|

Re: requirejs question

Ilya Obshadko-2
In reply to this post by Ric-01
You’ll have to re-write it. jQuery will be available all right, alongside
with some other built-in JS modules.
Converting a big application to AMD is a bit painful, but definitely worth
it in the end.

That’s an example of a typical small Tapestry script (with usage of Google
Analytics as a bonus):

require.config({
    shim: {
        "ga": {
            exports: "ga"
        }
    },
    paths: {
        "ga": "//www.google-analytics.com/analytics"
    }
});

define(["jquery", "t5/core/events", "ga"], function($, events, ga) {
    return function(spec) {
        if (spec.googleAnalyticsId) {
            var $trackerName = 'eventTracker' + spec.danceEventId
            ga('create', spec.googleAnalyticsId, 'auto', { 'name':
$trackerName, 'allowLinker': true })
            if (spec.crossDomains) {
                ga($trackerName + '.require', 'linker')
                ga($trackerName + '.linker:autoLink', spec.crossDomains)
            }
            ga($trackerName + '.send', 'pageview')
        }
    }
});

And this is how you enable it in your application (Scala code which you may
call from *afterRender* phase):

def setupEventGoogleAnalytics(jsSupport: JavaScriptSupport, event:
Event): Unit =
  if (StringUtils.isNotBlank(event.getGoogleAnalyticsId)) {
    val spec = new JSONObject(*“*googleAnalyticsId",
event.getGoogleAnalyticsId, "eventId", event.getId)
    if (StringUtils.isNotBlank(event.getGoogleAnalyticsDomains))
      spec.put(*“*crossDomains", new
JSONArray(StringUtils.split(event.getGoogleAnalyticsDomains,
',').map(_.trim): _*))
    jsSupport.require("dcnet/eventga").`with`(spec)
  }


You’ll need to *require* your re-written scripts using
*JavaScriptSupport* service
which you inject just like any other Tapestry service.


On Sat, Mar 24, 2018 at 2:51 PM, Erich Gormann <[hidden email]> wrote:

> Dear all,
>
> after migrating to tapestry 5.4.3 it is not possible anymore, to use
> inlines scripts in tml files.
>
> In principle I understood the idea and usgage of requirejs, but I'm
> confused, because they seem to be several ways to achieve certain goals for
> individual solutions.
>
> So I try to give a concrete example to illustrate my problems during
> restructuring our inline scripts wiith requirejs. As precondition I would
> like to say, that I set the javascipt infrastucture provider in Tapestry to
> "jquery".
>
> Currently we have these two kind of scripting in our Tapestry 5.3.8
> project (I show them only because of the use of the aliases):
>
> if ( jQuery( "#searchFilterSelector" ).length ) {
>   jQuery("#deleteSearchFilter").show();
> } else {
>  jQuery("#deleteSearchFilter").hide();
> }
>
> (function($) {
>  $('#finderSearchBtn').click(function() {
>     showLoadingIndicator();
>   });
> })(jQuery);
>
> 1. question: what if my scripts need jquery or jqueryui? Do I have to put
> a jquery.js and jqueryui.js in my own poject or can I use the one of
> Tapestry 5.4.3?
> 2, question: If I can use the jquery libs of Tapestry, how do I have to
> make them known to my appkication? Must I put them in requirejs.config
> section and how (because they are in the Tapestry libs, not in the path of
> may appliaction)
> 3. question: Do I have to reqrite the above inline scripts and make use of
> another jquery alias?
> 4. question: How to process with already existing "browser global
> scripts"? I read about the shim config framework as part of requirejs, but
> it seems, that no scripts using define calls and such ones defined via shim
> can be used together in one appliaction, or am I wrong?
>
> I would appreciate, if you can give me an example how to make old scripst
> work again under Tapestry 5.4.3
>
> Thanks for your support!
>
> Regards, Erich
>
>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>


--
Ilya Obshadko
Reply | Threaded
Open this post in threaded view
|

Re: requirejs question

Ric-01
Hi Ilya,

Ok, thanks so far.

One problem reamains: according to requirejs it should be no problem
with shim to support the use of already existing browser global scripts.

I tried to do so by adding this line to our border component tml:

<scriptdata-main=/"js/app"/ src=/"js/lib/require.js"/></script>

And putting this script under the js folder of my app:

requirejs.config({

"baseUrl": "js/lib",

"paths": {

"plugins": "../plugins",

"js": "../"

     },

"shim": {

"js/jquery.loading-indicator.js": ["jquery"],

"js/jquery.activity-indicator.js": ["jquery"],

"js/jquery.kawwa.nav.js": ["jquery"],

"js/msp-general.js": ["jquery"]

     }

});

// Load all the required js modules

requirejs(["js/jquery.loading-indicator"]);

requirejs(["js/jquery.activity-indicator"]);

requirejs(["js/jquery.kawwa.nav"]);

requirejs(["js/msp-general"]);

It results in a script error saying the following:

t53-compatibility.js:21:1  TypeError: require is not a function.

Is it not required, to have an own require.js in the own application?
But how else to tell requirejs to load the  browser global scripts?

Or would it be the best way, just to load the above script via a require
call of the JavascriptSupport service from my border component java file?

Regards, Erich



Am 24.03.2018 15:31, schrieb Ilya Obshadko:

> You’ll have to re-write it. jQuery will be available all right, alongside
> with some other built-in JS modules.
> Converting a big application to AMD is a bit painful, but definitely worth
> it in the end.
>
> That’s an example of a typical small Tapestry script (with usage of Google
> Analytics as a bonus):
>
> require.config({
>      shim: {
>          "ga": {
>              exports: "ga"
>          }
>      },
>      paths: {
>          "ga": "//www.google-analytics.com/analytics"
>      }
> });
>
> define(["jquery", "t5/core/events", "ga"], function($, events, ga) {
>      return function(spec) {
>          if (spec.googleAnalyticsId) {
>              var $trackerName = 'eventTracker' + spec.danceEventId
>              ga('create', spec.googleAnalyticsId, 'auto', { 'name':
> $trackerName, 'allowLinker': true })
>              if (spec.crossDomains) {
>                  ga($trackerName + '.require', 'linker')
>                  ga($trackerName + '.linker:autoLink', spec.crossDomains)
>              }
>              ga($trackerName + '.send', 'pageview')
>          }
>      }
> });
>
> And this is how you enable it in your application (Scala code which you may
> call from *afterRender* phase):
>
> def setupEventGoogleAnalytics(jsSupport: JavaScriptSupport, event:
> Event): Unit =
>    if (StringUtils.isNotBlank(event.getGoogleAnalyticsId)) {
>      val spec = new JSONObject(*“*googleAnalyticsId",
> event.getGoogleAnalyticsId, "eventId", event.getId)
>      if (StringUtils.isNotBlank(event.getGoogleAnalyticsDomains))
>        spec.put(*“*crossDomains", new
> JSONArray(StringUtils.split(event.getGoogleAnalyticsDomains,
> ',').map(_.trim): _*))
>      jsSupport.require("dcnet/eventga").`with`(spec)
>    }
>
>
> You’ll need to *require* your re-written scripts using
> *JavaScriptSupport* service
> which you inject just like any other Tapestry service.
>
>
> On Sat, Mar 24, 2018 at 2:51 PM, Erich Gormann<[hidden email]>  wrote:
>
>> Dear all,
>>
>> after migrating to tapestry 5.4.3 it is not possible anymore, to use
>> inlines scripts in tml files.
>>
>> In principle I understood the idea and usgage of requirejs, but I'm
>> confused, because they seem to be several ways to achieve certain goals for
>> individual solutions.
>>
>> So I try to give a concrete example to illustrate my problems during
>> restructuring our inline scripts wiith requirejs. As precondition I would
>> like to say, that I set the javascipt infrastucture provider in Tapestry to
>> "jquery".
>>
>> Currently we have these two kind of scripting in our Tapestry 5.3.8
>> project (I show them only because of the use of the aliases):
>>
>> if ( jQuery( "#searchFilterSelector" ).length ) {
>>    jQuery("#deleteSearchFilter").show();
>> } else {
>>   jQuery("#deleteSearchFilter").hide();
>> }
>>
>> (function($) {
>>   $('#finderSearchBtn').click(function() {
>>      showLoadingIndicator();
>>    });
>> })(jQuery);
>>
>> 1. question: what if my scripts need jquery or jqueryui? Do I have to put
>> a jquery.js and jqueryui.js in my own poject or can I use the one of
>> Tapestry 5.4.3?
>> 2, question: If I can use the jquery libs of Tapestry, how do I have to
>> make them known to my appkication? Must I put them in requirejs.config
>> section and how (because they are in the Tapestry libs, not in the path of
>> may appliaction)
>> 3. question: Do I have to reqrite the above inline scripts and make use of
>> another jquery alias?
>> 4. question: How to process with already existing "browser global
>> scripts"? I read about the shim config framework as part of requirejs, but
>> it seems, that no scripts using define calls and such ones defined via shim
>> can be used together in one appliaction, or am I wrong?
>>
>> I would appreciate, if you can give me an example how to make old scripst
>> work again under Tapestry 5.4.3
>>
>> Thanks for your support!
>>
>> Regards, Erich
>>
>>
>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>

Reply | Threaded
Open this post in threaded view
|

Re: requirejs question

Ric-01
In reply to this post by Dmitry Gusev
Thak you Dmitry,

I ill give it a try!


Regards, Erich

Am 24.03.2018 14:51, schrieb Dmitry Gusev:

> Hi Erich,
>
> one example of using jQuery in inline scripts can be:
>
> <script>
>      require(['jquery'], function($) {
>          <!-- Use $ as usual here -->
>      });
> </script>
>
> I would suggest to replace inline scripts with JavaScript modules,
> i.e. one per component/page:
>
> http://tapestry.apache.org/javascript-modules.html
>
>
> You can override jQuery version with the one you need, check
> configuration symbols here:
>
> https://github.com/apache/tapestry-5/blob/b3db0dd817d709a646b0a3e754f2e710c8f2a86f/tapestry-core/src/main/java/org/apache/tapestry5/modules/JavaScriptModule.java#L91
>
>
> If you haven't already, check http://tapestry5-jquery.com, it can
> still be helpful for 5.4.x, especially if you're using jQuery IU.
>
> Here are the configuration symbols for tapestry5-jquery:
>
> https://github.com/got5/tapestry5-jquery/blob/master/src/main/java/org/got5/tapestry5/jquery/services/JQueryModule.java
>
>
>
> On Sat, Mar 24, 2018 at 2:51 PM, Erich Gormann<[hidden email]>  wrote:
>
>> Dear all,
>>
>> after migrating to tapestry 5.4.3 it is not possible anymore, to use
>> inlines scripts in tml files.
>>
>> In principle I understood the idea and usgage of requirejs, but I'm
>> confused, because they seem to be several ways to achieve certain goals for
>> individual solutions.
>>
>> So I try to give a concrete example to illustrate my problems during
>> restructuring our inline scripts wiith requirejs. As precondition I would
>> like to say, that I set the javascipt infrastucture provider in Tapestry to
>> "jquery".
>>
>> Currently we have these two kind of scripting in our Tapestry 5.3.8
>> project (I show them only because of the use of the aliases):
>>
>> if ( jQuery( "#searchFilterSelector" ).length ) {
>>    jQuery("#deleteSearchFilter").show();
>> } else {
>>   jQuery("#deleteSearchFilter").hide();
>> }
>>
>> (function($) {
>>   $('#finderSearchBtn').click(function() {
>>      showLoadingIndicator();
>>    });
>> })(jQuery);
>>
>> 1. question: what if my scripts need jquery or jqueryui? Do I have to put
>> a jquery.js and jqueryui.js in my own poject or can I use the one of
>> Tapestry 5.4.3?
>> 2, question: If I can use the jquery libs of Tapestry, how do I have to
>> make them known to my appkication? Must I put them in requirejs.config
>> section and how (because they are in the Tapestry libs, not in the path of
>> may appliaction)
>> 3. question: Do I have to reqrite the above inline scripts and make use of
>> another jquery alias?
>> 4. question: How to process with already existing "browser global
>> scripts"? I read about the shim config framework as part of requirejs, but
>> it seems, that no scripts using define calls and such ones defined via shim
>> can be used together in one appliaction, or am I wrong?
>>
>> I would appreciate, if you can give me an example how to make old scripst
>> work again under Tapestry 5.4.3
>>
>> Thanks for your support!
>>
>> Regards, Erich
>>
>>
>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]