顯示具有 ajax 標籤的文章。 顯示所有文章
顯示具有 ajax 標籤的文章。 顯示所有文章

2007年11月15日 星期四

Friend2Call 撥號練習 Android and OpenSocial Example

練習的情境 :

2008 某一天,你的朋友突然失蹤不知去向,你想要從某幾個支援 OpenSocial 中查到朋友的朋友電話(先假設有),手機上有一個 Android 平台可以用,上網後將這些電話條列,然後一個個打過去問。

因為這個練習跟之前做的練習有關連,很多地方省略掉,建議參照著一起看:
  1. My OpenSocial Gold App 一友一兩金
  2. 三年等待結束,Dojo 1.0 與 OpenSocial 練習曲
  3. Cross Domain Ajax and OpenSocial 跨域資料源
  4. Android and OpenSocial 開放社會的變形金剛
兩種作法,一種是如 Dan Morrill 下面示範 Video 中所進行,寫個 HelloAndroid 的 App,用 XML 組成應用的 UI 使用者介面,利用 java.net.URL 取得 container.json 或是 container.data.xml 資料後轉給 Intent,然後使用 Intent.CALL_ACTION 以及 startActivity(intent) 來達成打電話的目的,程式碼大約樣子如下:
URL url = new URL("http://your.opensocial.container/container.json");
URLConnection urlconn = url.openConnection();
// handle http response
Intent i = new Intnet(Intent.CALL_ACTION);
i.setData(Phones.CONTENT_URI.addId(your_friend_phone));
startActivity(i);
但這方法要實現練習的情境有點問題,就是目前陽春的容器沒有實現 People Data API Developer's Guide: Protocol,所以 container.json 或是 container.data.xml 還沒辦法照 OpenSocial API 的規定提供,目前只有支援 OpenSocial 的 JavaScript API 而已。

所以還是採用另外一種作法,實做一個 OpenSocial 的 App 稱作 Friend2Call,使用 Android 的 browser 來當 JavaScript 執行平台,直接跑 OpenSocial API 抓出朋友資料,輸出 tel:規格的連結如下面的樣子。
href="tel:(886)123456778"
這次實做比較單純,因為資料不需要像Cross Domain Ajax and OpenSocial 跨域資料源這篇一樣跨網域,朋友資料都可以在 conatiner 中找到,所以不需要使用 dojo.io.script.get。

可以用瀏覽器直接看 OpenSocail Container Friend2Call,但是那個按連結功能需要 Android browser 模擬器才可以運作。程式碼 Source Code 可以到樂連LinkXD Download下載。



執行時請注意,這種作法必需要用下面的按鍵啟動撥電話功能,不能直接使用點選模式。接下來可以考慮加入練習的是 Grid (1.0) | The Dojo Toolkit部份,這部份可以參考Simple Dojo Grids來實做。

雖然最終沒有開發 Android UI 的應用,不過練習過程中發現幾個可以注意的事項:
  1. 用 Eclipse 跑之前,最好先開好 emulator.exe,不然有時候程式跑不出來。
  2. R.java 自動化資源編號太省事了,xml 資源越來越多卻不會越來越難找,用 R.補字就找到,比較不會錯掉。
Dan Morrill 示範 Android 開發的影像



去部落格曬曬陽光
LinkXD

2007年11月13日 星期二

Android and OpenSocial 開放社會的變形金剛

Android SDK 釋出 Gphone 的變形金剛後,就有模擬器可以看看之前做的練習 Cross Domain Ajax and OpenSocial 跨域資料源跑起來如何。

這個練習中有 OpenSocial 的陽春型容器一個,附加一個換算朋友數的應用,這些都是用 dojo 來幫忙完成。



Android SDK 跑出來的圖,看起來 XmlHttpRequest(dojo.xhrGet) 和 Cross Domain Ajax 的 script 方式(dojo.io.script.get)沒有問題,另外特別的是 firebug.xd.js 也可以支援,算是令人驚訝。

就目前模擬器結果看起來,這個瀏覽器應該可以支援目前既有桌面型瀏覽器上的眾多 Ajax 應用,而不需要太多改變。例如這個圖中的 Cross Domain Ajax and OpenSocial 跨域資料源就是一行沒改,沒有改 Container 也沒改 App 端,結果就像你用 Firefox 看到的一樣。




去部落格曬曬陽光
LinkXD

從 Prism Linux 看跨網域 OpenSocial 應用

日前看到這個Prism Prototype Now Available on Mac and Linux 消息,想到之前做過的練習LinkXD webapp 0.0.1 release 釋出,就把這個舊東西挖出來重新練過,這次要看看 Linux 版本,並觀察這種單一網站的特定瀏覽器與 Cross Domain Ajax and OpenSocial 跨域資料源應用的容器網頁。

這裡用 Fedora Core 6 測試,下載 prism-0.8-linux.tar.bz2 後,將它在桌面解開後,對著 prism 按個兩下,就會出現視窗問你建立 webapp,這裡我填入之前練習的跨網域資料源連結:http://mojochen.googlepages.com/containerB3.html,記得選加個桌面的連結。




做完後桌面會出現圖示如上圖,按個兩下就可以連到上面設的網址,如果其中有連結開其他網站的網頁(這裡沒有示範),按下去它會另開新的 Firefox 來展示網頁,這個 Container B3 會一直留在桌面下方的功能表,就像是個桌面程式,這點你可以從圖中發現。

由於資料可以跨網域載入,自然不需要開另外的瀏覽器到其他網站,這類 Prism 單一網站桌面應用藉由整合這些跨網域服務,可以讓使用者不用到處去按瀏覽器,給使用者更桌面化的網路瀏覽經驗,值得有興趣的人試一下。

天天冒出這麼多東西,光用眼看遠遠不夠,舉起手去玩它,才會發現其中的趣味。

去部落格曬曬陽光
LinkXD

2007年11月12日 星期一

Android mashup browser 可混搭手機瀏覽器

前些日子寫了Apache 讓 Android 成為手機變形金剛後,一直想要查看看Android這個平台使用的瀏覽器資訊,雖說這一兩天 SDK就會出來,不過還是找了一些資料先看看。


Photo by Liam Higgins and CC

根據PC World - Q&A With Google Android Developer 的報導,Android會有個客製版的WebKit 瀏覽器,同時在這篇Google為新手機平台開發專屬瀏覽器 報導中提到這是第一個可以混搭網頁的瀏覽器。

令人好奇的是 Apple - iPhone - Features - Internet 官方網頁上已經註明支援 Google Maps,所謂的第一個可以混搭的瀏覽器為何?Google Maps 上面不是已經有一些搭上去的東西了?進一步搜尋下,找到Google行動平台總監:Android特色 軟體可做堆疊 這篇報導,指的應該是可以另外搭網站服務,而不是 Google Maps 本身有的搭配。

個人的看法,單一網域比較像是混合,一種對單一公司的依戀,跨網域比較接近混搭,持手機獨行地球,搭天下服務,似乎理所當然。問題在於做到的程度?這點可能要等 SDK 出來才會有更多細節。關於跨網域的議題,日前的Cross Domain Ajax and OpenSocial 跨域資料源可以給你一點參考。

另一個值得關注的是 Java,這是一個成熟的應用,目前的手機很多都有內建 Java,只是在手機瀏覽器越來越吃重的未來,會有哪些發展,值得關注,下面有個有趣的圖案,也許可以給你一些看法,Android vs Duke: Illustration of an unexpected visitor

去部落格曬曬陽光
LinkXD

2007年11月11日 星期日

Cross Domain Ajax and OpenSocial 跨域資料源

如果練習過 My Dojo 1.0 XDomian and OpenSocial 跨域議題,應該會注意到資料來源的位置沒有改變,下面 firebug 圖可以看出 app.json 還是掛在 Container 的網站上,這次打算將這個部份也移到 linkxd.com 網域之下。


和上次 My Dojo 1.0 XDomian and OpenSocial 跨域議題的差別在於上次只是移動 app.js,而這次要移動 app.json 到 linkxd.com/gold 目錄下,仔細觀察之下,應會發現 Cross domain 資料源 app.json 無法存取的問題,因為 app 提供的 callback 其實是 containerB.js 呼叫下載,這時候 app 的 dojo.xhrGet 其實是在 Container 中呼叫,導致要取 http://linkxd.com/gold/app.json出現 Cross Domain Ajax 問題。

app.json 一般是由資料庫動態產出的資料,這些資料至通常放在應用端,如何讓 containerB.js 取得? 一般的作法是 containerB 需要提供某種 proxy 機制來轉接這個 http://linkxd.com/gold/app.json,這樣作法代表需要動態網頁支援的網站,或是本身容器有提供,像是 Google Gadgets 就有這個機制。

這個問題可以在 Interacting with our existing codebase and date? 看到更多建議,如果狀況許可,例如金價等資料,這是只用一次的,可以考慮將原來的 app.json 包在 app.js 之中一起輸出。問題是 Ajax 通常是會一直發出新的需求,不太可能一開始就載入。

這裡要採用的方法可以參考Web Services + JSON = Dump Your Proxy或是 On-Demand Javascript - Ajax Patterns,可以自己參照網頁寫出來,不過這裡打算用現成的 Alternate Transports | The Dojo Toolkit來做。利用 dojo.io.script.get 來產出動態的 script 標籤,同時載入 app3json.js 的內容,這樣並不需要額外的服務端支援。
dojo.io.script.get(
{url: 'http://linkxd.com/gold/app3json.js'}
);
app3json.js 會有資料包在一個 callback 的呼叫裡面。
linkxdApp.mycallback({
'usdGold' : 788,
'usdOil' : 95,
'usdTwd' : 32.5,
'eurTwd' : 46.9
})

輸出的結果請參考Container B3,這時候資料的輸出已經移到 linkxd.com,完成這次的練習。程式碼可以到樂連LinkXD Download網頁下載。




去部落格曬曬陽光
LinkXD