Stwórz własny widżet

Internetowa usługa Microsoft Popfly umożliwia co prawda tworzenie własnych widżetów, aplikacji online, stron internetowych, bez żadnej wiedzy programistycznej i wpisywania choćby jednej linijki kodu, ale nie znaczy to, że Popfly jest projektem przeznaczonym wyłącznie dla użytkowników nieznających żadnego języka programowania. Tak jak to przedstawiliśmy w głównej części artykułu, tworzenie własnych aplikacji webowych, a następnie eksportowanie ich do postaci gadżetów paska bocznego systemu Windows Vista może przypominać układanie programu z gotowych klocków. Warto dodać, że dla każdego, najdrobniejszego nawet elementu serwis Popfly udostępnia zaawansowany tryb edycji, w którym programista ma bezpośredni wgląd w kod danego bloku i może go dowolnie modyfikować. Bloki udostępnione w serwisie Popfly zostały napisane w skryptowym języku JavaScript. Oprócz tego programista czy webmaster może samodzielnie dostosować wygląd np. strony internetowej zbudowanej za pomocą narzędzi udostępnianych przez Popfly w wyniku ręcznej edycji kodu HTML utworzonej strony.

Silnikiem napędzającym animacje i inne efekty jest Silverlight – autorska technologia Microsoftu, która ma stanowić konkurencję dla Flasha firmy Adobe i której druga wersja została niedawno udostępniona. Po „ulepieniu” miniaplikacji wystarczy już tylko wyeksportować gotowy projekt w postaci gadżetu paska bocznego systemu Windows Vista. Z naszym przewodnikiem łatwo utworzysz własny widżet.

Wspomnieliśmy już, że bazą konstrukcyjną widżetu będzie mechanizm zaimplementowany w niedawno udostępnionej online usłudze Microsoftu. Tak naprawdę Popfly powstał jako narzędzie do tworzenia aplikacji webowych, gier online czy stron WWW. Jednak dzięki funkcji eksportu każdą wykonaną w Popfly pracę możesz łatwo przekształcić w widżet Windows Vista.

Uruchom przeglądarkę WWW. W naszym przewodniku będziemy się posługiwali Internet Explorerem, ze względu na maksymalną zgodność tej przeglądarki z technologiami online Microsoftu. Jednak serwis Popfly powinien bezproblemowo funkcjonować także w przeglądarce Firefox (o czym zapewniają jego twórcy). Co do innych przeglądarek, tj. Opery, Safari, Chrome itd., kompatybilność nie jest gwarantowana). W pasku adresowym przeglądarki wpisz adres www.popfly.com.

Po chwili zobaczysz pierwszą stronę serwisu Popfly. Korzystanie z funkcji budowania własnych projektów wymaga zalogowania się w serwisie, ponieważ Popfly to usługa Microsoftu, możesz się zalogować, używając identyfikatora Live ID wspólnego dla wszystkich usług Windows Live Microsoftu. Masz taki identyfikator, jeżeli korzystasz z którejkolwiek usługi online Microsoftu lub jeżeli używasz komunikatora Live Messenger. Kliknij Sign In.

Jeżeli masz już identyfikator Live ID, na kolejnej stronie zaloguj się, wypełniając pola tekstowe danymi uwierzytelniającymi, i kliknij przycisk Sign in. Jeśli nie masz jeszcze identyfikatora Live ID, kliknij przycisk Sign up. Na kolejnej stronie będziesz musiał wypełnić formularz rejestracyjny. Gdy go wypełnisz, zostaniesz automatycznie zalogowany w serwisie.

Po zalogowaniu się wyświetli się strona główna serwisu, na której wybierasz typ projektu, jaki chcesz zrealizować. Masz do wyboru grę Create a Game, aplikację webową Create a Mashup lub stronę internetową Create a Web Page. W naszym przykładzie wykonamy prostą aplikację webową, którą następnie przekształcimy w widżet dostarczający najnowsze wiadomości z naszego serwisu online. Wybierz: Create a Mashup.

W przeglądarce wyświetli się strona Mashup Creator – Microsoft Popfly, jednak wszystkie elementy kreatora aplikacji webowej są w tej chwili nieaktywne. Powód? Brak zainstalowanego w systemie programu Microsoft Silverlight. Kliknij strzałkę w dół widoczną w pojawiającej się na stronie ramce Install Microsoft Silverlight.

Upewnij się, że w oknie, które zobaczysz, w polu Nazwa widać zapis Silverlight.2.0.exe, a w polu Od adres silverlight.dlservice.microsoft.com. Jeżeli tak jest, kliknij Uruchom. Rozpocznie się pobieranie pliku. Gdy proces się zakończy, potwierdź uruchomienie programu instalacyjnego, klikając w oknie Internet Explorer – ostrzeżenie o zabezpieczeniach przycisk Uruchom.

Po chwili zobaczysz okno powitalne instalatora Silverlighta. Kliknij Install now. Po przekopiowaniu plików Silverlighta do systemu pozostaw zaznaczone pole wyboru Enable Microsoft Update (co zapewni automatyczną aktualizację Silverlighta) i kliknij Next, a następnie Close. Silverlight jest zainstalowany. Wszystko zatem gotowe – można rozpocząć tworzenie widżetu. Nie wylogowuj się z serwisu i nie zamykaj okna przeglądarki.

Zakładamy, że zgodnie z wcześniejszymi zaleceniami wciąż jesteś zalogowany w serwisie Popfly. Ponieważ masz już zainstalowane oprogramowanie Silverlight, stanowiące silnik wszelkich projektów i aplikacji wykonanych za pomocą Popfly, zatem wszystkie elementy interfejsu kreatora aplikacji webowej powinny już być aktywne. Nic nie stoi zatem na przeszkodzie, by przejść do sedna – opracowywania własnego widżetu. W naszym przykładzie – widżetu, który automatycznie na pulpicie lub pasku bocznym Windows Vista będzie wyświetlał najnowsze wiadomości z naszego serwisu online.

Interfejs Mashup Creatora składa się z czterech głównych części. Na samej górze jest widoczny zestaw ikonek, z których najważniejsza to Save umożliwiająca zapisanie bieżącego stanu projektu. Pod paskiem menu głównego serwisu Popfly zobaczysz panel przełączający tryb pracy kreatora. Dostępne są dwa – edycyjny, czyli układanie z gotowych elementów Edit, oraz html, czyli dostosowywanie poprzez modyfikacje kodu – tego trybu nie będziemy używać. Pod panelem trybu pracy jest widoczne menu elementów składowych, lista bloków – element roboczy najczęściej wykorzystywany podczas pracy nad projektem. Największą – pustą jeszcze – przestrzeń w oknie Mashup Creator zajmuje obszar roboczy.

Na liście bloków rozwiń kategorię News & RSS, a następnie kliknij element o nazwie RSS. W obszarze roboczym zobaczysz obracający się sześcian symbolizujący dodany właśnie element. W przyborniku narzędziowym wyświetlanym tuż obok sześcianu kliknij ikonę z kluczem.

Przejdziesz do trybu konfiguracji właściwości danego elementu. W tym przypadku upewnij się, że na rozwijanej liście Operations jest wybrana pozycja getItems. Następnie w polu tekstowym value w wierszu url wpisz adres naszego kanału wiadomości – czyli http://www.pcformat.pl/rss/news.rss i kliknij OK.

Masz już zdefiniowane źródło danych. Teraz czas na wybór metody ich prezentacji. Z listy bloków, w sposób analogiczny jak poprzednio wybierz z tej samej kategorii element o nazwie RSSList. Kolejny sześcian pojawi się w obszarze roboczym. Kliknij kółko widoczne z prawej strony poprzedniego sześcianu RSS i połącz myszką z kółkiem z lewej strony sześcianu RSSList. Już na obecnym etapie możesz obejrzeć aplikację webową w działaniu, klikając ikonę Run. Powrót do trybu edycji uzyskasz, klikając Edit.

Utworzona zaledwie z dwóch klocków aplikacja działa. Zapisz projekt, klikając ikonę Save, a następnie w okienku, które się pojawi, wpisz nazwę projektu, dodaj krótki opis i ewentualnie słowa kluczowe i kliknij Accept and Save.

Po zapisaniu projektu jego nazwa (w naszym przykładzie jest to PC Format News) wyświetli się w górnej części okna przeglądarki. Obok nazwy zobaczysz kwadracik z literką i. Kliknij go.

Zostaniesz przekierowany na stronę informacyjną danego projektu. Po lewej stronie wyświetli się działająca aplikacja. Kliknij widoczny po prawej stronie przycisk Share. Zobaczysz panel Share, a w nim zestaw ikon, z których każda symbolizuje jakąś metodę udostępniania projektu. Ponieważ zakładaliśmy utworzenie widżetu, kliknij ikonę Windows, a następnie wybierz Download Windows Vista Gadget.

Zobaczysz okno Pobieranie pliku – ostrzeżenie o zabezpieczeniach. Wybierz w nim Zapisz, by zapisać gadżet na dysku, lub Otwórz, by od razu go uruchomić na pasku bocznym Windows Vista.