Začíname s Picasa Web API (II)
V tejto časti si povieme bližšie o knižnici Picasa Flash API, ako ju použiť vo Flash-ových projektoch a ukážeme si krátky príklad slideshow otagovaných obrázkov z vášho Picasa Web účtu.
V prvej časti seriálu o Picasa Web API sme si priblížili pojmy služba Picasa Web Albums a jej rozhranie Picasa Web Albums Data API. Povedali sme si čo je to Picasa Flash API a kde takéto API zohnať, čo všetko treba spraviť pre úspešný response zo strany Picasa Web API a ako nám to Picasa Flash API umožní dosiahnúť v kratšom čase a s menšou námahou.
Stiahnúť
Najčerstvejšia verzia Picasa Flash API sa vždy nachádza v svn. Zo zdrojových súborov je pre každú významnú revíziu vytvorená swc knižnica, ktorá sa dá stiahnúť na adrese http://code.google.com/p/picasaflashapi/downloads/list
Nainštalovať
Použitie knižnice sa líši od Flash verzie. Pre Flash CS3, treba knižnicu skopírovať do “Components” zložky:
- V systéme Windows: C:\Program Files\Adobe\Adobe Flash CS3\language\Configuration\Components
- Pre Mac: /Applications/Adobe Flash CS3/Configuration/Components
Po nakopírovaní knižnice do zložky ju vo Flash CS3 stačí presunúť z Components okna do Library a triedy budú k dispozícii.
Flash CS4 je inteligentnejší a dovoľuje nám zadefinovať knižnicu v záložke Library Path v Publish Settings nasledovne:
Hotovo. Knižnica je vo Flash-i.
Použiť
Našou nasledujúcou úlohou bude vytvoriť jednoduchú aplikáciu, ktorá bude zobrazovať množinu fotografií umiestnených a označkovaných v Picasa Web galérii. Zobrazovanie fotografií by malo byť manuálne a automatické. Ak je k dispozícii názov fotografie, chceme ho zobraziť tiež. To aké fotografie chceme zobrazovať by sa malo dať definovať cez FlashVars aby sme mohli aplikáciu použiť na viacerých miestach s rôznymi značkami.
Užívateľské rozhranie je na vás. Ja som použil štandardné Flash komponenty. UILoader v tandeme s ProgressBar-om bola pre mňa najrýchlejšia možnosť ako dostať do aplikácie obrázok s feedback-om sťahovaných dát. Dva Illustrator-om naskinované Button-y slúžia ako “Play” a “Next”. Pre názov obrázku som použil klasický TextField s embednutým písmom.
Kvôli prehľadnosti uvediem len časti kódu týkajúce sa dát.
var service : PicasaService = new PicasaService();
service.imgmax = "400";`
Vytvoríme inštanciu Picasa služby s tým, že maximálna veľkosť obrázkov, ktoré budeme ďalej načítavať bude 400 pixelov. Všetky dostupné vlastnosti služby a ich hodnoty nájdete v asdoc.
var loader : UILoader;
var entries : Array;
var responder : PicasaResponder = service.albums.list_by_tag(fv.user || "thisispinkfu", fv.tag || "diana");
responder.addEventListener(PicasaDataEvent.DATA, serviceComplete_Handler, false, 0, true);
responder.addEventListener(ErrorEvent.ERROR, serviceError_Handler, false, 0, true);
Zadefinujeme pole “entries”, ktoré bude naplnené po úspešnej odpovedi a v prípade, že odpoveď obsahuje jeden a viac obrázkov. Volanie metódy list_by_tag(username, tag) na službe nám vráti objekt typu PicasaResponder, ktorý vysiela servisné udalosti.
function serviceComplete_Handler(evt : PicasaDataEvent) : void
{
// naplnime entires
entries = evt.data.entries.concat([]);
if(entries.length > 0)
{
// spustime tahanie obrazkov
loadNextEntry();
}
else
{
// nemame ziadne obrazky (neexistujuci tag alebo uzivatel)
cmp_label.text = "Zero entries...";
}
}
Ak dostaneme úspešnú odpoveď z Picasa Web Data API, naplníme pole entries objektmi, ktoré pre nás automaticky vytvorí Picasa Flash API. Ak sa v poli nachádza aspoň jeden objekt, zavoláme funkciu loadNextEntry(). V opačnom prípade nastala zrejme chyba, resp. značka, ktorú sme uviedli vo volaní metódy list_by_tag neexistuje, resp. žiadny obrázok v našej galérii nebol označkovaný.
function serviceError_Handler(evt : ErrorEvent) : void
{
cmp_label.text = "Error: " + evt.text;
}
Ak služba nedostala úspešnú odpoveď, napr. zadaný užívateľ neexistuje, zobrazíme feedback o chybe.
function loadNextEntry(evt : Event = null) : void
{
var url : String = entries[entry].media.content.url;// url obrazku
var lbl : String = entries[entry].summary; // nazov obrazku
cmp_label.text = lbl != null ? lbl : ""; // cmp_label je text field
// vytvorime instanciu UILoader-a a pridame na Stage
loader = new UILoader();
loader.width = 400;
loader.height = 400;
loader.addEventListener(Event.COMPLETE, imageComplete_Handler, false, 0, true);
loader.addEventListener(IOErrorEvent.IO_ERROR, imageError_Handler, false, 0, true);
loaders.addChild(loader);
// spustime cucanie
loader.load(new URLRequest(url));
}
Funkcia loadNextEntry nahrá ďalší obrázok v poradí. Extrahuje adresu obrázka a jeho názov z objektu v poli entries, vytvorí novú inštanciu triedy UILoader a zapíše “complete” a “ioError” event listenery.
function imageComplete_Handler(evt : Event) : void
{
// spustime napr. timer
}
Po úspešnom stiahnutí obrázka sa zavolá funkcia imageComplete_Handler, do ktorej umiestnime napríklad prezentačný kód, ktorý spustí slideshow.
function imageError_Handler(evt : IOErrorEvent) : void
{
cmp_label.text = "Error: " + evt.text;
}
V prípade, že nastala chyba pri sťahovaní obrázka, zavolá sa funkcia imageError_Handler, ktorá zobrazí feedback o chybe.
function get fv() : Object
{
return Object(LoaderInfo(this.loaderInfo).parameters);
}
Helper funkcia fv() vracia objekt s FlashVars. Umožňuje nám opýtať sa napr. na hodnotu premennej user definovanej cez flashVars v html <object/> alebo <embed/> tagu.
Nasadiť
Výsledok bude vyzerať približne takto:
Zdrojové súbory (Flash CS4) môžte stiahnuť z http://picasaflashapi.googlecode.com/svn/trunk/docs/tutorials/Flash_Slideshow/zip/Flash_Slideshow.zip
Kam ďalej
V tejto časti seriálu o knižnici PicasaFlashApi a spol. sme si ukázali ako jednoducho zobraziť otagované obrázky vo Flash aplikácii. Na pozadí jedného volania funkcie service.albums.list_by_tag(user, tag) nám knižnica PicasaFlashAPI poskladala request, odoslala, čakala na odpoveď druhej strany, preparsovala a vyhodnotila odpoveď a nakoniec vrátila pole objektov. S PicasaFlashAPI je možné toho spraviť oveľa viac a dokonca ešte jednoduchšie, o tom však neskôr.
Linky na ďalšie zdroje:
Blog comments powered by Disqus