ObjectiveFlickr新進度：PhotoSearch Demo
這個週末又繼續把ObjectiveFlickr往前推進。整個framework已經重寫過了，現在只剩下兩個class是需要的，一個叫OFFlickrContext，一個叫OFFlickrInvocation。大幅改名是為了讓class name更能反映實際的功能，但也因此讓過去的舊程式要大改才能使用ObjectiveFlickr了。
這一週新寫的demo是這樣子的。
Ruby on Rails是一套很強大的框架，人們為了推廣RoR，錄製了不少短片用以證明RoR有多容易寫web app。其中一個demo是利用RoR加上Flickr API來寫照片搜尋功能。
PhotoSearch.app模仿了那個RoR範例（事實上我連他們的CSS都抄來用了），用來證明，只要使用Objective-C、WebKit、ObjectiveFlickr，一樣可以很快寫出具有Flickr照片搜尋功能的… 嗯… desktop app。
我現在的blog theme不適合用來說明程式碼，我也還不會錄製說明短片。這些都再再說明，我該好好努力在presentation skill上精進了。
總之，有圖有真相：
以上的 demo 可以這個網址取得。ObjectiveFlickr使用New BSD License公開，程式碼均存放在Google Code上。
附錄：如何用Objective-C寫ObjectiveFlickr的應用程式（草稿）
Warning: because my blog theme isn’t good for showing code, this is going to be an aesthetically unacceptable entry.
在ObjectiveFlickr的Demos group底下，有PhotoSearch這個示範程式。這個程式的構成相當簡單，首先，用Interface Builder拉出三個元件：搜尋欄位、進度風火輪、WebView，然後透過繼承NSWindowController創建出PhotoSearchController，把該連接delegation連接起來。
接著，生成程式碼，然後在 PhotoSearchController.h 中的開頭 #import 這兩個標頭檔：
#import <WebKit/WebKit.h>
#import <ObjectiveFlickr/ObjectiveFlickr.h>
然後在 PhotoSearchController class 中加入以下成員：
OFFlickrContext *context;
OFFlickrInvocation *invoc;
接著修改 PhotoSearchController.m。
首先，我們要加入 awakeFromNib 方法。沒錯，Objective-C 的特色之一是，增加method是不需要於標頭檔宣告的。我們在 awakeFromNib 裡，建立 context 和 invoc 物件：
context = [[OFFlickrContext contextWithAPIKey:OFDemoAPIKey sharedSecret:nil] retain];
invoc = [[OFFlickrInvocation invocationWithContext:context delegate:self] retain];
然後把包在 Resource/ 目錄下的 index.html 給呼叫出來：
[[webView mainFrame] loadRequest:
[NSURLRequest requestWithURL:
[NSURL fileURLWithPath:
[[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@”index.html”]
]
]
];
（呼，有夠長！）
然後在開始搜尋的那一段 control action 中（method startSearch:），增加實際搜尋的程式碼。我們首先要把搜尋文字轉換成有 percent escape 的字串：
NSString *srchstr = [[sender stringValue] stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
（還是一樣有夠長！）
然後把風火輪轉起來：
[progressIndicator startAnimation:self];
接著就可以呼叫 Flickr method 啦。因為 OFFlickrInvocation 都幫你做好了，因此呼叫 flickr.photos.search 只要一行：
[invoc flickr_photos_search:nil text:srchstr selector:@selector(handleSearch:errorCode:data:)];
這句話的意思是說呢，呼叫flickr.photos.search方法，userinfo參數是nil，搜尋字串是srchstr，而callback selector則是 handleSearch:errorCode:data: 這個方法。
然後我們要建立一個同名的方法：
- (void)handleSearch:(id)userinfo errorCode:(int)errorcode data:(id)data
{
// …
}
然後在裡面填上程式碼。我們直接取用 callback 收到的 data 物件，先將 XML 轉成 NSDictionary ，然後直接取出 photo array：
NSArray *photos = [[data flickrDictionaryFromDocument] valueForKeyPath:@”photos.photo”];
我們打算使用 WebKit 來顯示這些照片，因此準備一個字串來插入 HTML 程式碼：
NSMutableString *code = [NSMutableString string];
然後把照片通通串起來：
unsigned i, c = [photos count];
for (i = 0; i < c; i++) {
NSString *url=[context photoURLFromDictionary:[photos objectAtIndex:i] size:@"s" type:nil];
[code appendString:[NSString stringWithFormat:@"<img src=\"%@\" />", url]];
}
其中第三行，我們呼叫 OFFlickrContext 的 photoURLFromDictionary: 方法，將 photo object 轉成 URL string。
最後我們呼叫 WebKit 的 DOM 操作介面，把 photos element 取出來，然後改變裡面的 inner HTML，再呼叫script.aculo.us著名的Effect.BlindDown（為什麼著名？因為上述 RoR 範例也這麼用），為我們的範例勾芡：
DOMHTMLElement *e = (DOMHTMLElement*)[[[webView mainFrame] DOMDocument] getElementById:@”photos”];
[e setInnerHTML:code];
[webView stringByEvaluatingJavaScriptFromString:@"new Effect.BlindDown('photos')"];
大體如此。
lukhnos :: Oct.08.2006 :: tekhnologia 技術或者藝術 :: 3 Comments »
