Eseményvezérelt alkalmazások fejlesztése II 10. előadás. Window Runtime alapismeretek. Windows Runtime alapismeretek A Windows Runtime



Hasonló dokumentumok
Eseményvezérelt alkalmazások fejlesztése II 10. előadás. Window Runtime alapismeretek, Modern UI alapú alkalmazások.

Eseményvezérelt alkalmazások fejlesztése II 9. előadás. Window Runtime alapismeretek, Modern UI alapú alkalmazások

Eseményvezérelt alkalmazások fejlesztése II 8. előadás. Összetett WPF alkalmazások. Giachetta Roberto. Eötvös Loránd Tudományegyetem Informatikai Kar

Előszó A Windows alkalmazásfejlesztés rövid története A Windows életútja A Windows 8 paradigmaváltása... 16

Eseményvezérelt alkalmazások fejlesztése II 5. előadás. Windows Forms alkalmazások párhuzamosítása. Giachetta Roberto

Grafikus felhasználói felületek. Dr. Szendrei Rudolf Informatikai Kar Eötvös Loránd Tudományegyetem. Programozási technológia I. Dr.

Két csomag elemeiből lehet a felületet elkészíteni: awt: heavy weight komponensek; swing: light weight komponensek (időben később).

2. Beadandó feladat dokumentáció

Programozási technológia

Bánsághi Anna 2015 Bánsághi Anna 1 of 31

2. Beadandó feladat dokumentáció

Ugráló gomb oktatási segédlet Ugráló gomb

3. Beadandó feladat dokumentáció

Tartalomjegyzék. Előszó... 10

Webes alkalmazások fejlesztése Bevezetés. Célkitűzés, tematika, követelmények. A.NET Core keretrendszer

A szerzõrõl... xi Bevezetés... xiii

Webes alkalmazások fejlesztése Bevezetés. Célkitűzés, tematika, követelmények. A.NET Core keretrendszer

2. Beadandó feladat dokumentáció

Operációs rendszerek. Az X Window rendszer

Eseményvezérelt alkalmazások fejlesztése II 5. előadás. Windows Forms alkalmazások párhuzamosítása. Cserép Máté

Operációs rendszerek. Tanmenet

Eseményvezérelt alkalmazások

ESEMÉNY VEZÉRELT ALKALMAZÁSOK FEJLESZTÉSE I. Bevezetés. Készítette: Gregorics Tibor

Java Programozás 11. Ea: MVC modell

Tartalomjegyzék. Előszó... xiii Bevezetés... xv. 1. Ismerkedés a Windows 7-tel Integráció a Windows 7 tálcájával: az alapszolgáltatások...

Johanyák Zsolt Csaba: Ugráló gomb oktatási segédlet Copyright 2008 Johanyák Zsolt Csaba

Eseményvezérelt alkalmazások fejlesztése II 9. előadás. WPF erőforrások kezelése. Giachetta Roberto. Eötvös Loránd Tudományegyetem Informatikai Kar

3. Beadandó feladat dokumentáció

A Canvas LMS új és régi felülete közti különbségek

Win 8 változatok. 2. sz. melléklet felnottkepzes@gmail.com. Töltse ki az előzetes tudásszint felmérő dolgozatot!

Eseményvezérelt alkalmazások fejlesztése II 10. előadás. Xamarin alapismeretek. Xamarin alapismeretek. Xamarin alapismeretek. Xamarin alapismeretek

Programozási környezetek

// keressük meg a legnagyobb faktoriális értéket, ami kisebb, // mint százmillió

Operációs rendszerek. Tanmenet

Image Processor BarCode Service. Felhasználói és üzemeltetői kézikönyv

Vizuális és eseményvezérelt programozás , II. félév BMF NIK

Eseményvezérelt alkalmazások fejlesztése I 11. előadás. Szoftverek tesztelése

CareLink Personal telepítési útmutató. Első lépések a CareLink Personal adatfeltöltéshez

A Microsoft Visual Studio 2005 fejlesztőkörnyezet

Az ErdaGIS térinformatikai keretrendszer

Szoftver labor III. Tematika. Gyakorlatok. Dr. Csébfalvi Balázs

Java Programozás 4. Gy: Java GUI. Tipper, MVC kalkulátor

13. Tárgymutató. Windows XP alapokon

Grafikus felhasználói felület (GUI) létrehozása A GUI jelentése Egy egyszerű GUI mintaalkalmazás létrehozása

Eseményvezérelt és objektumorientált programozás

Számítógépes alapismeretek 2.

Swing GUI készítése NetBeans IDE segítségével

Eseményvezérelt alkalmazások fejlesztése II 11. előadás. Window Runtime specifikus alkalmazások megvalósítása. Giachetta Roberto

Programozási technológia

Alkalmazások fejlesztése A D O K U M E N T Á C I Ó F E L É P Í T É S E

libgdx alapok, első alkalmazás

Eseményvezérelt alkalmazások fejlesztése I 8. előadás. Adatbázis-kezelés modell/nézet architektúrában

components : IContainer dx : int dy : int tmidőzítő : Timer toolstripseparator1 : ToolStripSeparator tsmikilépés : ToolStripMenuItem

3. Beadandó feladat dokumentáció

CitiDirect BE SM Felhasználói útmutató

2. modul - Operációs rendszerek

Elemi alkalmazások fejlesztése I.

Crossplatform mobil fejlesztőkörnyezet kiválasztását támogató kutatás

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté.

GráfRajz fejlesztői dokumentáció

Programozás BMEKOKAA146. Dr. Bécsi Tamás 8. előadás

2. Beadandó feladat dokumentáció

A L i n u x r u h á j a

Gyakran Ismételt Kérdések (GYIK) az Eee Pad TF201 modellhez

Eseményvezérelt alkalmazások fejlesztése II 12. előadás. Objektumrelációs adatkezelés (ADO.NET) Giachetta Roberto

WCF, Entity Framework, ASP.NET, WPF 1. WCF service-t (adatbázissal Entity Framework) 2. ASP.NET kliens 3. WPF kliens

Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET)

1. Beadandó feladat dokumentáció

Webes alkalmazások fejlesztése 12. fejezet. Szolgáltatás alapú kommunikáció (WCF) Giachetta Roberto. Eötvös Loránd Tudományegyetem Informatikai Kar

Az osztályok csomagokba vannak rendezve, minden csomag tetszőleges. Könyvtárhierarhiát fed: Pl.: java/util/scanner.java

HUG7211 Gyakran Ismételt Kérdések (GYIK) az Transformer TF201 modellhez

Webes alkalmazások fejlesztése 7. előadás. Autentikáció és autorizáció (ASP.NET Core) Cserép Máté

Eseményvezérelt alkalmazások fejlesztése I 10. előadás. Adatbázis-kezelés modell/nézet architektúrában. Giachetta Roberto

Alap számológép alkalmazás

A gyakorlat során az alábbi ábrán látható négy entitáshoz kapcsolódó adatbevitelt fogjuk megoldani.

A dokumentáció felépítése

Mobil Partner telepítési és használati útmutató

BME MOGI Gépészeti informatika 7.

Mobil operációs rendszerek. Készítette: Kisantal Tibor

Mobil Telefonon Keresztüli Felügyelet Felhasználói Kézikönyv

A Java nyelv. Dialógus ablakok. Elek Tibor

Szakdolgozati, TDK témajavaslatok

Microsoft SQL Server telepítése

hardver-szoftver integrált rendszer, amely Xwindow alapú terminálokat szervez egy hálózatba

Sygic: Voucher Edition for Android telepítése

Web-fejlesztés NGM_IN002_1

Felhasználói kézikönyv. Verzió: 1.01

Operációs rendszerek. Tanmenet

Java programozási nyelv 6. rész Java a gyakorlatban

Mobil készülékek programozása

TERC V.I.P. hardverkulcs regisztráció

Informatika témavázlat. 3. évfolyam

CIB Internet Bank asztali alkalmazás Hasznos tippek a telepítéshez és a használathoz Windows operációs rendszer esetén

Vodafone-os beállítások Android operációs rendszer esetében

BME MOGI Gépészeti informatika 6.

Madarassy László, mérnök, BME - Mobil Innovációs Központ. lmadarassy@mik.bme.hu

eszemélyi Kliens Szoftvercsomag

WIFI elérés beállítása Windows 7 Felhasználó azonosítással

A TERC VIP költségvetés-készítő program telepítése, Interneten keresztül, manuálisan

Webes alkalmazások fejlesztése 10. előadás. Webszolgáltatások tesztelése (ASP.NET Core) Cserép Máté

Átírás:

Eötvös Loránd Tudományegyetem Informatikai Kar Eseményvezérelt alkalmazások fejlesztése II 10. előadás Window Runtime alapismeretek 2015 Giachetta Roberto groberto@inf.elte.hu http://people.inf.elte.hu/groberto A Windows Runtime A Windows Runtime (WinRT) a Windows 8 rendszerek fejlesztői platformja alapja a.net keretrendszer, de attól független egységes, felügyeletmentes API-t biztosít, amely különböző nyelveken (C#, C++, JavaScript) keresztül is elérhető kimondottan nagy hangsúlyt helyez a hatékonyságra és a biztonságra mobiltelefonokra szánt változata a Windows Phone Runtime Az egyes platformok (WinRT,.NET, Silverlight, XBox) között megoszthatóak programegységek a Portable Class Library (PCL) segítségével ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:2 Alkalmazások mobil környezetben A mobil/táblagépes környezetben alkalmazásunknak számos olyan követelményt kell teljesíteni, amit az asztali alkalmazásnak nem fontos az adaptivitás: az alkalmazás különböző hardvereken, különböző méretű/felbontású képernyőkön, különböző tájolással (portré/tájkép), különböző üzemmódokban (teljes képernyő, oldalra zárt, ) futhat fontos a beviteli gesztusok kezelése elérhetőek speciális hardverek (GPS, gyorsulásmérő, ) Alkalmazások grafikus felülete Az alkalmazások grafikus felülete a Modern UI (korábban Metro UI) tervezési koncepció segítségével valósul meg infografikus, célja a minimalizmus, a letisztultság, a kezelhetőség növelése (kisebb méretű kijelzőkön is) az alkalmazás futtatása legyen gyors és folyamatos (aszinkron végrehajtása a tevékenységeknek) egy meghatározott tervezési vonalat, és annak sajátosságait (pl. Segoe UI betűtípus) kell követni nélkülözi a bonyolult grafikákat, animációkat az ikonokat felváltja csempékkel, amelyek tartalma dinamikus is lehet ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:3 ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:4 Alkalmazások futtatása Az alkalmazások egy biztonságos környezetben futnak nem férhetnek hozzá más alkalmazások adataihoz csak korlátozott módon férhetnek hozzá a rendszer adataihoz (pl. fájlrendszer), és azt is csak engedéllyel szintén engedéllyel használhatják csak az eszközöket A mobil alkalmazások más életciklusban futnak, mint az asztali alkalmazások a futás és a terminált állapotok mellett megjelenik a felfüggesztett állapot is, amely akkor lép életbe, ha az alkalmazás a háttérbe (vagy a gép alvó állapotba) kerül Alkalmazások futtatása a felfüggesztés célja az erőforrásokkal való takarékosság a terminálást az operációs rendszer felügyeli, ezt a felhasználó, illetve a programozó nem befolyásolhatja az alkalmazás nem kap figyelmezetést a bezárásról aktiválás leállítva futás alatt folytatás leállítás felfüggesztés felfüggesztve ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:5 ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:6 1

Alkalmazások felépítése Az alkalmazások (projektek) elemei: szabványos kódfájlok, illetve grafikus felület erőforrás gyűjtemények (Resource Dictionary), illetve más erőforrások (pl. csempe és nyitó képernyő grafikák) egyedi azonosító fájl (Personal Information Exchange file) alkalmazás azonosító (Application Manifest), amely tartalmazza a szükséges engedélyeket (ezeket a felhasználó telepítéskor hagyja jóvá) Az alkalmazás (és a hozzá tartozó tartalom) egy csomagot alkot (appx), amely publikálható a Windows Áruházban A grafikus felület felépítése A grafikus felület oldalakból (Page) áll felépítése hasonló az ablakokéhoz, de mindig kitölti a rendelkezésére álló teret, a mérete előre nem meghatározható, ezért elrendezéseket (Grid, Canvas, StackPanel, ), transzformációkat (Viewbox) kell alkalmazni az oldal figyelhet az elhelyezésre is az elemek megjelenítéséhez adott egy stíluskészlet (amelyet a ThemeResource hivatkozással érhetünk el) lehet előugró üzenetek (MessageDialog), illetve speciális funkciójú oldalakat (FileOpenPicker, ) használni ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:7 ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:8 Az alkalmazás vezérlése A programot az alkalmazás (App) vezérli, amely egyesíti az erőforrásokat az alkalmazás aktiválásakor (OnLaunched) végezzük az inicializálást adatmentést végezhetünk felfüggesztéskor (Suspending), megjelenítés frissítést aktiváláskor (Resuming) az oldalakat keretbe helyezzük (Frame), amely szabályozza az oldalak közötti átmenetet (Navigate(), GoBack(), GoForward()), ehhez tárolja az eddig megnyitott ablakokat a keretet helyezzük az aktuális ablakba (Window.Current), majd ezt aktiváljuk (Activate()) Feladat: Készítsünk egy egyszerű számológépet, amellyel a négy alapműveletet végezhetjük el, illetve láthatjuk korábbi műveleteinket is. az alkalmazást modell/nézet architektúrában valósítjuk meg, a korábban készített modell (CalculatorModel) újra felhasználjuk a képernyőn (MainPage) felvesszük a megfelelő vezérlőket, amelyek stílusok segítségével egyedire szabunk eseménykezelővel végrehajtjuk a tevékenységeket, előugró dialógussal (MessageDialog) figyelmeztetünk a hibás bemenetre ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:9 ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:10 Megvalósítás (MainPage.xaml): <Page > <Page.Resources> <!-- új stílusokat adunk meg a vezérlőkre --> <Style x:key="functionbuttonstyle" TargetType="Button"></Style> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush"> <!-- felhelyezzük a vezérlőket a rácsra --> </Grid> </Page> ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:11 ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:12 2

Megvalósítás (MainPage.xaml.cs): private void MainPage_Loaded() { // akkor példányosítunk mindent, amikor az // oldal betöltött _model = new CalculatorModel(); _model.calculationperformed += // modell eseményének társítása _textnumber.text = _model.result.tostring(); _textnumber.focus(focusstate.keyboard); _textnumber.selectall(); Az MVVM architektúra Alkalmazásainkat megvalósíthatjuk MVVM architektúrában is, a következő tényezők figyelembe vételével a nézetmodell és a modell a megszokott módon kezelhető a környezetben (pl. alkalmazás osztályban), a nézetmodellt a keret adatforrásaként kell megadni (Frame.DataContext) a parancsok (ICommand) kiválthatóságát manuálisan kell kezelni, mivel nem elérhető a parancskezelő (CommandManager) speciális parancsok (pl. billentyűzetkezelés) nem használhatóak (ugyanakkor használatok nem is célszerű a mobil környezetben) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:13 ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:14 Feladat: Készítsünk egy egyszerű számológépet, amellyel a négy alapműveletet végezhetjük el, illetve láthatjuk korábbi műveleteinket is. annak érdekében, hogy táblagépen is könnyen használható legyen a felületen gombokat helyezünk el a bevitelhez (számok, tizedespont és törlés), így nem kell billentyűzetet használnunk az alkalmazást MVVM architektúrában építjük fel, a korábban készített modellt (CalculatorModel) és a nézetmodellt (CalculatorViewModel) újra felhasználjuk a modellt kiegészítjük a törlés funkciójával, a nézetmodellt kiegészítjük az új gombok tevékenységeivel ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:15 ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:16 Megvalósítás (CalculatorViewModel.cs): private void Calculate(String operatorstring){ switch (operatorstring) { // művelet végrehajtása, amely most már // számjegy, tizedesjel és törlés is lehet case "C": // törlés _model.clear(); NumberFieldValue = "0"; break; Megvalósítás (CalculatorViewModel.cs): default: if (_numberfieldvalue == "0" && operatorstring!= DecimalSeparator) // 0 esetén lecseréljük a tartalmat // (kivéve, ha tizedesjel jön), // egyébként hozzáírjuk _numberfieldvalue = operatorstring; else // minden más esetben csak hozzáírjuk _numberfieldvalue += operatorstring; OnPropertyChanged("NumberFieldValue"); break; ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:17 ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:18 3

Megvalósítás (App.xaml.cs): protected override void OnLaunched( LaunchActivatedEventArgs args) { _viewmodel.erroroccured += new EventHandler<ErrorMessageEventArgs>( ViewModel_ErrorOccured); private void ViewModel_ErrorOccured(object sender, ErrorMessageEventArgs e){ MessageDialog dialog = new MessageDialog(e.Message); dialog.showasync(); ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:19 Feladat: Készítsünk egy dinamikus méretezhető táblát, amely véletlenszerű színre állítja a kattintott gombot, valamint a vele egy sorban és oszlopban lévőket. MVVM architektúrát használunk, és a korábbi megoldásból felhasználjuk a nézetmodellt (ColorGridViewModel, ColorField) a nézetet ellátjuk oldalcímmel, és betartjuk az elhelyezési konvenciókat, továbbá csúszkákat (Slider) használunk az értékbeállításhoz (amelyet külön címkén is megjelenítünk) a rácsot ItemsControl segítségével helyezzük el, amelyben WrapGrid megjelenítőt használunk (mivel nincs UniformGrid vezérlő) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:20 Megvalósítás (MainPage.xaml): <ItemsControl ItemsSource="{Binding Fields"> <!-- elemek gyűjtő vezérlője --> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <!-- az elemek egy rácsban fognak elhelyezkedni, amelyet sorfolytonosan töltünk fel --> <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="{Binding ColumnCount" /> </ItemsPanelTemplate> ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:21 ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:22 Időzítés A felület szintű időzítő adott (DispatcherTimer), azonban a modell szintű időzítés (System.Timers.Timer) nem került be az osztálykönyvtárba a funkcionalitása kiváltható a ThreadPoolTimer típussal lehet periodikus, vagy egyszeri nem esemény alapú, konstruktorparaméterben megadható a futtatandó művelet a felhasználásával lehet készíteni saját időzítőt pl. timer = ThreadPoolTimer.CreatePeriodicTimer( Timeout, TimeSpan.FromMinutes(1)); // a Timeout függvényt hívja meg percenként ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:23 Szinkronizáció Amennyiben párhuzamosan végzünk tevékenységet, ügyelnünk kell a szinkronizációra (a felülettel) a felületi időzítő, illetve az aszinkron tevékenységek szinkronizáltak a szálbiztos végrehajtáshoz használnunk kell a Dispatcher.RunAsync(<tevékenység>) metódust, pl. CoreApplication.MainView.CoreWindow.Dispatcher. RunAsync(CoreDispatcherPriority.Normal, // a végrehajtás prioritását is megadjuk () => { // a tevékenység lambda-kifejezése textbox.text = "Hello World!"; )) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:24 4

Feladat: Készítsünk egy vizsgatétel generáló alkalmazást, amely ügyel arra, hogy a vizsgázók közül ketten ne kapják ugyanazt a tételt. használjunk MVVM architektúrát, és a korábbi megvalósítást a modellt (ExamGeneratorModel) nem kell módosítanunk, de ki kell egészítenünk egy időzítő (Timer) típussal a nézetmodellben (ExamGeneratorViewModel) szinkronizáltan kell lekezelnünk az időzítő párhuzamos eseményeit a nézet két lapot is tartalmaz (MainPage, SettingsPage), amelyek között navigálunk ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:25 ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:26 Megvalósítás (App.xaml.cs): private void ViewModel_OpenSettings(object sender, EventArgs e) { Frame rootframe = Window.Current.Content as Frame; if (rootframe.cangoforward) // ha már egyszer // átnavigáltunk a beállítások oldalra rootframe.goforward(); // akkor ismét elnavigálhatunk oda else rootframe.navigate(typeof(settingspage)); // különben felvesszük, mint új oldalt Megvalósítás (ExamGeneratorViewModel.cs): private async void Model_NumberGenerated( object sender, EventArgs e) { // szinkron műveletben megvárhatjuk az // szinkron végrehajtás végét await CoreApplication.MainView. CoreWindow.Dispatcher. RunAsync(CoreDispatcherPriority.Normal, () => OnPropertyChanged( "QuestionNumber")); // szinkronizált végrehajtás ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:27 ELTE IK, Eseményvezérelt alkalmazások fejlesztése II 10:28 5