Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Posts: 4
Registered: ‎02-15-2011
My Device: Playbook

facebook login in a WebWorks app

I need to support facebook login from within a WebWorks app on PlayBook.  Looking for advice on how to approach this.  I can invoke the web browser with a URL, but this doesn't help with ajax facebook calls fb:like and fb:login-button which want to open their own window.

 

How are people handling facebook interaction from within WebWorks apps?  I've tried searching the forum for "facebook" and have come up dry.

 

Thanks!

Spencer

New Contributor
Posts: 2
Registered: ‎01-29-2011
My Device: Not Specified

Re: facebook login in a WebWorks app

I use webworks to login to facebook, and I got the following error:

 

Running  at line    7: i=(navigator.plugins[name+" 2.0"]||navigator.plugins[name]).description;} } }.
Called from line   12: if(!a&&FB.Flash.hasMinVersion() ){.
Called from line   31: FB.XD.init(a.channelUrl);.
Called from line    1: FB.init({appId:"182616801772980",cookie:true,status:true,xfbml:true});.
: TypeError: Cannot convert 'undefined' to an object.

 

Here is my config file:

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0" rim:header="RIM-Widget:rim/widget" xmlns="http://www.w3.org/ns/widgets">
  <name>My Widget</name>
  <description />
  <author href="" rim:copyright="" email="">Me</author>
  <content src="index.htm" />
  <access uri="http://connect.facebook.net" />
  <license href="" />
</widget>

 

 

Here is my index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
    <head>
        <meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no" />
        <title>Login Facebook</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
      <script type="text/javascript">
         FB.init({
         appId: '111xxxxxxxxxxxxx', cookie: true,
            status:true, xfbml:true
         });
      </script>
      <fb:login-button>Login with Facebook</fb:login-button>

    </body>
</html>


 Is there any suggestion ?

 

 

 

pujie

Visitor
Posts: 1
Registered: ‎03-10-2011
My Device: Not Specified

Re: facebook login in a WebWorks app

hey Dude!

did u find answer to yr question??

if u did Please leme know 

New Contributor
Posts: 4
Registered: ‎02-15-2011
My Device: Playbook

Re: facebook login in a WebWorks app

I haven't received any helpful responses, and have not worked on this since posting.

New Developer
Posts: 23
Registered: ‎02-09-2011
My Device: Torch 9800
My Carrier: Telus

Re: facebook login in a WebWorks app

What I did for this, I used phonegap with it's excellent plugin manager, and included the facebook SDK (http://sourceforge.net/projects/facebook-bb-sdk/) in the packaged .jar. Works !

New Contributor
Posts: 3
Registered: ‎12-03-2010
My Device: Not Specified

Re: facebook login in a WebWorks app

Can you please explain more, how did you make packaged jar ( with changes in source code ?) and what js you added for this.

 

I have gone through their battery plugin example but not sure how can I acheive same in this facebook project ..

 

Thanks..

New Developer
Posts: 23
Registered: ‎02-09-2011
My Device: Torch 9800
My Carrier: Telus

Re: facebook login in a WebWorks app

Okay first, you need two projects.

 

Your actual WebWorks project, + an extension. The extension is used to export the .jar.

 

Your extension is actually a standard Java project, and you simply need to import the whole phonegap java library in there. You have it in the phonegap folder provided by phonegap itself, before you compile it into a webworks project.

 

In order to extend phonegap, you need to create a new java class. Your class needs to extend Plugin (phonegap plugin manager), and have a execute(String action, JSONArray args, String callbackId) method.

 

This execute method manages the actions (calls) received by javascript, and must return a PluginResult object. This object contains a status, and a string (in this example, a json string. Could be a simple string too).

 

Example:

FACEBOOKLOGIN being a constant string variable which contains a possible action called by javascript.

 

if (FACEBOOKLOGIN.equals(action)) {
 String json = this.flogin();
 pr = new PluginResult(PluginResult.Status.OK, json);
 }
return pr;
To export all the code in a jar file, export ONLY the src folder containing all the java packages as a JAR file in your ext folder of your WebWorks project. In the export options, make sure you only have "Export Java source files and resources" checked. You don't want the .class files in there.
Now on the WebWorks side, to make a connection between your new phonegap plugin and actual javascript, you have to register this plugin.
let's say your new class you did is called Facebook. You need to do three things:
1. Create your phonegap object: function Facebook() {};
2. Define your actions: Every possible action is defined here. Example:
Facebook.prototype.login = function(win,fail, args){
 PhoneGap.exec(win,fail,"Facebook","login", args);
}
Win and Fail are two returned functions if the call worked or not. "login" is the action passed to your plugin. So of course, the constant FACEBOOKLOGIN in your java class is equal to "login", so that javascript calls the right method.
and 3. Register your plugin. Add something like this after your actions:
Phonegap.addConstructor(function(){
 Phonegap.addPlugin("facebook", new Facebook()); // "facebook" is the name to be called within javascript, and new Facebook is the object you defined on step 1.
 phonegap.PluginManager.addPlugin("Facebook", "com.mypackage.Facebook"); // "Facebook" is the name of your class, and "com.mypackage.Facebook" is the package with the java file.
And the way to call this plugin is something like this:
window.plugins.facebook.login(
 function(r){  },
 function(e){ },
 args
);
r = response string when successfull
e = error occured, error message
args = parameters array. This javascript array is converted into a json array to be used in java.
And I think it pretty much sums it all !
Hope it helps !
Regular Contributor
Posts: 76
Registered: ‎02-17-2010
My Device: Storm
My Carrier: Vodafone

Re: facebook login in a WebWorks app

Hello mr_dj07

 

 Could you explain step by step how to make the extension and above all, how to interact with it from Javascript?  PLEASEEEEEE 

 All phonegap classes into a .jar (without changes?? )   and then ...


A first idea would be:

1 º. Declare an object Facebook()

ObjectFacebook = new Facebook ();

2 º. Login. How do I login?


I am quite lost.    :(

I hope you can help me.

Thank you, kind regards.

New Developer
Posts: 23
Registered: ‎02-09-2011
My Device: Torch 9800
My Carrier: Telus

Re: facebook login in a WebWorks app

Well I think that's exactly what I did in the post right before you !

 

And be careful: the .jar contains the phonegap packages, + YOUR new java code (could be facebook or anything)...

New Contributor
Posts: 3
Registered: ‎12-03-2010
My Device: Not Specified

Re: facebook login in a WebWorks app

Thanks  mr_dj07 for your detail reply..This plugin development looks promising but lacks documentation and tutorial from phonegap and webworks team ..

 

Can we use the native UI in pluggin ?? I was trying to invoke my previous balckberry java project by calling theApp.enterEventDispatcher(); theApp is an object of UIApplcation. I am getting some run time error and then screen is frozen.. Probably it is trying to paint UI and UI is already locked .not sure .. Just want to confirm if this is not the way plugin can be used ?

 

How you are using the extension ? Just invoking the native service in plugin and get the respose on the main html screen .. Can you please suggest something with your implementation example ?