2015 a Windows 10 éve volt. Aki rendelkezett a megfelelő Windows 7 vagy Windows 8.1 verzióval, az ingyen frissíthetett a legújabb operációs rendszerre. Visszakerültek a Windows 8-ból hiányolt elemek, mint pl. a Start menü, megtartva a csempés dizájnt. Kaptunk egy segédet is magunk mellé, Cortana „személyében”, aki a legjobb tudása szerint próbálja megkönnyíteni munkánkat, legfeljebb továbbadja kérésünket a Bingnek.

Fejlesztőként viszont talán nem is ezek a legfontosabb újítások számunkra. A Windows 8-ban megismert Áruház alkalmazásokat vitték még magasabb szintre. Ott, ha szerettünk volna egy alkalmazást megírni PC-re és telefonra is, két külön alkalmazást kellett írnunk, nem tartalmazta mindkét platform ugyanazokat az API-kat. Noha a kódunk nagy részét meg tudtuk osztani a két alkalmazás között, ha megfelelően elkülönítettük az alkalmazásunk egyes részeit egymástól, sajnos külön Áruháza volt mindkét platformnak. A Windows 10 megjelenésével véget vetettek ennek, létrehozták az Universal Windows Platformot, azaz az UWP-t.

Mi is ez pontosan?

Az UWP a Windows 10 egységesített magja. Ez azt jelenti, hogy minden olyan eszköz, amelyen a legújabb operációs rendszer fut, futtatni tudja erre a platformra írt alkalmazásokat. Egy közös Áruház van, ahonnan minden eszköz el tudja érni az alkalmazásokat, kivétel a Windows 10 IoT Core, amelyen nem elérhető az Áruház. Egyelőre Xboxon sem elérhető, viszont a napokban jött a hír, hogy a hónap végén megrendezésre kerülő Build konferencián fogják bemutatni az Xboxon futó univerzális alkalmazásokat. Persze az új HoloLensel is kompatibilisek ezek az alkalmazások.

Gondoljunk bele, miért is jó ez nekünk, fejlesztőknek? A válasz nagyon egyszerű, egyetlen egy kódbázist kell megírnunk, tesztelnünk, karbantartanunk, majd pedig közzé tennünk, még akkor is, ha több eszközcsaládra fejlesztünk egy alkalmazást. Nyilvánvalóan egy PC-ben pl. nincs giroszkóp, ezért nem tudunk minden esetben olyan alkalmazást írni, amelyben nincsenek eszközspecifikus részek. Emellett fel kell készítenünk a különböző képernyőméretekre is, ha a lehető legjobb felhasználói élményt szeretnénk elérni.

Tehát ugyanaz az alkalmazás fog települni a telefonunkra és az asztali számítógépünkre, ez azt is jelenti, hogy nagyon egyszerűen tudnak egymással szinkronizálni. Például az asztali számítógép Edge böngészőjében felveszünk egy weboldalt a könyvjelzőink közé, akkor a telefonunkon levő böngészőben is meg fog jelenni az a könyvjelző. Akár valós időben is tudnak kommunikálni egymással különböző platformokon futó alkalmazások. Például egyszerre tudjuk ugyanazt a játékot játszani Xboxról és PC-ről.

A felhasználói felület

Egy jól megírt alkalmazásban a felhasználói felületen elhelyezett elemek alkalmazkodnak az adott eszköz képernyőjének méretéhez és felbontásához, angolul Responsive UI-nak hívják ezt a tulajdonságot.

Tehát, ha érzékeli az alkalmazásunk, hogy a képernyőméret átlépett egy adott értéket, akkor automatikusan átrendezi az elrendezést. Egyes elemeket felnagyít, eltűntet, a képernyő felső sarkából az alsó sarkába helyez, stb. Ez mind attól függ, hogy hogyan írtuk meg ezeket az eseményeket. Különböző panelek állnak rendelkezésünkre eme tulajdonság elérése érdekében.

Ami nagyon fontos design szempontból, hogy a különböző elemek méreteit, úgynevezett effektív pixelekben tudjuk megadni. A motiváció e mögött az, hogy egy-egy ilyen pixel különböző nagyságú a különböző méretű képernyőkön. Tehát, ha megadjuk, hogy egy gomb mérete 20x20-as legyen, az nem azt jelenti, hogy az pl. 20 mm x 20 mm nagyságú lesz, hanem egy kisebb képernyőn kisebb, nagyobbon pedig nagyobb. Ez azt a hatást kelti, mintha ugyanakkora lenne az a gomb minden képernyőn, mivel nem ugyanabból a távolságból nézzük a más-más nagyságú eszközeinket.

Az effektív pixeleket a rendszer 4-el osztja vagy szorozza átméretezéskor. Emiatt az ajánlás, hogy minden méret 4-gyel osztható legyen, mert különben nem lesznek élesek az elemeink.

A következő bejegyzésben megnézzük, hogy hogyan is hozhatunk létre Visual Studioban egy ilyen alkalmazást, bemutatom a projekt struktúráját, azt, hogy hogyan építhetjük a felhasználói felületet, és az emögött lévő kódot.

Nincsenek hozzászólások