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

Xamarin alapismeretek A Xamarin platform

Eötvös Loránd Tudományegyetem Informatikai Kar

• A Xamarin egy többplatformos szoftverfejlesztői környezet, amely lehetőséget ad Android, iOS, Windows Phone (8+) és Windows (8+) alkalmazások fejlesztésére a .NET keretrendszerre alapozva

Eseményvezérelt alkalmazások fejlesztése II

• lehetőséget ad közös kódbázissal rendelkező alkalmazások fejlesztésére, amelyeket natív alkalmazásokká (Objective-C, Java, …) fordít át

10. előadás

• a Xamarin.Forms csomag az architektúrát (MVVM) és a grafikus felületet is egységesíti

Xamarin alapismeretek

• alapja a Mono, amely a .NET keretrendszer alternatív megvalósítása Linux és MacOS rendszerekre

Giachetta Roberto

• a programcsomagok NuGet segítségével kezelhetők és frissíthetők

[email protected] http://people.inf.elte.hu/groberto

ELTE IK, Eseményvezérelt alkalmazások fejlesztése II



Alkalmazások felépítése Desktop alkalmazás C# kód (WinForms/WPF) Windows (Phone) alkalmazás C# kód (WinRT, UWP)

10:2

Xamarin.Forms alkalmazások felépítése

közös C# kódbázis (üzleti logika)

• Xamarin.Forms alkalmazások esetén a közös programegységek (osztálykönyvtárak) tartalmazzák

Portable Class Library

• a modellt, amely tartalmazza az üzleti logikát, szokványos eszközök segítségével felépítve

• a nézetmodellt, amelyet az alapvető eszközök segítségével tudunk felépíteni (ICommand, INotifyPropertyChange, …) Android C# kód (vezérlés, megjelenítés, perzisztencia)

• a nézetet, amely XAML alapon írunk le, és adatkötés (Binding) segítségével kapcsoljuk a nézetmodellhez

iOS C# kód (vezérlés, megjelenítés, perzisztencia)


• az alkalmazás vezérlését (App), amely meghatározza a közös viselkedést minden platformon

10:3


• a perzisztencia interfészét, a konkrét megvalósítás nélkül, amely platformonként eltérhet





• Az alkalmazások közös funkcionalitást Portable Class Library segítségével valósíthatjuk meg

• a közös programegységek is felruházhatóak platformspecifikus jellemzőkkel (Device)

Desktop alkalmazás C# kód (WinForms/WPF)

• A platformspecifikus programegységek (Android, iOS, Windows, WindowsPhone) tovább bővíthetik a közös funkcionalitást

• tartalmazza a perzisztencia megvalósítását, mivel az adattárolás módja platformonként eltér • tartalmazhatnak speciális nézetbeli elemeket, amelyek adott platformban érhetőek csak el, illetve lehetőséget a nézet adaptálására (pl. Material Design)


10:4

Android C# kód (perzisztencia, …) 10:5

közös C# kódbázis (üzleti logika)

Xamarin.Forms kódbázis (vezérlés, nézet, nézetmodell)

iOS C# kód (perzisztencia, …)


Portable Class Library Xamarin.Forms Portable Class Library

Windows C# kód (perzisztencia, …) 10:6

1



• Azt alkalmazások számára a közös belépési pontot az alkalmazás (Application) jelenti

• A Xamarin.Forms alkalmazások egy egységes grafikus felülettel rendelkeznek, amelyeket a platform egyedi vezérlőire fordít le a rendszer


Xamarin.Forms grafikus felület felépítése

• tartalmazza a nyitóképernyőt (MainPage), valamint az alkalmazás életciklus eseménykezelőit (OnStart, OnResume, OnSleep)

• kezeli az alkalmazás tulajdonságait (Properties), erőforrásait (Resources)

• a felület lapokból (Page) áll, amelyek különböző felépítéssel rendelkezhetnek • pl. egyszerű tartalom (ContentPage), többlapos (TabbedPage), húzható (CarouselPage), többnézetű (MasterDetailPage)

• Az alkalmazást minden platform egyedileg kezeli és tölti be, pl.:

• a lapoknak lehet címe (Title), háttere (BackgroundImage) és ikonja (Icon), valamint platformspecifikus eszköztára (ToolbarItems)

• Android platformon a főtevékenység (MainActivity) létrehozáskor (OnCreate)

• Windows platformon a főképernyő (MainPage) a konstruktor lefutásakor ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

• megjeleníthetnek üzeneteket (DisplayAlert), valamint választódialógust (DisplayActionSheet) 10:7


• a tartalmat elrendező (Layout) elemekkel igazíthatjuk el, pl. rács (Grid), vízszintes/függőleges lista (StackLayout), abszolút pozíciós (AbsoluteLayout), relatív pozíciós (RelativeLayout) • a tartalmat nézet (View) elemekből építhetjük fel, pl. Label, Button, DatePicker, Entry (egy soros szövegdoboz), Editor (több soros szövegdoboz), Picker (kiválasztó), TableView, Image, WebView

• a nézeten megjelenő betűk alapértelmezetten platformspecifikusak, és mértük is platformnak megfelelően szabályozható (Small, Medium, …)

• lehetőségünk van egyedileg formázott szöveg megjelenítésére (FormattedString) 10:9


• Pl.:

<StackLayout Orientation="Vertical"> <Button Clicked="Button_Clicked" Text="Go on…" HorizontalOptions="Center" Margin="10" />




• Az alkalmazások tulajdonságait, képességeit az alkalmazás leíró (application manifest) segítségével írhatjuk le

• Az alkalmazások rendelkezhetnek platformfüggetlen, és platformfüggő erőforrásokkal

Alkalmazás tulajdonságok és kiehlyezés

10:10

Alkalmazás erőforrások

• tartalmazza az alkalmazás nevét, leírását, verzióját és a fejlesztő adatait

• megadja az engedélyeket a rendszerhez, és más alkalmazásokhoz, pl. internet, kamera, pozicionálás, telefonkönyv, … • Android esetén az AndroidManifest.xml fájl, Windows esetén a Package.appmanifest fájl tartalmazza a leírást

• A megfelelően konfigurált alkalmazások kihelyezhetőek fizikai eszközökre, illetve elhelyezhetőek a platform alkalmazásboltjában is, ehhez az alkalmazást megfelelő aláírással kell ellátnunk, amely szintén platformspecifikus ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:8





10:11

• a nézethez használat erőforrások (stílusok, animációk, …) a nézetben direkt (Resources), vagy erőforrásgyűjtemény (ResourceDictionary) formájában lehetnek jelen • az Android platform megkülönbözteti

• a felügyelt erőforrásokat (Resources), amelyek tartalmat egyedileg illeszti be az alkalmazásba (pl. ikon)

• a felügyeletmentes erőforrásokat (Assets), amelyek tartalma nyersen kerül az alkalmazásba

• a Windows platform speciális erőforrásként kezeli az alkalmazás ikonjait (Assets) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:12

2



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.

Tervezés:

Példa

Példa

• a modell (CalculatorModel) biztosítja a számológép funkcionalitást, ezt újrahasznosítjuk

• a nézetben (MainPage) elhelyezünk egy rácsot, benne a beviteli mezőt (Entry), a gombokat (Button), valamint a számítások listáját (Label) • a gombokhoz közös eseménykezelőt rendelünk (Button_Blick), és a gomb szövege alapján döntünk a műveletről • az eredményről figyelmeztető üzenetet küldünk (DisplayAlert) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:13




MVVM architektúra

MVVM architektúra

• A Xamarin.Forms támogatja az MVVM architektúra alapú fejlesztést, így biztosított

• az adatkötés (Binding) a nézet oldalon, amelynek megadhatunk tetszőleges forrást (BindingContext) • minden vezérlőnek külön is megadható forrás a BindingContext tulajdonság segítségével

• a változásjelzés (INotifyPropertyChanged, ObservableCollection), valamint a parancsvégrehajtás (ICommand, Command, Command) nézetmodell oldalon

• az alkalmazás vezérlése az alkalmazás (App osztály) segítségével

• a nézet adatforrását a MainPage tulajdonság BindingContext tulajdonságán keresztül adhatjuk meg, pl.: ViewModel viewModel = new ViewModel(model); MainPage = new MainPage(); MainPage.BindingContext = viewModel; // nézetmodell befecskendezése

• az elnevezett elemekre (x:Name) is hivatkozhatunk a kötésben (x:Reference), pl.:


10:14

10:15

• a nézet cseréjét a MainPage tulajdonságon keresztül végezhetjük, ám ehelyett célszerű több lapot tartalmazó nézet használata (pl. TabbedPage, MasterDetailPage) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II




Tervezés:

Példa

10:16

Példa

• valósítsunk meg MVVM architektúrát a nézetmodell kiemelésével

• a nézetmodell (CalculatorViewModel) tartalmazza az aktuális értéket (NumberFieldValue), a számítások listáját (Calculations) és a számítást parancs formájában (CalculateCommand) • a számítási hibákkal kapcsolatosan eseményt küld (ErrorOccured)

• az alkalmazás példányosítja és összeállítja az alkalmazás rétegeit, és kezeli a számítási hibák eseményeit ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:17


10:18

3



Megvalósítás (MainPage.xaml):

• A mobil/táblagépes környezetben alkalmazásunknak számos speciális követelményt kell teljesíteni

Példa

Alkalmazások mobil környezetben

… <Entry Text="{Binding NumberFieldValue}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" FontSize="40" /> <Button Command="{Binding CalculateCommand}" CommandParameter="+" Text="+" FontSize="30" HeightRequest="60" WidthRequest="70" HorizontalOptions="Start" Grid.Row="1" Grid.Column="0" /> …


10:19

• könnyű áttekinthetőség, infografikus megjelenítés

• folyamatos, gyors működés aszinkron tevékenységekkel • alkalmazkodás (resposiveness): 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

• kézmozdulatok kezelése, és kihasználása

• speciális hardverek igénybevétele (GPS, gyorsulásmérő, …) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II



• Célszerű az alkalmazás vezérlésében a felhasználó kézmozdulataira támaszkodni

• A mobil eszközök képernyőmérete jelentősen eltérhet, és az alkalmazásunknak alkalmazkodnia kell a teljes képernyős megjelenítéshez

Kézmozdulatok kezelése

• bármely vezérlőre állíthatunk kézmozdulat érzékelést (GestureRecognizer), így tetszőleges tevékenységet (Command) rendelhetünk bármely vezérlőhöz

• támogatott az érintés (TapGestureRecognizer), a csíptetés (PinchGestureRecognizer) és a húzás (PanGestureRecognizer), illetve tetszőleges egyedi mozdulat megvalósítása (IGestureRecognizer), pl.:


10:21


• a vezérlők, szövegek méretezésénél használjunk relatív méreteket, pl.:

<StackLayout HorizontalOptions="Fill" VerticalOptions="Fill" …>

• lehetőségünk méretezni bármely vezérlőt a Scale tulajdonság segítségével ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:22

Tájolás kezelés

• a méretezést legcélszerűbb gyerekvezérlőkre alkalmazni (ContentView, Layout, ContentPage leszármazottakban)

• A mobil eszközök többféle tájolásban helyezkedhetnek el

• kezelhető a vezérlő átméretezése (OnSizeAllocated)

• kezelhető a tartalom átméretezése (Content.SizeChanged) • pl.:

private void Content_SizeChanged(…) { // ha változik a tartalom mérete, akkor // méretezzük Double height = Height / Content.Height; Double width = Width / this.Content.Width;

}

Méret kezelés


Méret kezelés

if (width > 0 && height > 0) Content.Scale = Math.Min(height, width);


10:20

10:23

• általában az portré/tájkép (álló/fekvő) tájolásokat különböztetjük meg, de ezeknek lehetnek speciális esetei • a támogatott tájolásokat eszközönként adhatjuk meg (korlátozhatjuk)

• Android esetén a főtevékenység (MainActivity) egyik jellemzője a támogatott tájolás (ScreenOrientation)

• Windows esetén az alkalmazás leírója (application manifest) tartalmazza a tájolást

• az eszköz tájolását és az alkalmazás képernyőjének méretét egyszerre célszerű szabályozni a vezérlő méretváltoztatásának kezelésével (OnSizeAllocated) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:24

4



Eszközkezelés

Eszközkezelés

• pl.:

• Az alkalmazások felhasználhatóak táblagépes, illetve mobil környezetben is, és mindkét környezetben megfelelő megjelenítést kell biztosítanunk

protected override void OnSizeAllocated( Double width, Double height) // megkapjuk az aktuális // szélességet/magasságot { base.OnSizeAllocated(width, height);

• kódból lekérhetjük az eszköz típusát (Device.Idiom), és arra megfelelően reagálhatunk, pl.: if (Device.Idiom == TargetIdiom.Phone) { image.Source = ImageSource.FromFile("small.jpg"); } else { image.Source = ImageSource.FromFile("large.jpg"); } // táblagépen nagyobb képet használunk

// orientáció meghatározása if (width > height) … // tájkép else … // portré

}


10:25

Xamarin alapismeretek • nézetből az eszköznek megfelelő értékeket adhatjuk át (OnIdiom), ehhez meg kell adnunk az érték típusát (x:TypeArguments), illetve a két változatot (Phone, Tablet), pl.:

Triggerek

• Lehetőségünk van tevékenységeket deklaratív módon, triggerek segítségével megfogalmazni a nézetben • triggerek megadhatók vezérlőkben és stílusokban • triggerek segítségével reagálhatunk

• valamely vezérlő tulajdonságának megváltozására (property trigger), pl.: <Setter Property="BackgroundColor" Value="Yellow" /> …

10:27



10:28


Triggerek

Triggerek

• a trigger akciók (TriggerAction<>) olyan osztályok, amelyben az eseményre adott reakciót (Invoke) írhatjuk le, pl.:

• a kötött adat megváltozására (data trigger) , pl.:

<Setter Property="Text" Value="Empty" />

public class NumberValidateAction : TriggerAction<Entry> // megadjuk az érintett vezérlő típusát { protected override void Invoke (Entry entry){ // megadjuk a tevékenységet double result; entry.TextColor = Double.TryParse(entry.Text, out result) ? Color.Default : Color.Red; // ha nem szám, piros lesz a betűszín …

• eseményre (event trigger), amelynek hatására valamilyen akciót (trigger action) hajtunk végre, pl.: <EventTrigger Event="TextChanged">

• a triggerek kombinálhatóak (multi trigger) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:26


Eszközkezelés



10:29


10:30

5




Tervezés:

Példa

Példa

• alakítsuk át a nézetet, hogy könnyen használható legyen mobil környezetben, és alkalmazkodjon a platformhoz

• szövegbevitel helyett gondokat használunk a számokhoz, ezért ki kell egészítenünk a nézetmodellt a számok kezelésével (Calculate) • megvalósítunk egy új laptípust (OrientationAwareContentPage), amely kezeli a tájolást (IsLandscape), így triggerek segítségével tudunk reagálni az elforgatásokra

• külön méreteket definiálunk mobilra és táblagépekre (OnIdiom) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:31






Példa

Példa

… <Style x:Key="BasicButtonStyle" TargetType="Button"> <Setter Property="FontSize"> <Setter.Value> …


… <StackLayout> <StackLayout.Triggers> <Setter Property="Orientation" Value="Horizontal" /> …

10:33




• Felületi időzítésre használhatjuk a platformfüggő időzítőt (Device.StartTimer)

• Üzleti logikában történő időzítésre használható a párhuzamosított időzítő (System.Threading.Timer)

Időzítés

10:34

Időzítés

• megadhatjuk az időintervallumot, és a végrehajtandó tevékenység lambda-kifejezését

• a tevékenység egy logikai függvény, amely amennyiben hamissal tér vissza, az időzítő leáll, pl.:

elapsedTime = 0; Device.StartTimer(TimeSpan.FromSeconds(1), () => { entry.Text = ++elapsedTime; // eltelt másodpercek kiírása return elapsedTime < 120; // 2 percig fut az időzítő });


10:32

10:35

• példányosításkor megadhatjuk a tevékenységet, egy felügyelt állapotot, a kezdési időt és az intervallumot, pl.:

elapsedTime = 0; timer = new Timer(state => { entry.Text = ++elapsedTime; }, state, 0, 1000); // 1 másodpercenként fut le

• megsemmisítéssel (Dispose) leállíthatjuk az időzítőt • az időzítőt nem kell szinkronizálni a felülettel

• Amennyiben eseményvezérelt időzítőre van szükségünk (pl. System.Timers.Timer), a funkcionalitást becsomagolhatjuk egy annak megfelelő típusba ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:36

6



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.

Tervezés:

Példa

Példa

• a megjelenítéshez két lapot (ContentPage) használunk, amelyek között lapozunk (TabbedPage)

• az első lapon csak a tétel sorszámát jelenítjük meg, és érintéssel tudjuk generálni a sorszámot (TapGestureRecognizer), a második lapon elhelyezzük a beállításokat

• a sorszám méretét automatikusan méretezzük, ehhez egy saját vezérlőt veszünk fel (AutoSizeContentView), amely méretezi a tartalmát

• megvalósítunk egy saját időzítőt (Timer), amely teljes egészében megfelel az üzleti logikában használt időzítőnek (az időzített eseményt már nem kell szinkronizálnunk a nézetmodellben) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:37


10:38




• Az egyedileg létrehozott vezérlők mellett számos programcsomag tartalmaz Xamarin Forms vezérlőt

Példa

Külső vezérlők

… …


10:39

• XAML-ben a külső forrásban definiált vezérlő esetén be kell töltenünk a szerelvényt (assembly)

• Amennyiben dinamikusan méretezhető rácsot szeretnénk megvalósítani, használhatjuk a DLToolkit.Forms.Controls csomagot, amely tartalmaz egy FlowListView vezérlőt • szabályozható az egy sorban megjelenített vezérlők száma (FlowColumnCount)

• szabályozható a megjelenített vezérlő (FlowColumnTemplate) • külön kell jelezni a vezérlő inicializálását (FlowListView.Init()) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:40



• Pl.:

Feladat: Készítsünk egy dinamikus méretezhető táblát, amely három szín között (piros, fehér, zöld) állítja a kattintott gombot, valamint a vele egy sorban és oszlopban lévőket.

Külső vezérlők

Példa

… … …


10:41

• elhasználjuk a rendelkezésre álló a nézetmodellt (ColorGridViewModel, ColorFieldViewModel), a színváltást trigger segítségével vezéreljük

• használjuk a FlowListView vezérlőt a rács megjelenítéséhez, amelyet elhelyezünk az automatikusan méretező nézetben (AutoSizeContentView) • annak érdekében, hogy a mezők szélessége megegyezzen a magassággal, létrehozunk egy egyedi, négyzet alakú gombot (SquareButton), ahol a magasságot a szélességgel tesszük egyenértékűvé (OnSizeAllocated) ELTE IK, Eseményvezérelt alkalmazások fejlesztése II

10:42

7



Tervezés:


Példa


Példa

…

10:43


10:44

8

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

Recommend Documents