Windows 7 minialkalmazások fejlesztésének alapjai
kategória: Interfész — forrás: Microsoft TechNet — dátum: 2009-09-12 — értékelés: 5.00 —
A Windows 7 alapesetben is számos beépített minialkalmazást tartalmaz, de olykor felmerülhet az igény, hogy más funkció(k) ellátására saját alkalmazást fejlesszünk.
A Windows fejlesztői gondoskodtak arról, hogy bárki saját igényeinek megfelelő alkalmazásokat készítsen, ennek segítésére egy egész platformot építettek az operációs rendszerbe. A következő cikkben egy Microsoft Virtual Earth technológiát felhasználó minialkalmazást fogunk kifejleszteni.
Mellékletek:
- Gadget demo - kellékek (ZIP)
- Gadget demo - kész forráskód (ZIP)
- Gadget demo - kész gadget (ZIP)
Ha ezzel megvagyunk, akkor nyissuk meg a VirtualEarth.html-t, és írjuk be a body törzsébe: "Hello Sidebar!" A .html fájl fejlécében definiálnunk kell az alkalmazás méreteit stíluslapok segítségével (nem hozok létre külön CSS fájlt, ha valaki gondolja, nyugodtan kivezetheti külön fájlba a stílusokat). Az alkalmazás még messze nem úgy funkcionál, ahogy szeretnénk, de már alkalmas a kipróbálásra. A gadget kiterjesztésű fájlok nem mások, mint átnevezett .zip fájlok, így könnyedén elkészíthetjük a saját telepítőnket. Menjünk a Documents > Visual Studio 2008 > WebSites > VirtualEarth mappába, és jelöljük ki az összes fájlt, majd tömörítsük be őket egy .zip fájlba, aminek a neve VirtualEarth. Ha ezt átnevezzük VirtualEarth.gadget-re, akkor kész is vagyunk a telepítőnkkel, bátran próbáljuk ki.
Az első és legfontosabb dolog, hogy tisztázzuk milyen változások történtek a Windows Vista óta. Ami rögtön szembetűnik, az az, hogy eltűnt az oldalsáv (Sidebar). Számos felhasználó elégedetlen volt vele, zavarónak tartotta, ezért a fejlesztők úgy döntöttek, hogy az oldalsávot eltávolítják a rendszerből, a funkcióját az asztal veszi át, ami többé nem szab határt az alkalmazások méretének, kinézetének. Mostantól fogva minden alkalmazás kap egy önálló konténert, amely segítségével mozgatható, átméretezhető, és amin keresztül a beállításai is elérhetők. Természetesen az asztal csak a megjelenítő funkciót látja el, mivel az alkalmazások továbbra is a siderbar.exe processzusban futnak.
A háttérben is történtek változtatások. Az alkalmazások memóriafogyasztása meglehetősen csökkent, mostantól minden egyes alkalmazáshoz nem jön létre egy külön Sidebar folyamat, egyetlen processzus felel az összes futó alkalmazás felügyeletéért. Ha pedig az összes alkalmazást eltávolítjuk az asztalról, maga a Sidebar is leáll, ezzel tovább spórolva a memóriával. Mostantól a gadgetek telepítését pedig közvetlenül kódból is elindíthatjuk, ami a Vistában még nem volt megtalálható.
Minden aktív alkalmazás rendelkezik egy konténerrel, amelyen fentről lefelé haladva az alábbi kezelőszervek találhatóak meg: bezárás, lekicsinyített és felnagyított nézet közötti váltás, beállítások, és egy kis felület, aminek a segítségével szabadon mozgatható a desktop keretein belül az alkalmazás. Különböző állapotaik lehetnek: lekicsinyített (alapértelmezett állapot), felnagyított és kiterjesztett. A lekicsinyítés-felnagyítás Vista időszakban még nem létezett, ott az "oldalsávra dokkolt" és "az oldalsávról eltávolított" eseményekre lehetett feliratkozni, de kompatibilitási szempontból kódban ugyanúgy néz ki mind a két változat. A speciális állapot a "kiterjesztett" (flyout), amelyet ma mi is aktívan ki fogunk használni. Ez a megjelenítési típus akkor hasznos, amikor a gadget alapállapotában valamilyen felhasználói interakció történik, és az eredményt egy nagyobb felületen szeretnénk visszaadni. Flyout állapotban az alkalmazás azonban nem mozgatható, és automatikusan kilép ebből az állapotból, ha az alkalmazás kikerül fókuszból.
Az elméleti áttekintés után álljunk is neki a tényleges munkának. Aki már valaha készített weblapot, és van némi programozói gyakorlata is, annak nem fog egyáltalán gondot okozni a gadget készítés sem. Az alkalmazások HTML, CSS, XML és szkript (Java vagy VisualBasic) kódból épülnek fel, ezért először is szükségünk lesz egy fejlesztői rendszerre, amely megkönnyíti a munkát (lehetne Notepadben is csinálni, de azt hiszem, felesleges magunkat kínozni vele). Ajánlom a Visual Studio ingyenes változatának, a Visual Studio 2008 Express SP1-nek a letöltését, amely a http://www.microsoft.com/express címen található meg. Továbbá a Virtual Earth képességeinek felhasználásához szükségünk lesz a VE SDK-ra (fejlesztői készlet), amely interaktív online kódgenerátor formájában megtalálható a http://dev.live.com/virtualearth/sdk címen.
Miután sikeresen feltelepítettük a Web Developert, indítsuk el a szoftvert és kezdőképernyővel való megismerkedés után válasszuk a File > New WebSite opciót. Az itt megjelenő panelen számos előredefiniált webalkalmazás projekt megtalálható, azonban ezek közül számunkra csak az Empty Web Site megfelelő, válasszuk is ki, és adjuk neki a VirtualEarth nevet.
A projektünk készen van. A Sidebar alapesetben több információt is megjelenít az alkalmazásokról és ezeket nem a felületet leíró HTML állományokból nyeri, hanem minden gadget kötelezően kell, hogy tartalmazzon egy gadget.xml nevezetű állományt, amely az adott alkalmazás metadatait írja le, mint a neve, verziója, készítőjének adatai stb. Adjuk is hozzá a projekthez a szükséges XML fájlt. A Solution Explorer panelen jobb egérkattintással az Add New Item opció kiválasztásával tudjuk ezt elérni. Itt az XML File típusra lesz szükségünk, amelynek kötelezően a gadget.xml nevet kell adnunk, más esetben a rendszer nem fogja tudni értelmezni.
Azonban mielőtt feltöltenénk adatokkal, tudjuk le a projekt összeállítását most, hogy minden rendelkezésre álljon. A cikkel együtt letölthető néhány képfájl, amelyet előkészítettem, ezek név szerint a background.png, a live_icon.jpg és a live_orb.jpg. Adjuk őket hozzá a projekthez: Solution Explorerben jobbklikk > Add Existing Item. Szükségünk lesz még két HTML fájlra is, az egyik a lekicsinyített (alapértelmezett) állapotban fogja a gadget felületét definiálni, a másik fájl a flyout (kiterjesztett) állapotban. Ismét az Add New Item segítségével adjunk hozzá elemeket a projekthez, amelyek most HTML fájlok lesznek. VirtualEarth.html és Flyout.html. Vigyázzunk, hogy a hozzáadás során a .html kiterjesztést is adjuk meg, különben .htm kiterjesztése lesz a fájloknak. Az alkalmazás logikájának a megírásához szükség lesz JavaScriptre, ezért adjunk hozzá a projekthez egy VirtualEarth.js nevű fájlt a már megszokott módon.
Most hogy összeállt a projektünk, elkezdhetjük feltölteni metaadatokat a gadget.xml-be. Ha valaki nem ismerné az XML fájlokat, akkor annyit érdemes róluk tudni, hogy hierarchikus, jól strukturált formában tárolnak összefüggő információkat. A gadget.xml-nek az alábbi módon kell kinéznie:
A < > jelek között a tulajdonságok azonosítóit láthatjuk, illetve a tulajdonságok attribútumait. Nézzük, is hogy mi mindent tartalmaz:
Az alkalmazásunk szabályosan megjelenik, és megtalálható a Gadget Gallery-ben, ahol a definiált metaadatokat le is ellenőrizhetjük:
Miután kipróbáltuk és láttuk munkánk kezdetleges eredményét, kezdjük el kialakítani a valós felhasználó felületet. Töröljük ki a "Hello Sidebar!" sort, majd bal oldalról nyissuk meg a Toolbart. A weblap törzsébe húzzunk be két div-t, az elsőnek adjuk a "Background" azonosítót, a másiknak a "MenuBar" id-t adjuk meg (ha gondoljuk, menetközben osztott nézetre is kapcsolhatunk a Split view segítségével, hogy lássuk, élesben min dolgozunk). Ha kész vagyunk vele, akkor a Toolbarról be kell még húznunk egy szövegdobozt (Input [Text]) és két gombot (Input [Button]). A szövegdoboznak adjuk a "SearchBox" azonosítót és a value attribútumnak azt, hogy "Magyarország". Az első gombnak azonosítóul adjuk a "SearchButton" nevet és a value értékének pedig azt, hogy "Keres". A második gomb esetében az azonosító "CloseButton" legyen és a value értéke pedig "Bezárás".
Láthatjuk a szerkesztő felületen, hogy eddig mit csináltunk, egyelőre nem a legszebb, ezért stíluslapok segítségével egy kicsit formázzuk meg. A háttér legyen egy kép, a MenuBart méretezzük át és helyezzük a bal felső sarokba, majd az egyes vezérlőket igazítsuk egymás alá. A kód jelenleg így néz ki:
Látható, hogy most már kezd gadget formája lenni a dolognak, próbáljuk is ki. Nem szükséges minden alkalommal telepítőt kreálnunk, elegendő, ha a már telepített fájlokat írjuk felül. Gadgetet három különböző helyre lehet telepíteni:
Tehát nyissuk meg a fent említett mappát, majd a VirtualEarth.gadget mappában írjuk felül a régi fájlokat az újakkal. Látható, hogy két oldalt fehér csík van az alkalmazásban, ezt nem nagyon tudjuk stíluslapokkal sem orvosolni, csak ha alkalmazunk egy 1×1 pixeles átlátszó képet, és azt csempézzük végig az egész felületen. Az a baj, hogy a sidebar nem engedi, hogy normális .html háttérként állítsuk be biztonsági okokból, egy speciális
Ha most kipróbáljuk az alkalmazást, akkor látható, hogy eltűntek a csíkok. A felületünk készen van, viszont még mindig nem csinál semmi sem az alkalmazás, ezért térjünk át a Flyout.html fájlunkra. Itt nem sok mindenre lesz szükségünk, összesen csak egy div-re, amelyet a Virtual Earth objektum felhasználhat, és megjelenítheti rajta keresztül a térképünket. Hozzuk is létre, az azonosítója MyMap legyen. Stíluslapokkal formázzuk 500×315 pixeles méretűre:
Egyelőre az a baj, hogy nem tudjuk a flyout állapotot aktivizálni, és még térképünk sincs, csak egy üres div-ünk. Orvosoljuk a problémát, kezdjük el megírni az alkalmazás logikáját. Mielőtt a JavaScript kódot írnánk meg, hivatkozzunk mindkét .html fájlunkban a szkriptre. Vegyük elő a JavaScript fájlunkat, és hozzunk lére egy Init nevű metódust, amely majd betölti a Flyout.html-t, amikor szükség van rá.
A System.Gadget a Sidebar számára értelmezhető, különböző rendszer és gadgetkezelési funkciókat érhetünk el rajta keresztül. Azonban nincs még beállítva, hogy mikor aktiválódjon a flyout üzemmód. Hozzunk létre egy Click metódust, amivel feliratkozunk, majd a Keres gomb Click eseményére. Szükség van továbbá egy másik metódusra, amely a Bezárás gomb eseménykezelője lesz, és akkor fut le, ha a felhasználó be szeretné csukni a flyout ablakot.
A VirtualEarth.html-t is meg kell változatnunk, hogy betöltődés után automatikusan meghívja az Init eljárást, illetve a gombokon való kattintás hatására lefussanak a Click és Close eljárások is.
Ezután próbáljuk ki az alkalmazásunkat, a flyout működni fog, de egyelőre nem jelenít meg semmi sem. Ahhoz, hogy létrejöjjön a térképünk, szükségünk lesz arra, hogy a VE SDK-ban átváltsunk Source Code nézetre és a fejléc állományból átmásoljuk a szkript hivatkozást mind két saját .html állományunkba. Ügyeljünk arra, hogy a saját szkriptünk hivatkozása elé kerüljön!
A továbbiakban már változókat is deklarálnunk kell az alkalmazásunkban, amelyek az állapotát mentik el, és tárolják a VE kapcsolathoz szükséges objektumot. Miután ezeket felvettük, szükség lesz egy CreateMap metódusra, amely majd akkor fog meghívódni, amikor a flyout üzemmód aktiválódik.
A g_Map tárolja a VE objektumát, a g_Timer a későbbiekben segíteni fog, amikor bizonyos időközönként frissíteni akarjuk az alkalmazást, a g_Location pedig tárolókból fogja visszatölteni az utoljára felkeresett helység nevét. Próbáljuk ki az alkalmazást, most már szebb látványt nyújt, de még mindig nem az igazi, mivel nem azt a földrészt mutatja, ami a szövegdobozban van. Írjuk át!
Hoppá, most egy kicsit sok változtatás történt, elkezdem megmagyarázni, mi micsoda. Először is fontos tudni, hogy a gadgeteknek lehetőségük van kulcs-érték párosokat elmenteni, a kulcs maximálisan 1024, az érték 2048 karakteres lehet. Ezek segítségével kimenthetjük a gadget állapotát, és az onnan tudja folytatni a dolgát, ahol abbahagyta mondjuk egy újraindítás vagy gépkikapcsolás előtt. Változtattunk a Click metóduson is. Lekértük a SearchBox tartalmát és megnéztük, hogy van-e valami beírva (ha nincs, akkor termináljuk az eljárás végrehajtását), ha van, akkor elmentjük a Location kulcsra hivatkozva, majd megjelenítjük a flyout ablakot. Ekkor lefut a CreateMap a Flyout.html betöltődésével együtt, és kiolvassa a Location kulcshoz tartozó értéket, majd ezt a helyet keresi ki a térképen. Viszont van egy kis baj. Ezután hiába kattintunk a keresés gombra, nem fog keresni. Be kell állítanunk a CreateMap eljárást, hogy automatikusan frissítse magát bizonyos időközönként. Ezt legkönnyebben rekurzív eljáráshívással oldhatjuk meg (aki legalább a matematikában jártas, az tudja mit jelent a rekurzió, ha valaki még nem hallotta, jobb, ha el is felejti, csúnya szó :)).
Megnézzük null-e a g_Timer értéke, ha igen, az azt jelenti, hogy még nem futott le a metódus, tehát létre kell hoznunk a térképet. Fél másodpercenként leelenőrízzük, hogy volt-e újabb keresés. Majdnem kész is van az alkalmazásunk, próbáljuk ki! Igen, viszont újabb probléma adódott, bármerre navigálunk a térképen fél másodperc múlva visszaugrik a keresőben megadott helyre. Ott van viszont a jó öreg g_Location változónk, használjuk fel.
Néhány egyszerű változtatással ki is javítottuk a hibát. Ha a g_Location és a frissen lekérdezett érték nem egyenlő, csak akkor keresünk.
Remélem, hogy a leírás hasznosnak bizonyult, ha bármi probléma akad, akkor nyugodtan meg lehet keresni a gregory.attila.far [at] hotmail [dot] com címen. Mindenkinek jó tanulást kívánok!
