Dashboard & Widgets w Mac OS X, czyli jak tworzyć Widgety

Dashboard

Dashboard jest środowiskiem zapewniającym miejsce do życia małym aplikacjom jakimi są widgety.

Dashboard oraz przykładowe widgety: słownik, notatnik, kalendarz, sudoku
Dashboard oraz przykładowe widgety: słownik, notatnik, kalendarz, sudoku

Widgety

Co trzeba znać, aby stworzyć własny widget?

Widgety korzystają z technologii webowych:

  • HTML
  • CSS
  • JavaScript
  • podstawy wiedzy o XMLu, bądź tworzeniu plików .plist

Widget Hello World

Będzie składał się z plików:

  • Hello.html – plik html opisujący widget
  • Hello.css – arkusz styli opisujący wygląd naszego Widgeta
  • Hello.js – Skrypty w JavaScript, dzięki którym możemy wprowadzić trochę dynamiki do Widget’a. W tym przykładzie nieobecny.
  • Info.plist – plik opisująct nasz Widget, dostarczający niezbędnych informacji dla środowiska Dashboard, można go stworzyć ręcznie (w zwykłym edytorze tekstów), bądź w programie przeznaczonym do tych celów: /Developer/Applications/Utilities/Property List Editor
  • Default.png – plik graficzny pokazywany podczas ładowania się Widgetu.
  • Icon.png – plik będący ikoną naszego Widgetu, wyświetlany na pasku Widgetów.

Ważne jest, że oba pliki graficzne Default.png oraz Icon.png były w formacie Portable Network Graphics (PNG) i muszą być dokłanie tak, a nie inaczej nazwane.

Składniki Widgetu
Składniki Widgetu

Hello.html

Plik Hello.html ma następującą zawartość:

Hello World!!!

Hello.css

#mainBox {
 background: url("Default.png") no-repeat;
 width: 200px;
 height: 100px;
}
 
#mainBox p {
 text-align: center;
 color: #FFFFFF;
 padding-top: 40px;
}

Info.plist

Poniżej źródło tego pliku. Zawiera jedynie wymagane informacje.

<!--?xml version=”1.0” encoding=”UTF-8”?-->
 
 CFBundleDisplayName
 Hello
 CFBundleIdentifier
 krzymar.Hello
 CFBundleName
 Hello
 CFBundleVersion
 0.1
 MainHTML
 Hello.html

Zapewne zastanawiasz się, co oznaczają powyższe tagi? Strutktury XMLa nie będę wyjaśniał. Poniżej opisuję wymagane klucze, do czego służą, i jakie wartości należy im przypisać.

KluczJaką informację ma zawierać
CFBundleDisplayNameNazwa Widgetu, która będzie wyświetlana w pasku z Widgetami oraz w Finderze.
CFBundleIdentifierŁańcuch tekstowy jednoznacznie identyfikujący Widget. Zaleca się aby ta nazwa byla naszą odwróconą domeną, np. com.apple.widget.Hello
CFBundleNameNazwa Widgetu, musi odpowiadać nazwie pliku .wdgt
CFBundleVersionWersja widget’u
MainHTMLNazwa pliku html opisującego widget

Zakończenie prac

Wszystkie utworzone pliki dla Widgetu umieszczamy w jednym folderze: Hello. Po skopiowaniu ich do niego, zmieniamy jego nazwę na Hello.wdgt i GOTOWE! Pierwszy Widget jest już gotowy!

Ikona gotowego Widgetu
Ikona gotowego Widgetu

Gotowy Widget umieszczony w środowisku Dashboard

Dodaj komentarz

This site uses Akismet to reduce spam. Learn how your comment data is processed.