Widgety – część druga: WidSets

Maciej Żywioł — Thu, 21 Aug 2008 14:28:10 +0000

Universal Widget API, o którym opowiadałem poprzednio, jest dość wszechstronny i faktycznie działa na wielu platformach, jednak jego zawarta w nazwie uniwersalność ma pewne ograniczenia. Najpoważniejszym z nich jest brak kompatybilności z urządzeniami mobilnymi – działają tylko pod iPhone’em, a Opera Mobile dla “normalnych” telefonów jeszcze z nimi nie współpracuje.

Dla chcących pisać widgety na bardziej pospolite telefony komórkowe jest nadzieja w postaci platformy WidSets, uruchomionej i wdrożonej przez koncern Nokia, jednak nie tylko na telefony tej firmy przeznaczona.

Użytkowanie

Platforma WidSets współpracuje z ponad trzema setkami modeli telefonów komórkowych i opiera się o aplikację, którą w telefonie należy sobie zainstalować. Aplikacja ta łączy się z naszym kontem, założonym w internetowym serwisie WidSets, pobiera dane o wybranych przez nas widgetach i wyświetla je na ekranie naszego telefonu.

Oczywiście, najpierw trzeba sobie w serwisie założyć owo konto. Zanim to jednak zrobimy, serwis WidSets udostępnia nam bardzo ciekawie pomyślaną demonstrację swoich możliwości – na specjalnej stronie mamy dostępną całą bibliotekę widgetów do wyboru, oraz emulator telefonu komórkowego, na którym możemy podpatrzeć, jak aplikacja będzie wyglądać i działać.

Gdy już zdecydujemy się na rejestrację, będziemy przez jej proces poprowadzeni jak za rączkę – serwis najpierw pyta o typowe dane rejestracyjne, a następnie pomaga nam pobrać i zainstalować aplikację w telefonie. Trzeba przyznać, że to także jest świetnie rozwiązane – dostępne są trzy drogi, do wyboru w zależności od stopnia zaawansowania użytkownika, w różnym stopniu absorbujące jego uwagę:

Dummies podają numer telefonu, na który przychodzi sms z linkiem, pod którym znajduje się aplikacja do zainstalowania,
Techies przepisują podany na stronie URL do przeglądarki w komórce,
a Geeks pobierają plik JAD, który ręcznie przenoszą i odpalają w telefonie, instalując tym samym aplikację.

Ja wybrałem to środkowe rozwiązanie, co pozwoliło nie czuć mi się ani jak oporny (dummy), ani jak geek.

Po zainstalowaniu w telefonie, aplikacja łączy się z kontem w serwisie i można przejść do konfiguracji, która polega głównie na wybraniu z biblioteki interesujących nas widgetów. Biblioteka jest dość obszerna i zawiera mnóstwo programów przydatnych bardziej (wiadomości, pogoda, organizatory czasu, skrzynki e-mailowe…) lub mniej (gry i inne czasoumilacze). Bardzo fajne jest to, że swoje widgety można wybierać nie tylko za pośrednictwem telefonu, ale też w komputerze, logując się w serwisie – nawet, gdy nasz telefon nie jest z nim połączony, my możemy zobaczyć i skonfigurować nasz pulpit (dashboard), a nawet – odpalić emulator komórki, w którym możemy przetestować jego działanie.

Testowałem działanie WidSetsów na mojej Nokii E50 i wszystko działa bardzo dobrze. Dodatkowe ułatwienie, podejrzewam, mogą mieć posiadacze telefonów z wbudowanym WiFi (np. Nokia E51), którzy nie muszą się łączyć z internetem za pośrednictwem swojej sieci komórkowej.

Tworzenie

Jak większość serwisów widgetowych (NetVibes, Opera, Apple…), także WidSets udostępniają możliwość tworzenia własnych widgetów. Przede wszystkim w serwisie dostępna jest opcja szybkiego generowania widgeta. Ma on, oczywiście, ograniczone możliwości – można w nim stworzyć właściwie tylko czytnik kanałów RSS lub podobnych i najwyżej wybrać skórkę, która nam będzie odpowiadać – ale niektórym to w zupełności wystarcza (coś podobnego, ale dla widgetów “desktopowych”, oferuje serwis wstaw.to).

Dla użytkowników bardziej wymagających i tych z zacięciem programistycznym, WidSets oferują cały Software Developer’s Kit do tworzenia bardziej zaawansowanych programów. Taki wdget składa się z dwóch plików: XML-owego deskryptora (plik widget.xml) oraz z kodu aplikacji (plik *.he). Dodatkowo mogą się na niego składać pliki zasobów, np. obrazki w formacje jpg lub png.

Plik widget.xml zawiera informacje o naszym widgecie: w sekcji znajdują się informacje o widgecie, np:

 
   Flag Selector
   1.0
   Developer
   Displaying some flags

Następnie w sekcji opisane są opcje i parametry widgeta – analogicznie do taga w UWA:

 
   
     
       Flag Selector

Następnie, w sekcji wymienione są dodatkowe źródła danych, np. style, z których aplikacja będzie korzystać (składniowo podobne do CSS), np:


   bkg {
     background: vgradient white silver;
   }

   frame {
     background: solid silver;
   }

   flag {
     align: hcenter vcenter;
     border: 2 2 2 2;
     border-type: rectangle red;
   }

   nametext {
     align: hcenter vcenter;
     color-1: green;
     font-1: medium bold;
     background: vgradient silver white;
   }

   greetingtext {
     align: hcenter vcenter;
     color-1: blue;
     font-1: medium bold;
     background: vgradient white green;
   }

   about {
     align: hcenter vcenter;
     color-1: blue;
     font-1: large bold;
     background: solid orange;
   }

albo pliki zasobów, np. graficznych:

Wreszcie – podany tam jest plik (tylko jeden) z kodem źródłowym widgeta:


W ostatniej sekcji deskryptora, , wymienione i opisane są widoki widgeta, których zasadami wyświetlania zajmuje się skrypt aplikacji. Elementy graficzne podobne są do komponentów Swingowych:
 
   
     
   
   
     

  
    
    
  
  



  Loading ...


Przepis na gadżet
Rdzeniem napisanego w UWA widgeta jest pojedynczy, statyczny plik XHTML, zawierający w nagłówku odniesienie do przestrzeni nazw NetVibes:
 xmlns:widget=“http://www.netvibes.com/ns/”
Następnie w nagłówku strony należy umieścić w tagu preferences opcje widgeta – takie, które będą dostępne dla użytkownika po kliknięciu odpowiedniego linka na stronie (w zależności od platformy link ten może wyglądać inaczej):
 
  
  
 
Oczywiście, posiadanie właściwości nie jest niezbędne – można napisać widget bez żadnych opcji dostępnych dla użytkownika. Wtedy po prostu pozostawia się tag pusty:
 
Aktualnie UWA udostępnia kilka typów opcji, opartych na rodzajach pól w HTML-owych formularzach: text, password, boolean (odpowiednik checkbox), list (odpowiednik select), range (coś jak list, tylko z automatycznie generowanymi wartościami liczbowymi) i hidden. Trwają pracę nad obsłużeniem pól typu textarea. Wartości owych właściwości mogą zostać wykorzystane we właściwym javascriptowym kodzie widgeta w dalszej części strony za pomocą metody getValue obiektu widget.
Danie główne – obiekty widget i UWA
Kod javascriptowy kręci się wokół obiektu widget, którego metody analogiczne do zdarzeń (onLoad, onRefresh i inne) zawierają lub wywołują właściwy kod programu. Najczęściej – jeśli widget nie jest tylko lokalną aplikacją (np. grą), tylko sięga do zewnętrznych źródeł danych – kod ten zawiera jedną z dostarczanych przez UWA AJAXowych metod pobierania danych. W przykładzie, w metodzie onLoad można to znaleźć w linijce:
 UWA.Data.getFeed(widget.getValue('url'), RSSReader.display);
Obiekt UWA.Data dostarcza kilka podobnych metod do wyboru. UWA.Data.getText() zwraca odpowiedź w formacie plain text, getXml() – w formacie XML, getJson() – w formacie danych JSON, getFeed() jest formą tego ostatniego, z tym, że JSONowa odpowiedź dodatkowo jest kompatybilna ze wszystkimi formatami źródeł danych – RSS, Atom i inne. Wszystkie metody pobierają dwa argumenty – adres źródła danych oraz nazwę funkcji, do której ma zostać przesłana odpowiedź (w przykładzie naszego czytnika RSS jest to metoda RSSReader.display()). Dodatkowo obiekt UWA.Data posiada metodę request(), która pobiera argumenty w postaci adresu oraz obiektu, przechowującego szczegóły żądania. Tak naprawdę wszystkie wymienione wcześniej metody (getText, getFeed itp.) są odpowiednio przeładowaną metodą request. Metody tej w czystej postaci używa się przy bardziej zaawansowanych potrzebach.

Same źródła natomiast mogą być zupełnie dowolne – pod adresem, przekazywanym do metody, może znajdować się (jak w naszym przykładzie) kanał RSS, ale może to być dowolna inna zawartość (np. skrypt PHP, ASP czy JSP) generująca odpowiedź w odpowiednim formacie. Może to być, jak już wspomniałem, skrypt specjalnie na potrzeby tego widgeta napisany.

Wracając do naszego przykładu – skoro już metoda getFeed zwróciła nam JSONowy obiekt z podanego adresu, przyjrzyjmy się metodzie, do której odpowiedź z serwera jest przekazywana. Metoda display przetwarza zawartość zwróconego obiektu feed i na jego podstawie buduje ciało strony. Używane są do tego metody obiektu widget takie, jak createElement, tworząca element HTMLowy podanego jako argument typu (np. widget.createElement(’a’) stworzy odnośnik) oraz metod obiektów reprezentujących owe elementy (addContent, setHTML, setStyle…). W ten sposób tworzona jest struktura DOM dokumentu, która, gdy już będzie gotowa, ładowana jest do ciała strony metodą widget.setBody, zastępując aktualną jego zawartość (dlatego jedyną zawartością znacznika  jest tymczasowy tekst „Loading…”, który znika po tym, jak metoda display przetworzy odpowiedź na żądanie).
Deser – skrypty wykonywane po stronie serwera
Jak już wspomniałem, widget może sięgać do źródeł danych specjalnie dla niego utworzonych, np. skryptów PHP. Jako przykład podam widgeta, pobierającego dane nie z jednego, a z wielu kanałów Atom (w tym przypadku – blogów z serwisu Blogger, których adresy przechowywane są w pliku myfeed.txt) i informujący o tym, kiedy każdy z nich był ostatnio aktualizowany.
Poniżej cytuję sam kod JavaScript z pliku XHTML widgeta. Nie korzysta on z żadnych ustawień (preferences) widgeta, więc obudowanie go odpowiednim kodem XHTML, wzorowanym choćby na powyższym przykładzie czytnika RSS, nie będzie trudne:

Widget ten wysyła zapytanie do specjalnie utworzonego skryptu PHP, który sam pobiera dane z kanałów i na ich podstawie generuje odpowiedź w formacie JSON, którą odsyła do aplikacji. Następnie metoda parseFeeds ze zwróconego JSONa (w specjalnie utworzonym formacie, nie tym zwracanym przez metodę getFeed – oto dowód, że w formacie JSON można przesyłać naprawdę dowolne dane, nie tylko te kompatybilne z uniwersalnym formatem kanałów RSS i podobnych).
Oto zawartość pliku myfeed.php:
load($url);

    //get elements from ""
    $feed=$xmlDoc->getElementsByTagName('feed')->item(0);
    $feed_title = $feed->getElementsByTagName('title')->item(0)->nodeValue;
    $feed_url = $url;
    $feed_author = $feed->getElementsByTagName('author')->item(0)->firstChild->nodeValue;

    //get and output first "" element
    $feed_entry=$xmlDoc->getElementsByTagName('entry')->item(0);
    $feed_entry_when = strtotime($feed_entry->getElementsByTagName('published')->item(0)->nodeValue)*1000;
    $feed_entry_cats = $feed_entry->getElementsByTagName('category');
    $feed_entry_categories = array();

    //get post categories
    for($i=0; $i<$feed_entry_cats->length; $i++) {
      $feed_entry_categories[] = $feed_entry_cats->item($i)->attributes->getNamedItem('term')->nodeValue;
    }
    $feed_entry_title = $feed_entry->getElementsByTagName('title')->item(0)->nodeValue;

    echo " { \n";
    echo "\"title\" : \"" . str_replace("\"","\\\"",$feed_title) . "\" , \n";
    echo "\"author\" : \"" . $feed_author . "\" , \n";
    echo "\"url\" : \"" . $feed_url . "\" , \n";
    echo "\"entry_when\" : \"" . $feed_entry_when . "\" , \n";
    echo "\"entry_title\" : \"" . str_replace("\"","\\\"",$feed_entry_title) . "\" , \n";
    echo "\"entry_cats\" : ";
    for($i=0; $i
Plik myfeed.txt, z którego powyższ skrypt czyta adresy kanałów Atom zawiera po prostu kilka adresów kanałów z kilku zaprzyjaźnionych blogów w serwisie Blogger.com.
Przydatność do spożycia
UWA jest wynalazkiem bardzo nowym, wciąż jeszcze rozwijanym i nie w pełni kompatybilnym z wszystkimi tymi platformami, którymi przechwalają się twórcy. Nie mniej jednak wyraźnie widać jego zalety i możliwości. Nie miałem możliwości przetestować jego działania pod Vistą czy MAC OSem ani na iPhone, a testy pod Operą zakończone były porażką, ale w głównych zastosowaniach – na stronach NetVibes, iGoogle czy w ramce iframe na dowolnej innej stronie – sprawdzają się bardzo dobrze. Myślę, że gdy zostanie dopracowane i przeniesione na jeszcze większą liczbę platform (telefony i urządzenia mobilne inne niż iPhone), Universal Widget API może cieszyć się zasłużonym zainteresowaniem, a programy w nim napisane mogą być w równym stopniu proste, jak przydatne.

j2ee.pl - związani z javą » widget

Widgety – część druga: WidSets

Użytkowanie

Tworzenie

Przepis na gadżet

Danie główne – obiekty widget i UWA

Deser – skrypty wykonywane po stronie serwera

Przydatność do spożycia