Shared ios and Android app using Xamarin.Forms with custom controls

Transcriptie

1 Scriptie ingediend tot het behalen van de graad van PROFESSIONELE BACHELOR IN DE ELEKTRONICA-ICT Shared ios and Android app using Xamarin.Forms with custom controls Robin Vercammen Departement Wetenschappen en Techniek Opleiding Elektronica-ICT Academiejaar Interne promotor: Jeroen Doggen Externe promotor: Thomas Van Sundert Versie: 7 juni 2015

2 Dankwoord Drie maanden stage, een éérste werkervaring, het begin van meer. Dit werk is er gekomen dankzij de prachtige kans die Appstrakt aangeboden heeft. In het bijzonder zijn het mijn teamgenoten die ik hier wil bedanken: Dusty Saman en Thomas Van Sundert, bedankt om me deze kans te bieden, met jullie samen te werken en me zo op te nemen in het hele proces. Het is een eer. Antwerpen, 7 juni 2015 Robin Vercammen i

3 Abstract Xamarin.Forms is een concept ontwikkeld door het bedrijf Xamarin. Dit concept heeft write once, run everywhere als doel. Hierdoor wordt het mogelijk één gedeelde code basis voor zowel UI als business logica te hebben. Gevolg hiervan is dat de ontwikkeltijd van een applicatie voor de 3 grootste smartphone platformen (Windows Phone, Android en ios) veel kleiner en beter beheerbaar wordt. Doordat Xamarin.Forms -op zijn zachts uitgedrukt- nog in zijn kinderschoenen staat, zijn er vele uitdagingen die nog aangegaan moeten worden om te streven naar één 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 een applicatie hard beperkt. De performance van Xamarin.Forms in bepaalde scenario s nog niet geoptimaliseerd. De door mij gemaakte interactieve elementen zijn afgeleid van bestaande elementen of compleet nieuwe 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 van Xamarin.Forms. Bij deze ontwikkeling heb ik 9 nieuwe elementen toegevoegd en 5 elementen aangepast die hiermee de functionaliteit van Xamarin.Forms blijvend vergroot onder de vorm van herbruikbare componenten. Los van de applicatie waar ik tot heb bijgedragen tijdens de stage heb ik een applicatie gebouwd die beschreven wordt in deze scriptie. Deze applicatie bevat 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 op functioneel niveau. De applicatie voldoet ook aan de vereisten. ii

4 Inhoudsopgave Dankwoord Abstract i ii 1 Situering Algemene situatieschets Xamarin en Xamarin.Forms Xamarin.Forms Bespreking Inleiding Functionaliteit Architectuur View ViewModel Model en data Dependency injection - ninject Bespreking componenten Applicatie Floatlabel Formatter Picker Tabcontrol Badge Custom popup Contentpresenter en Itemcontrol Custom control voor herhalende afbeelding Custom scrollview Performance van Xamarin Forms IO met Xamarin Forms iii

5 INHOUDSOPGAVE iv Custom Activity indicator Custom Webview Custom Keyboard Bespreking samenbrengen van componenten Resultaten 45 4 Besluit 46

6 Lijst van figuren 1.1 Evolutie smartphone gebruikers (bron: emarketer.com) Aandeel van mobiele besturingssystemen (bron: idc.com) Floatlabel Floatlabel flow Formatter Flow Tabcontrol Tabcontrol flow Menu badge Verschil tussen popups Verduidelijking layout itemcontrol Een voorbeeld van een herhalende afbeelding Scrollview Indicators Het Custom Keyboard v

7 Aantal in miljarden Hoofdstuk1 Situering 1.1 Algemene situatieschets Het aantal smartphone gebruikers blijft stijgen. Nu wat maakt een smartphone smart? Enerzijds de mogelijkheid om op het internet te surfen en anderzijds de mogelijkheid om applicaties te installeren. Veel bedrijven anticiperen hierop door een applicatie te maken voor hun product of dienst en dit op deze manier aan de consument te brengen. Zoals te zien in figuur 1.1 ligt het huidig aantal smartphone gebruikers rond en wordt er verwacht dat het er tegen zijn , , , , , ,5 2,5 Aantal smartphone gebruikers wereldwijd 2 1,5 1 0, Jaartal Figuur 1.1: Evolutie smartphone gebruikers (bron: emarketer.com) Dit zijn zeer veel gebruikers die relatief gemakkelijk benaderd kunnen worden door gebruik te maken van een applicatie. Nu voor een applicatie moet er een budget voorzien worden. Maar 1

8 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 veel mogelijk mensen bereiken dan ben je genoodzaakt applicaties bouwen voor de drie grootste mobiele platformen namelijk ios, Android en Windows Phone. Qua marktaandeel is Android leider gevolgd door ios met als afsluiter Windows Phone. De verdeling van het marktaandeel is te zien in afbeelding 1.2. Rekening houdend met deze verdeling en de doelgroep nemen bedrijven beslissingen voor welke platformen ze hun applicatie willen ontwikkelen. Android 76,60% ios 19,70% Windows Phone2,80% other 0,90% Wereldwijd marktaandeel mobiele besturingssystemen 3% 20% 76% 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 ontwikkelen zullen er drie verschillende applicaties gemaakt worden wat betekend dat de ontwikkeltijd vermenigvuldigd kan worden met drie. Op deze manier stijgt de kostprijs evenredig. Maar het kan ook anders.

9 HOOFDSTUK 1. SITUERING Xamarin en Xamarin.Forms Om deze ontwikkeltijd te verkorten heeft het Amerikaanse bedrijf Xamarin verscheidene producten/ontwikkelomgevingen op de markt geplaatst. Deze producten laten toe in één programmeertaal applicaties te schrijven voor de drie platformen.enerzijds is er Xamarin.iOS en Xamarin.Android, anderzijds Xamarin.Forms. Xamarin.iOS en Xamarin.Android zijn bedoelt als wrapper rond de native programmeertalen die gebruikt worden om applicaties voor ios en Android te maken (respectievelijk objective-c en 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 om achtergrond logica en niet om visuele aspecten. Op deze manier zal de tijd die het kost om een applicatie 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 zal nog steeds voor de platformen individueel opgesteld moeten worden. Sinds mei 2014 is Xamarin nog een stap verder gegaan door het Xamarin.Forms platform te introduceren. Dit platform abstraheert ook de visuele aspecten van een applicatie. Op deze manier kan één developer, gebruikmakend van één programmeertaal en één user interface, tot 100% code delen over de drie platformen. Dit houdt op zich weer een verkorting van de ontwikkeltijd in. 1.3 Xamarin.Forms Aangezien Xamarin.Forms nog een redelijk jong platform is, is het een uitdaging met dit platform een mobiele applicatie te maken. Dit platform heeft nog niet standaard de gewenste functionaliteit. Het is momenteel belangrijk, naar toekomstige projecten toe, om een bibliotheek aan controls en functionaliteitselementen aan te leggen om deze te kunnen hergebruiken bij toekomstige Xamarin.Forms projecten. Op die manier kan nog meer ontwikkeltijd bespaard worden. Xamarin.Forms voorziet voor alles een basis van functionaliteit maar laat ook toe de native bibliotheken aan te spreken van de besturingssystemen om zo alles naar wens aan te passen en dit te hergebruiken in andere projecten. 1 bron:

10 Hoofdstuk2 Bespreking Xamarin Forms mobiele applicatie 2.1 Inleiding Voor dit project is er gekozen om Xamarin.Forms te gebruiken als platform om de mobiele applicatie te ontwikkelen die zal draaien op zowel ios als Android. In deze scriptie wordt een applicatie met gelijkaardige functionaliteit besproken als de echte applicatie waaraan ik heb meegewerkt. Deze gelijkaardige applicatie is door mij ontwikkeld nadat de echte applicatie klaar was. Door tijdsgebrek heeft deze applicatie dus niet alle functionaliteit die de echte applicatie heeft maar illustreert deze het gebruik en best practices van een applicatie die gemaakt is met Xamarin.Forms. De gemaakte custom controls bibliotheek is uiteraard hergebruikt in deze applicatie. Het gebruik van Xamarin.Forms voor deze applicatie is zeker niet ideaal. Xamarin raadt momenteel aan Xamarin.Forms enkel te gebruiken voor data invoer applicaties waar het hergebruiken 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 data wordt onder andere weergegeven in lijsten. De overige 25% van de interactie bestaat uit het invullen 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 ontwikkelen met voor elk platform de nodige specificaties en abstracties. 4

11 HOOFDSTUK 2. BESPREKING Functionaliteit Deze applicatie zal gebruikt worden door een werknemer die vaak gebruik maakt van interimkantoren. 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 gewerkt heeft, voor welke interim en wanneer hij gewerkt heeft. Concreet zal de gebruiker, na een account aangemaakt te hebben, aangemeld worden in het systeem. Wanneer de gebruiker aangemeld is zal hij een dashboard te zien krijgen. In dit dashboard kan hij een overzicht raadplegen dat weergeeft voor welke interimkantoren hij gewerkt heeft en voor welke kantoren hij zal gaan werken. Dit overzicht biedt gestructureerd informatie over de laatste dag dat hij voor dat interim kantoor gewerkt 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 het verwachtte te presteren uren. Wanneer de gebruiker kiest om het detail te zien van een bepaalde werkgever, door op een item te tappen uit de lijst, zal hij een lijst van gewerkte dagen te zien krijgen. In deze lijst is te zien hoeveel uur hij die dag gewerkt heeft. een korte omschrijving van zijn werk die dag en de datum waarop hij gewerkt heeft. Elke dag zal nog voorzien worden van een groot detail scherm. Deze structureert alle informatie over een gewerkte dag zoals begin uur, einduur, werkplek, uurloon,... Verder zal een werknemer manueel een record kunnen toevoegen. En zo kunnen bijhouden waar hij gewerkt heeft. Binnen de applicatie zit ook een berichten gedeelte. Hier zal de werknemer terecht komen en een lijst te zien krijgen van conversaties die hij gehouden heeft met een interimkantoor. Vanop deze pagina kan de werknemer een nieuwe conversatie starten door een bericht te sturen naar het interimkantoor. Wanneer de werknemer echter op een conversatie drukt zal een conversatie detail pagina openspringen waar de berichten te lezen zijn. Via deze pagina kan de werknemer dan 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 te vinden vanaf

12 HOOFDSTUK 2. BESPREKING 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 elkaar af te scheiden en geen vaste relatie te leggen tussen componenten. Voeg hier nog een vleugje ninject (Dependency injection container) aan toe en je verkrijgt een onderhoudbare en 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 deze mogelijkheid aanwezig en kan je gebruik maken van binding statements om bijvoorbeeld tekstinvoer van de view door te lussen naar het viewmodel. Het voordeel hiervan is dat het viewmodel niet hoeft te weten of die tekst uit een entry komt, een label of eender welke andere component, het enige wat belangrijk is, is dat deze het juiste type heeft en gebruikt kan worden door het viewmodel. Het viewmodel kan dan bijvoorbeeld data ophalen van een externe service. Zo krijg je een relatie waarbij het model niets hoeft te weten over het viewmodel en het viewmodel niets hoeft te weten over de view View Binnen de view laag wordt de user interface beschreven zo zal er hier bepaald worden hoe de gebruiker informatie te zien krijgt en hoe deze informatie kan invoeren. Een voorbeeld van een view in dit project bijvoorbeeld het dashboard. Deze pagina bevat een lijst met informatie. Hoe deze 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 via constructor injectie van de view het bijhorende viewmodel te laten injecteren door ninject kan de bindingcontext hierop ingesteld worden. Om de view nog onderhoudbaarder te houden zijn volgende concepten beschikbaar die ook gebruikt kunnen worden in de view. Converters Stel dat het viewmodel data aanlevert als een object van een bepaald type en je wil dat er een bepaalde control getoond of niet getoond wordt wanneer het object null is. Kan dit met behulp van converters. Converters zijn klassen die de IValueConverter implementeren. Door de convert methode te implementeren zal de data die van het viewmodel naar de view gaat omgevormd worden. De convertback methode zorgt ervoor dat invoer omgevormd kan worden om zo naar het viewmodel gestuurd te worden.

13 HOOFDSTUK 2. BESPREKING 7 Converters worden toegevoegd aan de appresources van het project om deze te kunnen gebruiken in XAML bestanden. Binnenin dit project wordt er bijvoorbeeld vaak gebruik gemaakt van een boolean en inverse boolean converter om bepaalde delen van de interface tijdelijk zichtbaar of onzichtbaar te maken. Behaviors Behaviors worden gebruikt om het gedrag van controls te kunnen aanpassen. Op basis van waarden die de control bevat worden andere eigenschappen van de control dan ingesteld. Een alternatief voor behaviors is het maken van sub klassen van controls en daarin het gedrag veranderen. Een typisch gebruiksvoorbeeld is een entry wiens kleur van de lijn eronder aangepast moet worden wanneer er data validatie optreedt. Op deze manier is de behavior onafhankelijk van het viewmodel en werkt deze op view niveau door het eigenlijke gedrag van een control uit te breiden. Een behavior wordt gemaakt door over te erven van behavior en het type mee te geven waarop deze 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 op events van de control waarop je wil inspelen. In het voorbeeld van het valideren zal er gebruik gemaakt worden van het textchanged event van de entry. In de OnDetachingFrom wordt er uitgeschreven van het event om te vermijden dat er ongebruikte geregistreerde event handlers blijven 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 gebruikt te 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 kunnen we groeperen in styles. Binnenin deze styles kunnen we specificeren hoe bepaalde controls er moeten uit zien. Het voordeel hiervan is dat we het zo overbodig maken om op elke control steeds weer dezelfde properties te zetten. Een ander groot voordeel van het gebruik van styles is dat alle visueel aanpasbare eigenschappen gestructureerd weergegeven worden en zo op één plek aangepast kunnen worden. Zo kan er bijvoorbeeld in de styles een kleur veranderd worden en dit effect hebben over de hele applicatie.

14 HOOFDSTUK 2. BESPREKING 8 Styles kunnen ook zoals eerder beschreven worden uitgebreid worden met het gebruik van behaviors. Zo creëer je onderhoudbare en aanpasbare controls. Navigatie Navigatie wordt aangestuurd door het viewmodel maar het zijn natuurlijk wel views die moeten veranderen. Door gebruik te maken van een INavigationService die geïmplementeerd is op het view niveau als NavigationService. De NavigationService registreert alle pagina s die voorzien zijn van het RegisterPageAttribuut waarmee de pagina klasse gedecoreerd wordt. Deze zal het ID van de pagina (een string opgeslagen in de navigation constants) bevatten. Zo worden kunnen de pagina s opgevraagd worden in de NavigationService om daar naar te navigeren. Op deze manier zal de view het echte navigeren kunnen afhandelen wanneer het viewmodel vraagt om te navigeren. Translations In de views vermijden we best vaste strings te gebruiken voor statische tekst. De manier om dit op te lossen is door te werken met resources. Deze resources zijn een key value paar. Zo wordt er aan elke string een key toegekend. Deze string wordt dan getoond wanneer in de view naar die key verwezen wordt. Nog een voordeel van deze aanpak is de mogelijkheid om verschillende talen 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 resources met de juiste taal. Deze extension is ook uitgebreid om verscheidene talen op te halen. Om dit mogelijk te maken wordt de taal van het toestel platform specifiek opgehaald zodat de translationextions de juiste values kan ophalen. Verder is er ook een klasse aangemaakt die het mogelijk maakt translations op te halen in bijvoorbeeld een converter.

15 HOOFDSTUK 2. BESPREKING ViewModel Het viewmodel bezorgt data aan de view en gebruikt (invoer)data van de view om zo de de applicatie logica te bepalen. Een viewmodel implementeert INotifyPropertyChanged zodat de view kan weten wanneer er een verandering gebeurd is van data. Om dit proces eenvoudiger te maken heb ik een BaseViewmodel gebruikt die INotifyPropertyChanged implementeert en daar de implementatie van NotifyPropertyChanged gebeurd is. Zo kan elk nieuw viewmodel overerven van deze klasse en kan het gedrag van de NotifyPropertyChanged op één 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. Dit viewmodel bevat een lijst van werkgevers. Deze lijst is een property en in de setter wordt NotifyPropertyChanged aangeroepen zodat de view weet dat de data veranderd is. Deze zal de eigenschappen (tekst) in de visuele lijst aanpassen. Ook kan een viewmodel data ophalen van een service. Zo wordt in ons voorbeeld -de dashboard pagina- data opgehaald via de ServiceClient die een implementatie is van IServiceClient. Zo is het mogelijk data die van deze service terug komt eventueel om te vormen en toe te wijzen aan de lijst. Via de in toegelichte Navigatie zal het viewmodel ook bepalen welke pagina s getoond worden 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 gebind worden. Deze commands worden dan uitgevoerd bij bijvoorbeeld het klikken van een knop.

16 HOOFDSTUK 2. BESPREKING Model en data In het model worden beschrijvingen van objecten geplaatst die gebruikt kunnen worden door het viewmodel. In dit dummy project wordt er gebruik gemaakt van een lokale SQL database op de telefoon om data in op te slaan. Een SQL database bestaat uit tabellen. Deze tabellen zijn in het dummy project gemapt naar objecten. Deze objecten leven in het model. Om een echte service te mocken worden deze objecten getransformeerd naar DTO (data transfer objecten) objecten die door het model gebruikt worden en het viewmodel. In dit model zit ook een soort van data acces laag. Deze gaat de platform specifieke functies aanroepen om te schrijven naar een database. Zo zal de data 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 objecten ophalen en schrijven naar de database. Zo heeft deze klasse bijvoorbeeld de functie login. Aan deze functie wordt een username/password meegegeven. Bij het aanmaken van de serviceclient klasse wordt er door ninject een loginservice geinjecteerd. Deze loginservice heeft het doel enkel een gebruiker in te loggen. Door gebruik te maken van deze niveau s is de service eenvoudig uit te breiden met meer functies. Wanneer een functie dan aangepast moet worden kan dit op het laagste niveau zonder dat er in de hogere lagen fouten optreden.

17 HOOFDSTUK 2. BESPREKING Dependency injection - ninject Via dependency injection is het mogelijk om een contract te bepalen in het viewmodel waar bijvoorbeeld 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 aangemaakt worden in het viewmodel waarvan de implementatie zit in de view. Zo zal de viewmodel kunnen bepalen hoe de view moet navigeren. Zolang de view weet hoe er genavigeerd moet worden hoeft het viewmodel hier zich geen zorgen over te maken. De gebruike dependency injection container is Ninject. Ninject is een zeer configureerbare DI container. 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 ninject kernel object aangemaakt. Vanaf dit kernel object zullen objecten opgevraagd kunnen worden. Ninject wordt geconfigureerd met behulp van modules. Deze modules bevatten één verplicht te overriden functie namelijk de load methode. Binnenin deze methode zullen de bindings gedefinieerd worden. Deze bindings zorgen ervoor dat wanneer je aan Ninject bijvoorbeeld een IServiceClient vraagt Ninject je een ServiceClient geeft. Ook heb je hier controle over de lifecycle van het object zo zal er maar één ServiceClient nodig zijn en wordt deze InSingletonScope gedefinieerd.

18 HOOFDSTUK 2. BESPREKING Bespreking componenten Applicatie Deze dummy applicatie bevat veel best practices in verband met Xamarin.Forms. Deze sectie bevat informatie over hoe het project is opgebouwd en welke stappen nodig zijn om een werkend project te krijgen. Dit project bevat ook de bibliotheek aan custom controls die vanaf wordt 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 solution map toe met de naam UI. Binnenin deze map voeg ik een Xamarin mobile app project toe en kies hier voor de optie met PCL. Ik voeg aan de main solution nog een project toe dit is een Xamarin PCL en geef deze de naam Presentation. Verder voeg ik nog een project toe op dezelfde manier en geeft dit Coreäls naam. Om af te sluiten voeg ik Ninject toe aan elk UI project. UI In de UI solution folder voeg ik volgende folders toe: Locals, NinjectModules,Styles,UI en utilities. In de locals folder komen de resources die gebruikt worden voor de vertalingen en statische tekst voor in de UI. De NinjectModules folder bevat alle modules voor de configuratie van ninject. In de Styles folder komen alle stijlen die gebruikt worden in XAML. In de UI map komen alle views terecht. De laatste folder utilities bevat converters, de implementatie van navigatie en een helper om vertalingen op te halen. Presentation In het Presentation project zitten de custom exceptions, contracten waaraan de UI zich houdt om een popup te kunnen tonen, te navigeren en vertalingen te kunnen ophalen. Het belangrijkste in deze dit project zijn de Viewmodels. Deze viewmodels zullen dan gebonden worden aan de views 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 gebruik gemaakt van een echte service en komt de data van daar. In dit dummy project is de core ook verantwoordelijk voor het fysiek opslaan van de data. Om dit zo goed mogelijk af te kunnen scheiden heb ik gebruik gemaakt van volgende structuur (mappen/namespaces): Een database contract interface die de fysieke omgang met de database regelt zoals het pad naar het database

19 HOOFDSTUK 2. BESPREKING 13 bestand en het lezen/schrijven naar die bestand door een connectie beschikbaar te stellen, de implementatie van deze connectie zit in de platform specifieke projecten. Vanuit de database kunnen ook exceptions optreden (wanneer bijvoorbeeld een operatie mislukt). Om deze zo gestructureerd mogelijk te gebruiken in de hogere lagen heb ik een map DatabaseExceptions aangemaakt waarin custom exceptions zitten. De volgende map bevat DTO objecten, dit zijn de objecten die doorgestuurd worden naar de hogere lagen. De volgende map zijn POCO s dit zijn klassen die de tabellen voorstellen in de database en daar 1 op 1 mee gemapt zijn. Dan volgt 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 beginnen is er één master service die alle services hun functies bundelt. Hierbinnen worden functies doorgestuurd naar de juiste klasse. Zo zal bijvoorbeeld de ServiceClient bij het registeren de registerservice aanspreken om daadwerkelijk te registeren.

20 HOOFDSTUK 2. BESPREKING Floatlabel Floatlabel is een control die gebruik maakt van een klein label dat verschijnt wanneer de gebruiker in het tekstveld begint te typen. Dit label zal van kleur veranderen van zodra de gebruiker 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 ˆ Entry 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 moet kunnen ingesteld worden vanuit de code alsook moet de floatlabel de kleur kunnen veranderen wanneer deze gefocust wordt. Tekst: Deze tekst zal meestal maar één keer ingesteld worden door gebruik te maken van een translation file. Toch zorg ik ervoor dat er op deze tekst databinding kan toegepast worden zodat alle gevallen gedekt zijn. Animatie: Het label zal geanimeerd moeten worden vanaf dat de gebruiker typt in het entry veld. Deze animatie behoort toe aan de floatlabel deze zal dit label zijn positie aanpassen. Focus: Zodat andere componenten weten of de floatlabel focus heeft en hun eigenschappen daar kunnen aanpassen zoals bijvoorbeeld de lijn onder de floatlabel die geen deel uitmaakt van de floatlabel. Keyboard: Bij een bepaald veld zal een bepaald type keyboard gewenst zijn dit in de vorm van een keyboard dat enkel ondersteuning bied voor numerieke invoer of gebruik maakt van andere eigenschappen zoals een keyboard dat er dan voor zorgt dat op het keyboard teken staat.

21 HOOFDSTUK 2. BESPREKING 15 Achtergrondkleur: Deze optie is nodig om ervoor te zorgen dat de default achtergrondkleur overschreven kan worden en zo da floatlabel beter integreert in een bestaande applicatie. Achtergrondafbeelding: Op Android kan je een achtergrondafbeelding toevoegen aan een entry. Deze property zal geen invloed hebben op ios maar dit laat wel toe op 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 door geven aan het viewmodel. Dit is het belangrijkste onderdeel aan deze control. Deze binding moet twoway werken. Tekstkleur: Deze kleur zal eenmalig ingesteld worden door de pagina waarop de floatlabel gebruikt wordt. Placeholder font: De placeholder zal een font en een fontsize ingesteld moeten krijgen. Placeholder tekst: Deze tekst zal meestal maar één keer ingesteld worden door gebruik te maken van een translation file. Toch zorg ik ervoor dat er op deze tekst databinding 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 Autofocus gedrag: Dit gedrag was al geïmplementeerd. De floatlabel moet dit gedrag kunnen aanvaarden. Done op keyboard toevoegen: Done toevoegen aan het keyboard kan op vele plaatsen 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 samen gevoegd 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 welke overerft van de Xamarin Forms entry en een AppstraktLabel dat overerft van de Xamarin Forms label. Deze worden gepositioneerd op de relativelayout.

22 HOOFDSTUK 2. BESPREKING 16 De nodige properties van de entry en label members worden door middel van bindable properties beschikbaar 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. Wanneer dat gebeurd zal de event handler entry propertychanged aanroepen. Deze zal evalueren welke property 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 de property tekst is zal deze de tekst opslaan in een variabele waarop gedatabind kan worden. Is de het tekstveld leeg dan zal het label verborgen worden middels een animatie. Wanneer de tekst 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 ook toegepast in de applicatie. Tijdens het implementeren van de floatlabel in de bestaande

23 HOOFDSTUK 2. BESPREKING 17 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. Door gebruik te maken van paddings en relative positionering binnenin de floatlabel was het niet even makkelijk te integreren met de bestaande layout van pagina s. Dit gaat hand in hand met performance problemen. Naarmate de floatlabels meer geïntegreerd raakten werd het duidelijk dat deze een zware impact hebben op de performance. Dit is vooral te merken bij het laden van pagina s die meerdere floatlabels bevatten. Door gebruik te maken van een absolute layout worden er meerdere problemen opgelost. Een absolute layout gebruikt minder layout cycli doordat -zoals zijn naam al doet vermoeden- er gebruik gemaakt wordt van absolute positionering. Dit heeft maar 1 layout cyclus nodig en zorgt er dan ook voor dat dit geen invloed zal hebben op de positionering van de andere elementen op de pagina. Een absolute layout is minder gebruiksvriendelijk om te gebruiken als ontwikkelaar. Het is wel mogelijk de elementen te positioneren tegenover de plaats die de absolute layout inneemt. Dit zorgt ervoor dat je weinig rekening moet houden met verschillende schermgroottes. Door gebruik te maken van de positioning flags van de absolute layout kan je de elementen positioneren met als parameters een x,y,breedte en hoogte die, afhankelijk van de flags, in verhouding zijn met de absolutelayout. De laadtijd die gemeten werd in wordt door gebruik te maken van absolute layouts op android meer als gehalveerd. Bij een absolute layout is er ook meer controle over de positionering van de objecten. Op deze manier is het dan mogelijk de padding eruit te laten en deze absoluut te positioneren zodat deze overal hetzelfde eruit zien en in elke andere container integreren. Functionaliteitsproblemen waren te vinden in het feit dat origineel de floatlabel zijn label niet verdween nadat de entry opnieuw leeg gemaakt werd. Dit probleem is snel opgelost kunnen worden en de functionaliteit is op dat vlak dan uitgebouwd.

24 HOOFDSTUK 2. BESPREKING Formatter De formatter komt voor in de floatlabel control. Verder wordt een soortgelijke formatter gebruikt in een converter. Op deze manier kan via de floatlabel automatisch gebruik gemaakt worden van de formatter en kan deze op andere plaatsen toegewezen worden. Gewenste functionaliteit 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 van een string: bij een telefoonnummer zal bij het ingeven van geformatteerd worden als : ˆ Vrije keuze van de placeholder om toe te laten dat er andere placeholders gebruikt kunnen worden nog kan voorkomen in de string. Werking Telkens wanneer de invoer string van lengte veranderd, zal de formatter bekijken wat hij zal moeten doen. Indien de lengte van de string gelijk is aan het aantal placeholder karakters dat meegegeven is zal de formatter bekijken wat hij met de string moet doen. In eerste instantie zal deze. en, vervangen naar de huidige locale instellingen zodat er geen foute invoer kan gebeuren bij bijvoorbeeld een bedrag. Vervolgens maakt de formatter een tijdelijke string aan waarin deze de string karakter na karakter zal vullen en de karakters van de invoer zal invullen op de plek van de placeholder. Zoals te zien in afbeelding 2.3. Figuur 2.3: Formatter Flow

25 HOOFDSTUK 2. BESPREKING Picker Aanleiding De standaard picker in Xamarin.Forms beschikt niet over veel mogelijkheden om het uiterlijk aan 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, achtergrondafbeelding en 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 er geen data in de picker geselecteerd is. ˆ Placeholderfont: Het font van deze placeholder moet ook anders kunnen zijn dan het font van de tekst van de picker. ˆ Placeholdersize: De grootte van het font moet ook anders kunnen zijn de grootte van de ingevulde tekst. ˆ Placeholderkleur: De kleur van de placeholder heeft ideaal een lichtere kleur dan de tekst die 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 dat dit een invoerveld is. Deze border heeft een kleur welke eventueel aangepast kan worden wanneer 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 afbeelding voorzien worden die een lijn weergeeft. Ook deze property kan veranderen gedurende de veranderende invoer. Ook kan hier dan weer gebruik gemaakt worden van twee afbeeldingen om gevalideerde data in de verf te zetten.

26 HOOFDSTUK 2. BESPREKING 20 Opbouw en werking Door van de Picker klasse van Xamarin over te erven in een nieuwe klasse kan ik gebruik maken van de renderers voor ios en Android om daar gebruik te maken van de properties op Xamarin.Forms niveau. Alle functionaliteit is op de native elementen standaard aanwezig. Deze functionaliteit zal ingesteld worden wanneer op Xamarin.Forms niveau de properties veranderen waarop de renderers reageren. Integratie Door de custom picker te gebruiken in plaats van de gewone picker zonder extra customisatie van properties wordt deze gebruikt als een gewone picker. Echter heeft de custom picker meer mogelijkheden en zullen deze niets veranderen aan het gedrag tegenover andere elementen.

27 HOOFDSTUK 2. BESPREKING Tabcontrol De tabcontrol is een control die twee views bevat en deze deze views veranderd door op de geïntegreerde tabs te drukken Figuur 2.4: Tabcontrol Gewenste functionaliteit 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 moet kunnen ingesteld worden vanuit de code alsook moet de tabcontrol de kleur kunnen veranderen wanneer deze gefocust wordt. Deze properties zitten in de knoppen ingebakken 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 kleur kunnen veranderen wanneer deze gefocust wordt. Op Android moeten deze knoppen een achtergrond hebben deze achtergrond is een afbeelding, deze afbeelding bepaald ook de kleur.

28 HOOFDSTUK 2. BESPREKING 22 ˆ View Tekst: Deze tekst zal meestal maar één keer ingesteld worden door gebruik te maken van een translation file. Toch zorg ik ervoor dat er op deze tekst databinding kan toegepast worden zodat alle gevallen gedekt zijn. Rand: Op ios kan de rand ingesteld worden door een property. Op Android is het de bedoeling dat de achtergrond ook een rand bevat. Hoogte: De hoogte van deze view is in vele gevallen de resteren hoogte van het scherm toch laat ik toe dat deze hoogte gezet kan worden. Om op deze manier vele gevallen te ondersteunen. View: Binnen deze property kan elke view gehuisvest worden. Dit zorgt ervoor dat complexe 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 view gekoppeld 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 tabs zullen voorstellen wordt een view geplaatst. Op de tabcontrol klasse worden 4 properties ter beschikking gesteld, één voor elke knop en één voor 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 dan luistert deze naar de events die aangeroepen worden wanneer de properties voor de knoppen en de views gezet worden, wanneer deze alle vier gezet zijn zal de tabcontrol deze plaatsen binnen de relativelayout en ervoor zorgen dat de eerste tab automatisch geselecteerd is en de bijbehorende view zichtbaar is. Wanneer er gewisseld wordt tussen views door op de knoppen te drukken zal de reeds zichtbare view onzichtbaar gezet worden en vice versa. Figuur 2.5: Tabcontrol flow

29 HOOFDSTUK 2. BESPREKING Badge De badge wordt gebruikt om een indicatie te geven van hoeveel items nog interactie van de gebruiker moeten krijgen. Door deze in de navigatie bar te plaatsen is het mogelijk alle menu items die interactie vereisen te groeperen en zo een een globaal aantal te tonen. 5 9:41 AM 100% 5 Figuur 2.6: Menu badge Gewenste functionaliteit 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 gehele pagina geoverride worden. Door een nieuwe pagina te maken (custom pagina) die overerft van de Xamarin.Forms contentpage is het mogelijk de navigationbar aan te passen. Van deze pagina moet dan een ios renderer en Android renderer gemaakt worden. Werking Op Xamarin.Forms niveau worden de afbeeldingen voor het aantal meldingen toegevoegd deze zijn: een menu icoon zonder rode badge, een menu icoon met 1,2,3,4,5,6,7,8,9 en 9+ als tekst in de rode badge. Door op Xamarin.Forms niveau op te vangen wanneer het aantal veranderd is kan dit in de renderers opgelost worden. Voor ios kan het menu icoon in de renderer gezet worden. Dit gebeurd door te luisteren naar het OnPropertyChanged event waarbij gekeken wordt of het icoon veranderd is. Is dit het geval

30 HOOFDSTUK 2. BESPREKING 24 dan zal het nieuwe icoon gebruikt worden als icoon voor het meest linkse item in de navigation bar. Op Android is de werking gelijkaardig aan die van ios. Enkel wordt hier de icon property van de actionbar gezet. Dit heeft gevolgen voor de hele applicatie. Dit is een bekend probleem waardoor 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 custom page is het mogelijk de badge te tonen. Deze vervanging is zeer eenvoudig en vergt geen extra werk tegenover de gewone contentpage.

31 HOOFDSTUK 2. BESPREKING Custom popup Custom popup is gemaakt om op zowel Android als ios hetzelfde uiterlijk te hebben. Deze kan maximaal 2 knoppen hebben, een boodschap en een titel. Aan deze knoppen kunnen acties gebonden worden. De popup wordt over de huidige content geplaatst en maakt deze tot op een zeker niveau transparant. Dit is geïllustreerd in Figuur 2.7. Figuur 2.7: Verschil tussen popups Gewenste functionaliteit 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 te kunnen zijn wanneer het om een fout gaat en een niet negatieve kleur wanneer het om informatie gaat.

32 HOOFDSTUK 2. BESPREKING 26 ˆ Bericht Tekst: Deze tekst zal ingesteld worden wanneer de popup wordt opgeroepen. 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 rest van 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 wordt deze knop gebruikt om de popup te laten verdwijnen. Kleur: De achtergrondkleur van de knoppen moet aanpasbaar zijn om een indicatie te 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 renderer niet ter beschikking stellen om je eigen popups te maken via de native api s, wordt deze custom popup eigenlijk een view die wanneer nodig over de gehele pagina getoond wordt. Dit is op Android en ios dus specifiek geïmplementeerd moeten worden. Op ios is het mogelijk over het gehele scherm te tekenen. Op Android is dit niet mogelijk en is het de bedoeling dat je gebruik maakt van de native diaglogfragment klasse. Deze kan een bestaande view inflaten met nieuwe ui elementen. ios Op ios is er de mogelijkheid om over het volledige scherm te tekenen wat je wil. Bij de custom popup word er over de gehele pagina een doorschijnende rechthoek getekend. Hierop worden dan vier componenten geplaatst: twee UITextViews, een voor de titel en een voor het bericht en twee knoppen. De berekening van de plaats van deze knoppen is relatief tegenover het scherm wat ervoor zorgt dat de content gecentreerd staat en de hoogte inneemt die nodig is, de breedte is altijd vast. Bij het oproepen van een dialog moeten er aan de functie vier parameters meegegeven worden. De titel, het bericht en de tekst die in de twee knoppen moet komen. Hier wordt ook de cornerradius van de popup toegepast op de titel(staat vanboven) en een rechthoek die onder de knoppen getoond wordt. Het resultaat hiervan is te zien in figuur 2.7.

33 HOOFDSTUK 2. BESPREKING 27 Android De klasse die dit voor zijn rekening neemt heet PopupDialogFragment. Deze erft over van de android dialogfragment klasse. Deze klasse heeft properties voor een titel, bericht en knopnamen. 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 wordt in deze klasse de OnCreateView methode overschreven om zo de gewenste layout te kunnen samenstellen 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 wordt berekend aan de hand van de breedte van het scherm. Binnenin de relativelayout wordt de linearlayout geplaatst. Deze wordt verticaal gevuld met het textview van de titel, textview van de message en een linearlayout voor de knoppen. Deze linearlayout voor knoppen is horizontaal ingesteld en hier worden, indien twee namen voor knoppen meegegeven, twee knoppen in geplaatst. Aan deze knoppen is ook op deze plaats een eventhandler voorzien die eventueel gebruikt kan worden om functies uit te voeren. Integratie Deze control kan gebruikt worden door van de abstractie, die te vinden is op Xamarin Forms niveau, gebruik te maken. Wanneer gebruik gemaakt binnen een Android project zal de Android specifieke code uitgevoerd worden. Op ios gebeurd dit ook analoog.

34 HOOFDSTUK 2. BESPREKING Contentpresenter en Itemcontrol Aanleiding Deze control is gemaakt met het oog op snelheidswinst en dynamische layouts. Aanleiding hiervoor is een stacklayout waar bijvoorbeeld een itemssource aan gekoppeld kan worden en deze de stacklayout vult met itemtemplates gebaseerd op data uit de itemssource. Gewenste functionaliteit Aan de itemcontrol moet een itemssource meegegeven kunnen worden. Gebruik makend van deze data zal herhalend gebruik gemaakt worden van een contentpresenter waarin de data getoond wordt. Deze contentpresenter is ook bindable property van deze klasse. Hierin kan de ontwikkelaar dan zijn visuele voorstelling van één data item in kwijt. Opbouw De itemcontrol is een stacklayout. Binnen deze stacklayout wordt content toegevoegd door gebruik 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 als ontwikkelaar om ontelbaar veel herhalingen te voorkomen. Werking De itemcontrol zal reageren wanneer de itemssource veranderd. Als dat gebeurd zal er een layout cycle gestart worden. Binnen deze layout cycle zullen de items aan de stacklayout toegevoegd worden. 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 gedefinieerde bindings binnen zijn layout. Wanner dit proces voor alle items in de itemssource doorlopen is is de itemcontrol opgebouwd en zal deze getoond worden. Een visueel gedetailleerd voorbeeld is 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 itemcontrol een dynamische layout opbouwen op basis van de data. Ik raad aan wanneer er gebruik gemaakt wordt van deze control deze in een scrollview te plaatsen. Op deze manier wordt ervoor gezorgd dat er geen informatie van het scherm verdwijnt.

35 HOOFDSTUK 2. BESPREKING 29 Contentpresenter bepaald layout van een item 9:41 AM 100% Itemssource zorgt voor het aantal herhalingen Itemcontrol bepaald layout van alle items Figuur 2.8: Verduidelijking layout itemcontrol Custom control voor herhalende afbeelding Aanleiding Twee afbeeldingen moeten een aantal keer naast elkaar herhaalt worden om bijvoorbeeld een ja/nee stemming weer te geven. Een voorbeeld van een herhalende afbeelding is hieronder te zien 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 elke afbeelding herhaalt hoeft te worden.

36 HOOFDSTUK 2. BESPREKING 30 Opbouw en werking Intern is deze custom control een stacklayout die horizontaal gevuld wordt. Binnen deze stacklayout worden dynamisch afbeeldingen toegevoegd die in een Image zitten. Deze image is een control van Xamarin. Door op te vangen wanneer het aantal van een bepaalde afbeelding veranderd is het mogelijk de layout te herwerken zo zal deze bij een verandering eerst de layout leeg maken om deze vervolgens weer te vullen met images. Zeer belangrijk bij deze images is dat deze door middel van de new operator worden toegevoegd. Xamarin kan er niet mee overweg wanneer één Image op meerdere plekken gebruikt wordt. Door gebruik te maken van de new operator zal er steeds een nieuwe afbeelding aangemaakt worden wat zorgt voor meer geheugengebruik maar zo kunnen eventueel bij latere uitbreidingen acties gekoppeld worden aan individuele afbeeldingen. Integratie Deze control integreert door te binden op een viewmodel waardoor uit dit viewmodel twee getallen gehaald worden. Op deze manier kan deze control zijn data ophalen. Visueel integreert deze control het best door deze geen breedte te geven. Op deze manier kan de control zijn breedte vergroten wanneer er meerdere images in zitten.

37 HOOFDSTUK 2. BESPREKING Custom scrollview Een scrollview wordt gebruikt om veel content -meestal verticaal- onder elkaar op een pagina te zetten. Ik heb een uitbreiding gemaakt op de reeds bestaande scrollview. De layout van een scrollview is te zien in Figuur 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 de scrollview naar de bodem van de content scrollen. Forms Binnen de custom scrollview is een property toegevoegd scrolltobottom door deze property op true te zetten zal deze naar de bodem scrollen wanneer deze gezet wordt. Binnen de logica van de scrollviewer wordt deze property terug op false gezet zodat er later opnieuw naar beneden gescrold kan worden door deze op true te zetten.