2024. április 28., vasárnap

Lapcsaládunk:

Gyorskeresés

Útvonal

Cikkek » Számtech rovat

Gadget Vista Sidebar-hoz

  • (f)
  • (p)
Írta: |

Bizonyára sokatok látta/próbálta már a Microsoft új operációs rendszerét, a Vista-t. Egyik...

[ ÚJ TESZT ]

Bizonyára sokatok látta/próbálta már a Microsoft új operációs rendszerét, a Vista-t. Egyik nagyon hasznos újítása a Vista Sidebar, melyre mindenféle kütyüket, Gadget-eket lehet pakolászni. A következő képen kicsit csaltam, lepakoltam pár Gadget-et a Sidebar-ról az asztalra, így nem egymás alatt vannak.

[kép]

Megmondom őszintén, én rögtön kikapcsoltam a Sidebar-t, mikor először feltettem az RC2-t, nem láttam benne fantáziát. Hülye voltam. Mikor leesett, hogy 'hé, hát ilyen kis kütyüket én magam is összemonyákolhatok', rögtön izzítottam is az ercékettőt meg a Google-t, s megpróbálkoztam a dologgal.

Ebben a cikkben a Gadget-hegesztés alapjait szeretném bemutatni, hátha valaki kedvet kap hozzá. Tuljdonképpen mik is azok a Gadget-ek? Milyen nyelven lehet őket írni? Nagyon egyszerű. Ezek kis html-oldalak, megspékelve JavaScript-tel, vagy VBScript-tel, ízlés szerint fűszerezve CSS-szel. Szóval aki járatos a html-oldalak készítésében, annak nem lesz nagy ördöngősség a Gadget-készítés sem. Most, hogy már tudjuk, mivel is van dolgunk, kezdjünk neki!

Először is szükségünk lesz egy mappára, melynek neve '.gadget' -re végződik. Ezt a mappát a megfelelő könyvtárba kell pakolászni, ami a %userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets (%userprofile% = az aktuális felhasználó mappája). Szóval, másszunk oda, és kreáljunk mondjuk egy guess.gadget mappát. Micsodaaa? Guess.gadget? Mééééér'? Ja, ezt elfelejtettem mondani.. A gadget, amin bemutatom az alapokat, egy számkitalálós játék lesz, innen a név.

A továbbiakban az előbb létrehozott könyvtárban fogunk dolgozni, mindent oda kell menteni. Ahhoz, hogy egy Gadget működjön, legalább két file-ra van szükség:
- egy manifest file, melynek neve mindig gadget.xml. Ez információkat tartalmaz a Gadget-ről.
- egy .html file, mely maga a Gadget.

Notepad indít, a következő XML-kódot bekopiz:


<?xml version=''1.0'' encoding=''utf-8'' ?>
<gadget>
<name>GuessGame</name>
<version>1.0</version>
<author name=''Tamás Szakály'' />
<copyright>2006</copyright>
<description>A simple 'guess-a-number' game</description>
<icons>
<icon src=''..\\GuessGame.png'' width=''96'' height=''96'' />
</icons>
<hosts>
<host name=''sidebar''>
<base type=''HTML'' apiVersion=''1.0.0'' src=''GuessGame.html'' />
<permissions>full</permissions>
<platform minPlatformVersion=''1.0'' />
</host>
</hosts>
</gadget>


Ez az XML file nagyjából egyértelmű, infókat adhatunk meg kreálmányunkról, és még ikont is beállíthatunk neki. Ezek a Gadget-választóban fognak megjelenni. A <hosts> rész minden Gadget-nél ugyanez, kivéve a <base> tag src tulajdonságát. Ebben a fő html file-t kell megnevezni. Miután minden infot kitöltöttünk, mentsük el a file-t gadget.xml néven, és figyeljünk rá, hogy UTF-8 kódolást használjunk, illetve a kiterjesztés .xml legyen, ne xml.txt!

[kép]

Itt az idő, hogy elkészítsük a fő html file-t. A számkitalálós játék lényege, ha esetleg valaki nem tudná miről is van szó: a gép választ egy számot 0 és egy adott érték közt, nekünk pedig ki kell találni. A gép minden egyes találgatás után megmondja, hogy a választott szám kisebb vagy nagyobb-e annál, amit tippeltünk. Persze ha eltaláltuk, azt is kiírja
Ehhez szükségünk van a következő dolgokra a mini-weblapon:

- egy szövegdoboz, amibe a tippet pötyögjük
- egy 'bevitel' gomb, amivel a tippünket érvényesítjük
- egy 'új játék' gomb
- valami felület, ahol a játék kommunikál velünk.

Ezeknek a kívánalmaknak a következő html file tökéletesen megfelel:


<html>
<head>
<meta http-equiv=''Content-Type'' content=''text/html;'' />
<title>GuessGame</title>

<style>
body
{
width:135;
height:200;
background: url(''gg_bg.png'');
}
</style>

<script>
System.Gadget.settingsUI = ''Settings.html'';
System.Gadget.onSettingsClosed = SettingsClosed;
function SettingsClosed()
{
NewGame();
}

function NewGame()
{
response.innerText = '''';
guess.innerText = '''';

var maxNumber = System.Gadget.Settings.read(''maxNumber'');
if (maxNumber == '''')
{
maxNumber = 1000;
System.Gadget.Settings.write(''maxNumber'', maxNumber);
}

pick = Math.floor(Math.random()*maxNumber);

title.innerText = ''I've picked a number between 0 and '' + maxNumber +
''. Try, and guess it!'';
}

function CheckGuess()
{
if(guess.value == pick)
{
response.innerText = ''Congratulation!'';
}
else if(guess.value > pick)
{
response.innerText = ''The number I picked is lower.'';
}
else
{
response.innerText = ''The number I picked is higher.'';
}
}
</script>
</head>

<body onload=''NewGame()''>
<center>

<span id=''title'' style=''font-family: Tahoma; font-size: 8pt;''>
</span>
<br /><br />

<input type=''text'' size=''12'' id=''guess''/>
<br />

<input type=''button'' value='' Guess '' onclick=''CheckGuess()'' />
<input type=''button'' value=''New game'' onclick=''NewGame()'' />
<br />
<br />

<span id=''response'' style=''font-family: Tahoma; font-size: 8pt;''>
</span>

</center>
</body>
</html>


Magát a html-t nem szeretném túlmagyarázni, nem igazán ez a célja az irománynak. És hát igazából nem is nagyon értek a html-hez, meg a JavaScript-hez. Ezért is örvendek, hogy a Gadget-ek is használhatnak ActiveX ojjektumokat - erről talán egy későbbi cikkben ejtek szót. Azért van egy pár sor a kódban, ami magyarázatra szorul:
Minden Gadget-nek lehet egy 'beállítások' lapja. Az ezt tartalmazó html file-t a System.Gadget.settingsUI = ''Settings.html''; sorral adom meg. A System.Gadget.onSettingsClosed = SettingsClosed; sorral pedig meg lehet adni egy függvényt, mely a beállítások oldal bezárása után fut le.

Ha már így szóba jöttek a Gadget beállításai, essen róluk is pár szó. A beállítások tulajdonképpen változónév-érték párosok, melyek a Gadget minden egyes példányára külön vannak tárolva. Így lehet pl. több különböző időzónára állított órád is a Sidebar-on. Ennek egyetlen hátránya, hogy a beállítások a Gadget zárásakor tölődnek.
Hogy is lehet ezeket használni? A Gadget API Settings.write, illetve Settings.read függvényeivel lehet tárolni, illetve visszaolvasni a beállításokat. Erre példa a következő sor:
var maxNumber = System.Gadget.Settings.read(''maxNumber'');
Itt a maxNumber nevű változóba olvassuk a ''maxNumber'' nevű beállítás értékét.

Ahogy már említettem, minden Gadget-nek lehet egy beállítások oldala. Készítsünk most egyet a mini játékunkhoz! A gép által választott szám maximumát tudjuk majd itt beállítani. Ez is egy teljesen átlagos html-oldal:


<html>
<head>
<style>
body
{
width:250;
height:50;
}
</style>

<script>
function init()
{
var maxTextBox = document.getElementById(''max'');
var currentSetting = System.Gadget.Settings.read(''maxNumber'');
if (currentSetting != '''') maxTextBox.innerText = currentSetting;
}

System.Gadget.onSettingsClosing = SettingsClosing;
function SettingsClosing(event)
{
var maxTextBox = document.getElementById(''max'');

if (event.closeAction == event.Action.commit)
{
maxNumber = maxTextBox.value;
System.Gadget.Settings.write(''maxNumber'', maxNumber);
}
event.cancel = false;
}
</script>

</head>
<body onload=''init();''>
<form>
Picked number's maximum:   
<input type=''text'' id=''max'' size=''6''>
</form>
</body>
</html>


Így fog kinézni a beállítások lap:

[kép]

Mint láthatjátok, itt is használom a Gadget API-t. Nem nehéz kitalálni, hogy az onSettingsClosing eseménynek megadott függvény a beállítások lap zárásakor fut le. Ebben az if (event.closeAction == event.Action.commit) sorral megvizsgálom, hogy az OK gombot nyomták-e meg; ha igen, elmentem a beállításokat, ha pedig nem, akkor csak simán bezáródik az oldal.

Nagyjából ennyi lenne, kész is van életünk első Vista Gadget-je Valami ilyesmit kell látni, ha hozzáadjuk a Sidebar-hoz:

[kép]

Remélem azért nem volt nagyon unalmas, és talán még valaki kedvet is kap a dologhoz. Kritikákat, észrevételeket, kérdéseket természetesen szívesen fogadom. Végezetül pár link a témával kapcsolatos oldalakhoz:

Sidebar Gadget Development MSDN forum: [link]
Sidebar Gadget Development Overview: [link]
Creating Gadgets (Technet): [link]

RSS: iratkozz fel!

Hirdetés

Támogatóink

Copyright © 2000-2024 PROHARDVER Informatikai Kft.