V tomto článku se vám pokusím přiblížit funkci a tvorbu widgetů pro internetový prohlížeč Opera.
Úvod
Widgety [vidžity] (u nás nazývané jako pomůcky) jsou s Operou spjaty už od její deváté verze. Widgety jsou malé aplikace, které mohou běžet mimo okno prohlížeče. Je to vlastně interaktivní webová stránka, která vám může přidat chybějící funkci v prohlížeči nebo ji vylepšit, popřípadě zkrátit dlouhou chvíli ve formě her.
Widgety pro Operu najdete na oficiálních stránkách společnosti Opera ASA a to na http://widgets.opera.com/ [ http://widgets.opera.com/ ], kde najdete více jak 1 200 (ke dni 28. 7. 2007) těchto pomůcek.
Tvorba widgetů
Jestli chcete vědět, jak takový widget vytvořit, můžete si přečíst oficiální návod na komunitním portále Opery [ http://my.opera.com/community/dev/widgets/ ]. Samozřejmě v angličtině. Pro ty, co neumí anglicky, se tento problém pokusím trochu nakousnout. Předpokládám, že alespoň trochu ovládáte HTML, XML, CSS, popřípadě JavaScript. Pokud ne, doporučuji vám některý z našich kurzů.
Widget se skládá nejméně ze dvou souborů. Jsou jimi soubory index.html a konfigurační soubor config.xml. Tyto soubory mají stejnou strukturu, jako byste psali webové stránky. A jak bývá zvykem u všech kurzů tohoto typu, prvním programem je Hello World! Tím také začneme. Pro začátek jsem použil kódy z my.opera.com [ http://my.opera.com/community/dev/widgets/first/ ].
Vytvoříme si soubor index.html a vytvoříme v něm následující obsah:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Soubor config.xml bude vypadat takto:
<?xml version="1.0" encoding="utf-8"?>
<widget>
<widgetname>Hello World!</widgetname>
<description>
This is the very first widget written!
</description>
<width>500</width>
<height>300</height>
<author>
<name>John Doe</name>
<link>http://acme-widget.example.com</link>
<organization>Acme Examples, inc.</organization>
</author>
<id>
<host>example.com</host>
<name>HelloWorld</name>
<revised>2006-01</revised>
</id>
</widget>Tuto základní strukturu by měl obsahovat každý widget. Další informace o konfiguračním souboru můžete najít na stránkách Opery v článku Widget information file syntax [ http://oxine.opera.com/widgets/documentation/widget-configuration.html ]. Widget si můžete prohlédnout spuštěním souboru config.xml. Dostaneme toto:
Toto je první widget Hello World!. Můžete s ním libovolně pohybovat, ale musíte kliknout přesně na některé písmeno. Vypneme ho přes menu Pomůcky → Správce pomůcek → Zavřít. Nebo na něj klikneme pravým tlačítkem a vybereme Zavřít. Pouhý text není ale dobře použitelný. Widgety si lze libovolně ostylovat pomocí kaskádových stylů (CSS). Soubor index.html pak může vypadat takto:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" type="text/css" href="helloworld.css">
</head>
<body>
<div id="frontview">
<div class="top">
<p>Hello World!</p>
</div>
</body>
</html>Poté si samozřejmě musíme vytvořit soubor kaskádových stylů helloworld.css. Ten si můžete upravit sami, pokud pokud máte potřebné znalosti. V mém případě vypadá takto:
body {
width: 454px;
margin: 0;
padding: 0;
color: white;
background: transparent url(pozadi.PNG) scroll no-repeat top left;
}
div.top {
padding: 45px 0 0 45px;
width: 454px;
height: 100px;
}Po spuštění souboru config.xml se nám otevře toto:
Na začátku jsem psal o JavaScriptu. Ten se samozřejmě také může na widgetu objevit. Pomocí JavaScriptu můžeme našemu widgetu vdechnout „život“. Na ukázku předvedu digitální hodiny. Ty není problém naprogramovat a na Internetu je plno takového kódu zdarma ke stažení. Samozřejmě můžete použít i něco jiného. Kód na hodiny vypadá nějak takto:
<script language="JavaScript">
sekundy = 0;
hodiny = 0;
minuty = 0;
function cas(){
ted = new Date();
hodiny = ted.getHours();
minuty = ted.getMinutes();
sekundy = ted.getSeconds();
hodinky.innerHTML = (hodiny + " : " + minuty + " : " + sekundy);
setTimeout('cas()', 990);
}
</script>Tento kód vložte do souboru index.html mezi tagy <head></head>. Samozřejmě je lepší zapsat javascriptový kód do externího souboru pro lepší přehlednost. Mezi tagy <body></body> musíme ještě zapsat to, co spouští ony hodiny:
<script language="JavaScript">
cas();
</script>V mém případě dostaneme toto:
Tak, to je konec mého příkladu, ale možností widgetů určitě ne. Pokud chcete vědět více, odkážu vás na oficiální návod [ http://my.opera.com/community/dev/widgets/ ]. Na konec ještě jedna připomínka. Pokud nechcete začít psát úplně od začátku, můžete si stáhnout předpřipravený základ [ http://my.opera.com/community/dev/widgets/resources/ ].
Bezpečnost
Jak jsem již psal, widget je interaktivní webová stránka, takže k němu Opera přistupuje jako k ostatním stránkám. Proto vás možná napadne otázka, jak je to s bezpečností. Většina widgetů obsahuje JavaScript, který může být potenciální hrozbou. Opera je však s bezpečností na velmi dobré úrovni, proto žádné větší riziko nehrozí. Budete-li stahovat widgety z oficiálních stránek [ http://widgets.opera.com/ ], troufám si říct, že nehrozí vůbec žádné riziko.
Závěrem
Widgety nejsou žádnou novinkou, přesto vám mohou zpříjemnit život a doufám, že vám tento návod trochu pomohl pochopit funkci a kostru widgetů pro Operu.
- http://widgets.opera.com/ [ http://widgets.opera.com/ ]
- http://my.opera.com/community/dev/widgets/ [ http://my.opera.com/community/dev/widgets/ ]
- http://widgets.opera.com/widgetize/start [ http://widgets.opera.com/widgetize/start ]