Opera Widgets - jak to się robi

Opera wprowadziła już całkiem dawno możliwość robienia widżetów na przeglądarkę. Wbrew pozorom termin 'widżet na przeglądarkę' nie oznacza tworzenia wtyczek - Opera stała się platformą uruchomieniową aplikacji. Widżety programujemy jak zwykłą stronę internetową (HTML, CSS, JavaScript) - z tą różnicą, że JavaScript posiada rozszerzone API m.in. o dostęp do plików, a silnikiem jest wydajny Carakan z wsparciem dla najnowszych rozwiązań HTML5 - a całość wyświetla się jako aplikacja okienkowa. Wszystko pięknie - ale jak zacząć?

Przykład widżetu na Operę - Toppler

Widżet zawiera się w jednym pliku o rozszerzeniu *.wgt. W rzeczywistości jest to archiwum zip, z plikami składowymi na które składa się:
  • config.xml - plik konfiguracyjny - zawiera ustawienia aplikacji, takie jak rozmiar, nazwę aplikacji czy dane autora
  • index.html - główny plik aplikacji
  • obrazki i inne multimedia
  • pliki stylów - CSS
  • pliki skryptów - JavaScript
Plik konfiguracyjny config.xml
Minimalna wersja pliku konfiguracyjnego zawiera tylko jego nazwę. Domyślna wysokość i szerokość to 300 px, zaś plik aplikacji jest zaciągany z index.html.
<?xml version='1.0' encoding='UTF-8'?>
<widget>
  <widgetname>Nazwa widżetu</widgetname>
</widget>
Opcjonalnymi tagami, które jednak mogą być bardzo pomocne są:
  • <width> - szerokość aplikacji
  • <height> - wysokość aplikacji
  • <description> - opis aplikacji dostępny podczas instalacji
  • <author> - informacje o autorze zawiera tagi <name>, <email> oraz <link>
  • <icon> - zawiera ścieżkę do ikonki - jak podaje Opera ikonek może być dużo z różnymi rozmiarami; rozmiary podajemy jako atrybuty width i height
Docelowo bardziej rozbudowany plik konfiguracyjny może wyglądać następująco:
<?xml version="1.0" encoding="UTF-8"?>
<widget>
  <widgetname>Toppler</widgetname>
  <description>Toppler/Perestroika - JavaScript remake of old russian game</description>
  <width>830</width>
  <height>490</height>
  <author>
    <name>Michal Biniek</name>
    <link>http://michal.biniek.pl</link>
    <email/>
  </author>
  <icon width="128" height="128">icon128.png</icon>
  <icon width="32" height="32">icon32.png</icon>
  <icon width="16" height="16">icon16.png</icon>
</widget>

Plik aplikacji index.html

Opera podaje jako szkielet aplikacji następujący kod HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>
W znaczniku <title> umieszczamy tytuł aplikacji, który będzie później wyświetlany na pasku zadań. Reszta znaczników ma identyczne działanie jak na zwykłej stronie internetowej. W <head> możemy dołączać pliki CSS i JS - można się odwoływać do struktury lokalnej - czyli jeżeli skrypty mamy w katalogu js to dołączamy skrypt poprzez:
<script src="js/jquery.js" type="text/javascript"></script>

Co można a czego nie w CSS i JS?

Zasadniczo możliwości CSS i JS są ograniczone możliwościami przeglądarki. Opera w wersji 10 obsługuje już sporo standardu CSS3 i HTML5. Tło aplikacji domyślnie jest ustawione na przezroczyste - natomiast nic nie stoi na przeszkodzie żeby zrobić je półprzezroczyste lub jednolite. Opcjonalnie można zastosować taki efekt na samą ramkę - która może być zaokrąglona na rogach.
body {
  width: 800px;
  height: 400px;
  border: solid 10px rgba(255,255,255,0.5);
  border-radius: 10px;
  -o-border-radius: 10px;
}
Dużym plusem jest możliwość korzystania z framework'ów JS - np. jQuery. Powoduje to, że programowanie widżetu zasadniczo sprowadza się do napisania działającej aplikacji w przeglądarce, a następnie zapakowanie jej w archiwum zip i zainstalowanie jej jako widżetu. Jeden wymóg - musimy mieć zainstalowaną Operę.

Co dalej?

W momencie, kiedy przygotowaliśmy widżet zapakowaliśmy go do wgt to możemy dodać go do katalogu widżetów. W tym celu wchodzimy na stronę widgets.opera.com i klikamy w link publish. Warunkiem dodania widżetu jest konto w społeczności my opera - jeżeli już posiadamy tam konto to możemy się od razu zalogować.

W pierwszym kroku wybieramy widżet z dysku oraz zgadzamy się na warunki serwisu.
Drugi krok pozwala nam wybrać i uzupełnić informacje umieszczane na stronie z widżetem - wyświetla także odczytane dane jak dostępne rozmiary ikonek itp.

Fragment screenshot'u z drugiego kroku procesu dodawania widżetu do katalogu.
Przydatne materiały:

Prześlij dalej:

Brak komentarzy:

Prześlij komentarz