自己写代码 - facebook4gwt Demo

来源：互联网发布：数据内勤个人工作总结编辑：程序博客网时间：2024/04/30 09:58

GoogleDoc地址：http://docs.google.com/View?id=ddm59qt3_15gxxzj9f6

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

PC时代，用户和软件，都是孤立的。互联网时代，网站把用户连了起来。而到了现在，用户又在把网站连起来。

Web应用不再是那种只读的网页，追求用户交互的同时你必然需要关心和你交互的是个什么人。因此越来越多各色Login按钮出现在各色的网站。
人类发展的必然就是一旦某种功能成了普遍的需求，就会出现新的分工，新的职业，甚至，新的平台。现在我们有了SNS。

这个例子用的是eclipse3.5+GWT2.0.1+facebook4gwt1.0.8。

1.在Facebook上注册应用。

进入http://www.facebook.com/developers/createapp.php创建新的应用，我取了个名字叫fb4gwtdemo。Facebook什么都好，就是屏蔽了face这个单词让我有些不爽，有点天朝的风范。然后这里能看到一个API Key和Secret以后有用，其他都不用管。在Eclipse中创建gwt工程取名facebook4gwtdemo，什么都不改先Run一下，个人觉得这是个好习惯。本地server的链接是http://127.0.0.1:8888/Facebook4gwtdemo.html?gwt.codesvr=127.0.0.1:9997，回到刚才注册的页面，选到Connect，把这个地址填写到Connect URL。

这样呢，一会儿利用Facebook登陆验证之后就会转到这个页面还可以继续调试。

2.添加facebook4gwt库

首先肯定要下载这个库了，地址在此http://code.google.com/p/facebook4gwt/downloads/list，当前版本是1.0.8。我在工程目录下新建了一个lib目录，把下下来的facebook4gwt-1.0.8.jar放在了这里。然后再eclipse里面选中工程属性->Java Build Path->Libraries，Add External JARs，添加这个jar。

现在eclipse已经可以找到facebook4gwt里面的类了，但是还没完。打开facebook4gwtdemo.gwt.xml，在module名下添加
<inherits name="com.reveregroup.gwt.facebook4gwt.Facebook4gwt" />，看起来就像

<inherits name="com.reveregroup.gwt.facebook4gwt.Facebook4gwt" />

然后在war下面，和html文件同一个目录下创建一个xd_receiver.htm。里面写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>xd</title>
</head>
<body>
<script
src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js"
type="text/javascript"></script>
</body>
</html>

这个是Facebook提供的Javascript库。
只有这样，facebook4gwt才真正可以用了。

3.开始动手改代码

该开始改代码了，先改那个自动生成的Facebook4gwtdemo.html，现在重点是Facebook Connect，gwt的问题就尽量简化，把html里那个table删掉世界也就清净了。然后改EntryPoint，Facebook4gwtdemo.java，把类里面的东西全删了，然后再添加一个onModuleLoad()方法。在这里面添加一个Connect with Facebook的按钮，一个登录用户的头像。

在Facebook4gwtdemo里先创建一个String存放API Key，把刚才注册的得到的那一大串拿过来。
再添加一个LoginButton，这个类是facebook4gwt里面的，在com.reveregroup.gwt.facebook4gwt下面。
然后再添加一个Image对象，用来显示用户头像。

    private static final String APIKey = "782c84738b7d7f000ed6af4xxxxxxxxx";//此处换成你的API Key

    private LoginButton loginButton = new LoginButton();
   private Image image = new Image();

然后在onModuleLoad里调用Facebook.init(APIKey);然后把loginButton和image添加到RootPanel。然后调用Facebook.init(APIKey);

    public void onModuleLoad() {
       RootPanel.get().add(loginButton);
       RootPanel.get().add(image);
        Facebook.init(APIKey);
   }

现在试一下，已经可以看到Facebook Connect按钮了。点了之后弹出Facebook登录框，登录之后回到刚才在Connect URL设置的地址也就回到了调试的页面。

继续，时间有点晚了写快一点。
在onModuleLoad里添加

        Facebook.addLoginHandler(new FacebookLoginHandler() {

           @Override
           public void loginStatusChanged(FacebookLoginEvent event) {
               updateUserInfo();
           }

       });

在Facebook4gwtdemo中添加函数updateUserInfo

    private void updateUserInfo() {
       if (Facebook.isLoggedIn()) {
           Facebook.APIClient().users_getLoggedInUser(new AsyncCallback<FacebookUser>() {

               @Override
               public void onFailure(Throwable caught) {
                   // TODO Auto-generated method stub

               }

               @Override
               public void onSuccess(FacebookUser result) {
                   image.setUrl(result.getPic());
            }
      
           }, UserField.PIC);
       }
   }

OK，很好。跟进去看了看，facebook4gwt就是把Facebook提供的Javascript接口用native函数的方式封装了一遍，这样就不用自己写那种被注释掉的代码。Facebook的API很大一部分都是取用户的信息，这些函数都被统一到一起，然后用一个UserField枚举类型来定义。看了下这样子的话便于facebook4gwt的实现，UserField里面有一份枚举到字符串的映射，然后这些字符串可以配合native函数动态去调用Facebook提供的Javascript接口，callback函数也以参数的形式传递给Javascript接口，这样就实现了Javascript的接口的gwt封装。

BTW，在LoginButton的构造函数传入一个true作参数，这样当你登录之后这个LoginButton会自动变成LogoutButton。