Magyar Opera

Widgetek készítése az új Operához

Írta: Karbonade • 2006. 03. 16. - 15:00 Címkék: tipp műhely minialkalmazás
Opera widget

A widgetek (más néven minieszközök vagy webeszközök) az új Opera 9-ben jelentek meg, mint kiegészítők az Operához. A widgetek hasznos funkciókat valósíthatnak meg, jelenleg már van számológép, valutaátváltó, kereső, hírek, de akad webfejlesztői segédlet, időjárásjelentő és naptár is. A MyOpera oldaláról már most is sok hasznos widgetet tölthetsz le, és ha készíteni akarnál egy újat, itt jó alapokat találhatsz.

Ez a leírás segít az első widget elkészítésében, és nagyrészt az Opera leírásán alapszik.

Mi az a widget?

A widgetek valójában speciális AJAX weblapok, Javascript és CSS használatával készülnek, így bárki készíthet egyet már minimális webfejlesztői tudással is. Másrészt a widget úgy viselkedik, mint egy alkalmazás, az Operától külön jelenik meg, és saját felülete van.

A widget technikailag egy csomagolt fájl, de a zip helyett wdgt kiterjesztést kapott. A widgethez kapcsolódó összes fájl ebben a csomagban található. A widget többnyire a következő elemeket tartalmazza:

  • egy konfigurációs fájl, melyben megadhatod a widget méretét, nevét, a szerzőjét és a biztonsági információkat
  • egy HTML fájl, ami a widget váza lesz. A widget alapja más típusú fájl is lehet, például SVG vagy XML (bármi lehet, amit az Opera natívan támogat)
  • képek
  • Javascriptek
  • stíluslapok

Mire lesz szükséged egy widget készítéséhez?

Egy Opera widget készítéséhez nagyjából ugyanazokra a dolgokra lesz szükséged, mint egy weblap fejlesztésénél:

  • a webes technológiák ismerete
  • egy szövegszerkesztő, amivel kényelmesen tudsz HTML, Javascript és CSS fájlokat szerkeszteni
  • egy zip csomagolóra
  • egy helyre, ahová a widgetet feltöltheted. A MyOpera oldalán ezt megteheted.

Hogyan viszonyulnak a widgetek a weblapokhoz?

Bár többször is említettem, hogy a widgetek valójában weblapok, van közöttük néhány különbség:

  • A widget a böngészőn kívül él a többi program között, a hagyományos weblapos felületek nélkül, mint például címsáv.
  • A widgetek biztonsági beállításai különböznek a weblapoktól, így készíthető olyan widget, amely egyszerre fér hozzá két különböző kiszolgálón futó szolgáltatáshoz.
  • A widgeteknek van egy speciális widget nevű objektumuk Javascriptben, amelyen keresztül elérhetőek a widgethez tartozó funkcionalitások.
  • A widgetnek hozzáférése van egy helyi tárhelyhez a beállítások és letöltött adatok tárolására. Ez a módszer hasonló a sütikhez, de a tárhely nagyobb, és nem törlődik egy bizonyos idő után.
  • A widgeteknek tipikusan több nézetük van. Az egyik nézet az, amit a felhasználó a widget használata közben lát, a másik nézetben pedig hozzáférhet a widget beállításaihoz. A nézetek között átmenetekkel lehet váltani, melyek hagyományos Javascript+CSS módszerrel valósíthatóak meg.
  • Alapesetben egy widget mozgatható, vagyis a felhasználó egyszer?en rákattinthat a widget felületére, és máshová húzhatja azt. Ha a widgetnek vannak olyan részei, amelyeket nem lenne szabad mozgatni, akkor ezekhez kontrol régiókat kell definiálni.
  • Alapesetben a widget háttere átlátszó, hogy a widget használható legyen az asztalon. Az átlátszó terület nem válaszol az egér eseményekre, egyszerűen továbbítja őket az alatta levő alkalmazásnak.

Widget műhely: Helló világ!

Most, hogy megvan az alap, nekikezdhetünk a kódolásnak. Az első widgetünk a lehető legegyszerűbb "Helló világ!" lesz, amihez két fájlra van szükséged:

  • az alap dokumentum
  • a widget konfigurációs fájlja

A bonyolultabb widgetekhez szükség lehet külső CSS és Javascript fájlokra is. Első lépésben csak egy egyszerű widgetet fogunk csinálni, majd ezután kiegészítjük ezt egy bonyolultabbra, stílussal és konfigurációval.

Először is készíts egy index.html nevű fájlt. Ebben a fájlban adod meg, hogy mit lásson a felhasználó, amikor megnyitja a widgetet. 

<!DOCTYPE html>
<html>
  <head>
    <title>Helló világ!</title>
  </head>
  <body>
    <h1>Helló világ!</h1>
  </body>
</html>

A widget konfigurációs fájljának létrehozása

A következő lépésben a widget futtatásához létre kell hozni a definíciós fájlt config.xml névvel. Ebben a fájlban tároljuk a widget tulajdonságait. A widget következő tulajdonságai kötelezőek:

  • A widget neve.
  • A widget mérete. Ez a maximális látható területe a widgetnek.
  • Adatok a szerzőről. Nyugodtan dícsérheted magad.
  • Egy egyedi azonosító a widgethez. Ez három részből épül fel: a hosztnév, az útvonal és a megjelenés dátuma év-hónap formában (YYYY-MM). Ha több változatot is tervezel egy hónapban, akkor hozzáfűzheted a napot is.
  • Biztonsági információk, amelyekből a widget felhasználója megtudhatja, hogy milyen oldalakhoz fog a widget kapcsolódni. Bár ez az adat nem kötelező, minden olyan widgetnek ajánlott megadni, amelyik külső szolgáltatáshoz kapcsolódik.

A mi config.xml fájlunk így néz ki:

<?xml version="1.0" encoding="utf-8"?>
<widget>
  <name>Helló világ</name>
  <description>
    Ez az első widgetem.
  </description>
  <width>473</width>
  <height>300</height>
  <author>
    <name>Gipsz Jakab</name>
    <link>http://widgetek.pelda.hu</link>
    <organization>Widget Kft.</organization>
  </author>
  <id>
    <host>pelda.hu</host>
    <name>HelloVilag</name>
    <revised>2006-03</revised>
  </id>
</widget>

Ha további adatokra lenne szükséged ehhez a fájlhoz, olvasd el a config.xml specifikációját.

A widget első futtatása

A fejlesztés alatt a widgeteket a config.xml megnyitásával tudod kipróbálni. Ehhez húzd a fájlt az Operára vagy nyisd meg a Fájl > Megnyitás menüvel. A widget most így néz ki:

A widget első futtatása

Stílus a widgethez

A widget ebben a formában az alap stílust használja, vagyis a böngésző alapbeállításait és egy átlátszó hátteret. Fűszerezzük meg egy kis CSS-sel, és nézzük mi lesz belőle. Először is hozzá kell fűzni a CSS stílusfájlt a HTML dokumentumhoz. Végezd el a következő módosításokat az index.html-ben:

<!DOCTYPE html>
<html>
  <head>
    <title>Helló világ!</title>
    <link rel="stylesheet" type="text/css" href="hellovilag.css">
  </head>
  <body>

    <div id="frontview">
      <div class="top">

        <h1 id="hellotext">Helló világ!</h1>

      </div>
      <div class="bottom">
      </div>
    </div>

  </body>
</html>

Most már elkészíthetjük a hellovilag.css stíluslapot is. A fájlban a hivatkozott képeket egy külön csomagban letöltheted az Operától. Csomagold ki ezt a widget mappájába, ahol az images mappában találod meg a felhasznált képeket.

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

div#frontview {
  width: 454px;
}

div.top {
  padding: 0 0 0 45px;
  width: 454px;
  height: 100px;
  background: transparent url(images/hw_top.png) scroll no-repeat top left;
}

div.bottom {
  width: 454px;
  position: relative;
  height: 36px;
  vertical-align: top;
  background: transparent url(images/hw_bottom.png) scroll no-repeat top left;
}

div.top h1 {
  margin: 0 0;
  padding: 40px 0;
  font-size: 32px;
  text-align: center;
  width: 354px;
}

Egy jótanács a stílus elkészítéséhez: bár nincs divatrendőrség, azért próbáld meg követni a jelenleg elérhető többi widget stílusát, amennyire lehet. Ha így teszel, könnyebben fel fogják ismerni a widgetedet, és könnyebb lesz használni is.

Jelenleg a widgetünk így néz ki:

Egy stílussal is rendelkező Opera widget

Interaktív widget

Most már van egy szép widgetünk, csak éppen semmit nem lehet vele kezdeni. Ezért most hozzáadunk egy Beállítás gombot. Végezd el a következő módosításokat a html dokumentumban:

<!DOCTYPE html>
<html>
  <head>
    <title>Helló világ!</title>
    <link rel="stylesheet" type="text/css" href="hellovilag.css">
    <script type="text/javascript" src="helloworld.js"></script>
  </head>
  <body>
    <div id="frontview">
      <div class="top">
        <h1>Helló világ!</h1>
      </div>
      <div class="bottom">
        <p class="flipbutton" id="flipfront"></p>
      </div>
    </div>

    <div id="configview">
      <div class="top">
        <h2>Helló világ! beállítás</h2>
        <p>
          <label>Szöveg</label>
          <input id="frontlabel" type="text" size="25" />
        </p>
      </div>
      <div class="bottom">
        <p class="flipbutton" id="flipback"></p>
      </div>
    </div>

  </body>
</html>

A következő módisításokat hajtottuk most végre:

  • van egy új szkript, ami elvégzi a váltást a két nézet között
  • van egy új gombunk, amivel majd megnyithatjuk a beállításokat
  • van egy beállítás nézetünk

A beállítások nézet stílusa

A következő kiegészítést add hozzá a jelenlegi stílusfájlhoz:

div.top h2 {
  padding: 30px 0 0 0 ;
  margin: 0;
}

div#configview {
  display: none;
}

div#frontview, div#configview {
  width: 454px;
}

#configview div.top p {
  padding: 0;
  margin: 0;
  font-size: 14px;
  text-align: center;
  width: 354px;
  vertical-align: middle;
}

#configview label {
  margin-right: 1em;
}

A beállítások gombjának stílusa

Ugyancsak a stílusfájlban meg kell adjuk a beállítások gombjának is a stílusát:

body:hover .flipbutton {
  opacity: 0.3;
}

body .flipbutton:hover {
  opacity: 1.0;
}

body .flipbutton:active {
  opacity: 1.0;
  background-position: bottom left;
}

.flipbutton {
  opacity: 0.0;
  overflow: hidden;
  height: 16px;
  width: 24px;
  position: absolute;
  background: transparent url(images/flip.png) scroll no-repeat 0 0;
  background-position: top left;
  right: 45px;
  bottom: 25px;
  margin: 0;
  padding: 0;
}

A beállításokat a saját készítésű widgetnél is ajánlott a fentiekhez hasonlóan elkészíteni, bár semmi sem kötelező.

Jelenleg a widget így néz ki:

Egy Opera widget beállítás gombbal

A beállítások megnyitása

A következő lépésben hozzáadjuk a beállítások gombhoz azt a funkciót, ami megnyitja a beállítások nézetet. Ezt a műveletet egy egyszerű JavaScript fájlban végezzük el. Hozd létre az alábbi JavaScript fájlt hellovilag.js névvel:

// Execute the script on load
window.addEventListener('load',function(ev){

  // add behavior to the flip button on the front side
  document.getElementById('flipfront').addEventListener('click',function(ev){
    flipWidget("back");
  }, false);

  // add behavior to the flip button on the front side
  document.getElementById('flipback').addEventListener('click',function(ev){
    flipWidget("front");
  }, false);

  // add a change handler so that the widget shows whatever we input into the 
  // widget front
  document.getElementById('frontlabel').addEventListener('change',function(ev){
    document.getElementById('hellotext').textContent = this.value;
  },false);

  // set the contents of the text field to the initial value
  document.getElementById('frontlabel').setAttribute('value', document.getElementById('hellotext').textContent);
},false);

// Perform the flipping of the widget
function flipWidget(to){
  switch (to) {
    case "back":
      document.getElementById('frontview').style.display = "none";
      document.getElementById('configview').style.display = "block";
      break;
    case "front":
      document.getElementById('hellotext').textContent = document.getElementById('frontlabel').value;
      document.getElementById('configview').style.display = "none";
      document.getElementById('frontview').style.display = "block";
      break;
    default:
      // do nothing
      break;
  }
}

Mostantól ha megnyitod a widgeted, és rákattintasz a beállítások gombra, akkor a widget átvált a beállítások nézetre, és ott megadhatsz egy másik szöveget, ami a főoldalon megjelenik.

A widget beállítások nézete így néz ki:

Egy Opera widget beállítás nézete

Gratulálunk! Most már remélhetőleg te is tudsz egyszerű widgeteket készíteni. Ha készítesz egy jó widgetet, tedd fel a MyOpera oldalára is.

A bejegyzés trackback címe:

https://magyaropera.blog.hu/api/trackback/id/tr675059

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Takács Géza 2006.04.29. 00:04:14

Üdv!
Már csak azt szeretném valahonnan megtudni, hogyan tudom a widgetet megnyitni. Menüből, megnyitásal, v. hogyan?
A letöltötteket is csak nagyon körülményesen tudom megnyitni, egyszerűbb, ha mindig újra letöltöm!
TGéza
Válasz erre 

Karbonade · http://magyaropera.blog.hu 2006.05.18. 14:31:06

Szia Géza,
A widgetek elérése még sokat változhat, a legújabb heti buildben már nem úgy van, mint eddig, hanem kaptak egy saját panelt és menüt, mint a hírcsatornák.
Válasz erre 

smv · http://smv.blogsearch.hu 2006.05.19. 08:33:11

Socket kezelés, vagy hasonló nem tudod, hogy hogyan van?
Válasz erre 

Karbonade · http://magyaropera.blog.hu 2006.05.19. 09:35:08

Nem :) De szerintem ezt ugyanúgy kell, mint egyébként, nem hiszem, hogy lenne widget-specifikus socket kezelés.
Válasz erre 

nem kell 2006.05.21. 16:34:41

Nekem nem jelenik meg semmi. Létrehoztam a Hello világ példát, meg is nyitottam a Webalkalmazások menüben. Mégse látok semmit, sem az operában sem az asztalon. Hol kell keresni a Hello világ feliratot?
Kösz, ha válaszoltok
Válasz erre 

Karbonade · http://magyaropera.blog.hu 2006.05.21. 16:43:30

Kicsit nehéz észrevenni, apró fekete betűs szöveg átlátszó háttérrel. Próbáld meg az asztal hátterét fehérre állítani. Ha akkor sincs meg, akkor töltsd le a Hello World widgetet ( http://my.opera.com/community/customize/widgets/info/?id=3675 ), és nézd meg, miben tér a kódja a tiedtől.
Válasz erre 

jeti 2006.06.10. 11:19:31

Hogy lehet az aktuális oldal url címét és címét (pl.: <TITLE > közti részt </TITLE >) lekérdezni widget segítségével?
Válasz erre 

Karbonade · http://magyaropera.blog.hu 2006.06.10. 18:40:00

Sajnos nem értek a Javascripthez, de gondolom ugyanúgy kell, ahogy egy normál weboldal esetében, szóval érdemes keresgélni a weben.
Válasz erre 

opera10 · http://my.opera.com/Lali19871014/blog/ 2006.11.03. 22:07:09

A config.xml meghatározásakor nekem csak úgy möködött, hogy Helló világ -t írtam, a -val nem jó
Válasz erre 

Lali_ 2007.05.04. 22:20:02

Azt nem tudja valaki, hogy hogy lehet megcsinálni egy widgetnél, hogy bizonyos terület fölé érve egy kevéske szöveget jeleníten meg(Sugót)
Próbáltam a titlés dolgot és az altosat, de azt nem használja a widgetnél, nem ír ki semmit. Fonos lenne.
Válasz erre 

Karbonade · http://magyaropera.blog.hu 2007.05.05. 10:39:02

Keress rá valamiyen JavaScriptes tooltip megoldásra normál weblapoknál.
Válasz erre 

Lali_ 2007.05.05. 21:35:39

Köszi sikerült, már működik. Esetleg arra is tudnál tippet adni, hogy mit kell csinálni ahoz, hogy bezárodjon a widget, ha rányomok egy kis bezárós gomra, nem akarok semmi extrát, hogy szint változtasson, vagy ilyesmi, csak csukja be és kész.
Próbáltam, hogy egy órás widgetböl kiszedtem a megfelö részt az indexes htmléböl, ilyen styleos közötti, akkor működött ,de a sugohoz is kell ilyen styleos cucc és a kettö együtt nem akar működni, be kell zárni a styleos tagot és egy ujat nyitni? Vagy hogy, nincs valami jó tipped megint, igérem utána abbahagyom, ha ez is megvan( egy időre)
Válasz erre 

Lali_ 2007.05.05. 21:56:05

ÁÁÁ, nem áltok a szememtöl..megvan.., kezd alakulni:)
Válasz erre 

Lali_ 2007.05.05. 22:01:44

Most már "csak" a "kinagyitásokat" kéne megoldani, de lehet, hogy az már nem fog menni. Asszem igy feltöltöm, max visszadobják.
Válasz erre 

Lali_ 2007.05.07. 13:03:44

Na, felrakták, nem is gondoltam volna:
widgets.opera.com/widget/6754
:)
Válasz erre 

cousin333 · http://magyaropera.blog.hu 2007.05.07. 20:56:45

EGész jó lett...:)

Ha nem tudod megoldani, hogy kinagyítsa középre, akkor inkább csináld meg mátrix elrendezésben, mert ez az L alak elég érdekes...

Más:
Hunagary weather :). Nem tudod, hogy az időjárásban nincsen garancia? :D (Hungary Weather jobb lesz)

az ENG részt is írd át, mert elég nyakatekert az a mondat...
"If you want to know how the (current) weather looks like in Hungary, than download this widget" Vagy valami ilyesmi...
Válasz erre 

cousin333 · http://magyaropera.blog.hu 2007.05.07. 20:58:28

Egyszer azért olvasd át a HU részt is. Az angol még kiegészítheted: "The infos are taken from idokep.hu."
Válasz erre 

Lali_ 2007.05.07. 21:39:49

Mire gondolsz a mátrixossal, négyzet formában?
Az angol tudásom meg közel egyenlő a nullával..
Ezt az L alakot azért találtam ki, mert a késöbbiekben, ugy szeretném megcsinálni, hogy az L közepébe nagyítsa ki a térképeket
Egyébként lehet, hogy lesz pollen naptár is, majd...Sokaokat érint sajnos..
Válasz erre 

Lali_ 2007.05.07. 22:08:18

Pollen térkép hozzáadva(egy kicsit csalva) + szebb becsukógomb=2.02
Válasz erre 

opera · http://bartosslajos.atw.hu 2007.05.27. 20:23:54

Azt nem tudja valaki, v nem tudja, hogy honnan lehet megtudni, h a widgetek cachére lehet-e, hivatkozni és ha igen, akkor hogyan? Mert ahogy én néztem nincs nagyon szabály a mappanévben,fájlban vagy az elnevezésben..Azért kéne, hogy a kis képet, ha rákattint az ember, akkor kinagyitja és hogy ezt a cacheböl olvassa ki és ne akarja letölteni ujbol(föleg azért ne mert akkor asszem csinálna a képre egy matricát, hogy ez a felirat az idokep.hu-n nem jelenik meg....
Válasz erre 

opera11 · http://bartosslajos.atw.hu 2007.07.23. 22:28:28

Hihi, alakul a 3-as verzió, most már kezd használható lenni(lehet már ablakokat váltani és nagyban betöltödnek a képek, automatikusan frissül 10percenként):
users.atw.hu/bartosslajos/e107_plugins/autogallery/Gallery/Opera/Kepek/idokep3.jpg

Válasz erre 

opera11 · http://opera.extra.hu/ 2007.07.24. 20:13:53

Ááááá, nem tudja valaki, hogy mi lehet a baj, hogy ha egy widgetbe beágyazok egy flasht, ami a weboldalban nem akad, viszont a widgetbe úgy beáll, hogy a feladatkezelővel kell kilőnöm az operát..A flash mondjuk 48*599-as. Ez normális? Vagy valami beállítással(a qualityn kívül, mert ha lerakom azt low-ra, akkor is ugyanúgy akad)lehet rajta segíteni?
Válasz erre 

Lali_ 2007.07.26. 22:55:02

Készvan! Elküldtem nekük..remélem csipkedik magukat. Itt egy kép, hogy milyen is lett: opera.extra.hu/kepek/idokep3.1.jpg
Válasz erre 

Lali_ 2007.07.27. 13:17:04

Kész van az időkép minialkalmazás és rögtön a 3.01-es :)
Itt kipróbálhatjáátok, plusz elolvashatjátok, hogy mi is van benne:
opera.extra.hu/news.php?item.15.8

Észrevételeket, kritikákat, ötleteket Mindenképpen írjátok le. Ha tudom kijavítom.
Válasz erre 

Lali_ 2007.07.30. 18:16:42

megvan már a 3.02-es is (pici méretűre is be lehet állítani+még 1-2 újítás) :)
Válasz erre 
süti beállítások módosítása