Shared iOS and Android app using Xamarin.Forms with custom …beta.eaict.ap.be/wp-content/uploads/2015/06/Vercammen... · 2015-06-23 · Shared iOS and Android app using Xamarin.Forms

Scriptie ingediend tot het behalen van de graad van

PROFESSIONELE BACHELOR IN DE ELEKTRONICA-ICT

Shared iOS and Android app usingXamarin.Forms with custom controls

Robin Vercammen

Departement Wetenschappen en Techniek

Opleiding Elektronica-ICT

Academiejaar 2014-2015

Interne promotor: Jeroen DoggenExterne promotor: Thomas Van Sundert

Versie: 7 juni 2015

Dankwoord

Drie maanden stage, een eerste werkervaring, het begin van meer.

Dit werk is er gekomen dankzij de prachtige kans die Appstrakt aangeboden heeft. In hetbijzonder zijn het mijn teamgenoten die ik hier wil bedanken: Dusty Saman en Thomas VanSundert, bedankt om me deze kans te bieden, met jullie samen te werken en me zo op te nemenin het hele proces. Het is een eer.

Antwerpen, 7 juni 2015Robin Vercammen

i

Abstract

Xamarin.Forms is een concept ontwikkeld door het bedrijf Xamarin. Dit concept heeft “writeonce, run everywhere” als doel. Hierdoor wordt het mogelijk een gedeelde code basis voorzowel UI als business logica te hebben. Gevolg hiervan is dat de ontwikkeltijd van een applicatievoor de 3 grootste smartphone platformen (Windows Phone, Android en iOS) veel kleineren beter beheerbaar wordt. Doordat Xamarin.Forms -op zijn zachts uitgedrukt- nog in zijnkinderschoenen staat, zijn er vele uitdagingen die nog aangegaan moeten worden om te strevennaar een code basis.

In de Xamarin.Forms toolkit zitten veel te weinig aanpasbare interactieve elementen (zoals bv.knoppen) die eenvoudig integreren in een bestaande applicatie, wat het ontwikkelen van eenapplicatie hard beperkt. De performance van Xamarin.Forms in bepaalde scenario’s nog nietgeoptimaliseerd.

De door mij gemaakte interactieve elementen zijn afgeleid van bestaande elementen of compleetnieuwe elementen. Om deze uit te breiden moet er toegang zijn tot het echte besturingssysteem.Op die manier kan functionaliteit ter beschikking gesteld worden voor de Xamarin Forms laag.

Ik heb actief deelgenomen aan het ontwikkelen van een applicatie gebruik makend vanXamarin.Forms. Bij deze ontwikkeling heb ik 9 nieuwe elementen toegevoegd en 5 elementenaangepast die hiermee de functionaliteit van Xamarin.Forms blijvend vergroot onder de vormvan herbruikbare componenten. Los van de applicatie waar ik tot heb bijgedragen tijdens destage heb ik een applicatie gebouwd die beschreven wordt in deze scriptie. Deze applicatiebevat vele best practices voor het ontwikkelen van een app met Xamarin.Forms

De criteria waaraan de elementen moeten voldoen zijn behaalt, zowel op visueel niveau als opfunctioneel niveau. De applicatie voldoet ook aan de vereisten.

ii

Inhoudsopgave

Dankwoord i

Abstract ii

1 Situering 11.1 Algemene situatieschets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2 Xamarin en Xamarin.Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3 Xamarin.Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Bespreking 42.1 Inleiding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42.2 Functionaliteit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.3 Architectuur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.3.1 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.3.2 ViewModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.3.3 Model en data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.3.4 Dependency injection - ninject . . . . . . . . . . . . . . . . . . . . . . 11

2.4 Bespreking componenten . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.4.1 Applicatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.4.2 Floatlabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.4.3 Formatter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.4.4 Picker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.4.5 Tabcontrol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.4.6 Badge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.4.7 Custom popup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.4.8 Contentpresenter en Itemcontrol . . . . . . . . . . . . . . . . . . . . . 282.4.9 Custom control voor herhalende afbeelding . . . . . . . . . . . . . . . 292.4.10 Custom scrollview . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.4.11 Performance van Xamarin Forms . . . . . . . . . . . . . . . . . . . . 332.4.12 IO met Xamarin Forms . . . . . . . . . . . . . . . . . . . . . . . . . 36

iii

INHOUDSOPGAVE iv

2.4.13 Custom Activity indicator . . . . . . . . . . . . . . . . . . . . . . . . 372.4.14 Custom Webview . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392.4.15 Custom Keyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

2.5 Bespreking samenbrengen van componenten . . . . . . . . . . . . . . . . . . 44

3 Resultaten 45

4 Besluit 46

Lijst van figuren

1.1 Evolutie smartphone gebruikers (bron: emarketer.com) . . . . . . . . . . . . . 11.2 Aandeel van mobiele besturingssystemen (bron: idc.com) . . . . . . . . . . . . 2

2.1 Floatlabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.2 Floatlabel flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162.3 Formatter Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.4 Tabcontrol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.5 Tabcontrol flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.6 Menu badge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.7 Verschil tussen popups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.8 Verduidelijking layout itemcontrol . . . . . . . . . . . . . . . . . . . . . . . . 292.9 Een voorbeeld van een herhalende afbeelding . . . . . . . . . . . . . . . . . . 292.10 Scrollview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.11 Indicators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372.12 Het Custom Keyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

v

Hoofdstuk1Situering

1.1 Algemene situatieschets

Het aantal smartphone gebruikers blijft stijgen. Nu wat maakt een smartphone smart? Enerzijdsde mogelijkheid om op het internet te surfen en anderzijds de mogelijkheid om applicaties teinstalleren. Veel bedrijven anticiperen hierop door een applicatie te maken voor hun product ofdienst en dit op deze manier aan de consument te brengen. Zoals te zien in figuur 1.1 ligt hethuidig aantal smartphone gebruikers rond 2.000.000.000 en wordt er verwacht dat het er tegen2017 2.500.000.000 zijn.

2012 1,13

2013 1,43

2014 1,75

2015 2,03

2016 2,28

2017 2,5

0

0,5

1

1,5

2

2,5

3

2012 2013 2014 2015 2016 2017

Aan

tal i

n m

iljar

de

n

Jaartal

Aantal smartphone gebruikers wereldwijd

Figuur 1.1: Evolutie smartphone gebruikers (bron: emarketer.com)

Dit zijn zeer veel gebruikers die relatief gemakkelijk benaderd kunnen worden door gebruik temaken van een applicatie. Nu voor een applicatie moet er een budget voorzien worden. Maar

1

HOOFDSTUK 1. SITUERING 2

op welke manier kunnen we dat budget verdelen en optimaal besteden?

Belangrijk voor een bedrijf is het publiek dat men wil aanspreken. Wil je als bedrijf zo veelmogelijk mensen bereiken dan ben je genoodzaakt applicaties bouwen voor de drie grootstemobiele platformen namelijk iOS, Android en Windows Phone. Qua marktaandeel is Androidleider gevolgd door iOS met als afsluiter Windows Phone. De verdeling van het marktaandeelis te zien in afbeelding 1.2. Rekening houdend met deze verdeling en de doelgroep nemenbedrijven beslissingen voor welke platformen ze hun applicatie willen ontwikkelen.

Android 76,60%

iOS 19,70%

Windows Phone2,80%

other 0,90%

76%

20%

3%

Wereldwijd marktaandeel mobiele besturingssystemen

Android iOS Windows Phone

Figuur 1.2: Aandeel van mobiele besturingssystemen (bron: idc.com)

Een tweede belangrijke factor is kostprijs. Wanneer je voor deze drie platformen wil ontwikkelenzullen er drie verschillende applicaties gemaakt worden wat betekend dat de ontwikkeltijdvermenigvuldigd kan worden met drie. Op deze manier stijgt de kostprijs evenredig.

Maar het kan ook anders.

HOOFDSTUK 1. SITUERING 3

1.2 Xamarin en Xamarin.Forms

Om deze ontwikkeltijd te verkorten heeft het Amerikaanse bedrijf Xamarin verscheideneproducten/ontwikkelomgevingen op de markt geplaatst.

Deze producten laten toe in een programmeertaal applicaties te schrijven voor de drieplatformen.Enerzijds is er Xamarin.iOS en Xamarin.Android, anderzijds Xamarin.Forms.

Xamarin.iOS en Xamarin.Android zijn bedoelt als wrapper rond de native programmeertalendie gebruikt worden om applicaties voor iOS en Android te maken (respectievelijk objective-cen java). Zo biedt Xamarin hier de mogelijkheid om in C# mobiele applicaties te schrijven.Hier is het al mogelijk code te delen tussen beide platformen. Dit gaat dan voornamelijk omachtergrond logica en niet om visuele aspecten. Op deze manier zal de tijd die het kost om eenapplicatie te bouwen voor deze platformen al verkleinen. In de meeste gevallen kan tot 75%1

van de code gedeeld worden. Wat hier niet gedeeld kan worden is de user interface. Deze zalnog steeds voor de platformen individueel opgesteld moeten worden.

Sinds mei 2014 is Xamarin nog een stap verder gegaan door het Xamarin.Forms platform teintroduceren. Dit platform abstraheert ook de visuele aspecten van een applicatie. Op dezemanier kan een developer, gebruikmakend van een programmeertaal en een user interface, tot100% code delen over de drie platformen. Dit houdt op zich weer een verkorting van deontwikkeltijd in.

1.3 Xamarin.Forms

Aangezien Xamarin.Forms nog een redelijk jong platform is, is het een uitdaging met ditplatform een mobiele applicatie te maken. Dit platform heeft nog niet standaard de gewenstefunctionaliteit. Het is momenteel belangrijk, naar toekomstige projecten toe, om een bibliotheekaan controls en functionaliteitselementen aan te leggen om deze te kunnen hergebruiken bijtoekomstige Xamarin.Forms projecten. Op die manier kan nog meer ontwikkeltijd bespaardworden. Xamarin.Forms voorziet voor alles een basis van functionaliteit maar laat ook toe denative bibliotheken aan te spreken van de besturingssystemen om zo alles naar wens aan tepassen en dit te hergebruiken in andere projecten.

1bron: http://xamarin.com/pr/xamarin-microsoft-partner

Hoofdstuk2Bespreking Xamarin Forms mobieleapplicatie

2.1 Inleiding

Voor dit project is er gekozen om Xamarin.Forms te gebruiken als platform om de mobieleapplicatie te ontwikkelen die zal draaien op zowel iOS als Android.

In deze scriptie wordt een applicatie met gelijkaardige functionaliteit besproken als de echteapplicatie waaraan ik heb meegewerkt. Deze gelijkaardige applicatie is door mij ontwikkeld nadatde echte applicatie klaar was. Door tijdsgebrek heeft deze applicatie dus niet alle functionaliteitdie de echte applicatie heeft maar illustreert deze het gebruik en best practices van een applicatiedie gemaakt is met Xamarin.Forms. De gemaakte custom controls bibliotheek is uiteraardhergebruikt in deze applicatie.

Het gebruik van Xamarin.Forms voor deze applicatie is zeker niet ideaal. Xamarin raadtmomenteel aan Xamarin.Forms enkel te gebruiken voor data invoer applicaties waar hethergebruiken van code veel belangrijker is dan een aangepaste vloeiende gebruikers interface.

In dit project bestaat ongeveer 75% van de interactie uit het bekijken van data. Deze datawordt onder andere weergegeven in lijsten. De overige 25% van de interactie bestaat uit hetinvullen van formulieren of het verzenden van berichten.

De Xamarin.Forms aanpak voor dit project is de oplossing die toelaat het meeste code te delen.Dit met als keerzijde dat er veel tijd nodig is om alle componenten cross-platform te ontwikkelenmet voor elk platform de nodige specificaties en abstracties.

4

HOOFDSTUK 2. BESPREKING 5

2.2 Functionaliteit

Deze applicatie zal gebruikt worden door een werknemer die vaak gebruik maakt vaninterimkantoren. Op deze manier zal de gebruiker zijn activiteiten kunnen bijhouden en bekijken.Zo zal de werknemer een overzicht hebben van het aantal gewerkte dagen, waar hij gewerktheeft, voor welke interim en wanneer hij gewerkt heeft.

Concreet zal de gebruiker, na een account aangemaakt te hebben, aangemeld worden in hetsysteem. Wanneer de gebruiker aangemeld is zal hij een dashboard te zien krijgen. In ditdashboard kan hij een overzicht raadplegen dat weergeeft voor welke interimkantoren hij gewerktheeft en voor welke kantoren hij zal gaan werken.

Dit overzicht biedt gestructureerd informatie over de laatste dag dat hij voor dat interim kantoorgewerkt heeft, het totaal aantal uren, job beschrijving en de naam van het interimkantoor.Dezelfde informatie wordt weergeven op het tabblad toekomstige werkgevers maar dan met hetverwachtte te presteren uren.

Wanneer de gebruiker kiest om het detail te zien van een bepaalde werkgever, door op een itemte tappen uit de lijst, zal hij een lijst van gewerkte dagen te zien krijgen. In deze lijst is tezien hoeveel uur hij die dag gewerkt heeft. een korte omschrijving van zijn werk die dag en dedatum waarop hij gewerkt heeft.

Elke dag zal nog voorzien worden van een groot detail scherm. Deze structureert alle informatieover een gewerkte dag zoals begin uur, einduur, werkplek, uurloon,. . .

Verder zal een werknemer manueel een record kunnen toevoegen. En zo kunnen bijhouden waarhij gewerkt heeft.

Binnen de applicatie zit ook een berichten gedeelte. Hier zal de werknemer terecht komen eneen lijst te zien krijgen van conversaties die hij gehouden heeft met een interimkantoor. Vanopdeze pagina kan de werknemer een nieuwe conversatie starten door een bericht te sturen naarhet interimkantoor. Wanneer de werknemer echter op een conversatie drukt zal een conversatiedetail pagina openspringen waar de berichten te lezen zijn. Via deze pagina kan de werknemerdan ook antwoorden op een conversatie en zo verder in dialoog treden met het interimkantoor.

De functionaliteit van de individuele controls die bijgedragen hebben tot de bibliotheek zijn tevinden vanaf 2.4.2.


2.3 Architectuur

Bij een Xamarin.Forms project kan er gebruik gemaakt worden van het model view viewmodel(MVVM) patroon. Hierbij is het mogelijk om verscheidene delen van de applicatie van elkaaraf te scheiden en geen vaste relatie te leggen tussen componenten. Voeg hier nog eenvleugje ninject (Dependency injection container) aan toe en je verkrijgt een onderhoudbareen losgekoppelde applicatie.

Een goede basis om MVVM te kunnen toepassen is de aanwezigheid om je UI (de view)te kunnen binden aan de applicatie logica (het viewmodel). Binnen Xamarin.Forms is dezemogelijkheid aanwezig en kan je gebruik maken van binding statements om bijvoorbeeldtekstinvoer van de view door te lussen naar het viewmodel. Het voordeel hiervan is dat hetviewmodel niet hoeft te weten of die tekst uit een entry komt, een label of eender welkeandere component, het enige wat belangrijk is, is dat deze het juiste type heeft en gebruikt kanworden door het viewmodel. Het viewmodel kan dan bijvoorbeeld data ophalen van een externeservice. Zo krijg je een relatie waarbij het model niets hoeft te weten over het viewmodel enhet viewmodel niets hoeft te weten over de view.

2.3.1 View

Binnen de view laag wordt de user interface beschreven zo zal er hier bepaald worden hoe degebruiker informatie te zien krijgt en hoe deze informatie kan invoeren. Een voorbeeld van eenview in dit project bijvoorbeeld het dashboard. Deze pagina bevat een lijst met informatie. Hoedeze lijst visueel wordt opgebouwd is de view beschreven. Binnen deze view zijn er dan labels.Voor deze labelse zij er bindings gelegd naar strings in het viewmodel.

Om een view van invoer te voorzien moet zijn bindingcontext ingesteld worden. Door viaconstructor injectie van de view het bijhorende viewmodel te laten injecteren door ninject kande bindingcontext hierop ingesteld worden.

Om de view nog onderhoudbaarder te houden zijn volgende concepten beschikbaar die ookgebruikt kunnen worden in de view.

Converters

Stel dat het viewmodel data aanlevert als een object van een bepaald type en je wil dat er eenbepaalde control getoond of niet getoond wordt wanneer het object null is. Kan dit met behulpvan converters.

Converters zijn klassen die de IValueConverter implementeren. Door de convert methode teimplementeren zal de data die van het viewmodel naar de view gaat omgevormd worden. Deconvertback methode zorgt ervoor dat invoer omgevormd kan worden om zo naar het viewmodelgestuurd te worden.


Converters worden toegevoegd aan de appresources van het project om deze te kunnen gebruikenin XAML bestanden.

Binnenin dit project wordt er bijvoorbeeld vaak gebruik gemaakt van een boolean en inverseboolean converter om bepaalde delen van de interface tijdelijk zichtbaar of onzichtbaar temaken.

Behaviors

Behaviors worden gebruikt om het gedrag van controls te kunnen aanpassen. Op basis vanwaarden die de control bevat worden andere eigenschappen van de control dan ingesteld. Eenalternatief voor behaviors is het maken van sub klassen van controls en daarin het gedragveranderen.

Een typisch gebruiksvoorbeeld is een entry wiens kleur van de lijn eronder aangepast moetworden wanneer er data validatie optreedt. Op deze manier is de behavior onafhankelijk vanhet viewmodel en werkt deze op view niveau door het eigenlijke gedrag van een control uit tebreiden.

Een behavior wordt gemaakt door over te erven van behavior en het type mee te geven waaropdeze behavior van toepassing op is. Verder wordt er verwacht dat je twee methoden override.De OnAttachedTo en OnDetachingFrom functie. In de OnAttachedTo kan je je inschrijven opevents van de control waarop je wil inspelen. In het voorbeeld van het valideren zal er gebruikgemaakt worden van het textchanged event van de entry. In de OnDetachingFrom wordt eruitgeschreven van het event om te vermijden dat er ongebruikte geregistreerde event handlersblijven hangen die voor memoryleaks kunnen zorgen.

In de event handler zullen dan de nodige gedragsveranderingen geımplementeerd worden.

Behaviors kunnen ook aan een style toegevoegd worden om zo op meerdere controls gebruiktte kunnen worden zonder deze individueel te hoeven voorzien van de behavior.

Styles

Wanneer er gebruik gemaakt wordt van visueel identieke controls, bijvoorbeeld entry velden,worden er vele properties ingesteld zoals bijvoorbeeld een fontsize,tekstkleur en font. Dit kunnenwe groeperen in styles. Binnenin deze styles kunnen we specificeren hoe bepaalde controls ermoeten uit zien. Het voordeel hiervan is dat we het zo overbodig maken om op elke controlsteeds weer dezelfde properties te zetten.

Een ander groot voordeel van het gebruik van styles is dat alle visueel aanpasbare eigenschappengestructureerd weergegeven worden en zo op een plek aangepast kunnen worden. Zo kan erbijvoorbeeld in de styles een kleur veranderd worden en dit effect hebben over de hele applicatie.


Styles kunnen ook zoals eerder beschreven worden uitgebreid worden met het gebruik vanbehaviors. Zo creeer je onderhoudbare en aanpasbare controls.

Navigatie

Navigatie wordt aangestuurd door het viewmodel maar het zijn natuurlijk wel views die moetenveranderen. Door gebruik te maken van een INavigationService die geımplementeerd is op hetview niveau als NavigationService. De NavigationService registreert alle pagina’s die voorzienzijn van het RegisterPageAttribuut waarmee de pagina klasse gedecoreerd wordt. Deze zal hetID van de pagina (een string opgeslagen in de navigation constants) bevatten. Zo wordenkunnen de pagina’s opgevraagd worden in de NavigationService om daar naar te navigeren. Opdeze manier zal de view het echte navigeren kunnen afhandelen wanneer het viewmodel vraagtom te navigeren.

Translations

In de views vermijden we best vaste strings te gebruiken voor statische tekst. De manier om ditop te lossen is door te werken met resources. Deze resources zijn een key value paar. Zo wordter aan elke string een key toegekend. Deze string wordt dan getoond wanneer in de view naardie key verwezen wordt. Nog een voordeel van deze aanpak is de mogelijkheid om verschillendetalen te ondersteunen. Zo zullen er resources zijn voor de verschillende talen.

Het ophalen van deze strings wordt mogelijk gemaakt door een gemaakte translationextension.Deze zal met behulp van een key uit de view de bijbehorende string ophalen uit de resourcesmet de juiste taal.

Deze extension is ook uitgebreid om verscheidene talen op te halen. Om dit mogelijk te makenwordt de taal van het toestel platform specifiek opgehaald zodat de translationextions de juistevalues kan ophalen.

Verder is er ook een klasse aangemaakt die het mogelijk maakt translations op te halen inbijvoorbeeld een converter.


2.3.2 ViewModel

Het viewmodel bezorgt data aan de view en gebruikt (invoer)data van de view om zo de deapplicatie logica te bepalen.

Een viewmodel implementeert INotifyPropertyChanged zodat de view kan weten wanneer ereen verandering gebeurd is van data. Om dit proces eenvoudiger te maken heb ik eenBaseViewmodel gebruikt die INotifyPropertyChanged implementeert en daar de implementatievan NotifyPropertyChanged gebeurd is. Zo kan elk nieuw viewmodel overerven van deze klasseen kan het gedrag van de NotifyPropertyChanged op een plek aangepast worden.

Geıllustreerd bij de dashboard pagina heeft het viewmodel verschillende taken:

Om te beginnen moet het viewmodel laten weten welke properties er veranderd zijn. Ditviewmodel bevat een lijst van werkgevers. Deze lijst is een property en in de setter wordtNotifyPropertyChanged aangeroepen zodat de view weet dat de data veranderd is. Deze zal deeigenschappen (tekst) in de visuele lijst aanpassen.

Ook kan een viewmodel data ophalen van een service. Zo wordt in ons voorbeeld -de dashboardpagina- data opgehaald via de ServiceClient die een implementatie is van IServiceClient. Zo ishet mogelijk data die van deze service terug komt eventueel om te vormen en toe te wijzen aande lijst.

Via de in 2.3.1 toegelichte Navigatie zal het viewmodel ook bepalen welke pagina’s getoondworden en in welke volgorde. Zo bepaald het viewmodel de flow van de applicatie.

Verder bevat het viewmodel ook nog enkele commands. Op deze commands kan ook gebindworden. Deze commands worden dan uitgevoerd bij bijvoorbeeld het klikken van een knop.


2.3.3 Model en data

In het model worden beschrijvingen van objecten geplaatst die gebruikt kunnen worden doorhet viewmodel.

In dit dummy project wordt er gebruik gemaakt van een lokale SQL database op de telefoonom data in op te slaan.

Een SQL database bestaat uit tabellen. Deze tabellen zijn in het dummy project gemaptnaar objecten. Deze objecten leven in het model. Om een echte service te mocken wordendeze objecten getransformeerd naar DTO (data transfer objecten) objecten die door het modelgebruikt worden en het viewmodel. In dit model zit ook een soort van data acces laag. Dezegaat de platform specifieke functies aanroepen om te schrijven naar een database. Zo zal dedata acces laag van DTO objecten de objecten maken die in de database terecht moeten komen.

In dit project wordt gebruik gemaakt van een ServiceClient. Het doel van deze klasse is objectenophalen en schrijven naar de database. Zo heeft deze klasse bijvoorbeeld de functie login. Aandeze functie wordt een username/password meegegeven. Bij het aanmaken van de serviceclientklasse wordt er door ninject een loginservice geinjecteerd. Deze loginservice heeft het doel enkeleen gebruiker in te loggen. Door gebruik te maken van deze niveau’s is de service eenvoudiguit te breiden met meer functies. Wanneer een functie dan aangepast moet worden kan dit ophet laagste niveau zonder dat er in de hogere lagen fouten optreden.


2.3.4 Dependency injection - ninject

Via dependency injection is het mogelijk om een contract te bepalen in het viewmodel waarbijvoorbeeld de view aan moet voldoen en dan het nodige object te bezorgen waar nodig.Een mooi voorbeeld hiervan is Navigatie. Zo kan een INavigationService interface aangemaaktworden in het viewmodel waarvan de implementatie zit in de view. Zo zal de viewmodel kunnenbepalen hoe de view moet navigeren. Zolang de view weet hoe er genavigeerd moet wordenhoeft het viewmodel hier zich geen zorgen over te maken.

De gebruike dependency injection container is Ninject. Ninject is een zeer configureerbare DIcontainer.

Ninject wordt toegevoegd aan het project met behulp van het nuget package.

Het startpunt van ninject is in de klasse die eerst gestart wordt (App.cs). Hier wordt een ninjectkernel object aangemaakt. Vanaf dit kernel object zullen objecten opgevraagd kunnen worden.

Ninject wordt geconfigureerd met behulp van modules. Deze modules bevatten een verplichtte overriden functie namelijk de load methode. Binnenin deze methode zullen de bindingsgedefinieerd worden. Deze bindings zorgen ervoor dat wanneer je aan Ninject bijvoorbeeld eenIServiceClient vraagt Ninject je een ServiceClient geeft. Ook heb je hier controle over de lifecyclevan het object zo zal er maar een ServiceClient nodig zijn en wordt deze InSingletonScopegedefinieerd.


2.4 Bespreking componenten

2.4.1 Applicatie

Deze dummy applicatie bevat veel best practices in verband met Xamarin.Forms. Deze sectiebevat informatie over hoe het project is opgebouwd en welke stappen nodig zijn om een werkendproject te krijgen. Dit project bevat ook de bibliotheek aan custom controls die vanaf 2.4.2wordt uitgediept.

Ik heb gewerkt met visual studio en Xamarin business.

In Visual Studio open ik een nieuwe lege solution. In deze solution voeg ik een nieuwe solutionmap toe met de naam ”UI”. Binnenin deze map voeg ik een Xamarin mobile app project toeen kies hier voor de optie met PCL. Ik voeg aan de main solution nog een project toe dit iseen Xamarin PCL en geef deze de naam ”Presentation”. Verder voeg ik nog een project toeop dezelfde manier en geeft dit ”Coreals naam. Om af te sluiten voeg ik Ninject toe aan elkUI project.

UI

In de UI solution folder voeg ik volgende folders toe: Locals, NinjectModules,Styles,UI enutilities. In de locals folder komen de resources die gebruikt worden voor de vertalingen enstatische tekst voor in de UI. De NinjectModules folder bevat alle modules voor de configuratievan ninject. In de Styles folder komen alle stijlen die gebruikt worden in XAML. In de UI mapkomen alle views terecht. De laatste folder utilities bevat converters, de implementatie vannavigatie en een helper om vertalingen op te halen.

Presentation

In het Presentation project zitten de custom exceptions, contracten waaraan de UI zich houdt omeen popup te kunnen tonen, te navigeren en vertalingen te kunnen ophalen. Het belangrijkstein deze dit project zijn de Viewmodels. Deze viewmodels zullen dan gebonden worden aan deviews in het UI project door ninject zijn constructor injectie.

Core

Hierin zit alle logica om data op te halen en op te slaan. In het echte project wordt er gebruikgemaakt van een echte service en komt de data van daar. In dit dummy project is de core ookverantwoordelijk voor het fysiek opslaan van de data. Om dit zo goed mogelijk af te kunnenscheiden heb ik gebruik gemaakt van volgende structuur (mappen/namespaces): Een databasecontract interface die de fysieke omgang met de database regelt zoals het pad naar het database


bestand en het lezen/schrijven naar die bestand door een connectie beschikbaar te stellen, deimplementatie van deze connectie zit in de platform specifieke projecten. Vanuit de databasekunnen ook exceptions optreden (wanneer bijvoorbeeld een operatie mislukt). Om deze zogestructureerd mogelijk te gebruiken in de hogere lagen heb ik een map DatabaseExceptionsaangemaakt waarin custom exceptions zitten. De volgende map bevat DTO objecten, dit zijnde objecten die ”doorgestuurd”worden naar de hogere lagen. De volgende map zijn POCO’sdit zijn klassen die de tabellen voorstellen in de database en daar 1 op 1 mee gemapt zijn. Danvolgt het belangrijkste: De service. Voor elke service is er ook een service contract (interface)dit zorgt er voor dat het zeer eenvoudig aanpasbaar en onderhoudbaar is. Om te beginnenis er een master service die alle services hun functies bundelt. Hierbinnen worden functies”doorgestuurd”naar de juiste klasse. Zo zal bijvoorbeeld de ServiceClient bij het registeren deregisterservice aanspreken om daadwerkelijk te registeren.


2.4.2 Floatlabel

Floatlabel is een control die gebruik maakt van een klein label dat verschijnt wanneer degebruiker in het tekstveld begint te typen. Dit label zal van kleur veranderen van zodra degebruiker de focus op een veld verliest. Zoals geıllustreerd in Figuur 2.1.

Figuur 2.1: Floatlabel

Gewenste functionaliteit

De floatlabel moet volgende functionaliteit bevatten:

� Label

– Font: Het label moet een font met bijbehorende fontsize kunnen bevatten.

– Tekst kleur: De kleur van de label moet aanpasbaar zijn in twee gevallen: het moetkunnen ingesteld worden vanuit de code alsook moet de floatlabel de kleur kunnenveranderen wanneer deze gefocust wordt.

– Tekst: Deze tekst zal meestal maar een keer ingesteld worden door gebruik te makenvan een translation file. Toch zorg ik ervoor dat er op deze tekst databinding kantoegepast worden zodat alle gevallen gedekt zijn.

– Animatie: Het label zal geanimeerd moeten worden vanaf dat de gebruiker typt inhet entry veld. Deze animatie behoort toe aan de floatlabel deze zal dit label zijnpositie aanpassen.

� Entry

– Focus: Zodat andere componenten weten of de floatlabel focus heeft en huneigenschappen daar kunnen aanpassen zoals bijvoorbeeld de lijn onder de floatlabeldie geen deel uitmaakt van de floatlabel.

– Keyboard: Bij een bepaald veld zal een bepaald type keyboard gewenst zijn dit inde vorm van een keyboard dat enkel ondersteuning bied voor numerieke invoer ofgebruik maakt van andere eigenschappen zoals een email keyboard dat er dan voorzorgt dat op het keyboard een ’@’ teken staat.


– Achtergrondkleur: Deze optie is nodig om ervoor te zorgen dat de defaultachtergrondkleur overschreven kan worden en zo da floatlabel beter integreert ineen bestaande applicatie.

– Achtergrondafbeelding: Op Android kan je een achtergrondafbeelding toevoegenaan een entry. Deze property zal geen invloed hebben op iOS maar dit laat wel toeop Android het standaard lijntje onder een entry veld te verwijderen.

– Font: Het label moet een font met bijbehorende fontsize kunnen bevatten.

– Tekst: De tekst van deze entry zal door middel van databinding zijn waarden doorgeven aan het viewmodel. Dit is het belangrijkste onderdeel aan deze control. Dezebinding moet twoway werken.

– Tekstkleur: Deze kleur zal eenmalig ingesteld worden door de pagina waarop defloatlabel gebruikt wordt.

– Placeholder font: De placeholder zal een font en een fontsize ingesteld moetenkrijgen.

– Placeholder tekst: Deze tekst zal meestal maar een keer ingesteld worden doorgebruik te maken van een translation file. Toch zorg ik ervoor dat er op deze tekstdatabinding kan toegepast worden zodat alle gevallen gedekt zijn.

– Placeholder tekstkleur:

� Floatlabel

– Formatter: Dit gedrag is een extra control. De floatlabel gaat dit gedrag gebruiken.Dit wordt verder uitgelegd in 2.4.3

– Autofocus gedrag: Dit gedrag was al geımplementeerd. De floatlabel moet ditgedrag kunnen aanvaarden.

– Done op keyboard toevoegen: Done toevoegen aan het keyboard kan op veleplaatsen dit gebeurd in de renderer van de entry die gebruikt wordt door de floatlabel.

Opbouw

Een floatlabel is een custom control die bestaat uit een entry en een label. Deze worden samengevoegd in een layout. De eerste versie van de floatlabel maakte gebruik van een relative layout.Dit houd in dat de floatlabel klasse overerft van de Xamarin Forms klasse ’RelativeLayout’.

De floatlabel klasse bevat twee objecten van het type view. Deze zijn een AppstraktEntry welkeovererft van de Xamarin Forms entry en een AppstraktLabel dat overerft van de Xamarin Formslabel. Deze worden gepositioneerd op de relativelayout.


De nodige properties van de entry en label members worden door middel van bindable propertiesbeschikbaar gesteld op de floatlabel klasse.

Werking

In figuur 2.2 is de flow te zien die beschrijft hoe de floatlabel intern werkt.

De werking van de floatlabel wordt in actie gezet wanneer de gebruiker begint te typen. Wanneerdat gebeurd zal de event handler entry propertychanged aanroepen. Deze zal evalueren welkeproperty veranderd is. Is dat de Focus property dan zal de kleur van de fontlabel veranderen.Wanneer deze de focus verliest zal de floatlabel ook de formatter toepassen. Wanneer deproperty tekst is zal deze de tekst opslaan in een variabele waarop gedatabind kan worden. Isde het tekstveld leeg dan zal het label verborgen worden middels een animatie. Wanneer detekst niet leeg is en het het eerste karakter is zal het label getoond worden.

Figuur 2.2: Floatlabel flow

Integratie

De floatlabel control is nu geıntegreerd in de bestaande controls bibliotheek en wordt ooktoegepast in de applicatie. Tijdens het implementeren van de floatlabel in de bestaande


applicatie zijn er vele problemen opgedoken. Deze problemen zal ik verder uitdiepen in layout-,performance- en functionaliteit- problemen.

Onder layout problemen vallen onder andere het niet goed integreren in bestaande layout. Doorgebruik te maken van paddings en relative positionering binnenin de floatlabel was het nieteven makkelijk te integreren met de bestaande layout van pagina’s. Dit gaat hand in hand metperformance problemen. Naarmate de floatlabels meer geıntegreerd raakten werd het duidelijkdat deze een zware impact hebben op de performance. Dit is vooral te merken bij het ladenvan pagina’s die meerdere floatlabels bevatten.

Door gebruik te maken van een absolute layout worden er meerdere problemen opgelost. Eenabsolute layout gebruikt minder layout cycli doordat -zoals zijn naam al doet vermoeden- ergebruik gemaakt wordt van absolute positionering. Dit heeft maar 1 layout cyclus nodig en zorgter dan ook voor dat dit geen invloed zal hebben op de positionering van de andere elementenop de pagina.

Een absolute layout is minder gebruiksvriendelijk om te gebruiken als ontwikkelaar. Het is welmogelijk de elementen te positioneren tegenover de plaats die de absolute layout inneemt. Ditzorgt ervoor dat je weinig rekening moet houden met verschillende schermgroottes. Doorgebruik te maken van de positioning flags van de absolute layout kan je de elementenpositioneren met als parameters een x,y,breedte en hoogte die, afhankelijk van de flags, inverhouding zijn met de absolutelayout.

De laadtijd die gemeten werd in 2.4.11 wordt door gebruik te maken van absolute layouts opandroid meer als gehalveerd.

Bij een absolute layout is er ook meer controle over de positionering van de objecten. Op dezemanier is het dan mogelijk de padding eruit te laten en deze absoluut te positioneren zodatdeze overal hetzelfde eruit zien en in elke andere container integreren.

Functionaliteitsproblemen waren te vinden in het feit dat origineel de floatlabel zijn label nietverdween nadat de entry opnieuw leeg gemaakt werd. Dit probleem is snel opgelost kunnenworden en de functionaliteit is op dat vlak dan uitgebouwd.


2.4.3 Formatter

De formatter komt voor in de floatlabel control. Verder wordt een soortgelijke formatter gebruiktin een converter. Op deze manier kan via de floatlabel automatisch gebruik gemaakt wordenvan de formatter en kan deze op andere plaatsen toegewezen worden.


De formatter moet volgende functionaliteit bevatten:

� Maximale lengte: Dit kan tevens gebruikt worden om te valideren

� Formaat: Het formaat waarin de tekst moet worden omgevormd in de vorm vaneen string: ”+@@ @@@ @@ @@ @@”bij een telefoonnummer zal bij het ingeven van”32476221516”geformatteerd worden als : ”+32 476 22 15 16”.

� Vrije keuze van de placeholder om toe te laten dat er andere placeholders gebruikt kunnenworden zodat ’@’ nog kan voorkomen in de string.

Werking

Telkens wanneer de invoer string van lengte veranderd, zal de formatter bekijken wat hij zalmoeten doen. Indien de lengte van de string gelijk is aan het aantal placeholder karakters datmeegegeven is zal de formatter bekijken wat hij met de string moet doen. In eerste instantiezal deze ’.’ en ’,’ vervangen naar de huidige locale instellingen zodat er geen foute invoer kangebeuren bij bijvoorbeeld een bedrag. Vervolgens maakt de formatter een tijdelijke string aanwaarin deze de string karakter na karakter zal vullen en de karakters van de invoer zal invullenop de plek van de placeholder. Zoals te zien in afbeelding 2.3.

Figuur 2.3: Formatter Flow


2.4.4 Picker

Aanleiding

De standaard picker in Xamarin.Forms beschikt niet over veel mogelijkheden om het uiterlijkaan te passen.

Functionaliteit

De Picker zal uitgebreid moeten worden met de mogelijkheid om het font te kiezen van de tekst,de grootte van de placeholder, een kleur van het font, kleur van de border, achtergrondafbeeldingen placeholder, font fontsize

De Picker zal volgende functionaliteit toegevoegd krijgen:

� Font: Het font van de tekst in de picker moet aangepast kunnen worden.

� FontSize: De grootte van de tekst in de picker moet aangepast kunnen worden.

� Textkleur: De kleur van de tekst van de picker moet aangepast kunnen worden.

� Placeholder: Er moet een placeholder voorzien zijn die weergegeven wordt wanneer ergeen data in de picker geselecteerd is.

� Placeholderfont: Het font van deze placeholder moet ook anders kunnen zijn dan hetfont van de tekst van de picker.

� Placeholdersize: De grootte van het font moet ook anders kunnen zijn de grootte van deingevulde tekst.

� Placeholderkleur: De kleur van de placeholder heeft ideaal een lichtere kleur dan de tekstdie ingevuld is. Via deze property zal die kleur gekozen kunnen worden.

� Border: De picker kan een border hebben langs onder om gemakkelijk weer te geven datdit een invoerveld is. Deze border heeft een kleur welke eventueel aangepast kan wordenwanneer de invoer niet gevalideerd is.

� Achtergrondafbeelding: Deze property wordt in plaats van border gebruikt om Android.Op Android is het niet mogelijk een border te tekenen en moet er een afbeeldingvoorzien worden die een lijn weergeeft. Ook deze property kan veranderen gedurendede veranderende invoer. Ook kan hier dan weer gebruik gemaakt worden van tweeafbeeldingen om gevalideerde data in de verf te zetten.


Opbouw en werking

Door van de Picker klasse van Xamarin over te erven in een nieuwe klasse kan ik gebruikmaken van de renderers voor iOS en Android om daar gebruik te maken van de properties opXamarin.Forms niveau. Alle functionaliteit is op de native elementen standaard aanwezig. Dezefunctionaliteit zal ingesteld worden wanneer op Xamarin.Forms niveau de properties veranderenwaarop de renderers reageren.

Integratie

Door de custom picker te gebruiken in plaats van de gewone picker zonder extra customisatievan properties wordt deze gebruikt als een gewone picker. Echter heeft de custom picker meermogelijkheden en zullen deze niets veranderen aan het gedrag tegenover andere elementen.


2.4.5 Tabcontrol

De tabcontrol is een control die twee views bevat en deze deze views veranderd door op degeıntegreerde tabs te drukken

Figuur 2.4: Tabcontrol


De Tabcontrol moet volgende functionaliteit bevatten:

� Knoppen

– Font: De knoppen moet een font met bijbehorende fontsize kunnen bevatten.

– Tekstkleur: De kleur van de tekst moet aanpasbaar zijn in twee gevallen: het moetkunnen ingesteld worden vanuit de code alsook moet de tabcontrol de kleur kunnenveranderen wanneer deze gefocust wordt. Deze properties zitten in de knoppeningebakken en deze worden doorgegeven naar het tabcontrol niveau.

– achtergrondkleur: De kleur van de knoppen moet aanpasbaar zijn in twee gevallen:het moet kunnen ingesteld worden vanuit de code alsook moet de tabcontrol de kleurkunnen veranderen wanneer deze gefocust wordt. Op Android moeten deze knoppeneen achtergrond hebben deze achtergrond is een afbeelding, deze afbeelding bepaaldook de kleur.


– Tekst: Deze tekst zal meestal maar een keer ingesteld worden door gebruik te makenvan een translation file. Toch zorg ik ervoor dat er op deze tekst databinding kantoegepast worden zodat alle gevallen gedekt zijn.

– Rand: Op iOS kan de rand ingesteld worden door een property. Op Android is hetde bedoeling dat de achtergrond ook een rand bevat.

� View

– Hoogte: De hoogte van deze view is in vele gevallen de resteren hoogte van hetscherm toch laat ik toe dat deze hoogte gezet kan worden. Om op deze manier velegevallen te ondersteunen.

– View: Binnen deze property kan elke view gehuisvest worden. Dit zorgt ervoor datcomplexe schermen toch nog hierbinnen kunnen gerenderd worden.

Opbouw

Een tabcontrol is een custom control die bestaat uit tabs en views. Aan elke tab wordt een viewgekoppeld om op die manier op een gestructureerde manier te kunnen wisselen tussen content.Deze control is opgebouwd uit een relative layout.

Binnen deze layout worden twee knoppen en twee views geplaatst. Onder de knoppen, die tabszullen voorstellen wordt een view geplaatst.

Op de tabcontrol klasse worden 4 properties ter beschikking gesteld, een voor elke knop en eenvoor elke view.

Werking

In figuur 2.5 is de flow te zien die beschrijft hoe de tabcontrol intern werkt.

De werking van de tabcontrol wordt in actie gezet wanneer deze opgevraagd wordt. Vanaf danluistert deze naar de events die aangeroepen worden wanneer de properties voor de knoppenen de views gezet worden, wanneer deze alle vier gezet zijn zal de tabcontrol deze plaatsenbinnen de relativelayout en ervoor zorgen dat de eerste tab automatisch geselecteerd is en debijbehorende view zichtbaar is.

Wanneer er gewisseld wordt tussen views door op de knoppen te drukken zal de reeds zichtbareview onzichtbaar gezet worden en vice versa.

Figuur 2.5: Tabcontrol flow


2.4.6 Badge

De badge wordt gebruikt om een indicatie te geven van hoeveel items nog interactie van degebruiker moeten krijgen. Door deze in de navigatie bar te plaatsen is het mogelijk alle menuitems die interactie vereisen te groeperen en zo een een globaal aantal te tonen.

100%9:41 AM

5

5

Figuur 2.6: Menu badge


Het aantal meldingen moet dynamisch kunnen veranderen door gebruik te maken van events.De pagina zal ervoor zorgen dat het icoontje veranderd wordt.

Opbouw

Xamarin.Forms laat niet toe de navigationbar te overriden. Door deze beperking moet de gehelepagina geoverride worden. Door een nieuwe pagina te maken (custom pagina) die overerft vande Xamarin.Forms contentpage is het mogelijk de navigationbar aan te passen. Van deze paginamoet dan een iOS renderer en Android renderer gemaakt worden.

Werking

Op Xamarin.Forms niveau worden de afbeeldingen voor het aantal meldingen toegevoegd dezezijn: een menu icoon zonder rode badge, een menu icoon met 1,2,3,4,5,6,7,8,9 en 9+ als tekstin de rode badge. Door op Xamarin.Forms niveau op te vangen wanneer het aantal veranderdis kan dit in de renderers opgelost worden.

Voor iOS kan het menu icoon in de renderer gezet worden. Dit gebeurd door te luisteren naarhet OnPropertyChanged event waarbij gekeken wordt of het icoon veranderd is. Is dit het geval


dan zal het nieuwe icoon gebruikt worden als icoon voor het meest linkse item in de navigationbar.

Op Android is de werking gelijkaardig aan die van iOS. Enkel wordt hier de icon property vande actionbar gezet. Dit heeft gevolgen voor de hele applicatie. Dit is een bekend probleemwaardoor op willekeurige tijdstippen er soms twee maal het icoon staat voor beperkte tijd.

Integratie

Door de pagina’s waarop het menu icoon getoond moet worden te vervangen door de custompage is het mogelijk de badge te tonen. Deze vervanging is zeer eenvoudig en vergt geen extrawerk tegenover de gewone contentpage.


2.4.7 Custom popup

Custom popup is gemaakt om op zowel Android als iOS hetzelfde uiterlijk te hebben. Deze kanmaximaal 2 knoppen hebben, een boodschap en een titel. Aan deze knoppen kunnen actiesgebonden worden. De popup wordt over de huidige content geplaatst en maakt deze tot opeen zeker niveau transparant. Dit is geıllustreerd in Figuur 2.7.

Figuur 2.7: Verschil tussen popups


De custom popup moet volgende functionaliteit bevatten:

� Titel

– Font: De titel moet een font met bijbehorende fontsize kunnen bevatten.

– Tekst kleur: De kleur van de titel moet aanpasbaar zijn om bijvoorbeeld rood tekunnen zijn wanneer het om een fout gaat en een niet negatieve kleur wanneer hetom informatie gaat.


– Tekst: Deze tekst zal ingesteld worden wanneer de popup wordt opgeroepen.

� Bericht

– Font: Het bericht moet een font met bijbehorende fontsize kunnen bevatten.

– Tekst kleur: De kleur van het bericht moet aanpasbaar zijn om te passen bij de restvan bestaande applicaties.

– Tekst: Deze tekst zal ingesteld worden wanneer de popup wordt opgeroepen.

� Knoppen

– Actie: Aan knoppen moet een actie gebonden kunnen worden, in vele gevallen wordtdeze knop gebruikt om de popup te laten verdwijnen.

– Kleur: De achtergrondkleur van de knoppen moet aanpasbaar zijn om een indicatiete geven welke knop het meeste interesse moet opwekken

– Tekstkleur: Deze moet aanpasbaar om zo op de achtergrondkleur zichtbaar te zijn.

– Tekst: Deze tekst wordt ingesteld wanneer de popup wordt aangemaakt.

Opbouw op Xamarin Forms niveau

Omdat de standaard popup niet aangepast kan worden van Xamarin Forms en ze de rendererniet ter beschikking stellen om je eigen popups te maken via de native api’s, wordt deze custompopup eigenlijk een view die wanneer nodig over de gehele pagina getoond wordt. Dit is opAndroid en iOS dus specifiek geımplementeerd moeten worden. Op iOS is het mogelijk overhet gehele scherm te tekenen. Op Android is dit niet mogelijk en is het de bedoeling dat jegebruik maakt van de native diaglogfragment klasse. Deze kan een bestaande view inflaten metnieuwe ui elementen.

iOS

Op iOS is er de mogelijkheid om over het volledige scherm te tekenen wat je wil. Bij de custompopup word er over de gehele pagina een doorschijnende rechthoek getekend. Hierop wordendan vier componenten geplaatst: twee UITextViews, een voor de titel en een voor het berichten twee knoppen. De berekening van de plaats van deze knoppen is relatief tegenover hetscherm wat ervoor zorgt dat de content gecentreerd staat en de hoogte inneemt die nodigis, de breedte is altijd vast. Bij het oproepen van een dialog moeten er aan de functie vierparameters meegegeven worden. De titel, het bericht en de tekst die in de twee knoppen moetkomen. Hier wordt ook de cornerradius van de popup toegepast op de titel(staat vanboven) eneen rechthoek die onder de knoppen getoond wordt. Het resultaat hiervan is te zien in figuur2.7.


Android

De klasse die dit voor zijn rekening neemt heet PopupDialogFragment. Deze erft over vande android dialogfragment klasse. Deze klasse heeft properties voor een titel, bericht enknopnamen. Bij het aanmaken van een popup moeten er 4 parameters meegegeven worden.Een titel, een bericht, de naam voor de eerste knop en de naam voor de tweede knop. Dan wordtin deze klasse de OnCreateView methode overschreven om zo de gewenste layout te kunnensamenstellen en gebruiken. Er wordt gebruik gemaakt van een relative layout, linearlayout,twee textviews en twee buttons. Binnenin de relativelayout wordt de linearlayout geplaatst.De relativelayout zijn hoogte wordt berekend aan de hand van de inhoud. De breedte wordtberekend aan de hand van de breedte van het scherm. Binnenin de relativelayout wordt delinearlayout geplaatst. Deze wordt verticaal gevuld met het textview van de titel, textview vande message en een linearlayout voor de knoppen. Deze linearlayout voor knoppen is horizontaalingesteld en hier worden, indien twee namen voor knoppen meegegeven, twee knoppen ingeplaatst. Aan deze knoppen is ook op deze plaats een eventhandler voorzien die eventueelgebruikt kan worden om functies uit te voeren.

Integratie

Deze control kan gebruikt worden door van de abstractie, die te vinden is op Xamarin Formsniveau , gebruik te maken. Wanneer gebruik gemaakt binnen een Android project zal de Androidspecifieke code uitgevoerd worden. Op iOS gebeurd dit ook analoog.


2.4.8 Contentpresenter en Itemcontrol

Aanleiding

Deze control is gemaakt met het oog op snelheidswinst en dynamische layouts. Aanleidinghiervoor is een stacklayout waar bijvoorbeeld een itemssource aan gekoppeld kan worden endeze de stacklayout vult met itemtemplates gebaseerd op data uit de itemssource.


Aan de itemcontrol moet een itemssource meegegeven kunnen worden. Gebruik makend vandeze data zal herhalend gebruik gemaakt worden van een contentpresenter waarin de datagetoond wordt. Deze contentpresenter is ook bindable property van deze klasse. Hierin kan deontwikkelaar dan zijn visuele voorstelling van een data item in kwijt.

Opbouw

De itemcontrol is een stacklayout. Binnen deze stacklayout wordt content toegevoegd doorgebruik te maken van een contentpresenter per data item dat gekoppeld is aan de itemcontrol.Op deze manier is het zeer eenvoudig door eenmalig de layout te moeten schrijven alsontwikkelaar om ontelbaar veel herhalingen te voorkomen.

Werking

De itemcontrol zal reageren wanneer de itemssource veranderd. Als dat gebeurd zal er een layoutcycle gestart worden. Binnen deze layout cycle zullen de items aan de stacklayout toegevoegdworden. Deze items worden toegevoegd door een contentpresenter als view te instantieren,op deze view wordt dan de data van het item in de itemssource geplaatst als binding context.Op deze manier weet de contentpresenter welke data hij moet gebruiken voor de gedefinieerdebindings binnen zijn layout. Wanner dit proces voor alle items in de itemssource doorlopen isis de itemcontrol opgebouwd en zal deze getoond worden. Een visueel gedetailleerd voorbeeldis te zien in figuur 2.8.

Integratie

Het gebruik van de itemcontrol is gelijkaardig aan dat van een lijst. Je geeft een datatemplate(wat gebruikt wordt door de contentpresenter) en een itemssource mee. Zo zal de itemcontroleen dynamische layout opbouwen op basis van de data. Ik raad aan wanneer er gebruik gemaaktwordt van deze control deze in een scrollview te plaatsen. Op deze manier wordt ervoor gezorgddat er geen informatie van het scherm verdwijnt.


100%9:41 AM

Contentpresenter bepaaldlayout van een item

Itemcontrol bepaaldlayout van alle items

Itemssource zorgt voor het aantal herhalingen

Figuur 2.8: Verduidelijking layout itemcontrol

2.4.9 Custom control voor herhalende afbeelding

Aanleiding

Twee afbeeldingen moeten een aantal keer naast elkaar herhaalt worden om bijvoorbeeld eenja/nee stemming weer te geven. Een voorbeeld van een herhalende afbeelding is hieronder tezien in figuur 2.9.

Figuur 2.9: Een voorbeeld van een herhalende afbeelding

Functionaliteit

Er moeten twee afbeeldingen meegegeven kunnen worden en een aantal keer dat de elkeafbeelding herhaalt hoeft te worden.


Opbouw en werking

Intern is deze custom control een stacklayout die horizontaal gevuld wordt. Binnen dezestacklayout worden dynamisch afbeeldingen toegevoegd die in een Image zitten. Deze image iseen control van Xamarin. Door op te vangen wanneer het aantal van een bepaalde afbeeldingveranderd is het mogelijk de layout te herwerken zo zal deze bij een verandering eerst de layoutleeg maken om deze vervolgens weer te vullen met images. Zeer belangrijk bij deze imagesis dat deze door middel van de new operator worden toegevoegd. Xamarin kan er niet meeoverweg wanneer een Image op meerdere plekken gebruikt wordt. Door gebruik te maken vande new operator zal er steeds een nieuwe afbeelding aangemaakt worden wat zorgt voor meergeheugengebruik maar zo kunnen eventueel bij latere uitbreidingen acties gekoppeld worden aanindividuele afbeeldingen.

Integratie

Deze control integreert door te binden op een viewmodel waardoor uit dit viewmodel tweegetallen gehaald worden. Op deze manier kan deze control zijn data ophalen. Visueel integreertdeze control het best door deze geen breedte te geven. Op deze manier kan de control zijnbreedte vergroten wanneer er meerdere images in zitten.


2.4.10 Custom scrollview

Een scrollview wordt gebruikt om veel content -meestal verticaal- onder elkaar op een paginate zetten. Ik heb een uitbreiding gemaakt op de reeds bestaande scrollview. De layout van eenscrollview is te zien in Figuur 2.10.

Figuur 2.10: Scrollview

Gewenste extra functionaliteit

De custom scrollview moet volgende extra functionaliteit bevatten:

� Scrollen naar de bodem: wanneer een bepaalde property ingesteld wordt moet descrollview naar de bodem van de content scrollen.

Forms

Binnen de custom scrollview is een property toegevoegd ”scrolltobottom”door deze property optrue te zetten zal deze naar de bodem scrollen wanneer deze gezet wordt. Binnen de logica vande scrollviewer wordt deze property terug op false gezet zodat er later opnieuw naar benedengescrold kan worden door deze op true te zetten.


Android

Android zelf beschikt over de mogelijkheid om te scrollen naar het einde van de scrollview.Android maakt gebruik van de methode FullScroll(FocusSearchDirection) waarbij naar benedenscrollen, gekenmerkt wordt door ”FocusSearchDirection.ScrollToBottomals parameter mee tegeven. Deze methode roep ik op in de custom renderer van de custom scrollview. Wanneer ditopgeroepen is, wordt de ScrollToBottom property op de custom scrollview terug op false gezetom te kunnen luisteren op de PropertyChanged van deze property.

iOS

iOS beschikt niet over een ingebouwde methode om naar de bodem van een scrollview tescrollen. In volgende code staat NativeView voor de echte Scrollview die gebruikt wordt op iOSen niet voor de door Xamarin Forms gemaakte abstractie. Vervolgens wordt van de scrollviewzijn content de hoogte genomen en verminderd met de hoogte die de scrollview heeft. Opdeze manier stelt dit punt voor waarnaar gescrold moet worden wanneer het onderste van decontent, de onderkant van de scrollview moet bereiken. Vervolgens wordt door SetContentOffsetbepaald dat de scrollviewer naar het berekende punt moet gaan en dat dit niet geanimeerd moetgebeuren (tweede parameter). Hierna wordt net zoals bij Android de ScrollToBottom propertyvan de custom scrollview terug op false gezet.

Listing 2.1: Custom renderer scroll to bottom iOS

1 va r v iew = ( ( U IS c r o l l V i ew ) Nat iveView ) ;2 CGPoint bo t tomOf f s e tPo in t =3 new CGPoint (0 , v iew . Con ten tS i z e . He ight − v iew . Bounds . S i z e . He ight ) ;4 v iew . S e tCon t en tO f f s e t ( bot tomOf f se tPo in t , f a l s e ) ;5 ( ( App s t r a k t S c r o l l V i ew ) Element ) . Scro l lToBottom = f a l s e ;

Integratie

Wanneer deze control op een pagina gebruikt wordt kan de ScrollToBottom best gezet wordenin de OnSizeAllocated methode die Xamarin Forms voorziet op een pagina. Op deze manier descrollview beneden staan wanneer de pagina geladen is wat in dit project van toepassing was.


2.4.11 Performance van Xamarin Forms

Aanleiding

Het laden van verscheidene pagina’s duurt te lang. Dit zorgt voor een negatieve gebruikerser-varing. Dit kan verscheidene oorzaken hebben. Ik vermoed dat de oorzaak van het probleemte wijten is aan de layout cycle van Xamarin of de databinding.

Meetmethode

Door in de constructor van een pagina een stopwatch te starten en deze te stoppen wanneer depagina geladen wordt kan ik exact weten hoelang het duurt voordat een pagina op het schermstaat.

Listing 2.2: Voorbeeld van de stopwatch

1 using System . D i a g n o s t i c s ; // Debug and Stopwatch23 namespace Example . Pages4 {5 [ R e g i s t e r P a g eA t t r i b u t e ( Nav i g a t i onCon s t an t s . Example . Pages ) ]6 p u b l i c p a r t i a l c l a s s ExamplePage : Page7 {8 // Crea te c l a s s member stopwatch9 p r i v a t e Stopwatch sw ;10 p u b l i c ExamplePage ( ExampleViewModel viewModel , ExampleData data )11 {12 // I n s t a n t i a t e s topwatch13 sw = new Stopwatch ( ) ;14 // S t a r t s topwatch15 sw . S t a r t ( ) ;16 // I n i t i a l i z e the v iewmodel w i th data ( might take some t ime )17 viewModel . I n i t i a l i z e ( data ) ;18 // Bind the page to the v iewmodel19 B ind ingContex t = viewModel ;20 // S t a r t b u i l d i n g the components21 I n i t i a l i z e C ompon e n t ( ) ;22 }23 // This f u nn c t i o n g e t s c a l l e d when the page i s d i s p l a y e d on the s c r e e n24 protected o v e r r i d e void OnAppearing ( )25 {26 // Stop the stopwatch27 sw . Stop ( ) ;28 // P r i n t the v a l u e to the output c on s o l e29 Debug . Wr i t eL i ne ( sw . E l a p s e dM i l l i s e c o n d s ) ;30 base . OnAppearing ( ) ;31 }32 }33 }


Aanpakken

Floatlabels in kaart brengen Een floatlabel is een custom control die intern opgebouwd isuit een relativelayout met daarin een label en een entry. Ik verwacht dat het verwijderen vandeze floatlabels weinig impact zal hebben op de laadtijd van de pagina.

Floatlabels Labels aan Labels uit Opmerking

3 2114ms 1740ms Op de entry wordt niet ge-databined noch een stijl optoegepast

6 1490ms 803ms Op de entry wordt niet ge-databined noch een stijl optoegepast

Af te leiden uit deze tabel is dat de floatlabels een geringe impact hebben op het laden van depagina. Op een pagina waarop enkel floatlabels staan wordt de tijd, nodig om te renderen, nogniet gehalveerd bij het omwisselen met een gewone entry. Daar rekening mee houdend dat erop deze entry geen databinding en stijl wordt toegepast. Wanneer we kijken naar een paginawaarop meerdere elementen staan en de floatlabels in de minderheid zijn wordt er maar eenkleine 20% in snelheidswinst geboekt.

Hieruit kan ik besluiten dat de floatlabels uiteraard een negatieve impact hebben op de rendertijd. Deze negatieve impact is verwaarloosbaar bij een volledige pagina met andere elementen.Het grootste probleem als we spreken over performantie zal zijn oorzaak niet kennen bij defloatlabels.

Impact Layouts in kaart brengen Een pagina kan bestaan uit meerdere geneste layouts.Door deze geneste layouts om te zetten naar een layout zal het mogelijk zijn om eenprestatiewinst te bekomen. Ik zet deze om naar een relativelayout om de metingen te doen.

Floatlabels Genest Flat

3 2114ms 2184ms

Door een relativelayout toe te voegen om alle controls in te plaatsen is geen snelheidsverschilmerkbaar. Dit is niet wat ik zou verwachten. Door alle andere layouts eruit te halen verwacht ikdat er veel minder layout cycli zouden gebeurden omdat elke component maar een parent heeften momenteel geen rekening hoeft te houden met de andere componenten. Je zou verwachtendat wanneer je een layout in een layout in een layout zou plaatsen deze meer verwerkingskrachtzou vragen dan een layout om ze allemaal te managen. Mogelijk optimaliseert Xamarin ditproces. Door een gebrek aan relevante documentatie vanuit Xamarin kan ik hier geen uitsluitselover geven.


Relative layout in viewcell Bij het scrollen in een scrollview hapert de scroller constant. Ditheeft enerzijds te maken met de manier waarop Xamarin omgaat met de viewcells die zich in descrollview. Anderzijds zou het mogelijk kunnen zijn dat er teveel layout cycli moeten gebeurenwanneer je aan het scrollen bent. Binnen in een viewcel zitten ook meerdere stackpanels. Ditzou opgelost kunnen worden door gebruik te maken van een Relative layout. Maar zoals eerderal aangetoond bij het meten van de impact van layouts lijkt me dit weinig hoopvol bij descrollviewer.

Nadat van de itemtemplate van de scrollviewer een ”flat”design was gemaakt door alle controlsin een layout te steken namelijk een relative layout scrolt de scrollviewer nog steeds niet soepel.Ik merk geen verbetering op.


2.4.12 IO met Xamarin Forms

Aanleiding

Sommige bestanden moeten lokaal opgeslagen kunnen worden. Xamarin voorziet zulkefunctionaliteit niet out of the box. Hiervoor heb ik een Filemanager aangemaakt. Deze zalbestanden kunnen aanmaken, lezen en verwijderen.

Gewenste Functionaliteit

Een bestand moet aangemaakt kunnen worden. Wanneer het bestand aangemaakt is moet erdata in geplaatst kunnen worden. Een bestand moet ook verwijderd kunnen worden en er moetook opgevraagd kunnen worden of het bestand bestaat.

Opbouw en werking

Door gebruik te maken van een interface IFileManager, aangemaakt in de Xamarin.Forms laag,kan in er over de hele applicatie gewerkt worden met de Filemanager. Deze Filemanager klassezal door Ninject geınjecteerd worden. De Filemanager implementatie van IFileManager gebeurdplatform specifiek. In elk project (iOS/Android) kan dan de Ninject binding ingesteld wordenzodat de juiste Filemanager implementatie op het juiste platform gebruikt wordt.

Beide implementaties (voor zowel iOS als Android) kunnen gebruik maken van de .net klassenom data acces te voorzien omdat deze implementaties gedefinieerd worden binnen het iOS ofAndroid project.

Hierbinnen vormen de functies -gedefinieerd in de interface- louter een wrapper rond de .netfuncties om data toegang te voorzien. Zo wordt bijvoorbeeld de DirectoryExists functievan de Interface geımplementeerd in de Filemanager klasse als het teruggeven van hetDirectory.Exists(path) resultaat. Directory.Exists is een .net functie die in de namespaceSystem.IO zit.

Integratie

Door gebruik te maken van Ninject is het gebruik zeer eenvoudig. Om in eender welke -zelfseen PCL- project een bestand op te slaan volstaat het om door middel van constructor injectieIFilemanager mee te geven om zo een instantie te krijgen van de desbetreffende Filemanagerklasse.


2.4.13 Custom Activity indicator

Aanleiding

De standaard activity indicator verschilt op elk platform om deze op elk platform hetzelfdeuiterlijk te geven zal er een custom layout gemaakt moeten worden. Een visuele weergave ishieronder te zien (figuur 2.11).

Figuur 2.11: Indicators

Linksboven: de standaard indicator voor iOS, rechtsboven: de standaard indicator voor Android,onderaan: de custom indicator

Gewenste Functionaliteit

Bij deze control is het belangrijk dat er aangegeven kan worden of er activiteit is. Hiervoorvoorzie ik een bindable property die weergeeft of de activity indicator aan het draaien is.

Opbouw en werking

Deze activity indicator is een absolute layout met een image ingesteld. Deze image is eenuitbreiding van de image klasse die Xamarin reeds voorziet.

De activity indicator zal gebruik maken van een png sequentie d.w.z. een aantal opeenvolgendeafbeeldingen die snel na elkaar getoond worden en zo de illusie wekken een animatie te zien.

Deze afbeeldingen zijn momenteel statisch ingeladen in de control zelf. Een mogelijke uitbreidingzou kunnen zijn deze afbeeldingen als bindable property te onthullen.


Binnenin de custom renderer wordt gebruik gemaakt van de native functionaliteit om een pngsequentie te tonen.

Op iOS kan een Image voorzien worden van animation images welke dan tegen een bepaaldetijd achter elkaar getoond kunnen worden. Hiervoor voeg je een lijst van UIImages (welke elkseen afbeelding bevatten die in de Xamarin.Forms laag wordt meegegeven) toe. Deze lijst wordtdan aan de AnimationProperty toegewezen en zo zal iOS de afbeeldingen sequentieel tonen.Het starten en stoppen van de animatie gebeurd wanneer de property op Xamarin.Forms niveauveranderd. Deze verandering zal dan in de custom render opgevangen worden waar op zijnbeurt de StartAnimating en StopAnimating functie aangeroepen wordt op de Afbeelding.

Op Android verloopt het gelijkaardig als iOS. Door verschillen in de application lifecycle tusseniOS en Android moeten we bij Android rekening houden met het feit dat een andere thread deafbeelding nog wil updaten nadat de animatie gestopt is. Dit vangen we op door in de disposefunctie ook de afbeeldingen te disposen die gebruikt worden door de Activity indicator.

Integratie

Deze control kan eenvoudig over een gehele pagina geplaatst worden of gezet worden waarpast. Deze zal de grootte aannemen die beschikbaar of ingesteld is. Op deze manier kan dezeIndicator veelvuldig gebruikt worden.


2.4.14 Custom Webview

Aanleiding

Bij het weergeven van HTML tekst in een webview moet de hoogte berekend kunnen wordenom zo de webview de juiste hoogte te kunnen geven zodat de content er net in past.

Extra Functionaliteit

� Scrollen: Scrollen moet uitgezet kunnen worden zodat het standaard gedrag van dewebview overschreven wordt er het niet mogelijk is de content te verslepen binnen eenwebview.

� Hoogte: De webview moet zijn hoogte automatisch kunnen aanpassen aan zijn contentmits er een breedte opgegeven is, welke standaard de breedte van het scherm kan zijn.

Opbouw en werking

In het gedeelde project is een klasse aangemaakt die overerft van webview. Deze klasse bevateen bindable property die het al dan niet toelaten van scrollen regelt.

Hiervoor zijn ook twee custom renderers gemaakt, een voor iOS en een voor Android. Binnendeze renderers wordt de hoogte berekent die van daaruit gerapporteerd wordt naar de XamarinForms laag door de HeightRequest in te stellen op de berekende waarde. Voordat deze hoogtein de custom renderers bepaald wordt zal op Xamarin.Forms niveau een schatting van de hoogtegemaakt worden door gebruik te maken van de tekst die er zal komen en de gemiddelde breedtedie deze tekst inneemt. Op deze manier wordt er vermeden dat de tekst er staat en de renderersnog bezig zijn met het uitvoeren van de berekening van de hoogte wat ertoe leidt dat de layoutzeer hard zal verspringen en niet responsief oogt.

Android bevat op de native webview control de mogelijkheid om het scrollen uit te zetten. Doordeze properties (VerticalScrollBarEnabled en HorizontalScrollBarEnabled) in de custom rendererin te stellen wanneer de Custom Webview klasse zijn bindable property veranderd wordt scrollenverhinderd. De hoogte wordt hier berekend door gebruik te maken van javascript. Op oudereversies van Android is het niet mogelijk om de hoogte te berekenen in de custom renderer ditgebeurd dan -weliswaar minder nauwkeurig- op Xamarin.Forms niveau.

De Webview op iOS is op gelijke wijze native geımplementeerd als Android. Hier maak iktevens gebruik van de native functionaliteit om scrollen al dan niet aan te zetten. Deze property(Scrollview.ScrollEnabled) geef ik dezelfde waarde als de in de Xamarin.Forms laag. De hoogtewordt hier ook weer berekend aan de hand van javascript. Deze hoogte wordt ook doorgegevenals Heightrequest op Xamarin.Forms niveau.


Integratie

Deze control kan zeer eenvoudig geıntegreerd worden in een project door deze control in plaatsvan de webview control te gebruiken. Deze control zal dan automatisch zijn hoogte aanpassenen de mogelijkheid bieden om scrollen in of uit te schakelen.


2.4.15 Custom Keyboard

Het custom keyboard zal op sommige plekken als vervanging kunnen dienen van het standaardnumerieke keyboard. Met als voordeel dat het keyboard gemakkelijk geplaatst kan worden ener op zowel iOS als Android er visueel identiek uit ziet.

Aanleiding

Gebruik makend van verschillende thema’s binnen applicatie oogt het visueel mooier wanneerer een keyboard gebruikt wordt dat in lijn ligt met het ontwerp.

Dit keyboard bevat een numerieke weergave om eenvoudig invoer te kunnen geven aan een veld.Wanneer het echte keyboard gebruikt wordt heeft de gebruiken nog keuze uit een komma en kandit karakter ingevoerd worden. In deze custom control is dit niet het geval. Dit keyboard blijftook ten allen tijde op het geplaatste scherm om ervoor te zorgen dat de gebruiker duidelijk weetdat hij iets moet invoeren voordat hij verder kan. Een visueel voorbeeld is te zien in volgendefiguur(2.12):

100%9:41 AM 100%9:41 AM

1 2 3

5

08

4 67 9

1 2 3

5

08

4 67 9

5688 5688

Figuur 2.12: Het Custom Keyboard


Het keyboard moet volgende functionaliteit bevatten:

� Knoppen

– Tekst: Deze tekst moet per knop ingesteld kunnen worden.


– Icoon: Er moet een icoontje aan een bepaalde knop meegegeven kunnen worden ombijvoorbeeld ’delete’ voor te stellen.

– Tekstkleur: Kleur van de tekst zal nodig zijn om zo een goed contrast te kunnencreeren tussen tekst en achtergrond. Op deze manier kan het keyboard leesbaargebruikt worden in verscheidene thema’s.

– Achtergrondkleur: De achtergrondkleur van de knoppen kan ingesteld worden omzo bepaalde knoppen een andere kleur te kunnen geven dan de achtergrondkleurvan het keyboard.

� Achtergrond voor het gehele keyboard De achtergrond van het keyboard zal een kleurkunnen zijn. Op deze manier zal deze kleur getoond worden wanneer de knoppentransparant zijn.

� Border De kleur van de scheidingslijnen tussen de knoppen moet ook instelbaar zijn omzo een kleur te kunnen kiezen die past bij het thema.

Opbouw

Het custom keyboard is opgebouwd door gebruik te maken van 12 knoppen, 6 boxviews en eenabsolute layout.

Het custom keyboard is een absolute layout waarin 12 knoppen zo geschikt zijn dat zeeen numeriek keyboard voorstellen. Door gebruik te maken van de layoutbounds van deabsolutelayout is dit een vrij simpele structuur die op zijn beurt zorgt voor weinig layout cyclien zo de applicatie niet merkbaar vertraagd.

Het keyboard gebruikt een vaste hoogte van de knoppen. De breedte van een knop varieertnaargelang de breedte van het scherm. Deze breedte wordt dan in 3 opgedeeld en zo wordende kolommen toegevoegd. De vaste hoogte wordt in 4 verdeeld om op deze manier de rijen toete voegen.

Werking

Wanneer er een nieuw keyboard aangemaakt wordt zal deze een array van strings gebruikenom knoppen aan te maken deze array bevat standaard [”1”,”2”,”3”,”4”,”5”,”6”,”7”,”8”,”9”,,”0”,null]. Wanneer de tekst null is zal deze het icoon gebruiken. Wanneer de tekst leeg iswordt er op die plek geen knop gezet en wanneer de tekst een waarde bevat zal deze gebruiktworden als tekst van de knop. Op deze manier wordt dynamisch een layout opgebouwd vanverscheidene knoppen. Deze tekst wordt tevens gebruikt om de invoer te verwerken.

Intern wordt in het custom keyboard een bindable property blootgesteld. Deze bindable propertystelt een string voor die bevat wat de gebruiker ingevoegd heeft.


Door aan elke knop een click-event te koppelen wordt de tekst van de knop toegevoegd aande bindable property wanneer er op de knop gedrukt wordt. Als er op het delete icoon gedruktwordt zal deze het laatste karakter van de string verwijderen.

Integratie

Door gebruik te maken van een bindable property kan een andere element (vaak een entry oflabel) zijn tekst property binden aan de bindable property van het custom keyboard en wordtde invoer zo gesynchroniseerd.

Visueel wordt deze layout best geıntegreerd door deze op een pagina te zetten die een absolutelayout bevat om op die manier het keyboard eenvoudig onderaan het scherm uit te lijnendoor gebruik te maken van layoutbounds die dan op het keyboard ingesteld worden. De anderecontent kan dan bovenaan uitgelijnd worden en eventueel een maximale hoogte gegeven wordenzodat deze niet onder het keyboard door loopt.


2.5 Bespreking samenbrengen van componenten

Alle custom controls zijn gemaakt met het oog deze te gebruiken in een project. Alle gemaaktecustom controls zijn dan ook geıntegreerd in een bestaand project.

Door deze componenten te schrijven op Xamarin.Forms niveau kunnen deze gewoon gebruiktworden op dezelfde manier als de elementen die standaard meegeleverd worden bij Xamarin.

Bij het implementeren van de componenten is gebleken dat het gedrag op iOS en Androidvaak niet hetzelfde is. Hierdoor zijn bij het implementeren/samenvoegen van de componentenvele optimalisaties naar boven gekomen. Het is dan ook zo dat wanneer deze in een andereapplicatie gebruikt zullen worden de mogelijkheid bestaat dat er andere problemen verschijnen.

De hoofdoorzaak van deze problemen is te wijten aan de verschillende layout cycli die Androiden iOS native hanteren. Het is niet even voor de hand liggend dit gedrag te kunnen abstraherenwaardoor soms op de Xamarin.Forms laag rekening gehouden moet worden met het platform.Hiervoor heeft Xamarin ook een mechanisme voorzien waardoor op de Xamarin.Forms laagrekening gehouden kan worden met het platform.

Alle custom controls kunnen nog verder uitgebreid worden daar hun uitbreiding momenteelspecifiek gericht was op het huidige project.

Bij het samenbrengen van de componenten is ook vaak gebleken dat sommige custom controlseen negatieve impact hadden op de performance. Zo zijn er voor bijvoorbeeld de floatlabelmeerdere stadia gepasseerd waarop steeds een ander aspect van de performance aangepaktwordt. Op dit moment zijn de controls zo layout vriendelijk gemaakt met het oog op minimaleperformance en geheugen impact. Een mooi voorbeeld hiervan is de activity indicator. Dezeheeft op iOS een andere manier om met de afbeeldingen van de png sequence om te gaan danop Android. Door bijvoorbeeld op Android dezelfde manier te gebruiken als op iOS onstaat eenmemory leak.

Kort samengevat zijn alle componenten geıntegreerd, getest en goedgekeurd om te gebruikenin een productieapplicatie.

Hoofdstuk3Resultaten

Dit project heeft bijgedragen tot een herbruikbare bibliotheek van Xamarin.Forms componenten.Deze controls heb ik ook geıntegreerd in de mobiele applicatie.

Door gebruik te maken van deze componenten is het ontwikkelen van de applicatie vlottergegaan. Deze controls abstraheren veel complexiteit en kunnen eenvoudig hergebruikt worden.

Los van deze bibliotheek is ook een applicatie die gebouwd. Deze applicatie is gebouwd metonderhoudbaarheid in het achterhoofd. Omdat deze applicatie onderhevig is aan geheimhoudingheb ik ook een representatieve tweede applicatie gebouwd met gelijkaardige concepten aan deoriginele applicatie.

Door gebruik te maken van Xamarin.Forms heb ik ook kennis gemaakt met de performance engeheugenbeperkingen van een mobiel toestel. Xamarin.Forms springt met deze resources nietzo zuinig om. Dit doordat zij -te?- veel platform specifieke gedragen en functionaliteit willenabstraheren wat bijvoorbeeld leidt tot een slechte scroll performance op beide platformen.

45

Hoofdstuk4Besluit

Ik heb veel meer kunnen doen dan enkel custom controls te maken waardoor dit project veelgroter is geworden dan origneel ingepland. De custom controls kunnen nog hergebruikt wordenin andere projecten.

De echte mobiele applicatie zal door vele mensen gebruikt kunnen worden eens deze in de appstore terecht komt.

Het dummy project bevat vele best practices maar om deze nog te voorzien van meer bestpractices is het aangeraden het core project nog verder op te delen in twee projecten zodat hetcore project niet meer de taak heeft de connectie met de (lokale) database te onderhouden.Verder is het ook aangewezen de lokale database te veranderen door gebruik te maken vaneen echte service. Door de huidige implementatie vergt dit geen aanpassing aan de code opvoorwaarde dat de externe service dezelfde types van objecten retourneert.

Met betrekking tot de echte applicatie kan de layout op sommige pagina’s nog vereenvoudigdworden door gebruik te maken van een Absolute layout. Dit zal echter nog veel werk met zichmeebrengen en weinig merkbare voordelen voor de gebruiker meebrengen.

46

Documents

Shared iOS and Android app using Xamarin.Forms with custom …beta.eaict.ap.be/wp-content/uploads/2015/06/Vercammen... · 2015-06-23 · Shared iOS and Android app using Xamarin.Forms