A sorozat első részében bemutattam, hogy miért is jó Windows 10-re fejleszteni alkalmazásokat. Most belevágunk a gyakorlati részébe, megmutatom, hogy hogyan is hozhatunk létre ilyen alkalmazásokat Visual Studio segítségével, és hogy milyen elemekből áll a projekt.

Szükséges eszközök

Visual Studio 2015 Community – a Microsoft ingyenes fejlesztőeszköze egyéni fejlesztők számára. Ez a verzió mindenre képes, amire szükségünk van, de természetesen, ha rendelkezel Professional vagy Enterprise licenccel, az is nyugodtan használható.

Megjegyzés: én Visual Studio Professionalt használok, de az itt bemutatott dolgok, mind megtalálhatóak a Community változatban is.

Projekt létrehozása

File -> New -> Project… -> Visual C# -> Windows -> Universal -> Blank App (Universal Windows)

A jobb oldalt található „Show telemetry in the Windows Dev Center” feliratú jelölőnégyzetet most így hagyjuk, később bármikor hozzáadhatjuk a projetkünkhöz. Amennyiben hozzáadjuk a projekthez, miután kipublikáltuk az alkalmazásunkat az Áruházba, különböző statisztikákat láthatunk arról, hogy felhasználóink eszközein egy-egy oldal milyen gyorsan töltődik be, jelentéseket kapunk a különböző hibákról, kivételekről, amelyek használat során jelentkeztek, stb. A sorozat egy későbbi részében fogok részletesen írni erről.

Az alkalmazást PhotoAlbumnak nevezem el, a sorozat végére egy fényképeket kezelő alkalmazást fogunk létrehozni, amely a legnépszerűbb minták alapján lesz megírva, mint pl. az MVVM, Repository Pattern, Dependency Injection stb. Bele fogjuk integrálni Cortana-t, kapni fog élő csempéket, lesz egy Cloud Backendje Azure-ben, illetve sok más hasznos példát fogtok látni. A projekt egyébként elérhető a GitHub repository-mban.

Projekt struktúra

Properties – projektünk általános információit tudjuk itt megadni, pl. verziószámot, projekt nevét, illetve konfigurációs fájlokat menthetünk ebbe a mappába stb.

References – a projekt által használt külső könyvtárak kerülnek ide

Assets – ebben a mappában vannak a különböző erőforrás fájlok, pl. képek, hangok

App.xaml és App.xaml.cs – az alkalmazás belépési pontja, ez lesz a gyökérkeret, benne fognak megjelenni a program oldalai; az Application nevű osztályból származik. Az App.xaml fájlban erőforrásokat tudunk létrehozni – stílusok, sablonok, kulcs-érték párok stb. -, és ezek globálisak lesznek, minden oldal el tudja érni őket. Minden .xaml fájlhoz tartozik egy .xaml.cs fájl, ez az úgynevezett code behindja, azaz mögöttes kódja. A code behind konstruktorában fontos, hogy meghívjuk az InitializeComponent nevű metódust, mivel ez fogja a XAML-ből létrejövő C#-kódot hozzászerkeszteni a mögöttes kódhoz.

Az App.xaml.cs-ben tudjuk beállítani például azt, hogy az alkalmazás indulásakor melyik oldalra navigáljunk. A képen látható, hogy ha még nem tartalmaz semmit a gyökérkeret, akkor odanavigálunk a MainPage nevű oldalra. Emellett itt tudjuk megadni, hogy mi történjen, amikor az alkalmazásunk felfüggesztett állapotban van, illetve, hogy hogyan kezelje, ha nem sikerült a navigáció.

MainPage.xaml és MainPage.xaml.cs – a programunk egy oldala, a Page nevű osztályból származik. Jelen pillanatban ez az egyetlen oldalunk, tehát ez a fő oldal is egyben. A XAML egy leíró nyelv, melyben erőforrásokat hozhatunk létre, illetve ebben építjük a felhasználói felületet (UI) is. Megadhatjuk, hogy milyen grafikus elemek, hol, hogyan jelenjenek meg, és milyen mögöttes adatot jelenítsenek meg. Bővebben a következő blogbejegyzésemben fogok erről írni. Az App.xaml annyiban kivétel ez alól, hogy abban csak erőforrások hozhatók létre, grafikus komponensek nem.

Package.appmanifest – az alkalmazásunk Áruházba való publikálásához szükséges információkat kell itt megadnunk, mint pl. az alkalmazásunk melyik ikont használja az Áruházban, mi legyen a Splash screen, milyen forgatási módokat támogasson, milyen funkciókhoz és eszközökhöz férjen hozzá (pl. mikrofon, giroszkóp, gps stb.), a közzétevő nevét, verziószámot és még sok más dolgot.

{Projektnév}_TemporaryKey.pfx – az alkalmazásunkhoz tartozó kulcs, hogy futtatni tudjuk

project.json – az úgynevezett NuGet csomagkezelő rendszer használja ezt a fájlt, ebben tárolja a projekthez felhasznált referenciákat, azaz a külső könyvtárakat, illetve azok verzióit. Ezen kívül ebben a fájlban adhatjuk meg, hogy milyen keretrendszert célzunk meg alkalmazásunkkal (Universal Windows Platform, Xamarin, Windows 8.1 stb.), illetve, hogy milyen futtatókörnyezetekben fog futni (arm, x86, x64).

Hello, World!

Ahhoz, hogy megírjuk első Hello, World! alkalmazásunkat, nyissuk meg a MainPage.xaml fájlt. Ekkor két ablak fog megnyílni. Egyik a designer, a másik pedig a XAML kód. Itt két lehetőségünk van a felhasználói felület szerkesztéséhez. Vagy a Toolbox-ból helyezzük le egérrel a felületre a komponenseket, vagy pedig kódban írjuk meg ezeket. Én az utóbbit preferálom sok esetben, de sokszor a designer felület gyorsabb megoldás.

A designer bal felső sarkában ki tudjuk választani, hogy mekkora méretű és felbontású képernyőre szeretnénk fejleszteni, ennek megfelelő nagyságú oldalt fogunk látni a designer felületen. Mellette kiválaszthatjuk, hogy álló vagy fekvő módban legyen-e a képernyő.

Az oldalaknak érdemes megadni, hogy az elemek milyen elrendezés (Layout) szerint legyenek elhelyezve. Alapból egy Grid Layout van az oldal gyökeréhez hozzáadva, ezt szabadon megváltoztathatjuk. A Layoutok egymásba is ágyazhatók, tehát például a Gridünk egy cellájába egy újabb Gridet illeszthetünk be.

A Visual Studio által generált Gridnek alapból egyetlen cellája van, tehát az egész oldal egy cella. A Hello, World! alkalmazásunkhoz ez pont elég. Vegyünk egy TextBlockot a Toolboxból, húzzuk az oldalon a kívánt helyre, és illesztjük oda, vagy pedig adjuk hozzá a XAML kódban, a Grid kezdő és záró tagje közé a következő sort:

<TextBlock Text="Hello, World!" HorizontalAlignment="Center" VerticalAlignment="Center" />

A Text attribútum értelemszerűen a megjelenített szöveget tartalmazza, a HorizontalAligment pedig a cellában való vízszintes, a VerticalAlignment pedig a függőleges elhelyezkedést határozza meg.

A menüsor alatt található Local Machine feliratú gombra kattintva tudjuk megnézni működés közben számítógépünkön alkalmazásunkat. Próbáljuk ki!

Az alkalmazás bal felső sarkában megjelent két szám rendre az alkalmazás UI szálának másodpercenkénti képkockái (FPS) és az UI szálának processzorhasználata. Továbbá, a képernyőnk jobb felső sarkában is megjelent két szám, ezek ugyanezeket jelentik, de nem a UI szálat, hanem az úgynevezett Composition Threadet, ezen a szálon futnak az animációk és a komplex layout átrendeződések az egyenletesebb működés érdekében. Az App.xaml.cs-ben tudjuk ezeket kikapcsolni, amennyiben nincs rá szükségünk (de miért ne lenne?).

A következő részben beleássuk magunkat a XAML rejtelmeibe, az elérhető grafikai komponensekbe, ezek tulajdonságaiba, a különböző elrendezésekbe, valamint bemutatok egy másik eszközt a designoláshoz.

Nincsenek hozzászólások