Piszemy gadżet do Bloggera - część 2

W poprzedniej części (Piszemy gadżet do Bloggera - część 1) poznaliśmy podstawy pisania gadżetu oraz jego strukturę. Dzisiaj poznamy sposoby jego konfigurowania przez użytkownika. Pozwolimy użytkownikowi na podanie dodatkowych informacji podczas dodawania gadżetu do bloga. Dzięki temu użytkownik będzie mógł zdecydować np. o kolorach, napisach czy innych opcjach związanych z konkretnym gadżetem. Sekcją odpowiedzialną za preferencje jest <UserPref>. Opisuje ona pola, które będzie mógł modyfikować użytkownik podczas konfiguracji gadżetu. Pola mogą mieć następujące atrybuty:

• name - nazwa którą będziemy się posługiwać w gadżecie,
• display_name - nazwa wyświetlana użytkownikowi (jej brak powoduje wyświetlenie atrybutu name),
• datatype - typ danych (string - łańcuch tekstowy, bool - wartość logiczna, enum - typ wyliczeniowy, hidden - pole ukyte, list - dynamiczna lista), domyślnym typem jest string,
• required - atrybut logiczny określający czy dane pole jest wymagane,
• default_value - domyślna wartość dla pola

Przykładowe pole preferencji pobierające od użytkownika łańcuch tekstowy (jego imię):

pokaż źródło

drukujpomoc

1.<UserPref name="imie" display_name="Podaj swoje imię:" />

W przypadku wybrania jako atrybutu pola preferencji typu enum, musimy określić dodatkowo opcje, z których może wybierać użytkownik. Opcje te podajemy za pomocą znacznika <EnumValue>. Posiada on dwa parametry:

• value - wartość opcji,
• display_value - nazwa wyświetlana użytkownikowi (jej brak powoduje wyświetlenie atrybutu value).

Przykładowe pole preferencji pobierające od użytkownika kierunek geograficzny (domyślnie południe):

pokaż źródło

drukujpomoc

1.<UserPref name="kierunek" display_name="Kierunek geogr." default_value="south" datatype="enum" >

2. <EnumValue value="south" display_value="Południe" />

3. <EnumValue value="north" display_value="Północ" />

4. <EnumValue value="west" display_value="Zachód" />

5. <EnumValue value="east" display_value="Wschód" />

6.</UserPref>

Dostęp do preferencji z poziomu kodu gadżetu odbywa się z wykorzystaniem JavaScript'u. Poniższy przykład pobierze podane przez użytkownika imię:

pokaż źródło

drukujpomoc

1.var preferencje = new gadgets.Prefs();

2.var imieUzytkownika = preferencje.getString("imie");

Wykorzystajmy naszą wiedzę do stworzenia prostego gadżetu umożliwiającego użytkownikowi podanie napisu, ustawienie koloru tła oraz określenie czy wyświetlać dzisiejszą datę czy też nie.

Wszystkie operacje związane z wyświetlaniem danych przeprowadzimy z wykorzystaniem JavaScript'u. Nasz przykładowy gadżet uruchamia się od funkcji init() (wywołanie gadgets.util.registerOnLoadHandler(init());) To co ma się pojawić w gadżecie zostało ujęte w sekcję HTML:

pokaż źródło

drukujpomoc

1.<div id="zawartosc"></div>

Korzystając z możliwości JavaScript'u jesteśmy w stanie zmienić kolor tła tego elementu (element.style.backgroundColor) jak i również wstawić do niego inne elementy czy to teksty czy też znaczniki HTML'a (element.innerHTML). Kod naszego gadżetu:

pokaż źródło

drukujpomoc

01.<?xml version="1.0" encoding="UTF-8" ?>

02.<Module>

03. <ModulePrefs

04.  title="Przykładowy gadżet"

05.  author="Devon">

06.  <Require feature="dynamic-height" />

07. </ModulePrefs>

08. <UserPref name="napis" display_name="Napis" default_value="Nasz drugi gadżet!" />

09. <UserPref name="data" display_name="Pokazać datę?" default_value="true" datatype="bool" />

10. <UserPref name="kolor" display_name="Kolor tła" default_value="green" datatype="enum" >

11.  <EnumValue value="red" display_value="Czerwony" />

12.  <EnumValue value="yellow" display_value="Żółty" />

13.  <EnumValue value="green" display_value="Zielony" />

14. </UserPref>

15. <Content type="html">

16.  <![CDATA[

17.   <div id="zawartosc"></div>

18. 

19.   <script type="text/javascript">

20.    // pobieramy preferencje

21.    var preferencje = new gadgets.Prefs();

22. 

23.    // funkcja startowa (nazwa może być dowolna)

24.    function init() {

25.     // bierzemy obiekt daty

26.     var data = new Date();

27.     // i wyciągamy z niego potrzebne informacje (dzień, miesiąc, rok)

28.     var dzisiaj = "< br />Dzisiaj jest: " + data.getDate() + "." + (data.getMonth()+1) + "." + data.getFullYear();

29.     // w tej zmiennej przechowujemy to co później dodamy do gadżetu

30.     var html = "";

31.     

32.     // pobieramy element zawartosc

33.     var element = document.getElementById('zawartosc'); 

34.     // ustawiamy kolor tła elementu na taki jak podał użytkownik  

35.     element.style.backgroundColor = preferencje.getString("kolor");

36. 

37.     // dodajemy pobrany napis do zmiennej html

38.     html += preferencje.getString("napis");

39.    

40.     // jeżeli użytkownik chce wyświetlać datę

41.     if (preferencje.getBool("data") == true) {

42.      // to dodajemy ją do zmiennej html

43.      html += dzisiaj;

44.     }

45. 

46.     // wklejamy do "elementu" zawartość zmiennej html

47.     element.innerHTML = html;

48.     

49.     // zmieniamy wysokość gadżetu

50.     gadgets.window.adjustHeight();

51.    }

52. 

53.    // za pomocą tej metody podajemy funkcję, która

54.    // ma zostać uruchomiona podczas startu gadżetu (tutaj init())

55.    gadgets.util.registerOnLoadHandler(init());

56.   </script>

57. 

58.  ]]>

59. </Content>

60.</Module>

Dodatkowo wykorzystaliśmy dynamiczną zmianę wysokości gadżetu (gadgets.window.adjustHeight()). Jest to możliwe po załadowaniu odpowiedniej biblioteki (<Require feature="dynamic-height" />) w sekcji <ModulePrefs>.
Po dodaniu gadżet prezentuje się następująco:

Gotowy gadżet jest dostępny do dodania do bloga pod adresem: http://sites.google.com/site/kodatnikfiles/xml/DrugiGadzet.xml