[amber] jQuery layout question

Hi!

I am just trying to translate some small snippets of mine to Amber but
somehow I have trouble with the jQuery layout plugin.

Is there anybody who successfully used it, yet?

http://layout.jquery-dev.net/demos/example.html

I always get an error that layout is undefined...

Is "ready" needed for amber at all?

Cheers!
Sebastian

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

Okay, it's me again,

it seems as if the jquery layout plugin itself wait until
$(document).ready().

How do I handle this in Amber?
It seems as if I'll need to wait until a jquery plugin is ready until I
can sucessfully do:

  'body' asjQuery layout: '....'

When I implement a $(document).ready() in the index.html file, then the
needed site has not been rendered by renderOn:, if I put it in amber,
then the document.ready has't been fired yet.
If I put a $(document).ready() into the renderOn: of my app then I get
the error that the layout call is not understood by "'body' asjQuery"

I am a little confused...

Anybody been succesuly with jQuery.layout.plugin yet?

Thanks for any advice
Sebastian


Am 09.06.2014 09:14, schrieb 'Sebastian Heidbrink' via amber-lang:
--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

'Sebastian Heidbrink' via amber-lang wrote:
I don't understand what's the problem putting $(document).ready() into a requirejs callback (if you are using 0.12.x) thus doing smalltalk initialize and starting the app a bit later... it should work for anything.

OTOH, if there is a race condidition (plugin also waits for document.ready, who will run first, then put starting an app in a setinterval or setTimeout loop and check if the plugin is present. Crude, but should be working. Or maybe th4e plugin allows you to install some callback for when it's ready.

> ambe
r, then the document.ready has't been fired yet.
> If I put a $(document).ready() into the renderOn: of my app then I get
> the error that the layout call is not understood by "'body' asjQuery"
>
> I am a little confused...
>
> Anybody been succesuly with jQuery.layout.plugin yet?
>
> Thanks for any advice
> Sebastian

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

Hi Herby,

Thanks for the reply.
I tried that already but a delay seems not to work either. Just like
triggering it with a button... I must do something completely wrong...

Taking the example from below the layout call would be 'body' asJQuery
layout: ... right?
The error I get is 'object [Object] does not understand layout:' ...

That is wired.

Sebastian

Am 09.06.2014 09:14, schrieb 'Sebastian Heidbrink' via amber-lang:
--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

'Sebastian Heidbrink' via amber-lang wrote:
> Hi Herby,
>
> Thanks for the reply.
> I tried that already but a delay seems not to work either. Just like
> triggering it with a button... I must do something completely wrong...
>
> Taking the example from below the layout call would be 'body' asJQuery
> layout: ... right?

Yes, this seems right.

> The error I get is 'object [Object] does not understand layout:' ...

Then the plugin is not loaded, probably... does plain JS $('body').layout(...) work? You can make a JS method somewhere with this code and call it from Smalltalk, to differentiate if the error is the wrong smalltalk code or it is somewhere else as JS does not work either.

> Sebastian

Herby

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

Hi Herby,

the inlined method produces the same error... With firebug I can indeed
not find the layout function in the DOM.

When I put the js script into the index.html file, I get an error
message from the plugin saying that a needed css class is missing in the
document.But this his also occurs while adding delays.

I really wonder why it is so difficult to just implement such simple
example...

Sebastian

Am 11.06.2014 07:52, schrieb Herby Vojčík:
--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

Now you know the errors was not in ST itself. Loading a plugin is probably flawed, somehow. I would suspect as the first try that it may have loaded before jQuery and just failed.

If loading jQuery plugins via AMD, it must be told the loader that the file actually depends on jQuery to load it after jQuery is present. That is, in require.config({...}) call, the

  shim: {
    'path/used/to/load/plugin/as/amd': {
      deps: ['jquery']
    }
  }

part must be present. See how amber itself does it, for example, in support/devel.js, jquery-ui and one other jquery-dependent library is configured so that loader knows it depends on jQuery. This may be why it does not work for you.

(if you do not load the plugin via amd, you should, as amber does, and then you have no way to achieve dependency ordering)

Herby

'Sebastian Heidbrink' via amber-lang wrote:
> Hi Herby,
>
> the inlined method produces the same error... With firebug I can
> indeed not find the layout function in the DO
M.  differentiate if the error
>> is the wrong smalltalk code or it is somewhere else as JS does not
>> work either.
>>
>>> Sebastian
>>
>> Herby
>>
>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

Just a short update,
with an additional hint by Herby I was able to find out that I needed to
extend my require and namspace lists in the index.html in a way that
jquery-layout is always mentioned last and also jquery is added in a
shim statement to be required by jquery-layout.

t is more or less like this:
require.config({ paths: {
         'myNamespace': 'js', //mapping compiled .js files
         'myNamespace': 'st', //mapping smalltalk source files
         'jquery': [ 'lib/jquery-latest' ] ,
         'jquery.layout': [ 'lib/jquery.layout-latest' ]
       }
      ,    shim: {
                 'jquery.layout': { deps: ['jquery'] }

       }      });



       require([
                'amber/devel',
                ...,
                'jquery.layout'
                ], function (smalltalk) {

         smalltalk.initialize({'transport.defaultAmdNamespace':
"myNamespace"});
         $(function() {
                           smalltalk.MyStartClass._open();

});
});


     </script>


Now the layout works and there is no need to add timeouts or other
things you can find with the help of google.


Thank you Herby again!
Sebastian



Am 10.06.2014 18:42, schrieb 'Sebastian Heidbrink' via amber-lang:
--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

'Sebastian Heidbrink' via amber-lang <[hidden email]>napísal/a:

Just a short update,
with an additional hint by Herby I was able to find out that I needed to
extend my require and namspace lists in the index.html in a way that
jquery-layout is always mentioned last and also jquery is added in a
shim statement to be required by jquery-layout.

t is more or less like this:
require.config({ paths: {
         'myNamespace': 'js', //mapping compiled .js files
         'myNamespace': 'st', //mapping smalltalk source files
         'jquery': [ 'lib/jquery-latest' ] ,
         'jquery.layout': [ 'lib/jquery.layout-latest' ]

The likely next step here would be to not have your own lib directory, but leave dependency loading to bower. Amber already has jquery as its dependency, but certain parts have their own consyrsints (like bootstrap 2 of helios says jquery should be <2.1.0). If you can ley bower fetch your dependencies for the project (including the jquery layout plugins and others), your dependency fetching, resolution and upgrade is just a matter of `bower install` or `bower upgrade`.
But it of course depends on your project and its environment.

       }
      ,    shim: {
                 'jquery.layout': { deps: ['jquery'] }

       }      });



       require([
                'amber/devel',
                ...,
                'jquery.layout'

No specific need to put this last, it could as well be second, just not the first. Order is not important for loading, but required libs are matched to arguments of the callback (so first argumenr 'smalltalk' contains exports of first required lib 'amber/devel'.

The really pure way of loading would be to mention 'jquery' as the second and add '$' as second argument to the callback, thus not to use the global variable to access it.

This example shows why it may be beneficial to add js libs at the front - you may need to use them in the callback function and if they play nicely with amd, their exports should be usef directly, not the global they define (often they do not define any global at all when loaded by amd, jQuery is exception in this for the sake of backwards compatibility).

                ], function (smalltalk) {

         smalltalk.initialize({'transport.defaultAmdNamespace':
"myNamespace"});
         $(function() {
                           smalltalk.MyStartClass._open();

Here should be smalltalk.globals.MyStartClass. Direct use is deprecated ad warning at the start of Amber says (ans no one understands what it means :-( so you can suggest better wording).

});
});


     </script>


Now the layout works and there is no need to add timeouts or other
things you can find with the help of google.


Thank you Herby again!
Sebastian



Am 10.06.2014 18:42, schrieb 'Sebastian Heidbrink' via amber-lang:
--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.