Windows Universal Application development

Scriptie ingediend tot het behalen van de graad van PROFESSIONELE BACHELOR IN DE ELEKTRONICA-ICT

Windows Universal Application development Bart Bogaerts Departement Wetenschappen en Techniek Opleiding Elektronica-ICT Academiejaar 2014-2015

Interne promotor: Patrick Van Houtven Externe promotor: Tom Wuyts

Versie: 12 juni 2015

Dankwoord

Allereerst wil ik graag Mark Devos en het bedrijf Calidos bedanken om mij de mogelijkheid te geven hier stage te lopen. Het hele team van Calidos ben ik dankbaar voor een zeer aangename tijd en hun hulp tijdens de stage. Daarnaast wil ik graag Patrick Van Houtven en Tom Wuyts, mijn promotors, bedanken voor de hulp en begeleiding tijdens mijn stage. Alsook collega’s Bart Lannoeye, Maarten Merken en Stijn De Cat, bij wie ik steeds terecht kon met vragen, wil ik bij deze bedanken. Ten slotte wil ik graag nog een dankwoord richten aan Tim Dams voor de ondersteuning tijdens mijn stageperiode en alle administratieve taken die daarbij komen kijken. Antwerpen, 12 juni 2015 Bart Bogaerts

i

Abstract Het project van Calidos bestaat uit de ontwikkeling van een desktop applicatie geschikt voor Windows 8.1. Hierbij zal ik mij moeten integreren in een team dat reeds aan de ontwikkeling van de applicatie bezig is. De Windows applicatie dient ondersteuning te bieden aan ziekenhuizen en andere organisaties in de zorg. De applicatie is ontwikkeld om de workflow van klinische studies te organiseren. Een klinische studie is een proces waarbij men een geneesmiddel test en evalueert. Dit proces wordt op een geselecteerde patiëntengroep getest. De workflow van een klinische studie omvat verschillende aspecten. Namelijk: • Plannen van patiëntcontacten • Uitvoeren van de contacten • Opvolging van de contacten • Monitoring vanuit firma • Audits • Facturatie Al deze aspecten worden verwerkt in de Windows applicatie. Deze applicatie wordt aangeboden aan ziekenhuizen en andere zorgorganisaties. Het gebruik hiervan zal resulteren in een geoptimaliseerd werkproces. Een gedeelte van de ontwikkeling van deze applicatie is als bachelorproef aan mij toegewezen. Bij de ontwikkeling van dit bepaald departement van de applicatie, moet er rekening gehouden worden met de stijl en architectuur dat het team in acht neemt bij het ontwikkelen van de software. De opdracht is volbracht wanneer het gedeelte volledig functioneel en visueel aan de eisen voldoet. Rekening houdende met bepaalde regels die tijdens het programmeren gerespecteerd worden. Deze regels worden toegelicht in de codering handleiding. Indien dit volbracht is, zal de opdracht uitbreiden. De uitbreiding zal de ontwikkeling van een nieuw departement inhouden. Het zal een soortgelijke structuur hebben als voorafgaande opdracht. ii

Inhoudsopgave

Dankwoord

i

Abstract

ii

1 Situering 1.1 Bestaande situatie . . . . . . . . . . . . . 1.2 Doel . . . . . . . . . . . . . . . . . . . . 1.3 Gebruikte technologieën . . . . . . . . . . 1.3.1 Windows 8.1 Universal Application 1.3.2 C# . . . . . . . . . . . . . . . . . 1.3.3 XAML . . . . . . . . . . . . . . . 1.3.4 MVVM . . . . . . . . . . . . . . . 1.3.5 Prism voor Windows Store . . . . . 1.3.6 ASP.NET Web API . . . . . . . . 1.3.7 Microsoft Azure SQL Database . . 1.3.8 Azure AD Authentication Library . 1.3.9 Entity Framework 6 . . . . . . . . 1.4 Gebruikte software . . . . . . . . . . . . . 1.4.1 Visual Studio 2013 . . . . . . . . . 1.4.2 Team Foundation Server . . . . . . 1.4.3 Telerik UI for Windows Universal . 1.4.4 ReSharper . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

1 2 3 4 4 6 6 7 8 9 10 11 12 13 13 14 16 17

2 Bespreking 2.1 Onderzoek . . . . . . . . . . . . . . . . . . 2.2 Ontwikkeling configuratieschermen van lijsten 2.2.1 Streefdoel . . . . . . . . . . . . . . 2.2.2 Oplossing met tussenresultaten . . . 2.3 Ontwikkeling configuratieschermen van logs . 2.3.1 Streefdoel . . . . . . . . . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

18 18 19 20 26 34 35

iii

INHOUDSOPGAVE 2.3.2

iv

Oplossing met tussenresultaten . . . . . . . . . . . . . . . . . . . . .

41

3 Resultaten 3.1 Configuratieschermen van lijsten . . . . . . . . . . . . . . . . . . . . . . . . . 3.2 Configuratieschermen van logs . . . . . . . . . . . . . . . . . . . . . . . . . .

44 44 48

4 Besluit

51

A Codering handleiding A.1 Behaviors . . . . . . . . A.2 Gebruikte stijlen . . . . A.3 Project structuur . . . . A.4 Overzichtelijke klasse file A.5 Klasse structuur . . . . A.6 Naamgeving . . . . . .

. . . . . .

54 54 54 54 55 56 56

B Navigatie B.1 Navigatie met parameters . . . . . . . . . . . . . . . . . . . . . . . . . . . . B.2 Parsen van navigatie parameters . . . . . . . . . . . . . . . . . . . . . . . . .

58 58 59

C UserControl met databinding en implementatie

60

D VisualState bepalen vanuit MVVM

62

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

Lijst van figuren

1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 1.10 1.11 1.12 1.13 1.14 1.15 1.16

Windows . . . . . . . . . . . . . . . . . . . . . . . . . Projectstructuur van een Windows Universal Application Functie van Windows Runtime . . . . . . . . . . . . . . Windows apparaten (PC, laptop en tablet) . . . . . . . Windows Phone . . . . . . . . . . . . . . . . . . . . . Windows apparaten (PC, Windows Phone en tablet) . . C# . . . . . . . . . . . . . . . . . . . . . . . . . . . . XAML . . . . . . . . . . . . . . . . . . . . . . . . . . MVVM architectuur en interactie . . . . . . . . . . . . Prism voor Windows Store apps NuGet . . . . . . . . . ASP.NET Web API . . . . . . . . . . . . . . . . . . . Microsoft SQL Azure . . . . . . . . . . . . . . . . . . Entity Framework 6 . . . . . . . . . . . . . . . . . . . Visual Studio 2013 . . . . . . . . . . . . . . . . . . . . Team Foundation Server . . . . . . . . . . . . . . . . . ReSharper . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . .

1 2 4 4 5 5 6 6 7 8 9 10 12 13 14 17

2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11 2.12 2.13

Configuratie overzichtscherm . . . . . . . . . . . . . . . Scherm met overzicht van alle lijsten . . . . . . . . . . . Configuratiescherm van een lijst in ”definitie” toestand . . Configuratiescherm van een lijst in items toestand . . . . Configuratiescherm van een lijst in item-definitie toestand Foutmelding bij het saven van een lijst . . . . . . . . . . Button element in XAML . . . . . . . . . . . . . . . . . XAML resource style . . . . . . . . . . . . . . . . . . . . Property van het type RelayCommand . . . . . . . . . . Tussenresultaat van het configuratie overzichtscherm . . . CommandBar met button . . . . . . . . . . . . . . . . . Toepassing van keyword ’await’ . . . . . . . . . . . . . . Tussenresultaat van het lijsten overzichtscherm . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

20 21 22 23 24 25 26 26 27 27 28 28 29

v

LIJST VAN FIGUREN

vi

2.14 2.15 2.16 2.17 2.18 2.19 2.20 2.21 2.22 2.23 2.24 2.25 2.26 2.27 2.28

Genummerde usercontrols . . . . . . . . . . . . . . . . . . . . . . . Dependency property van het type string . . . . . . . . . . . . . . . TextBlock 1 met binding op de dependency property . . . . . . . . . Implementatie van een usercontrol met databinding op de dependency Een gedefinieerde VisualState van een VisualStateManagerl . . . . . Enum en property . . . . . . . . . . . . . . . . . . . . . . . . . . . Configuratiescherm van een lijst in lijst-definitie toestand . . . . . . . Configuratie overzichtscherm . . . . . . . . . . . . . . . . . . . . . Logs overzichtscherm . . . . . . . . . . . . . . . . . . . . . . . . . Logs overzichtscherm . . . . . . . . . . . . . . . . . . . . . . . . . Configuratiescherm van een log in kolommen toestand . . . . . . . . Configuratiescherm van een log in kolom-definitie toestand . . . . . . Configuratiescherm van een log in kolom-waarden toestand . . . . . Tussenresultaat configuratie overzichtscherm . . . . . . . . . . . . . Tussenresultaat logs overzichtscherm . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30 31 31 31 32 32 33 35 36 37 38 39 40 41 42

3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10

Overzichtscherm van de lijsten . . . . . . . . . . . . . . . . Configuratiescherm van een lijst in lijst-definitie toestand . . Configuratiescherm van een lijst in nieuwe-lijst toestand . . Configuratiescherm van een lijst in item-definitie toestand . Configuratiescherm van een lijst in nieuw-item toestand . . Configuratiescherm van een lijst met foutmelding . . . . . . Overzichtscherm van de logs . . . . . . . . . . . . . . . . . Configuratiescherm van een log in log-definitie toestand . . Configuratiescherm van een log in kolom-waarden toestand Configuratiescherm van een log in kolom-waarden toestand

. . . . . . . . . .

. . . . . . . . . .

44 45 45 46 46 47 48 49 50 50

C.1 Usercontrol XAML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . C.2 UserControl code behind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . C.3 UserControl implementatie . . . . . . . . . . . . . . . . . . . . . . . . . . . .

60 61 61

D.1 D.2 D.3 D.4 D.5 D.6 D.7

62 63 64 64 64 64 64

Usercontrols . . . . . . . . . . Visual State Manager . . . . . Enum to visual state control . . Extended Visual State Manager Enum . . . . . . . . . . . . . . Bindable property . . . . . . . Visual State zetten . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . . . . .

. . . . . . .

. . . . . . . . . .

. . . . . . .

. . . . . . . . . .

. . . . . . .

. . . . . . . . . .

. . . . . . .

. . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . . . . .

. . . . . . .

. . . . . . . . . .

. . . . . . .

. . . . . . . . . .

. . . . . . .

. . . . . . .

Hoofdstuk

1

Situering Het bedrijf Calidos werkt met een team van softwareontwikkelaars aan een groot project. Het project bestaat uit de ontwikkeling van een Windows Universal Application met C# en XAML. De applicatie is gericht naar pc’s en tablets die op Windows 8.1 draaien. De applicatie zal de naam Maät dragen. De oorsprong hiervan komt uit de Egyptische mythologie waar Maät de godin van de kosmische orde, waarheid en rechtvaardigheid is. De applicatie dient ondersteuning te bieden aan ziekenhuizen en andere organisaties in de zorg. Ondersteuning zowel op vlak van planning, opvolging en organisatie van een klinische studie. Dit aangeboden in een overzichtelijke Windows 8.1 applicatie.

Figuur 1.1: Windows

1

HOOFDSTUK 1. SITUERING

1.1

2

Bestaande situatie

Bij de aanvang van de stage was de ontwikkeling van Maät reeds aan de gang. Er is gekozen voor het creëren van een Universal Windows applicatie. Dit is een applicatie dat op eender welk Windows toestel kan draaien. Bij de keuze van een Universal Windows Application template worden er in Visual Studio 3 solutions aangemaakt, namelijk: Windows, Windows Phone en Windows Shared. Maar zoals reeds vermeld dient de applicatie enkel op PC’s, laptops en tablets te kunnen draaien. Daarom zal er enkel in de Windows en Windows Shared solution gewerkt worden en niet in de Windows Phone solution. Merk dus op dat in de onderstaande figuur de blauwe tiles niet aan de orde zijn.

Figuur 1.2: Projectstructuur van een Windows Universal Application Bij de start van de stage was er reeds heel wat ontwikkeld. Hieronder een overzicht. Meer technische uitleg over enkele van deze ontwikkelingen of technologieën worden verder in het document beschreven. • Start Windows 8.1 Universal Application project • Implementatie MVVM-patroon met prism library • Creatie XAML resource file • Creatie converters (Vb. VisibilityConverter, InverseBooleanConverter, ...) • Creatie controls (Vb. EnumToVisualState) • Web API service • Database • Demodata


1.2

3

Doel

Het doel van de stage is om een departement van de gehele applicatie te ontwikkelen. Het gedeelte dat als bachelorproef wordt verwezenlijkt, is de ontwikkeling van de configuratieschermen voor de lijsten. Dit houdt de ontwikkeling in van de schermen waar de gebruiker lijsten kan configureren. Hoe het geheel er functioneel en visueel moet uitzien bij de eindgebruiker is reeds bepaald. Als deze opdracht volbracht is zal er een code review plaatsvinden. Deze code review houdt het volgende in. Samen met de externe promotor zal de code geanalyseerd worden om deze dan vervolgens waar nodig te optimaliseren, vereenvoudigen of bepaalde functionaliteiten op een andere manier aan te pakken. Overbodige en duplicate code moet zo minimaal mogelijk zijn. Ook de leesbaarheid van de geschreven code is een belangrijke factor. Dit zodat een collega op elk ogenblik de code duidelijk kan begrijpen en eventueel uitbreiden of wijzigen. De configuratieschermen voor de lijsten zijn afgewerkt wanneer het functioneel en visueel aan ˜ nt mogelijke manier geprogrammeerd de eisen voldoet. Er moet op een zo leesbare en efficiA zijn. Volledig vrij van bugs, errors en exceptions. Als deze opdracht volbracht is, dan wordt er aan een volgend gedeelte begonnen. Dit gedeelte zal de ontwikkeling van de configuratieschermen van de logs inhouden. Dit gedeelte heeft een soortgelijke structuur als de configuratieschermen van de lijsten maar zal iets complexer en uitgebreider zijn. Ook hier is reeds bepaald hoe het geheel er functioneel en visueel moet ˜ nt mogelijke uitzien bij de eindgebruiker. Alsook moet dit gedeelte op een zo leesbare en efficiA manier geprogrammeerd zijn. Volledig vrij van bugs, errors en exceptions.


1.3

4

Gebruikte technologie¨ en

In dit gedeelte worden gebruikte technologieën toegelicht.

1.3.1

Windows 8.1 Universal Application

Vooraleer kan uitgelegd worden wat een Windows Universal Application is, is het van belang dat volgende begrippen worden toegelicht. Windows Runtime stelt Windows Store applicaties in staat om in verschillende programmeertalen geschreven te worden. Zoals onderstaande figuur aantoont.

Figuur 1.3: Functie van Windows Runtime Een Windows Runtime applicatie is een applicatie die gebruik maakt van Windows Runtime en draait op Windows 8 of 8.1 apparaten, zoals PC’s, laptops, tablets of Windows Phones. Een Windows Store app is een Windows Runtime app die draait op Windows-apparaten (zoals PC’s, tablets of laptops) en kan worden verkocht in de Windows Store.

Figuur 1.4: Windows apparaten (PC, laptop en tablet)


5

Een Windows Phone Store app is een Windows Runtime app die draait op Windows Phones en kan worden verkocht in de Windows Phone Store.

Figuur 1.5: Windows Phone Huidige versies van Visual Studio bieden een Universal Windows Application template aan waarmee zowel een Windows Store applicatie als een Windows Phone Store applicatie gecreëerd word in hetzelfde project.

Figuur 1.6: Windows apparaten (PC, Windows Phone en tablet) Wanneer het ontwikkelen voltooid is kunnen er applicatie pakketten voor de Windows Store en Windows Phone Store geproduceerd worden met slechts één enkele actie om de applicatie aan de klanten aan te bieden op elk Windows apparaat. Zoals reeds vermeld is de applicatie Maät een Universal Windows applicatie die enkel gericht is naar PC’s, laptops en tablets. Maät zal dus verkrijgbaar zijn als Windows Store applicatie. In het Windows Phone gedeelte van het project wordt niet gewerkt. De oorsprong van de keuze om een Universal Windows applicatie te creëren komt van Microsoft met het volgende advies. De beste manier om voorbereid te zijn op Windows 10 is om uw Universal Windows applicatie te ontwikkelen voor Windows 8.1 en Windows Phone 8.1.


1.3.2

6

C#

C# is de programmeertaal waarin de achterliggende code van de applicatie Maät ontwikkeld wordt. C# is ontwikkeld door Microsoft. De programmeertaal is samen met het .NETframework ge¨ıntroduceerd, en wordt beschouwd als de belangrijkste taal voor dit platform.

Figuur 1.7: C#

1.3.3

XAML

XAML of voluit Extensible Application Markup Language dient als opmaaktaal om de gebruikersinterface, om elementen, gebeurtenissen en andere onderdelen daarvan te definiëren. De taal is ontwikkeld door Microsoft en is gebaseerd op XML.

Figuur 1.8: XAML


1.3.4

7

MVVM

Het Model-View-ViewModel (MVVM) patroon zorgt voor een scheiding in de applicatie van de business en presentatie logica ten opzichte van zijn user interface (UI). Door de applicatie logica en de UI te scheiden is de applicatie makkelijker te ontwikkelen, testen en onderhouden. Ook een sterke verbetering van code re-use kan hieruit voortvloeien. Bij gebruik van het MVVM-patroon wordt de UI van de applicatie en de onderliggende presentatie en business logica opgedeeld in onderstaande drie klassen. • View (encapsuleert de UI en UI logica) De verantwoordelijkheid van de view is om de structuur en het uitzicht van wat de gebruiker ziet op het scherm te definiëren. Ideaal gezien bezit de achterliggende code van de view enkel een constructor die de InitializeComponent methode aanroept. • Viewmodel (encapsuleert de presentatie logica en staat) Het viewmodel zal de presentatie logica voor zijn rekening nemen. Het viewmodel implementeert properties en commands waarop de view kan databinden. Ook informeert het de view over toestand veranderingen via notification events. • Model (encapsuleert de business logica en data) Het model definieert data structuren gebaseerd op het data model van de applicatie zowel als het ondersteunen van business en validatie logica. Alsook kan het model code bevatten om toegang tot de gegevens en caching te ondersteunen, hoewel hiervoor meestal een aparte data repository wordt gebruikt.

Figuur 1.9: MVVM architectuur en interactie


1.3.5

8

Prism voor Windows Store

Prism helpt ontwikkelaars bij het ontwikkelen van Windows Store apps. Het versnelt de ontwikkeling door het verlenen van support bij MVVM, gekoppelde communicatie en de core services in Windows Store apps. Prism helpt bij het ontwikkelen van een consistente en hoge kwaliteit app. De gebruikte Microsoft.Practices.Prism.StoreApps bibliotheek is een klasse bibliotheek die MVVM support biedt met lifecycle management, en core services aan de applictie.

Figuur 1.10: Prism voor Windows Store apps NuGet


1.3.6

9

ASP.NET Web API

ASP.NET is een onderdeel van het .NET framework van Microsoft. ASP.NET Web API is een framework dat de ontwikkeling van HTTP services die een breed scala van clients bereiken vergemakkelijkt, inclusief browsers en mobiele toestellen. Op basis van client requests wordt data teruggegeven. Wanneer een client een request om data verstuurt als JSON of XML, behandelt het Web API framework het request type en geeft de data terug op basis van het media type. Standaard geeft het Web API framework JSON en XML gebaseerde antwoorden. Web API is een ideaal platform om puur HTTP gebaseerde services te ontwikkelen waar de verzoeken en antwoorden gebeuren met het HTTP protocol. De client kan een GET, PUT, POST en DELETE request sturen en krijgt vervolgens het passend Web API antwoord. Samenvattend is de Web API: • Een HTTP service • Ontworpen voor een breed bereik • Gebruikt HTTP als een applicatie protocol, niet als een transport protocol

Figuur 1.11: ASP.NET Web API


1.3.7

10

Microsoft Azure SQL Database

SQL Database is een relationele database service in de cloud, gebaseerd op de Microsoft SQL Server engine. SQL Database biedt betrouwbare prestaties, schaalbaarheid, data bescherming en bijna geen administratie aan cloud ontwikkelaars en solution architecten. SQL Database ondersteunt de bestaande SQL Server tools, libraries en API’s, wat het verplaatsen van de cloud vergemakkelijkt. Binnen enkele seconden kan een SQL database opgezet en operationeel zijn, zonder virtuele machines of infrastructuren te managen. Zo kan er gefocust worden op het ontwikkelen en managen van de applicatie. SLA (Service Level Agreement) verzekert een bijna nul down tijd van de applicatie. De ingebouwde data bescherming via auditing, restore en geo-replication garanderen dat de data altijd beschermd is. SQL Database biedt de mogelijkheid om data te herstellen naar elk moment in tijd tot 35 dagen terug. De laatste versie van SQL Database, V12, biedt bijna complete compatibiliteit met de SQL Server engine.

Figuur 1.12: Microsoft SQL Azure


1.3.8

11

Azure AD Authentication Library

De Azure AD Authentication Library (ADAL) voor .NET maakt het mogelijk voor client applicatie ontwikkelaars om eenvoudig gebruikers te authentificeren naar cloud of on-premises Active Directory (AD), en vervolgens de access tokens te verkrijgen voor het beveiligen van API calls. ADAL voor .NET heeft vele functies om authenticatie gemakkelijker te maken voor ontwikkelaars. Het biedt de volgende functies: • Asynchrone methoden ADAL voor .NET ondersteunt asynchrone varianten voor elke methode die een token verwerven, wat zal resulteren in een applicatie die veel sneller reageert tijdens het verificatieproces. • Token acquisitie ADAL voor .NET vergemakkelijkt het proces van het verwerven van tokens van Azure AD met behulp van verschillende identiteit providers, protocollen en verificatie types. ADAL kan het volledige token acquisitie proces beheren in slechts een paar lijnen code, inclusief de authenticatie gebruikerservaring. Als alternatief kunnen ruwe verificatiegegevens voorzien worden die de applicatie of gebruiker representeren en ADAL zal het token ophalen. • Token cache ADAL voor .NET slaat alle toegangstokens standaard op in een in-memory token cache, maar de mogelijkheid om zelf een cache implementatie te schrijven of de token cache volledig uit te schakelen bestaat. • Automatische token vernieuwing In toevoeging aan de token cache, ondersteunt ADAL automatische vernieuwing van tokens wanneer deze verlopen. ADAL zal een query sturen naar de token cache om te controleren of de token verlopen is, en vervolgens trachten een nieuwe token te verkrijgen met gebruik van de cached refresh token. Doordat ADAL het meeste van de complexiteit behandelt, helpt het een ontwikkelaar zich te focussen op business logica in de applicatie en eenvoudig resources te beveiligen zonder een expert op gebied van security te zijn.


1.3.9

12

Entity Framework 6

Entity Framework (EF) is een Object Relational Mapper (ORM) en is een component van het .NET framework. Het EF stelt ontwikkelaars in staat om met data in de vorm van domeinspecifieke objecten en properties te werken, zonder zich te bekommeren om de onderliggende database tables en columns waar deze data wordt opgeslagen. Met het EF kunnen ontwikkelaars werken op een hoger niveau van abstractie wanneer zij omgaan met data. ˜ nteerde applicaties ontwikkeld worden met minder code. Zo kunnen data georiA

Figuur 1.13: Entity Framework 6


1.4

13

Gebruikte software

In dit gedeelte wordt gebruikte software toegelicht.

1.4.1

Visual Studio 2013

Microsoft Visual Studio is een programmeerontwikkelomgeving van Microsoft. Standaard zit er in Visual Studio een complete set aan ontwikkelingstools om computerprogramma’s te ontwikkelen in diverse talen. De talen Visual Basic.Net, C#, F# en C++ worden in de standaardeditie meegeleverd. Visual Studio kan gebruikt worden om ASP.NET webapplicaties, XML webservices, desktopapplicaties en mobiele toepassingen te ontwerpen. Visual Studio is uitermate geschikt om Windows applicaties te ontwikkelen omdat er diverse standaardbibliotheken en MFC-klassenbibliotheken met programmeercode worden meegeleverd. Zo kan er op een eenvoudige wijze Windows-kenmerken zoals vensters en keuzemenu’s aan een programma gegeven worden. Het uitermate handige debugsysteem is een grote meerwaarde aan Visual Studio. Men kan duidelijk stap per stap in detail debuggen. Verder wordt er ook een volledige versie van de MSDN library meegeleverd. Visual Studio is ontworpen om het .NET framework te ondersteunen.

Figuur 1.14: Visual Studio 2013


1.4.2

14

Team Foundation Server

Beheer je repositories, build processen, testinfrastructuur en lab deployment allemaal tijdens het gemakkelijk samenwerken en rapporteren van de status. Team Foundation Server (TFS) ondersteunt het team van ontwikkelaars bij het verbinden, samenwerken en tijdig afleveren van resultaten. TFS is gecreëerd om meer uit het team van ontwikkelaars te krijgen. Het is de applicatie lifecycle management hub voor Visual Studio. Het stelt alle belanghebbenden in staat om deel te nemen aan het ontwikkel proces met het gebruik van slechts 1 enkele solution. TFS wordt gebruikt om zowel projecten als teams te managen. Het gebruik van TFS zal resulteren in een snellere ontwikkeling van de software.

Figuur 1.15: Team Foundation Server


15

TFS biedt de volgende functies: • Version control Check-in, check-out, manage versies, of gebruik merging om controle over het teamproject te behouden. Ondersteuning voor zowel gecentraliseerde versie controle (Team Foundation Version Control) als voor gedistribueerde versie controle (Git) in TFS geeft het team de flexibiliteit om de versie controle technologie te gebruiken naar keuze. • Agile planning & samenwerking Gebruik de agile werkwijzen in uw eigen tempo met behulp van templates voor Scrum, Agile of CMMI. Het is ook mogelijk om third party templates te gebruiken of zelf een ˜ ren. Werk samen met elke betrokkene bij het project gedurende het template te creA ontwikkelproces door het gebruik van werkitems, Kanban boards, en feedback verzoeken zodat iedereen die betrokken is bij het project ge¨ıntegreerd kan worden in de workflow. • Build Vat bugs en andere quality issues vroegtijdiger in de ontwikkeling. Met het gebruik van build is er een continue integratie om code te valideren op clean configuraties en een integratie van testen voor extra zekerheid. Blijf up-to-date over de laatste succesvolle build vanaf uw project homepage of binnen Visual Studio. • Web-based test case management Autoriseer en executeer testen op afstand, wat het gemakkelijker maakt voor alle teamleden om deel te nemen in de test case reviews. Ook bestaat de mogelijkheid om unit testen te profileren om betere code te ontwikkelen door middel van het opvolgen van de end-to-end flow van de code, inclusief de unit test zelf. • Reporting Volg werkitems met behulp van reporting in TFS om rapporten op basis van de huidige stand van de werkzaamheden te genereren. Query of maak werkitems favorieten om snel informatie te verwerven.


1.4.3

16

Telerik UI for Windows Universal

De eerste native user interface (UI) controls om Universal Windows apps te ontwikkelen. UI for Windows Universal biedt de volgende functies: • Build apps once, deploy on all Windows devices UI voor Windows Universal bespaart veel tijd voor Windows ontwikkelaars omdat men de code slechts 1 keer moet schrijven, en herbruiken voor zowel Windows Phone 8.1 en Windows 8.1 apps. • Windows Store ready UI Strikte naleving van de Windows Store design richtlijnen. • Native Universal Windows Controls Natively built, draait op zowel Windows 8.1 en Windows Phone 8.1. • Designed for touch Speciaal ontworpen voor de Windows 8 en Windows Phone touch omgeving. • Delightful UI Deze suite volgt de design richtlijnen van zowel Windows 8.1 en Windows Phone 8.1 en biedt een prachtige UI in uw applicaties. • Unmatched performance Geavanceerde UI virtualisatie garandeert uitzonderlijke prestaties van uw applicatie.


1.4.4

17

ReSharper

ReSharper (R#) is een tool die men kan gebruiken in Visual Studio. Deze tool maakt Microsoft Visual Studio een veel betere Integrated Development Environment (IDE). ReSharper gaat de functies van Visual Studio uitbreiden. ReShaper biedt volgende functies en ondersteuningen: • Code analysis Resharper breidt Visual Studio uit met meer dan 1700 code inspecties voor C#, VB.NET, ˜ n. Voor de meeste inspecties ASP.NET, JavaScript, TypeScript en andere technologieA biedt ReSharper een quick-fix (gloeilamp icoontje) om code te verbeteren. • Navigation and search ReSharper helpt onmiddellijk te landen op elke code in een solution, onafhankelijk hoe groot het is. Het helpt ook met het navigeren van elk symbool naar gerelateerde code, zoals implementaties van een interface, extensie methoden van een klasse of toepassingen van een field. • Refactorings Meer dan 40 refactorings en meer dan 200 context acties helpen om veilig code te organiseren en verplaatsen in een solution, verantwoordelijkheid te verdelen, ontkoppelen, de complexiteit te verminderen, of gewoon gebruik maken van een alternatieve taal syntax. • Code formatting and cleanup Configureer en pas toe welke codering stijl u en uw team het beste schikt. Codering stijl en formattering instellingen voor C# VB.NET, ASP.NET, JavaScript, TypeScript en andere programmeertalen kunnen worden toegepast in elke scope, van een selectie tot een solution. • Code generation ReSharper kan veel code voor u creëren, van nieuwe files en klassen tot conditionele blokken, van methoden en properties tot gelijkheid controles.

Figuur 1.16: ReSharper

Hoofdstuk

2

Bespreking In dit hoofdstuk wordt omschreven hoe de opdracht tot stand is gekomen. Zowel onderzoek, gewenste resultaat, aanpak, en tussenresultaten zullen hier aan bod komen. Vooraleer de mede ontwikkeling van Maät van start kon gaan is er een korte tutorial gevolgd. De tutorial leert de basis om een Windows Store Application te maken. Het is een korte en duidelijke tutorial. Een goede kennismaking met de technologie. De link van de tutorial: https://msdn.microsoft.com/en-us/library/windows/apps/dn631757. aspx

2.1

Onderzoek

Bij het toekomen aan het bedrijf vonden er de eerste twee dagen inleidingen en presentaties plaats. Hier is er zowel algemene uitleg als gebruikte technologieën als handleidingdocumenten toegelicht. Er is belangrijke documentatie ter beschikking met tips en richtlijnen voor bij het ontwikkelen van de applicatie. Bij de integratie in het project is het belangrijk dat Bijlage A wordt doorgenomen en gerespecteerd.

18

HOOFDSTUK 2. BESPREKING

2.2

19

Ontwikkeling configuratieschermen van lijsten

In de applicatie moeten lijsten volledig geconfigureerd kunnen worden. Een lijst bestaat uit: • Gegevens: – Code (uniek) – Naam – Omschrijving – Is meta (ja/neen) • Items: – Gegevens: ∗ Code (uniek) ∗ Naam ∗ Omschrijving ∗ Volgordenummer ∗ Is actief (ja/neen) De doelstelling is het ontwikkelen van de schermen waar lijsten volledig geconfigureerd kunnen worden.


2.2.1

20

Streefdoel

In dit gedeelte komen de visuele en functionele doelstellingen aan bod. Configuratie overzichtscherm Allereerst moet het scherm voorzien worden met een tegel die het configureren van lijsten aantoont. Wanneer op deze tegel wordt geklikt, moet er een navigatie plaatsvinden naar het scherm met een overzicht van alle lijsten.

Figuur 2.1: Configuratie overzichtscherm


21

Lijsten overzichtscherm Het overzichtscherm, waar alle bestaande lijsten worden weergegeven, heeft volgende doelstellingen. Elke lijst moet worden voorgesteld door een aparte tegel. In deze tegel moet de naam, code en omschrijving van de lijst in kwestie worden afgebeeld. Wanneer op een tegel wordt geklikt, moet een navigatie plaatsvinden naar het scherm waar de lijst in kwestie kan worden geconfigureerd. Bij rechtermuisklik op het scherm moet onderaan een commandobar verschijnen. Op deze commandobar moet een knop voorzien worden met de optie om een nieuwe lijst toe te voegen. Wanneer op deze knop wordt geklikt, moet de navigatie plaatsvinden naar het scherm waar de gebruiker een nieuwe lijst kan creëren. Dit is hetzelfde scherm waar de gebruiker een bestaande lijst kan configureren.

Figuur 2.2: Scherm met overzicht van alle lijsten


22

Configuratiescherm lijst Het configuratiescherm van een lijst heeft volgende doelstellingen. Aangezien een lijst bestaat uit gegevens en een aantal items, moeten er 2 opties voorzien worden. Enerzijds een optie ”Definitie” waar de gebruiker de gegevens van de lijst kan aanpassen. Anderzijds een optie ”Items” waar een overzicht van de items weergeven wordt. Wanneer optie ”Definitie” geselecteerd wordt, moeten de gegevens van de lijst aangepast kunnen worden. Er zijn 3 mogelijke scenario’s, namelijk: • Scenario 1 De lijst in kwestie is een meta lijst. In dit geval moeten de gegevens read-only zijn. • Scenario 2 De lijst in kwestie is een gewone lijst. In dit geval moet de gebruiker enkel de naam en omschrijving kunnen aanpassen. • Scenario 3 Creatie van een nieuwe lijst. Bij nieuwe lijsten de gebruiker de code invullen. De code van een lijst is uniek. Dit wil zeggen, wanneer een lijst wordt toegevoegd met een reeds bestaande code moet een foutmelding verschijnen. De visuele en functionele aspecten van deze foutmelding komen verder in het hoofdstuk aan bod.

Figuur 2.3: Configuratiescherm van een lijst in ”definitie” toestand


23

Wanneer men optie ”Items” selecteert moet de gebruiker een overzicht van de items te zien krijgen. De items moeten gerangschikt staan volgens volgordenummer. Alsook moet een zoekfunctie voorzien worden. De zoekfunctie moet zoeken op de naam en code van de items. Tot slot moet er een knop voorzien worden om een nieuw item toe te voegen. De knop moet onbedienbaar zijn wanneer het gaat om een meta lijst.

Figuur 2.4: Configuratiescherm van een lijst in items toestand


24

Bij het selecteren van een item moet de gebruiker de gegevens van dit item kunnen aanpassen. Er zijn 3 mogelijke scenario’s, namelijk: • Scenario 1 Het item is een meta item. In dit geval moeten alle gegevens read-only zijn. • Scenario 2 Het item is een normaal item. In dit geval moet de gebruiker alle gegevens, uitgezonderd de code, kunnen aanpassen. • Scenario 3 Creatie van een nieuw item. In dit geval kan de gebruiker de code invullen. De code van een item is uniek. Dit wil zeggen, wanneer een item wordt toegevoegd met een reeds bestaande code moet een foutmelding verschijnen. De visuele en functionele aspecten van deze foutmelding komen verder in het hoofdstuk aan bod.

Figuur 2.5: Configuratiescherm van een lijst in item-definitie toestand


25

Het saven van de lijst moet gebeuren bij een hyperlink naar een ander scherm, terugnavigatie en het wisselen van een control op het scherm. Tijdens het saven moet er via een spinner of ladenbalkje duidelijk gemaakt worden dat er een save aan de gang is. Wanneer het saven mislukt, moet er een foutmelding getoond worden. De foutmelding moet voorzien zijn van een standaard foutmeldingstekst die aantoont dat er iets misgelopen is bij het saven. Wanneer deze foutmelding verschijnt, moeten er 2 mogelijke acties voor de gebruiker voorzien worden. Namelijk: • Actie 1: Opniew proberen In dit geval moet de gebruiker terug naar het scherm gebracht worden waar hij aan het configureren was. De gebruiker moet zich in de actuele toestand van het scherm bevinden waar hij wijzigingen heeft aangebracht. • Actie 2: Wijzigingen ongedaan maken Ook in dit geval moet de gebruiker terug naar het scherm gebracht worden waar hij aan het configureren was. De gebruiker moet zich in de initiële toestand van het scherm bevinden. De wijzigingen die de gebruiker had aangebracht moeten ongedaan gemaakt zijn.

Figuur 2.6: Foutmelding bij het saven van een lijst


2.2.2

26

Oplossing met tussenresultaten

Hier wordt de oplossing en aanpak van het streefdoel besproken. Ook tussenresultaten worden gepresenteerd. Aangezien MVVM-patroon in het project wordt gehanteerd is alle logica in het viewmodel gecodeerd en alle visuele elementen in de view. Het principe van MVVM staat uitgelegd bij gebruikte technologieën. Configuratie overzichtscherm Zoals in streefdoel beschreven staat moet op dit scherm een tegel voorzien worden die de navigatie naar het scherm met een overzicht van alle lijsten voor zich neemt. 1. View Bij dit scherm is simpelweg 1 enkele button gedefinieerd. De ’Command’ property van de button is gebind op de gepaste property van het viewmodel. Voor de opmaak van de button is gebruik gemaakt van een vóo´r-gedefinieerde stijl.

Figuur 2.7: Button element in XAML De opmaak van alle controls zijn in een XAML resource file gecodeerd. Het voordeel hiervan is dat deze stijl slechts 1 keer moet worden gedefinieerd en kan worden herbruikt doorheen de applicatie. Wanneer een verandering van opmaak gewenst is, moet deze slechts op 1 enkele plaats worden aangepast.

Figuur 2.8: XAML resource style


27

2. Viewmodel In de viewmodelklasse is de gepaste property, in dit geval van het type 0 RelayCommand0 , aangemaakt waarop de view kan binden.

Figuur 2.9: Property van het type RelayCommand Op deze manier wordt de buttonklik opgevangen. Bijgevolg is de gewenste logica ge¨ımplementeerd. In dit geval is dit de navigatie naar het volgende scherm. De navigatieservice was reeds ontwikkeld en doorheen de applicatie gebruikt. De implementatie van deze navigatieservice staat beschreven in Bijlage B. Het tussenresultaat van dit scherm, met ge¨ımplementeerde navigatie bij een klik op de button, ziet er als volgt uit.

Figuur 2.10: Tussenresultaat van het configuratie overzichtscherm


28

Lijsten overzichtscherm Zoals in streefdoel beschreven staat is dit het scherm met het overzicht van alle lijsten. Elke lijst moet vertegenwoordigd zijn door een tegel met gegevens in. Alsook een optie om een lijst toe te voegen is een doelstelling. 1. View Om de lijsten te visualiseren als tegels is gebruik gemaakt van een GridView. Deze heeft een binding op de property van het viewmodel die alle lijsten representeert. Elke lijst is voorgesteld aan de hand van een GridViewItem met de nodige binding om de informatie in de tegel te visualiseren. De opmaak is telkens gedefinieerd in de XAML resource file. Om een lijst toe te voegen is gebruik gemaakt van een Windows control, namelijk de CommandBar. Deze verschijnt bij rechtermuisklik. Op deze commandobar is de button, met binding op de gepaste property van het viewmodel, ge¨ımplementeerd.

Figuur 2.11: CommandBar met button 2. Viewmodel Bij het toekomen op het scherm wordt de load methode uitgevoerd. Deze methode is een async methode. Dit wil zeggen dat de methode asynchroon wordt uitgevoerd. Het voordeel hiervan is dat de applicatie kan doorgaan met de acties die op dat moment aan de gang zijn, zonder invloed te ondervinden of een niet responsieve user interface te verkrijgen. Bij het gebruik van asynchrone methoden komt nog een groot voordeel kijken. In een asynchrone methode kan men het keyword ’await’ toepassen. Zie onderstaande figuur.

Figuur 2.12: Toepassing van keyword ’await’ Op deze manier worden alle bestaande lijsten opgehaald met behulp van de gepaste ’GetListSetAsync’ methode. Het keyword ’await’ zorgt ervoor dat alle code na de ’await’ pas wordt uitgevoerd wanneer de ge-awaite ’GetListSetAsync’ methode afgehandeld is. De property die alle lijsten bevat is beschikbaar voor de view vanuit databinding. De properties zijn uitgerust met notification events waar nodig. Deze events zorgen ervoor dat de view geüpdatet wordt bij een wijziging van de propertywaarde.


29

De navigatieservice wordt getriggerd, vanuit de view, bij een klik op een lijsttegel. Aan de navigatieservice wordt de geselecteerde lijst als parameter meegegeven. Het tussenresultaat van dit scherm ziet er als volgt uit.

Figuur 2.13: Tussenresultaat van het lijsten overzichtscherm


30

Configuratiescherm lijst Zoals in het streefdoel beschreven staat is dit het scherm waar de lijst in kwestie volledig geconfigureerd kan worden. 1. View De view bestaat uit de implementatie van enkele usercontrols. Meer bepaald 6, voor elke verticale configuratiekolom is een usercontrol ontwikkeld. Merk op bij onderstaande afbeelding zijn 4 usercontrols aangegeven. Zowel de ’Definitie’ van de lijst als de foutmelding usercontrol is niet zichtbaar.

Figuur 2.14: Genummerde usercontrols Een usercontrol bestaat uit gewenste XAML controls, opmaak en indien nodig beperkte logica. Elke usercontrol staat in voor een gedeelte van de UI (user interface). Het voordeel van usercontrols is dat deze doorheen de applicatie herbruikt kunnen worden. Bijvoorbeeld, ontleden we usercontrol 1 van bovenstaande figuur. Deze bestaat uit 2 TextBlocken, namelijk ’ABC’ en ’[ABC]’, en een GridView met 2 GridViewItems, namelijk: ’Definitie’ en ’Items’. Het probleem dat we hier ondervinden is het volgende. TextBlock 1 moet op de naam van de lijst gedatabind worden en TextBlock 2 op de code van de lijst. Dit kan niet rechtstreeks gedatabind worden aangezien de usercontrol geen communicatie met het viewmodel heeft. Daarbij zou de usercontrol te specifiek worden waardoor de herbruikbaarheid vervalt.


31

De oplossing hiervoor is het gebruik van dependency properties. Zoals de naam zegt, zijn dit afhankelijke properties. Deze dependency properties worden in de achterliggende code van de usercontrol gedefinieerd. De dependency properties hebben in dit geval de naam ’Title’ en ’Code’, en zijn beide van het type string aangezien het over TextBlocken gaat. Onderstaande figuur weergeeft de dependency property voor TextBlock 1, namelijk de ’Title’.

Figuur 2.15: Dependency property van het type string De ’Text’ property van TextBlock 1 moet gebind worden op de hiervoor aangemaakte dependency property in de achterliggende code. Opgelet, deze is hoofdlettergevoelig! Zie onderstaande figuur.

Figuur 2.16: TextBlock 1 met binding op de dependency property Op dit moment zal de TextBlock nog geen data visualiseren. Dit komt doordat er nog geen data op de ’Title’ dependency property gebind is. Dit gebeurt bij de implementatie van de usercontrol op het werkelijke scherm. Merk op dat de aangemaakte dependency properties toegankelijk zijn.

Figuur 2.17: Implementatie van een usercontrol Voor meer code over dit voorbeeld wordt verwezen naar Bijlage C.


32

Naast de implementatie van de nodige usercontrols met gepaste databinding, is een Visual State Manager ge¨ımplementeerd. In de Visual State Manager zijn alle mogelijke visuele toestanden gedefinieerd. In onderstaande figuur een voorbeeld van een visuele toestand, namelijk de ’ShowDefinition’ toestand. Bij deze visuele toestand zijn slechts de bovenste twee usercontrols zichtbaar.

Figuur 2.18: Een gedefinieerde VisualState van een VisualStateManager Tot slot is een ’EnumToVisualState’ control gebruikt. Deze control maakt het mogelijk om vanuit het viewmodel de visuele toestand te bepalen. 2. Viewmodel In de viewmodelklasse zijn de nodige properties en commands, waarop de view kan databinden, ge¨ımplementeerd. Ook informeert het de view over toestand veranderingen via notification events. Aan de hand van een enum, die bestaat uit alle visuele toestandnamen van de Visual State Manager in de view, wordt in het viewmodel de gewenste visuele toestand op de juiste moment gezet.

Figuur 2.19: Enum en property Voor meer voorbeeldcode, waarbij de visuele toestand wordt gezet vanuit het viewmodel, wordt verwezen naar Bijlage D.


33

Bij het mislopen van het saveproces wordt dit opgevangen. Bijgevolg wordt de correcte visuele toestand gezet, om de foutmelding te tonen. Bij het verschijnen van deze foutmelding kan de gebruiker 2 acties ondernemen, namelijk: ’Opnieuw proberen’ en ’Wijzigingen ongedaan maken’. Samenvattend is in de viewmodelklasse de logica achter onderstaande acties gecodeerd. Gebruikmakend van de keywords ’async’ en ’await’ waar nodig. • Saven • Visuele toestand bepalen • Lijst toevoegen • Item toevoegen • Mogelijke acties bij de foutmelding • Zoekfunctie op de items 3. Model (data repository) Codering van beperkte validatie logica. Het tussenresultaat van dit scherm in ’ShowDefinition’ toestand, ziet er als volgt uit.

Figuur 2.20: Configuratiescherm van een lijst in lijst-definitie toestand


2.3

34

Ontwikkeling configuratieschermen van logs

In de applicatie moeten logs volledig geconfigureerd kunnen worden. Een log is een verzameling van informatie over een zaak waar het van belang is om informatie over bij te houden. Een voorbeeld van een log is: ’Inventaris van stalen’. Over deze log moet allerlei informatie worden bijgehouden, zoals bijvoorbeeld: aantal verstuurde stalen, type staal, moment van stockage staal, . . . Dit zijn de kolommen van de log. Een log kan verschillende versies hebben, waarbij slechts 1 versie geconfigureerd kan worden. Dit wordt de werkversie genoemd. Een logversie bestaat uit: • Gegevens: – Code (uniek) – Naam – Omschrijving – Versienummer – Is actief (ja/neen) – Verbonden aan (instelling, patiënt of studie) – Meervoudig voorkomen (ja/neen) • Kolommen: – Gegevens: ∗ Code (uniek) ∗ Naam ∗ Omschrijving ∗ Volgordenummer ∗ Is actief (ja/neen) ∗ Is deel van de sleutel (ja/neen) – Datatype (tekst, ja/neen, datum, lijst of datum en tijd) De doelstelling is het ontwikkelen van de schermen waar logs volledig geconfigureerd kunnen worden.


2.3.1

35

Streefdoel

In dit gedeelte komen de visuele en functionele doelstellingen aan bod. Configuratie overzichtscherm Dit is hetzelfde scherm als bij de lijsten. Hier moet een extra tegel voorzien worden die het configureren van logs aantoont. Wanneer op deze tegel wordt geklikt, moet een navigatie plaatsvinden naar het scherm met een overzicht van alle logs.

Figuur 2.21: Configuratie overzichtscherm


36

Logs overzichtscherm Het overzichtscherm, waar alle bestaande logs worden weergegeven, heeft volgende doelstellingen. Elke log moet worden voorgesteld door een aparte tegel, net zoals bij de lijsten. In deze tegel moet de naam van de log worden afgebeeld. Wanneer op een tegel wordt geklikt, moet de navigatie plaatsvinden naar het scherm waar de log geconfigureerd kan worden. Net zoals bij de lijsten, moet bij rechtermuisklik op de pagina een commandobar verschijnen. In deze commandobar moet een knop voorzien worden met optie om een nieuwe log toe te voegen. Wanneer op deze knop wordt geklikt, moet de navigatie plaatsvinden naar het scherm waar de gebruiker een nieuwe log kan creëren. Dit is hetzelfde scherm waar de gebruiker een bestaande log kan configureren

Figuur 2.22: Logs overzichtscherm


37

Configuratiescherm log Het configuratiescherm van een log heeft volgende doelstellingen. Aangezien een log verschillende versies kan bevatten, moet hiervoor aan de hand van een dropdown menu een optie voorzien worden om te wisselen tussen deze versies. Aan de hand van een button moet de gebruiker zowel de werkversie van de log kunnen opvragen als de werkversie freezen. Wanneer optie ”Definitie”geselecteerd wordt, moet de gebruiker de gegevens van de logversie in kwestie kunnen aanpassen. Er zijn 3 mogelijke scenario’s, namelijk: • Scenario 1 De versie van de log is de werkversie. In dit geval moeten alle gegevens van de log aanpasbaar zijn met uitzondering op de code. • Scenario 2 De versie van de log is een frozen versie. In dit geval moeten de gegevens read-only zijn. • Scenario 3 Creatie van een nieuwe log met werkversie. In dit geval kan de gebruiker de code invullen. De code van een log is uniek. Dit wil zeggen, wanneer een log wordt toegevoegd met een reeds bestaande code, moet er een foutmelding verschijnen. De visuele en functionele aspecten van deze foutmelding komen verder in het hoofdstuk aan bod.

Figuur 2.23: Logs overzichtscherm


38

Wanneer men optie ”Kolommen”selecteert moet de gebruiker een overzicht van de kolommen te zien krijgen. De kolommen moeten gerangschikt staan volgens volgordenummer. Alsook moet een zoekfunctie voorzien worden. De zoekfunctie moet zoeken op de naam en code van de kolommen. Tot slot moet een knop voorzien worden om een nieuwe kolom toe te voegen. De knop moet onbedienbaar zijn wanneer het gaat om een frozen logversie.

Figuur 2.24: Configuratiescherm van een log in kolommen toestand


39

Bij het selecteren van een kolom moeten er 2 opties voorzien worden. Enerzijds een optie ”Definitie”waar de gebruiker de gegevens van de geselecteerde kolom kan aanpassen. Anderzijds een optie ”Waarden”waar de gebruiker het datatype van geselecteerde de kolom kan wijzigen. Bij het selecteren van optie ”Definitie”moeten de gegevens van de kolom aangepast kunnen worden. Er zijn 2 mogelijke scenario’s, namelijk: • Scenario 1 De logversie is een frozen versie. In dit geval moeten alle gegevens read-only zijn. • Scenario 2 De logversie is de werkversie. uitgezonderd de code.

In dit geval moeten alle gegevens aanpasbaar zijn

Figuur 2.25: Configuratiescherm van een log in kolom-definitie toestand


40

Bij het selecteren van optie ”Waarden”moet het datatype van de kolom aangepast kunnen worden. Bij optatie van datatype ’Lijsten’ moet de gebruiker een keuze kunnen maken tussen de bestaande lijsten. Waarbij de gebruiker ook kan navigeren naar deze gekozen lijst.

Figuur 2.26: Configuratiescherm van een log in kolom-waarden toestand De logversie moet gesavet worden bij een hyperlink naar een ander scherm, terugnavigatie en het wisselen van een control op het scherm. Tijdens het saven moet er via een spinner of ladenbalkje duidelijk gemaakt worden dat er een save aan de gang is. Wanneer het saven mislukt, moet er een foutmelding getoond worden. Deze foutmelding met onderneembare acties, is dezelfde als bij de lijsten.


2.3.2

41

Oplossing met tussenresultaten

Hier wordt de oplossing en aanpak van het streefdoel besproken. Ook tussenresultaten worden gepresenteerd. Aangezien MVVM-patroon in het project wordt gehanteerd is alle logica in het viewmodel gecodeerd en alle visuele elementen in de view. Het principe van MVVM staat uitgelegd bij gebruikte technologieën. Configuratie overzichtscherm Zoals in streefdoel beschreven staat moet op dit scherm een extra tegel voorzien worden die de navigatie naar het scherm met het overzicht van alle logs implementeert. 1. View In de view is simpelweg een extra button toegevoegd. Deze button heeft een binding op de gepaste property in het viewmodel, waar de logica wordt behandeld. 2. Viewmodel In de viewmodelklasse is de gepaste property aangemaakt waarop de button van de view kan binden. Op deze manier wordt de buttonklik opgevangen. Bijgevolg is de gewenste logica ge¨ımplementeerd. In dit geval is dit de navigatie naar het volgende scherm. Het tussenresultaat van dit scherm ziet er als volgt uit.

Figuur 2.27: Tussenresultaat configuratie overzichtscherm


42

Lijsten overzichtscherm Zoals in streefdoel beschreven staat is dit het scherm met het overzicht van alle logs. Elke log moet vertegenwoordigd zijn door een tegel met gegevens in. Alsook een optie om een log toe te voegen is een doelstelling. 1. View Om de logs te visualiseren als tegels wordt hetzelfde gedaan als bij de lijsten. Dit wordt verwezenlijkt aan de hand van een GridView die een binding heeft op de gepaste property in het viewmodel. In dit geval zal deze property een collectie zijn van alle logs. Elke log wordt voorgesteld door een GridViewItem. Om een log toe te voegen, is net zoals bij de lijsten, een commandobar gedefinieerd. Op de commandobar is de button, met binding op de gepaste property van het viewmodel, ge¨ımplementeerd. 2. Viewmodel Alle logs worden, net zoals bij de lijsten, opgehaald op de gepaste manier. Dit gebeurd met de implementatie van de keywords ’async’ en ’await’. Alle logs zijn beschikbaar als property waarop de view kan databinden. De navigatieservice wordt getriggerd, vanuit de view, bij een klik op een logtegel. Aan de navigatieservice wordt de geselecteerde log als parameter meegegeven. Het tussenresultaat van dit scherm ziet er als volgt uit.

Figuur 2.28: Tussenresultaat logs overzichtscherm


43

Configuratiescherm lijst Zoals in het streefdoel beschreven staat is dit het scherm waar de log in kwestie volledig geconfigureerd kan worden. 1. View In de view, net zoals bij de lijsten, zijn verschillende usercontrols, voorzien van de nodige dependency properties, ge¨ımplementeerd. Elke usercontrol staat in voor een gedeelte van de UI. Bij het implementeren van een usercontrol, worden de bijhorende dependency properties gedatabind op de hiervoor aangemaakte properties in het viewmodel. Alsook bevindt zich hier de volledige implementatie van een Visual State Manager met nodige binding en controls. Hier wordt gedefinieerd welke usercontrol in welke toestand zichtbaar is. Vanuit het viewmodel wordt de visuele toestand bepaald. Tot slot is de dropdown, met binding op de gepaste properties van het viewmodel, ge¨ımplementeerd. De dropdown maakt het mogelijk om tussen de versies van de log te wisselen. 2. Viewmodel In de viewmodelklasse zijn de nodige properties en commands, waarop de view kan databinden, aangemaakt. Ook informeert het de view over toestand veranderingen via notification events. Tot slot is in die viewmodelklasse de logica achter onderstaande acties gecodeerd. Gebruikmakend van de keywords ’async’ en ’await’ waar nodig. • Saven • Visuele toestand bepalen • Log toevoegen • Kolom toevoegen • Wisselen tussen versies van de log • Werkversie creëren • Mogelijke acties bij de foutmelding • Zoekfunctie op de kolommen 3. Model (data repository) Codering van beperkte validatie logica.

Hoofdstuk

3

Resultaten In dit hoofdstuk wordt het eindresultaat visueel gepresenteerd met een korte toelichting.

3.1

Configuratieschermen van lijsten

Onderstaande figuur is het scherm met het overzicht van alle bestaande lijsten. rechtermuisklik, verschijnt de optie om een lijst toe te voegen.

Figuur 3.1: Overzichtscherm van de lijsten

44

Bij

HOOFDSTUK 3. RESULTATEN

45

Het volgende scherm is het configuratiescherm van een lijst. In onderstaande figuur bevindt het configuratiescherm zich in lijst-definitie toestand. In deze staat kan de gebruiker de gegevens van de lijst wijzigen.

Figuur 3.2: Configuratiescherm van een lijst in lijst-definitie toestand Hetzelfde configuratiescherm in nieuwe-lijst toestand, ziet er als volgt uit.

Figuur 3.3: Configuratiescherm van een lijst in nieuwe-lijst toestand


46

Bij de selectie van een item kan de gebruiker de gegevens het geselecteerde item wijzigen. Bovendien kan de gebruiker de zoekfunctie op items hanteren.

Figuur 3.4: Configuratiescherm van een lijst in item-definitie toestand Het configuratiescherm in onderstaande figuur bevindt zich in de nieuw-item toestand. In deze staat kan de gebruiker een nieuw item toevoegen.

Figuur 3.5: Configuratiescherm van een lijst in nieuw-item toestand


47

Tot slot, de foutmelding bij het mislopen van een configuratie. De gebruiker kan 2 mogelijke acties ondernemen wanneer deze foutmelding voor komt.

Figuur 3.6: Configuratiescherm van een lijst met foutmelding


3.2

48

Configuratieschermen van logs

Onderstaande figuur is het scherm met het overzicht van alle logs. Om een log te configureren dient de gebruiker een selectie te maken. Bij rechtermuisklik, verschijnt de optie om een log toe te voegen.

Figuur 3.7: Overzichtscherm van de logs


49

Het volgende scherm is het configuratiescherm van een log. In onderstaande figuur bevindt het configuratiescherm zich in de log-definitie toestand. In deze staat kan de gebruiker de gegevens van de log wijzigen. Switchen tussen versies is mogelijk door een optie in de dropdown te selecteren.

Figuur 3.8: Configuratiescherm van een log in log-definitie toestand


50

Wanneer het configuratiescherm zich in kolom-waarden toestand bevindt, kan de gebruiker het datatype van de kolom aanpassen.

Figuur 3.9: Configuratiescherm van een log in kolom-waarden toestand Bij datatype ’Lijst’ kan de gebruiker een lijst kiezen en hiernaar navigeren om eventueel wijzingen aan te brengen.

Figuur 3.10: Configuratiescherm van een log in kolom-waarden toestand

Hoofdstuk

4

Besluit De doelstellingen bij de configuratieschermen van de lijsten zijn volledig behaald. De gebruiker kan lijsten volledig configureren. Bij mogelijke problemen tijdens het saven zal de gebruiker deze kunnen behandelen op de gewenste manier met behulp van een overzichtelijke foutmelding. De doelstellingen bij de configuratieschermen van de logs zijn ook volledig behaald met uitzondering op het freezen van een logversie. Hier moet in de data repository de juiste mapping geschreven worden om dit te voltooien. Dit is een gedeelte waar een collega een automapper voor geschreven heeft. Bij implementatie van deze automapper is dit gedeelte voltooid. Tijdens het verloop van de stage zijn de configuratieschermen gebruikt bij demonstraties voor klanten. Dit motiveerde mij om telkens zo snel mogelijk een mooi en efficiënt resultaat neer te zetten. Op het einde van de stageperiode is bevestigd door de bedrijfsleider, Mark Devos, dat de ontwikkelde schermen in het werkelijke project gaan worden opgenomen. Dit mits mogelijk enkele aanpassingen en uitbreidingen. Dit was voor mij een zeer mooie afsluiter van een leerrijke stageperiode. De stage- en bachelorproef was een zeer positieve ervaring. Het was een uiterst leerrijk proces, zowel op vlak van programmeerkennis als op vlak van integratie en communicatie in een team. Tot slot is het mij deze stageperiode heel duidelijk geworden hoe het toepassen van het MVVM-patroon resulteert in een overzichtelijke werkstructuur voor ontwikkelaars. Waarbij de onderhoudbaarheid van de code sterk verbetert.

51

Bibliografie

[1] Online video cursus over het ontwikkelen van Windows Universal apps met C# en XAML. http://www.microsoftvirtualacademy.com/training-courses/ developing-universal-windows-apps-with-c-and-xaml [2] Stack Overflow is een vraag en antwoord site voor professionele en enthousiaste programmeurs. http://stackoverflow.com [3] Voorbeeld met uitleg over de EnumToVisualState Control die in de applicatie is toegepast.

http://www.silverlightshow.net/items/Designer-friendly-MVVM-for-XAML-Windows-Store-applic aspx [4] Voorbeeld met uitleg over de NumericTextBoxBehavior die in de applicatie is toegepast. http://julmar.com/blog/programming/numerictextboxbehavior-wsa/ [5] Informatie over Universal Windows applicaties. https://msdn.microsoft.com/library/windows/apps/dn726767.aspx [6] Informatie over Windows Runtime.

https://msdn.microsoft.com/en-us/magazine/jj651567.aspx?utm source=rss&utm medium=rss&utm campaign=windows-runtime-reimagining-app-development-with-the-windows-ru [7] Informatie over programmeertaal C# http://nl.wikipedia.org/wiki/C%E2%99%AF [8] Informatie over opmaaktaal XAML. http://en.wikipedia.org/wiki/Extensible Application Markup Language [9] Informatie over het Model-View-ViewModel (MVVM) patroon.

52

BIBLIOGRAFIE

53

https://msdn.microsoft.com/en-us/library/gg405484(v=pandp.40).aspx [10] Informatie over Prism voor Windows Store applicaties. https://msdn.microsoft.com/en-us/library/windows/apps/xx130655.aspx [11] Informatie over ASP.NET Web API. http://www.codeproject.com/Articles/549152/Introduction-to-ASP-NET-Web-API [12] Informatie over Microsoft Azure SQL Database. http://azure.microsoft.com/nl-nl/documentation/articles/ sql-database-technical-overview/ [13] Informatie over Azure AD Authentication Library. https://msdn.microsoft.com/nl-BE/library/azure/jj573266.aspx [14] Informatie over Entity Framework 6. http://en.wikipedia.org/wiki/Entity Framework [15] Informatie over Microsoft Visual Studio. http://nl.wikipedia.org/wiki/Microsoft Visual Studio [16] Informatie over Team Foundation Server. https://www.visualstudio.com/en-us/products/tfs-overview-vs#Fragment ProductFeatures [17] Informatie over Telerik UI voor Windows Universal applicaties. http://www.telerik.com/windows-universal-ui [18] Informatie over de tool ReSharper. https://www.jetbrains.com/resharper/ [19] Informatie over Microsoft Behavior Software Development Kit. https://msdn.microsoft.com/en-us/library/dn457340.aspx [20] Visual Studio tips en tricks in verband met de formattering van code. http://blogs.msdn.com/b/cdnstudents/archive/2014/02/10/ visual-studio-tips-and-tricks-formatting-your-code.aspx

Bijlage

A

Codering handleiding Deze documentatie kan geraadpleegd worden voor tips en regels tijdens het coderen van Maät. Om leesbaarheid van code tussen verschillende ontwikkelaars te verbeteren, proberen we vast te houden aan onderstaande codering richtlijnen.

A.1

Behaviors

Microsoft Behavior SDK wordt gebruikt voor het toepassen van behaviors. Het Behaviors Software Development Kit (SDK) voor Visual Studio 2013 biedt informatie over behaviors, welke stukjes code zijn die hergebruikt kunnen worden om interactiviteit toe te voegen aan uw applicaties. Om een behavior te integreren kan je het op elk object slepen en zijn properties wijzigen zodat het je applicatie schikt.

A.2

Gebruikte stijlen

Alle gedeelde stijlen/XAML resources die niet op de pagina/control zelf gedeclareerd zijn moeten gedocumenteerd worden.

A.3

Project structuur

• Eén klasse of interface per file. Tenzij de klasse zeer klein is of gerelateerd is aan een klasse dat de hoofdklasse is in de file.

54

BIJLAGE A. CODERING HANDLEIDING

55

• Het code bestand heeft dezelfde naam als de klasse binnenin. Extra delen kunnen toegevoegd worden voor duidelijkheid. Bijvoorbeeld ListsRepository.GetDto.cs (alle logica op het verkrijgen van) • Sub namespaces worden altijd vertegenwoordigd door een correcte foldernaam.

A.4

Overzichtelijke klasse file

De eerste belangrijke stap om leesbare code te bekomen is het onderhouden van een overzichtelijke klasse file. • Verwijder ongebruikte code en grote blokken van commentaar uit oude code. Indien nodig, kunnen deze altijd worden opgehaald via TFS version control history. • Verwijder ongebruikte usings, ofwel via een add-in (bv. ReShaper) ofwel in Visual Studio zelf. Eén ongebruikte using is geen ramp, 15 ongebruikte usings verlaagt de leesbaarheid van de code.

Figuur A.1 • Gebruik witruimte voor de leesbaarheid van de code. Zoals tussen methoden en in blokken code om logica te splitsen. • Gebruik de default code formattering.


A.5

56

Klasse structuur

Dezelfde structuur toepassen in elke klasse zal iedereen in staat stellen om code gemakkelijk te vinden zonder het toepassen van trucjes zoals regions en commentaar blokken. Volgens onderstaande structuur: • Private readonly fields • Private fields and constants • Constructor • Public fields – In case of a viewmodel: ∗ Bindable properties ∗ Bindable commands • Public methods – In case of a viewmodel: ∗ LoadDataAsync / SaveDataAsync • Protected / private methods • Event handlers, inclusief de callback methode van een MVVM command

A.6

Naamgeving

• XAML x:Name XAML controls hebben een naam nodig om toegankelijk te zijn via andere XAML code. Gebruik de volledige variabele naam als het type van de control gekend moet zijn. Vb. x:Name=”ItemsListView” x:Uid Dit veld wordt gebruikt door het WindowsRT resources system voor wat ingesteld kan worden van een .resw/.xlf file. Zowel lokalisatie als meer geavanceerde resource tricks op een dependency property (vb. Width) van een UI element. Gebruik de naam van de pagina voor pagina specifieke controls om het vinden waar de resource gebruikt is te vergemakkelijken. Vb. x:Uid=”LogEntry˙HeaderKeyFields”


57

The name of resources should show what type of resource it is: Converter: x:Key=”VisibilityConverter” Brush: x:Key=”StaticHeaderBrush” Margin: x:Key=”GridGroupRightMargin” ItemTemplate: x:Key=”LogTileDataTemplate” or x:Key=”LogTileItemTemplate” Styles: show what the style can be used for in the name of the style x:Key=”TileTextStyle” TargetType=”TextBlock” x:Key=”NavBarButtonStyle” TargetType=”Button” x:Key=”NoHoverGridViewStyle” TargetType=”GridView” • C# Gebruik geen Hungarian notatie (vb. txtSomeText, iSomeInt, . . . ) voor variabelen. Geef alle variabelen een nuttige complete naam. Neem bijvoorbeeld de naam logEntryInfo, hier is onmiddellijk geweten met wat wordt omgegaan. Tenslotte moet er enkel de eerste keer de inspanning worden geleverd om de naam te typen, de rest wordt gedekt door IntelliSense. Afgezien van deze specifieke richtlijnen, is gezond verstand een must in het toepassen van object georiënteerde patronen en architecturale beslissingen. Het is ook van belang om bij twijfels niet te aarzelen om naar de input van een collega te vragen.

Bijlage

B

Navigatie Door het gebruik van MVVM moet de navigatie getriggerd worden in het viewmodel en niet in code van de view. De ViewModelBase klasse heeft een property NavigationService dat gebruikt kan worden in elke afgeleide viewmodel. Alle bestaande pagina URL’s zijn gedefinieerd in de PageTokens klasse.

B.1

Navigatie met parameters

Voorbeeld van een navigatie naar de pagina ConfigOverviewList zonder parameters mee te geven: NavigationService.Navigate(PageTokens.ConfigOverviewList, null); Voorbeeld van een navigatie naar de pagina ConfigOverViewList met een querystring als parameter: NavigationService.Navigate(PageTokens.ConfigOverviewList, ”id=-1”);

Een betere manier om parameters mee te geven met navigatie is het gebruik van de QueryParameterDicti Voorbeeld van navigatie naar de pagina ConfigOverViewList met een dictionary als parameter: var parameters = CreateQueryParameterDictionary(); parameters.Add(NavigationParameters.Context, TempContext.Patient); NavigationService.Navigate(PageTokens.NoteEntry, parameters);

58

BIJLAGE B. NAVIGATIE

B.2

59

Parsen van navigatie parameters

Bij het toekomen op een pagina, is de complete navigatie string inclusief de meegegeven parameters beschikbaar in de deeplink variabele. Het ophalen van de QueryParameterDictionary van deze string kan simpelweg gedaan worden door de GetQueryStringParameters methode aan te roepen. Deze methode is een extensie methode op string. Voorbeeld: var queryParameters = deepLink.GetQueryStringParameters(); Het ophalen van de waarden uit deze dictionary kan via de beschikbare extensie methodes. Voorbeeld: private void ParseQueryParameters(QueryParameterDictionary queryParameters) ( IsNew = queryParameters.GetBooleanValue(NavigationParameters.IsNew); clinicCd = queryParameters.GetValue(NavigationParameters.ClinicCd); logEntryId = queryParameters.GetIntValue(NavigationParameters.Id); )

Bijlage

C

UserControl met databinding en implementatie • UserControl XAML

Figuur C.1: Usercontrol XAML

60

BIJLAGE C. USERCONTROL MET DATABINDING EN IMPLEMENTATIE • UserControl code behind

Figuur C.2: UserControl code behind • UserControl implementatie

Figuur C.3: UserControl implementatie

61

Bijlage

D

VisualState bepalen vanuit MVVM • UserControls

Figuur D.1: Usercontrols

62

BIJLAGE D. VISUALSTATE BEPALEN VANUIT MVVM • Visual State Manager

Figuur D.2: Visual State Manager

63

BIJLAGE D. VISUALSTATE BEPALEN VANUIT MVVM • Enum to visual state control

Figuur D.3: Enum to visual state control • Extended Visual State Manager

Figuur D.4: Extended Visual State Manager • Enum

Figuur D.5: Enum • Bindable property

Figuur D.6: Bindable property • Visual State zetten

Figuur D.7: Visual State zetten

64

Windows Universal Application development

Recommend Documents