integrating Facebook JS SDK

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

integrating Facebook JS SDK

Ilya Obshadko
Facebook recommends the following method to integrate FB SDK using AMD
approach:
https://developers.facebook.com/docs/javascript/howto/requirejs/v2.5

However I can't find any obvious way to configure RequireJS paths in
Tapestry.

Is there any way to do it?

--
Ilya Obshadko
Reply | Threaded
Open this post in threaded view
|

Re: integrating Facebook JS SDK

Pavel Chernyak
Greetings, Ilya.
Here is my example for Yandex maps module. As you can see I define
require.js config in module file.

requirejs.config({ paths: { 'ymaps': '//api-maps.yandex.ru/2.1/?lang=ru-RU',
'geolib': 'map/geolib.min' }, "shim": { 'ymaps': { exports: 'ymaps' },
'geolib' : { exports: 'geolib' } } }); define(["jquery", "ymaps",
"geolib","./lodash.min","./graham_scan.min"], function ($, ymaps,geolib) {
code... });

Pavel Chernyak.
9 апр. 2016 г. 15:05 пользователь "Ilya Obshadko" <[hidden email]> написал:

> Facebook recommends the following method to integrate FB SDK using AMD
> approach:
> https://developers.facebook.com/docs/javascript/howto/requirejs/v2.5
>
> However I can't find any obvious way to configure RequireJS paths in
> Tapestry.
>
> Is there any way to do it?
>
> --
> Ilya Obshadko
>
Reply | Threaded
Open this post in threaded view
|

Re: integrating Facebook JS SDK

Ilya Obshadko
In reply to this post by Ilya Obshadko
UPD: the obvious workaround is downloading it locally and contributing to
ModuleManager:

    @Contribute(ModuleManager.*class*)

    *public* *static* *void* contributeModuleConfigiration (
MappedConfiguration<String, Object> configuration,

            @Path("context:js/facebook/sdk.js") Resource facebookSdk ) {


        configuration.add ( "facebook", *new* JavaScriptModuleConfiguration
( facebookSdk ).exports ( "FB" ) );

    }

However that doesn't look like an elegant solution either. Are there any
other options?


On Sat, Apr 9, 2016 at 3:05 PM, Ilya Obshadko <[hidden email]> wrote:

> Facebook recommends the following method to integrate FB SDK using AMD
> approach:
> https://developers.facebook.com/docs/javascript/howto/requirejs/v2.5
>
> However I can't find any obvious way to configure RequireJS paths in
> Tapestry.
>
> Is there any way to do it?
>
> --
> Ilya Obshadko
>
>
>
>


--
Ilya Obshadko
Reply | Threaded
Open this post in threaded view
|

Re: integrating Facebook JS SDK

fjfalcon
Greetings, Ilya.
Here is my example for Yandex maps module. As you can see I define
require.js config in module file.

requirejs.config({ paths: { 'ymaps': '//api-maps.yandex.ru/2.1/?lang=ru-RU',
'geolib': 'map/geolib.min' }, "shim": { 'ymaps': { exports: 'ymaps' },
'geolib' : { exports: 'geolib' } } }); define(["jquery", "ymaps",
"geolib","./lodash.min","./graham_scan.min"], function ($, ymaps,geolib) {
code... });

Pavel Chernyak
Reply | Threaded
Open this post in threaded view
|

Re: integrating Facebook JS SDK

Ilya Obshadko-2
Pavel,

So you just manually add requirejs.config call in every module file that
has external AMD dependencies?
This is helpful - thanks a lot!

On Sat, Apr 9, 2016 at 3:47 PM, Pavel Chernyak <[hidden email]> wrote:

> Greetings, Ilya.
> Here is my example for Yandex maps module. As you can see I define
> require.js config in module file.
>
> requirejs.config({ paths: { 'ymaps': '//api-maps.yandex.ru/2.1/?lang=ru-RU
> ',
> 'geolib': 'map/geolib.min' }, "shim": { 'ymaps': { exports: 'ymaps' },
> 'geolib' : { exports: 'geolib' } } }); define(["jquery", "ymaps",
> "geolib","./lodash.min","./graham_scan.min"], function ($, ymaps,geolib) {
> code... });
>
> Pavel Chernyak
>



--
Ilya Obshadko
Reply | Threaded
Open this post in threaded view
|

Re: integrating Facebook JS SDK

Carlos Montero Canabal
In reply to this post by Pavel Chernyak
In your controller class (.java) you can write this:


                javaScriptSupport.addModuleConfigurationCallback(new ModuleConfigurationCallback() {

                        @Override
                        public JSONObject configure(final JSONObject configuration) {
                                final JSONObject facebookExports = new JSONObject();
                                facebookExports.put("exports", "FB");
                                configuration.getJSONObject("shim").put("facebook", facebookExports);

                                final JSONObject paths = new JSONObject();
                                paths.put("facebook", "//connect.facebook.net/es_ES/sdk");
                                configuration.put("paths", paths);

                                return configuration;
                        }
                });

And in your module file:

define(['facebook'], function(FB){
       
        init = function(appId){
               
          FB.init({
            appId      : appId,
            version    : 'v2.5',
            xfbml      : true
          });
         
        }
       
        return {
                init: init
        }
   
});

For example.

I hope help you.

Regards

Carlos Montero


> El 9/4/2016, a las 14:11, Pavel Chernyak <[hidden email]> escribió:
>
> Greetings, Ilya.
> Here is my example for Yandex maps module. As you can see I define
> require.js config in module file.
>
> requirejs.config({ paths: { 'ymaps': '//api-maps.yandex.ru/2.1/?lang=ru-RU',
> 'geolib': 'map/geolib.min' }, "shim": { 'ymaps': { exports: 'ymaps' },
> 'geolib' : { exports: 'geolib' } } }); define(["jquery", "ymaps",
> "geolib","./lodash.min","./graham_scan.min"], function ($, ymaps,geolib) {
> code... });
>
> Pavel Chernyak.
> 9 апр. 2016 г. 15:05 пользователь "Ilya Obshadko" <[hidden email]> написал:
>
>> Facebook recommends the following method to integrate FB SDK using AMD
>> approach:
>> https://developers.facebook.com/docs/javascript/howto/requirejs/v2.5
>>
>> However I can't find any obvious way to configure RequireJS paths in
>> Tapestry.
>>
>> Is there any way to do it?
>>
>> --
>> Ilya Obshadko
>>

Reply | Threaded
Open this post in threaded view
|

Re: integrating Facebook JS SDK

Thiago H de Paula Figueiredo
In reply to this post by Ilya Obshadko
On Sat, 09 Apr 2016 09:05:17 -0300, Ilya Obshadko <[hidden email]> wrote:

> Facebook recommends the following method to integrate FB SDK using AMD
> approach:
> https://developers.facebook.com/docs/javascript/howto/requirejs/v2.5
>
> However I can't find any obvious way to configure RequireJS paths in
> Tapestry.
>
> Is there any way to do it?

Yes. See  
JavaScriptSupport.addModuleConfigurationCallback(ModuleConfigurationCallback):  
http://tapestry.apache.org/current/apidocs/org/apache/tapestry5/services/javascript/JavaScriptSupport.html#addModuleConfigurationCallback(org.apache.tapestry5.services.javascript.ModuleConfigurationCallback)

ModuleConfigurationCallback has a single method, JSONObject  
configure(JSONObject configuration), which receives the Require.js  
configuration as a JSONObject file so you can modify it to your needs and  
return it. There's an example in the Tapestry's test webapps.

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

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

Reply | Threaded
Open this post in threaded view
|

Re: integrating Facebook JS SDK

Thiago H de Paula Figueiredo
In reply to this post by Carlos Montero Canabal
Thanks for your very useful example, Carlos!

On Sat, 09 Apr 2016 15:48:58 -0300, Carlos Montero Canabal  
<[hidden email]> wrote:

> In your controller class (.java) you can write this:
>
>
> javaScriptSupport.addModuleConfigurationCallback(new  
> ModuleConfigurationCallback() {
>
> @Override
> public JSONObject configure(final JSONObject configuration) {
> final JSONObject facebookExports = new JSONObject();
> facebookExports.put("exports", "FB");
> configuration.getJSONObject("shim").put("facebook", facebookExports);
>
> final JSONObject paths = new JSONObject();
> paths.put("facebook", "//connect.facebook.net/es_ES/sdk");
> configuration.put("paths", paths);
>
> return configuration;
> }
> });
>
> And in your module file:
>
> define(['facebook'], function(FB){
>
> init = function(appId){
>
>  FB.init({
>    appId      : appId,
>    version    : 'v2.5',
>    xfbml      : true
>  });
>
> }
>
> return {
> init: init
> }
> });
>
> For example.
>
> I hope help you.
>
> Regards
>
> Carlos Montero
>
>
>> El 9/4/2016, a las 14:11, Pavel Chernyak <[hidden email]> escribió:
>>
>> Greetings, Ilya.
>> Here is my example for Yandex maps module. As you can see I define
>> require.js config in module file.
>>
>> requirejs.config({ paths: { 'ymaps':  
>> '//api-maps.yandex.ru/2.1/?lang=ru-RU',
>> 'geolib': 'map/geolib.min' }, "shim": { 'ymaps': { exports: 'ymaps' },
>> 'geolib' : { exports: 'geolib' } } }); define(["jquery", "ymaps",
>> "geolib","./lodash.min","./graham_scan.min"], function ($,  
>> ymaps,geolib) {
>> code... });
>>
>> Pavel Chernyak.
>> 9 апр. 2016 г. 15:05 пользователь "Ilya Obshadko" <[hidden email]>  
>> написал:
>>
>>> Facebook recommends the following method to integrate FB SDK using AMD
>>> approach:
>>> https://developers.facebook.com/docs/javascript/howto/requirejs/v2.5
>>>
>>> However I can't find any obvious way to configure RequireJS paths in
>>> Tapestry.
>>>
>>> Is there any way to do it?
>>>
>>> --
>>> Ilya Obshadko
>>>
>


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

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