[野人獻曝] Google Picker

昨天空閒時刻在Google API頁面逛著逛著看到Google Picker這個玩意。

仔細看了頁面說明，
Google Picker 這玩意的首頁就直截了當說了：

Google Picker is a "File Open" dialog for the information stored in Google servers.

With Google Picker, your users can select photos, videos, maps, and documents stored in Google servers. The selection is passed back to your web page or web application for further use.

既然他這麼好用，
想當然爾就刺激了我的技術魂，
所以昨天晚上稍微看一下文件後就寫了一個簡單的Sample了。

如果想試玩的話，請往這裡。

======以下技術解析一下=====

基本上要用這玩意，實在是非常簡單。

只要先開這兩行：

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('picker', '1', {'language':'zh-TW'});</script>

這樣就會先把Google Picker的程式碼先引入了。

然後以Google所提供的慣例中所展示的，
他是在頁面loading完後跳出對話框。
但是以我的sample言，
是在每一個連結被點擊時才觸發，
這點要先注意一下。

接著就是寫被觸發後的處理，
基本上都是以 google.picker.PickerBuilder 物件為主，
因此我們可以這麼寫：

var picker = new google.picker.PickerBuilder().addView(google.picker.ViewId.IMAGE_SEARCH).setCallback(callback).build(); 

picker.setVisible(true);

這樣一個選擇對話框就出現了。
這裡要注意一下 addView 這個方法是指定要使用哪種對話框，
以目前而言有圖片搜尋、影片搜尋等，
這個的話請參考文件說明。
而 setCallback 這個方法則是當使用者按下選取或取消按鍵時要執行的回呼函式，
這個東西會在稍後的講解中說明。
最後則要呼叫一次 build()，
這樣整個對話框才會處理完成。

但此時對話框並沒有呈現在你的眼前，
所以還要再呼叫 setVisible(true) ，
讓對話框變成可視。

OK，對話框產生完成了，
接下來我們要寫方法來處理使用者選取的資料了：

function callback (data) {
  if (data.action === google.picker.Action.CANCEL) { // 使用者按下取消時
    alert("你沒有選取任何東西喔");
    return false;
  }
  for (var i in data.docs) { // data.docs就是使用者選取項目，以一個陣列存放
    // 這裡只用其網址的部份
    alert(data.docs[i].url);
  }
}

怎樣，應該很簡單吧？
相信這應該也能成為各位在幹壞事路上的好工具吧？
那麼就這樣了～下期再見（掰