You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by abangkis <ab...@gmail.com> on 2015/02/14 17:04:36 UTC
Trying to load non AMD javascript in tapestry 5.4
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
Re: Trying to load non AMD javascript in tapestry 5.4
Posted by abangkis <ab...@gmail.com>.
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 <so...@gmail.com> 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 <so...@gmail.com>:
>
> > 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 <
> > geoff.callender.jumpstart@gmail.com>:
> >
> >> 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 <so...@gmail.com> wrote:
> >>
> >> > sorry, copy, paste-error
> >> >
> >> > ... use JavaScriptModuleConfiguration#exports() for 'exports' of shim
> >> config
> >> >
> >> > 2015-02-18 14:58 GMT+01:00 Diego Socaceti <so...@gmail.com>:
> >> >
> >> >> 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 <
> >> >> geoff.callender.jumpstart@gmail.com>:
> >> >>
> >> >>> 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 <ab...@gmail.com> 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 <
> >> >>>> geoff.callender.jumpstart@gmail.com> 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 <
> >> >>>>> thiagohp@gmail.com> 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 <abangkis@gmail.com
> >
> >> >>> 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: users-unsubscribe@tapestry.apache.org
> >> >>>>>> For additional commands, e-mail: users-help@tapestry.apache.org
> >> >>>>>
> >> >>>>>
> >> >>>>
> >> >>>>
> >> >>>> --
> >> >>>> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> >> >>>> twitter : @mreunionlabs @abangkis
> >> >>>> page : https://plus.google.com/104168782385184990771
> >> >>>
> >> >>>
> >> >>
> >>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> >> For additional commands, e-mail: users-help@tapestry.apache.org
> >>
> >>
> >
>
--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs @abangkis
page : https://plus.google.com/104168782385184990771
Re: Trying to load non AMD javascript in tapestry 5.4
Posted by Diego Socaceti <so...@gmail.com>.
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 <so...@gmail.com>:
> 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 <
> geoff.callender.jumpstart@gmail.com>:
>
>> 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 <so...@gmail.com> wrote:
>>
>> > sorry, copy, paste-error
>> >
>> > ... use JavaScriptModuleConfiguration#exports() for 'exports' of shim
>> config
>> >
>> > 2015-02-18 14:58 GMT+01:00 Diego Socaceti <so...@gmail.com>:
>> >
>> >> 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 <
>> >> geoff.callender.jumpstart@gmail.com>:
>> >>
>> >>> 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 <ab...@gmail.com> 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 <
>> >>>> geoff.callender.jumpstart@gmail.com> 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 <
>> >>>>> thiagohp@gmail.com> 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 <ab...@gmail.com>
>> >>> 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: users-unsubscribe@tapestry.apache.org
>> >>>>>> For additional commands, e-mail: users-help@tapestry.apache.org
>> >>>>>
>> >>>>>
>> >>>>
>> >>>>
>> >>>> --
>> >>>> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
>> >>>> twitter : @mreunionlabs @abangkis
>> >>>> page : https://plus.google.com/104168782385184990771
>> >>>
>> >>>
>> >>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
>>
>
Re: Trying to load non AMD javascript in tapestry 5.4
Posted by Diego Socaceti <so...@gmail.com>.
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 <
geoff.callender.jumpstart@gmail.com>:
> 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 <so...@gmail.com> wrote:
>
> > sorry, copy, paste-error
> >
> > ... use JavaScriptModuleConfiguration#exports() for 'exports' of shim
> config
> >
> > 2015-02-18 14:58 GMT+01:00 Diego Socaceti <so...@gmail.com>:
> >
> >> 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 <
> >> geoff.callender.jumpstart@gmail.com>:
> >>
> >>> 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 <ab...@gmail.com> 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 <
> >>>> geoff.callender.jumpstart@gmail.com> 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 <
> >>>>> thiagohp@gmail.com> 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 <ab...@gmail.com>
> >>> 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: users-unsubscribe@tapestry.apache.org
> >>>>>> For additional commands, e-mail: users-help@tapestry.apache.org
> >>>>>
> >>>>>
> >>>>
> >>>>
> >>>> --
> >>>> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> >>>> twitter : @mreunionlabs @abangkis
> >>>> page : https://plus.google.com/104168782385184990771
> >>>
> >>>
> >>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: Trying to load non AMD javascript in tapestry 5.4
Posted by Geoff Callender <ge...@gmail.com>.
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 <so...@gmail.com> wrote:
> sorry, copy, paste-error
>
> ... use JavaScriptModuleConfiguration#exports() for 'exports' of shim config
>
> 2015-02-18 14:58 GMT+01:00 Diego Socaceti <so...@gmail.com>:
>
>> 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 <
>> geoff.callender.jumpstart@gmail.com>:
>>
>>> 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 <ab...@gmail.com> 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 <
>>>> geoff.callender.jumpstart@gmail.com> 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 <
>>>>> thiagohp@gmail.com> 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 <ab...@gmail.com>
>>> 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: users-unsubscribe@tapestry.apache.org
>>>>>> For additional commands, e-mail: users-help@tapestry.apache.org
>>>>>
>>>>>
>>>>
>>>>
>>>> --
>>>> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
>>>> twitter : @mreunionlabs @abangkis
>>>> page : https://plus.google.com/104168782385184990771
>>>
>>>
>>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Trying to load non AMD javascript in tapestry 5.4
Posted by Diego Socaceti <so...@gmail.com>.
sorry, copy, paste-error
... use JavaScriptModuleConfiguration#exports() for 'exports' of shim config
2015-02-18 14:58 GMT+01:00 Diego Socaceti <so...@gmail.com>:
> 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 <
> geoff.callender.jumpstart@gmail.com>:
>
>> 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 <ab...@gmail.com> 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 <
>> > geoff.callender.jumpstart@gmail.com> 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 <
>> >> thiagohp@gmail.com> 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 <ab...@gmail.com>
>> 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: users-unsubscribe@tapestry.apache.org
>> >>> For additional commands, e-mail: users-help@tapestry.apache.org
>> >>
>> >>
>> >
>> >
>> > --
>> > http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
>> > twitter : @mreunionlabs @abangkis
>> > page : https://plus.google.com/104168782385184990771
>>
>>
>
Re: Trying to load non AMD javascript in tapestry 5.4
Posted by Diego Socaceti <so...@gmail.com>.
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 <
geoff.callender.jumpstart@gmail.com>:
> 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 <ab...@gmail.com> 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 <
> > geoff.callender.jumpstart@gmail.com> 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 <
> >> thiagohp@gmail.com> 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 <ab...@gmail.com>
> 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: users-unsubscribe@tapestry.apache.org
> >>> For additional commands, e-mail: users-help@tapestry.apache.org
> >>
> >>
> >
> >
> > --
> > http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> > twitter : @mreunionlabs @abangkis
> > page : https://plus.google.com/104168782385184990771
>
>
Re: Trying to load non AMD javascript in tapestry 5.4
Posted by Geoff Callender <ge...@gmail.com>.
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 <ab...@gmail.com> 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 <
> geoff.callender.jumpstart@gmail.com> 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 <
>> thiagohp@gmail.com> 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 <ab...@gmail.com> 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: users-unsubscribe@tapestry.apache.org
>>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
>>
>
>
> --
> http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
> twitter : @mreunionlabs @abangkis
> page : https://plus.google.com/104168782385184990771
Re: Trying to load non AMD javascript in tapestry 5.4
Posted by abangkis <ab...@gmail.com>.
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 <
geoff.callender.jumpstart@gmail.com> 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 <
> thiagohp@gmail.com> 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 <ab...@gmail.com> 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: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
>
>
--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs @abangkis
page : https://plus.google.com/104168782385184990771
Re: Trying to load non AMD javascript in tapestry 5.4
Posted by Geoff Callender <ge...@gmail.com>.
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 <th...@gmail.com> 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 <ab...@gmail.com> 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: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
Re: Trying to load non AMD javascript in tapestry 5.4
Posted by abangkis <ab...@gmail.com>.
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@gmail.com%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 <
thiagohp@gmail.com> 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 <ab...@gmail.com> 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: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs @abangkis
page : https://plus.google.com/104168782385184990771
Re: Trying to load non AMD javascript in tapestry 5.4
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
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 <ab...@gmail.com> 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: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org