Trying to load non AMD javascript in tapestry 5.4

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

Trying to load non AMD javascript in tapestry 5.4

abangkis
Hello. I'm trying to load a simple regular javascript that's going to be
used as dependency from a RequireJS module.

So i created mytest.js under classpath:META-INF/assets/js/mytest.js. It
contain a single function :

function showMe() {
alert("test 2  my_test");
};

I add the contribution in AppModule

    public static void contributeModuleManager(MappedConfiguration<String,
Object> configuration,
            @Path("/META-INF/assets/js/mytest.js") Resource js) {
        configuration.add("mytest", new JavaScriptModuleConfiguration(js));
    }

Create a test page

@Import(module = "Lima")
public class Lima {
}

that call the module :

require(['mytest'],
function(mytest){
console.log("mytest " + mytest);
mytest.showMe();
});

the module is loaded, the mytest.js file is found. But the console log
mytest as undefined. Here's what's printed on the console

Loading 2 libraries
console.js:104 Loading library
/KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
console.js:104 Loading library
/KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
console.js:104 Executing 1 inits
console.js:104 Loaded module Lima
console.js:104 All inits executed
Lima.js:3 mytest undefined
console.js:104 RequireJS error: require: Cannot read property 'showMe' of
undefined

So, what did i do wrong? Thanks.
--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs @abangkis
page : https://plus.google.com/104168782385184990771
Reply | Threaded
Open this post in threaded view
|

Re: Trying to load non AMD javascript in tapestry 5.4

Thiago H de Paula Figueiredo
Please read the Require.js documentation about this. You just cannot use  
Require.js with non AMD .js files and expect it to work without no further  
work.

On Sat, 14 Feb 2015 14:04:36 -0200, abangkis <[hidden email]> wrote:

> Hello. I'm trying to load a simple regular javascript that's going to be
> used as dependency from a RequireJS module.
>
> So i created mytest.js under classpath:META-INF/assets/js/mytest.js. It
> contain a single function :
>
> function showMe() {
> alert("test 2  my_test");
> };
>
> I add the contribution in AppModule
>
>     public static void  
> contributeModuleManager(MappedConfiguration<String,
> Object> configuration,
>             @Path("/META-INF/assets/js/mytest.js") Resource js) {
>         configuration.add("mytest", new  
> JavaScriptModuleConfiguration(js));
>     }
>
> Create a test page
>
> @Import(module = "Lima")
> public class Lima {
> }
>
> that call the module :
>
> require(['mytest'],
> function(mytest){
> console.log("mytest " + mytest);
> mytest.showMe();
> });
>
> the module is loaded, the mytest.js file is found. But the console log
> mytest as undefined. Here's what's printed on the console
>
> Loading 2 libraries
> console.js:104 Loading library
> /KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
> console.js:104 Loading library
> /KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
> console.js:104 Executing 1 inits
> console.js:104 Loaded module Lima
> console.js:104 All inits executed
> Lima.js:3 mytest undefined
> console.js:104 RequireJS error: require: Cannot read property 'showMe' of
> undefined
>
> So, what did i do wrong? Thanks.


--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

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

Reply | Threaded
Open this post in threaded view
|

Re: Trying to load non AMD javascript in tapestry 5.4

JumpStart
Your "require" has ensured the mytest.js file gets loaded by the browser but the file's contents do not define an AMD module. Therefore the scope of showMe() is global, so I think you'll find you can call showMe() but not mytest.showMe().

Geoff

On 18 Feb 2015, at 5:05 am, Thiago H de Paula Figueiredo <[hidden email]> wrote:

> Please read the Require.js documentation about this. You just cannot use Require.js with non AMD .js files and expect it to work without no further work.
>
> On Sat, 14 Feb 2015 14:04:36 -0200, abangkis <[hidden email]> wrote:
>
>> Hello. I'm trying to load a simple regular javascript that's going to be
>> used as dependency from a RequireJS module.
>>
>> So i created mytest.js under classpath:META-INF/assets/js/mytest.js. It
>> contain a single function :
>>
>> function showMe() {
>> alert("test 2  my_test");
>> };
>>
>> I add the contribution in AppModule
>>
>>    public static void contributeModuleManager(MappedConfiguration<String,
>> Object> configuration,
>>            @Path("/META-INF/assets/js/mytest.js") Resource js) {
>>        configuration.add("mytest", new JavaScriptModuleConfiguration(js));
>>    }
>>
>> Create a test page
>>
>> @Import(module = "Lima")
>> public class Lima {
>> }
>>
>> that call the module :
>>
>> require(['mytest'],
>> function(mytest){
>> console.log("mytest " + mytest);
>> mytest.showMe();
>> });
>>
>> the module is loaded, the mytest.js file is found. But the console log
>> mytest as undefined. Here's what's printed on the console
>>
>> Loading 2 libraries
>> console.js:104 Loading library
>> /KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
>> console.js:104 Loading library
>> /KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
>> console.js:104 Executing 1 inits
>> console.js:104 Loaded module Lima
>> console.js:104 All inits executed
>> Lima.js:3 mytest undefined
>> console.js:104 RequireJS error: require: Cannot read property 'showMe' of
>> undefined
>>
>> So, what did i do wrong? Thanks.
>
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Trying to load non AMD javascript in tapestry 5.4

abangkis
In reply to this post by Thiago H de Paula Figueiredo
Hi thiago. I actually have read about requirejs shimming
http://requirejs.org/docs/api.html#config-shim to use non-AMD module in
requirejs. For requirejs, it's quite forward. We just need to add the shim
to requirejs.config (usually in main.js).

Looking at this thread
https://mail-archives.apache.org/mod_mbox/tapestry-users/201406.mbox/%3C273E9647-5CFE-4BF5-B0B3-9A9D5AAD388F@...%3E
showed that to add the shim to requirejs.config we need to contribute to Module
Manager AND put the non-AMD js to the assets folder instead of the module
folder. And it should work.

That's what i gather from the mailing list & other resources. There's no
official Tapestry Doc about shimming, But i think this would be a very
common thing. Since people usually go to github looking for some simple
javascript lib to use in their app. And most of those js file is non-AMD
and would require shimming.

Cheers


On Wed, Feb 18, 2015 at 1:05 AM, Thiago H de Paula Figueiredo <
[hidden email]> wrote:

> Please read the Require.js documentation about this. You just cannot use
> Require.js with non AMD .js files and expect it to work without no further
> work.
>
>
> On Sat, 14 Feb 2015 14:04:36 -0200, abangkis <[hidden email]> wrote:
>
>  Hello. I'm trying to load a simple regular javascript that's going to be
>> used as dependency from a RequireJS module.
>>
>> So i created mytest.js under classpath:META-INF/assets/js/mytest.js. It
>> contain a single function :
>>
>> function showMe() {
>> alert("test 2  my_test");
>> };
>>
>> I add the contribution in AppModule
>>
>>     public static void contributeModuleManager(
>> MappedConfiguration<String,
>> Object> configuration,
>>             @Path("/META-INF/assets/js/mytest.js") Resource js) {
>>         configuration.add("mytest", new JavaScriptModuleConfiguration(
>> js));
>>     }
>>
>> Create a test page
>>
>> @Import(module = "Lima")
>> public class Lima {
>> }
>>
>> that call the module :
>>
>> require(['mytest'],
>> function(mytest){
>> console.log("mytest " + mytest);
>> mytest.showMe();
>> });
>>
>> the module is loaded, the mytest.js file is found. But the console log
>> mytest as undefined. Here's what's printed on the console
>>
>> Loading 2 libraries
>> console.js:104 Loading library
>> /KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
>> console.js:104 Loading library
>> /KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
>> console.js:104 Executing 1 inits
>> console.js:104 Loaded module Lima
>> console.js:104 All inits executed
>> Lima.js:3 mytest undefined
>> console.js:104 RequireJS error: require: Cannot read property 'showMe' of
>> undefined
>>
>> So, what did i do wrong? Thanks.
>>
>
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>


--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs @abangkis
page : https://plus.google.com/104168782385184990771
Reply | Threaded
Open this post in threaded view
|

Re: Trying to load non AMD javascript in tapestry 5.4

abangkis
In reply to this post by JumpStart
Hi  Geoff. You are right. I can call the showMe() method as a global
function. So, is it okay if I assume that i could only call the shimmed js
lib through global function?  Since it wouldn't get passed through the
define parameter. Or is my implementation that's incorrect? Is there a
better way (better scoped) to implement this?

Cheers.

On Wed, Feb 18, 2015 at 7:33 AM, Geoff Callender <
[hidden email]> wrote:

> Your "require" has ensured the mytest.js file gets loaded by the browser
> but the file's contents do not define an AMD module. Therefore the scope of
> showMe() is global, so I think you'll find you can call showMe() but not
> mytest.showMe().
>
> Geoff
>
> On 18 Feb 2015, at 5:05 am, Thiago H de Paula Figueiredo <
> [hidden email]> wrote:
>
> > Please read the Require.js documentation about this. You just cannot use
> Require.js with non AMD .js files and expect it to work without no further
> work.
> >
> > On Sat, 14 Feb 2015 14:04:36 -0200, abangkis <[hidden email]> wrote:
> >
> >> Hello. I'm trying to load a simple regular javascript that's going to be
> >> used as dependency from a RequireJS module.
> >>
> >> So i created mytest.js under classpath:META-INF/assets/js/mytest.js. It
> >> contain a single function :
> >>
> >> function showMe() {
> >> alert("test 2  my_test");
> >> };
> >>
> >> I add the contribution in AppModule
> >>
> >>    public static void
> contributeModuleManager(MappedConfiguration<String,
> >> Object> configuration,
> >>            @Path("/META-INF/assets/js/mytest.js") Resource js) {
> >>        configuration.add("mytest", new
> JavaScriptModuleConfiguration(js));
> >>    }
> >>
> >> Create a test page
> >>
> >> @Import(module = "Lima")
> >> public class Lima {
> >> }
> >>
> >> that call the module :
> >>
> >> require(['mytest'],
> >> function(mytest){
> >> console.log("mytest " + mytest);
> >> mytest.showMe();
> >> });
> >>
> >> the module is loaded, the mytest.js file is found. But the console log
> >> mytest as undefined. Here's what's printed on the console
> >>
> >> Loading 2 libraries
> >> console.js:104 Loading library
> >> /KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
> >> console.js:104 Loading library
> >> /KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
> >> console.js:104 Executing 1 inits
> >> console.js:104 Loaded module Lima
> >> console.js:104 All inits executed
> >> Lima.js:3 mytest undefined
> >> console.js:104 RequireJS error: require: Cannot read property 'showMe'
> of
> >> undefined
> >>
> >> So, what did i do wrong? Thanks.
> >
> >
> > --
> > Thiago H. de Paula Figueiredo
> > Tapestry, Java and Hibernate consultant and developer
> > http://machina.com.br
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: [hidden email]
> > For additional commands, e-mail: [hidden email]
>
>


--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs @abangkis
page : https://plus.google.com/104168782385184990771
Reply | Threaded
Open this post in threaded view
|

Re: Trying to load non AMD javascript in tapestry 5.4

JumpStart
Despite what I said 9 months ago in the thread you referenced, I'm not sure that I've ever seen the shimming [1] ever work, but I haven't pursued it because the many javascript libraries I use work fine anyway without being modules.

[1] http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptModuleConfiguration.html

Here are 4 very different examples that my modules are using without, I believe, shimming. Maybe they're being shimmed and I should take advantage of it. If so, I'd welcome someone setting me straight.

        public static void contributeModuleManager(
                        MappedConfiguration<String, Object> configuration,
                        @Path("/META-INF/assets/js/highcharts-4.0.4/highcharts.js") Resource highcharts,
                        @Path("/META-INF/assets/fineuploader/fineuploader-5.0.9.js") Resource fineuploader,
                        @Path("/META-INF/assets/js/fastclick-1.0.3.min.js") Resource fastclick,
                        @Path("/META-INF/assets/js/pick-a-color-1.2.3/dependencies/tinycolor-0.9.15.min.js") Resource tinycolor,
) {
                configuration.add("highcharts", new JavaScriptModuleConfiguration(highcharts));
                configuration.add("fineuploader", new JavaScriptModuleConfiguration(fineuploader));
                configuration.add("fastclick", new JavaScriptModuleConfiguration(fastclick));
                configuration.add("tinycolor", new JavaScriptModuleConfiguration(tinycolor));
        }

Using highcharts...

define([ "jquery", "highcharts" ], function($) {
        init = function(params) {
                $chart = $("#" + params.id);
                $chart.highcharts({
                        :

Using fineuploader...

define(["jquery", "t5/core/console", "fineuploader"], function($, console) {
        var uploader;
        init = function(params) {
                uploader = new qq.FineUploader({
                        :

Using fastclick...

define([ "jquery", "fastclick" ], function($, FastClick) {
        return function(options) {
                var options = options || {};
                new FastClick(document.body, options);
        };
});

Using tinycolor...

// Depends on PickAColorJavaScriptStack.

define(["jquery", "tinycolor", "underscore", "t5/core/console", "bootstrap/tooltip", "bootstrap/popover"], function($, tinycolor, _, console) {
        init = function(params) {
                pickAColorOptions = _.extend({}, params.pickAColorOptions);
                // To prevent pickAColor failing with "tinycolor is not defined", assign window.tinycolor.
                window.tinycolor = tinycolor;
                :

HTH,

Geoff


On 18 Feb 2015, at 5:54 pm, abangkis <[hidden email]> wrote:

> Hi  Geoff. You are right. I can call the showMe() method as a global
> function. So, is it okay if I assume that i could only call the shimmed js
> lib through global function?  Since it wouldn't get passed through the
> define parameter. Or is my implementation that's incorrect? Is there a
> better way (better scoped) to implement this?
>
> Cheers.
>
> On Wed, Feb 18, 2015 at 7:33 AM, Geoff Callender <
> [hidden email]> wrote:
>
>> Your "require" has ensured the mytest.js file gets loaded by the browser
>> but the file's contents do not define an AMD module. Therefore the scope of
>> showMe() is global, so I think you'll find you can call showMe() but not
>> mytest.showMe().
>>
>> Geoff
>>
>> On 18 Feb 2015, at 5:05 am, Thiago H de Paula Figueiredo <
>> [hidden email]> wrote:
>>
>>> Please read the Require.js documentation about this. You just cannot use
>> Require.js with non AMD .js files and expect it to work without no further
>> work.
>>>
>>> On Sat, 14 Feb 2015 14:04:36 -0200, abangkis <[hidden email]> wrote:
>>>
>>>> Hello. I'm trying to load a simple regular javascript that's going to be
>>>> used as dependency from a RequireJS module.
>>>>
>>>> So i created mytest.js under classpath:META-INF/assets/js/mytest.js. It
>>>> contain a single function :
>>>>
>>>> function showMe() {
>>>> alert("test 2  my_test");
>>>> };
>>>>
>>>> I add the contribution in AppModule
>>>>
>>>>   public static void
>> contributeModuleManager(MappedConfiguration<String,
>>>> Object> configuration,
>>>>           @Path("/META-INF/assets/js/mytest.js") Resource js) {
>>>>       configuration.add("mytest", new
>> JavaScriptModuleConfiguration(js));
>>>>   }
>>>>
>>>> Create a test page
>>>>
>>>> @Import(module = "Lima")
>>>> public class Lima {
>>>> }
>>>>
>>>> that call the module :
>>>>
>>>> require(['mytest'],
>>>> function(mytest){
>>>> console.log("mytest " + mytest);
>>>> mytest.showMe();
>>>> });
>>>>
>>>> the module is loaded, the mytest.js file is found. But the console log
>>>> mytest as undefined. Here's what's printed on the console
>>>>
>>>> Loading 2 libraries
>>>> console.js:104 Loading library
>>>> /KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
>>>> console.js:104 Loading library
>>>> /KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
>>>> console.js:104 Executing 1 inits
>>>> console.js:104 Loaded module Lima
>>>> console.js:104 All inits executed
>>>> Lima.js:3 mytest undefined
>>>> console.js:104 RequireJS error: require: Cannot read property 'showMe'
>> of
>>>> undefined
>>>>
>>>> So, what did i do wrong? Thanks.
>>>
>>>
>>> --
>>> Thiago H. de Paula Figueiredo
>>> Tapestry, Java and Hibernate consultant and developer
>>> http://machina.com.br
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: [hidden email]
>>> For additional commands, e-mail: [hidden email]
>>
>>
>
>
> --
> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> twitter : @mreunionlabs @abangkis
> page : https://plus.google.com/104168782385184990771

Reply | Threaded
Open this post in threaded view
|

Re: Trying to load non AMD javascript in tapestry 5.4

Diego Socaceti
Hi @all,

if you want to shim non-AMD JavaScript files you should use
JavaScriptModuleConfiguration.
It offers everything you need to create shim configs.

use JavaScriptModuleConfiguration#dependsOn() for 'deps' of shim config
use JavaScriptModuleConfiguration#dependsOn() for 'exports' of shim config

Kind regards


2015-02-18 12:13 GMT+01:00 Geoff Callender <
[hidden email]>:

> Despite what I said 9 months ago in the thread you referenced, I'm not
> sure that I've ever seen the shimming [1] ever work, but I haven't pursued
> it because the many javascript libraries I use work fine anyway without
> being modules.
>
> [1]
> http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptModuleConfiguration.html
>
> Here are 4 very different examples that my modules are using without, I
> believe, shimming. Maybe they're being shimmed and I should take advantage
> of it. If so, I'd welcome someone setting me straight.
>
>         public static void contributeModuleManager(
>                         MappedConfiguration<String, Object> configuration,
>
> @Path("/META-INF/assets/js/highcharts-4.0.4/highcharts.js") Resource
> highcharts,
>
> @Path("/META-INF/assets/fineuploader/fineuploader-5.0.9.js") Resource
> fineuploader,
>
> @Path("/META-INF/assets/js/fastclick-1.0.3.min.js") Resource fastclick,
>
> @Path("/META-INF/assets/js/pick-a-color-1.2.3/dependencies/tinycolor-0.9.15.min.js")
> Resource tinycolor,
> ) {
>                 configuration.add("highcharts", new
> JavaScriptModuleConfiguration(highcharts));
>                 configuration.add("fineuploader", new
> JavaScriptModuleConfiguration(fineuploader));
>                 configuration.add("fastclick", new
> JavaScriptModuleConfiguration(fastclick));
>                 configuration.add("tinycolor", new
> JavaScriptModuleConfiguration(tinycolor));
>         }
>
> Using highcharts...
>
> define([ "jquery", "highcharts" ], function($) {
>         init = function(params) {
>                 $chart = $("#" + params.id);
>                 $chart.highcharts({
>                         :
>
> Using fineuploader...
>
> define(["jquery", "t5/core/console", "fineuploader"], function($, console)
> {
>         var uploader;
>         init = function(params) {
>                 uploader = new qq.FineUploader({
>                         :
>
> Using fastclick...
>
> define([ "jquery", "fastclick" ], function($, FastClick) {
>         return function(options) {
>                 var options = options || {};
>                 new FastClick(document.body, options);
>         };
> });
>
> Using tinycolor...
>
> // Depends on PickAColorJavaScriptStack.
>
> define(["jquery", "tinycolor", "underscore", "t5/core/console",
> "bootstrap/tooltip", "bootstrap/popover"], function($, tinycolor, _,
> console) {
>         init = function(params) {
>                 pickAColorOptions = _.extend({}, params.pickAColorOptions);
>                 // To prevent pickAColor failing with "tinycolor is not
> defined", assign window.tinycolor.
>                 window.tinycolor = tinycolor;
>                 :
>
> HTH,
>
> Geoff
>
>
> On 18 Feb 2015, at 5:54 pm, abangkis <[hidden email]> wrote:
>
> > Hi  Geoff. You are right. I can call the showMe() method as a global
> > function. So, is it okay if I assume that i could only call the shimmed
> js
> > lib through global function?  Since it wouldn't get passed through the
> > define parameter. Or is my implementation that's incorrect? Is there a
> > better way (better scoped) to implement this?
> >
> > Cheers.
> >
> > On Wed, Feb 18, 2015 at 7:33 AM, Geoff Callender <
> > [hidden email]> wrote:
> >
> >> Your "require" has ensured the mytest.js file gets loaded by the browser
> >> but the file's contents do not define an AMD module. Therefore the
> scope of
> >> showMe() is global, so I think you'll find you can call showMe() but not
> >> mytest.showMe().
> >>
> >> Geoff
> >>
> >> On 18 Feb 2015, at 5:05 am, Thiago H de Paula Figueiredo <
> >> [hidden email]> wrote:
> >>
> >>> Please read the Require.js documentation about this. You just cannot
> use
> >> Require.js with non AMD .js files and expect it to work without no
> further
> >> work.
> >>>
> >>> On Sat, 14 Feb 2015 14:04:36 -0200, abangkis <[hidden email]>
> wrote:
> >>>
> >>>> Hello. I'm trying to load a simple regular javascript that's going to
> be
> >>>> used as dependency from a RequireJS module.
> >>>>
> >>>> So i created mytest.js under classpath:META-INF/assets/js/mytest.js.
> It
> >>>> contain a single function :
> >>>>
> >>>> function showMe() {
> >>>> alert("test 2  my_test");
> >>>> };
> >>>>
> >>>> I add the contribution in AppModule
> >>>>
> >>>>   public static void
> >> contributeModuleManager(MappedConfiguration<String,
> >>>> Object> configuration,
> >>>>           @Path("/META-INF/assets/js/mytest.js") Resource js) {
> >>>>       configuration.add("mytest", new
> >> JavaScriptModuleConfiguration(js));
> >>>>   }
> >>>>
> >>>> Create a test page
> >>>>
> >>>> @Import(module = "Lima")
> >>>> public class Lima {
> >>>> }
> >>>>
> >>>> that call the module :
> >>>>
> >>>> require(['mytest'],
> >>>> function(mytest){
> >>>> console.log("mytest " + mytest);
> >>>> mytest.showMe();
> >>>> });
> >>>>
> >>>> the module is loaded, the mytest.js file is found. But the console log
> >>>> mytest as undefined. Here's what's printed on the console
> >>>>
> >>>> Loading 2 libraries
> >>>> console.js:104 Loading library
> >>>> /KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
> >>>> console.js:104 Loading library
> >>>> /KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
> >>>> console.js:104 Executing 1 inits
> >>>> console.js:104 Loaded module Lima
> >>>> console.js:104 All inits executed
> >>>> Lima.js:3 mytest undefined
> >>>> console.js:104 RequireJS error: require: Cannot read property 'showMe'
> >> of
> >>>> undefined
> >>>>
> >>>> So, what did i do wrong? Thanks.
> >>>
> >>>
> >>> --
> >>> Thiago H. de Paula Figueiredo
> >>> Tapestry, Java and Hibernate consultant and developer
> >>> http://machina.com.br
> >>>
> >>> ---------------------------------------------------------------------
> >>> To unsubscribe, e-mail: [hidden email]
> >>> For additional commands, e-mail: [hidden email]
> >>
> >>
> >
> >
> > --
> > http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> > twitter : @mreunionlabs @abangkis
> > page : https://plus.google.com/104168782385184990771
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Trying to load non AMD javascript in tapestry 5.4

Diego Socaceti
sorry, copy, paste-error

... use JavaScriptModuleConfiguration#exports() for 'exports' of shim config

2015-02-18 14:58 GMT+01:00 Diego Socaceti <[hidden email]>:

> Hi @all,
>
> if you want to shim non-AMD JavaScript files you should use
> JavaScriptModuleConfiguration.
> It offers everything you need to create shim configs.
>
> use JavaScriptModuleConfiguration#dependsOn() for 'deps' of shim config
> use JavaScriptModuleConfiguration#dependsOn() for 'exports' of shim config
>
> Kind regards
>
>
> 2015-02-18 12:13 GMT+01:00 Geoff Callender <
> [hidden email]>:
>
>> Despite what I said 9 months ago in the thread you referenced, I'm not
>> sure that I've ever seen the shimming [1] ever work, but I haven't pursued
>> it because the many javascript libraries I use work fine anyway without
>> being modules.
>>
>> [1]
>> http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptModuleConfiguration.html
>>
>> Here are 4 very different examples that my modules are using without, I
>> believe, shimming. Maybe they're being shimmed and I should take advantage
>> of it. If so, I'd welcome someone setting me straight.
>>
>>         public static void contributeModuleManager(
>>                         MappedConfiguration<String, Object> configuration,
>>
>> @Path("/META-INF/assets/js/highcharts-4.0.4/highcharts.js") Resource
>> highcharts,
>>
>> @Path("/META-INF/assets/fineuploader/fineuploader-5.0.9.js") Resource
>> fineuploader,
>>
>> @Path("/META-INF/assets/js/fastclick-1.0.3.min.js") Resource fastclick,
>>
>> @Path("/META-INF/assets/js/pick-a-color-1.2.3/dependencies/tinycolor-0.9.15.min.js")
>> Resource tinycolor,
>> ) {
>>                 configuration.add("highcharts", new
>> JavaScriptModuleConfiguration(highcharts));
>>                 configuration.add("fineuploader", new
>> JavaScriptModuleConfiguration(fineuploader));
>>                 configuration.add("fastclick", new
>> JavaScriptModuleConfiguration(fastclick));
>>                 configuration.add("tinycolor", new
>> JavaScriptModuleConfiguration(tinycolor));
>>         }
>>
>> Using highcharts...
>>
>> define([ "jquery", "highcharts" ], function($) {
>>         init = function(params) {
>>                 $chart = $("#" + params.id);
>>                 $chart.highcharts({
>>                         :
>>
>> Using fineuploader...
>>
>> define(["jquery", "t5/core/console", "fineuploader"], function($,
>> console) {
>>         var uploader;
>>         init = function(params) {
>>                 uploader = new qq.FineUploader({
>>                         :
>>
>> Using fastclick...
>>
>> define([ "jquery", "fastclick" ], function($, FastClick) {
>>         return function(options) {
>>                 var options = options || {};
>>                 new FastClick(document.body, options);
>>         };
>> });
>>
>> Using tinycolor...
>>
>> // Depends on PickAColorJavaScriptStack.
>>
>> define(["jquery", "tinycolor", "underscore", "t5/core/console",
>> "bootstrap/tooltip", "bootstrap/popover"], function($, tinycolor, _,
>> console) {
>>         init = function(params) {
>>                 pickAColorOptions = _.extend({},
>> params.pickAColorOptions);
>>                 // To prevent pickAColor failing with "tinycolor is not
>> defined", assign window.tinycolor.
>>                 window.tinycolor = tinycolor;
>>                 :
>>
>> HTH,
>>
>> Geoff
>>
>>
>> On 18 Feb 2015, at 5:54 pm, abangkis <[hidden email]> wrote:
>>
>> > Hi  Geoff. You are right. I can call the showMe() method as a global
>> > function. So, is it okay if I assume that i could only call the shimmed
>> js
>> > lib through global function?  Since it wouldn't get passed through the
>> > define parameter. Or is my implementation that's incorrect? Is there a
>> > better way (better scoped) to implement this?
>> >
>> > Cheers.
>> >
>> > On Wed, Feb 18, 2015 at 7:33 AM, Geoff Callender <
>> > [hidden email]> wrote:
>> >
>> >> Your "require" has ensured the mytest.js file gets loaded by the
>> browser
>> >> but the file's contents do not define an AMD module. Therefore the
>> scope of
>> >> showMe() is global, so I think you'll find you can call showMe() but
>> not
>> >> mytest.showMe().
>> >>
>> >> Geoff
>> >>
>> >> On 18 Feb 2015, at 5:05 am, Thiago H de Paula Figueiredo <
>> >> [hidden email]> wrote:
>> >>
>> >>> Please read the Require.js documentation about this. You just cannot
>> use
>> >> Require.js with non AMD .js files and expect it to work without no
>> further
>> >> work.
>> >>>
>> >>> On Sat, 14 Feb 2015 14:04:36 -0200, abangkis <[hidden email]>
>> wrote:
>> >>>
>> >>>> Hello. I'm trying to load a simple regular javascript that's going
>> to be
>> >>>> used as dependency from a RequireJS module.
>> >>>>
>> >>>> So i created mytest.js under classpath:META-INF/assets/js/mytest.js.
>> It
>> >>>> contain a single function :
>> >>>>
>> >>>> function showMe() {
>> >>>> alert("test 2  my_test");
>> >>>> };
>> >>>>
>> >>>> I add the contribution in AppModule
>> >>>>
>> >>>>   public static void
>> >> contributeModuleManager(MappedConfiguration<String,
>> >>>> Object> configuration,
>> >>>>           @Path("/META-INF/assets/js/mytest.js") Resource js) {
>> >>>>       configuration.add("mytest", new
>> >> JavaScriptModuleConfiguration(js));
>> >>>>   }
>> >>>>
>> >>>> Create a test page
>> >>>>
>> >>>> @Import(module = "Lima")
>> >>>> public class Lima {
>> >>>> }
>> >>>>
>> >>>> that call the module :
>> >>>>
>> >>>> require(['mytest'],
>> >>>> function(mytest){
>> >>>> console.log("mytest " + mytest);
>> >>>> mytest.showMe();
>> >>>> });
>> >>>>
>> >>>> the module is loaded, the mytest.js file is found. But the console
>> log
>> >>>> mytest as undefined. Here's what's printed on the console
>> >>>>
>> >>>> Loading 2 libraries
>> >>>> console.js:104 Loading library
>> >>>> /KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
>> >>>> console.js:104 Loading library
>> >>>> /KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
>> >>>> console.js:104 Executing 1 inits
>> >>>> console.js:104 Loaded module Lima
>> >>>> console.js:104 All inits executed
>> >>>> Lima.js:3 mytest undefined
>> >>>> console.js:104 RequireJS error: require: Cannot read property
>> 'showMe'
>> >> of
>> >>>> undefined
>> >>>>
>> >>>> So, what did i do wrong? Thanks.
>> >>>
>> >>>
>> >>> --
>> >>> Thiago H. de Paula Figueiredo
>> >>> Tapestry, Java and Hibernate consultant and developer
>> >>> http://machina.com.br
>> >>>
>> >>> ---------------------------------------------------------------------
>> >>> To unsubscribe, e-mail: [hidden email]
>> >>> For additional commands, e-mail: [hidden email]
>> >>
>> >>
>> >
>> >
>> > --
>> > http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
>> > twitter : @mreunionlabs @abangkis
>> > page : https://plus.google.com/104168782385184990771
>>
>>
>
Reply | Threaded
Open this post in threaded view
|

Re: Trying to load non AMD javascript in tapestry 5.4

JumpStart
Hi Diego,

That sounds good, but can you give a concrete example of some code, like I gave below. That would be great.

Geoff


On 19 Feb 2015, at 1:00 am, Diego Socaceti <[hidden email]> wrote:

> sorry, copy, paste-error
>
> ... use JavaScriptModuleConfiguration#exports() for 'exports' of shim config
>
> 2015-02-18 14:58 GMT+01:00 Diego Socaceti <[hidden email]>:
>
>> Hi @all,
>>
>> if you want to shim non-AMD JavaScript files you should use
>> JavaScriptModuleConfiguration.
>> It offers everything you need to create shim configs.
>>
>> use JavaScriptModuleConfiguration#dependsOn() for 'deps' of shim config
>> use JavaScriptModuleConfiguration#dependsOn() for 'exports' of shim config
>>
>> Kind regards
>>
>>
>> 2015-02-18 12:13 GMT+01:00 Geoff Callender <
>> [hidden email]>:
>>
>>> Despite what I said 9 months ago in the thread you referenced, I'm not
>>> sure that I've ever seen the shimming [1] ever work, but I haven't pursued
>>> it because the many javascript libraries I use work fine anyway without
>>> being modules.
>>>
>>> [1]
>>> http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptModuleConfiguration.html
>>>
>>> Here are 4 very different examples that my modules are using without, I
>>> believe, shimming. Maybe they're being shimmed and I should take advantage
>>> of it. If so, I'd welcome someone setting me straight.
>>>
>>>        public static void contributeModuleManager(
>>>                        MappedConfiguration<String, Object> configuration,
>>>
>>> @Path("/META-INF/assets/js/highcharts-4.0.4/highcharts.js") Resource
>>> highcharts,
>>>
>>> @Path("/META-INF/assets/fineuploader/fineuploader-5.0.9.js") Resource
>>> fineuploader,
>>>
>>> @Path("/META-INF/assets/js/fastclick-1.0.3.min.js") Resource fastclick,
>>>
>>> @Path("/META-INF/assets/js/pick-a-color-1.2.3/dependencies/tinycolor-0.9.15.min.js")
>>> Resource tinycolor,
>>> ) {
>>>                configuration.add("highcharts", new
>>> JavaScriptModuleConfiguration(highcharts));
>>>                configuration.add("fineuploader", new
>>> JavaScriptModuleConfiguration(fineuploader));
>>>                configuration.add("fastclick", new
>>> JavaScriptModuleConfiguration(fastclick));
>>>                configuration.add("tinycolor", new
>>> JavaScriptModuleConfiguration(tinycolor));
>>>        }
>>>
>>> Using highcharts...
>>>
>>> define([ "jquery", "highcharts" ], function($) {
>>>        init = function(params) {
>>>                $chart = $("#" + params.id);
>>>                $chart.highcharts({
>>>                        :
>>>
>>> Using fineuploader...
>>>
>>> define(["jquery", "t5/core/console", "fineuploader"], function($,
>>> console) {
>>>        var uploader;
>>>        init = function(params) {
>>>                uploader = new qq.FineUploader({
>>>                        :
>>>
>>> Using fastclick...
>>>
>>> define([ "jquery", "fastclick" ], function($, FastClick) {
>>>        return function(options) {
>>>                var options = options || {};
>>>                new FastClick(document.body, options);
>>>        };
>>> });
>>>
>>> Using tinycolor...
>>>
>>> // Depends on PickAColorJavaScriptStack.
>>>
>>> define(["jquery", "tinycolor", "underscore", "t5/core/console",
>>> "bootstrap/tooltip", "bootstrap/popover"], function($, tinycolor, _,
>>> console) {
>>>        init = function(params) {
>>>                pickAColorOptions = _.extend({},
>>> params.pickAColorOptions);
>>>                // To prevent pickAColor failing with "tinycolor is not
>>> defined", assign window.tinycolor.
>>>                window.tinycolor = tinycolor;
>>>                :
>>>
>>> HTH,
>>>
>>> Geoff
>>>
>>>
>>> On 18 Feb 2015, at 5:54 pm, abangkis <[hidden email]> wrote:
>>>
>>>> Hi  Geoff. You are right. I can call the showMe() method as a global
>>>> function. So, is it okay if I assume that i could only call the shimmed
>>> js
>>>> lib through global function?  Since it wouldn't get passed through the
>>>> define parameter. Or is my implementation that's incorrect? Is there a
>>>> better way (better scoped) to implement this?
>>>>
>>>> Cheers.
>>>>
>>>> On Wed, Feb 18, 2015 at 7:33 AM, Geoff Callender <
>>>> [hidden email]> wrote:
>>>>
>>>>> Your "require" has ensured the mytest.js file gets loaded by the
>>> browser
>>>>> but the file's contents do not define an AMD module. Therefore the
>>> scope of
>>>>> showMe() is global, so I think you'll find you can call showMe() but
>>> not
>>>>> mytest.showMe().
>>>>>
>>>>> Geoff
>>>>>
>>>>> On 18 Feb 2015, at 5:05 am, Thiago H de Paula Figueiredo <
>>>>> [hidden email]> wrote:
>>>>>
>>>>>> Please read the Require.js documentation about this. You just cannot
>>> use
>>>>> Require.js with non AMD .js files and expect it to work without no
>>> further
>>>>> work.
>>>>>>
>>>>>> On Sat, 14 Feb 2015 14:04:36 -0200, abangkis <[hidden email]>
>>> wrote:
>>>>>>
>>>>>>> Hello. I'm trying to load a simple regular javascript that's going
>>> to be
>>>>>>> used as dependency from a RequireJS module.
>>>>>>>
>>>>>>> So i created mytest.js under classpath:META-INF/assets/js/mytest.js.
>>> It
>>>>>>> contain a single function :
>>>>>>>
>>>>>>> function showMe() {
>>>>>>> alert("test 2  my_test");
>>>>>>> };
>>>>>>>
>>>>>>> I add the contribution in AppModule
>>>>>>>
>>>>>>>  public static void
>>>>> contributeModuleManager(MappedConfiguration<String,
>>>>>>> Object> configuration,
>>>>>>>          @Path("/META-INF/assets/js/mytest.js") Resource js) {
>>>>>>>      configuration.add("mytest", new
>>>>> JavaScriptModuleConfiguration(js));
>>>>>>>  }
>>>>>>>
>>>>>>> Create a test page
>>>>>>>
>>>>>>> @Import(module = "Lima")
>>>>>>> public class Lima {
>>>>>>> }
>>>>>>>
>>>>>>> that call the module :
>>>>>>>
>>>>>>> require(['mytest'],
>>>>>>> function(mytest){
>>>>>>> console.log("mytest " + mytest);
>>>>>>> mytest.showMe();
>>>>>>> });
>>>>>>>
>>>>>>> the module is loaded, the mytest.js file is found. But the console
>>> log
>>>>>>> mytest as undefined. Here's what's printed on the console
>>>>>>>
>>>>>>> Loading 2 libraries
>>>>>>> console.js:104 Loading library
>>>>>>> /KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
>>>>>>> console.js:104 Loading library
>>>>>>> /KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
>>>>>>> console.js:104 Executing 1 inits
>>>>>>> console.js:104 Loaded module Lima
>>>>>>> console.js:104 All inits executed
>>>>>>> Lima.js:3 mytest undefined
>>>>>>> console.js:104 RequireJS error: require: Cannot read property
>>> 'showMe'
>>>>> of
>>>>>>> undefined
>>>>>>>
>>>>>>> So, what did i do wrong? Thanks.
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Thiago H. de Paula Figueiredo
>>>>>> Tapestry, Java and Hibernate consultant and developer
>>>>>> http://machina.com.br
>>>>>>
>>>>>> ---------------------------------------------------------------------
>>>>>> To unsubscribe, e-mail: [hidden email]
>>>>>> For additional commands, e-mail: [hidden email]
>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
>>>> twitter : @mreunionlabs @abangkis
>>>> page : https://plus.google.com/104168782385184990771
>>>
>>>
>>


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

Reply | Threaded
Open this post in threaded view
|

Re: Trying to load non AMD javascript in tapestry 5.4

Diego Socaceti
Hi Geoff,

yes, here is some productive code:

public class JavaScriptLibraryModule {

  private static final String MODERNIZR_PATH =
"context:third-party/modernizr-2.7.1.js";
  private static final String JS_SIMPLE_CLASS_PATH =
"context:third-party/class.js";
  private static final String JS_FONT_PICKER_PATH =
"context:third-party/fontselector/src/jquery.fontselector.js";
  private static final String JS_DATE_FORMAT_PATH =
"context:third-party/dateFormat.js";

  @Contribute(ModuleManager.class)
  public static void
addExternalNonAmdJavaScript(MappedConfiguration<String, Object>
configuration,
      @Path(MODERNIZR_PATH) Resource modernizr,
      @Path(JS_SIMPLE_CLASS_PATH) Resource simpleClass
      @Path(JS_FONT_PICKER_PATH) Resource fontPicker,
      @Path(JS_DATE_FORMAT_PATH) Resource dateFormat) {

    configuration.add("modernizr",
        new JavaScriptModuleConfiguration(modernizr)
        .exports("Modernizr"));

    configuration.add("class", new
JavaScriptModuleConfiguration(simpleClass)
        .exports("Class"));

    configuration.add("font-picker", new
JavaScriptModuleConfiguration(fontPicker)
        .dependsOn("jquery"));

    configuration.add("date-format", new
JavaScriptModuleConfiguration(dateFormat)
        .exports("DateFormat")
      .dependsOn("jquery"));

  }
}

Kind regards


2015-02-18 15:04 GMT+01:00 Geoff Callender <
[hidden email]>:

> Hi Diego,
>
> That sounds good, but can you give a concrete example of some code, like I
> gave below. That would be great.
>
> Geoff
>
>
> On 19 Feb 2015, at 1:00 am, Diego Socaceti <[hidden email]> wrote:
>
> > sorry, copy, paste-error
> >
> > ... use JavaScriptModuleConfiguration#exports() for 'exports' of shim
> config
> >
> > 2015-02-18 14:58 GMT+01:00 Diego Socaceti <[hidden email]>:
> >
> >> Hi @all,
> >>
> >> if you want to shim non-AMD JavaScript files you should use
> >> JavaScriptModuleConfiguration.
> >> It offers everything you need to create shim configs.
> >>
> >> use JavaScriptModuleConfiguration#dependsOn() for 'deps' of shim config
> >> use JavaScriptModuleConfiguration#dependsOn() for 'exports' of shim
> config
> >>
> >> Kind regards
> >>
> >>
> >> 2015-02-18 12:13 GMT+01:00 Geoff Callender <
> >> [hidden email]>:
> >>
> >>> Despite what I said 9 months ago in the thread you referenced, I'm not
> >>> sure that I've ever seen the shimming [1] ever work, but I haven't
> pursued
> >>> it because the many javascript libraries I use work fine anyway without
> >>> being modules.
> >>>
> >>> [1]
> >>>
> http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptModuleConfiguration.html
> >>>
> >>> Here are 4 very different examples that my modules are using without, I
> >>> believe, shimming. Maybe they're being shimmed and I should take
> advantage
> >>> of it. If so, I'd welcome someone setting me straight.
> >>>
> >>>        public static void contributeModuleManager(
> >>>                        MappedConfiguration<String, Object>
> configuration,
> >>>
> >>> @Path("/META-INF/assets/js/highcharts-4.0.4/highcharts.js") Resource
> >>> highcharts,
> >>>
> >>> @Path("/META-INF/assets/fineuploader/fineuploader-5.0.9.js") Resource
> >>> fineuploader,
> >>>
> >>> @Path("/META-INF/assets/js/fastclick-1.0.3.min.js") Resource fastclick,
> >>>
> >>>
> @Path("/META-INF/assets/js/pick-a-color-1.2.3/dependencies/tinycolor-0.9.15.min.js")
> >>> Resource tinycolor,
> >>> ) {
> >>>                configuration.add("highcharts", new
> >>> JavaScriptModuleConfiguration(highcharts));
> >>>                configuration.add("fineuploader", new
> >>> JavaScriptModuleConfiguration(fineuploader));
> >>>                configuration.add("fastclick", new
> >>> JavaScriptModuleConfiguration(fastclick));
> >>>                configuration.add("tinycolor", new
> >>> JavaScriptModuleConfiguration(tinycolor));
> >>>        }
> >>>
> >>> Using highcharts...
> >>>
> >>> define([ "jquery", "highcharts" ], function($) {
> >>>        init = function(params) {
> >>>                $chart = $("#" + params.id);
> >>>                $chart.highcharts({
> >>>                        :
> >>>
> >>> Using fineuploader...
> >>>
> >>> define(["jquery", "t5/core/console", "fineuploader"], function($,
> >>> console) {
> >>>        var uploader;
> >>>        init = function(params) {
> >>>                uploader = new qq.FineUploader({
> >>>                        :
> >>>
> >>> Using fastclick...
> >>>
> >>> define([ "jquery", "fastclick" ], function($, FastClick) {
> >>>        return function(options) {
> >>>                var options = options || {};
> >>>                new FastClick(document.body, options);
> >>>        };
> >>> });
> >>>
> >>> Using tinycolor...
> >>>
> >>> // Depends on PickAColorJavaScriptStack.
> >>>
> >>> define(["jquery", "tinycolor", "underscore", "t5/core/console",
> >>> "bootstrap/tooltip", "bootstrap/popover"], function($, tinycolor, _,
> >>> console) {
> >>>        init = function(params) {
> >>>                pickAColorOptions = _.extend({},
> >>> params.pickAColorOptions);
> >>>                // To prevent pickAColor failing with "tinycolor is not
> >>> defined", assign window.tinycolor.
> >>>                window.tinycolor = tinycolor;
> >>>                :
> >>>
> >>> HTH,
> >>>
> >>> Geoff
> >>>
> >>>
> >>> On 18 Feb 2015, at 5:54 pm, abangkis <[hidden email]> wrote:
> >>>
> >>>> Hi  Geoff. You are right. I can call the showMe() method as a global
> >>>> function. So, is it okay if I assume that i could only call the
> shimmed
> >>> js
> >>>> lib through global function?  Since it wouldn't get passed through the
> >>>> define parameter. Or is my implementation that's incorrect? Is there a
> >>>> better way (better scoped) to implement this?
> >>>>
> >>>> Cheers.
> >>>>
> >>>> On Wed, Feb 18, 2015 at 7:33 AM, Geoff Callender <
> >>>> [hidden email]> wrote:
> >>>>
> >>>>> Your "require" has ensured the mytest.js file gets loaded by the
> >>> browser
> >>>>> but the file's contents do not define an AMD module. Therefore the
> >>> scope of
> >>>>> showMe() is global, so I think you'll find you can call showMe() but
> >>> not
> >>>>> mytest.showMe().
> >>>>>
> >>>>> Geoff
> >>>>>
> >>>>> On 18 Feb 2015, at 5:05 am, Thiago H de Paula Figueiredo <
> >>>>> [hidden email]> wrote:
> >>>>>
> >>>>>> Please read the Require.js documentation about this. You just cannot
> >>> use
> >>>>> Require.js with non AMD .js files and expect it to work without no
> >>> further
> >>>>> work.
> >>>>>>
> >>>>>> On Sat, 14 Feb 2015 14:04:36 -0200, abangkis <[hidden email]>
> >>> wrote:
> >>>>>>
> >>>>>>> Hello. I'm trying to load a simple regular javascript that's going
> >>> to be
> >>>>>>> used as dependency from a RequireJS module.
> >>>>>>>
> >>>>>>> So i created mytest.js under
> classpath:META-INF/assets/js/mytest.js.
> >>> It
> >>>>>>> contain a single function :
> >>>>>>>
> >>>>>>> function showMe() {
> >>>>>>> alert("test 2  my_test");
> >>>>>>> };
> >>>>>>>
> >>>>>>> I add the contribution in AppModule
> >>>>>>>
> >>>>>>>  public static void
> >>>>> contributeModuleManager(MappedConfiguration<String,
> >>>>>>> Object> configuration,
> >>>>>>>          @Path("/META-INF/assets/js/mytest.js") Resource js) {
> >>>>>>>      configuration.add("mytest", new
> >>>>> JavaScriptModuleConfiguration(js));
> >>>>>>>  }
> >>>>>>>
> >>>>>>> Create a test page
> >>>>>>>
> >>>>>>> @Import(module = "Lima")
> >>>>>>> public class Lima {
> >>>>>>> }
> >>>>>>>
> >>>>>>> that call the module :
> >>>>>>>
> >>>>>>> require(['mytest'],
> >>>>>>> function(mytest){
> >>>>>>> console.log("mytest " + mytest);
> >>>>>>> mytest.showMe();
> >>>>>>> });
> >>>>>>>
> >>>>>>> the module is loaded, the mytest.js file is found. But the console
> >>> log
> >>>>>>> mytest as undefined. Here's what's printed on the console
> >>>>>>>
> >>>>>>> Loading 2 libraries
> >>>>>>> console.js:104 Loading library
> >>>>>>> /KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
> >>>>>>> console.js:104 Loading library
> >>>>>>> /KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
> >>>>>>> console.js:104 Executing 1 inits
> >>>>>>> console.js:104 Loaded module Lima
> >>>>>>> console.js:104 All inits executed
> >>>>>>> Lima.js:3 mytest undefined
> >>>>>>> console.js:104 RequireJS error: require: Cannot read property
> >>> 'showMe'
> >>>>> of
> >>>>>>> undefined
> >>>>>>>
> >>>>>>> So, what did i do wrong? Thanks.
> >>>>>>
> >>>>>>
> >>>>>> --
> >>>>>> Thiago H. de Paula Figueiredo
> >>>>>> Tapestry, Java and Hibernate consultant and developer
> >>>>>> http://machina.com.br
> >>>>>>
> >>>>>>
> ---------------------------------------------------------------------
> >>>>>> To unsubscribe, e-mail: [hidden email]
> >>>>>> For additional commands, e-mail: [hidden email]
> >>>>>
> >>>>>
> >>>>
> >>>>
> >>>> --
> >>>> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> >>>> twitter : @mreunionlabs @abangkis
> >>>> page : https://plus.google.com/104168782385184990771
> >>>
> >>>
> >>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Trying to load non AMD javascript in tapestry 5.4

Diego Socaceti
Hi Geoff,

here the missing parts :)

The JavaScriptLibraryModule now have configured four new modules based on
non-AMD JavaScript:
["modernizr", "class", "font-picker", "date-format"].

- "modernizr" js stores itself in a browser global called "Modernizr"
    ==> .exports("Modernizr")
- "class" js stores itself in a browser global called "Class"
    ==> .exports("Class")
- "font-picker" is a jquery plugin
    ==> .dependsOn("jquery")
- "date-format" is a jquery pluhin, which stores itself in a browser global
called 'DateFormat'
    ==> .exports("DateFormat").dependsOn("jquery")



define([ 'modernizr' ], function(myModernizr) {
  var sampleSvgMethod = function() {
    if (!myModernizr.svg) {
    ...
    }
  };

  return {
    sampleSvgMethod: sampleSvgMethod,
  };
});

define(["jquery", 'font-picker'], function($) {
  return function (clientIdOfInputField) {
    $('#' + clientIdOfInputField).fontSelector({
      'hide_fallbacks' : true,
      'selected' : function(style) { $("#fontTypeField").val(style); },
      'fonts' : [
        'Arial,Arial,Helvetica,sans-serif',
        'Arial Black,Arial Black,Gadget,sans-serif',
        ...
        ]
    });
  }});


Kind regards


2015-02-18 16:24 GMT+01:00 Diego Socaceti <[hidden email]>:

> Hi Geoff,
>
> yes, here is some productive code:
>
> public class JavaScriptLibraryModule {
>
>   private static final String MODERNIZR_PATH =
> "context:third-party/modernizr-2.7.1.js";
>   private static final String JS_SIMPLE_CLASS_PATH =
> "context:third-party/class.js";
>   private static final String JS_FONT_PICKER_PATH =
> "context:third-party/fontselector/src/jquery.fontselector.js";
>   private static final String JS_DATE_FORMAT_PATH =
> "context:third-party/dateFormat.js";
>
>   @Contribute(ModuleManager.class)
>   public static void
> addExternalNonAmdJavaScript(MappedConfiguration<String, Object>
> configuration,
>       @Path(MODERNIZR_PATH) Resource modernizr,
>       @Path(JS_SIMPLE_CLASS_PATH) Resource simpleClass
>       @Path(JS_FONT_PICKER_PATH) Resource fontPicker,
>       @Path(JS_DATE_FORMAT_PATH) Resource dateFormat) {
>
>     configuration.add("modernizr",
>         new JavaScriptModuleConfiguration(modernizr)
>         .exports("Modernizr"));
>
>     configuration.add("class", new
> JavaScriptModuleConfiguration(simpleClass)
>         .exports("Class"));
>
>     configuration.add("font-picker", new
> JavaScriptModuleConfiguration(fontPicker)
>         .dependsOn("jquery"));
>
>     configuration.add("date-format", new
> JavaScriptModuleConfiguration(dateFormat)
>         .exports("DateFormat")
>       .dependsOn("jquery"));
>
>   }
> }
>
> Kind regards
>
>
> 2015-02-18 15:04 GMT+01:00 Geoff Callender <
> [hidden email]>:
>
>> Hi Diego,
>>
>> That sounds good, but can you give a concrete example of some code, like
>> I gave below. That would be great.
>>
>> Geoff
>>
>>
>> On 19 Feb 2015, at 1:00 am, Diego Socaceti <[hidden email]> wrote:
>>
>> > sorry, copy, paste-error
>> >
>> > ... use JavaScriptModuleConfiguration#exports() for 'exports' of shim
>> config
>> >
>> > 2015-02-18 14:58 GMT+01:00 Diego Socaceti <[hidden email]>:
>> >
>> >> Hi @all,
>> >>
>> >> if you want to shim non-AMD JavaScript files you should use
>> >> JavaScriptModuleConfiguration.
>> >> It offers everything you need to create shim configs.
>> >>
>> >> use JavaScriptModuleConfiguration#dependsOn() for 'deps' of shim config
>> >> use JavaScriptModuleConfiguration#dependsOn() for 'exports' of shim
>> config
>> >>
>> >> Kind regards
>> >>
>> >>
>> >> 2015-02-18 12:13 GMT+01:00 Geoff Callender <
>> >> [hidden email]>:
>> >>
>> >>> Despite what I said 9 months ago in the thread you referenced, I'm not
>> >>> sure that I've ever seen the shimming [1] ever work, but I haven't
>> pursued
>> >>> it because the many javascript libraries I use work fine anyway
>> without
>> >>> being modules.
>> >>>
>> >>> [1]
>> >>>
>> http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptModuleConfiguration.html
>> >>>
>> >>> Here are 4 very different examples that my modules are using without,
>> I
>> >>> believe, shimming. Maybe they're being shimmed and I should take
>> advantage
>> >>> of it. If so, I'd welcome someone setting me straight.
>> >>>
>> >>>        public static void contributeModuleManager(
>> >>>                        MappedConfiguration<String, Object>
>> configuration,
>> >>>
>> >>> @Path("/META-INF/assets/js/highcharts-4.0.4/highcharts.js") Resource
>> >>> highcharts,
>> >>>
>> >>> @Path("/META-INF/assets/fineuploader/fineuploader-5.0.9.js") Resource
>> >>> fineuploader,
>> >>>
>> >>> @Path("/META-INF/assets/js/fastclick-1.0.3.min.js") Resource
>> fastclick,
>> >>>
>> >>>
>> @Path("/META-INF/assets/js/pick-a-color-1.2.3/dependencies/tinycolor-0.9.15.min.js")
>> >>> Resource tinycolor,
>> >>> ) {
>> >>>                configuration.add("highcharts", new
>> >>> JavaScriptModuleConfiguration(highcharts));
>> >>>                configuration.add("fineuploader", new
>> >>> JavaScriptModuleConfiguration(fineuploader));
>> >>>                configuration.add("fastclick", new
>> >>> JavaScriptModuleConfiguration(fastclick));
>> >>>                configuration.add("tinycolor", new
>> >>> JavaScriptModuleConfiguration(tinycolor));
>> >>>        }
>> >>>
>> >>> Using highcharts...
>> >>>
>> >>> define([ "jquery", "highcharts" ], function($) {
>> >>>        init = function(params) {
>> >>>                $chart = $("#" + params.id);
>> >>>                $chart.highcharts({
>> >>>                        :
>> >>>
>> >>> Using fineuploader...
>> >>>
>> >>> define(["jquery", "t5/core/console", "fineuploader"], function($,
>> >>> console) {
>> >>>        var uploader;
>> >>>        init = function(params) {
>> >>>                uploader = new qq.FineUploader({
>> >>>                        :
>> >>>
>> >>> Using fastclick...
>> >>>
>> >>> define([ "jquery", "fastclick" ], function($, FastClick) {
>> >>>        return function(options) {
>> >>>                var options = options || {};
>> >>>                new FastClick(document.body, options);
>> >>>        };
>> >>> });
>> >>>
>> >>> Using tinycolor...
>> >>>
>> >>> // Depends on PickAColorJavaScriptStack.
>> >>>
>> >>> define(["jquery", "tinycolor", "underscore", "t5/core/console",
>> >>> "bootstrap/tooltip", "bootstrap/popover"], function($, tinycolor, _,
>> >>> console) {
>> >>>        init = function(params) {
>> >>>                pickAColorOptions = _.extend({},
>> >>> params.pickAColorOptions);
>> >>>                // To prevent pickAColor failing with "tinycolor is not
>> >>> defined", assign window.tinycolor.
>> >>>                window.tinycolor = tinycolor;
>> >>>                :
>> >>>
>> >>> HTH,
>> >>>
>> >>> Geoff
>> >>>
>> >>>
>> >>> On 18 Feb 2015, at 5:54 pm, abangkis <[hidden email]> wrote:
>> >>>
>> >>>> Hi  Geoff. You are right. I can call the showMe() method as a global
>> >>>> function. So, is it okay if I assume that i could only call the
>> shimmed
>> >>> js
>> >>>> lib through global function?  Since it wouldn't get passed through
>> the
>> >>>> define parameter. Or is my implementation that's incorrect? Is there
>> a
>> >>>> better way (better scoped) to implement this?
>> >>>>
>> >>>> Cheers.
>> >>>>
>> >>>> On Wed, Feb 18, 2015 at 7:33 AM, Geoff Callender <
>> >>>> [hidden email]> wrote:
>> >>>>
>> >>>>> Your "require" has ensured the mytest.js file gets loaded by the
>> >>> browser
>> >>>>> but the file's contents do not define an AMD module. Therefore the
>> >>> scope of
>> >>>>> showMe() is global, so I think you'll find you can call showMe() but
>> >>> not
>> >>>>> mytest.showMe().
>> >>>>>
>> >>>>> Geoff
>> >>>>>
>> >>>>> On 18 Feb 2015, at 5:05 am, Thiago H de Paula Figueiredo <
>> >>>>> [hidden email]> wrote:
>> >>>>>
>> >>>>>> Please read the Require.js documentation about this. You just
>> cannot
>> >>> use
>> >>>>> Require.js with non AMD .js files and expect it to work without no
>> >>> further
>> >>>>> work.
>> >>>>>>
>> >>>>>> On Sat, 14 Feb 2015 14:04:36 -0200, abangkis <[hidden email]>
>> >>> wrote:
>> >>>>>>
>> >>>>>>> Hello. I'm trying to load a simple regular javascript that's going
>> >>> to be
>> >>>>>>> used as dependency from a RequireJS module.
>> >>>>>>>
>> >>>>>>> So i created mytest.js under
>> classpath:META-INF/assets/js/mytest.js.
>> >>> It
>> >>>>>>> contain a single function :
>> >>>>>>>
>> >>>>>>> function showMe() {
>> >>>>>>> alert("test 2  my_test");
>> >>>>>>> };
>> >>>>>>>
>> >>>>>>> I add the contribution in AppModule
>> >>>>>>>
>> >>>>>>>  public static void
>> >>>>> contributeModuleManager(MappedConfiguration<String,
>> >>>>>>> Object> configuration,
>> >>>>>>>          @Path("/META-INF/assets/js/mytest.js") Resource js) {
>> >>>>>>>      configuration.add("mytest", new
>> >>>>> JavaScriptModuleConfiguration(js));
>> >>>>>>>  }
>> >>>>>>>
>> >>>>>>> Create a test page
>> >>>>>>>
>> >>>>>>> @Import(module = "Lima")
>> >>>>>>> public class Lima {
>> >>>>>>> }
>> >>>>>>>
>> >>>>>>> that call the module :
>> >>>>>>>
>> >>>>>>> require(['mytest'],
>> >>>>>>> function(mytest){
>> >>>>>>> console.log("mytest " + mytest);
>> >>>>>>> mytest.showMe();
>> >>>>>>> });
>> >>>>>>>
>> >>>>>>> the module is loaded, the mytest.js file is found. But the console
>> >>> log
>> >>>>>>> mytest as undefined. Here's what's printed on the console
>> >>>>>>>
>> >>>>>>> Loading 2 libraries
>> >>>>>>> console.js:104 Loading library
>> >>>>>>> /KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
>> >>>>>>> console.js:104 Loading library
>> >>>>>>> /KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
>> >>>>>>> console.js:104 Executing 1 inits
>> >>>>>>> console.js:104 Loaded module Lima
>> >>>>>>> console.js:104 All inits executed
>> >>>>>>> Lima.js:3 mytest undefined
>> >>>>>>> console.js:104 RequireJS error: require: Cannot read property
>> >>> 'showMe'
>> >>>>> of
>> >>>>>>> undefined
>> >>>>>>>
>> >>>>>>> So, what did i do wrong? Thanks.
>> >>>>>>
>> >>>>>>
>> >>>>>> --
>> >>>>>> Thiago H. de Paula Figueiredo
>> >>>>>> Tapestry, Java and Hibernate consultant and developer
>> >>>>>> http://machina.com.br
>> >>>>>>
>> >>>>>>
>> ---------------------------------------------------------------------
>> >>>>>> To unsubscribe, e-mail: [hidden email]
>> >>>>>> For additional commands, e-mail: [hidden email]
>> >>>>>
>> >>>>>
>> >>>>
>> >>>>
>> >>>> --
>> >>>> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
>> >>>> twitter : @mreunionlabs @abangkis
>> >>>> page : https://plus.google.com/104168782385184990771
>> >>>
>> >>>
>> >>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>
Reply | Threaded
Open this post in threaded view
|

Re: Trying to load non AMD javascript in tapestry 5.4

abangkis
Hi Diego and Geoff thanks a lot for the examples. Will work on it again
next week.

On Wed, Feb 18, 2015 at 11:01 PM, Diego Socaceti <[hidden email]> wrote:

> Hi Geoff,
>
> here the missing parts :)
>
> The JavaScriptLibraryModule now have configured four new modules based on
> non-AMD JavaScript:
> ["modernizr", "class", "font-picker", "date-format"].
>
> - "modernizr" js stores itself in a browser global called "Modernizr"
>     ==> .exports("Modernizr")
> - "class" js stores itself in a browser global called "Class"
>     ==> .exports("Class")
> - "font-picker" is a jquery plugin
>     ==> .dependsOn("jquery")
> - "date-format" is a jquery pluhin, which stores itself in a browser global
> called 'DateFormat'
>     ==> .exports("DateFormat").dependsOn("jquery")
>
>
>
> define([ 'modernizr' ], function(myModernizr) {
>   var sampleSvgMethod = function() {
>     if (!myModernizr.svg) {
>     ...
>     }
>   };
>
>   return {
>     sampleSvgMethod: sampleSvgMethod,
>   };
> });
>
> define(["jquery", 'font-picker'], function($) {
>   return function (clientIdOfInputField) {
>     $('#' + clientIdOfInputField).fontSelector({
>       'hide_fallbacks' : true,
>       'selected' : function(style) { $("#fontTypeField").val(style); },
>       'fonts' : [
>         'Arial,Arial,Helvetica,sans-serif',
>         'Arial Black,Arial Black,Gadget,sans-serif',
>         ...
>         ]
>     });
>   }});
>
>
> Kind regards
>
>
> 2015-02-18 16:24 GMT+01:00 Diego Socaceti <[hidden email]>:
>
> > Hi Geoff,
> >
> > yes, here is some productive code:
> >
> > public class JavaScriptLibraryModule {
> >
> >   private static final String MODERNIZR_PATH =
> > "context:third-party/modernizr-2.7.1.js";
> >   private static final String JS_SIMPLE_CLASS_PATH =
> > "context:third-party/class.js";
> >   private static final String JS_FONT_PICKER_PATH =
> > "context:third-party/fontselector/src/jquery.fontselector.js";
> >   private static final String JS_DATE_FORMAT_PATH =
> > "context:third-party/dateFormat.js";
> >
> >   @Contribute(ModuleManager.class)
> >   public static void
> > addExternalNonAmdJavaScript(MappedConfiguration<String, Object>
> > configuration,
> >       @Path(MODERNIZR_PATH) Resource modernizr,
> >       @Path(JS_SIMPLE_CLASS_PATH) Resource simpleClass
> >       @Path(JS_FONT_PICKER_PATH) Resource fontPicker,
> >       @Path(JS_DATE_FORMAT_PATH) Resource dateFormat) {
> >
> >     configuration.add("modernizr",
> >         new JavaScriptModuleConfiguration(modernizr)
> >         .exports("Modernizr"));
> >
> >     configuration.add("class", new
> > JavaScriptModuleConfiguration(simpleClass)
> >         .exports("Class"));
> >
> >     configuration.add("font-picker", new
> > JavaScriptModuleConfiguration(fontPicker)
> >         .dependsOn("jquery"));
> >
> >     configuration.add("date-format", new
> > JavaScriptModuleConfiguration(dateFormat)
> >         .exports("DateFormat")
> >       .dependsOn("jquery"));
> >
> >   }
> > }
> >
> > Kind regards
> >
> >
> > 2015-02-18 15:04 GMT+01:00 Geoff Callender <
> > [hidden email]>:
> >
> >> Hi Diego,
> >>
> >> That sounds good, but can you give a concrete example of some code, like
> >> I gave below. That would be great.
> >>
> >> Geoff
> >>
> >>
> >> On 19 Feb 2015, at 1:00 am, Diego Socaceti <[hidden email]> wrote:
> >>
> >> > sorry, copy, paste-error
> >> >
> >> > ... use JavaScriptModuleConfiguration#exports() for 'exports' of shim
> >> config
> >> >
> >> > 2015-02-18 14:58 GMT+01:00 Diego Socaceti <[hidden email]>:
> >> >
> >> >> Hi @all,
> >> >>
> >> >> if you want to shim non-AMD JavaScript files you should use
> >> >> JavaScriptModuleConfiguration.
> >> >> It offers everything you need to create shim configs.
> >> >>
> >> >> use JavaScriptModuleConfiguration#dependsOn() for 'deps' of shim
> config
> >> >> use JavaScriptModuleConfiguration#dependsOn() for 'exports' of shim
> >> config
> >> >>
> >> >> Kind regards
> >> >>
> >> >>
> >> >> 2015-02-18 12:13 GMT+01:00 Geoff Callender <
> >> >> [hidden email]>:
> >> >>
> >> >>> Despite what I said 9 months ago in the thread you referenced, I'm
> not
> >> >>> sure that I've ever seen the shimming [1] ever work, but I haven't
> >> pursued
> >> >>> it because the many javascript libraries I use work fine anyway
> >> without
> >> >>> being modules.
> >> >>>
> >> >>> [1]
> >> >>>
> >>
> http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/javascript/JavaScriptModuleConfiguration.html
> >> >>>
> >> >>> Here are 4 very different examples that my modules are using
> without,
> >> I
> >> >>> believe, shimming. Maybe they're being shimmed and I should take
> >> advantage
> >> >>> of it. If so, I'd welcome someone setting me straight.
> >> >>>
> >> >>>        public static void contributeModuleManager(
> >> >>>                        MappedConfiguration<String, Object>
> >> configuration,
> >> >>>
> >> >>> @Path("/META-INF/assets/js/highcharts-4.0.4/highcharts.js") Resource
> >> >>> highcharts,
> >> >>>
> >> >>> @Path("/META-INF/assets/fineuploader/fineuploader-5.0.9.js")
> Resource
> >> >>> fineuploader,
> >> >>>
> >> >>> @Path("/META-INF/assets/js/fastclick-1.0.3.min.js") Resource
> >> fastclick,
> >> >>>
> >> >>>
> >>
> @Path("/META-INF/assets/js/pick-a-color-1.2.3/dependencies/tinycolor-0.9.15.min.js")
> >> >>> Resource tinycolor,
> >> >>> ) {
> >> >>>                configuration.add("highcharts", new
> >> >>> JavaScriptModuleConfiguration(highcharts));
> >> >>>                configuration.add("fineuploader", new
> >> >>> JavaScriptModuleConfiguration(fineuploader));
> >> >>>                configuration.add("fastclick", new
> >> >>> JavaScriptModuleConfiguration(fastclick));
> >> >>>                configuration.add("tinycolor", new
> >> >>> JavaScriptModuleConfiguration(tinycolor));
> >> >>>        }
> >> >>>
> >> >>> Using highcharts...
> >> >>>
> >> >>> define([ "jquery", "highcharts" ], function($) {
> >> >>>        init = function(params) {
> >> >>>                $chart = $("#" + params.id);
> >> >>>                $chart.highcharts({
> >> >>>                        :
> >> >>>
> >> >>> Using fineuploader...
> >> >>>
> >> >>> define(["jquery", "t5/core/console", "fineuploader"], function($,
> >> >>> console) {
> >> >>>        var uploader;
> >> >>>        init = function(params) {
> >> >>>                uploader = new qq.FineUploader({
> >> >>>                        :
> >> >>>
> >> >>> Using fastclick...
> >> >>>
> >> >>> define([ "jquery", "fastclick" ], function($, FastClick) {
> >> >>>        return function(options) {
> >> >>>                var options = options || {};
> >> >>>                new FastClick(document.body, options);
> >> >>>        };
> >> >>> });
> >> >>>
> >> >>> Using tinycolor...
> >> >>>
> >> >>> // Depends on PickAColorJavaScriptStack.
> >> >>>
> >> >>> define(["jquery", "tinycolor", "underscore", "t5/core/console",
> >> >>> "bootstrap/tooltip", "bootstrap/popover"], function($, tinycolor, _,
> >> >>> console) {
> >> >>>        init = function(params) {
> >> >>>                pickAColorOptions = _.extend({},
> >> >>> params.pickAColorOptions);
> >> >>>                // To prevent pickAColor failing with "tinycolor is
> not
> >> >>> defined", assign window.tinycolor.
> >> >>>                window.tinycolor = tinycolor;
> >> >>>                :
> >> >>>
> >> >>> HTH,
> >> >>>
> >> >>> Geoff
> >> >>>
> >> >>>
> >> >>> On 18 Feb 2015, at 5:54 pm, abangkis <[hidden email]> wrote:
> >> >>>
> >> >>>> Hi  Geoff. You are right. I can call the showMe() method as a
> global
> >> >>>> function. So, is it okay if I assume that i could only call the
> >> shimmed
> >> >>> js
> >> >>>> lib through global function?  Since it wouldn't get passed through
> >> the
> >> >>>> define parameter. Or is my implementation that's incorrect? Is
> there
> >> a
> >> >>>> better way (better scoped) to implement this?
> >> >>>>
> >> >>>> Cheers.
> >> >>>>
> >> >>>> On Wed, Feb 18, 2015 at 7:33 AM, Geoff Callender <
> >> >>>> [hidden email]> wrote:
> >> >>>>
> >> >>>>> Your "require" has ensured the mytest.js file gets loaded by the
> >> >>> browser
> >> >>>>> but the file's contents do not define an AMD module. Therefore the
> >> >>> scope of
> >> >>>>> showMe() is global, so I think you'll find you can call showMe()
> but
> >> >>> not
> >> >>>>> mytest.showMe().
> >> >>>>>
> >> >>>>> Geoff
> >> >>>>>
> >> >>>>> On 18 Feb 2015, at 5:05 am, Thiago H de Paula Figueiredo <
> >> >>>>> [hidden email]> wrote:
> >> >>>>>
> >> >>>>>> Please read the Require.js documentation about this. You just
> >> cannot
> >> >>> use
> >> >>>>> Require.js with non AMD .js files and expect it to work without no
> >> >>> further
> >> >>>>> work.
> >> >>>>>>
> >> >>>>>> On Sat, 14 Feb 2015 14:04:36 -0200, abangkis <[hidden email]
> >
> >> >>> wrote:
> >> >>>>>>
> >> >>>>>>> Hello. I'm trying to load a simple regular javascript that's
> going
> >> >>> to be
> >> >>>>>>> used as dependency from a RequireJS module.
> >> >>>>>>>
> >> >>>>>>> So i created mytest.js under
> >> classpath:META-INF/assets/js/mytest.js.
> >> >>> It
> >> >>>>>>> contain a single function :
> >> >>>>>>>
> >> >>>>>>> function showMe() {
> >> >>>>>>> alert("test 2  my_test");
> >> >>>>>>> };
> >> >>>>>>>
> >> >>>>>>> I add the contribution in AppModule
> >> >>>>>>>
> >> >>>>>>>  public static void
> >> >>>>> contributeModuleManager(MappedConfiguration<String,
> >> >>>>>>> Object> configuration,
> >> >>>>>>>          @Path("/META-INF/assets/js/mytest.js") Resource js) {
> >> >>>>>>>      configuration.add("mytest", new
> >> >>>>> JavaScriptModuleConfiguration(js));
> >> >>>>>>>  }
> >> >>>>>>>
> >> >>>>>>> Create a test page
> >> >>>>>>>
> >> >>>>>>> @Import(module = "Lima")
> >> >>>>>>> public class Lima {
> >> >>>>>>> }
> >> >>>>>>>
> >> >>>>>>> that call the module :
> >> >>>>>>>
> >> >>>>>>> require(['mytest'],
> >> >>>>>>> function(mytest){
> >> >>>>>>> console.log("mytest " + mytest);
> >> >>>>>>> mytest.showMe();
> >> >>>>>>> });
> >> >>>>>>>
> >> >>>>>>> the module is loaded, the mytest.js file is found. But the
> console
> >> >>> log
> >> >>>>>>> mytest as undefined. Here's what's printed on the console
> >> >>>>>>>
> >> >>>>>>> Loading 2 libraries
> >> >>>>>>> console.js:104 Loading library
> >> >>>>>>> /KomuttaCentral/assets/ctx/z1d218c13/js/jquery-2.0.3.min.js
> >> >>>>>>> console.js:104 Loading library
> >> >>>>>>> /KomuttaCentral/assets/ctx/z50c3674f/js/scripts.js
> >> >>>>>>> console.js:104 Executing 1 inits
> >> >>>>>>> console.js:104 Loaded module Lima
> >> >>>>>>> console.js:104 All inits executed
> >> >>>>>>> Lima.js:3 mytest undefined
> >> >>>>>>> console.js:104 RequireJS error: require: Cannot read property
> >> >>> 'showMe'
> >> >>>>> of
> >> >>>>>>> undefined
> >> >>>>>>>
> >> >>>>>>> So, what did i do wrong? Thanks.
> >> >>>>>>
> >> >>>>>>
> >> >>>>>> --
> >> >>>>>> Thiago H. de Paula Figueiredo
> >> >>>>>> Tapestry, Java and Hibernate consultant and developer
> >> >>>>>> http://machina.com.br
> >> >>>>>>
> >> >>>>>>
> >> ---------------------------------------------------------------------
> >> >>>>>> To unsubscribe, e-mail: [hidden email]
> >> >>>>>> For additional commands, e-mail: [hidden email]
> >> >>>>>
> >> >>>>>
> >> >>>>
> >> >>>>
> >> >>>> --
> >> >>>> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> >> >>>> twitter : @mreunionlabs @abangkis
> >> >>>> page : https://plus.google.com/104168782385184990771
> >> >>>
> >> >>>
> >> >>
> >>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: [hidden email]
> >> For additional commands, e-mail: [hidden email]
> >>
> >>
> >
>



--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs @abangkis
page : https://plus.google.com/104168782385184990771