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 <socac...@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.jumpst...@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 <socac...@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 <socac...@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.jumpst...@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 <abang...@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.jumpst...@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 <
>> >>>>> thiag...@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 <abang...@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-unsubscr...@tapestry.apache.org
>> >>>>>> For additional commands, e-mail: users-h...@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-unsubscr...@tapestry.apache.org
>> For additional commands, e-mail: users-h...@tapestry.apache.org
>>
>>
>
