MSMVPS.COM
The Ultimate Destination for Blogs by Current and Former Microsoft Most Valuable Professionals.

Visual Studio LightSwitch in de praktijk–Deel 4–Parameters toevoegen aan een scherm

Note: since there’s quite a lot of content on Visual Studio LightSwitch available in English on the web already, I decided to publish this series in Dutch.

Begin 2011 heeft Microsoft de eerste beta van VS LightSwitch met Go-Live licentie gelanceerd, een nieuw product in de Visual Studio familie, waarmee razendsnel zowel web- als desktop SilverLight "Line of Business" applicaties kunnen worden gemaakt. Hoewel de doelgroep van VS LightSwitch niet primair bestaat uit hard-core .net developers, zal het ook voor deze groep zeker waardevol kunnen zijn om de mogelijkheden en beperkingen van LightSwitch te leren kennen.

In de aanloop naar DevDays11 begin ik met een serie blogs over dit onderwerp. De eerste post was het inleidende artikel. De volgende artikelen zijn/worden:

Inleiding

In dit deel van de serie, ga ik het afspraken scherm uit het vorige deel nog en stap verder uitbouwen. De gebruiker is namelijk neit geïnteresseerd in een scherm waar alle afspraken op staan, maar een scherm waar alle afspraken van een dag op staan. Bij het opnen van dat scherm, moeten dat natuurlijk de afspraken van “vandaag” zijn.

Om dit te kunnen realiseren, moeten we de query die aan het scherm ten grondslag ligt, kunen parametriseren. Het goede nieuws is dan gelukkig weer, dat LightSwitch hierin voorziet. Er zijn zelfs verschillende mogelijkheden om dit te doen. Eén mogelijkheid is, om in de Screen Designer van SearchAfspraken voor “Edit Query” (in het linker deel van het scherm (het ViewModel-deel)) te kiezen:

image
Figuur 1: Edit Query Link

Een parameter “DateParameter” toe te voegen:

image 
Figuur 2: Parameter toevoegen aan de query van een scherm

En de data op deze nieuwe parameter te filteren:

image
Figuur 3: Filtermogelijkheden staan niet toe een DateTime veld te filteren op Date

Lastigheidje is hier, dat ik de entiteit Afspraak alleen een veld DatumTijd van het type DateTime heb gegeven. De standaard filtermogelijkheden, geven me wel de mogelijkheid om te filteren op een parameter, maar staan niet toe op de parameter eerst een methode (Zoals DateParameter.Date() ) aan te roepen.

Back to the drawing board dus…

Gelukkig biedt LightSwitch diverse mogelijkheden om dit probleem toch op te lossen.

Ik zou bijvoorbeeld een custom veld “Datum” van het type Date kunnen toevoegen aan de entiteit Afspraak en dit veld de waarde geven van het datum-deel van het “DatumTijd” veld. Vervolgens kan ik een filter toevoegen dat het nieuwe veld “Datum” vergelijkt met mijn DateParameter. Gevolg is dan wel, dat bij het openen van het scherm, alle Afspraken moeten worden opgehaald om het Datum-veld te berekenen en te zien of het voldoet aan mijn filter.

Een andere – en in dit geval betere – oplossing is het om de DateParameter direct in de query te laten controleren. Het scherm Overzicht Afspraken is nu gebaseerd op een query die alle Afspraken retourneert. In plaats daarvan heb ik nu een geparametriseerde query nodig, die de afspraken van 1 dag retourneert. Hiervoor klik ik in de Solution Explorer in het contextmenu van de entiteit Afspraken op “Add Query”:

image
Figuur 4: Nieuwe query toevoegen voor een entiteit

De nieuwe query geef ik een handige naam (“AfsprakenByDate”) en voeg de DateParameter toe, zoals ik dat in het scherm ook al gedaan had. De volgende stap is dat ik zorg dat in de query de DatePArameter daadwerkelijk gecontroleerd wordt.

image
Figuur 5: Een eigen query, met eigen parameters

In het dropdown-lijstje “Write Code” kan ik kiezen voor de methode “<querynaam>_PreProcessQuery”. Als ik dat doe krijg ik de mogelijkheid om de query van het scherm aan te passen, voordat hij wordt uitgevoerd. De DateParameter die ik aan de query had toegevoegd, krijg ik hier als parameter in de methode tot mijn beschikking. In mijn geval voek ik een paar regels code toe om te zorgen dat de controle op het DatumTijd veld correct wordt uitgevoerd:

   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Text;
   5:  using Microsoft.LightSwitch;
   6:  using Microsoft.LightSwitch.Security.Server;
   7:  namespace LightSwitchApplication
   8:  {
   9:      public partial class SterDataService
  10:      {
  11:          partial void AfsprakenByDate_PreprocessQuery(DateTime? DateParameter, ref IQueryable<Afspraak> query)
  12:          {
  13:              var minDate = DateParameter.GetValueOrDefault();
  14:              var maxDate = DateParameter.GetValueOrDefault().AddDays(1).AddSeconds(-1);
  15:              query = from a in query
  16:                      where a.DatumTijd >= minDate && a.DatumTijd <= maxDate
  17:                      select a;
  18:          }
  19:      }
  20:  }

Listing 1:  Code om de query te laten werken met mijn parameter

Nu ik de query gemaakt heb om de Afspraken per dag op te halen, moet ik het overzicht afspraken nog aanpassen om deze query te gaan gebruiken. In de Properties van de Screen Designer kan ik hiervoor de Query Source aanpassen (bij de rode pijl). In de groene elips zie je dat LightSwitch zelf de DateParameter aan het scherm heeft toegevoegd.

image
Figuur 6: Het scherm met de aangepaste query

Overigens zijn alle elementen in het ViewModel deel van de Screen Designer aangepast aan het resultaat van mijn query, maar omdat hieraan verder niets gewijzigd is, zie je dat hier niet terug.

Volgende stap is het toevoegen van een datumveld op het scherm, waar de gebruiker de datum kan selecteren. We voegen dus in de View een control toe, dat via databinding gekoppeld is aan de property DateParameter van de ViewModel. Of liever gezegd, dat laten we LightSwitch doen:

image
Figuur 7: Schermelement toevoegen voor de invoer van een parameter

Ik verplaats het toegevoegde veld vervolgens naar boven, omdat ik het graag bovenin het scherm wil hebben en pas de property “Display Name” aan. Wat nu nog rest, is dit veld bij het openenen van het scherm de datum van vandaag te geven. Hiervoor schrijf ik een paar regels code in de methode InitializeDataWorkspace van het scherm:

image
Figuur 8: Ook bij een scherm kun je eigen code invoegen

Geheel volgens MVVM geef ik dus de property DateParameter van de ViewModel een waarde:

   1:  public partial class SearchAfspraken
   2:  {
   3:      partial void SearchAfspraken_InitializeDataWorkspace(List<IDataService> saveChangesTo)
   4:      {
   5:          // Write your code here.
   6:          AfspraakDateParameter = DateTime.Today;
   7:      }
   8:  }

Listing 2: Parameterveld van een standaardwaarde voorzien

Het resultaat is nu dat er een parameterveld op het scherm staat, dat standaard de datum van dandaag als waarde heeft. De getoonde data is altijd gefilterd op de waarde van die parameter:

image
Figuur 9: Het aangepaste scherm met datumparameterveld.


Posted Sat, May 28 2011 18:45 by Stefan Kamphuis
Filed under:

Comments

SuperSKa Weblog wrote Visual Studio LightSwitch in de praktijk–Deel 5–Een invoerscherm customizen
on Sat, May 28 2011 11:49

Note: since there’s quite a lot of content on Visual Studio LightSwitch available in English on the web