Source: https://bitbucket.org/julianshen/videomag/overview
Demo URL: http://growing-wind-8625.herokuapp.com/top
Server: Play framework 2.0 on Heroku
Open graph object: Youtube video, Action: watch
It's not a problem to add youtube video since it already contains open graph meta data in page. All we have to do is call "/me/video.watches?video=youtube_link" with POST.
To post activity to timeline, the permission "publish_actions" is required.
The result on timeline:
The following example shows how to create a simple Facebook login button with Facebook javascript API:
Normally, this page would be reloaded if user finished authorized your app. But it won't be reloaded in Chrome due to the follwing error:
Unsafe JavaScript attempt to access frame with URL https://s-static.ak.fbcdn.net/connect/xd_proxy.php?version=3#cb=f363e58d9&origin=http%3A%2F%2Fwww.ab.com%2Ffcb27588&relation=opener&transport=postmessage&frame=fac4c0f18&access_token=AAAEHZBpoK3B0BALv8Cf96gaKEnn4ZBtXgjCOQCFFhVDL4K0rZAE2NGDcqZCPlZByNNKEDmYSGKHQv8jAUM2yGZCHkOcyXUKhoZD&expires_in=0&signed_request=g7sYd_XQx-EBPtQQGk-0ISRMrUDnT4L4WHAmlNsVFBU.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiJBUURKYkZBNjZuemduSDBBN0dXWmd2SGxZZkQxQVp4Qm1MSnc0Z3ppUV9FQ25VeEYyZmcyTmJGcFh3UHZDeWhyYnFrT1RxNmRVc2xsb0d4dlFCd290UjRyV0ZsSnJtVjFoNy1QUTlJbTRROXh3MmNKMGU1b0NReWtmT1ZZcXhMUDRVRldVSDgwVU5ic1BLTHdyNk80cFlSVVItQzNIYjhyRWgxek40ZFEzSkpreXhBcU1KSHljcWxETzh2dF96T3ZpN0EiLCJpc3N1ZWRfYXQiOjEzMzExMzg3MjQsInVzZXJfaWQiOiIxMTI5MjgzNDM3In0 from frame with URL http://www.ab.com/login.html. Domains, protocols and ports must match.
Some people use FB.getLoginStatus() to check if user authorized app at page loaded. If page could be reloaded, it's no problem. However, in this case, it's not.
There are several questions on StackOverflow related to this:
But none of these solves my problem. I don't want to solve this with introduce PHP sdk. I would like to solve it with pure front end codes.
Therefore, I find 3 solutions:
In solution 2 and 3, login-button seems to be placed into an iframe. And 3 would display an incomplete login button (bug?)
thrift --gen js:node --gen java computer.thrift這行指令同時產生for node.js的版本(在gen-nodejs目錄), 跟java版本
npm install thrift實作server.js:
Open graph的確是個好物, 雖然說早在去年的f8就已經推出了, 但現在更加完備了, 其實也等不及看會有啥應用推出了, 當然自己也想來玩看看, 本想照Tutorial依樣畫葫蘆抄一個體驗看看, 又覺這樣太無聊, 又想說試看看heroku + node.js, 沒真的玩過node.js, 就拿這題目試試
今天剛好在Facebook上講到拉麵, 所以就拿我最愛吃的拉麵來當題目了.. :P
web.js和兩個views(index.ejs, men.js)的sources放在這
實作筆記:
最後在Timeline上呈現的樣子:
用Graph API取得自己的Activities:
https://graph.facebook.com/me/[name_space]:[action_type]/ramen
var button1 = findview(R.id('button1'));
button1.setOnClickListener(function(view, methodName)
{
if (methodName == "onClick") {
log("MyScript", "clicked");
} });
當然不是很滿意, "if(methodName == "onClick")"這樣的寫法太醜了啦!
所以這次的目標是:
button1.onclick = function(view) {
log("MyScript", "clicked");
alert('Hi there!');
};
這樣比較像印象中javascript的寫法
為了達到這目的, 必須在View中加入onclick這個property, 但原本View class(Java)並沒這東西, 如何將它包裝出來?
Rhino對於Javascript使用原生的java objects並不是直接使用, 還是有透過一層包裝, 因此這就是要做出這個property的路了, 包裝的點在於WrapFactory, 而原生的Java object會被包裝長NativeJavaObject
而Rhino允許我們用自己的WrapFactory取代原本的, 像是這樣:
jsContext.setWrapFactory(new AndroidWrapFactory());
因此我們會需要自己實作這一個AndroidWrapFactory, 把原本的View改用不同的包裝, 而非原本的NativeJavaObject, 基本上只需要實作wrapAsJavaObject即可:
這邊用了一個新實作的ViewWrapper來取代NativeJavaObject
本來我的打算是繼承自NativeJavaObject, 然後再加入自己的東西, 不過後來發現這樣的作法總會在"put"時出差錯, 原因是NativeJavaObject是沒辦法加入新的member了(其實這說法有點問題, 應該是只要設prototype給它的話還是可以), 加上一些比較實用的function是定義在ScriptableObject的裡面, 因此, 我最後採用ScriptableObject來包裝
但要如何在ScriptableObject裡面實現像NativeJavaObject那樣可以直接叫用原本的Java class裡面的member呢?這部份不用自己實作, 只要把原本的NativeJavaObject當做這新的ViewWrapper的prototype就好了, 所以這邊constructor呼叫的super contructor是:
public ScriptableObject(Scriptable scope, Scriptable prototype)
===> super(scope, new NativeJavaObject(scope, javaObject, staticType));
defineProperty這包裝是從ScritableObject那邊改寫其中一個過來的, 主要是用來讓我們可以把這些"onlick","onlongclick"包裝成property, 在ViewWrapper可以實作getter和setter, 為了避免名稱上的混淆, 所以把getter的prefix定義成"jsget"而setter是"jsset"
在onlick的setter中, 除了將function object存起來外, 還直接對原本包裝的View設一個OnClickListener, 動作則是執行這個Function object
最後, 前面的範例裡面有一個"alert('Hi! there')", 因此為了"alert()"多實作一個Alert.java出來(跟上面的無關啦), 這是source:
接下來的目標,
上次做的僅止於setText這個簡單的動作, 那像是處理click這類的怎做?
先拿click來做範例, 在Android中, 如果要替一個view加上處理click動作要利用到View.setOnClickListener, 但setOnClickListener的參數是onClickListener, 這是一個java interface, 在Rhino中如何實作一個Java interface?
首先, 不要被Rhino的文件給騙了, 那有問題(還花了我一個晚上看 :( ), Rhino的source codes裡有個example目錄, 裡面有隻SwingApplication.js, 答案就在這邊
因此, onClick就會像是這樣:
var button1 = findview(R.id('button1'));
button1.setOnClickListener(function(view, methodName)
{
if (methodName == "onClick") {
log("MyScript", "clicked");
} });
在這function內, 必須要自己判斷methodName來知道是哪個method被呼叫到, 應該是所有的java interface都可以用這樣去實作
OK, 這樣...很醜...繼續改進
好久沒玩些好玩的了....先來點小菜....(POC = Prove of concept, 只是剛好有些想法, 所以來證明一下可不可行)
基本的想法是想用類似下面的javascript來寫出Android Activity(當然, 要延伸成其他的應該也沒問題)
https://gist.github.com/950551.js?file=gistfile1
這一個script有幾個簡單的組成 :
因為要在原本Android Java的平台上跑Javascript, 所以需要一個Javascript engine做為一個平台, 這邊選用的是Mozilla Rhino
Rhino可以幾乎無痛的在Android上使用, 當然SL4A有更多的script engine的選擇, 但SL4A的方向不同, 我是想弄一個也可以寫一般的Android program的script
初始化Javascript engine
第一個版本, 只是拿來實驗的, 所以script先放在asset裡面, 這一段會初始化基本的script engine, 然後從asset目錄裡面載入"init.js"
首先要先初始化一個Context instance, 所有的script執行都是要透過這個Context的, 不用後可以透過.exit()來釋放資源
jsContext.setOptimizationLevel(-1);
setOptimizationLevel(-1)這段很重要, 沒設成-1的話是無法在Android上跑的, 原因是Rhino會把javascript編譯成java bytecode以增加執行效率, 但這bytecode是標準的java bytecode而非Android dalvik的bytecode, 設成-1的話, Rhino會改用Intepreter來跑, 而非先compile
Host objects 和 Host functions
ScriptableObject.putProperty(jsScope, "R", RObj);
ScriptableObject.putProperty(jsScope, "log", new Log());
ScriptableObject.putProperty(jsScope, "findview", new FindViewById(this));
這一段包裝了一個host object和兩個host functions讓script使用(亦即是前述的5)
我把R包裝成另一個Object供javascript使用(因為我還沒找到如何讓Rhino使用static fields), 這包裝叫Rwrapper.java:
只是把R用reflection包裝一下而已
至於javascript function的部份, 其實也不難, 只要implement Function.call就可以了, 這邊實作了兩個(繼承自BaseFunction), Log.java和FindViewById.java
Log.java:
FindViewById.java:
不管是Object或是Function, 其實都是被當做objects來看待, 所以只要利用ScriptableObject.putProperty放到目前的scope去就可以給script取用了
目前看來, 這想法可行, 而且還蠻容易的, 缺乏的只是一些包裝而已, 甚至直接對view做操作也是可行的, 有空(會有空嗎?) 再來玩深入點.. :P
