sdn magazine 114 · 2015. 1. 6. · mvc4, html5, nuget en mef aanwezig. een absolute aanrader is de...

Nummer 114 september 2012 SDN Magazine verschijnt elk kwartaal en is een uitgave van Software Development Network

www.sdn.nl

IN DIT NUMMER O.A.:

Exploratory Testing met

Microsoft Test Manager 2012RC Release <

Code Quality: Open/Closed Principle <

Push Notifications met Windows 8 <

Windows Azure Revisited <

SOFTWARE DEVELOPMENT NETWORK

MAGAZINE

114

ISSN: 2211-6486

� � � � � � � � � �

h

Mijn innovatieve geest denkt in Windows Azure. Windows Azure is het ontwikkelplatform in de cloud dat developers vrij baan geeft in hun denken.

Bouw en draai applicaties in de cloud. Lanceer applicaties in minuten, in plaats van uren. Programmeer

in meerdere talen en technologieën, zoals .NET, PHP en Java. Begin vandaag nog met innoveren.

2QJHKLQGHUG�GRRU�UHGXQGDQWLH��EDQGEUHHGWH�RI�GH�EHSHUNLQJHQ�YDQ�XZ�VHUYHUFRQÀJXUDWLH��

Dat is Cloud Power.

Start vandaag nog met Windows Azure.

Probeer* Windows Azure gratis. Ga naar microsoft.nl/azure

h

� � � � � � � � � �

h

� � � � � � � � � �

Download de gratis app op http://gettag.mobi

� � � � � � � � � �

h

� � � � � � � � � �

h

* V

oor

het uitpro

bere

n z

ijn c

reditcard

gegevens n

odig

. V

oor

gebru

ik b

oven h

et in

troductie

niv

eau b

eta

alt u

het sta

ndaard

tarief.

http://www.microsoft.nl/azure

http://www.microsoft.nl/azure

magazine voor software development 3

ColofonUitgave:

Software Development Network

Twintigste jaargang

No. 114 • september 2012

Bestuur van SDN:

Remi Caron, voorzitter

Rob Suurland, penningmeester

Marcel Meijer, secretaris

Redactie:

Marcel Meijer

([email protected])

Aan dit magazine

werd meegewerkt door:

Roel Hans Bethlehem, Bob Swart, Maarten

van Stam, Alexander Meijers, Remi Caron,

Marcel Meijer en natuurlijk alle auteurs!

Listings:

Zie de website www.sdn.nl voor eventuele

source files uit deze uitgave.

Contact:

Software Development Network

Postbus 506, 7100 AM Winterswijk

Tel. (085) 21 01 310

Fax (085) 21 01 311

E-mail: [email protected]

Vormgeving en opmaak:

Reclamebureau Bij Dageraad, Winterswijk

www.bijdageraad.nl

©2012 Alle rechten voorbehouden. Niets uit

deze uitgave mag worden overgenomen op

welke wijze dan ook zonder voorafgaande

schriftelijke toestemming van SDN. Tenzij

anders vermeld zijn artikelen op persoonlijke

titel geschreven en verwoorden zij dus niet

noodzakelijkerwijs de mening van het be-

stuur en/of de redactie. Alle in dit magazine

genoemde handelsmerken zijn het eigen-

dom van hun respectievelijke eigenaren.

AdverteerdersMicrosoft 2

Achmea 9

CSC 17

Compuware 29

Macaw 44

Adverteren?

Informatie over adverteren en de adverten-

tietarieven kunt u vinden op www.sdn.nl

onder de rubriek Magazine.

voorwoordBeste SDN magazine lezer,

Schreef ik in het vorige magazine nog dat het een hete zomer zou worden, ik zat er

niet ver vandaan. We hebben erg mooie en erg zonnige dagen achter de rug.

Buiten het weer waren er nog een paar hete momenten in deze zomer. Het begon

allemaal met de publieke beta van de volgende versie van Microsoft Office, versie

2013. Tjonge, wat is dat een mooi product aan het worden. Vervolgens de mede-

deling dat Windows 8 de RTM status bereikt heeft. Wat een geweldige mijlpaal is

dat! Als je met de Release Candidate of de Developers preview hebt gespeeld, dan

wist je wat er aan zou komen en dat zag er erg veel belovend uit. Jullie zullen net als

ik zenuwachtig ge-f5-t hebben op 15 augustus, de dag dat Windows 8 RTM op

MSDN beschikbaar kwam. De algemene beschikbaarheid van Windows 8 zal 28

oktober zijn. Ook al heb ik mijn laptop al voorzien van Windows 8, op die datum zal

ook de Microsoft Surface beschikbaar komen. Niet de befaamde tafel, maar wel

Microsoft’s eerste eigen Windows 8 RT tablet met ingenieus toetsenbord in de klep.

Meer details over het apparaat zijn deze zomer bekend geworden. Gemist? Kijk dan

nog even op: http://www.microsoft.com/surface.

Op 30 oktober organiseert Microsoft wederom een Build conferentie. Deze keer zal

hij plaats vinden op de Microsoft Campus in Redmond. Helaas waren de tickets voor

deze conferentie in een uur uitverkocht, dus zul je de keynotes en dergelijke online

moeten bekijken. Uiteraard zullen wij op de website, ons magazine en onze events

uitgebreid aandacht schenken aan dit event.

Daarover gesproken, ons eerste volgende SDN event in september zal een aparte

track bevatten over Windows 8. Maar dat is niet het enige, er zijn ook sessie over

MVC4, HTML5, NuGet en MEF aanwezig. Een absolute aanrader is de sessie over

Onenote door Dennis Doomen. Na deze sessie zul je ook dit tool in je gereed-

schapskistje zetten.

Andere datum om te noteren is 3 en 4 december 2012. Achter de schermen wordt

hard gewerkt aan het programma en de organisatie van de SDC 2012. Dat zal het

hoogtepunt van het jaar zijn. Daarover later meer.

Maar vooralsnog wens ik je veel leesplezier met de artikelen uit dit magazine. Cary

Jensen, Sander Hoogendoorn, Michiel van Otegem, Dennis van der Stelt, Hassan

Fadili, Edwin van Schaick, Dave Smit en ondergetekende hebben weer sterke en

interessante artikelen voor je geschreven. We hopen, dat je ze met evenveel plezier

leest als waar zij hem hebben geschreven.

Met vriendelijk groet,

Marcel Meijer

Inhoud

03 VoorwoordMarcel Meijer

04 Inhoudsopgave

04 Agenda

05 Exploratory Testing met Microsoft Test Manager 2012RC Release

Hassan Fadili

10 Reading and Writing JSON with Delphi Cary Jensen

18 A multiplatform Mobile Architecture for iOS, Android and Windows

Edwin van Schaick

21 What could the Dutch football learn from agile?

Sander Hoogendoorn

22 Push Notifications met Windows 8

Dave Smits

25 Code Quality: Open/Closed Principle

Dennis van der Stelt

30 OpenID beveiliging leren van ASP.NET WebPages

Michiel van Otegem

33 Windows Azure Revisited

Marcel Meijer

37 Delphi XE3 FireMonkey ActionsBob Swart

40 UX Design in Windows 8 Store AppsDennis Vroegop

• SDN event

21 september 2012

Zeist

• Windows 8 GA / Surface

26 oktober 2012

• Build event

30 oktober 2012

• SDC

3/4 december 2012

Papendal

Agenda 2012

DESKTOP Hassan Fadili

Exploratory Testing met MicrosoftTest Manager 2012RC ReleaseMet de komst van Visual Studio 2012 RC release is ook een nieuwe versie van Visual Studio TestProfessional 2012 RC ge-released. Deze tool is ook wel bekend onder de naam Microsoft Test Manager 2012 RC.

Voor alle duidelijkheid, Microsoft Test Manager (MTM) is een test toolspecifiek voor test doeleinden als het gaat om het plannen en uitvoe-ren van Manual Tests en ook Automated Tests van software applicaties.

Dit artikel zal niet alle functionaliteiten van deze tool beschrijven aan-gezien de tool al sinds de komst van Visual Studio Application LifeCycle Mangement 2010 (VSALM-2010) beschikbaar was. Wel zal denadruk liggen op de nieuwe Exploratory Testing Functionaliteit hier-binnen ten opzicht van Microsoft Test Manager 2010 versie.

Op de eerdere versie van deze tool, is de nodigde feedback gegevenaan Microsoft ProductTeams over de werking en de flow van dit tool.Daarop heeft het team geanticipeerd en daarom zijn er een aantal aanpassingen c.q. uitbreidingen uitgevoerd. Deze zullen stapsgewijstoegelicht worden in dit artikel.

Locatie van Microsoft Test Manager als onderdeel van Visual Studio 2012 RC Wanneer Visual Studio 2012 RC is geïnstalleerd, is duidelijk te zien dater ook een Client tool erbij is gekomen namelijk Microsoft Test Manager zoals weergegeven in onderstaand schema:

Fig. 1: Microsoft Test Manager Tool als onderdeel van Visual Studio 2012 RC

Wanneer deze MTM RC tool opgestart wordt, ziet de opstart schermer als volgt uit:

Fig. 2: Microsoft Test Manager RC opstartscherm

Bij het starten van MTM Tool, wordt eerst een connectie gelegd metTeam Foundation waaronder de desbetreffende Team Project zich bevindt zoals hieronder is weergegeven:

Fig. 3: Connectie van MTM met TFS instantie(s)

Als eenmaal de connectie is gelegd met de desbetreffende TFS, kaner gekozen worden voor het team project waarmee gewerkt wordt


DESKTOP

vanuit MTM. In dit geval is gekozen voor Test Release ManagementTeam Project onder Default Collection van Hassan –HP Team Foundation Server instantie.

Fig. 4: Team Project Selectie voor MTM gebruik

Wanneer Connect now wordt geselecteerd en geklikt, wordt Microsoft Test Manager omgeving gestart en kan men starten met hetcreëren van Test Plan(s) voor het desbetreffende Team Project zoalshieronder is afgebeeld:

Fig. 5: Mogelijkheid voor het aanmaken van Test Plan in MTM

Met add knop, krijg je de mogelijkheid om een Test Plan te maken dievervolgens geplaats kan worden onder Area path en Iteration van dedesbetreffende project zoals hieronder is weergegeven:

Fig. 6: Test Plan

Wanneer de naam van het Test Plan is gegeven, kan er vervolgensvoor Add gekozen worden om de Test Plan te toevoegen aan hetTeam Project zoals hier is afgebeeld

Fig. 7: Toegevoegde Test Plan in MTM

Met Select plan wordt MTM geopend en kan vanaf dat moment gewerkt worden met de nieuwe Test Plan waar o.a. Test Suites en/ofTest Cases aan toegevoegd kunnen worden om Test Scenario’s tetesten.

Nu het Test Plan is gemaakt, kunnen er indien wenselijk Test Casesen/of Test Suites toegevoegd worden aan Test Plan. Deze zijn wel eenvereiste wanneer men wel middels MTM wil testen en gedefinieerdeTest Cases / Test Suites heeft of wil definiëren zoals hieronder is afgebeeld:

Fig. 8: Toevoegen van Test Case aan Test Plan in MTM

N.B: In geval van Exploratory Testing is dit geen vereiste aangezienwe met Exploratory niet weten wat er getest gaat worden.

Wanneer Test Case is toegevoegd aan Test Plan in MTM, ziet het erals volgt uit:

MAGAZINE

6

DESKTOP

Fig. 9: Test Case als onderdeel van Test Plan in MTM

Na het plannen van Tests, is het zaak om deze uit te voeren. De uitvoering kan gedaan worden vanuit Test Tab.

Exploratory testing kan vanuit MTM2012 RC als volgt worden gedaan:

Fig. 10: Exploratory Testing in MTM

Wanneer men Explore klikt zoals boven is weergegeven, wordt hetvolgende scherm getoond van de Test Runner en kan gestart wordenmet testen van allerlei scenario’s met MTM.

Fig. 11 (links): MS Test Runner Start SchermFig.12 (rechts): Exploratory Testing Functions while recording Test

Vanaf het moment dat Start is actief, wordt de recording gestart enkunnen alle uitgevoerde acties van een bepaalde applicatie of systeemopgenomen worden.

Wanneer er tijdens de Exploratory Testing sessie op basis van de recording een onverwachte resultaat zich voordoet, kan er een buggecreëerd worden door Create Bug button te gebruiken. Waar nodigkan alle relevante informatie voor deze bug toevoegen worden zoalseen screenshot in dit geval. De test Runner is in het geval van het creëren van een bug wel gepauzeerd. Wanneer men klaar is met hetinvoeren van de bug en nadat deze is opgeslagen en het bug schermis gesloten, kan er verder gegaan en/of stoppen met testen. Dit scenario is hieronder weergegeven:

Fig. 13: New Bug vanuit Exploratory Testing Sessie

De ingevoerde bug wordt ook geregistreerd bij de actieve test sessie.Deze sessie kan dan beindigd worden door End Testing button te gebruiken zoals hieronder is afgebeeld:

Fig. 14: End Testing functie in MTM2012RC


DESKTOP

Hassan Fadili

Hassan Fadili is werkzaam als Free -

lancer (ICT Consultants) Lead

Architect / Consultant en VS ALM

Consultant (MVP). Hassan is zeer

actief in de Community en mede

bestuurslid van DotNed(.NET & VS

ALM UG NL) en VS ALM Track

Owner. Hassan houdt zijn blog op:

http://hassanfad001.blogspot.com

en te bereiken via: [email protected], hassan@

dotned.nl, [email protected] en/of via Twitter op:

@HassanFad

Als eenmaal de test sessie is afgesloten, dan wordt de MTM weer nor-maal geopend en de uitgevoerde sessie zichtbaar met alle informatiezoals hieronder afgebeeld:

Fig. 15: Exploratory Testing Sessie Informatie vanuit MTM2012RC

Ook de ingevoerde Exploratory Testing Bug vanuit de test sessie iszichtbaar vanuit MTM2012RC als volgt:

Fig.16: Exploratory Testing Bug weergave vanuit MTM2012RC

Naast het invullen van een Exploratory Testing Bug gedurende een Exploratory Testing sessie, kan ook een Test Case gemaakt wordenwaaraan de desbetreffende Exploratory Testing Sessie gekoppeld kanworden om vervolgens deel uit te laten worden van de geplande testinspanning waaruit management rapportage samengesteld kan worden...

Conclusie:Microsoft Test Manager Tool is met de komst van Visual Studio 2012RC in zijn tweede versie beland. De volwassenheid van het tool wordtcontinue bewezen door de nieuwe features die erin meegenomen zijnaan de hand van de klanten en community feedback aan MicrosoftVisual Studio Test Team.

Zo zien we nu dat testen met Microsoft Test Manager Tool niet alleengeschikt is voor verwachte en vooraf gedefinieerde test situaties, maarook gebruikt kan worden om de onverwachte test situaties te testen en achteraf te managen door deze informatie toe te voegenaan Test Cases die vervolgens gemanaged kunnen worden.

LinksPerforming Exploratory Testing Using Microsoft Test Manager http://msdn.com/en-us/library/hh191621(VS.110).aspx

How to: View Exploratory Test Session Results Using Microsoft Test Managerhttp://msdn.com/en-us/library/hh322095(VS.110).aspx

Customizing TFS 2011 Process Template for Exploratory TestingTours using MTM11 http://geekswithblogs.net/TarunArora/archive/2011/12/11/customising-tfs-2011-process-template-for-exploratory-testing-tours-using.aspx

Team Test Blog: http://blogs.msdn.com/b/vstsqualitytools/

What's new for MSTest Unit Tests in Visual Studio 11 Beta:http://blogs.msdn.com/b/visualstudioalm/archive/2012/03/13/what-s-new-for-mstest-unit-tests-in-visual-studio-11-beta.aspx

Application Lifecycle Management resource center | SharePoint2010 http://msdn.microsoft.com/en-us/sharepoint/dd552992.aspx

Test Release Management Guidance:http://vsartestreleaseguide.codeplex.com/

Rangers Solutions by Version: http://msdn.microsoft.com/en-us/vstudio/ee358787

Compare Visual Studio 2012 editions: http://www.microsoft.com/visualstudio/11/en-us/products/compare

•

Niet vergeten:

21 september a.s.

naar SDE in Zeist

MAGAZINE

8

http://blogs.msdn.com/b/visualstudioalm/archive/2012/03/13/what-s-new-for-mstest-unit-tests-in-visual-studio-11-beta.aspx

http://blogs.msdn.com/b/visualstudioalm/archive/2012/03/13/what-s-new-for-mstest-unit-tests-in-visual-studio-11-beta.aspx

http://geekswithblogs.net/TarunArora/archive/2011/12/11/customising-tfs-2011-process-template-for-exploratory-testing-tours-using.aspx



Afgelopen zomer was Achmea’s Alex Thissen een week lang te gast bij het Windows Communication Foundation team op Microsofts hoofdkantoor in het Amerikaanse Redmond. “Er zijn op de hele wereld maar zes bedrijven die daarvoor werden uitgenodigd, dus ik beschouw het wel als een eer dat Achmea deel uitmaakt van dit selecte groepje. Microsoft luistert echt naar Achmea, ze beschouwen ons als een bedrijf dat voorop wil lopen. We spraken bijvoorbeeld over Microsofts onder-steuning van IBM Websphere MQ, waarvoor wij andere communicatie-patronen mogelijk wilden maken. Maar ook de koppeling tussen Sharepoint en SAP was onderwerp van gesprek.”Microsoft-topman Scott Guthrie, alias ‘Scott Gu’, was onlangs te gast op de Achmea-burelen. Thissen: “Ja, dat zijn inspirerende sessies. In mijn vakgebied heeft hij de status van een popster, dus je begrijpt dat het geweldig sparren is met zo’n man.”

Mep je fitBij de ontwikkeling van Visual Studio Team System (bestaande uit ontwikkelomgeving Visual Studio

2010 en de ‘Application Lifecycle Management omgeving’ Team Foundation Server 2010) was Achmea in een vroeg stadium betrokken, vertelt Thissen. “We hebben ideeën en suggesties aan-geleverd en Microsoft gewezen op bugs en verbeterpunten, zoals bijvoorbeeld bij het berekenen van de burnrate van code. Dat is nuttig voor ons én nuttig voor Microsoft.”Voor Achmea is Visual Studio Team System belangrijk bij het ontwik kelingen van software aan de voorkant, zoals webappli-caties en mobiele applicaties, en voor integratie-oplossingen met behulp van webservices. “Voor Achmea wordt het internet steeds belangrijker, niet alleen om schades te melden of verzekeringen af te sluiten, maar ook voor allerlei zaken op het gebied van preventie. Zo hebben we in opdracht van Zilveren Kruis Achmea de game ‘Mep je fit’ ontwikkeld voor Micro-softs ‘computertafel’ Surface. Ook tijdens de Olympische Winter-spelen hadden we in het Holland Heineken House een gezondheids-installatie staan; bezoekers konden

daarop onder andere hun bloeddruk en body mass index meten en sportieve prestaties vergelijken met die van topsporters.”

AgileDaarnaast draagt de Microsoft-software bij aan de toenemende vraag naar transparantie en voorspel-baarheid, vindt Thissen. “Team Foundation Server houdt alle stappen in het ontwikkelproces bij, vast-gelegd in hiërarchische workitems. Zo bieden wij onze klanten – de mensen in de business van Achmea – optimaal inzicht in het proces.”Last but not least is Thissen tevreden met MSF Agile, het processjabloon dat Visual Studio Team System voert. “Dat betekent dat we snel en flexibel kunnen bouwen, in korte iteraties met de klant. Dat is precies wat we nodig hebben, want Achmea wil razendsnel kunnen inspelen op nieuwe ontwikkelingen die zich voordoen in de markt.”

Alex Thissen: “Microsoft luistert echt naar Achmea.”

Foto

: Han

s B

arte

n

http://www.werkenbijachmea.nl

DELPHI Cary Jensen

In truth, not all JavaScript objects can be represented using JSON.For example, JSON cannot serialize functions, an essential aspect ofJavaScript objects. Likewise, regular expressions and native datetypes are not supported.

Even with these limitations, JSON has enjoyed rapid adoption, especially in the world of RESTful (REpresentational State Transfer)Web services, where data is either submitted to or requested from aWeb service. In these cases, the lack of support for functions doesn'tmatter, since it is data that is being communicated. Even the lack ofsupport for a formal Date type is forgiven, as dates simply need to beconverted to strings or integers, as long as the end points involved inthe exchange of data agree on how to handle the data.

In many respects, JSON shares significant similarities with XML (theeXtensible Markup Language). Both are hierarchical, text-based formats that are human readable, and for which there are a wide variety of parsers to choose from. Nonetheless, developers are showing an increasing preference for JSON over XML for the purposeof packaging data for inter-process communication.

What makes JSON so attractive, other than its specific relevance toJavaScript (a language which drives much of the user experience inmodern Web pages), is its brevity. In other words, JSON text tends tobe shorter than the corresponding XML text, and shorter is betterwhen there are bandwidth concerns.

The design specifications of XML specifically state that document ver-bosity (the lack of brevity) is less important than readability. As a result,it is not uncommon to encounter XML elements with lengthy names.For example, consider this XML document with a single element:

<customers><customername>FrankBorland</customername></custo-

mers>

Even if we disregard readability, the shortest XML document that wecan create to hold this data might look like this:

<a><b>Frank Borland</b></a>

By comparison, even when the full field description is used (custo-mername) in a JSON object containing a JSON pair whose value partis a JSON array with a single JSON object (one of several options forcreating an object comparable to the preceding XML), the text is substantially shorter, as shown here

{"customers":[{"customername":"Frank Borland"}]}

When compared, the verbose version of XML is 65 character versus48 characters for the corresponding JSON text, a more than 25 percent reduction in length. On the other hand, if we created the short-est possible version of the JSON, again disregarding readability, itmight look like the following (a name/value pair where the value is anarray of customer names, which is 5 characters shorter than the corresponding XML. Indeed, this brevity advantage of JSON over XMLincreases as the number of data elements increases

{"a":["Frank Borland"]}

The Structure of JSONIn JSON, an object is a comma separated list of name/value pairs enclosed in a matching pair of curly braces. The following is an example of a JSON object that contains three pairs.

{"One":"1","one":1,"TWO":true}

Name/value pairs consist of a string identifier (name) followed by avalue. The names are case sensitive, and must be distinct from oneand other within a given object. The name is separated from its valueby a colon. The value can be a number, string, true, false, null, array,or object. The JSON pairs in the preceding JSON object where of typestring, number, and true, respectively.

An array consists of a comma separated list of JSON values, enclo-sed in a matching pair of square brackets. The elements of an arraycan all be the same JSON type, or they can be a mixture. As a result,a given array may include strings, objects, arrays, and so on. The following is an example of a JSON object that contains a JSON pair.The value part of the JSON pair is a JSON array. The first element inthe JSON array is a JSON object, the second is an array of numbers,and the third is a null.

JSON, the JavaScript Object Notation, is a text-based format commonly used to represent JavaScript objects. JSON permits an object to be serialized (converted from its native formatto text) and then transmitted to a process that creates a copy of the original object based onthat text.

Reading and WritingJSON with Delphi

MAGAZINE

10

Name/value pairs are actually proper-ties of a JavaScript object, which iswhy the name part must be a stringand unique, but the value part can beany JSON value

DELPHI

{"Customers":[{"Name":"Frank Borland"},[5.3,2,1000,-

5.243e5],null]}

The JSON string type is a Unicode string enclosed in double quotation marks, with a handful of special characters that need to beescaped using a backslash, such as \r (carriage return), \" (doublequote), \\ (backslash), \b (backspace), \t (horizontal tab), and so forth.

Numbers are not enclosed in quotes, and are used for both integersand floating point numbers. For floating point numbers, you use a period (.) as the decimal separator. You do not use thousands separators, but numbers can use exponential notation.

The remaining values, true, false, and null, are represented by the literals true, false, and null.

Delphi's support for JSONSupport for JSON was introduced in Delphi 2010. The principle clas-ses that you use to read and write JSON can be found in theDBXJSON unit. These classes are found in the Data.DBXJSON unit inDelphi XE2, meaning that they are available for applications compiledfor the Mac OSX as well as native Windows applications. (JSON is notsupported in iOS applications in Delphi XE2, but support in iOS is ex-pected in a future release.) Figure 1 depicts the relationship betweenthese principle classes.

Fig. 1: The principle classes found in the DBXJSON unit

I describe the basic reading and writing of JSON objects in the follo-wing sections. The code associated with these examples can be foundin the JSONDemo project, whose main form is shown in Figure 2. Youcan download this project from the following URL:

http://www.jensendatasystems.com/code/jsondemo.zip

Fig. 2: The JSONDemo project

Creating JSON ObjectsAt a minimum, creating a JSON object involves creating an instanceof the TJSONObject class, to which you must add at least onename/value pair. Name/value pairs are created using the TJSONPairclass. The TJSONObject constructor accepts either a TJSONPair argument, or no arguments. If you do not pass a JSON pair when

calling the constructor, you can subsequently call the TJSONObject'sAddPair method.

JSON Objects and Life Cycle ManagementBefore getting to the code, there is an important point to understandregarding the life cycle of the JSON classes. These objects do notdescend from TComponent, and as a result, do not have any owner.What this means is that if you create a JSON object whose life cycleis not managed, you must take responsibility for freeing that objectwhen you no longer need it.

In most cases this is easier than it sounds. For example, creating acomplex JSON object typically involves the creation of a variety ofJSON objects, which you subsequently add to a owning JSON object.For example, you may create a JSON object to which you add a sin-gle JSON pair, where the value part of that JSON pair is a JSON array.Once the JSON pair is added to the base JSON object, the JSON ob-ject itself becomes responsible for freeing that JSON pair. As a result,you only need to manage the life cycle of the top-level JSON object.

Taking this example further, if the JSON array consists of a comma-separated list of JSON objects, you do not need to manage the memory of the JSON objects in the array. Since the array belongs tothe JSON pair, and the elements of the array belong to the array, all ofthese objects will be freed, in turn, when the high-level JSON objectis freed.On the other hand, there are some situations where you are not res-ponsible for freeing a JSON object created within your application. Forexample, the return value of server methods that you expose from aDataSnap RESTful service are the product of a JSON object. The lifecycles of those objects, however, are managed by the DataSnap framework.

There are a couple things that you can do to ensure that you are managing your JSON objects correctly. First, if you manually createthe JSON object by calling its constructor, and you do not add that object to another JSON object, you need to free it. Setting the globalvariable ReportMemoryLeaksOnShutdown to True ensures that youwill be notified upon shutdown if you have failed to release any JSONobjects that you created.

Creating a Simple JSON ObjectThe following code segment demonstrates the creation of a simpleJSON object containing one JSON pair. Once this object is created,its ToString method is invoked, assigning the returned string repre-sentation of the JSON object to the top memo field that appears onthe main form.

procedure TForm1.WriteJSONObjectsClick(Sender: TObject);

var

jo: TJSONObject;

begin

Memo1.Clear;

try

jo := TJSONObject.Create;

jo.AddPair(TJSONPair.Create('Delphi',

TJSONString.Create('Supports JSON')));

Memo1.Lines.Add(jo.ToString);

finally

jo.Free;

end;

end;

Because you can pass a JSON pair to the constructor of a TJSON-Object, the first two lines of the try clause could have been replacedwith a single line. Furthermore, since we passed a literal string to the


DELPHI

TJSONString constructor, we could just as easily have passed the literal in place of the call to TJSONString.Create. The first two lines ofthe try clause could have been written like the following:

jo := TJSONObject.Create(TJSONPair.Create('Delphi','Supports

JSON'));

Regardless of which technique you use, the result will look like the following:

{"Delphi":"Supports JSON"}

Creating JSON NumbersYou create JSON numbers using the TJSONNumber class. You canpass either a numeric literal or a string to the constructor of theTJSONNumber class. If you pass a string, you should ensure that itcan be converted to a valid number. If the string value is not a num-ber, you will end up with an invalid JSON value in your JSON object.

The following code, associated with the button labeled Create JSONNumbers, demonstrates how to create several different numbers. Notice that the argument to the TJSONNumber constructor in the second JSON pair is a string.

procedure TForm1.WriteJSONNumbersClick(Sender: TObject);

var

jo: TJSONObject;

jp: TJSONPair;

begin

Memo1.Clear;

try

jo := TJSONObject.Create;

jp := TJSONPair.Create('Integer', TJSONNumber.Cre-

ate(10));

jo.AddPair(jp);

jo.AddPair(TJSONPair.Create('Float', TJSONNumber.Cre-

ate('1001.23')));

jo.AddPair(TJSONPair.Create('Exponential',

TJSONNumber.Create(5.1e3)));


finally

jo.Free;

end;

end;

This code produces the result shown here. Notice that the string inthe second JSON pair was converted to a floating point value. Also,since the exponential notation represented a number that could beconverted to a conventional number, the TJSONNumber class performed that conversion.

{"Integer":10,"Float":1001.23,"Exponential":5100}

Creating Booleans and NullsYou create Boolean values using the TJSONTrue and TJSONFalseclasses. Likewise, you create null values in your JSON object usingTJSONNull. This is demonstrated in the following code example, whichis associated with the button labled Creating JSON true, false, andnull.

procedure TForm1.WriteJSONTrueFalseNullClick(Sender: TObject);

var

jo: TJSONObject;

begin

Memo1.Clear;

try

jo := TJSONObject.Create(TJSONPair.Create('True', TJSON-

True.Create));

jo.AddPair(TJSONPair.Create('False', TJSONFalse.Create));

jo.AddPair(TJSONPair.Create('Null',TJSONNull.Create));


finally

jo.Free;

end;

end;

This code produces the following result:

{"True":true,"False":false,"Null":null}

Creating JSON ArraysJSON arrays are a bit more involved that the other simple classes.When calling the constructor of a TJSONArray you can pass no parameters, a single TJSONValue, two TJSONValues, or two strings.If you pass one or more arguments, those passed objects will appearas the first objects in the array. If you pass no arguments, or need toadd additional elements to the array, you can subsequently call theAdd or AddElement methods of the TJSONArray class.

Use the Add method to add a TJSONObject or TJSONArray to thearray, or to add a literal string, number, Boolean, or null. AddElementpermits you to add any TJSONValue, and you must use AddElementif you want to add a value returned by the TJSONString, TJSON-Number, TJSONTrue, TJSONFalse, or TJSONNull constructors.

The use of Add and AddElement are shown in the following code,which is associated with the button labeled Create JSON Arrays.

procedure TForm1.WriteJSONArraysClick(Sender: TObject);

var

ja: TJSONArray;

jo: TJSONObject;

begin

Memo1.Clear;

ja := TJSONArray.Create;

try

ja.Add(TJSONObject.Create(TJSONPair.Create('Delphi','Sup-

ports JSON')));

ja.Add('Hello World');

ja.Add(TJSONArray.Create(TJSONNumber.Create(1),TJSONNum-

ber.Create(2)));

(ja.Get(2) as TJSONArray).Add(3);

ja.Add(true);

ja.AddElement(TJSONFalse.Create);

ja.AddElement(TJSONNull.Create);

ja.AddElement(TJSONNumber.Create('-5.243e5'));

except

ja.Free;

raise;

end;

jo := TJSONObject.Create(TJSONPair.Create('result', ja));

jo.AddPair('One More','Last Pair');

try


finally

jo.Free;

end;

end;

This code produces the following result:

MAGAZINE

12

DELPHI

{"result":[{"Delphi":"Supports JSON"},"Hello

World",[1,2,3],true,false,

null,-5.243e5],"One More":"Last Pair"}

Reading JSON ObjectsJSON objects are text-based descriptions of data. This text is oftentransferred from an end point where the JSON object is created, to anend point where the data is consumed. Converting a JSON object totext is a simple matter of calling the ToString method of the top-levelJSON object.

Converting a string that represents a JSON object into a JSON objectis also straightforward. You do this by calling the ParseJSONValueclass method of the TJSONObject class. This is shown in the following pseudo code:

var

jo: TJSONObject;

begin

jo := TJSONObject.ParseJSONValue(Memo1.Lines.Text) as TJSON-

Object;

try

// Do something with the JSON object

finally

jo.Free;

end;

As this code sample implies, the JSON object needs to be freed onceyou are done using it. Failure to do so will result in a memory leak bythe top-level JSON object, as well as all of the JSON values that itcontains.

Reading JSON PairsEvery top-level JSON Object contains at least one JSON pair, and youmust call the Get method of the TJSONObject class to retrieve a reference to this object.

There is a second method that returns a JSON pair from a JSON ob-ject, and that method is RemovePair. Note, however, that Remove-Pair both returns the JSON pair and removes it from the JSON object.Once removed, you become responsible for managing the life cycle ofthe removed pair, as well as all of the JSON values contained in thatpair, if present. As a result, it is rare to use RemovePair when readingJSON values, unless your purpose is to change the JSON object.

When you call Get, you pass the zero-based ordinal position of theTJSONPair that you want to reference. Since all meaningful TJSON-Objects have at least one TJSONPair, Get(0) should always return aTJSONPair. You can determine how many JSON pairs the top-levelTJSONObject contains using the Size method.

Once you have a reference to a JSON pair, you can read the name partusing the Value property of the JsonString property of the TJSONPair.The value part of the JSON pair is read using the Value property of theJsonValue property of the TJSONPair.

The use of ParseJSONValue and Get are demonstrated in the following code, which is associated with the button labeled ReadJSON Object:

procedure TForm1.ReadJSONObjectClick(Sender: TObject);

var

jo: TJSONObject;

jp: TJSONPair;

begin

Memo2.Clear;

WriteJSONObjectsClick(nil);


Object;

try

jp := jo.Get(0);

Memo2.Lines.Add('ToString: ' + jp.ToString);

Memo2.Lines.Add('JsonString: ' + jp.JsonString.Value);

Memo2.Lines.Add('JsonValue: ' + jp.JsonValue.Value);

finally

jo.Free;

end;

end;

This code produced the following output:

ToString: "Delphi":"Supports JSON"

JsonString: Delphi

JsonValue: Supports JSON

The Get method is overloaded, permitting you to reference a JSONpair by name. For example, imagine that you want to refer to the JSONpair created by the WriteJSONObjectsClick event handler, with a nameof Delphi and a value of Supports JSON. You can use code similar tothe following:

procedure TForm1.ReadJSONObjectClick(Sender: TObject);

var

jo: TJSONObject;

jp: TJSONPair;

begin

Memo2.Clear;

WriteJSONObjectsClick(nil);


Object;

try

if jo.Get('Delphi') <> nil then

begin

jp := jo.Get('Delphi');

//do something with the JSON par

Again, it is important to note that JavaScript is case sensitive. As a result, the string that you pass to the Get method is case sensitive aswell. In the preceding code, if you had used 'delphi' as the parameterto the Get call, Get would have returned nil.

Reading String, Number, True, False and Null JSON ValuesAll TJSONValue instances have a Value property that returns a Stringrepresentation of the value. For TJSONNumber, you will also find AsIntand AsDouble properties, which return the numeric value of the JSONnumber.

Using both the Value and AsDouble properties of a TJSONNumber isshown in the following code, which is associated with the button labeled Read JSON Numbers.

procedure TForm1.ReadJSONNumbersClick(Sender: TObject);

var

jo: TJSONObject;

jp: TJSONPair;

jn: TJSONNumber;

begin

Memo2.Clear;

WriteJSONNumbersClick(nil);

jo := TJSONObject.ParseJSONValue(Memo1.Lines.Text) as

TJSONObject;

try


DELPHI

MAGAZINE

14

jp := jo.Get(0);



Memo2.Lines.Add('JsonValue: ' + jp.JsonValue.Value);

if jo.Get('Float') <> nil then

begin

jp := jo.Get('Float');



jn := jp.JsonValue as TJSONNumber;

Memo2.Lines.Add('JsonValue: ' + FloatToStr(jn.AsDouble));

end;

finally

jo.Free;

end;

end;

The preceding code produces the following output.

ToString: "Integer":10

JsonString: Integer

JsonValue: 10

ToString: "Float":1001.23

JsonString: Float

JsonValue: 1001.23

Reading TJSONTrue, TJSONFalse, and TJSONNull values are de-monstrated in this event handler, which is associated with the buttonlabeled Read JSON true, false, and null.

procedure TForm1.ReadJSONTrueFalseNullClick(Sender: TObject);

var

i: Integer;

jo: TJSONObject;

jp: TJSONPair;

begin

Memo2.Clear;

WriteJSONTrueFalseNullClick(nil);


Object;

try

for i := 0 to jo.Size - 1 do

begin

jp := jo.Get(i);



if (jp.JSONValue is TJSONTrue) or

(jp.JSONValue is TJSONFalse) or

(jp.JSONValue is TJSONNull) then

Memo2.Lines.Add('JsonValue: ' + jp.JsonValue.ToString)

else

Memo2.Lines.Add('JsonValue: ' + jp.JsonValue.Value)

end;

finally

jo.Free;

end;

end;

This code produces this output:

ToString: "True":true

JsonString: True

JsonValue: true

ToString: "False":false

JsonString: False

JsonValue: false

ToString: "Null":null

JsonString: Null

JsonValue: null

Reading JSON ArraysA JSON array contains one or more JSON values. You access the va-lues of an array by position, calling Get and passing the zero-based or-dinal position of the array element you want to access. Use theTJSONArray Size property to determine how many elements the arraycontains.

The following code demonstrates how to read the elements of aJSON array:

procedure TForm1.ReadJSONArraysClick(Sender: TObject);

var

i, j: Integer;

jo: TJSONObject;

jp: TJSONPair;

ja: TJSONArray;

begin

WriteJSONArraysClick(nil);


TJSONObject;

try


begin

jp := jo.Get(i);

if jp.JsonValue is TJSONArray then

begin

Memo2.Lines.Add('JSONArray start');

ja := jp.JsonValue as TJSONArray;

for j := 0 to ja.Size - 1 do

Memo2.Lines.Add(ja.Get(i).ClassName + ': ' +

ja.Get(j).ToString);

Memo2.Lines.Add('JSONArray end');

end

else

Memo2.Lines.Add(jp.ClassName + ': ' + jp.ToString);

end;

finally

jo.Free;

end;

end;

The preceding code produces the following output:

ToString: "True":true

JsonString: True

JsonValue: true

ToString: "False":false

JsonString: False

JsonValue: false

ToString: "Null":null

JsonString: Null

JsonValue: null

JSONArray start

TJSONObject: {"Delphi":"Supports JSON"}

TJSONObject: "Hello World"

TJSONObject: [1,2,3]

TJSONObject: true

TJSONObject: false

TJSONObject: null

TJSONObject: -5.243e5

JSONArray end

TJSONPair: "One More":"Last Pair"

DELPHI


A Generic ExampleUsing the techniques presented in this article you can parse anyTJSONObject instance into its individual components. This is demon-strates in the following event handler, which uses recursion to walk aTJSONObject and output its values to the Memo shown in Figure 3.

procedure TForm1.ReadGenericJSONClick(Sender: TObject);

var

jo: TJSONObject;

Indent: string;

const

IndentSize = 2;

procedure ParseJSONPairs(jo: TJSONObject); forward;

procedure Indentation(Increase: Boolean);

begin

if Increase then

Indent := Indent + ' '

else

Indent := copy(Indent, 1, Length(Indent) - IndentSize);

end;

procedure WriteJSONValue(ancestor: TJSONAncestor);

var

jp: TJSONPair;

jv: TJSONValue;

begin

Memo2.Lines.Add(Indent + ancestor.ClassName);

if ancestor is TJSONPair then

begin

jp := TJSONPair(ancestor);

Memo2.Lines.Add(Indent + 'ToString: ' + jp.ToString);

Memo2.Lines.Add(Indent + 'JsonString: ' + jp.Json-

String.Value);

if (jp.JSONValue is TJSONTrue) or

(jp.JSONValue is TJSONFalse) or (jp.JSONValue is

TJSONNull) then

Memo2.Lines.Add(Indent + 'JsonValue: ' + jp.JsonVa-

lue.ToString)

else

Memo2.Lines.Add(Indent + 'JsonValue: ' + jp.JsonVa-

lue.Value)

end

else

begin

jv := TJSONValue(ancestor);

Memo2.Lines.Add(Indent + 'ToStrint: ' + jv.ToString);

Memo2.Lines.Add(Indent + 'Value: ' + jv.Value);

end;

end;

procedure ParseJSONArray(ja: TJSONArray);

var

i: Integer;

begin

for i := 0 to ja.Size -1 do

begin

if ja.Get(i) is TJSONArray then

begin

Memo2.Lines.Add(Indent + 'JSONArray');

Indentation(True);

ParseJSONArray(ja.Get(i) as TJSONArray);

Indentation(False);

end

else if ja.Get(i) is TJSONObject then

begin

Memo2.Lines.Add(Indent + 'JSONObject');

Indentation(True);

ParseJSONPairs(ja.Get(i) as TJSONObject);

Indentation(False);

end

else

WriteJSONValue(ja.Get(i));

end;

end;

procedure ParseJSONPairs(jo: TJSONObject);

var

i: Integer;

jv: TJSONValue;

begin


begin

jv := jo.Get(i).JsonValue;

if jv is TJSONOBject then

begin

Memo2.Lines.Add(Indent + 'TJSONObject');

Indentation(True);

ParseJSONPairs(jv as TJSONObject);

Indentation(False);

end

else if jv is TJSONArray then

begin

Memo2.Lines.Add(Indent + 'TJSONArray');

Indentation(True);

ParseJSONArray(jv as TJSONArray);

Indentation(False);

end

else

WriteJSONValue(jo.Get(i));

end;

end;

begin

if Memo1.Lines.Text = '' then

begin

ShowMessage('Display a JSON object in memo and try

again');

exit;

end;

Indent := '';

Memo2.Clear;


TJSONObject;

try

ParseJSONPairs(jo);

finally

jo.Free;

end;

end;

DELPHI

SDN > Update

MAGAZINE

16

Fig. 3: The JSONDemo project. The JSON that appears in the topmemo field is parsed by the event handler attached to the button labeled Read Generic JSON.

SummaryJSON is a hierarchical, text-based mechanism for describing data. Similar to XML, though generally much shorter in length, JSON hasquickly become a popular format for communicating data betweenprocesses.

In the next issue, I will demonstrate a number of advanced JSON tech-niques, along with a convenient tool for viewing JSON within Delphi'sdebugger.•

Cary Jensen

Cary Jensen is the bestselling

author of more than 20 books on

software development, including

Delphi in Depth: ClientDataSets,

and winner of the 2002 and 2003

Delphi Informant Reader's Choice

Award for Best Training. A frequent

speaker at conferences, workshops, and seminars throughout

much of the world, he is widely regarded for his self-effacing

humor and practical approaches to complex issues. Cary's com-

pany Web site is at: http://www.JensenDataSystems.com. Cary

has a Ph.D. from Rice University in Human Factors Psychology,

specializing in human-computer interaction.

Delphi XE3 Nieuws

Alhoewel er op het moment van schrijven noggeen officiële aankondiging is geweest, zijn eral verschillende tekenen dat Delphi en RADStudio XE3 er aan staan te komen. Zo zijn eral verschillende events en seminars in deplanning voor september en oktober waar hetlaatste nieuws te horen en XE3 te zien is.

10 september: Delphi

XE3 Developer Event

Op maandag 10 september 2012 organiseertde SDN samen met Bob Swart van 13:00 tot17:00 uur een Delphi Event in 't Brandpunt inHelmond Brandevoort. Zie http://event.bobs-wart.nl voor meer details en inschrijfmogelijk-heden. De zaal is vanaf 12:00 geopend, en erzijn broodjes en koffie/thee voor alle deel -nemers.Het onderwerp van de dag is Delphi XE3, ende nieuwe features en mogelijkheden, waar-onder het bouwen van Windows 8 toepas-singen met zowel VCL als FireMonkey 2 (de

next generation FireMonkey), de mogelijk -heden van Visual LiveBindings, DataSnap uit-breidingen, en meer. Zie bovenstaande URLvoor de agenda.

Bezoekers aan dit Delphi Event krijgen bovendien een PDF document betreffende deDelphi XE3 New Features geschreven doorBob Swart, waarin alle nieuwe features, gebruikte technieken en demo’s uitgebreidbeschreven staan.

19 september: RAD

Studio XE3 World Tour

Gedurende de lancering van RAD Studio XE3zal David Intersimone weer de halve wereldafreizen om verschillende demo’s te geven

van Delphi, C++Builder, HTML Builder, Prismen InterBase. Op woensdag 19 septemberkomt de Embarcadero RAD Studio XE3World Tour naar Amsterdam (en op dinsdag11 september naar Brussel).Zie http://www.embarcadero.com/world-tourvoor meer details.

Embarcadero MVP

Na Microsoft is ook Embarcadero begonnenmet een MVP ("Most Valuable Professional")programma. In Nederland zijn Bob Swart (vanBob Swart Training & Consultancy en voor-zitter Delphi Track van de SDN) en DannyWind (The Delphi Company) de twee MVPs.Andere bekende namen uit het SDN circuitzijn Marco Cantù, Cary Jensen, Brian Long,Ray Konopka, Filip Lagrou. In totaal een dikke30 Delphi "evangelists" wereldwijd.

with

93000employeesworking for

2500clientsin

94 countriesand

52 years of experience

software development holds no mysteries for us

with

30009

3000emplo

eesyemplo

orking fw

2500in

94

ororking f

2500clients

ountriesc

clients

and

52

xperiencears of ey

earsoftwelopmentvde

p

n

elopmentholds no

eriestsymor usf

op-quality softwers tCSC delivechnology serviction tormainf

t ideas, prs the beso harnesus te do amazing things. Find out morors. Wsect

e the we aro its clients. We tarop-quality softwe acrxperienc. Our eyompanes cechnology servic

om both the public and prives and solutions fractict ideas, prom.ct csc.e ae do amazing things. Find out mor

s leading independent orld’e the wtries enables s all indusose acr

e taom both the public and priv

http://www.csc.com

MOBILE

specific components (see figure 1). Dependency injection is used todynamically bind the platform-specific components to the portablecomponents. The idea is to implement as much application logic in aportable way as possible, and at the same time realize the best userexperience with native views and services for each platform.

To realize the portable components in this layered architecture, .NETis a suitable technology that offers platform-independent developmentand runtime environments. C# and the CLI is an open standard (seehttp://msdn.microsoft.com/en-us/netframework/aa569283) that isavailable for iOS (MonoTouch), Android (Mono for Android) and Windows. The platform-specific components bridge the gap to nativefunctionality using the invocation of native Objective-C libraries on iOSand Dalvik runtime libraries on Android.

Fig. 2: Model-View-Presenter pattern

The Model-View-Presenter patternA suitable multiplatform design pattern that can be used for all mobileplatforms is the Model-View-Presenter pattern. This pattern is heavilyused for mobile apps on multiple platforms. It offers good separationof concerns for user interface, application orchestration, presentation

A multiplatform Mobile Architecture for iOS, Androidand Windows

The need for native mobile appsThe challenge from a development point of view is: how to build thebest apps for the users, while still be able to address as much targetmobile OS platforms as possible. One way to do this is to use one ofthe many multiplatform frameworks available to build mobile apps fromone code base. To accomplish this, often Javascript/HTML5 orlightweight programming languages like Lua are used. Furthermore,these frameworks give access to common functionality like the camera, accelerometer, geolocation, compass, network and storagein a generic way. However, the disadvantage of this approach may betwofold. It is not always possible to gain the best user experience onevery platform and also the development experience not up to thestandard set by native the available native development environments.

Platform-independent architectureAs an alternative, multiple OS platforms can be targeted from onecode base using a flexible platform-independent architecture for mobile clients. In this architecture all presentation and business logicis realized in portable platform-independent components, while the UIviews and the platform-specific services are realized in platform-

Edwin van Schaick

Mobile applications are important these days for companies to strengthen the relation with theircustomers and employees. More and more people use smartphones and tablets instead ofPCs for anything you can think of, like socializing, entertainment, shopping or looking for a newjob. And people demand the best apps to do this. They prefer native apps (or at least the appsshould feel that way), because this gives the best user experience on their mobile devices. Thismakes it very important for companies to do their mobile applications right.

MAGAZINE

18

Fig. 1: layered architecture

MOBILE

and business logic, and platform services. Figure 2 shows how theModel-View-Presenter pattern can be applied in a multiplatform mobile architecture. The blue classes are the platform-specific classes,while the yellow classes are platform-independent and can be used onmultiple platforms unchanged.

A description and the responsibilities of the classes shown in figure 2:

ApplicationContainerPlatform-specific class that is responsible for hosting the applicationfor a specific platform. It instantiates the Application class and arran-ges the bindings for the platform-specific views and services needed.See the next paragraph for more information about dependency injection binding.

ApplicationPlatform-independent class that implements the application. This classis responsible for the application functionality at a workflow level andfor the orchestration between views. This class aggregates the Modelfrom the Model-View-Presenter pattern, which is represented by theBusinessEntity class.

PresenterPlatform-independent class that implements the presentation logic fora view that is accessed via a specific IView interface. The model usedby the presentation logic, represented by the BusinessEntity class isdirectly accessed via an association. User interaction that results inorchestration between views is reported to the Application class via acallback or an event.

ServiceFactory<IView>Platform-independent association class to dynamically bind the IViewinterface with the platform-specific View implementation.

IViewPlatform-independent interface which is specifically designed per viewto interact between a platform-specific View class and a platform-independent Presenter class. The View class interacts with the Modeldirectly for simple data-binding and updates. (This is the SupervisingController variant of the Model-View-Presenter pattern as opposite tothe Passive View variant, wherein all interaction with the Model is doneonly by the presenter.) This offers more freedom to vary the UI implementation across multiple platforms.

ViewPlatform-specific class that is responsible to realize a screen, multiplescreens or part of a screen. User interaction that results in presenta-tion logic is reported to the Presenter class via a callback or an event.

BusinessEntityPlatform-independent class that actually represents the Model in theModel-View-Presenter pattern. The model consists of multiple business entity classes that contain the business logic of the mobileapplication. Implementing the business logic in separate business entity classes gives an additional advantage. It offers the flexibility tomove the business logic to a mobile web client or business serviceimplementation on the server side when desired. Platform-specific services, devices and data are accessed via specific IService inter-faces.

ServiceFactory<IService>Platform-independent association class to dynamically bind the IService interface with the platform-specific Service implementation.

IServicePlatform-independent interface which is specifically designed to

interact with a specific platform-specific Service that is needed in themobile application. It is not necessary to expose complete platform services, but only implement the APIs actually needed for the mobileapplication in an agile way.

ServicePlatform-specific service that realizes the integration with specific plat-form or MEAP (Mobile Enterprise Application Platform) services, webservices, data access and storage, devices and more. These servicerealizations will be kept small, because only the APIs are exposedwhich are actually needed for the mobile application involved. Notethat a lot of platform services are exposed in an uniform way for multiple platforms, which makes it possible to also share service components across those platforms.

Dependency Injection bindingDependency Injection is a design pattern that offers the possibility todynamically bind the consumer of an interface or component to the implementation. Many frameworks are available for dependency injection that can be used in this architecture. However, because notmuch is needed to implement the ServiceFactory<> template classfor this mobile architecture, a simple .NET example implementation islisted here.

using System;

using System.Collections.Generic;

namespace Mobile.Common.Framework

{

public sealed class ServiceFactory<TServiceInterface>

where TServiceInterface : class

{

// Nested types.

/// <summary>

/// This interface enables the access of the binding

/// independent of type.

/// </summary>

private interface IBindingInterface

{

/// <summary>

/// Create a new instance of the type bound to the

/// interface.

/// </summary>

/// <returns>The interface for this service.</returns>

TServiceInterface Create();

}

/// <summary>

/// The template used to handle the current binding.

/// </summary>

private class Binding<TBindingType> : IBindingInterface

where TBindingType : class, TServiceInterface, new()

{

/// <summary>

/// Create a new instance of the type bound to the

/// interface.

/// </summary>

/// <returns>The interface for this service.</returns>

public TServiceInterface Create()

{

return new TBindingType();

}

}

// Private members.


MOBILE

MAGAZINE

20

static private IBindingInterface _binding = null;

static private TServiceInterface _instance = null;

private ServiceFactory(){}

/// <summary>

/// Bind type to this interface.

/// </summary>

/// <typeparam name="TBindingType">Type to be bound.

/// </typeparam>

static public void Bind<TBindingType>()

where TBindingType : class, TServiceInterface, new()

{

_binding = new Binding<TBindingType>();

}

/// <summary>

/// Bind instance to this interface.

/// </summary>

/// <param name="instance">Instance to be bound.</param>

static public void Bind(TServiceInterface instance)

{

_instance = instance;

}

/// <summary>

/// Retrieve one and only instance.

/// </summary>

/// <returns>The instance.</returns>

static public TServiceInterface GetInstance()

{

if (_instance == null)

{

if (_binding != null)

{

// Create bound type.

_instance = _binding.Create();

}

}

return _instance;

}

}

}

Listing 1: The ServiceFactory<> template class

ServiceFactory<IMyInterface>.Bind<MyImplementation>();

Listing 2: Binding the interface in platform-specific code

IMyInterface myService = ServiceFactory<IMyInterface>.Get

Instance();

Listing 3: Using the interface in platform-independent code

ConclusionA multiplatform mobile architecture that offers the possibility to use allnative functionality of the target operating systems gives the most flexibility to build the right applications. Combined with a powerful development environment and a comprehensive programming language it offers an excellent way to develop and maintain rich mobile applications. •

Edwin van Schaik

Edwin van Schaick is a Lead Mobile

Architect and Community of

Practice Lead Mobile at Capgemini.

TIP:

Tile updates zonder backgroundtasks en zonder push notifications

De tiles van Windows 8 komen het meest tot hun recht wanneergebruik word gemaakt van Live Tiles. Dit laat je applicatie totleven komen terwijl de gebruiker naar zijn startscherm kijkt enkan de gebruiker motiveren tot het gebruik van je applicatie.Om live data op de tile te krijgen zijn er een aantal mogelijk -heden. Zo kan je het doen vanuit de code van de applicatie. Nadeelvan deze oplossing is dat je programma moet draaien om je tilete kunnen updaten. Een andere techniek is gebruik maken vanpush notifications. Hiermee kan je, ook als je applicatie nietdraait, vanuit de server berichten sturen naar je applicatie. Eenandere techniek is gebruik maken van een BackgroundTask.Hiermee kan je eens in het kwartier, ook als de applicatie nietdraait, toch wat dingen uitvoeren.

Een wat minder bekende techniek is gebruik te maken van de"StartPeriodUpdate" functie op de TileUpdater class. Met dezemethod kan je periodiek een Xml file met de TileContent latenophalen vanaf internet. De content in de XML word dan in detile gepresenteerd:

var updateManager = TileUpdateManager.CreateTi-

leUpdaterForApplication();

updateManager.StartPeriodicUpdate(

new

Uri("http://localhost:1986/Content/tile.xml"),

PeriodicUpdateRecurrence.HalfHour);

Hier in is de http://localhost:1986/Content/tile.xml het bestandmet de content van de XML. Je kan per half uur, uur, per 6 uur,per 12 uur of per dag de tile zichzelf laten updaten.

De content van XML is het zelfde als je via TileUpdatemana-ger.GetTemplateContent kan opvragen.zie:• StartPeriodUpdate: http://msdn.microsoft.com/en-us/

library/windows/apps/windows.ui.notifications.tileupdater.startperiodicupdate.aspx

• Tile templates: http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tileupdater.startperiodicupdate.aspx





GENERAL

Earlier this week an interesting broadcast of the Dutch sports programStudio Sport included a discussion between some football players andthe successful Dutch field hockey coach Mark Lammers. The latterstated that teams perform much better if the players share responsi-bilities. The Dutch football players at the table responded to this state-ment that this might work well in a modern game such as field hockey,as one the players said that he even saw it working in his daughtersfield hockey team, but that football is by nature a very conservativegame, with lots of high profile media attention and that in this game theplayers should just execute the coaches orders.

I couldn’t help but watching this from an agile view. Clearly Mark Lam-mers would do well managing an agile software development project.Even though responsible for the team as a whole, he insist on givingthe players the liberty to collaborate. Pretty similar to how agile projectmanagers guide their project teams. Funny enough the Dutch footballplayers ridiculed his ideas, and repeated that the players should justfollow orders. That the game would become total chaos otherwise.Having seen the Dutch team playing, chaos was a actually a word thatcame to mind. And following up the coaches orders wasn’t part of it.

It’s actually the very same mockery agile has received from traditionalmanagers over the years. Yes this agile stuff might work in small pro-jects (such as the one football players daughters hockey game) or infancy mobile projects (field hockey is a modern game), it doesn’t workin large, complex, high profile projects. Software development is ahighly conservative game. It should not be bothered by this letting-the-players-share-the-responsibilities-in-the-team mumbo jumbo.Football players just execute their individual tasks. Just as analysts,developers and testers do in important software development projects.

Lammers had a good argu-ment. Wouldn’t they agree thatif players had influence and say-ing in what would be the besttask, or how to execute it in thebest way, they would simply runharder and even collaboratebetter as a team? The footballplayers looked at him like theysaw water burning. Lammersjust couldn’t get through tothem. Similar to the many

discussions I’ve had about agile with traditional managers. It is theteam that does the job. Not the individual players.

Doesn’t it just amaze you who unhappy highly appreciated players likeRobin van Persie, Klaas Jan Huntelaar, or Wesley Sneijder with theirrespective tasks, and hence didn’t make it as a team? Wouldn’t thatbe similar to having Erich Gamma, James Gosling, Scott Guthrie and

Anders Hejlsberg as the team of programmers in a project, and thanhave the project managers handing them out individual tasks, and denying them any influence in the project?

Much to my demise, one of my current projects is actually a waterfallproject. Although I am one of the most seasoned guys (resources tothe project manager) on the team, and have the role of software architect, the project manager insists on defining individual tasks thatI should perform. There’s a whole list. I even book hours on individualposts per task. The horror.

So even though I’m in the role of overlooking the technology in theproject, I’m actually constructing individual parts of the framework andthe application. Solo. Now to me that is not a very motivating situation.Collaboration isn’t stimulated. So there’s little between the membersin the team. In my opinion the project is running in a highly sub-opti-mal mode, where everybody delivers individual tasks, and then thro-wing the result over the wall to the next person. The project could beexecuted much more efficiently if we could operate as a team. Withshared responsibilities. Not as a disjoint set of qualified individuals.

Back to the Dutch national football team during these EuropeanChampionships. Wouldn’t you agree that this is actually a very gooddescription of the whole thing? A bunch of highly qualified individualsall executing individual tasks that didn’t like to do? Wesley Sneijderclearly didn’t like his role as a left winger. And neither did Arjen Rob-ben like his role. Hence they executed them without flair, without efficiency, and most of all without operating as a team. They were executing individual tasks, and throwing the result over the wall to thenext person.

And still, at the end of the televi-sion debate, the field hockeycoach was unable to convincethe conservative football players.They clearly totally missed whathe was talking about. Even whenthe question was posed whetherthe players are subordinate to thecoaches tactics and plan, ofwhether it might be better to forma team that best fits the playersqualities, they chose to stick tothe plan. To put it in the words of the agile manifesto: they valued following a plan over individuals and interactions.

If only the next Dutch football team would learn from agile. And if onlytraditional project managers would learn from their kids field hockeyteams, the Dutch team might be the next world champion. And ourprojects might actually succeed. •

What could the Dutch football learn from agile?

Sander Hoogendoorn


After a series of very disappointing games the Dutch national football team was eliminated during the preliminary rounds of the European Championships. Comments weren’t mild. The most heard comments largely focused on the lack of team spirit and mental fitness. Not uncommon to Dutch national football teams.

DESKTOP Dave Smits

Notification architectuurOnderstaande visualisatie geeft aan hoe push notifications werken:

1. Vanuit de metro applicatie wordt aan Windows gevraagd op welkeURL de applicatie beschikbaar is.

2. Windows registreert zich bij de WNS (Windows Push NotificationServices) en vraagt een URL op.

3. Windows laat de applicatie weten op welke URL hij bereikbaar is.4. De applicatie stuurt deze URL door naar de cloud service waar de

berichten worden gemaakt. 5. Zodra de service een bericht heeft stuurt hij deze naar de WNS.6. De WNS ‘pusht’ het bericht naar het device.

Er zijn verschillende soorten notifications die naar een applicatie verstuurd kunnen worden:• Tile updates

De tekst, het plaatje en dergelijk van de application tile en secondary tiles kunnen hierdoor worden aangepast.

• Toast notificationsEen alert popt up met daarin een tekst / afbeelding

• Badge updatesEen afbeelding / getal die op tile staat. Je hebt beperkte keus: http://msdn.microsoft.com/en-us/library/windows/apps/ hh761458.aspx

Push notifications is als mechanisme voor een Windows Phone 7 ontwikkelaar zeker niet nieuwis. Voor het Windows platform wel! Push notifications zijn berichten die naar een client deviceworden gestuurd. Hiervoor is het niet nodig dat de client (al teveel) resources besteed als zo eenbericht wordt ontvangen en verwerkt. Op deze manier kunnen er hele interactieve applicatiesgemaakt worden zonder het device erg aan werk te zetten. Dit is iets wat natuurlijk batterij bespaard en dat is altijd belangrijk.

Push Notificationsmet Windows 8

• Raw messagesBerichten waarvan je de inhoud zelf kan bepalen. Wanneer deze aankomen op het device gebeurd er niks vanzelf. Hiervoor moet je zelf functionaliteit implementeren. Dit kan bijvoorbeeld met backgroundtask.

Voor de eerste drie geldt dat je zelf geen werk hoeft te doen wanneereen dergelijke notificatie aankomt. Het O/S zal zorgen dat de tile /toast of badge notification getoond wordt. Voor raw messages moetje wel zelf actie ondernemen.

Cloud Service opzettenDe cloud service applicatie moet zorgen voor het generen van de pushnotifications berichten wanneer er voor een apparaat iets interessantsis om aan de gebruiker te tonen. Ten opzichte van Windows Phone 7is hier ook eea veranderd. Voor Windows Phone 7 was het genoeg omeen post van een bericht te doen naar de URL die van de client wasverkregen. Voor WNS moet de applicatie zich eerst authentiseren. Voorauthenticatie heb je twee dingen nodig, de Package Security Identifier(SID) en een secret key. Deze kan je verkrijgen door in te loggen bijhet Windows Dev Center en bij details van je applicatie te kijken. Wanneer je je applicatie nog niet in een store hebt staan kan je dezealvast aanmaken zonder daadwerkelijk je app al te submitten. Omdatop dit moment je nog geen dev account kan aanmaken, is er een pagina waarmee je toch deze SID en secret key kan opvragen voor jeapp. Raadpleeg hier voor MSDN.http://go.microsoft.com/fwlink/?linkid=227235. Dit laatste is enkelvoor development doeleinden!

Met de volgende code snippet kan je de token opvragen:

var urlEncodedSid =

HttpUtility.UrlEncode(String.Format("{0}", this.sid));

var urlEncodedSecret =

HttpUtility.UrlEncode(this.secret);

var body =

String.Format(

"grant_type=client_credentials&client_id={0}&

client_secret={1}&scope=notify.windows.com",

urlEncodedSid, urlEncodedSecret);

MAGAZINE

22

DESKTOP

var client = new WebClient();

client.Headers.Add("Content-Type",

"application/x-www-form-urlencoded");

string response = client.UploadString(

"https://login.live.com/accesstoken.srf", body);

var oAuthToken = GetOAuthTokenFromJson(response);

this.accessToken = oAuthToken.AccessToken;

In de eerste twee regels zie je dat de SID en secret key, deze heb jedus via het dev center gekregen.

De response bevat nu het volgende JSON bericht:

HTTP/1.1 200 OK

Cache-Control: no-store

Content-Length: 422

Content-Type: application/json

{

"access_token":"EgAcAQMAAAAALYAAY/c+Huwi3Fv4Ck

10UrKNmtxRO6Njk2MgA=",

"token_type":"bearer"

}

Met de volgende code kan het resultaat eenvoudig worden uitgelezen:

[DataContract]

public class OAuthToken

{

[DataMember(Name = "access_token")]

public string AccessToken { get; set; }

[DataMember(Name = "token_type")]

public string TokenType { get; set; }

}

OAuthToken GetOAuthTokenFromJson(string jsonString)

{

using (var ms =

new MemoryStream(Encoding.Unicode.GetBytes(jsonString)))

{

var ser = new DataContractJsonSerializer(typeof(OAuthTo-

ken));

var oAuthToken = (OAuthToken)ser.ReadObject(ms);

return oAuthToken;

}

}

Het token moet nu worden bewaard waarbij deze moet worden meegestuurd als authenticatie voor de push berichten.

Met dit token kunnen we berichten daadwerkelijk gaan pushen naarde telefoon. Dat kan met de volgende code fragment:

string PostToCloud(string uri, string xml, string type)

{

try

{

byte[] contentInBytes = Encoding.UTF8.GetBytes(xml);

WebRequest webRequest = HttpWebRequest.Create(uri);

HttpWebRequest request = webRequest as HttpWebRequest;

webRequest.Method = "POST";

webRequest.Headers.Add("X-WNS-Type", type);

webRequest.Headers.Add("Authorization",

String.Format("Bearer {0}",

accessToken));

Stream requestStream =

webRequest.GetRequestStream();

requestStream.Write(contentInBytes,

0, contentInBytes.Length);

requestStream.Close();

HttpWebResponse webResponse =

(HttpWebResponse)webRequest.GetRe-

sponse();

return webResponse.StatusCode.ToString();

}

catch (WebException webException)

{

string exceptionDetails =

webException.Response.Headers["WWW-Authenti-

cate"];

if (exceptionDetails.Contains("Token expired"))

{

getAccessToken();

return PostToCloud(uri, xml, type);

}

else

{

return "EXCEPTION: " + webException.Message;

}

}

catch (Exception ex)

{

return "EXCEPTION: " + ex.Message;

}

}

Hier in is type een van de volgende waardes:• wns/tile• wns/toast• wns/badge• wns/raw

Client opzettenRechtenEerst moet je het app manifest aanpassen. Toast capable moet inieder geval op ‘Yes’ worden gezet:

Opzetten push channelNu moet je in code je push channel opzetten en de URL door sturennaar je cloud applicatie. Met die URL kan de cloud applicatie dan berichten versturen.

PushNotificationChannel channel =

await PushNotificationChannelManager.

CreatePushNotificationChannelForApplicationAsync();

Op het channel zit een property Uri waarmee je de URL voor het channel kan opvragen. Wanneer je een notification naar een secondarytile wilt versturen moet je dat doen door:


DESKTOP

MAGAZINE

24

PushNotificationChannel channel =

await PushNotificationChannelManager.

CreatePushNotificationChannelForSecondaryTileAsync(

"tileId");

te gebruiken. Het tileId moet dan overeenkomen met het TileId van desecondary tile die je wilt updaten.

Consumeren Push Notification berichten Tile, toast en badge updates worden door het OS afgehandeld. Rawnotifications daarin tegen doet het OS niks mee, hiervoor moet je zelfiets schrijven.

Wanneer de applicatie draait is dit eenvoudig. Op een PushNotificati-onChannel is een event aanwezig genaamd “PushNotificationRecie-ved”. Hierop subscriben is genoeg. Het event gaat af wanneer er eenraw notification binnenkomt.

var channel = await

PushNotificationChannelManager.

CreatePushNotificationChannelForApplicationAsync();

channel.PushNotificationReceived +=

channel_PushNotificationReceived;

async void channel_PushNotificationReceived(

PushNotificationChannel sender,

PushNotificationReceivedEventArgs args)

{

await Dispatcher.RunAsync(

Windows.UI.Core.CoreDispatcherPriority.Normal, ()

=>

{

MessageDialog dialog =

new MessageDialog("notification recieved");

dialog.ShowAsync();

});

}

Echter wanneer je ook berichten wilt verwerken als de applicatie nietdraait moet je een BackgroundTask aanmaken. Maak hier voor eennieuwe class library aan en zet de output op WinMD file. In deze classlibrary maak je een class aan en implementeer de interface IBack-groundTask in deze class. Let op doordat je output WinMD is moet declass sealed zijn.

namespace BackgroundTask

{

using System.Diagnostics;

using System.Threading.Tasks;

using Windows.ApplicationModel.Background;

using Windows.Data.Xml.Dom;

using Windows.UI.Notifications;

public sealed class Task : IBackgroundTask

{

public void Run(IBackgroundTaskInstance taskInstance)

{

var derrafel = taskInstance.GetDeferral();

Debug.WriteLine("run task");

string xml = "<badge value=\"available\"/>";

var document = new XmlDocument();

document.LoadXml(xml);

BadgeUpdateManager.CreateBadgeUpdaterForApplica-

tion().

Update(new BadgeNotification(document));

Debug.WriteLine("task run");

derrafel.Complete();

}

}

}

Maak nu vanuit je applicatie een reference aan naar deze class library.Ga naar de metadata file en bij “Declarations” voeg je een BackgroundTask toe en zorg dat deze Push notifications ondersteunt. Verder vulje het entry point in. Dat is de Namespace.Classname van de Back-groundTask.

Nu zorg je dat de BackgroundTask word geregistreerd in het O/S. Datkan je met de volgende code doen:

BackgroundAccessStatus backgroundStatus = await

BackgroundExecutionManager.RequestAccessAsync();

if (backgroundStatus != BackgroundAccessStatus.Denied)

{

foreach (var keys in BackgroundTaskRegistration.AllTasks)

keys.Value.Unregister(true);

BackgroundTaskBuilder builder = new BackgroundTaskBuil-

der();

builder.SetTrigger(new PushNotificationTrigger());

builder.Name = "NotificationChannel";

builder.TaskEntryPoint = "BackgroundTask.Task";

var registration = builder.Register();

registration.Completed += registration_Completed;

}

We hebben een hoop mogelijkheden van het vernieuwde Push Noti-fication mechanisme in Windows 8 bekeken waarbij het ten opzichtevan Windows Phone 7 notifications extra mogelijkheden biedt en ervoor zorgt dat je een zeer rijke gebruikerservaring kan aanbieden. •

Dave Smits

Dave Smits is Developer bij VX

Company. Dave interesseert zich

erg in nieuwe ontwikkelingen en na

veel WP7 en Kinect development nu

bezig met Windows 8.

GENERAL Dennis van der Stelt

Vraag jezelf eens af, start je vaker een nieuw project om vanuit nietseen nieuwe applicatie te bouwen, of pas je vaker code in een bestaande applicatie aan? De kans is groot dat developers veel vakerbestaande applicaties wijzigen; nieuwe functionaliteiten toevoegen,bugs fixen, etc.

Vraag je dan nog eens af, is het eenvoudiger om bestaande code aante passen, of nieuwe code toe te voegen aan een bestaand project?Het is leuker, maar vaak ook veel eenvoudiger om nieuwe classes enmethodes toe te voegen, dan te duiken in bestaande code en die aante passen. Met de kans dat je bestaande functionaliteit breekt. Metnieuwe code hoef je vaak alleen het nieuwe gedeelte te testen. Bij bestaande code moet je jouw wijzigingen testen, maar daarna een regressie test doen om te controleren of wat er al was, nog steeds intact is. Hiermee raken we precies waar het Open/Closed Principlevoor bedoeld is.

Dit klinkt als een contradictio in terminis, maar is het niet. Het gaat uitvan het principe dat het eenvoudiger is om nieuwe code te schrijvendan bestaande aan te passen. In feite kan de implementatie van eenbestaande class alleen aangepast worden om fouten op te lossen.Nieuwe of gewijzigde features kunnen alleen toegevoegd worden dooreen nieuwe class te introduceren. Een heel simpel voorbeeld hiervanzijn events. In Listing 1 kun je zien dat de class Smtp niet hoeft uitge-breid te worden om toch te kunnen reageren op gebeurtenissen indeze class.

SmtpServer smpt = new SmtpServer();

smpt.MailSent += (s, e) =>

{

Console.WriteLine(

String.Format("{0} just sent out a mail",

e.EmailAddress));

};

Listing 1

Code Quality: Open/Closed PrincipleIn het vorige artikel hebben we een begin gemaakt met een reeks over kwaliteit van code. In ditartikel hebben we het over een iets abstracter principe van de SOLID principes, waar een classzowel open als gesloten moet zijn. Wat dat exact inhoudt, zullen we trachten te verklaren.

Een andere vorm van Open/Closed Principle (OCP) zijn plugins. Maarhet gaat veel verder dan dat. Wat je wilt voorkomen is dat kleine wijzigingen in bestaande code, effect hebben op de rest van de applicatie. Dat maakt je applicatie erg kwetsbaar en gevoelig voor regressie problemen. Resultaat is dat het uiteindelijk onevenredig veeltijd gaat kosten om je applicatie aan te passen. Het is daarom beterin het begin langzaam te gaan en OCP toe te passen, zodat je latersnel kunt blijven programmeren.

Single Responsibility PrincipleHet OCP staat niet op zich, maar heeft veel te maken met het SingleResponsibility (SRP) zoals beschreven in het vorige SDN Magazine.Dat is ook het principe waar we mee zouden moeten beginen. Als eenclass maar één verantwoordelijkheid heeft, is de kans dat het gewijzigdmoet worden veel kleiner.

Hieronder volgen twee patronen die helpen bij het toepassen van OCPen tevens het SRP. Let bijvoorbeeld op de volgende class die te veelverantwoordelijkheden heeft.

public class ParcelPriceCalculator

{

public decimal Calculate(Parcel parcel)

{

// Als pakketje groot is, € 10,00

// Als pakketje zwaar is, € 7,50

// Als pakketje klein is, € 5,00

// Als pakketje spoed is, € 5,00 erbij

decimal price = 0;

if (parcel.Weight > 2.5m)

price = 10m;

else if (parcel.Size > 10)

price = 7.5m;

else

price = 5m;

if (parcel.Priority)

price += 5m;

return price;

}

}

Listing 2

Software entiteiten moeten open zijnvoor uitbreiding, maar gesloten vooraanpassing

Fool me once, shame on you. Foolme twice, shame on me!


GENERAL

Chain of ResponsibilityWe verzenden pakketjes en deze class berekent wat de prijs moet zijnvoor de klant. Als we de prijs wijzigen of een nieuwe optie toe willenvoegen, moeten we de Calculate methode aanpassen. Dat is precieswat we willen voorkomen. Wat we hier zien is een ketting van ‘if’ state-ments, waarin we het chain of responsibility pattern zouden kunnenherkennen. Dit pattern maakt als het ware een ketting van verant-woordelijkheden welke gerepresenteerd worden door classes. Elkeclass moet in staat zijn de context te bepalen waarin het opereert enverifieert of het de prijs aan moet passen. Met dit pattern zijn meerdereopties mogelijk. Een optie is dat nadat een class de verantwoordelijk-heid heeft genomen, de ketting onderbroken wordt en het proceswordt gestopt. Een andere is dat we door gaan tot het einde en elkeclass bepaald of er een additionele actie noodzakelijk is. Die optie zouvoor ons mogelijk zijn en uiteindelijk de prijs bepalen, ware het niet datwe nog de hoge prioriteit verzending hebben. Deze bepaald niet, zoalsde anderen, de uiteindelijke totaal prijs, maar voegt een additioneleprijs toe. Wat we daarom additioneel toegevoegd hebben is het mee-geven van de prijs aan elke ParcelHandler. De meeste handlers bepalen hun eigen prijs, de PriorityParcelHandler voegt additioneel € 5,00 toe aan de prijs. Dat resulteert in het volgende class diagram.

In onze base class in listing 3 maken we het mogelijk om de handlersaan elkaar te koppelen met de SetNextHandler methode. De Hand-leNext methode zien we hier toegevoegd aangezien dit anders veelgedupliceerde code oplevert in elke handler.

public abstract class ParcelHandlerBase

{

protected ParcelHandlerBase _nextHandler;

public abstract decimal Handle(Parcel parcel,

decimal price);

public void SetNextHandler(ParcelHandlerBase nextHandler)

{

_nextHandler = nextHandler;

}

protected decimal HandleNext(Parcel parcel, decimal price)

{

if (_nextHandler != null)

price = _nextHandler.Handle(parcel, price);

return price;

}

}

Listing 3

Als we nu implementaties maken van handlers, vereist het .NET Framework van ons dat we de abstract methode Handle implemen-teren. Dit is inherent aan object georiënteerd programmeren en ab-stracte methodes. In die methode bepalen we de prijs en zetten we deaanroep door naar de volgende handler. Uiteindelijk krijgen we van delaatste handler het resultaat door en geven we deze terug. Dit zien weterug in listing 4. Uiteraard is de volgorde waarin de handlers

aangeroepen worden erg belangrijk, maar dit was in het origineel in listing-1 niet anders.

public class BigParcelsHandler : ParcelHandlerBase

{

public override decimal Handle(

Parcel parcel, decimal price)

{

if (parcel.Size > 2.5m)

price = 10m;

return HandleNext(parcel, price);

}

}

public class PriorityParcelsHandler : ParcelHandlerBase

{

public override decimal Handle(

Parcel parcel, decimal price)

{

if (parcel.Priority)

price += 5m;

return HandleNext(parcel, price);

}

}

Listing 4

Uiteindelijk maken we in listing 5 een parcel aan, het pakketje wat verzonden moet worden. Daarna initiëren we de handlers en gevenwe aan in welke volgorde ze uitgevoerd moeten worden. Hierna roepen we de eerste handler in de ketting aan, waarna we kort daarnahet resultaat terug krijgen.

Zoals we zien is het nu mogelijk om nieuwe prijzen toe te voegen, zonder bestaande code aan te passen. Uiteraard is het opzetten vande handlers wel gevoelig voor aanpassingen, maar dan hebben wehet over het startpunt, waar we onze oplossing aansturen. Desnoodsgebruiken we het plugin framework MEF wat tegenwoordig in het .NETFramework standaard aanwezig is, en bepalen we de volgorde een-voudig in de handlers zelf. Dit is eenvoudig mogelijk door een propertyop te nemen met een integer waarop we sorteren en daarmee aangeven wat de volgorde van de handlers is.

Parcel parcel = new Parcel()

{

Priority = true,

Weight = 1,

Size = 15

};

var bigParcelsHandler = new BigParcelsHandler();

var priorityParcelsHandler = new PriorityParcelsHandler();

var smallParcelsHandler = new SmallParcelsHandler();

var heavyParcelsHandler = new HeavyParcelsHandler();

bigParcelsHandler.SetNextHandler(priorityParcelsHandler);

heavyParcelsHandler.SetNextHandler(bigParcelsHandler);

smallParcelsHandler.SetNextHandler(heavyParcelsHandler);

decimal price = smallParcelsHandler.Handle(parcel, 0);

Console.WriteLine("Price is {0}.", price);

Listing 5

MAGAZINE

26

GENERAL

Template Method PatternEen ander pattern wat ik zelf erg prettig vind, is het Template MethodPattern. Hiermee kunnen we bepaalde stappen definiëren die doorelke implementatie uitgevoerd kunnen worden, al dan niet verplicht.Het voordeel van dit pattern is dat bij een nieuwe implementatie wegeen kennis nodig hebben van de huidige implementatie. Dit is welhet geval bij het chain of responsibility pattern, waar we zelf de volgende handler moeten aanroepen. Het pattern ziet er als volgt uit.

De abstract class bepaald welke stappen er zijn en de concrete classis een implementatie. In het originele template method pattern zijn destappen al geïmplementeerd en kun je deze overschrijven in afgeleideclasses. Ik kies er meestal voor om enkel abstracte methodes temaken, zodat we verplicht zijn deze te implementeren in afgeleide classes. De abstracte class is dan zoals in listing 6.

public abstract class AbstractClass

{

protected abstract void StepOne();

protected abstract void StepTwo();

protected abstract void StepThree();

public void TemplateMethod()

{

StepOne();

StepTwo();

StepThree();

}

}

Listing 6

We zullen een voorbeeld implementeren waarbij we een bericht willenversturen via bijvoorbeeld e-mail. Er kunnen ook implementatieskomen voor sms, fax of een waar het bericht direct naar een andersysteem gestuurd wordt via bijvoorbeeld WCF. De base class ziet erdan als volgt uit.

public abstract class MessageSenderBase

{

protected TemplatedMessage Message { get; private set; }

public virtual void Execute(TemplatedMessage message)

{

Message = message;

Initialize();

SendMessage();

CleanUp();

}

protected abstract void SendMessage();

protected virtual void Initialize()

{

if (Message == null)

throw new InvalidOperationException(

"Message cannot be

null");

Console.WriteLine("Initializing {0} for MessageId

[{1}].",

this.GetType().Name, Message.Identifier);

}

protected virtual void CleanUp()

{

Console.WriteLine("Cleaning up {0} for MessageId

[{1}].",

this.GetType().Name, Message.Identifier);

Console.WriteLine("\tSaving state changes to

datastore...");

Console.WriteLine("\tSaving result to logfile...");

}

}

Listing 7

Zoals je ziet bestaat er een abstracte methode SendMessage welkewe verplicht zijn om te implementeren in afgeleide classes. Deze ge-bruiken we voor het daadwerkelijk versturen van het bericht. De tweeandere methodes Initialize en CleanUp nemen ook deel in de stappendie uitgevoerd worden. Dit vinden we terug in de Execute methode.

Deze class “reveals all intention” bij implementatie en gebruik, ofwellaat exact zien wat de bedoeling is. Zelfs al zouden we geen toegangtot de code hebben, kun je herleiden wat de bedoeling is. Als we namelijk een afgeleide class maken die de e-mail moet versturen, zijnwe verplicht om de SendMessage methode te implementeren. Gaanwe echter daadwerkelijk een bericht versturen, dan is enkel de Executemethode zichtbaar. Een voorbeeld van een afgeleide class, de imple-mentatie van het verzenden van een e-mail, is ook bijzonder duidelijk,heeft maar een verantwoordelijkheid en is te zien in listing 8. In hetvoorbeeld is geen daadwerkelijk implementatie van het verzenden vande e-mail, maar het mag duidelijk zijn dat er verder geen code in declass nodig is om het te laten werken.

public class EmailMessageSender : MessageSenderBase

{

protected override void SendMessage()

{

Console.WriteLine(

"I'm sending the message via email.");

}

}

Listing 8

Als we uiteindelijk het bericht willen verzenden, kunnen we meerdereimplementaties instantiëren en ze om de beurt aanroepen, zoals in listing 9 gebeurd. Beide implementaties worden uitgevoerd door deExecute methode aan te roepen en het daadwerkelijke bericht toe tevoegen.


GENERAL

static void Main(string[] args)

{

TemplatedMessage message = new TemplatedMessage();

message.Identifier = Guid.NewGuid();

message.EmailAddress = "[email protected]";

message.Template = "Dude!";

List<MessageSenderBase> MessageSenders =

new List<MessageSenderBase>();

MessageSenders.Add(new EmailMessageSender());

MessageSenders.Add(new HttpPostMessageSender());

foreach (var sender in MessageSenders)

{

sender.Execute(message);

}

Console.WriteLine("\n\nDone...\n\n");

}

Listing 9

Op mijn weblog kun je meer informatie vinden over de daadwerkelijkeimplementatie van het Template Method Pattern, inclusief eendownload met de uiteindelijke code. Ook wordt daar ingegaan op hoewe het bericht kunnen aanpassen met een uitbreiding van een addi-tionele Template Method Pattern en het Decorator Pattern, zodat heteruit ziet als in afbeelding 3.

ConclusieWe hebben nu twee patterns gezien waarmee we het Open/ClosedPrinciple kunnen bereiken. Zoals we hebben gezien, kunnen wenieuwe implementaties toevoegen, zonder de huidige code aan te

passen. Open voor uitbreiding, maar gesloten voor aanpassingen.Let wel, waar het Single Responsibility Principle praktisch overal toegepast zou kunnen worden, is dit in mindere mate voor hetOpen/Closed Principle van toepassing. Als we uitgaan van YAGNI,een acronym voor “You Aren’t Going To Need It”, dan zouden we OCPniet als uitgangspunt moeten nemen. Bouw het eerst zo simpel mogelijk en komt er een aanpassing, dan kunnen we wederom eensimpele oplossing bouwen. Komt er echter opnieuw een situatiewaarin we bestaande code dienen aan te passen, dan kunnen we erredelijk vanuit gaan dat een vierde aanpassing er ook wel aankomt. InAmerika wordt hiervoor veel een gezegde gebruikt: “Fool me once,shame on you. Fool me twice, shame on me.” Dat is het moment datwe een oplossing willen bouwen met patterns zoals hierboven geschreven. •

Dennis van der Stelt

Dennis van der Stelt heeft meer dan

15 jaar ervaring als ontwikkelaar en

is momenteel als solution architect

werkzaam bij Tellus. Verschillende

architecturale stijlen zijn een grote

passie, alsook kwaliteit van soft-

ware. Een grote drijfveer is het ver-

spreiden van deze kennis aan

iedereen die het maar wil horen. Wil

je ervaringen delen of heb je vragen, dan is hij altijd bereikbaar via

[email protected] of via zijn weblog op http://blogging-

about.net/blogs/dennis/

MAGAZINE

28

http://www.uniface.com

GENERAL

De meeste professionele ASP.NET ontwikkelaars kennen ASP.NETWebForms en/of ASP.NET MVC. De ondersteuning daarvoor in VisualStudio is uitstekend en met die technieken kunnen goed professio-nele applicaties gemaakt worden. WebPages zal voor de meeste ontwikkelaars daarentegen niet of nauwelijks bekend zijn. Dit heeft gedeeltelijk te maken met het feit dat de WebPages tooling niet in Visual Studio te vinden is, maar in de re-incarnatie van WebMatrix (zie magazine 107). Aangezien we als ontwikkelaar graag vanuit een enkele tool werken is het niet verwonderlijk dat professionele ontwik-kelaars WebMatrix (en dus ASP.NET WebPages) links hebben latenliggen. Dit wordt versterkt doordat WebPages een aantal eigen DLLsintroduceert, zodat de WebPages functionaliteit niet standaard inASP.NET aanwezig is. En dat is jammer, want ASP.NET WebPagesheeft weldegelijk wat te bieden aan professionele ontwikkelaars!

Inloggen met Twitter, Windows Live of FacebookIk heb het al eens eerder geschreven en ik herhaal het nog maar eensin aangepaste vorm: wie nu een nieuwe webapplicatie bouwt en zelfnog de authenticatie regelt is een idioot. Zelf een database met gebruikersnamen en wachtwoorden bijhouden is gewoon niet meervan deze tijd. Gebruikers willen niet overal een ander account, ze willen liever een account gebruiken wat ze al hebben, bijvoorbeeld bijTwitter, Facebook, Windows Live ID of Google ID. Bovendien is de tijddat een webapplicatie een eiland op zichzelf is ook steeds minder hetgeval. Het komt steeds vaker voor dat applicaties met elkaar samenmoeten werken en dat kan alleen met een gedeelde identiteit.

Met ASP.NET WebPages en WebMatrix is het kinderspel om gebrui-kers in te laten loggen met verschillende Identity Providers, zoals Windows Live ID, Google, Twitter etc. Het Starter Site sjabloon in

WebMatrix 2 is in feite al helemaal klaar. In commentaar staan de regels code die je nodig voor een aantal Identity Providers en je kunthier zelf andere aan toevoegen. Je zult echter wel WebMatrix moeteninstalleren om hier gebruik van te kunnen maken. Je kunt de voor gekookte Web Platform Installer hiervoor vinden ophttp://www.asp.net/web-pages. Wanneer je WebMatrix start kun jekiezen uit het openen van een bestaande site, een nieuwe site makenop basis van een template, of het installeren van een applicatie alsUmbraco of Joomla. Als je voor een nieuwe site kiest zijn er verschil-lende templates waaruit je kunt kiezen, waarbij de Starter Site sterkovereenkomt met wat je krijgt als je in Visual Studio een WebForms ofMVC applicatie maakt op basis van het Internet Site sjabloon. De loginpagina is echter anders, omdat deze al voorbereid is op inloggenvia o.a. Twitter. Aan de rechterkant van het loginscherm zie je eenblokje met daarboven de kop “Use another service to log in.” De linkdaarin naar de OAuth Guide loopt je stapsgewijs door het aanzettenvan de verschillende providers. Ik ga dat hier niet herhalen, want datvoegt niets toe. Zeker als blijkt dat je het straks niet gaat gebruiken…read on!

OpenID gebruiken in WebForms of MVCAls je de functionaliteit die WebPages out-of-the-box aanbiedt wilt gebruiken in WebForms heb je twee mogelijkheden. De eerste is inWebMatrix de basis leggen door de eerder genoemde instructies tevolgen en daarna het project te openen in Visual Studio (dit kan zelfsvia een knop in WebMatrix). In Visual Studio kun je vervolgens gewoonWebForms pagina’s toevoegen. WebPages en WebForms bijten elkaar namelijk niet. Heb je bijvoorbeeld zowel _AppStart.cshtml (hetequivalent van het Application_Start event in global.asax in WebPages)als global.asax in je project staan, dan worden beide uitgevoerd.Omdat onder water nog steeds Forms Authentication toegepast wordtna het inloggen via OAuth of OpenID, werkt alles over WebPages enWebForms pagina’s heen.

De tweede optie die je hebt is gelijk aan wat je voor MVC moet doen:de nodige bouwblokken via NuGet binnen halen. Nadeel daarvan isdat het geheel vervolgens niet zomaar werkt. De code voor WebFormsen MVC verschilt niet heel veel (inpassing in de pagina’s meer), dus ikbeperk me even tot hoe je dit doet in MVC.

ASP.NET is de laatste jaren een platform geworden met daarbovenop drie verschillende “engines” voor de User Interface. Het al lang bestaande WebForms is aangevuld met MVC voorde high-end ontwikkelaars en WebPages is toegevoegd om makkelijker te gebruiken te zijnvoor hobbyisten en beginnende ontwikkelaars. WebPages bevat echter zeker dingen die inWebForms en MVC goed te gebruiken zijn, bijvoorbeeld als het gaat om authenticatie.

Michiel van Otegem

OpenID beveiligingleren van ASP.NET WebPages

Met ASP.NET WebPages en WebMatrix is het kinderspel om gebruikers in te laten loggen metGoogle, Twitter, etc.

MAGAZINE

30

GENERAL


Als eerste moet je uiteraard een MVC project aanmaken. Aangezien jede Account spullen die je krijgt bij een Internet Application krijgt nietnodig gaat hebben, kun je ook met Empty beginnen. Rechtsklik ophet project en kies voor Manage Nuget Packages. Het eenvoudigsteis om te zoeken op openid, zoals in Afbeelding 1. De bovenste is alshet goed is de DotNetOpenAuth OpenID Relying Party en die moet jeinstalleren. Als je dit doet met WebForms, kun je het jezelf makkelijkmaken door ook de ASP.NET Controls erbij te downloaden. NuGetheeft de nodige assemblies toegevoegd en ook een aantal sectiestoegevoegd aan web.config. Om het zaakje werkend te krijgen hoef jeje daar echter niet om te bekommeren. Dat komt wanneer je klaarbent om de boel verder dicht te timmeren.

Fig. 1: OpenID ondersteuning installeren met NuGet

Met de fundering binnen moet je er uiteraard voor gaan zorgen dat degebruiker kan gaan inloggen. Hiervoor zijn grofweg drie dingen nodig:een beginpagina, de login aanvraag maken en het afhandelen van delogin response van de login provider. Al deze dingen handelen we afmet de LoginController waarin twee methodes zitten, een voor het afhandelen van een GET en een voor het afhandelen van een POST.Listing 1 laat de code van de LoginController zien.

using System.Web.Mvc;

using System.Web.Security;

using DotNetOpenAuth.Messaging;

using DotNetOpenAuth.OpenId;

using DotNetOpenAuth.OpenId.Extensions.SimpleRegistration;

using DotNetOpenAuth.OpenId.RelyingParty;

namespace MvcOpenID.Controllers

{

public class LoginController : Controller

{

public ActionResult Index()

{

var openId = new OpenIdRelyingParty();

var response = openId.GetResponse();

if (response != null &&

response.Status == AuthenticationStatus.Au-

thenticated)

{

FormsAuthentication.SetAuthCookie(

response.ClaimedIdentifier, false);

var claims = response.GetExtension<ClaimsRes-

ponse>();

return View(claims);

} // Eventueel andere statussen afvangen met

foutmelding.

return View();

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Index(string provider)

{

if (!Identifier.IsValid(provider))

{

// TODO: Foutafhandeling toevoegen

return View();

}

else

{

var openId = new OpenIdRelyingParty();

var request = openId.CreateRequest(

Identifier.Parse(provi-

der));

request.AddExtension(

new ClaimsRequest { Email = DemandLe-

vel.Require });

return request.RedirectingResponse.AsAction-

Result();

}

}

}

}

Listing 1: LoginController

De eerste Index methode handelt alle GET requests af. Is het een initiele request, dan krijg je de standaard View te zien. Anders wordtde View gevuld met het ClaimsResponse object waarin de eigen-schappen zitten van de ingelogde gebruiker. Daarvoor wordt de Form-sAuthentication cookie gezet, zodat de gebruiker ingelogd blijft. HetClaimsResponse object bevat gegevens zoals het email-adres van degebruiker, indien de login provider die meegestuurd heeft. In dit voor-beeld wordt dat object alleen gebruikt in de View meteen na het in-loggen. Wil je die gegevens ook gebruiken op andere pagina’s, dankun je bijvoorbeeld het object opslaan in het Session object. Dit werktook in een Web Farm, aangezien de ClaimsResponse class Serializa-ble is. Als je sommige gegevens ook nodig hebt als de gebruiker nietingelogd is, bijvoorbeeld om een email naar alle leden te sturen, danmoet je de gegevens uiteraard ook nog ergens in een database opslaan. Het response object is van het typed IAuthenticationRes-ponse en bevat ook de ClaimedIdentifier eigenschap. Dit is een unieke,onveranderljke identifier van de gebruiker, handig voor in een data-base. Zelfs als het email-adres van de gebruiker verandert kan je degebruiker nog identificeren.

De tweede Index methode handelt de POST requests af. Als para-meter verwacht deze methode een string die de provider identificeert.Als dit een valide provider is (hetgeen altijd zo is als je dit niet aan ban-den legt), dan kun je een login request aanmaken. In dit voorbeeldvoor een OpenID provider, maar dat zou ook een OAuth provider kun-nen zijn. Aan de request wordt een extension toegevoegd waarin aan-gegeven wordt dat we ook het email-adres van de gebruiker nodighebben. De AsActionResulte method van het RedirectingResponseobject is een extension method. Om deze te kunnen gebruiken moetje de DotNetOpenAuth.Messaging namespace importeren. Alle andere namespaces kan je met behulp van Visual Studio zelf invoegen.

De ClaimIdentifier is een unieke, overanderlijke identifier van de gebruiker

GENERAL

Nu rest nog één ding en dat is de View. Het makkelijkste is om deView strongly typed te maken voor de class DotNetOpenAuth.OpenId.Extensions.SimpleRegistration.ClaimsResponse. Listing 2 laatverder zien wat er in de body moet komen te staan.

@using (Html.BeginForm("Index", "Login"))

{

if(Model == null)

{

@Html.TextBox("provider", "https://www.google.com/ac-

counts/o8/id");

<input type="submit" value="Inloggen" />

}

else

{

<div>Ingelogd als <b>@Model.Email</b></div>

}

}

Listing 2: Body van de Login Index View

Wanneer je ingelogd bent laat de View in Listing 2 je email-adres zien.Anders krijg je een tekstveld te zien waarin je de identificatie van de loginprovider kunt opgeven, die standaard naar Google wijst. Omdat

het een tekstveld is zou iedere OpenID provider nu geaccepteerd wor-den. Aangezien je vertrouwt op een derde partij is het wel belangrijkdat je weer wie je vertrouwt en dus welke login provider(s) je accep-teert. Als je in het tekstveld nu https://me.yahoo.com, dan zou je meteen Yahoo ID in kunnen loggen. Je kunt dit ondervangen door aan tegeven welke login providers je accepteert. Listing 3 laat een fragmentvan web.config zien waarmee je kunt zorgen dat alleen Google geaccepteerd wordt. Als je nu Yahoo probeert krijgt je een foutmeldingin de controller.

<openid>

<relyingParty>

<security requireSsl="false">

<trustedProviders rejectAssertionsFromUntrustedProvi-

ders="true">

<add endpoint="https://www.google.com/accounts/o8/ud"

/>

</trustedProviders>

</security>



</reluingParty>

</opened>

Listing 3: opened-sectie in web.config •

2 DAYS SOFTWARE DEVELOPMENT CONFERENCES 2012

CONFERENCE

powered by

powered by

DELPHI

De SDN Conferences 2012 staan in het teken van de 4 industrie-stromingen:Desktop, Web, Mobile en Cloud. Daarnaast zal er een apart gedeelte zijn voor Delphi.

Tijdens de SDN Conferences 2012 wordt ook veel aandacht besteedt aan Windows 8 en Windows Phone, door bekende sprekers uit binnen- en buitenland. Het belooft een heel mooi programma te gaan worden! Ook de maandagavond belooft een feest te worden, meer hierover in de komende weken!

3 EN 4 DECEMBER 2012 PAPENDAL ARNHEM

Laat je inspireren!Haal je kennis op

in 2 dagen!

SOFTWARE DEVELOPMENT NETWORK

www.sdc.nl

http://www.sdc.nl

CLOUD


Het nieuwe PortaalDe Windows Azure portaal is nu bereikbaar via de url https://manage.windowsazure.com. Zoals gezegd wordt er geen Silverlightmeer gebruikt, maar pure HTML. Dat houdt dus ook gelijk in, dat jemet je iPad of niet Microsoft mobile device ook je Cloud services kuntbeheren. Het nieuwe portaal is nog een preview en nog niet alle functionaliteiten van de Silverlight portal zijn overgezet en omgebouwd.Voorlopig zullen we dus beide portalen nog naast elkaar blijven gebruiken.

Aan de linkerkant zie je naast de nieuwezaken ook de oude bekende, die je viahet portaal kun regelen en instellen. De-gene die we al kennen van de Silverlightportal zijn: Cloud Services, SQL Data-bases, Storage en Networks. Dit zijn denieuwe namen voor Hosted Services,Storage Accounts & CDN, Databasesen Virtual Network. Met de nieuwe release zijn er ook een aantal naam-gevingen geschoond en gestroomlijnd.

Websites en Virtual Machines zijn denieuwelingen. Daarover later meer. Het portaal bestaat uit drie stukken. Wehebben de header aan de bovenkant.

Daarin zitten de functies om snel de belangrijke plekken vanwww.windowsazure.com te komen. Deze header klapt uit en weg alshet de focus niet heeft. In het midden heb je dan het belangrijkste ge-deelte van de portal. Bijna alle sub pagina’s tonen in een of anderevorm een grid. Helaas kun je kolom breedte niet aanpassen, maar jekunt wel sorteren door op de titel van de kolom te klikken. Aan de on-derkant zit de action bar. Met het grote plus teken om functionaliteit(nieuwe Cloud Service etc ) toe te voegen aan Windows Azure enrechts een info gedeelte. Deze balk moet je wegklikken door op hetkruisje te klikken of op het pijltje naar beneden.

Als we nu eens inzomen op de Storage, dan is dit al een stukje uitgebreider dan we eerder hadden. We zien alle storage account.

Sinds 7 juni 2012 is de nieuwe HTML portaal van Windows Azure als preview beschikbaar vooriedereen. Dit nieuwe portaal is een verademing ten opzichte van de Silverlight variant. Dat wasweer een verademing ten opzichte van zijn zeer beperkte voorganger. Het eerste portaal (die bijde launch van Windows Azure in 2008 live ging) gaf al gauw het gevoel, dat je de gang stondte schilderen door de brievenbus. Er was toen via het portaal nog weinig mogelijk.

Marcel Meijer

Windows Azure Revisited

CLOUD

MAGAZINE

34

We kunnen inzomen op een storage account. In the monitoring chartkunnen we de performance van onze storage laten zien. Let wel op,deze performance monitoring kost transacties en dus geld. Als je kiestvoor de verschillende sub pagina’s, dan zie je op de action bar nieuweicons verschijnen. Wat ik persoonlijk nog mis, zijn tools om ook in deTables, queues of blobcontainers te kijken. Anders zou ik voor snellecontrole werkzaamheden geen andere tools meer nodig hebben.

Op de Cloud Services tab zien we een overzicht van onze services.Netjes uitgelijnd en mooi overzichtelijk. Door een service te klikkengaan je naar de details. Het eerste dat opvalt, is de performance meter.Dit is erg handig. Dit scherm heeft heel veel submenus en subpaginas.Ik pik er een paar uit.

Zo is er een TFS publishing link zichtbaar op de pagina. Je kunt nu heeleenvoudig de Cloud Service deployen vanuit TFS preview (TFS pre-view is de SAAS variant van Team Foundation Server op WindowsAzure). Op de monitor tab kun je metrics toevoegen om nog meer inzicht in de performance van je applicatie te krijgen.

Maar als we naar de Configure tab gaan, dan zien we daar ook veranderingen. Waar je voorheen een setting via de XML van de ServiceConfiguration.cscfg moest aanpassen, met alle gevolgen vandien als je een haakje teveel weghaalde etc, nu heb je echte invul-velden. Ze zijn nog niet allemaal groot genoeg, maar dat zal welkomen. Wil je meerdere instanties? Dan kun je op de SCALE tab metbehulp van een slider het aantal instanties eenvoudig verhogen en/ofverlagen.Op de instances tab vind je alle zaken om te connecten naar een instantie of reimage etc.

Op de SQL Databases tab vinden we alles wat we nodig hebben omeen database te beheren. Als je op de action bar aan de onderkant opmanage klikt, dan kom je nu nog uit op de Silverlight site (voorheenProject Houston) om je database te beheren. Dit wordt binnenkort uiteraard ook vervangen door een HTML versie.Als je een nieuwe database aanmaakt, kun je nu de collation van je database kiezen. Maar aangezien de nieuwe Portal nog in de Previewfase is, mis je nog de federation mogelijkheden.

Het nieuwe portaal is veel mooier en veel cleaner qua design gewor-den. Ook zit hij net even logischer in elkaar. Je ziet het product blijftgroeien en verbeteren, mede na aanleiding van vragen/opmerkingenvan gebruikers.

Website en Virtual MachinesWebsites zijn websites zoals je dat nu bij een hosting provider al ge-wend bent. Naast dat je kunt kiezen aan diverse standaard templatezoals Wordpress, Drupal en andere blog software of andere CMS soft-ware van niet Microsoft leveranciers, kun je ook iedere willekeurigeASP/PHP of Node JS website publiceren. In een volgend artikel komik hier uitgebreidere op terug.Voorheen hadden we de mogelijkheid tot het gebruik van VM roles. VMroles waren/zijn virtual machines, die je on premise maakt en dan naarWindows Azure upload. Nadat ze geupload is, dan kun je deze viaeen Hosted Service gemaakt in Visual Studio gebruiken en starten.Deze verplichte samenhang, een VM role alleen maken en starten viaeen Hosted Service package, was een groot nadeel. Ander groot nadeel was, dat deze VM’s niet persistent waren/zijn. In mijn experi-menten was ik vergeten om een firewall rule toe te voegen om de web-site in deze VM role publiek beschikbaar te maken. Om deze

CLOUD


wijziging alsnog door te voeren moest ik eigenlijk of een nieuwe VMuploaden of een diff disk maken. Als ik de wijziging in de VM zelf zoudoen, werd deze wijziging ongedaan gemaakt na een reimage. Ditpaste dus niet echt in de algemeen aanvaarde IAAS (Infrastructure asa Service) propositie.De Virtual Machines zijn nu echte persistente Virtual Machines. Wijzi-gingen in de configuratie gemaakt via een RDP sessie blijven bewaart.Ook kun je een Virtual machine nu maken via het portaal. Was de VMrole beperkt tot Windows 2008 (R2), Virtual Machine hebben geen enkele beperking. Je kunt kiezen uit de verschillende Microsoft OS-en(ook Windows Server 2012) en enkele Linux distributies.

Dit biedt allerlei nieuwe mogelijkheden voor alternatieve Cloud migra-tie scenario’s. Het is nu mogelijk om SQL Server in de Cloud tedraaien, zonder te migreren naar SQL Database on Windows Azure.Maar ook kun je een SharePoint farm in de Cloud maken. Hiermee isWindows Azure nog volwassener geworden als Cloud leverancier enbestrijkt het hele spectrum (IAAS en PAAS). Ook zijn mix-and-matchtussen SAAS, IAAS en PAAS mogelijk.

(Met dank aan David Pallman voor dit plaatje)

SDK 1.7Bij dit alles hoort ook nog een nieuwe versie van de SDK, namelijk 1.7.De SDK kun je downloaden op https://www.windowsazure.com/en-us/develop/net/ (English) of https://www.windowsazure.com/nl-nl/develop/net/ (Nederlands). Als je hem daar downloadt, krijg jeook versie 1.7 van Windows Azure tools for Visual Studio.Door te klikken op de Install button op deze site, krijg je de keuze voorwel Visual Studio je ze wilt installeren. Dit houdt inderdaad in, dat je verschillende SDK’s voor de twee Visual Studio’s kunt gebruiken. Datkan erg handig zijn.

Bij Visual Studio kun je nu kiezen, welke versie van de tools je wilt gebruiken. Daarvoor is er een drop down list op het New WindowsAzure Cloud Service scherm gekomen.

Dat is erg handig, want nu kun je huidige productie projecten gewoonmet de ‘oude’ tools onderhouden en is er geen verplichting om te upgraden. Dat bespaart tijd, kosten en de benodigde testen. Mocht je een solution/project willen upgraden naar de nieuwe versievan de tools/SDK, dan kun je zelf de migration wizard starten. Op deproperties page van Windows Azure Cloud Service project is een upgrade button beschikbaar.

Als je dan op de button Upgrade klikt, dan krijg je de Migration Wizard.

CLOUD

MAGAZINE

36

De grootste verschillen zitten in de volgende bestanden.‘oude’ SDK

‘nieuwe’ SDK

En de properties van het Windows Azure Cloud project staat dan hetvolgende.

De update van de Tools is wederom een geweldige toevoeging aan denieuwe release. Erg mooi is het feit, dat beide SDK’s naast elkaar kun-nen werken. Dat maakt het eenvoudiger om op een ontwikkelmachinemet meerdere SDK’s te kunnen ontwikkelen.

Tot slotAls je eerder dacht dat Windows Azure voor jou geen oplossing is,dan is het misschien nu het moment om dit eens te heroverwegen.Waarschijnlijk vallen een aantal bezwaren nu weg. •

Marcel Meijer

Al meer dan 15 jaar begeeft deze 42

jarige zich in de wereld van de ICT.

Op dit moment houdt hij zich

voornamelijk bezig met Azure,

Cloud, C#, Software Ontwikkeling,

Architectuur in het algemeen en

Windows Phone 7. Ook is hij bezig met Biztalk en Sharepoint.

Hij werkt als Senior Architect bij VX Company. In zijn vrije tijd is hij

.NET track owner, eindredacteur en bestuurslid van de SDN.

Binnen de SDN is hij verantwoordelijk voor het regelen van

sprekers voor de SDN Events (SDE), het regelen/redigeren van

artikelen voor het SDN Magazine, mede verantwoordelijk voor de

eindredactie van de hardcopy en digitale magazines en de inhoud

van de SDN Conferences. Op 1 oktober 2010 werd hij MVP.

DELPHI Bob Swart

Delphi ActionsActions zijn niet echt nieuw, maar toch kom ik regelmatig mensentegen die ze nog niet gebruiken (erger: bij veel bijeenkomsten zijn ermeer ontwikkelaars die ze niet gebruiken, dan ontwikkelaars die zewel gebruiken). In mijn ogen kunnen Actions een toegevoegde waardebetekenen voor Delphi toepassingen, en vooral voor Delphi ontwik-kelaars.VCL Actions werden voor het eerst geïntroduceerd in Delphi 4 (jawel,dat was nog de vorige eeuw), toen nog met de TActionList compo-nent. Later kwamen daar de TActionManager, TPopupActionBar, TActionMainMenuBar en TActionToolBar bij, specifiek voor Windows(en o.a. voor ActionBands en Ribbons).Met de release van Delphi XE3 zijn Actions - en dan met name de TActionList - ook beschikbaar voor FireMonkey (en dus cross-plat-form voor Windows en Mac OS X), en dat is een mooie gelegenheidom weer eens te helpen herinneren wat we met Actions precies kunnen.

Disclaimer: Voor de ene screenshot in dit artikel maak ik gebruik vaneen versie van Delphi XE3 die nog niet officieel uit is (maar ik verwacht weinig schokkende wijzigingen in de zaken die ik hier galaten zien).

FireMonkey TActionListWe beginnen met een FireMonkey HD Desktop Application in DelphiXE3 (OK, daar is een nieuwe wizard voor, die laat ik op 10 en 25 sep-tember zien, en tijdens de World Tour). Op een FireMonkey HD Formkunnen we nu een TActionList component neerzetten. De FireMon-key TActionList heeft geen Images property (voor een TImageList),maar verder zijn alle properties en events hetzelfde. Met de rechter-muisknop op de TActionList start je de Action List Editor, waar nieuweacties toegevoegd kunnen worden (of gekozen uit een bestaande lijstmet voorgedefinieerde actions - net als bij de VCL tegenhanger). Daarhoudt de vergelijking meteen op, want de FireMonkey TActionList heefteen hele andere lijst met Standard Actions dan de VCL TActionList(die laatste bevat alle mogelijke standard actions die zin hebben onderWindows, terwijl de FireMonkey TActionList natuurlijk cross-platformmoet zijn, en daardoor initieel wat minder standard actions kent).Om met Actions te werken moet je overigens de System.Actions enSystem.Classes units in de uses clause hebben staan (dat geldt ookvoor bestaande toepassingen die je met XE3 wilt compileren).

Voor mijn demo, maak ik een drietal Actions aan, en die noem ik EditCopy, EditPaste en EditCut (deze zitten op dit moment nog niet inde standard actions van de FireMonkey TActionList).

Behalve de Name property geef ik ook zinvolle values aan de Text enShortCut properties. Deze zullen gebruikt worden door de visuele controls die we straks aan de actions gaan verbinden.

OnExecute en OnUpdateElke TAction component heeft een OnExecute en een OnUpdateevent. In de OnExecute voeren we de actie uit - we krijgen daarbij eenSender van type TObject waar de specifieke Action in teruggevondenkan worden. Er is dan nog wel meer context informatie nodig, zoals decontrol die op dit moment de focus heeft (en via die control kun je danbijvoorbeeld ook bij de dataset komen, als je een specifieke datasetactie wilt uitvoeren).

De huidige control die de focus heeft kunnen we in een VCL toepas-sing vinden in de ActiveControl property van het form. Deze propertywordt automatisch gezet als je van de ene naar de andere control gaatin een VCL toepassing. Helaas werkt deze "truc" niet meer in een FireMonkey toepassing (bug of feature?), dus moeten we daar gebruik


Delphi XE3 FireMonkey ActionsOp het moment van schrijven is Delphi XE3 nog niet officieel aangekondigd, maar dat zal welanders zijn op het moment dat dit nummer van SDN Magazine verschijnt. Delphi XE3 bevat ondersteuning voor Windows 8 voor zowel VCL als FireMonkey (naast de normale Win32/Win64ondersteuning en Mac OS X die er al in XE2 in zat). Daarnaast zijn er relatief veel wijzigingen inFireMonkey aangebracht, waaronder de ondersteuning voor Anchors en Actions, die we kennen uit de VCL wereld.

DELPHI

MAGAZINE

38

maken van de Focused.GetObject property van een FireMonkey form,maar dat werkt in ieder geval wel altijd.Voor de EditCopy implementeer ik de OnExecute en OnUpdate alsvolgt: eerst kijken we of de Focused.GetObject (de Active Control diede focus heeft) wel van type TCustomEdit is. Als dat het geval is, kunnen we van die TCustomEdit de CopyToClipboard method aanroepen (die bestaat al, dat scheelt).Voor de OnUpdate moeten we ook kijken of het een TCustomEdit betreft, maar ook of de lengte van de geselecteerde tekst wel groterdan 0 is. Als dat niet het geval is heeft het uiteraard geen zin om eenCopy te doen. De uitkomst hiervan zetten we in de Enabled propertyvan de Sender (waar onze TAction in zit).

procedure TForm3.EditCopyExecute(Sender: TObject);

begin

if Assigned(Focused) and (Focused.GetObject is TCustomEdit)

then

(Focused.GetObject as TCustomEdit).CopyToClipboard

end;

procedure TForm3.EditCopyUpdate(Sender: TObject);

begin

(Sender as TAction).Enabled := Assigned(Focused) and

(Focused.GetObject is TCustomEdit) and

((Focused.GetObject as TCustomEdit).SelLength > 0)

end;

Voor de EditCut action doen we iets vergelijkbaars, alleen moeten wehierbij de CutToClipboard aanroepen in de OnExecute. Bij de OnUp-date moeten we ook iets extra's doen, namelijk kijken of de TCusto-mEdit niet read-only is (in dat geval mogen we natuurlijk de inhoudniet leegmaken).

procedure TForm3.EditCutExecute(Sender: TObject);

begin


then

(Focused.GetObject as TCustomEdit).CutToClipboard

end;

procedure TForm3.EditCutUpdate(Sender: TObject);

begin


(Focused.GetObject is TCustomEdit) and

((Focused.GetObject as TCustomEdit).SelLength > 0) and

not (Focused.GetObject as TCustomEdit).ReadOnly

end;

Voor de EditPaste kunnen we de OnExecute gebruiken om de Paste-FromClipboard aan te roepen voor zowel een TCustomEdit als eenTMemo (in FireMonkey is een TMemo niet afgeleid van TCustomEdit,dus moeten we hier een extra IF inbouwen voor de TMemo).

procedure TForm3.EditPasteExecute(Sender: TObject);

begin


then

(Focused.GetObject as TCustomEdit).PasteFromClipboard

else

if Assigned(Focused) and (Focused.GetObject is TMemo) then

(Focused.GetObject as TMemo).PasteFromClipboard

end;

Los van een TEdit en een TMemo, wil ik echter ook iets heel speciaals

implementeren op deze manier: het pasten van een string in een TListBox. Het gevolg van de EditPaste zal dan een nieuw item in delistbox zijn, met als tekst de tekst die in het clipboard stond. Dit implementeren we als volgt, met het Clipboard van type IFMXClipboardService dat we kunnen ophalen via de IFMXClipboard-Service(TPlatformServices.Current.GetPlatformService(IFMXClip-boardService)).

procedure TForm3.EditPasteExecute(Sender: TObject);

var

Clipboard: IFMXClipboardService;

begin

if Assigned(Focused) and (Focused.GetObject is TCustomE-

dit) then

(Focused.GetObject as TCustomEdit).PasteFromClipboard

else


(Focused.GetObject as TMemo).PasteFromClipboard

else

if Assigned(Focused) and (Focused.GetObject is TCustom-

ListBox) then

begin

Clipboard := IFMXClipboardService(TPlatformServices.Cur-

rent.GetPlatformService(IFMXClipboardService));

(Focused.GetObject as TCustomListBox).Items.Add(Clip-

board.GetClipboard.ToString);

Caption := Clipboard.GetClipboard.ToString

end

end;

Het gevolg is dat we in de OnUpdate niet alleen moeten kijken of deFocused.GetObject (active control) een TCustomEdit of een TMemois, maar het mag ook een TListBox zijn.

procedure TForm3.EditPasteUpdate(Sender: TObject);

begin

if Assigned(Focused) and (Focused.GetObject is TCustomE-

dit) then

(Sender as TAction).Enabled :=

not (Focused.GetObject as TCustomEdit).ReadOnly

else


(Sender as TAction).Enabled := not (Focused.GetObject as

TMemo).ReadOnly

else


(Focused.GetObject is TCustomListBox)

end;

Action koppelingenNu we een drietal Actions hebben gemaakt en de OnExecute enOnUpdate events hebben geïmplementeerd kunnen we de actionseindelijk koppelen aan controls of menu items.De meest eenvoudige toepassing is om een TMainMenu op het formte zetten, en daar dan drie TMenuItems aan toe te voegen, en dezevia de Action properties te koppelen aan de EditCut, EditCopy en Edit-Paste. Merk op dat de TMenuItems nu de Text, ShortCut en Enabledproperties overnemen van de betreffende action.

Hetzelfde kunnen we doen door bijvoorbeeld TButtons neer te zetten:ook hierbij zal de Text en Enabled worden overgenomen. Een probleem hierbij is echter dat een klik op de TButton de focus uit deTEdit zal halen. De TButton zelf zal niet de focus krijgen (want zodrade focus op de TButton zou komen zal deze disabled worden omdat het geen TCustomEdit is). Vandaar ook de check op

DELPHI


Assigned(Focused) om te voorkomen dat we een OnExecute uitvoeren terwijl er geen control is dat de focus heeft.

ConclusieIn dit artikel heb ik laten zien hoe TAction en TActionList componen-ten werken, en dat deze als nieuwe feature zijn toegevoegd aan FireMonkey zodat we nu met Delphi XE3 gebruik kunnen maken vancross-platform TActions op zowel Windows als Mac OS X. •

Bob Swart

Bob Swart is werkzaam in de IT

sinds 1983 en heeft daarbij een

voorliefde voor (Turbo) Pascal en

Delphi. Bob spreekt regelmatig op

(internationale) conferenties over

Delphi en heeft honderden artikelen

geschreven, alsmede zijn eigen

Delphi cursusmateriaal voor Delphi

trainingen en workshops. Behalve

voor het geven van trainingen, is Bob ook beschikbaar voor

consultancy, coaching, ontwerp- en bouwwerkzaamheden, of

andere ondersteuning op het gebied van software ontwikkeling

met Delphi – voor zowel Win32 als .NET. Sinds de zomer van

2007 is Bob ook reseller van CodeGear producten zoals Delphi

en RAD Studio. Bob Swart Training & Consultancy is gevestigd in

Helmond Brandevoort, en beschikt over een eigen trainingsruimte

van ruim 42 vierkante meter, inclusief een testlab voor alle

mogelijke toepassingen. De voorliefde van Bob voor Pascal en

Delphi heeft hij ook tot uiting laten komen in de namen van zijn

kinderen Erik Mark Pascal en Natasha Louise Delphine.

Speciale

Windows 8 track-sponsored by Telerik-

21 september a.s.

SDE - Zeist

TIP:Door het GridView met de muis scrollen

Wanneer je naar het Start scherm van Windows 8 kijkt heeft dezeeen paar mooie unieke features die niet standaard met het Grid-View control meekomen. Zo heb je type to search. Hiermee kanje gewoon gaan typen in het start scherm en vervolgens word desearch geactiveerd. Hoe je dit in jouw app kan ontwikkelen hebik hier beschreven: http://www.familie-smits.com/post/2012/08/12/Type-to-search-in-Windows-8.aspxEen andere mooie feature is dat je in het startscherm kan scrol-len door je muis aan de zijkant van scherm houden en dan demuis naar blijft bewegen wat dan het GridView laat scrollen.Hier de code om dit mogelijk te maken in je eigen aplicatie:

public class VariableSizeGridView : GridView{

private ScrollViewer scrollViewer;

public VariableSizeGridView(){

MouseDevice.GetForCurrentView().MouseMoved += VariableSizeGridView_MouseMoved;

}

protected override void OnApplyTemplate(){

base.OnApplyTemplate();scrollViewer = GetVisualChild<ScrollViewer>(this);

}

private void VariableSizeGridView_MouseMoved(MouseDevice sender, MouseEventArgs args)

{if (Window.Current.CoreWindow.PointerPosition.X

== Window.Current.CoreWindow.Bounds.Left){

if (args.MouseDelta.X < 0)

{scrollViewer.ScrollToHorizontalOffset(

scrollViewer.HorizontalOffset + args.MouseDelta.X);

}}

if (Window.Current.CoreWindow.PointerPosition.X == Window.Current.CoreWindow.Bounds.Right - 1)

{if (args.MouseDelta.X > 0){

scrollViewer.ScrollToHorizontalOffset(scrollViewer.HorizontalOffset + args.MouseDelta.X);

}}

}

private T GetVisualChild<T>(DependencyObject parent) where T : DependencyObject

{T child = default(T);int numVisuals = VisualTreeHelper.GetChildren-

Count(parent);for (int i = 0; i < numVisuals; i++){

DependencyObject v = (DependencyObject)VisualTreeHelper.GetChild(

parent, i);

child = v as T;if (child == null)

child = GetVisualChild<T>(v);if (child != null)

break;}return child;

}}

DESKTOP Dennis Vroegop

De trukendoosLaten we nou eens eerlijk zijn. Er is toch eigenlijk niets leukers danprogrammeren? Je hebt een idee in je hoofd en door niets anders tegebruiken dan je vingers op je toetsenbord kun je die abstracte ideeënvertalen in een serie eentjes en nulletje die in een later stadium mensen in staat stellen om een spel te spelen, hun werk beter te doenof iets anders te bereiken. Dat is geen werk meer, dat is pure kunst!

Een van de dingen die je moet doen om kunst te creëren is er goed inzijn. Nou kan ik niet vanaf hier een betere programmeur maken. Maarik kan met aan zekerheid grenzende waarschijnlijkheid wel vertellendat je niet al te goed bent in design…

Waarom weet ik dat? Tja, je bent ontwikkelaar. Ontwikkelaars kunnenniet designen. Net zoals designers niet kunnen ontwikkelen. Mocht jijeen van die zeldzame uitzonderingen zijn die dat wel allebei kan, dannodig ik je uit om verder te bladeren in dit magazine, er staat genoegin om je bezig te houden. Maar als je ook maar enigszins twijfelt aanje vermogen om een goed design neer te zetten dan nodig ik je uit omnog even langer te blijven rondhangen. Ik ga geen design topper vanje maken, maar ik ga je wel wat trucjes laten zien. En dan vooral trucjes voor het maken van goed bruikbare Windows 8 Store Apps.

Wat is design?Nu kan ik je wel vertellen hoe je moet designen (excuus voor hetslechte Nederlands) maar voor ik dat kan gaan doen moeten we heteens worden over wat design nu eigenlijk is.Uit het Oxford English Dictionary: Design (noun): the art or action ofconceiving of and producing a plan or drawing of something before itis made.Dus: conceiving and producing a plan or drawing. Met andere woor-den het bedenken en maken van iets. Dat klopt wel maar is in onsgeval nog te vaag.Ik zou design willen omschrijven als alle activiteiten die een applicatieontwikkelaar vertellen hoe de applicatie er uit gaat zien en hoe dezezich gaat gedragen. Je ziet dat er twee onderdelen zijn, reden om design op te splitsen in User Experience design (UX) en vormgeving.Ik maak even onderscheid tussen deze twee vormen zodat het duidelijk is waar ik het over heb.Vormgeving is iets waar heel veel mensen mee werken. Vormgeving isniets nieuws. Vormgeving gaat over de kleurtjes, pixels, fonts en meervan dat soort grafische dingen. UX is een heel ander verhaal. Een UX designer is iemand die weet hoede gebruiker met een applicatie om gaat of om wil gaan. Een UX designer snapt iets van de psychologie achter de gebruiker. Helaas isdit een vakgebied dat nog volop in ontwikkeling is met als gevolg dater een chronisch tekort aan specialisten is. Daarnaast zijn er nog heelveel bedrijven die niet inzien dat een goede UX’er een enorme

toegevoegde waarde kan hebben voor hun software. Vreemd genoeg is dit besef wel doorgedrongen in de wereld van deweb ontwikkelaars. Bij het bouwen van websites of web applicatieswordt er sneller naar een UX specialist gekeken dan bij het bouwenvan een op zich staande applicatie. Een zelfde effect zie je momenteelbij mobiele applicaties: ook bij het bouwen van iOs applicaties of systemen voor het Android platform zijn vaak UX specialisten betrok-ken. Maar goed UX design is niet eenvoudig en het vak staat eigenlijknog in de kinderschoenen. Er is nog veel te leren en zeker op het gebied van Windows 8 Store applicaties zullen we nog grote stappenmoeten nemen.

De principesUiteraard geldt voor iedere applicatie dat deze goed ontworpen moetzijn. Er is geen enkele reden om bij een standaard Line Of Business applicatie genoegen te nemen met een slechte layout en slechte bruikbaarheid van het systeem. Toch wil ik het daar even niet overhebben; ik wil me voornamelijk gaan richten op de Windows 8 Storeapplicaties, wat we voorheen Metro style applicaties noemde.Applicaties voor dat platform schrijven kan voor een ontwikkelaar eenenorm leuke bezigheid zijn. De meerderheid van de apps voor Windows 8 zijn relatief eenvoudige applicaties. Dit wil niet zeggen datze eenvoudig zijn om te schrijven maar de doelstelling van een dergelijke app is makkelijk uit te leggen. Dit is niet toevallig: Store appszijn meestal apps die goed zijn in één ding. Dat is een onderdeel vande filosofie van het Windows 8 ecosysteem.

Als je van plan bent om een app te maken (vanaf nu zal ik als ik ‘app’zeg steeds een Windows 8 Store Application bedoelen), dan raad ikje aan om eerst Visual Studio af te sluiten, dan je computer uit te doen,een stuk papier te pakken en een pen of viltstift. Daar ga je je eerstmee bezig houden.Bedenk wat je app doet. Omschrijf dat in de volgende vorm:[AppName] is de beste app om [taak] te doen. Dus als je een systeem maakt om kilometers bij te houden dan wordtdat “KiloTracker is de beste app om je zakelijke kilometers van je leaseauto te administreren.” Dit is een duidelijk statement. Hier kan je niet omheen. Schrijf hem open hang dit aan de muur zodat je er steeds weer naar kijkt. Dit wordthet anker van je designproces.

De volgende stap is leuk. Pak een pen en papier en ga brainstormen.Schrijf een lijstje met zoveel mogelijk punten op die je app zal gaandoen. Beperk je niet, schrijf alles op wat in je opkomt. Later gaan wedit wel bijwerken:• Invoeren start stand• Invoeren eind stand• Invoeren favoriet adres

MAGAZINE

40

UX Designin Windows 8 Store AppsBetere apps door slim gebruik van standaarden

DESKTOP


• Foto’s bij rit plaatsen• Bekijken aantal gereden kilometers• Overzicht printen per maand• Mailen van overzicht• Plannen van nieuwe rit• Export van overzicht naar Excel• Verwijderen rit• Mailen van rit met vrienden• Omzetten privé rit naar zakelijke rit• Zoeken naar ritEn ga zo maar door. Doe dit een tijdje en maak de lijst zo lang mogelijk.

De volgende stap is: koffie drinken (of thee als je dat liever heb). Nee,dit is geen fout, ik wil echt dat je even de tijd neemt en uit de brain-storm flow komt. Neem afstand. Op die manier kun je het lijstje bekijken alsof iemand anders hem geschreven heeft en ben je nietemotioneel gebonden aan je gevonden punten.Kijk nu nog eens naar het lijstje en verwijder alles wat niet past bij jestatement (die heb je op A3 formaat aan je muur gehangen, toch?)• Invoeren start stand• Invoeren eind stand• Invoeren favoriet adres• Foto’s bij rit plaatsen• Bekijken aantal gereden kilometers• Overzicht printen per maand• Mailen van overzicht• Plannen van nieuwe rit• Export van overzicht naar Excel• Verwijderen rit• Mailen van rit met vrienden• Omzetten privé rit naar zakelijke rit• Zoeken naar rit

Je kunt discussiëren over wat ik doorgestreept heb maar hou voorogen dat een Windows 8 Store app een applicatie is die heel erg goedis in één ding, en niet meer dan dat! Dus alles wat daar buiten valt iswellicht beter om in een andere app te zetten.We hebben nu onze actie punten.

CharmsAls iemand even met Windows 8 gewerkt heeft,zal hij of zij gewend zijn om dingen op een be-paalde manier te doen. Iedere Windows 8 apphoort op dezelfde manier te werken. Nou hoef je jedaar niet aan te houden maar als je dat niet doetloop je het risico dat je gebruikers de weg kwijtraken in je app. Dat levert je een slechte review opwat andere gebruikers ervan kan weerhouden jeapp aan te schaffen. Het is handiger om de stan-daard manier van werken te ondersteunen, al ishet maar om het je zelf als ontwikkelaar makkelijkte maken! Eén van die standaarden zijn decharms. De charms zijn de standaard taken dieeen applicatie kan ondersteunen en die aan te roe-pen zijn van buiten je app. In Windows doe je datdoor met je vinger van rechts buiten het schermhet scherm in te slepen. Je krijgt dan een volgendmenu te zien.In dit menu vind je een aantal optiesdie de gebruiker kan gebruiken, zoals zoeken endelen. Als je in je applicatie zoek en/of vind func-tionaliteit wilt bieden, dan is dit de plek.

We hebben een paar zaken in ons lijstje staan die hier onder vallen.Onze lijst wordt nu:• Invoeren start stand• Invoeren eind stand• Invoeren favoriet adres• Foto’s bij rit plaatsen• Bekijken aantal gereden kilometers• Overzicht printen per maand (via Devices)• Mailen van overzicht (via Share)• Plannen van nieuwe rit• Export van overzicht naar Excel (via Share)• Verwijderen rit• Mailen van rit met vrienden• Omzetten privé rit naar zakelijke rit• Zoeken naar rit (via Search)

We houden dus de volgende lijst over van functionaliteit die we in deUI moeten implementeren en aanbieden op een manier die de gebruiker eenvoudig kan vinden.• Invoeren start stand• Invoeren eind stand• Bekijken aantal gereden kilometers• Verwijderen rit• Omzetten privé rit naar zakelijke ritDat schoont de lijst enorm op!

App BarsOok in Windows 8 Store Apps kun je menu’s gebruiken. Deze bena-der je door te swipen van boven buiten het scherm het scherm in, ofvan onder buiten het scherm het scherm in. Dan moet er een menuverschijnen. Ook voor dit soort menu’s gelden regels die de gebruikerverwacht als ze eenmaal gewend zijn aan Windows 8. Ten eerste noe-men we ze geen menu meer maar App Bars. Het is maar een naam…We maken onderscheid in twee soorten App Bar items. Een groep isde groep die betrekking heeft op wat er nu op het scherm staat of water nu geselecteerd is. De andere groep is meer generiek: deze actieshebben geen relatie met wat er nu op het hoofdscherm gebeurt. Eenvoorbeeld van de eerste groep is bijvoorbeeld “Omzetten van privénaar zakelijk”. Dit is alleen zichtbaar als je een privé rit geselecteerdhebt in het scherm. Een voorbeeld van de tweede groep is “Startnieuwe rit.” Items op de app bar zijn gegroepeerd. Alles wat bij elkaar hoort moetje ook bij elkaar zetten. In principe is het ook zo dat alles wat generiekis zoveel mogelijk rechts staat, terwijl alles wat bij het scherm hoort zoveel mogelijk links staat. Mocht je nu dusdanig veel commando’s hebben op je app bar, kijk dan eens of je zaken niet bij elkaar kuntvoegen zodat je een soort menu krijgt. Een touch op het item toontdan een soort van popup zodat je daar een actie uit kunt kiezen. Dezeitems moeten wel gerelateerd zijn aan elkaar, anders werkt het niet.Nog even een opmerking: vermijd het gebruik van een “Advanced…”knop. Dit is een teken dat je applicatie te ingewikkeld is. In de praktijkblijkt dat maar een heel klein gedeelte van de gebruikers een dergelijke optie zal kiezen dus je kunt het beter weglaten. Simpliciteitis belangrijk!

De schermenDe meeste Windows 8 apps zijn gebouwd rond Grids. Daarnaast zulje zien dat de meeste apps zo’n 3 niveaus van Grids hebben. Gebruikers gaan dit ook verwachten dus maak daar gebruik van. Zorger in ieder geval voor dat je niet teveel niveaus maakt in je applicatie:gebruikers raken snel de weg kwijt (dus slechte reviews, slechte punten, slechte downloadcijfers). Wat bedoel ik nu precies met niveaus? Laten we nog een keer naarons voorbeeld kijken: onze kilometer app. Ik kan me voorstellen dat hetsysteem begint met een scherm met daarin alle ritten. Door met depinch beweging uit te zoomen krijgen we een grid te zien met datum

DESKTOP

MAGAZINE

42

ranges: op die manier is het makkelijker om een bepaalde datum tezoeken. Het volgende scherm toont een dergelijk iets: door in de People app vanuit het hoofdscherm uit te zoomen verschijnt een alfabet waarin het iets makkelijker zoeken is naar mensen:

Door vanuit het eerste scherm in te zoomen (door pinch of tap op hetitem) krijg je de details van die rit te zien.Je ziet dat op deze manier je een heel stuk functionaliteit, namelijk denavigatie, heel eenvoudig en natuurlijk kunt weergeven. Voor de gebruiker voelt het niet eens als navigatie maar zullen ze vrij snel en intuïtief de weg weten in je systeem. En dat is precies waar je naarmoet streven…

Maar wat als je nu meerdere niveaus hebt? Het antwoord is even eenvoudig als niet-intuitief om te bedenken (maar vreemd genoeg welom te gebruiken): plak de niveaus naast elkaar.

In dit scherm, uit de Video app, zie je wat ik bedoel. In het hoofd-scherm staan drie niveaus naast elkaar afgebeeld: my videos, spotlighten (niet zichtbaar in deze afbeelding) movies store. Dit zijn dingen dieniet logisch in elkaar overvloeien dus een pinch of zoom is niet voor dehand liggend. Maar toch werkt dit wel goed: de gebruiker snapt watde bedoeling is. Sterker nog: de gebruiker zal het niet eens ervaren alsverschillende schermen.Let op: door iets te selecteren in dit scherm ga je een niveau dieper.Zorg er wel voor dat de gebruiker “ziet” wat er gebeurd.

Op die manier raken ze de weg niet kwijt en weten ze altijd wat er gebeurt en waar ze vandaan komen. De SDK bij Visual Studio levertgenoeg voorbeelden van hoe je dit voor elkaar kan krijgen.

Dus…Door consequent gebruik temaken van de standaarden bin-nen Windows 8 Store Apps kunje, ook als niet UX-expert, snelapplicaties maken die natuurlijkaanvoelen. Ze zullen zich snelthuis voelen in je app en het ge-heel zal logisch aanvoelen. Als jede standaarden goed volgt enconsequent doorvoert zul je mer-ken dat het maken van logische systemen eigenlijk hele-maal niet zo ingewikkeld is. Je bent een ux-designer! De vol-gende stap is het maken van‘mooie’ applicaties. Maar dat isweer een heel andere vorm vandesign. •

Dennis Vroegop

Dennis Vroegop (1970) heeft zo’n

20 jaar ervaring als professioneel

ontwikkelaar, afgezien van de 10

jaar daar voorafgaand als hobbyist.

Het meest van die tijd heeft hij be-

steed aan het maken van applica-

ties op het Microsoft platform. Naast

het pure programmeren heeft hij een

passie voor het uitdenken van goed

bruikbare systemen. Die liefde is het meest duidelijk terug te zien in

zijn werk op diverse Multi-touch platformen en dan met name de

toepassingen voor mensen die een beperking hebben zoals kin-

deren met autisme.

Naast zijn dagelijkse werk is Dennis voorzitter van dotNed en re-

gelmatig spreker op diverse conferenties. Voor zijn inzet is Dennis

regelmatig door Microsoft onderscheiden. Dennis mag zichzelf

sinds kort de eerste Hardware Interaction Design and Development

MVP noemen.


SDN > Update

Windows Azure Websites: “The Target ‘MsDeployFilePreview’ does not existin the projectWindows Azure Websites zijn heel interessant voor relatief eenvoudige websites. Bijvoorbeeld alsje een Windows Azure Cloud project hebt met daarin alleen een WebRole. Deze WebRole heefteventueel koppelingen met een Windows Azure SQL Database of Windows Azure Storage, maargeen achtergrond processen of iets dergelijks. Deze kun je nu dus deployen als een WindowsAzure Website. Heel interessant omdat er bij een MSDN account een ruim aantal gratis zijn.Het kan voorkomen, dat je deze fout krijgt.

De oplossing is verwijder de file C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets.Daarna run je deze update (http://go.microsoft.com/fwlink/?LinkId=253458). Daarmee is het probleem opgelost.

Het jij de enquête vande SDN al ingevuld?We hebben een enquête gemaakt over de gehele SDNdienstverlening. De enquête bevat vragen over de SDNevents, het Magazine, de Nieuwsbrieven etc. Wehopen, dat je tijd hebt om deze enquête in te vullen enons van de broodnodige feedback te voorzien. Tenslotte hebben de leden invloed op de SDN.

De enquête is te vinden op:https://nl.surveymonkey.com/s/2012SDNenquete

WindowsAzure MobileServicesOp 29 augustus zijn de Windows Azure Mobile Servicesgeïntroduceerd! Een apart gedeelte op de Windows Azure management portal, waarbij je super simpel een Windows8 applicatie kunt maken. De Windows 8 applicatie kanheel eenvoudig gebruik maken van Windows Azure SQLDatabases, Push Notification Services en/of Authentica-tion. Uitgebreide info uiteraard bij de Scott Guthrie.http://www.windowsazure.com/en-us/develop/mobile/http://weblogs.asp.net/scottgu/archive/2012/08/28/announcing-windows-azure-mobile-services.aspxWindows Azure wordt daarmee de defacto standaardbackend voor Windows 8 applicaties.Windows Azure

Portal UpdatesDe preview Windows Azure managementportal is geupdate. Een groot aantal vande vele wensen van gebruikers is meege-nomen in deze update.

Hier een vlugge opsomming:• Het is nu mogelijk om de kolommen van het grid te

resizen. Handig voor bijvoorbeeld de VM’s / VD’s methun vreselijk lange namen.

• Er is een Settings tab bijgekomen, daar kun je nu jemanagement certificaten beheren. Je kunt ze uploaden en verwijderen.

• Als je inzoomt op bijvoorbeeld een Cloud Service, danzie je links visueel nog waar je bent of vandaan kwam.

http://weblogs.asp.net/scottgu/archive/2012/08/28/announcing-windows-azure-mobile-services.aspx

http://weblogs.asp.net/scottgu/archive/2012/08/28/announcing-windows-azure-mobile-services.aspx

http://www.echtleukwerk.nl

http://www.echtleukwerk.nl

sdn magazine 114 · 2015. 1. 6. · mvc4, html5, nuget en mef aanwezig. een absolute aanrader is de...

Documents