 |
| 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
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ą:
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.
Przydatne materiały:
- <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. |
Brak komentarzy:
Prześlij komentarz