Tytuł oryginału: Mastering Xamarin UI Development · 2019-05-15 · Dodawanie agenta Xamarin Test...

Tytuł oryginału: Mastering Xamarin UI Development

Tłumaczenie: Łukasz Piwko

ISBN: 978-83-283-3948-4

Copyright © Packt Publishing 2017. First published in the English language under the title 'Mastering Xamarin Ul Development - (9781786462008)'

Polish edition copyright © 2018 by Helion SAAll rights reserved.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher.

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Wydawnictwo HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: http://helion.pl (księgarnia internetowa, katalog książek)

Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/xamati.zip

Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/xamatiMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/xamati

http://helion.pl/rf/xamati

http://helion.pl/ro/xamati

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis tre ci

O autorze 11

O recenzentach 13

Wst p 15

Rozdzia 1. Tworzenie macierzystej aplikacji TrackMyWalks 21

Tworzenie rozwi zania TrackMyWalks 22Aktualizowanie pakietów rozwi zania TrackMyWalks 27

Tworzenie modelu TrackMyWalks 29Tworzenie strony g ównej prezentacji szlaków 31Tworzenie strony tre ci nowego wpisu 34Strona opisu szlaku 37

Dodawanie pakietu NuGet Xamarin.Forms.Maps 39Tworzenie strony tre ci DistanceTravelledPage 41Tworzenie strony ekranu startowego 45

Modyfikacja klasy App Xamarin.Forms 47Ró nice mi dzy Xamarin Studio i Visual Studio 48Uruchamianie aplikacji TrackMyWalks w symulatorze 49Podsumowanie 51

Rozdzia 2. MVVM i wi zanie danych 53

Wzorzec architekturalny MVVM 54Implementowanie modeli widoków MVVM w aplikacji 55Tworzenie klasy WalkBaseViewModel 56Implementowanie klasy WalksPageViewModel 59

Przystosowywanie strony g ównej szlaków do modelu MVVM 61

Poleć książkęKup książkę



Spis tre ci

6

Implementowanie modelu widoku strony wprowadzania nowego wpisu 63Przystosowywanie strony WalksEntryPage do modelu MVVM 67

Implementowanie modelu widoku strony szlaku 70Przystosowywanie strony WalksTrailPage do modelu MVVM 71

Implementowanie modelu DistanceTravelledViewModel 73Przystosowywanie strony DistanceTravelledPage do modelu MVVM 76

Podsumowanie 80

Rozdzia 3. Nawigacja po modelu MVVM wed ug Xamarin.Forms 81

Interfejs API nawigacji Xamarin.Forms 82Ró nice mi dzy nawigacj i modelami widoków 83Implementowanie us ugi nawigacji 84

Tworzenie interfejsu us ugi nawigacji 85Tworzenie us ugi nawigacji po ród modeli widoków 88Przystosowywanie modelu WalkBaseViewModel do korzystania z us ugi nawigacji 92Modyfikowanie modelu widoku strony g ównej szlaków i us ugi nawigacji 94Dostosowywanie strony g ównej szlaków do korzystania

ze zmienionego modelu widoku 97Modyfikowanie modelu widoku strony dodawania wpisów i us ugi nawigacji 100Dostosowywanie strony WalksEntryPage do zmienionego modelu widoku 104Modyfikowanie modelu widoku strony szlaku i us ugi nawigacji 107Przystosowywanie strony WalksTrailPage do korzystania

ze zmienionego modelu widoku 109Modyfikowanie modelu widoku przebytego dystansu i us ugi nawigacji 111Przystosowywanie strony DistanceTravelledPage

do korzystania z odnowionego modelu widoku 115Dostosowywanie klasy Xamarin.Forms.App do korzystania z us ugi nawigacji 118

Podsumowanie 120

Rozdzia 4. Funkcje dotycz ce lokalizacji 121

Tworzenie i u ywanie us ug specyficznych dla konkretnej platformy 122Tworzenie interfejsu us ugi lokalizacji dla aplikacji TrackMyWalks 122Klasa us ugi lokalizacji dla platformy Android 124Klasa us ugi lokalizacji dla platformy iOS 130W czanie aktualizacji w tle i sprawdzanie aktualnej pozycji u ytkownika 135Dostosowywanie klasy WalkEntryViewModel do wspó pracy z us ug lokalizacji 138Dostosowywanie klasy DistanceTravelledViewModel do us ugi lokalizacyjnej 143Rejestrowanie modeli widoków na stronie SplashPage 147Integrowanie klasy MainActivity z Xamarin.Forms.Maps 149Dodawanie do klasy Xamarin.Forms.App funkcji specyficznych dla platform 150

Podsumowanie 153




Spis tre ci

7

Rozdzia 5. Regulacja parametrów interfejsu u ytkownika 155

Tworzenie klasy DataTemplate dla aplikacji TrackMyWalks 156Wykorzystywanie szablonu danych na stronie g ównej 160

Tworzenie elementu wyboru opcji dla platformy iOS 162Tworzenie renderera dla w asnej kontrolki dla platformy iOS 164

Stosowanie w asnego elementu wyboru opcji na stronie WalksEntryPage 168Tworzenie efektów dla systemu iOS za pomoc API Effects 170Tworzenie efektów dla platformy Android za pomoc interfejsu API Effects 174Implementowanie konwerterów warto ci w aplikacji TrackMyWalks 177

Wykorzystywanie konwertera w klasie WalkBaseViewModel 180Wykorzystywanie konwertera logicznego w modelu WalksPageViewModel 181Dostosowywanie strony g ównej do zmienionego modelu widoku 183Stosowanie zmienionego modelu widoku na stronie WalksTrailPage 186Wykorzystywanie zmienionego modelu widoku na stronie DistanceTravelledPage 188Wykorzystywanie efektów platformy w klasie WalkCellDataTemplate 189

Podsumowanie 191

Rozdzia 6. Szablony Razor 193

Podstawy biblioteki Razor 194Tworzenie i implementowanie szablonów Razor w Xamarin Studio 194

Dodawanie pakietu SQLite.Net do rozwi zania BookLibrary 197Tworzenie i implementowanie opakowania bazy danych ksi ek 201Tworzenie i implementowanie opakowania bazy danych aplikacji BookLibrary 205Tworzenie i implementowanie strony g ównej listy ksi ek 207Tworzenie i implementowanie szablonu BookLibraryAdd 209Tworzenie i implementowanie szablonu BookLibraryEdit 210Tworzenie i implementowanie klasy WebViewController 212

Rozbudowa arkusza stylów biblioteki ksi ek 218Podsumowanie 220

Rozdzia 7. API Data Access i us ugi aplikacji Microsoft Azure 221

Rejestracja aplikacji TrackMyWalks w Microsoft Azure 222Dodawanie pakietu NuGet Json.Net do aplikacji TrackMyWalks 227Dodawanie pakietu NuGet HttpClient do aplikacji TrackMyWalks 229Wykorzystywanie biblioteki Json.Net w modelu WalkEntries 230

Tworzenie klasy us ugi sieciowej HTTP dla aplikacji TrackMyWalks 231Tworzenie API DataService dla aplikacji TrackMyWalks 234Tworzenie klasy API DataService dla aplikacji TrackMyWalks 235

Zmiany w klasie WalkBaseViewModel, aby móc korzysta z API DataService 238Dostosowywanie klasy WalkEntryViewModel do interfejsu DataService 241Dostosowywanie klasy WalksPageViewModel do API DataService 243Dostosowywanie strony WalksPage do nowego modelu widoku 245Dostosowywanie klasy elementu wyboru opcji do platformy iOS 248Dostosowywanie strony WalksEntryPage do nowego elementu wyboru opcji 250

Podsumowanie 253




Spis tre ci

8

Rozdzia 8. Uspo ecznianie aplikacji, czyli jak korzysta z API Facebooka 255

Rejestracja aplikacji TrackMyWalks na Facebooku 256Dodawanie pakietu Xamarin.Auth do aplikacji TrackMyWalks 259Dodawanie biblioteki SDK Facebooka do aplikacji TrackMyWalks 261

Tworzenie modelu u ytkownika Facebooka w aplikacji TrackMyWalks 264Tworzenie klasy FacebookCredentials w aplikacji TrackMyWalks 266Logowanie do aplikacji TrackMyWalks za pomoc Facebooka 269Tworzenie klasy logowania na Facebooku w aplikacji TrackMyWalks (iOS) 270

Dostosowywanie interfejsu NavigationService do aplikacji TrackMyWalks 273Dostosowywanie klasy NavigationService do aplikacji TrackMyWalks 274

Dostosowywanie strony WalksPage do mechanizmu logowania Facebooka 277Uzdatnianie modelu widoku WalksPage do wspó pracy z FacebookApiUser 278Dostosowywanie klasy DistanceTravelledPage do aplikacji TrackMyWalks 279Obs uga logowania na Facebooku przez klas Xamarin.Forms App 282Funkcjonalno Facebooka w aplikacji TrackMyWalks 283

Podsumowanie 287

Rozdzia 9. Testowanie jednostkowe aplikacji Xamarin.Formsprzy u yciu rodowisk NUnit i UITest 289

Tworzenie folderu rozwi zania testów jednostkowych w Xamarin Studio 290Tworzenie projektu testów jednostkowych w Xamarin Studio 291

Dodawanie pakietu NuGet Moq do projektu testów jednostkowych 293Dodawanie projektu TrackMyWalks do TrackMyWalks.UnitTests 295Implementowanie klasy testowej NUnit WalksTrailViewModel 296Implementowanie klasy testowej NUnit WalkEntryViewModel 298Wykonywanie testów TrackMyWalks.UnitTests w Xamarin Studio 302

Tworzenie projektu testowania interfejsu u ytkownika w Xamarin Studio 305Najcz ciej u ywane metody UITest 307

Przygotowywanie i inicjalizowanie aplikacji TrackMyWalks do testów UITest 308Implementowanie CreateNewWalkEntry przy u yciu UITest.Framework 310

Dodawanie agenta Xamarin Test Cloud do projektu iOS 314Dostosowywanie klasy AppDelegate do wspó pracy z Xamarin Test Cloud Agent 315

Testowanie aplikacji TrackMyWalks za pomoc testów UITest w Xamarin Studio 318Podsumowanie 320

Rozdzia 10. Pakowanie i wdra anie aplikacji Xamarin.Forms 321

Tworzenie i przygotowywanie zespo u programistów iOS 322Tworzenie certyfikatu dla aplikacji iOS TrackMyWalks 326

Uzyskiwanie certyfikatu programistycznego iOS od firmy Apple 328Tworzenie identyfikatora aplikacji TrackMyWalks (iOS) 331

Tworzenie profilu dostarczania aplikacji TrackMyWalks 333Przygotowywanie aplikacji TrackMyWalks (iOS) do wys ania do weryfikacji 339

Wysy anie aplikacji TrackMyWalks (iOS) do iTunes Connectprzy u yciu Xamarin Studio 344

Podsumowanie 351

Skorowidz 353




1

Tworzenie macierzystejaplikacji TrackMyWalks

Wraz z pojawieniem si platformy Xamarin kilka lat temu programi ci ciesz si mo liwo citworzenia macierzystych aplikacji mobilnych przeznaczonych dla innych platform ni Microsoftuoraz mo liwo ci wyboru j zyka C# lub F#, dzi ki której mog przygotowywa produkty zarów-no dla systemu iOS, jak i Android.

Z ksi ki tej nauczysz si najlepszych zasad tworzenia wieloplatformowych aplikacji mobilnychi poznasz wzorce projektowe na platformie Xamarin.Forms s u cej do tworzenia wieloplatformo-wych interfejsów u ytkownika, które mog by wykorzystywane w systemach Android, iOS orazWindows Phone.

Poniewa ka d z tych aplikacji mo na napisa za pomoc jednego j zyka programowania, do-brym rozwi zaniem wydaje si utworzenie pojedynczej bazy kodu, przy u yciu której mo nanast pnie kompilowa i budowa osobne aplikacje dla ka dej z wymienionych platform.

Na pocz tku tego rozdzia u dowiesz si , jak przygotowa z wykorzystaniem Xamarin.Forms pod-stawow struktur aplikacji, która b dzie stanowi a podstaw pracy w nast pnych rozdzia ach.Bazuj c na niej, b dziemy rozbudowywa nasz aplikacj , stosuj c w niej coraz to nowszerozwi zania. W tym rozdziale pokazuj , jak utworzy wst pn , niezale n od platformy, macie-rzyst aplikacj Xamarin.Forms oraz jak dodawa nowe i aktualizowa istniej ce pakiety w swoimrozwi zaniu.

Nauczysz si tworzy modele aplikacji w postaci klas C# oraz tworzy strony z tre ci , któreb d stanowi y interfejs u ytkownika. Na ko cu tego rozdzia u opisuj ró nice w podej ciu dotworzenia aplikacji przy u yciu rodowisk Xamarin Studio i Microsoft Visual Studio.




Xamarin. Tworzenie interfejsów u ytkownika

22

W tym rozdziale: Tworzenie mobilnej aplikacji Xamarin.Forms o nazwie TrackMyWalks. Sposób aktualizacji pakietów rozwi zania TrackMyWalks za pomoc mened era

pakietów NuGet. Tworzenie modelu danych TrackMyWalks. Metoda tworzenia stron tre ci (ContentPage) w rozwi zaniu TrackMyWalks. Ró nice mi dzy rodowiskami Xamarin Studio i Visual Studio.

Tworzenie rozwi zania TrackMyWalksW tym podrozdziale poka Ci, jak utworzy pierwsze rozwi zanie Xamarin.Forms. Zaczniemy odprzygotowania podstawowej struktury naszej aplikacji, po czym dodamy niezb dne modele jedno-stek i zaprojektujemy pliki interfejsu u ytkownika.

Pierwsz nasz czynno ci b dzie utworzenie projektu o nazwie TrackMyWalks. W XamarinStudio projekty tworzy si bardzo atwo. Wystarczy wykona nast puj ce czynno ci:

1. Uruchom aplikacj Xamarin Studio. Na ekranie pojawi si widoczne poni ej okno:




Rozdzia 1. • Tworzenie macierzystej aplikacji TrackMyWalks

23

2. Kliknij przycisk Nowe rozwi zanie albo naci nij kombinacj klawiszyShift+Command+N.

3. W sekcji Multiplatform/Aplikacja kliknij opcj Forms App (aplikacja Forms).Z listy rozwijanej widocznej po prawej stronie wybierz j zyk programowania C#.

4. W polu App Name (nazwa aplikacji) wpisz nazw swojej aplikacji: TrackMyWalks. 5. Nast pnie podaj nazw w polu Organization Identifier (identyfikator organizacji). 6. W kolejnym kroku w polach Target Platforms (platformy docelowe) zaznacz polawyboru Android i iOS, je li nie s jeszcze zaznaczone.

7. Nast pnie sprawd , czy w sekcji Shared Code (wspólny kod) zaznaczona jest opcjaUse Portable Class Library (u yj biblioteki klas przeno nych), i je li nie jest, to jzaznacz, jak wida na poni szym zrzucie ekranu.

Ró nica mi dzy Portable Class Library a Shared Library polega g ównie na tym, e pierwsza opcja umo liwianapisanie kodu tylko raz i wykorzystywanie go na ró nych platformach, takich jak serwisy internetoweczy systemy Android i iOS. Z kolei Shared Library umo liwia skopiowanie wszystkich plików nale cych doprojektu biblioteki do wszystkich projektów znajduj cych si w rozwi zaniu podczas kompilacji dla ró nychplatform, które b d z tej biblioteki korzysta .





24

Nazwa wpisana w polu Organization Identifier nie mo e si powtarza . W Xamarin Studio zalecasi stosowanie nazw odzwierciedlaj cych odwrócon kolejno elementów adresu domeny, np.com.nazwaDomeny.nazwaAplikacji.

8. Wy cz opcj Use XAML for user interface files (twórz pliki interfejsu u ytkownikaw j zyku XAML).

9. Kliknij przycisk Dalej, aby przej do nast pnego etapu (zobacz pierwszy rysunekna nast pnej stronie).

10. Nast pnie zaznacz opcj Utwórz katalog projektu w katalogu rozwi zania. 11. Potem kliknij przycisk Utwórz, aby zapisa projekt w wybranym folderze.

Po utworzeniu projektu zostanie wy wietlone okno rodowiska programistycznego Xamarin z wy-kazem kilku domy lnych plików szablonowych (patrz drugi zrzut ekranu na nast pnej stronie).





25

Jak wida na zrzucie ekranu, rozwi zanie TrackMyWalks zosta o podzielone na trzy g ówne obszary.W poni szej tabeli znajduje si zwi z y opis ka dego z nich.





26

Nazwa obszaru Opis

TrackMyWalks To jest projekt PCL (ang. Portable Class Library), który b dzie odgrywa rolg ównej warstwy architekturalnej rozwi zania TrackMyWalks.

Projekt ten zawiera ca logik biznesow , obiekty danych, Xamarin.FormsPages, widoki i inny kod niespecyficzny dla adnej platformy.

Kod ród owy napisany w tym projekcie mo e by wykorzystywanyw wielu ró nych projektach specyficznych dla konkretnych platform.

TrackMyWalks.Droid To jest projekt dla systemu Android, a wi c zawiera ca y kod ród owyi wszystkie zasoby potrzebne do skompilowania i wdro enia aplikacjidla systemu Android nale cej do rozwi zania.

Domy lnie projekt ten odwo uje si do biblioteki PCL TrackMyWalks.

TrackMyWalks.iOS To jest projekt dla systemu iOS, a wi c zawiera ca y kod ród owyi wszystkie zasoby potrzebne do skompilowania i wdro enia aplikacjidla systemu iOS nale cej do rozwi zania.

Domy lnie projekt ten odwo uje si do biblioteki PCL TrackMyWalks.

Zwró uwag , e nasze rozwi zanie zawiera plik o nazwie TrackMyWalks.cs, który stanowisk adnik biblioteki PCL TrackMyWalks. W pliku tym znajduje si klasa o nazwie App, która dziedzi-czy z hierarchii klas Xamarin.Forms.Application, co wida w poni szym kodzie:

//// TrackMyWalks.cs// TrackMyWalks//// Autor: Steven F. Daniel, 04.08.2016// Copyright © 2016 GENIESOFT STUDIOS. All rights reserved.//using Xamarin.Forms;

namespace TrackMyWalks{ public class App : Application { public App() { // sprawdzenie systemu docelowego if (Device.OS == TargetPlatform.Android) { MainPage = new SplashPage(); } else { // strona g ówna aplikacji var navPage = new NavigationPage(new TrackMyWalks.WalksPage() { Title = "Track My Walks" }); MainPage = navPage; } }





27

protected override void OnStart() { // operacje wykonywane podczas uruchamiania aplikacji }

protected override void OnSleep() { // operacje wykonywane, gdy aplikacja zostaje u piona }

protected override void OnResume() { // operacje wykonywane w chwili wznowienia dzia ania aplikacji } }}

Konstruktor App przypisuje w asno ci MainPage nowy egzemplarz obiektu ContentPage, któryna razie tylko wy wietla pewien napis utworzony domy lnie przez kreator projektu. W dal-szej cz ci tego rozdzia u pokazuj , jak zbudowa pocz tkowe widoki stron interfejsu u ytkow-nika, oraz demonstruj sposoby modyfikacji w asno ci MainPage klasy App zawartej w plikuTrackMyWalks.cs.

Aktualizowanie pakietów rozwi zania TrackMyWalksW tej sekcji pokazuj , jak mo na zaktualizowa pakiety Xamarin.Forms nale ce do naszego roz-wi zania TrackMyWalks. Z pewno ci uda o Ci si ju zauwa y , e ka dy projekt w naszymrozwi zaniu zawiera folder Packages.

Pakiet Xamarin.Forms to w istocie pakiet NuGet, który zosta automatycznie dodany do naszegorozwi zania, gdy stwierdzili my, e chcemy utworzy szablon projektu Xamarin.FormsApp.

Czasami Xamarin powiadamia, e jaki pakiet jest przestarza y i trzeba go zaktualizowa do naj-nowszej wersji.

Pakiet NuGet to w istocie mened er pakietów platformy Microsoft Development Platform zawieraj cynarz dzia klienckie, za pomoc których mo na tworzy i eksploatowa pakiety .NET.

Zobaczmy, jak zaktualizowa pakiety NuGet w naszym rozwi zaniu TrackMyWalks, aby miepewno , e pos ugujemy si najnowszymi pakietami Xamarin.Forms. Wykonujemy nast puj ceczynno ci:

1. Kliknij prawym przyciskiem myszy rozwi zanie TrackMyWalks i z menu wybierzpolecenie Aktualizuj pakiety NuGet, jak pokazano na zrzucie ekranu na nast pnejstronie.





28

Gdy w czysz t opcj , Xamarin Studio zaktualizuje wszystkie pakiety znajduj ce siw rozwi zaniu TrackMyWalks w projektach dotycz cych wszystkich platformi wy wietli wska nik post pu o wygl dzie podobnym do pokazanego poni ej:

Podczas instalowania aktualizacji niektórych pakietów dotycz cych konkretnychplatform b dzie konieczne zaakceptowanie licencji, co wida na poni szym rysunku:





29

2. Kliknij przycisk Accept (akceptuj), aby zaakceptowa licencje pakietówwymienionych w oknie dialogowym i je zainstalowa (zobacz poprzedni rysunek).

Po zaktualizowaniu pakietów Xamarin.Forms w swoim rozwi zaniu mo esz przej do tworzeniaplików interfejsu u ytkownika w rozwi zaniu TrackMyWalks.

Tworzenie modelu TrackMyWalksW tym podrozdziale poka Ci, jak utworzy model TrackMyWalks, który b dzie reprezentowawpisy na temat przebytych przez nas szlaków. Potem dowiesz si , jak przy u yciu tego modeluprzygotowa i zainicjalizowa kilka wpisów dla naszej g ównej strony WalksPage przy u yciukontrolki ListView, tak aby w ka dym wierszu ListView mo na by o wy wietli wpis.Poni ej przedstawiam list czynno ci do wykonania:

1. W projekcie Portable Class Library TrackMyWalks utwórz folder o nazwie Models,jak pokazano na poni szym zrzucie ekranu:

2. Nast pnie w folderze Models utwórz nowy plik klasy zgodnie z tym, co widana poni szym rysunku:





30

3. W sekcji General (ogólne) wybierz opcj Pusta klasa i w polu nazwy klasy wpisznazw WalkEntries:

4. Nast pnie kliknij przycisk Nowy, aby pozwoli kreatorowi na utworzenie nowegopliku (zobacz powy szy rysunek).Gratulacje! W a nie zosta utworzony Twój pierwszy folder i plik klasy C#w rozwi zaniu. Teraz mo esz przej do dodawania deskryptorów w asno ci,które b d definiowa nasz model.





31

5. Otwórz plik WalkEntries.cs, znajd w nim konstruktor klasy WalkEntriesi wpisz kod zaznaczony pogrubieniem na listingu:

//// WalkEntries.cs// TrackMyWalks//// Autor: Steven F. Daniel, 04.08.2016.// Copyright © 2016 GENIESOFT STUDIOS. All rights reserved.//

namespace TrackMyWalks.Models{ public class WalkEntries { public string Title { get; set; } public string Notes { get; set; } public double Longitude { get; set; } public double Latitude { get; set; } public double Kilometers { get; set; } public string Difficulty { get; set; } public double Distance { get; set; } public string ImageUrl { get; set; } }}

W kodzie tym zdefiniowali my model, który b dzie nam s u y do reprezentowania wpisów doty-cz cych naszych szlaków. W nast pnym podrozdziale przy u yciu tego modelu zainicjalizujemykilka wpisów dla g ównej strony WalksPage za pomoc kontrolki ListView, a nast pnie przy u yciuobiektu DataTemplate opiszemy sposób prezentacji danych tego modelu w ka dym wierszukontrolki ListView.

Tworzenie strony g ównej prezentacjiszlakówJak napisa em wcze niej, WalksPage b dzie nam s u y jako g ówny punkt wej ciowy do naszejaplikacji. Przy u yciu modelu WalkEntries przeka emy troch statycznych danych na temat szla-ków i wy wietlimy je w kontrolce ListView za pomoc obiektu DataTemplate. Oto lista czynno ci,które nale y wykona :

1. W rozwi zaniu Portable Class Library TrackMyWalks utwórz folder o nazwie Pagesw taki sam sposób jak poprzednio.

2. Na ekranie Nowy plik w lewym okienku otwórz sekcj Forms (formularze). 3. W prawym okienku zaznacz opcj Forms ContentPage. 4. W polu Nazwa nowo tworzonej klasy wpisz WalksPage.





32

5. Na zako czenie kliknij przycisk Nowy (zobacz poni szy rysunek).

6. Nast pnie otwórz plik WalksPage.cs w edytorze kodu i wpisz zaznaczonepogrubieniem fragmenty poni szego kodu.

//// WalksPage.cs// TrackMyWalks//// Autor: Steven F. Daniel, 04.08.2016// Copyright © 2016 GENIESOFT STUDIOS. All rights reserved.//using System.Collections.Generic;using Xamarin.Forms;using TrackMyWalks.Models;

namespace TrackMyWalks{ public class WalksPage : ContentPage { public WalksPage() { var newWalkItem = new ToolbarItem { Text = "Dodaj szlak" }; newWalkItem.Clicked += (sender, e) =>





33

{ Navigation.PushAsync(new WalkEntryPage()); };

ToolbarItems.Add(newWalkItem);

var walkItems = new List<WalkEntries> { new WalkEntries { Title = "10-milowy szlak wzd u strumienia, Margaret River", Notes = "10-milowy szlak wzd u strumienia zaczyna si w Rotary Park w pobli u Old Kate, czyli starej lokomotywy stoj cej w pó nocnej cz ci Margaret River.", Latitude = -33.9727604, Longitude = 115.0861599, Kilometers = 7.5, Distance = 0, Difficulty = " redni", ImageUrl = "http://trailswa.com.au/media/cache/media/images/ trails/_mid/FullSizeRender1_600_480_c1.jpg" }, new WalkEntries { Title = "Szlak Ancient Empire, Dolina Gigantów", Notes = "Ancient Empire to 450-metrowy szlak po ród gigantycznych drzew, w ród których znajduj si popularne s kate olbrzymy zwane Grandma Tingle.", Latitude = -34.9749188, Longitude = 117.3560796, Kilometers = 450, Distance = 0, Difficulty = "Wysoki", ImageUrl = "http://trailswa.com.au/media/cache/media/images/ trails/_mid/Ancient_Empire_534_480_c1.jpg" }, };

var itemTemplate = new DataTemplate(typeof(ImageCell)); itemTemplate.SetBinding(TextCell.TextProperty, "Title"); itemTemplate.SetBinding(TextCell.DetailProperty, "Notes"); itemTemplate.SetBinding(ImageCell.ImageSourceProperty, "ImageUrl");

var walksList = new ListView { HasUnevenRows = true, ItemTemplate = itemTemplate, ItemsSource = walkItems, SeparatorColor = Color.FromHex("#ddd"), };





34

// konfiguracja procedury obs ugi zdarze walksList.ItemTapped += (object sender, ItemTappedEventArgs e) => { var item = (WalkEntries)e.Item; if (item == null) return; Navigation.PushAsync(new WalkTrailPage(item)); item = null; };

Content = walksList; } }}

Na pocz tku zadeklarowali my zmienn newWalkItem typu klasy ToolbarItem. Za pomoc tejzmiennej wi emy nowy przycisk Dodaj szlak z g ównym paskiem narz dzi podstawowej kolekcjiContentPage.ToolbarItems, aby umo liwi u ytkownikom aplikacji dodawanie informacji o nowychszlakach.

Nast pnie tworzymy zdarzenie dla obiektu newWalkItem, wykorzystuj c zdarzenie Clickedklasy ToolbarItem, za pomoc którego b dzie mo na przej do nowej strony WalksEntryPage.

Kolejn nasz czynno ci jest zadeklarowanie nowej zmiennej o nazwie walkItems, która jestkolekcj elementów listy do przechowywania wszystkich naszych wpisów w modelu. Za pomocklasy DataTemplate opisujemy dany sposób prezentowania danych modelu w ka dym z wierszyzadeklarowanych w ListView.

Na koniec definiujemy procedur obs ugi zdarze dla naszego widoku ListView, która pozwolinam przej do strony WalksTrailPage w celu wy wietlenia informacji o wybranym elemencie.

Tworzenie strony tre ci nowego wpisuW tym podrozdziale zbudujemy interfejs u ytkownika na naszej stronie WalkEntryPage, s u cejdo dodawania informacji o nowym szlaku do aplikacji. Jej wywo anie nast pi, gdy u ytkowniknaci nie przycisk Dodaj szlak na stronie g ównej.

Stron do wprowadzania nowych danych mo na przedstawi na wiele sposobów. W naszej aplika-cji skorzystamy z widoku TableView, ale równie dobrze mogliby my pos u y si widokiemStackLayout i zaprezentowa informacje w postaci serii obiektów Label i EntryCell.

Aby utworzy now stron WalkEntryPage, wykonaj nast puj ce czynno ci: 1. Utwórz now stron ContentPage o nazwie WalkEntryPage w sposób opisanyw poprzednim podrozdziale.





35

2. Otwórz w edytorze kodu plik WalkEntryPage.cs i wpisz fragmenty kodu zaznaczoneponi ej pogrubieniem:

//// WalkEntryPage.cs// TrackMyWalks//// Autor: Steven F. Daniel, 04.08.2016// Copyright © 2016 GENIESOFT STUDIOS. All rights reserved.//using Xamarin.Forms;using TrackMyWalks.Models;using System.Collections.Generic;

namespace TrackMyWalks{ public class WalkEntryPage : ContentPage { public WalkEntryPage() { // tytu strony Title = "Nowy wpis";

// pola do wype nienia var walkTitle = new EntryCell { Label = "Tytu :", Placeholder = "Nazwa szlaku" };

var walkNotes = new EntryCell { Label = "Uwagi:", Placeholder = "Opis" };

var walkLatitude = new EntryCell { Label = "Szeroko geograficzna:", Placeholder = "Szeroko ", Keyboard = Keyboard.Numeric };

var walkLongitude = new EntryCell { Label = "D ugo geograficzna:", Placeholder = "D ugo ", Keyboard = Keyboard.Numeric };

var walkKilometers = new EntryCell {





36

Label = "Liczba kilometrów:", Placeholder = "Liczba kilometrów", Keyboard = Keyboard.Numeric };

var walkDifficulty = new EntryCell { Label = "Poziom trudno ci:", Placeholder = "Poziom trudno ci szlaku" };

var walkImageUrl = new EntryCell { Label = "URL obrazu:", Placeholder = "URL obrazu" };

// definicja widoku TableView Content = new TableView { Intent = TableIntent.Form, Root = new TableRoot { new TableSection() { walkTitle, walkNotes, walkLatitude, walkLongitude, walkKilometers, walkDifficulty, walkImageUrl } } };

var saveWalkItem = new ToolbarItem { Text = "Zapisz" }; saveWalkItem.Clicked += (sender, e) => { Navigation.PopToRootAsync(true); };

ToolbarItems.Add(saveWalkItem); } }}





37

Najpierw zadeklarowali my etykiety EntryCell dla naszego interfejsu u ytkownika, za pomocktórego b dziemy przyjmowa wprowadzane informacje — Tytu , Uwagi, Szeroko geograficzna,D ugo geograficzna, Liczba kilometrów, Poziom trudno ci oraz URL obrazu. Potem pokaCi, jak modyfikowa wygl d i styl komórek EntryCell przez utworzenie specyficznego dla danejplatformy elementu do wybierania ustawie dotycz cych poziomu trudno ci i liczby kilometrów.

Nast pnie zdefiniowali my widok TableView i dodali my ka de z naszych pól EntryCell do w a-sno ci TableSection kontrolki TableView. Ka da w asno TableSection zdefiniowana w TableViewzawiera nag ówek i jedn lub wi cej komórek ViewCell, które w naszym przypadku s polamiEntryCell.

Na koniec zadeklarowali my i dodali my do kolekcji ContentPageToolbarItems obiekt ToolbarItemo nazwie saveWalkItem, a nast pnie utworzyli my zdarzenie, które w reakcji na klikni cie powo-duje zapisanie wprowadzonych informacji dotycz cych szlaku na stronie g ównej. Oczywi ciepó niej jeszcze wielokrotnie b dziemy zmienia kod strony WalkEntryPage, która w reakcji nanaci ni cie przycisku Zapisz b dzie wysy a a informacje do serwera za po rednictwem REST-owego interfejsu API, a nast pnie b dzie od wie a a stron g ówn TrackMyWalks.

Strona opisu szlakuW tym podrozdziale rozpoczniemy budow interfejsu u ytkownika dla naszej strony WalksTrail-Page. Strona ta b dzie wywo ywana klikni ciem wpisu w widoku ListView na g ównej stronietre ci TrackMyWalks i b dzie prezentowa a informacje dotycz ce wybranego szlaku.

1. Utwórz stron ContentPage o nazwie WalkTrailPage w sposób opisany w jednymz wcze niejszych podrozdzia ów.

2. Otwórz w edytorze kodu plik WalkTrailPage.cs i wpisz fragmenty kodu zaznaczoneponi ej pogrubieniem:

//// WalkTrailPage.cs// TrackMyWalks//// Autor: Steven F. Daniel, 04.08.2016.// Copyright © 2016 GENIESOFT STUDIOS. All rights reserved.//using Xamarin.Forms;using TrackMyWalks.Models;

namespace TrackMyWalks{ public class WalkTrailPage : ContentPage { public WalkTrailPage(WalkEntries walkItem) { Title = "Szlak";





38

var beginTrailWalk = new Button { BackgroundColor = Color.FromHex("#008080"), TextColor = Color.White, Text = "Rozpocznij ten szlak" };

// definicja procedury obs ugi zdarze beginTrailWalk.Clicked += (sender, e) => { if (walkItem == null) return; Navigation.PushAsync(new DistanceTravelledPage(walkItem)); Navigation.RemovePage(this); walkItem = null; };

var walkTrailImage = new Image() { Aspect = Aspect.AspectFill, Source = walkItem.ImageUrl };

var trailNameLabel = new Label() { FontSize = 28, FontAttributes = FontAttributes.Bold, TextColor = Color.Black, Text = walkItem.Title };

var trailKilometersLabel = new Label() { FontAttributes = FontAttributes.Bold, FontSize = 12, TextColor = Color.Black, Text = $"D ugo : { walkItem.Kilometers } km" };

var trailDifficultyLabel = new Label() { FontAttributes = FontAttributes.Bold, FontSize = 12, TextColor = Color.Black, Text = $"Poziom trudno ci: { walkItem.Difficulty } " };

var trailFullDescription = new Label() { FontSize = 11, TextColor = Color.Black, Text = $"{ walkItem.Notes }", HorizontalOptions = LayoutOptions.FillAndExpand };





39

this.Content = new ScrollView { Padding = 10, Content = new StackLayout { Orientation = StackOrientation.Vertical, HorizontalOptions = LayoutOptions.FillAndExpand, Children = { walkTrailImage, trailNameLabel, trailKilometersLabel, trailDifficultyLabel, trailFullDescription, beginTrailWalk } } }; } }}

Najpierw importujemy klas TrackMyWalks.Models, przy u yciu której b dziemy pobiera infor-macje przekazywane ze strony WalksPage.

Nast pnie deklarujemy zmienn beginTrailWalk dziedzicz c po klasie Button. Potem definiujemyzdarzenie Clicked klasy Button, które pozwoli nam przej do strony tre ci DistanceTravelledPagew celu wy wietlenia informacji o naszym szlaku po usuni ciu strony tre ci szlaku z hierarchiiNavigationPage.

W nast pnym kroku deklarujemy zmienn obrazu walkTrailImage i ustawiamy jego w asnoród a Source na obraz wybranego elementu walkItem z ListView. W dalszej kolejno ci dekla-

rujemy i inicjalizujemy kilka obiektów etykiet, które b d zawiera informacje walkItem prze-kazane z kontrolki ListView strony tre ci WalksPage i które zostan wy wietlone.

Potem definiujemy kontrolk ScrollView, która jest cz ci bazowej klasy Xamarin.Forms.Corei dodajemy wszystkie nasze pola Image i Label formularza do kontrolki StackLayout. KontrolkaScrollView to fantastyczny element umo liwiaj cy przewijanie tre ci strony ContentPage, je lita nie mie ci si na pojedynczym ekranie urz dzenia.

Dodawanie pakietu NuGet Xamarin.Forms.MapsW tej sekcji dodamy pakiet NuGet Xamarin.Forms.Maps do naszego projektu g ównego i projektówspecyficznych dla platform iOS i Android. Jest on potrzebny do tego, aby my mogli korzystaz kontrolki Xamarin.FormsMap na stronie tre ci DistanceTravelled, któr utworzymy w nast pnympodrozdziale.





40

1. Kliknij prawym przyciskiem myszy rozwi zanie TrackMyWalks i w menu kliknijopcj Dodaj pakiety, co zilustrowano na poni szym zrzucie ekranu:

2. Zostanie wy wietlone okno dialogowe Dodaj pakiety. W polu wyszukiwania wpiszs owo maps, a nast pnie na li cie, która si pojawi, kliknij opcj Xamarin.Forms.Maps:

3. Na koniec kliknij przycisk Add Package (dodaj pakiet), aby doda pakiet NuGetXamarin.Forms.Maps do rdzenia rozwi zania TrackMyWalks.





41

4. Powtórz te same czynno ci, aby doda pakiet NuGet Xamarin.Forms.Mapsdo projektów iOS i Android znajduj cych si w rozwi zaniu TrackMyWalks.

Maj c pakiet NuGet Xamarin.Forms z kontrolk Map, mo emy zacz jej u ywa na stronie tre ciDistanceTravelled, któr opisuj w nast pnym podrozdziale.

Tworzenie strony tre ciDistanceTravelledPageW tym podrozdziale rozpoczynamy prace nad interfejsem u ytkownika strony DistanceTravelledPage. Strona ta b dzie wywo ywana, gdy u ytkownik kliknie przycisk Rozpocznij ten

szlak na stronie tre ci WalksTrailPage, która b dzie s u y a do prezentowania informacji na tematwybranego szlaku, jak równie wbijania szpilki na kontrolce Xamarin.Forms.Maps oraz obliczaniaprzebytego dystansu i czasu podró y:

1. Utwórz now stron ContentPage o nazwie DistanceTravelledPage w sposób opisanyw poprzednim podrozdziale.

2. Otwórz plik DistanceTravelledPage.cs w edytorze kodu i wpisz pogrubione poni ejfragmenty kodu:

//// DistanceTravelledPage.cs// TrackMyWalks//// Autor: Steven F. Daniel, 04.08.2016// Copyright © 2016 GENIESOFT STUDIOS. All rights reserved.//using Xamarin.Forms;using Xamarin.Forms.Maps;using TrackMyWalks.Models;

namespace TrackMyWalks{ public class DistanceTravelledPage : ContentPage {

3. Nast pnie do konstruktora DistanceTravelledPage dodaj parametr walkItemokre laj cy wybrany szlak, co zaznaczono poni ej pogrubieniem:

public DistanceTravelledPage(WalkEntries walkItem){ Title = "Przebyty dystans";

4. Nast pnie zadeklaruj zmienn trailMap, która b dzie wskazywa a egzemplarz kontrolkiXamarin.Forms.Maps do utworzenia szpilki na mapie. Pos uguj c si wspó rz dnymigeograficznymi, wpisz w pliku poni sze pogrubione fragmenty kodu:





42

// utworzenie egzemplarza obiektu mapyvar trailMap = new Map();// wbicie szpilki w map dla wybranego szlakutrailMap.Pins.Add(new Pin{ Type = PinType.Place, Label = walkItem.Title, Position = new Position(walkItem.Latitude, walkItem.Longitude)});// wy rodkowanie mapy na pocz tku szlakutrailMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(walkItem.Latitude, walkItem.Longitude), Distance.FromKilometers(1.0)));

5. Nast pnie zadeklaruj kilka obiektów Label do prezentowania informacji z obiektuwalkItem przekazanego ze strony tre ci WalkTrailPage. Wpisz poni sze pogrubionefragmenty kodu:

var trailNameLabel = new Label(){ FontSize = 18, FontAttributes = FontAttributes.Bold, TextColor = Color.Black, Text = walkItem.Title};var trailDistanceTravelledLabel = new Label(){ FontAttributes = FontAttributes.Bold, FontSize = 20, TextColor = Color.Black, Text = "Przebyty dystans:", HorizontalTextAlignment = TextAlignment.Center};var totalDistanceTaken = new Label(){ FontAttributes = FontAttributes.Bold, FontSize = 20, TextColor = Color.Black, Text = $"{ walkItem.Distance } km", HorizontalTextAlignment = TextAlignment.Center};var totalTimeTakenLabel = new Label(){ FontAttributes = FontAttributes.Bold, FontSize = 20, TextColor = Color.Black, Text = "Czas:", HorizontalTextAlignment = TextAlignment.Center};var totalTimeTaken = new Label(){ FontAttributes = FontAttributes.Bold,





43

FontSize = 20, TextColor = Color.Black, Text = "0 h 0 m 0 s", HorizontalTextAlignment = TextAlignment.Center};

6. Nast pnie zadeklaruj zmienn walksHomeButton, która dziedziczy po klasie Button,i przejd do definicji procedury obs ugi klikni , która w przypadku wykrycia klikni ciab dzie przenosi u ytkownika do g ównej strony tre ci WalksPage. Wpisz poni szefragmenty kodu:

var walksHomeButton = new Button{ BackgroundColor = Color.FromHex("#008080"), TextColor = Color.White, Text = "Zako cz ten szlak"}; // definicja procedury obs ugi zdarze walksHomeButton.Clicked += (sender, e) => { if (walkItem == null) return; Navigation.PopToRootAsync(true); walkItem = null;};

7. Nast pnie zdefiniuj kontrolk ScrollView wchodz c w sk ad klasy bazowejXamarin.Forms.Core oraz dodaj wszystkie pola formularza Button i Label do kontrolkiStackLayout. Wpisz poni szy fragment kodu:

this.Content = new ScrollView{ Padding = 10, Content = new StackLayout { Orientation = StackOrientation.Vertical, HorizontalOptions = LayoutOptions.FillAndExpand, Children = { trailMap, trailNameLabel, trailDistanceTravelledLabel, totalDistanceTaken, totalTimeTakenLabel, totalTimeTaken, walksHomeButton } } }; } }}





44

Prac zacz li my od zaimportowania klasy TrackMyWalks.Models, poniewa za jej pomoc b dzie-my pobiera informacje przekazywane ze strony WalksPage. Pakiet NuGet Xamarin.Forms.Mapsjest wieloplatformow bibliotek , za pomoc której programista mo e wy wietla i oznaczainformacje na mapie. My u yjemy tej kontrolki do wy wietlenia szpilki na mapie wraz z dodatko-wymi informacjami dotycz cymi danego szlaku.

Nast pnie deklarujemy zmienn trailMap wskazuj c egzemplarz kontrolki Xamarin.Forms.Mapsi tworzymy znacznik w postaci szpilki na mapie zawieraj cej dane dotycz ce wybranego szlaku,po czym centrujemy go na mapie, aby ukaza ca y obszar obj ty przez szlak na podstawiewspó rz dnych szeroko ci i d ugo ci geograficznej. Potem deklarujemy i inicjalizujemy kilkaobiektów Label zawieraj cych informacje walkItem, które zosta y przekazane ze strony tre ciWalkTrailPage, po czym deklarujemy zmienn walksHomeButton, która dziedziczy po klasie Button,i konfigurujemy zdarzenie Clicked dla klasy Button, przy u yciu którego b dziemy wraca doTrackMyWalks.

Na koniec definiujemy kontrolk ScrollView, która wchodzi w sk ad klasy bazowej Xamarin.Forms.Core, i dodajemy wszystkie pola formularza Button i Label do kontrolki StackLayout.

W nast pnej kolejno ci musimy zainicjalizowa pakiet NuGet Xamarin.Forms.Maps w klasachstartowych dotycz cych ka dej z naszych konkretnych platform (np. AppDelegate.cs w przypadkusystemu iOS i MainActivity.cs w przypadku systemu Android). Oto opis, jak to zrobi krok po kroku.

1. Otwórz plik AppDelegate.cs w edytorze kodu i dodaj do niego fragment koduzaznaczony pogrubieniem:

//// AppDelegate.cs// TrackMyWalks//// Autor: Steven F. Daniel, 04.08.2016// Copyright © 2016 GENIESOFT STUDIOS. All rights reserved.//using Foundation;using UIKit;

namespace TrackMyWalks.iOS{ [Register("AppDelegate")] public partial class AppDelegate :global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate { public override bool FinishedLaunching(UIApplication app, NSDictionary options) { global::Xamarin.Forms.Forms.Init(); Xamarin.FormsMaps.Init(); LoadApplication(new App()); return base.FinishedLaunching(app, options); }

}}





45

Najpierw zaznaczyli my, e nasza klasa AppDelegate ma korzysta z biblioteki Xamarin.Forms.Maps,dodaj c wywo anie metody Xamarin.FormsMaps.Init, która inicjalizuje platform Xamarin.Forms,dzi ki czemu nasze rozwi zanie TrackMyWalks mo e wykorzystywa mapy. Gdyby zabrak otego wywo ania w tym miejscu, na stronie tre ci DistanceTravelledPage nie pojawia aby si mapai strona ta nie dzia a aby zgodnie z oczekiwaniami.

Wi cej informacji na temat biblioteki Xamarin.Forms.Maps i ró nych rodzajów dost pnych klas mo na zna-le w dokumentacji Xamarin pod adresem https://developer.xamarin.com/api/namespace/Xamarin.Forms.Maps/.

Tworzenie strony ekranu startowegoW tym podrozdziale rozpoczniemy budow interfejsu u ytkownika dla naszej strony startowej,która b dzie wykorzystywana tylko na platformie Android, poniewa w systemie iOS jest dost pnaodpowiednia metoda. Na razie nasza strona startowa (ang. splash page) b dzie zawiera a jedy-nie domy ln ikon Xamarin, ale pó niej zmienimy j na co bardziej odpowiedniego dla naszejaplikacji.

1. Utwórz now stron ContentPage o nazwie SplashPage w sposób opisanyw poprzednim podrozdziale.

2. Otwórz plik SplashPage.cs w edytorze kodu i wpisz fragment kodu zaznaczonypogrubieniem:

//// SplashPage.cs// TrackMyWalks//// Autor: Steven F. Daniel, 04.08.2016// Copyright © 2016 GENIESOFT STUDIOS. All rights reserved.//using System;using System.Threading.Tasks;using Xamarin.Forms;

namespace TrackMyWalks{ public class SplashPage : ContentPage {Nast pnie znajd konstruktor SplashPage i wpisz poni szy pogrubiony kod:public SplashPage(){ AbsoluteLayout splashLayout = new AbsoluteLayout { HeightRequest = 600 }; var image = new Image(){





46

Source = ImageSource.FromFile("icon.png"), Aspect = Aspect.AspectFill,};

AbsoluteLayout.SetLayoutFlags(image, AbsoluteLayoutFlags.All);AbsoluteLayout.SetLayoutBounds(image, new Rectangle(0f, 0f, 1f, 1f));

splashLayout.Children.Add(image);

Content = new StackLayout(){ Children = { splashLayout }};}

3. W dalszej kolejno ci znajd metod OnAppearing i wpisz kod:

protected override async void OnAppearing(){ base.OnAppearing();

// kilkusekundowe opó nienie wy czenia ekranu startowego await Task.Delay(3000);

// utworzenie egzemplarza NavigationPage i przypisanie go do MainPage var navPage = new NavigationPage(new WalksPage() { Title = "Track My Walks" }); Application.Current.MainPage = navPage; } }}

Najpierw importujemy klas System.Threading.Tasks, za pomoc której b dziemy mogli zdefi-niowa krótkie opó nienie pozwalaj ce u ytkownikom przez chwil ogl da ekran startowy zgod-nie z definicj w metodzie klasowej OnAppearing.

Nast pnie deklarujemy zmienn splashLayout typu AbsoluteLayout, przy u yciu której proporcjo-nalnie ustawiamy po o enie i rozmiar ka dego elementu potomnego w naszym widoku, a potemustawiamy w asno HeightRequest.

Pó niej deklarujemy zmienn image dziedzicz c po klasie Image, w asno ci Source przypisujemyobraz, którego chcieliby my u y , a w asno Aspect ustawiamy tak, aby obraz ten wype niaca y widok.

Na zako czenie przypisujemy warto ci w asno ciom LayoutFlags i LayoutBounds w klasieAbsoluteLayout w taki sposób, aby obraz zmienia rozmiar wraz z widokiem. Nast pnie dodajemysplashLayout do strony tre ci za pomoc kontrolki StackLayout. Przes aniamy te metod





47

OnAppearing cyklu ycia strony Xamarin.Forms.Page, która to metoda jest wywo ywana bezpo-rednio przed pojawieniem si strony na ekranie, i definiujemy opó nienie d ugo ci trzech

sekund przed utworzeniem nowego egzemplarza strony NavigationPage, która wyznaczy naszstron WalksPage jako g ówn stron tre ci.

Modyfikacja klasy App Xamarin.FormsW tej sekcji zainicjalizujemy klas App z biblioteki Xamarin.Forms, aby wywo ywa a nasz stronSplashPage i ustawia a stron g ówn aplikacji, je li wykryje urz dzenie z systemem operacyj-nym Android.

Oto lista czynno ci do wykonania: 1. Otwórz plik TrackMyWalks.cs znajduj cy si w grupie TrackMyWalks w edytorzekodu.

2. Znajd metod App i wpisz poni szy pogrubiony fragment kodu, jak pokazanona listingu:

//// TrackMyWalks.cs// TrackMyWalks//// Autor Steven F. Daniel, 04.08.2016// Copyright © 2016 GENIESOFT STUDIOS. All rights reserved.//using Xamarin.Forms;

namespace TrackMyWalks{ public class App : Application { public App() { // sprawdzenie platformy if (Device.OS == TargetPlatform.Android) { MainPage = new SplashPage(); } else { // strona g ówna aplikacji var navPage = new NavigationPage(new TrackMyWalks.WalksPage() { Title = "Track My Walks" }); MainPage = navPage; } } }}





48

W kodzie tym najpierw za pomoc klasy Device.OS sprawdzili my, na czym dzia a nasza aplikacjaXamarin.Forms, nast pnie przy u yciu klasy TargetPlatform sprawdzili my, czy dzia a ona w sys-temie operacyjnym Google Android. Je li tak, to w asno ci MainPage konstruktora App przypisuje-my nowy egzemplarz strony ContentPage, który b dzie wykorzystywa stron SplashPage jakostron g ówn . Je li wynik testu jest negatywny, tworzymy nowy egzemplarz klasy NavigationPage,który ustawiamy na nasz stron WalksPage, po czym ustawiamy go jako g ówn stron tre ci.

Ró nice mi dzy Xamarin Studioi Visual StudioJe eli kto chce tworzy aplikacje mobilne, to obecnie ma do wyboru dwa rodowiska programi-styczne: Xamarin Studio i Microsoft Visual Studio. Podkre l , e cho wszystkie zrzuty ekranui przyk ady kodu pokazywane w tej ksi ce zosta y utworzone w Xamarin Studio na kompute-rze Apple Macintosh, to kod powinien bez problemu da si skompilowa tak e w systemie Win-dows w rodowisku Microsoft Visual Studio 2015.

Zanim jednak na powa nie zag bisz si w tajniki tworzenia aplikacji mobilnych, musisz wiedzie ,e te dwa rodowiska dziel istotne ró nice. Je li korzystasz z Xamarin Studio w systemie Win-

dows, to przy tworzeniu nowego rozwi zania Xamarin.Forms zawsze automatycznie otrzymaszrozwi zanie Android.

Je li chcesz integrowa i tworzy aplikacje dla systemu Windows Phone, musisz pos ugiwasi rodowiskiem Microsoft Visual Studio w systemie Windows. Aby tworzy aplikacje dla systemuiOS, musisz przygotowa Maca do roli hosta kompilacji Xamarin, w czaj c zdalne logowaniew preferencjach systemowych i wybieraj c Maca jako host kompilacji w rodowisku MicrosoftVisual Studio na komputerze z systemem Windows.

Wi cej informacji na temat przygotowania Maca do roli hosta kompilacji Xamarin znajduje si w dokumentacjirodowiska Xamarin na stronie https://developer.xamarin.com/guides/ios/getting_started/installation/

windows/connecting-to-mac/.

Znaj c podstawowe ró nice mi dzy Xamarin Studio i Microsoft Visual Studio, mo emy przej dokompilacji, budowy i uruchomienia naszej aplikacji TrackMyWalks w symulatorze systemu iOS.





49

Uruchamianie aplikacji TrackMyWalksw symulatorzeW tym podrozdziale dowiesz si , jak skompilowa i uruchomi aplikacj TrackMyWalks. Mo eszj uruchomi w prawdziwym urz dzeniu lub wybra jeden z kilku dost pnych symulatorówurz dze z systemem iOS.

Numer wersji symulatora zale y od wersji pakietu SDK systemu iOS zainstalowanego w kompu-terze. Wykonaj nast puj ce czynno ci:

1. Aby uruchomi aplikacj , wybierz urz dzenie z listy dost pnych symulatorówsystemu iOS i kliknij opcj menu Uruchom.

2. Nast pnie otwórz podmenu Uruchom za pomoc , kliknij opcj Custom Configuration…(konfiguracja u ytkownika), po czym kliknij przycisk Run (uruchom) w okniedialogowym Custom Parameters (parametry u ytkownika).





50

3. Ewentualnie mo esz skompilowa i uruchomi aplikacj TrackMyWalksnaci ni ciem kombinacji klawiszy Command+Return.

Po zako czeniu kompilacji pojawi si okno symulatora systemu iOS z uruchomion aplikacjTrackMyWalks, co przedstawiono na poni szym zrzucie ekranu:

Jak wida na powy szym rysunku, obecnie aplikacja wy wietla list statycznych wpisów natemat szlaków, które to wpisy s prezentowane w widoku ListView. Gdy u ytkownik kliknie przy-cisk Dodaj szlak, zostanie wy wietlona strona tre ci WalkEntry, na której mo na wprowadzidane dotycz ce kolejnego szlaku.

Obecnie strona ta jeszcze nie zapisuje wprowadzonych informacji, ale w nast pnych rozdzia achdodamy odpowiednie mechanizmy. Klikni cie przycisku Zapisz b dzie powodowa o powrót dog ównej strony aplikacji TrackMyWalks (zobacz rysunek na nast pnej stronie).

Na zrzucie ekranu przedstawiono sposób nawigacji mi dzy stronami, gdy u ytkownik wybierzez listy szlak. Na ostatnim ekranie pokazany jest przebyty dystans wraz ze szpilk wskazuj cmiejsce szlaku na mapie.





51

Gratulacje! W a nie uko czy e prace nad podstawow struktur aplikacji TrackMyWalks i inter-fejsem u ytkownika wszystkich stron tre ci, które b d wykorzystywane w tej aplikacji. W na-st pnych rozdzia ach zastosujemy w naszej aplikacji lepsze wzorce projektowe, zdefiniujemyadniejsze elementy interfejsu u ytkownika oraz dodamy mechanizm synchronizacji danych na

bie co oparty na REST-owych interfejsach API us ug sieciowych.

PodsumowanieW tym rozdziale pokaza em Ci, jak utworzy wieloplatformow aplikacj Xamarin.Forms dlasystemów iOS i Android. Potem opisa em kilka stron tre ci ze statycznymi danymi.

W nast pnym rozdziale przyjrzymy si , jak za pomoc domy lnych interfejsów API nawigacjiXamarin.Forms mo na przechodzi mi dzy stronami z tre ci (które w znacznym stopniu omówimyw rozdziale 3.) z zastosowaniem w nich elastyczniejszej us ugi nawigacyjnej, atwiej poddaj cejsi konfiguracji. Na koniec omówi em najwa niejsze ró nice mi dzy rodowiskami programi-stycznymi Xamarin Studio i Microsoft Visual Studio oraz pokaza em, jak uruchomi aplikacjTrackMyWalks w symulatorze.

W kolejnym rozdziale poznasz wzorzec architekturalny MVVM (ang. Model-View-ViewModel— „model – widok – model widoku”) i dowiesz si , jak go zaimplementowa w swojej aplikacji,oraz nauczysz si dodawa nowe modele widoków do swojego rozwi zania Xamarin.





52




Skorowidz

AAndroid, 26, 45, 48, 53, 151, 278, 291, 307, 319

kontrolka, 169, 174typ pola, 310

aplikacjadebugowanie, 309ekran, 307identyfikator, 331

UDID, 339interakcja, 307kompilowanie, 49, 50mobilna, 223profil dostarczania, 333publicznie dost pna na Facebooku, 259cie ka do pakietu, 309

uruchamianie, 49, 50uruchamianie w symulatorze, 309

Apple App Store, 321, 322, 328, 333, 344Member Center, 336opcja cenowa, 343

Azure, 222, 236, 243komunikacja, 238konto, 222

Bbaza danych

relacyjna, 201wykluczania wzajemne, 202

biblioteka, Patrz te : pakiet.NET Xamarin.Auth, 259Moq, 293, 297, 298, 299NUnit.Framework, 302Portable Class Library, 23, 29

Shared Library, 23SQLite, 203sqlite-net, 199System.Net.Http.HttpClient, 229, 232Xamarin.Forms.Maps, 45

Bundle ID, 342

Ddane

baza, Patrz: baza danychszablon, Patrz: szablon danychtyp, Patrz: typ

dyrektywa @model, 208, 211

Eefekty, 172, 174, 186ekran

aplikacji, 307startowy, 45, 47, Patrz te : strona startowazrzut, 309

element potomny, 46etykieta, 55

EntryCell, 37

FFacebook, 256, 257, 310

uwierzytelnianie, 257, 259, 261, 269, 311OAuth 2.0, 259token, 265, 266, 267, 272

format JSON, 227funkcja SSO, 283





354

Ggeolokalizacja, Patrz: lokalizacja

Iinstrukcja using, 161interfejs, 87

API, 82, 156, 169, 170, 174, 222, 227Facebooka, 259Graph, 267, 268

Effects Xamarin.Forms, 169, 170, 174ILocationListener, 127INotifyCollectionChanged, 55INotifyPropertyChanged, 55, 56INotifyPropertyChangedInterface, 58lokalizacji, 122NavigationService, 273us ugi nawigacji, 84

tworzenie, 85, 87u ytkownika, 34, 53, 54, 156,

Patrz te : widokekran startowy, Patrz: ekran startowy,

strona startowatestowanie, 305, 316tworzenie, 37, 41wska nik aktywno ci, 183

Xamarin.Forms.INavigation, 82, 83iOS, 45, 48, 53, 151, 164, 195, 278, 279, 283,

291, 307, 315, 319certyfikat programistyczny, 326, 328

algorytm, 326d ugo klucza, 326

kontrolka, 169, 170typ pola, 310wersja, 137

iTunes Connect, 321, 323powiadomienia, 324pozycja tworzenie, 340rola, 323u ytkownik, 323

Jj zyk

C#, 21, 314F#, 21XAML, 53

Kklasa

AbsoluteLayout, 46App, 26, 47AppDelegate, 315AppInitializer, 308, 309, 310AppQuery, 308Assert, 300, 301BooleanConverter, 178Button, 39, 43CLLocationManager, 131, 133ConfigureApp, 307, 308, 309DataService, 235, 238, 241DataTemplate, 155, 156DataTemplates, 160

odwo anie, 161Device, 151, 152EntryCellEditText, 310FacebookApiAuthToken, 265, 272, 281FacebookApiUser, 256, 264, 279FacebookAuthToken, 267FacebookCredentials, 266, 281HttpClient, 233, 234HttpClientHandler, 233, 234HttpMessageHandler, 233HttpMethod, 238HttpRequestMessage, 233IApp, 307, 308Image, 46IValueConverter, 178, 179Java.Lang.Object, 127JsonProperty, 231ListView, 161LocationEventArgs, 127MainActivity, 149, 218Mock, 297, 299modeli widoków, 56, 58NavigationService, 273, 274Newtonsoft.Json, 231NSAppTransportSecurity, 285NUnit.Framework.Test, 302OAuth2Authenticator, 257, 271OAuth2Request, 269opakowuj ca, 199, 205PageViewModel, 243PlatformEffect, 171, 172, 173, 174, 176PlatformEffects, 183, 186, 189




Skorowidz

355

SQLite, 218SQLiteConnection, 203System.IO, 218System.Threading.Tasks, 46TargetPlatform, 151Task, 88testowa, 296

TestFixture, 297, 298, 299, 301ToolbarItem, 34UIAlertView, 131UIPickerView, 168UIPickerViewModel, 165UITextField, 310us ugi nawigacji, 84, 88ViewRenderer, 271, 273WebViewController, 208, 217WebViewController,, 218Xamarin.Auth, 269Xamarin.Forms.App, 118, 150, 282Xamarin.Forms.Application, 26Xamarin.Forms.Core, 43, 44

konsola klienta REST, 227kontrolka, 156

EntryCell, 162, 163formularza, 55ListView, 31, 162, 184, 245, 252progressLabel, 184ScrollView, 39, 43, 44StackLayout, 44TableView, 37UIPickerView, 168, 169Xamarin.FormsMap, 39

konwerterBooleanConverter, 177warto ci, 153, 177

logicznych, 178, 180

Llogika biznesowa, 26, 291, 305lokalizacja, 143

Android, 124iOS, 130monitorowanie w tle, 134, 136uwierzytelnianie, 132, 133, 134

Mmened er pakietów, 198metoda

AllowsBackgroundLocationUpdates, 137AppBundle, 309AreEqual, 300, 301asynchroniczna, 88Class, 308ClearText, 307Convert, 178, 179ConvertBack, 178, 179Css, 308Debug, 309DeleteItem, 204Detached, 176DeviceIdentifier, 309didAuthorizationChange, 133DisplayActionSheet, 247, 248Effect.Resolve, 186EnableLocalScreenshots, 309EnterText, 307ExecuteSaveCommand, 142FacebookApiUser, 266FinishedLaunching., 315GenerateString, 213, 214GetItem, 203GetItems, 203, 213GetMyLocation, 131GetProfileInformation, 269GetResponseAsync, 268HttpMethod GET, 232HttpMethod.Delete, 237, 238HttpMethod.Get, 237, 238HttpMethod.Post, 237, 238InsertPageBefore, 83JsonConvert, 233LoadHtmlString, 213, 214Marked, 308, 313NavigateToViewModel, 87NetworkProvider, 129OnAppearing, 46

przes anianie, 47OnAttached, 171, 176OnDetached, 171, 173, 175OnLocationChanged, 127, 128OnPropertyChanged, 58OnProviderDisabled, 127, 128





356

metodaOnProviderEnabled, 127, 128OnStatusChanged, 127, 128PopAsync, 83PopModalAsync, 83PopToRootAsync, 83PostTaskAsync, 267PushAsync, 83PushModalAsync, 83, 279Query, 307, 308RemovePage, 83Repl, 307, 309RequestAlwaysAuthorization, 137SaveItem, 204Screenshot, 307SendRequestAsync, 237SetDatabaseConnection, 206StartApp, 308, 309Tap, 307, 313TargetPlatform, 151testowa, 302UITest, 307WaitForElement, 307, 308zwrotna, 284

Microsoft Azure, Patrz: AzureMicrosoft Development Platform, 27Microsoft Visual Studio, 48model, 53, 54, 55

danych, 53FacebookApiUser, 264

TrackMyWalks, 29, 31widoku, 53, 54, 55, 61, 94, 97, 100, 107, 111,

138, 180, 186, 188, 243, 245, 274implementowanie, 55, 59, 60, 63, 70testowanie, 295tworzenie, 73

MVVM, 53, 54, 56

Nnawigacja, 88

hierarchiczna, 82implementowanie, 84modalna, 82przy u yciu bezpo rednich odwo a , 83Xamarin.Forms, 82

nazwa odwrócona kolejno elementów adresudomeny, 24, 331

Oobiekt

AppResult, 307ContentPage, 27Context, 128control, 174, 176danych, 26DataTemplate, 31EntryCell, 34EventHandler, 128, 131Label, 34pickerView, 165ToolbarItem, 37wi zalny, 70

okienko dialogowe, 133

Ppakiet, Patrz te : biblioteka

aktualizowanie, 27NuGet, 27, 198

HttpClient, 229Json.Net, 227, 228Moq, 293, 297, 298, 299SQLite.Net, 197, 198Xamarin Test Cloud Agent, 314, 315, 319Xamarin.Auth, 259, 261, 283Xamarin.Forms.Maps, 39, 41, 44, 45

SDK, 49Facebooka, 259, 261, 263, 283

Xamarin.Forms, 27pami ci zwalnianie, 142parametr

ci le typizowany, 88TParameter, 87

paseknarz dzi, 167NavigationBar, 148nawigacji, 277

plik.cs, 26, 31.cshtml, 196AppDelegate.cs, 217AppInitializer.cs, 305info.plist, 342MainActivity.cs, 217style.css, 197, 218




Skorowidz

357

szablonowy domy lny, 24Test.cs, 305WebViewController.cs, 199, 200

projektobszar, 25PCL, 26TrackMyWalks, 22, 26tworzenie, 22

protokóApp Transport Security, 285HTTP, 221, 238

przycisk, 55, 281

RRazor, 194, 199, 206, 208, 212

ASP.NET, 194tworzenie, 194, 207, 209, 210, 215wywo anie, 208

renderer, 156tworzenie, 162, 164Xamarin.Forms.ViewCell, 160

renderowanie, 155

Ssie komórkowa, 129silnik szablonu Razor, Patrz: Razors ownik, 84splash page, Patrz: strona startowastos NavigationStack, 276strona

Client OAuth Settings, 257ContentPage, 34, 37

tworzenie, 31g ówna szablon danych, 160przystosowywanie do MVVM, 61, 67, 71, 76,

97, 104, 109, 115startowa, 45, 147

strongly typed, Patrz: parametr ci le typizowanysymulator, 49system

Android, Patrz: AndroidiOS, Patrz: iOSWindows Phone, Patrz: Windows Phone

szablon danych, 156na stronie g ównej, 160Razor, Patrz: Razor

rodowiskoCalabash, 316NUnit, 290, 291, 314NUnit.Test, 301testowe, 290, 291UITest, 290, 305, 307Xamarin Studio, 290, 291, 305, 314, 344,

349, 351Xcode, 339, 340

Ttest

akceptacyjny, 316jednostkowy, 291

tworzenie, 296uruchamianie, 302, 303, 304warunek testowy, 302

NUnit, 290, 291, 296, 298UITest, 290, 305, 318wstrzymanie, 307, 309Xamarin.UITest, 314

TrackMyWalks model, 29, 31typ

AbsoluteLayout, 46EntryCellEditText, 310IDictionary, 236List, 208PropertyChangedEventHandler, 58StackLayout, 185UITextField, 310UIWebView, 214

Uus uga

IaaS, 222lokalizacji, Patrz: lokalizacjaPaaS, 222SaaS, 222sieciowa chmurowa, 221Xamarin.FormsDependencyService, 127





358

Wwi zanie, 190

BindingMode.OneWay, 69, 70BindingMode.OneWayToSource, 70BindingMode.TwoWay, 70

widok, 26, 53, 54, 55, 274StackLayout, 34TableView, 34, 37, 162UIPickerView, 165

wiersz polece , 227Wi-Fi, 129Windows, 151, 177Windows Phone, 48, 53, 151, 307wzorzec model – widok – model widoku,

Patrz: MVVM

XXamarin Studio, 48Xamarin.Forms, 22, 27

Zzdarzenie

Clicked, 39, 109, 117CollectionChanged, 55Completed, 272PropertyChanged, 55

zespó programistów iOS, 321, 322

danie HTTP, 227




http://program-partnerski.helion.pl

Tytuł oryginału: Mastering Xamarin UI Development · 2019-05-15 · Dodawanie agenta Xamarin Test...

Documents

Transcript of Tytuł oryginału: Mastering Xamarin UI Development · 2019-05-15 · Dodawanie agenta Xamarin Test...