Začíname s Picasa Web API (II)

7. July 2009

“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:
Flash CS4 Publish Settings.

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.

Flash CS3 Scene with components.

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/>/<embed/> tagu.

Nasadiť

Výsledok bude vyzerať približne takto:

Nemáte nainštalovaný Flash Player Plugin

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:

Flash, Picasa - komentáre (0)