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 <socac...@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 <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
> >>
> >>
> >
>
--
http://www.mreunionlabs.net/ <http://www.mreunion-labs.net/>
twitter : @mreunionlabs @abangkis
page : https://plus.google.com/104168782385184990771
