自己写代码 - facebook4gwt Demo

最新推荐文章于 2017-08-05 08:35:49 发布

Heliumy

最新推荐文章于 2017-08-05 08:35:49 发布

阅读量940

点赞数

分类专栏：自己写代码文章标签： facebook gwt javascript eclipse image api

本文链接：https://blog.csdn.net/Heliumy/article/details/5308455

版权

自己写代码专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

2.添加facebook 4gwt 库

首先肯定要下载这个库了，地址在此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已经可以找到facebook 4gwt 里面的类了，但是还没完。打开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库。
只有这样，facebook 4gwt 才真正可以用了。

3. 开始动手改代码

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

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

    private static final String APIKey = "782c84738b7d7f000ed6 af 4 xxxxxxxxx ";//此处换成你的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 ();
           }

       });

在Facebook 4gwtdemo 中添加函数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());
& nbsp ; & nbsp ;         }
     & nbsp ;
           }, UserField .PIC);
       }
   }

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

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

Heliumy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己写代码 - facebook4gwt Demo

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

扫一扫