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

Maat: px
Weergave met pagina beginnen:

Download "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.

SAP Mobile Documents SP 05 Hoe het werken met de nieuwste versie nog makkelijker is geworden.

SAP Mobile Documents SP 05 Hoe het werken met de nieuwste versie nog makkelijker is geworden. SAP Mobile Documents SP 05 Hoe het werken met de nieuwste versie nog makkelijker is geworden. Documentnummer: 1.0 Datum: 4-1-2016 Auteur: SANDER MAES Rompertdreef 1b 5233 ED s-hertogenbosch Postbus 86

Nadere informatie

Handleiding helpdesk. Datum: 08-10-2014 Versie: 1.0 Auteur: Inge van Sark

Handleiding helpdesk. Datum: 08-10-2014 Versie: 1.0 Auteur: Inge van Sark Datum: 08-10-2014 Versie: 1.0 Auteur: Inge van Sark Inhoudsopgave Inhoudsopgave... 2 1. Beheer helpdesk... 3 1.1. Settings... 3 1.2. Applicaties... 4 1.3. Prioriteiten... 5 1.4. Gebruik mailtemplates...

Nadere informatie

HANDLEIDING DOIT BEHEER SYSTEEM

HANDLEIDING DOIT BEHEER SYSTEEM HANDLEIDING DOIT BEHEER SYSTEEM ALGEMENE INFORMATIE Het Doit beheer systeem is een modulair opgebouwd systeem waarin modules makkelijk kunnen worden toegevoegd of aangepast, niet iedere gebruiker zal dezelfde

Nadere informatie

Klassen & objecten, overerving, abstracte klassen, debuggen, interfaces, formulieren, polymorfie, statische methoden, event-handlers

Klassen & objecten, overerving, abstracte klassen, debuggen, interfaces, formulieren, polymorfie, statische methoden, event-handlers 1 Inhoud Klassen & objecten, overerving, abstracte klassen, debuggen, interfaces, formulieren, polymorfie, statische methoden, event-handlers 2 Geluidsbronnen simulator, deel 2 Inleiding De weergave versnellen

Nadere informatie

ActiveBuilder Handleiding

ActiveBuilder Handleiding ActiveBuilder Handleiding Auteur: TalkActive I/S Datum: Juli 2004 Versie: R. 1.01 Taal: Nederlands Copyright 2004 - Talk Active alle rechten voorbehouden. Inhoud: 1. INTRODUCTIE...2 2. SNEL STARTEN...3

Nadere informatie

Website maker. Bezoek je domein om de Website maker in te stellen. De volgende melding zal zichtbaar zijn.

Website maker. Bezoek je domein om de Website maker in te stellen. De volgende melding zal zichtbaar zijn. Aan de slag met de Bezoek je domein om de in te stellen. De volgende melding zal zichtbaar zijn. Volg de url 'administratie paneel' om in te loggen en de vervolgens in te stellen. Als eerst krijg je de

Nadere informatie

v.1.48 Genkgo Handleiding Genkgo Events Professioneel evenement management in Genkgo

v.1.48 Genkgo Handleiding Genkgo Events Professioneel evenement management in Genkgo v.1.48 Genkgo Handleiding Genkgo Events Professioneel evenement management in Genkgo Inhoud Voordat u begint...3 In dit document...3 Boom...3 Instellingen...4 Tenaamstelling... 4 Adres... 4 Contactgegevens...

Nadere informatie

Handleiding Cubigo Verenigingen en Organisaties

Handleiding Cubigo Verenigingen en Organisaties Handleiding Verenigingen en Organisaties Wij heten u hartelijk welkom bij, het platform waar de verbinding wordt gelegd tussen burgers, instellingen, bedrijven en verenigingen op een eenvoudige en gebruikersvriendelijke

Nadere informatie

Handleiding puntenboek-module

Handleiding puntenboek-module Handleiding puntenboek-module Inleiding Het puntenboek is een tool dat u toelaat om opdrachten (score-elementen) te definiëren, deze omschrijven informatie op de ELO die gescoord kan worden. Dit kan veel

Nadere informatie

5. Documenten Wat kan ik met Documenten? 1. Over LEVIY. 5.1 Documenten terugvinden Uitleg over vinden van documenten.

5. Documenten Wat kan ik met Documenten? 1. Over LEVIY. 5.1 Documenten terugvinden Uitleg over vinden van documenten. Versie 1.0 23.03.2015 02 1. Over LEVIY Wat doet LEVIY? 08 5. Documenten Wat kan ik met Documenten? 2. Algemene definities Behandelen van terugkerende definities. 09 5.1 Documenten terugvinden Uitleg over

Nadere informatie

Handleiding RS Form! 1.0.4

Handleiding RS Form! 1.0.4 Handleiding RS Form! 1.0.4 Inhoud 1. Controlepaneel... 3 2. Forms Manager... 4 2.1 Nieuwe form aanmaken... 4 2.2 Nieuwe fields toevoegen... 7 2.3 Wijzigen/verwijderen bestaande Forms, Fields... 10 Versie

Nadere informatie

Handleiding: Rapportages Publicatiedatum: 12 mei 2010 (versie 1.0) Pagina 1 van 22 pagina s. Handleiding Rapportages

Handleiding: Rapportages Publicatiedatum: 12 mei 2010 (versie 1.0) Pagina 1 van 22 pagina s. Handleiding Rapportages Pagina 1 van 22 pagina s. Handleiding Rapportages Pagina 2 van 22 pagina s. Inhouds Opgave Rapportages... 3 Rapportdefinities... 4 Importeren & Exporteren... 5 Bedrijfslogo aanpassen... 8 De rapport editor

Nadere informatie

WordPress in het Kort

WordPress in het Kort WordPress in het Kort Een website maken met Wordpress. In minder dan één uur online! Inclusief installatie van een thema en plugins Alle rechten 2013, Rudy Brinkman, BrinkhostDotCom, http://www.brinkhost.nl

Nadere informatie

Release Notes. Afdrukdatum: 2008/11/13

Release Notes. Afdrukdatum: 2008/11/13 Release Notes Afdrukdatum: 2008/11/13 Dit document beschrijft vanuit technisch oogpunt de aanpassingen in Hi-Ant aan de betreffende versie. Deze tekst is geenszins bedoeld als document naar de eindgebruiker,

Nadere informatie

public Bier ( string N, double P, Brouwerij B) { Naam = N; AlcoholPerc = P; Brouwer = B;

public Bier ( string N, double P, Brouwerij B) { Naam = N; AlcoholPerc = P; Brouwer = B; Beschouw bijvoorbeeld de twee onderstaande klassen, waarvan de attributen en eigenschappen geannoteerd zijn met bijkomende XML-annotaties: using System ; using System. Xml ; using System. Xml. S e r i

Nadere informatie

Toewijzen van knoppen, dashboards & privileges

Toewijzen van knoppen, dashboards & privileges Toewijzen van knoppen, dashboards & privileges Voor meer informatie, kijk op www.newbase.nl Newbase BV, Hardwareweg 16 1033 MX AMSTERDAM Tel.: 020-6 111 444 pagina 1 van 29 Inhoudsopgave 1 Introductie...3

Nadere informatie

Voor de database wordt een Access 2000 bestand gebruikt, met voorlopig 1 tabel:

Voor de database wordt een Access 2000 bestand gebruikt, met voorlopig 1 tabel: Eenvoudig voorbeeld. Er wordt verondersteld dat er met VS 2008 EXPRESS gewerkt wordt. Voor de database wordt een Access 2000 bestand gebruikt, met voorlopig 1 tabel: (Sommige schermafdrukken zijn afkomstig

Nadere informatie

1. Over LEVIY. 5. Meldingen Wat zijn meldingen? 5.1 Technische melding toevoegen Hoe voeg ik een melding toe?

1. Over LEVIY. 5. Meldingen Wat zijn meldingen? 5.1 Technische melding toevoegen Hoe voeg ik een melding toe? Versie 1 02 1. Over LEVIY Wat doet LEVIY? 06 5. Meldingen Wat zijn meldingen? 2. Algemene definities Behandelen van terugkerende definities. 07 5.1 Technische melding toevoegen Hoe voeg ik een melding

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

Je kan vanuit de RV SiteBuilder steeds terugkeren naar het controlepaneel, via de knop rechts bovenaan.

Je kan vanuit de RV SiteBuilder steeds terugkeren naar het controlepaneel, via de knop rechts bovenaan. RV SiteBuilder openen Log in op je controlepaneel met de gegevens die je van ons hebt ontvangen. Eens ingelogd, klik je helemaal onderaan, in de sectie Software/Services, op het RV SiteBuilder icoontje.

Nadere informatie

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4 Handleiding CMS Inhoud 1 Inloggen 2 Algemeen 3 Hoofdmenu 4 Pagina s 4.1 Pagina s algemeen 4.2 Pagina aanpassen 5 Items 5.1 Items algemeen 5.2 Item aanpassen 6 Editor 6.1 Editor algemeen 6.2 Afbeeldingen

Nadere informatie

Handleiding Webapplicatie Robin

Handleiding Webapplicatie Robin Handleiding Webapplicatie Robin (Versie 05) Inhoudstafel 1. Registratie van uw labo... 2 2. Persoonlijke account aanmaken... 4 3. Inloggen in uw labo account... 7 4. Wijziging labogegevens... 8 5. Inschrijven

Nadere informatie

Trainingsmateriaal Osiris 6. Admission Office International Office

Trainingsmateriaal Osiris 6. Admission Office International Office Trainingsmateriaal Osiris 6. Admission Office International Office Utwente, 6-2-2014 i Inhoudsopgave Inhoudsopgave ii 1. Algemene handeling Osiris 6 1 1.1 Menu structuur. 1 1.2 Favorieten indelen 2 1.3

Nadere informatie

CMS Handleiding. Opgesteld door

CMS Handleiding. Opgesteld door CMS Handleiding Opgesteld door Alleen beschikbaar voor klanten v1.2 24-01-2008 Index 1. Inloggen... 3 2. De CMS Omgeving... 5 NAVIGATIE... 5 MENU... 6 CONTENT... 6 3. Content Wijzigen... 7 DE WERKBALK...

Nadere informatie

F U N C T I O N E E L O N T W E R P V O O R F U L L H O U S E M O B I LE ( V I S I O N V E R S I E )

F U N C T I O N E E L O N T W E R P V O O R F U L L H O U S E M O B I LE ( V I S I O N V E R S I E ) F U N C T I O N E E L O N T W E R P V O O R F U L L H O U S E M O B I LE ( V I S I O N V E R S I E ) Datum: 29-09-2010 Auteur: Dairo Bosschart Versie: 1.0 Document: Functioneel_ontwerp (vision versie).docx

Nadere informatie

Technisch ontwerp. Projectteam 6. Project "Web Essentials" 02 april 2009. Versie 2.1.0

Technisch ontwerp. Projectteam 6. Project Web Essentials 02 april 2009. Versie 2.1.0 Projectteam 6 Faculteit Natuur en Techniek Hogeschool Utrecht Projectleider: Hans Allis, hans.allis@student.hu.nl Technisch ontwerp Project "Web Essentials" 02 april 2009 Versie 2.1.0 Teamleden: Armin

Nadere informatie

4.4 Voeg ruimtes toe Hoe ga jij te werk? 1. Over LEVIY. 4.5 Aanwezigen Zijn er aanwezigen bij de DKS-controle? 2. Algemene definities. 3.

4.4 Voeg ruimtes toe Hoe ga jij te werk? 1. Over LEVIY. 4.5 Aanwezigen Zijn er aanwezigen bij de DKS-controle? 2. Algemene definities. 3. 1. Over LEVIY Wat doet LEVIY? 02 08 4.4 Voeg ruimtes toe Hoe ga jij te werk? 2. Algemene definities Behandelen van terugkerende definities. 09 4.5 Aanwezigen Zijn er aanwezigen bij de DKS-controle? 03

Nadere informatie

Trainingsmateriaal Osiris 6. Admission Office International Office

Trainingsmateriaal Osiris 6. Admission Office International Office Trainingsmateriaal Osiris 6. Admission Office International Office Utwente, 6-2-2014 i Inhoudsopgave Inhoudsopgave ii 1. Algemene handeling Osiris 6 1 1.1 Menu structuur. 1 1.2 Favorieten indelen 2 1.3

Nadere informatie

Les 15 : updaten van gegevens in de database (deel2).

Les 15 : updaten van gegevens in de database (deel2). Les 15 : updaten van gegevens in de database (deel2). In de volgende reeks lessen zal alle vorige leerstof uitgebreid aan het bod komen. Zie ook de vorige lessen en documenten om informatie op te zoeken

Nadere informatie

SAN v3. Update document 2010. uitgebracht door OCEN

SAN v3. Update document 2010. uitgebracht door OCEN SAN v3 Update document 2010 uitgebracht door OCEN Inhoudsopgave. Inleiding...3 1 Navigatie...4 1.1 Navigatie: het menu...4 1.2 Navigatie: dashboard...4 1.3 Navigatie: kruimelpad...4 1.4 Navigatie: iconen

Nadere informatie

Handleiding. Act! SnelStart Connect Pro. handleiding. Act! SnelStartConnect Pro. Versie 1.0 3-4-2014

Handleiding. Act! SnelStart Connect Pro. handleiding. Act! SnelStartConnect Pro. Versie 1.0 3-4-2014 Act! SnelStartConnect Pro Handleiding Versie 1.0 3-4-2014 Inleiding Met SnelStart Connect Pro kunt uw Act!-database koppelen met uw SnelStart boekhouding. SnelStart Connect Pro biedt u de mogelijkheid

Nadere informatie

Handleiding GBO Helpdesk voor aanmelders

Handleiding GBO Helpdesk voor aanmelders Inhoud 1 Inleiding... 2 2 In- en uitloggen... 3 2.1 Webadres GBO Helpdesk... 3 2.2 Inloggen... 3 2.3 Wachtwoord wijzigen... 4 2.4 Uitloggen... 4 3 Incidenten... 5 3.1 Incident aanmelden... 5 3.2 Bijlage

Nadere informatie

App onderdelen. Source files. Android app onderdelen 1/6

App onderdelen. Source files. Android app onderdelen 1/6 Android app onderdelen 1/6 App onderdelen Een Android project bestaat uit een aantal onderdelen die hieronder beschreven worden. In het project venster kan je de mappen weergeven volgens de hieronder aangeduide

Nadere informatie

AFO 142 Titel Aanwinsten Geschiedenis

AFO 142 Titel Aanwinsten Geschiedenis AFO 142 Titel Aanwinsten Geschiedenis 142.1 Inleiding Titel Aanwinsten Geschiedenis wordt gebruikt om toevoegingen en verwijderingen van bepaalde locaties door te geven aan een centrale catalogus instantie.

Nadere informatie

Self-Service Portal Registeren, downloaden & activeren van een soft token

Self-Service Portal Registeren, downloaden & activeren van een soft token Self-Service Portal Registeren, downloaden & activeren van een soft token Document versie: 3.2 Uitgavedatum: september 2014 Inhoud Introductie... 3 Over 2 e factor authenticatie... 3 Over egrid authenticatie...

Nadere informatie

Net2 kaarten bedrukken

Net2 kaarten bedrukken kaarten bedrukken kaarten bedrukken - Welke methode? Er bevinden zich twee pakketen om kaarten te bedrukken in de software. Een basis vast formaat dat al aanwezig is in de software sinds 2003 (V3.16) en

Nadere informatie

1. Over LEVIY 5. Openen van de activiteit 2. Algemene definities 6. Inloggen op het LEVIY dashboard 3. Inloggen 6.1 Overzichtspagina 3.

1. Over LEVIY 5. Openen van de activiteit 2. Algemene definities 6. Inloggen op het LEVIY dashboard 3. Inloggen 6.1 Overzichtspagina 3. Versie 1.0 05.03.2015 02 1. Over LEVIY Wat doet LEVIY? 08 5. Openen van de activiteit Hoe wordt de activiteit geopend? 2. Algemene definities Behandelen van terugkerende definities. 09 6. Inloggen op het

Nadere informatie

Handleiding. Algemeen. Agendabeheer

Handleiding. Algemeen. Agendabeheer Handleiding Algemeen Agendabeheer G. Verwilghensingel 6 - B-3500 Hasselt - t. 011 360 360 - f. 011 360 369 BTW BE 0441.752.054 - KBC 450-0622771-87 - www.adsolut.be 1. I N H O U D 1. Inhoud... 1 2. Doel

Nadere informatie

Uitleg CMS Utrecht Your Way Button 1. Inloggen

Uitleg CMS Utrecht Your Way Button 1. Inloggen Uitleg CMS Utrecht Your Way Button 1. Inloggen Met jouw login gegevens kun je inloggen via http://button.utrechtyourway.nl/cms 2. Dashboard Na inloggen wordt het dashboard van het CMS zichtbaar. Of te

Nadere informatie

Een website maken met databasetoegang.

Een website maken met databasetoegang. Hoofdstuk 5 Een website maken met databasetoegang. In dit hoofdstuk gaan we het weblog dat je in hoofdstuk 4 hebt gemaakt verder uitbreiden. Een belangrijk onderdeel wordt toegevoegd aan de applicatie,

Nadere informatie

Technisch Ontwerp W e b s i t e W O S I

Technisch Ontwerp W e b s i t e W O S I Technisch Ontwerp W e b s i t e W O S I WOSI Ruud Jungbacker en Michael de Vries - Technisch ontwerp Website Document historie Versie(s) Versie Datum Status Omschrijving / wijzigingen 0.1 20 nov 2008 Concept

Nadere informatie

Gebruikershandleiding. Quick Smart Dimona NEW

Gebruikershandleiding. Quick Smart Dimona NEW Gebruikershandleiding Quick Smart Dimona NEW 1 Inhoudstafel Enkele basisprincipes 3 De parameters van de toepassing configureren 4 De werkgevers beheren 5 De werknemers beheren 6 Werknemers importeren

Nadere informatie

Selenium IDE Webdriver. Introductie

Selenium IDE Webdriver. Introductie Selenium IDE Webdriver Het Wielsem 10, 5231 BW s- Hertogenbosch, telefoon 073-6409311 e- mail info@testwork.nl internet http://www.testwork.nl 1 Inhoudsopgave 1 Inhoudsopgave... 2 2 Selenium IDE... 3 3

Nadere informatie

Dokters website en applicatie

Dokters website en applicatie Dokters website en applicatie Documentatie deel 1: de website De homepagina Figuur 1: De homepagina Op de homepagina komen meerdere onderdelen voor Een sfeerbeeld Contactinformatie met een straten plan

Nadere informatie

Handleiding TAPI Driver

Handleiding TAPI Driver Handleiding TAPI Driver Auteur: Marketing Datum: 01-10-2014 Versie: 2.0 Aantal bladen: 7 Nummer: 1021 2 P a g i n a Inhoud 1. Inleiding... 3 2. Installatie TAPI Driver... 4 2.1 Toegang Operator... 5 2.2

Nadere informatie

Bewerk uw eigen Digibordbij boek

Bewerk uw eigen Digibordbij boek Bewerk uw eigen Digibordbij boek Naast de presentatie van schoolboeken in het Digibordbij systeem is het voor leraren ook mogelijk aanpassingen te maken in de digitale boeken. De leraar kan via een aparte

Nadere informatie

Met een LightSwitch applicatie een OData service uit de Windows Azure Marketplace consumeren

Met een LightSwitch applicatie een OData service uit de Windows Azure Marketplace consumeren Met een LightSwitch applicatie een OData service uit de Windows Azure Marketplace consumeren Om eens wat ervaring op te doen met de Windows Azure Marketplace heb ik een publieke en gratis databron gekozen

Nadere informatie

Handleiding Websitebeheer

Handleiding Websitebeheer Handleiding Websitebeheer Event Media Websites Copyright 2005, Event Media 1. Inleiding... 3 2. CMS-systeem... 3 2.1 Inloggen... 3 2.2 Basis-menu... 3 2.3 Bestaande pagina s aanpassen...3 2.4 Nieuwe pagina

Nadere informatie

W I N D E X C C. ReleaseNotes 1.15

W I N D E X C C. ReleaseNotes 1.15 W I N D E X C C ReleaseNotes 1.15 INHOUD Inhoud 2 295 Positionering knoppen opslaan en definitief maken tijdschrijfformulier 4 296 Melding bij afsluiten tijdschrijfformulier verbergen 4 304 Aanpassen landentabel

Nadere informatie

Open SQL Server Management Studio en log in als Administator. Je ziet dan wat je in figuur 2.1 ziet.

Open SQL Server Management Studio en log in als Administator. Je ziet dan wat je in figuur 2.1 ziet. Hoofdstuk 2 Een ASP.NET applicatie met ADO.NET opzetten In dit hoofdstuk ga je een eenvoudige website opzetten, waarbij je een aantal gegevens uit een database ophaalt. Je moet je kennis van ADO.NET dus

Nadere informatie

Verslag. Projectteam: 107 Datum: 16 oktober 2008 Project leden: Lennard Fonteijn Harish Marhe Nicoletta Saba Turgay Saruhan Robin Tummers

Verslag. Projectteam: 107 Datum: 16 oktober 2008 Project leden: Lennard Fonteijn Harish Marhe Nicoletta Saba Turgay Saruhan Robin Tummers Verslag SE Projectteam: 107 Datum: 16 oktober 2008 Project leden: Lennard Fonteijn Harish Marhe Nicoletta Saba Turgay Saruhan Robin Tummers In dit verslag zullen wij een beschrijving geven, over welke

Nadere informatie

SportCTM 2.0 Startscherm trainer

SportCTM 2.0 Startscherm trainer SportCTM 2.0 Startscherm trainer Inloggen Webapplicatie Via inlog.dotcomsport.com kun je in inloggen op de webapplicatie van het SportCTM. Wij adviseren onderstaande browsers Windows: Internet Explorer,

Nadere informatie

Versie : 8.0.3.4978 Releasedatum : 30-06-2015 Geschikt voor Synergy Enterprise : v.a. batch 249

Versie : 8.0.3.4978 Releasedatum : 30-06-2015 Geschikt voor Synergy Enterprise : v.a. batch 249 Solution Builder SE : BSE200 Versie : 8.0.3.4978 Releasedatum : 30-06-2015 Geschikt voor Synergy Enterprise : v.a. batch 249 Gewijzigd in Solution Builder 8 en ITSM 8 In Solution Builder versie 8 zijn

Nadere informatie

Handleiding CMS Joomla 3.2 v1.2

Handleiding CMS Joomla 3.2 v1.2 Handleiding CMS Joomla 3.2 v1.2 Inhoudsopgave 1. Inloggen op het CMS-systeem 2. Artikelen en Categorieën beheren 2.1 Aanmaken en beheren van een artikel 2.2 Verwijderen van een artikel 2.3 Aanmaken van

Nadere informatie

Handleiding Fotopagina

Handleiding Fotopagina Handleiding Fotopagina Leden van de Vrienden van de Pyreneese berghond kunnen een album aanmaken op onze fotopagina. Per lid/gezin is één album van maximaal 250 foto's beschikbaar. Deze handleiding bestaat

Nadere informatie

InterSmart: A Twitter based quiz application for PowerPoint audiences

InterSmart: A Twitter based quiz application for PowerPoint audiences Scriptie ingediend tot het behalen van de graad van PROFESSIONELE BACHELOR IN DE ELEKTRONICA-ICT InterSmart: A Twitter based quiz application for PowerPoint audiences David De Beuckelaer bachelor elektronica-ict

Nadere informatie

Handleiding. Documentbeheer. PlanCare 2. elektronisch cliënten dossier. G2 Paramedici het EPD voor paramedici. Handleiding. Declareren. Versie 3.0.0.

Handleiding. Documentbeheer. PlanCare 2. elektronisch cliënten dossier. G2 Paramedici het EPD voor paramedici. Handleiding. Declareren. Versie 3.0.0. Handleiding Documentbeheer Handleiding Declareren Versie 3.0.0.3 PlanCare 2 elektronisch cliënten dossier G2 Paramedici het EPD voor paramedici INHOUDSOPGAVE 1 Inleiding... 2 2 Gebruik van de module...

Nadere informatie

en via WISA. 29 juli 2016. WISA helpdesk

en via WISA. 29 juli 2016. WISA helpdesk E-mailen via WISA 29 juli 2016 WISA helpdesk Inhoudsopgave 1 E-mailen via WISA 2 1.1 Instellingen.................................... 3 1.1.1 Mails sturen via............................. 3 1.1.1.1 Standaard

Nadere informatie

1 BUSINESS INTERNET SUPPORT

1 BUSINESS INTERNET SUPPORT Versie 1 BUSINESS INTERNET SUPPORT Yoron Dot Net Stap voor stap Handleiding YORON DOT NET BEHEER V1.X Stap voor stap handleiding YORON Het Wielsem 10 s-hertogenbosch Inhoudsopgave Opstarten Yoron DotNet

Nadere informatie

Versie 1.0. Gebruikershandleiding MND-applicatie

Versie 1.0. Gebruikershandleiding MND-applicatie Gebruikershandleiding MND-applicatie Wijzigingsbeheer Versie Datum Omschrijving Auteur(s) 0.1 5-3-2014 Initiële versie J. van Luijk 0.2 7-3-2014 Feedback EZ verwerkt J. van Luijk 0.3 11-3-2014 Feedback

Nadere informatie

Factuur Lay-out / Factuur Template

Factuur Lay-out / Factuur Template Factuur Lay-out / Factuur Template In i-reserve is het mogelijk facturen te verzenden. De facturen worden als pdf bijlage per e-mail naar de klant verzonden. In deze tutorial wordt beschreven hoe u een

Nadere informatie

Gebruikershandleiding. StUF Testplatform Versie 1.3.0

Gebruikershandleiding. StUF Testplatform Versie 1.3.0 Gebruikershandleiding StUF Testplatform Versie 1.3.0 Documentversie: 0.7 Datum 25 november 2014 Status In gebruik Inhoudsopgave 1 INLEIDING...3 2 GEBRUIK MAKEN VAN HET STUF TESTPLATFORM...4 2.1 INLOGGEN

Nadere informatie

HANDLEIDING DMS Plugin Installatie, configuratie & werking

HANDLEIDING DMS Plugin Installatie, configuratie & werking HANDLEIDING DMS Plugin Installatie, configuratie & werking Dit document is de handleiding voor de installatie, configuratie en werking van de DMS Plugin. Versie 1-12/09/2005 Inhoudstafel 1 Installatie...

Nadere informatie

e-tracker Pro User guide

e-tracker Pro User guide e-tracker Pro Vol g de statu s van uw pakketten online User guide Versie 0.1 Inhoudstafel Introductie... 2 Zich aanmelden bij e-tracker pro... 3 Hoe e-tracker Pro gebruiken?... 5 Het horizontale menu...6

Nadere informatie

In het CMS is het mogelijk om formulieren aan te maken. Voorafgaand een belangrijke tip:

In het CMS is het mogelijk om formulieren aan te maken. Voorafgaand een belangrijke tip: FORMULIEREN In het CMS is het mogelijk om formulieren aan te maken. Voorafgaand een belangrijke tip: belangrijk Importeer formulierdata uit een CSV-bestand precies zoals verderop beschreven. 1. Gedrag

Nadere informatie

Handleiding Zarafa Webapp. The Best Open Source Email & Collaboration Software

Handleiding Zarafa Webapp. The Best Open Source Email & Collaboration Software Handleiding Zarafa Webapp The Best Open Source Email & Collaboration Software Door: Campai BV Tel. : 079-3637050 Tel. Support: 079-3637051 Gemaakt op: 22-03- 2013 Inhoud 1. Inloggen... 3 2. Settings (instellingen)...

Nadere informatie

Inhoud Wat is mobiel werken?... 2 Installeren VPN Client... 3 Laptop... 3 Windows 8... 4 Windows 7... 10 Mac OS X... 16 Linux... 16 Tablet...

Inhoud Wat is mobiel werken?... 2 Installeren VPN Client... 3 Laptop... 3 Windows 8... 4 Windows 7... 10 Mac OS X... 16 Linux... 16 Tablet... 333 Inhoud Wat is mobiel werken?... 2 Installeren VPN Client... 3 Laptop... 3 Windows 8... 4 Windows 7... 10 Mac OS X... 16 Linux... 16 Tablet... 18 ios (ipad)... 18 Android... 21 Windows... 21 Smartphone...

Nadere informatie

MA!N Rapportages en Analyses

MA!N Rapportages en Analyses MA!N Rapportages en Analyses Auteur Versie CE-iT 1.2 Inhoud 1 Inleiding... 3 2 Microsoft Excel Pivot analyses... 4 2.1 Verbinding met database... 4 2.2 Data analyseren... 5 2.3 Analyses verversen... 6

Nadere informatie

Handleiding. Omschrijving Handleiding RaadDigitaal Android. Datum 29-01-2015 Versienummer 2.1

Handleiding. Omschrijving Handleiding RaadDigitaal Android. Datum 29-01-2015 Versienummer 2.1 Handleiding Omschrijving Handleiding RaadDigitaal Android Auteur SIMgroep Datum 29-01-2015 Versienummer 2.1 Inhoudsopgave HANDLEIDING... 1 INHOUDSOPGAVE... 2 1. INLEIDING... 3 2. RAADDIGITAAL INSTALLEREN...

Nadere informatie

GEBRUIKERSHANDLEIDING MAAKJETRAINING.NL 1

GEBRUIKERSHANDLEIDING MAAKJETRAINING.NL 1 GEBRUIKERSHANDLEIDING MAAKJETRAINING.NL 1 INHOUD 1 Inleiding 3 1.1 De drie categorieën 3 2 Inloggen op MaakJeTraining 4 2.1 Registreren op MaakJeTraining 4 2.2 Inloggen met account 5 2.3 Veranderingen

Nadere informatie

IMAP-handleiding Bookinto

IMAP-handleiding Bookinto IMAP-handleiding Bookinto Olivier Nuyts 2Ti6 Ewout Spitaels 2Ti6 Departement Handelswetenschappen en Bedrijfskunde Bachelor Toegepaste Informatica 2 de jaar Academiejaar 2010-2011 Overzicht Inleiding Bookinto

Nadere informatie

DÉ APP DIE UW BEURSDEELNAME DOET RENDEREN

DÉ APP DIE UW BEURSDEELNAME DOET RENDEREN DÉ APP DIE UW BEURSDEELNAME DOET RENDEREN Leg alle essentiële informatie over uw potentiële klanten efficiënt vast. Ontdek binnenin een uitgebreide handleiding voor Boabee. WAT IS BOABEE? Boabee is een

Nadere informatie

HANDLEIDING EXTERNE TOEGANG CURAMARE

HANDLEIDING EXTERNE TOEGANG CURAMARE HANDLEIDING EXTERNE TOEGANG CURAMARE Via onze SonicWALL Secure Remote Access Appliance is het mogelijk om vanaf thuis in te loggen op de RDS omgeving van CuraMare. Deze handleiding beschrijft de inlogmethode

Nadere informatie

Vraag 1. Vraag 1a TERUGKOPPELING PROEFTENTAMEN. Software architecture

Vraag 1. Vraag 1a TERUGKOPPELING PROEFTENTAMEN. Software architecture Software architecture IM0203 TERUGKOPPELING PROEFTENTAMEN Vraag 1 Vraag 1a Veel van de in het werkboek besproken patterns kunnen ingezet worden voor het referentiesysteem. We lopen de patterns hier stuk

Nadere informatie

Hiervoor heeft u toegang nodig met uw persoonlijke account. Vraag uw account aan, aan de hoofd beheerder.

Hiervoor heeft u toegang nodig met uw persoonlijke account. Vraag uw account aan, aan de hoofd beheerder. Handleiding Gebruik Download Chrome voor de beste compatibiliteit Aanmelden link: http://www.omegabelgium.com/cms/ Hiervoor heeft u toegang nodig met uw persoonlijke account. Vraag uw account aan, aan

Nadere informatie

Handleiding Wordpress CMS 4-5-2015

Handleiding Wordpress CMS 4-5-2015 Handleiding Wordpress CMS 4-5-2015 Inhoud 1. Het dashboard.... 3 2. Een pagina of bericht aanpassen.... 5 3. Een nieuw bericht toevoegen... 6 4. Een pagina maken... 7 5. Website met sitebuilder... 8 6.

Nadere informatie

Mach3Framework 5.0 / Website

Mach3Framework 5.0 / Website Mach3Framework 5.0 / Website Handleiding Mach3Builders Inhoudsopgave 1 Inloggen...5 1.1 Ingelogd blijven...6 1.2 Wachtwoord vergeten...7 2 Applicatie keuzescherm...8 2.1 De beheeromgeving openen...9 3

Nadere informatie

Handleiding dashboard. 3WA SaaS platform

Handleiding dashboard. 3WA SaaS platform Handleiding dashboard 3WA SaaS platform 151021 versie 1.0.2 Inhoud Inloggen... 3 Menu... 4 Algemeen... 5 Beginscherm... 5 Toevoegen widget aan dashboard... 5 Overige functionaliteiten bij widgets... 8

Nadere informatie

Gebruikershandleiding Mijn ANWB voor de Zaak

Gebruikershandleiding Mijn ANWB voor de Zaak Gebruikershandleiding Mijn ANWB voor de Zaak Waar vind ik Mijn ANWB voor de zaak? 1. Ga naar anwb.nl/zakelijk. U bent op de homepage van ANWB voor de Zaak. 2. Klik op Mijn ANWB voor de Zaak onder het kopje

Nadere informatie

Web Handleiding. semper vigilant Fall 2014 LOCALBOX 1.1.3

Web Handleiding. semper vigilant Fall 2014 LOCALBOX 1.1.3 Web Handleiding semper vigilant Fall 2014 Functionaliteiten web-based 2 Inloggen 2 Home 3 Uploaden: 4 Opties: 6 Map Delen: 6 Beheer Links 8 Functionaliteiten App-based 12 Hoger niveau 16 Acties op bestanden

Nadere informatie

Handleiding. Act! SnelStart Connect. handleiding. Act! SnelStart Connect. Versie 1.0 12-12-2013

Handleiding. Act! SnelStart Connect. handleiding. Act! SnelStart Connect. Versie 1.0 12-12-2013 Act! SnelStart Connect Handleiding Versie 1.0 12-12-2013 Inleiding Met SnelStart Connect kunt uw Act! database koppelen met uw SnelStart boekhouding. SnelStart Connect biedt u de mogelijkheid om de gegevens

Nadere informatie

Formulieren maken met Dreamweaver CS 4

Formulieren maken met Dreamweaver CS 4 Formulieren maken met Dreamweaver CS 4 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit zoveel

Nadere informatie

Handleiding RoosterPlaats

Handleiding RoosterPlaats Handleiding RoosterPlaats In dit document wordt uiteengezet hoe u aan de hand van onderstaande 5 stappen weergegeven in de Wizard van RoosterPlaats een rooster kunt maken. Deze vijf stappen helpen u bij

Nadere informatie

DHL EXPRESS. 1 DHL IntraShip User Guide

DHL EXPRESS. 1 DHL IntraShip User Guide DHL EXPRESS 1 DHL IntraShip User Guide INLOGGEN Gebruik uw login & wachtwoord om in te loggen op DHL INTRASHIP via https://www.intraship-dhl.be Via de MyDHL portaal via http://www.mydhl.com kan u ook op

Nadere informatie

Website van het openbaar ministerie Korte gebruikershandleiding voor Content Managers

Website van het openbaar ministerie Korte gebruikershandleiding voor Content Managers Website van het openbaar ministerie Korte gebruikershandleiding voor Content Managers De website van het openbaar ministerie is momenteel (tijdelijk) te vinden op volgende intranetadres: http://10.241.132.229.

Nadere informatie

Installatiehandleiding Business Assistent

Installatiehandleiding Business Assistent Installatiehandleiding Business Assistent Wijzigingsgeschiedenis Versie Datum Omschrijving Status 0.1 25-09-2014 Eerste opzet van het installatie Concept document. 1.0 04-11-2014 Geen: Commercieel maken

Nadere informatie

Handleiding One Payroll Portal App

Handleiding One Payroll Portal App Handleiding One Payroll Portal App Inhoudsopgave Voor wie is de App bedoeld? Wat kan ik doen met de App? Hoe installeer ik de App? De App Per onderdeel uitgelicht Veelgestelde vragen Voor wie is de App

Nadere informatie

Inrichting Systeem: Locaties & Toegang

Inrichting Systeem: Locaties & Toegang Inrichting Systeem: Locaties & Toegang EasySecure International B.V. +31(0)88 0000 083 Info@EasySecure.nl Support.EasySecure.nl v2.0.11 22-09-2014 In deze handleidingen worden de volgende functies binnen

Nadere informatie

Web Presence Builder. Inhoud

Web Presence Builder. Inhoud Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf

Nadere informatie

Technische nota AbiFire5 Rapporten maken via ODBC

Technische nota AbiFire5 Rapporten maken via ODBC Technische nota AbiFire5 Rapporten maken via ODBC Laatste revisie: 29 juli 2009 Inhoudsopgave Inleiding... 2 1 Installatie ODBC driver... 2 2 Systeeminstellingen in AbiFire5... 3 2.1 Aanmaken extern profiel...

Nadere informatie

Central Station. CS website

Central Station. CS website Central Station CS website Versie 1.0 18-05-2007 Inhoud Inleiding...3 1 De website...4 2 Het content management systeem...5 2.1 Inloggen in het CMS... 5 2.2 Boomstructuur... 5 2.3 Maptypen... 6 2.4 Aanmaken

Nadere informatie

Eindgebruikershandleiding Jira

Eindgebruikershandleiding Jira Eindgebruikershandleiding Jira Datum: 19-11-2012 Auteur: ing. N. Jonathans Versie: 2.1 Green Valley heeft als missie software te ontwikkelen waardoor de burger en het bedrijfsleven nog prettiger en makkelijker

Nadere informatie

Kennis na het volgen van de training. Na het volgen van deze training bent u in staat:

Kennis na het volgen van de training. Na het volgen van deze training bent u in staat: Training Trainingscode Duur Gepubliceerd Taal Type Leermethode Kosten SF2015V8 4 dagen 02/02/2015 Nederlands & Engels Developer, basis Invidueel & klassikaal Op aanvraag Deze training richt zich op het

Nadere informatie

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010 Het Wepsysteem Het Wepsysteem is een content management systeem, een systeem om zonder veel kennis van html of andere internettalen een website te onderhouden en uit te breiden. Met het Content Management

Nadere informatie

Central Station. Handleiding Algemeen Maatschappelijk Werk

Central Station. Handleiding Algemeen Maatschappelijk Werk Central Station Handleiding Algemeen Maatschappelijk Werk Versie: november 2010 Inhoudsopgave Inleiding... 3 H1. Cliëntdossier... 4 H1.1 Zoeken naar een cliëntdossier... 4 H1.2. Aanmaken van een nieuw

Nadere informatie

Handleiding indesteeg.nl

Handleiding indesteeg.nl Handleiding indesteeg.nl Deze korte handleiding beschrijft hoe u artikelen of kalender items toe kan voegen aan de website. 1) Registreren Het is noodzakelijk om allereerst te registreren om een gebruikersaccount

Nadere informatie

Handleiding Formulieren in TYPO3 Versie 1.2, 18 juli 2008

Handleiding Formulieren in TYPO3 Versie 1.2, 18 juli 2008 Handleiding Formulieren in TYPO3 Versie 1.2, 18 juli 2008 1. Formulieren aanmaken en plaatsen... 2 1.1 Formulieren aanmaken... 2 1.2 Formulier plaatsen op een pagina... 8 1.3 Aanmaken formulieren map...

Nadere informatie

Handleiding ESS na de upgrade People Inc. versie 3.5.0

Handleiding ESS na de upgrade People Inc. versie 3.5.0 Handleiding ESS na de upgrade People Inc. versie 3.5.0 I Handleiding ESS na de upgrade People Inc. versie 3.5.0 Inhoudsopgave Hoofdstuk 1 1 1.1 ESS... Iconen selecteren 1 1.2 ESS... Inlog scherm tekst

Nadere informatie

Formulieren maken met Dreamweaver CS 4/CS 5

Formulieren maken met Dreamweaver CS 4/CS 5 Formulieren maken met Dreamweaver CS 4/CS 5 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit

Nadere informatie