Visual Studio LightSwitch in de praktijk–Deel 5–Een invoerscherm customizen

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 ben ik begonnen met een serie blogs over dit onderwerp. De eerste post was het inleidende artikel. De volgende artikelen zijn/worden:

Inleiding

Natuurlijk moeten in mijn applicatie ook nieuwe afspraken ingevoerd kunnen worden. Hiervoor voeg ik via de Solution Explorer een nieuw scherm toe, en kies voor het type “New Data Screen”:

image
Figuur 1: Aanmaken van een nieuwe scherm voor afspraken

LightSwitch maakt vervolgens een invoerscherm voor afspraken aan, wat al bijzonder dicht in de buurt komt van wat ik nodig heb. Ik heb voldoende aan de visual tree om te zien wat ik nog moet wijzigen. En dat is niet eens veel:

image
Figuur 2: Invoerscherm voor Afpsraak, zoals LightSwitch dat genereert

Het Id veld is al netjes een niet wijzigbaar veld geworden, een boolean veld is een CheckBox en de Foreign Key relaties hebben een Auto Complete Box gekregen. Het is slechts een kwestie van minuten om dit scherm precies te maken zoals ik het wil hebben:

  1. Id verwijderen
  2. Doorlopende Afspraak verwijderen (die entiteit heeft een andere functie en komt terug in een later artikel)
  3. Het vel “Aanwezig” moet standaard aan komen te staan (aangezien het scherm normaal gebruikt wordt voor registratie wanneer een student onaangekondigd langs komt)
  4. Student moet een popup-scherm worden (want er zijn duizenden studenten in de applicatie)
  5. De volgorde moet voor de gebruiker iets logischer worden

Puntjes 1 en 2 zijn natuurlijk bijzonder eenvoudig: de velden kunnen eenvoudigweg uit de tree worden verwijderd. Ik kan ook de Visible property hiervan uitschakelen, maar ik ga me niet bedenken: ze kunnen weg.

In het vorige artikel heb ik al laten zien hoe een standaardwaarde op een zoekscherm in code te beïnvloeden is. Voor andere schermtypes is dat niet anders. Via Write Code kan ik de methode CreateNewAfspraak_InitializeDataWorkspace aanpassen. Ik heb hier alleen regel 7 toegevoegd:

   1:  public partial class CreateNewAfspraak
   2:  {
   3:      partial void CreateNewAfspraak_InitializeDataWorkspace(List<IDataService> saveChangesTo)
   4:      {
   5:          // Write your code here.
   6:          this.AfspraakProperty = new Afspraak();
   7:          this.AfspraakProperty.IsAanwezig = true;
   8:      }
   9:   
  10:      partial void CreateNewAfspraak_Saved()
  11:      {
  12:          // Write your code here.
  13:          this.Close(false);
  14:          Application.Current.ShowDefaultScreen(this.AfspraakProperty);
  15:      }
  16:  }







.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Listing 1: Eenvoudige code om de standaardwaarde van een veld aan te passen



Punt 4, de Auto Complete box veranderen in een zoekschermpje, lijkt wellicht wat lastiger, maar wederom maakt LightSwitch er een eenvoudige taak van: ik kan het type “Auto Complete Box” veranderen in “Modal Window Picker” en ik ben eigenlijk alweer klaar. LightSwitch maakt dan een zoekscherm op basis van de Summary Property van de Student entiteit, dat kan ik wel aanpassen, maar daaraan heb ik nu geen behoefte.



De volgorde (punt 5) is ook niet zo moeilijk aan te passen, dus kan ik even kijken wat er nu van het scherm geworden is:



image


Figuur 3: Het supersnel gemaakte invoerscherm is behoorlijk goed



Gebruik je dit scherm om een nieuwe afspraak in te voeren, dan opent na het opslaan een standaard gegenereerd detailscherm voor de afspraak. Omdat dat natuurlijk weer net niet precies is wat ik nodig heb, voeg ik ook gelijk een detailscherm voor Afsrpaak toe. Bij het aanmaken geef ik direct aan dat dit het standaardscherm voor Afspraak gaat worden:



image


Firguur 4: Nieuw detailscherm toevoegen als standaardscherm voor een entiteit



Het detailscherm komt er verder nagenoeg hetzelfde uit te zien als het invoerscherm. Het enige dat ik hier graag wil toevoegen, is een indicatie dat de afspraak hoort bij een doorlopende afspraak. Hiervoor klik ik bovenin de Screen Designer op “Add Data Item” en specificeer mijn nieuwe data item. Ik voeg nu dus een element toe aan de ViewModel, het linker deel van de Screen Designer:



image


Figuur 5: Data element toevoegen aan een scherm



Vervolgens kan ik in code een regel toevoegen aan de methode AfspraakDetail_Created, om mijn nieuwe property de juiste waarde te geven:



   1:  partial void AfspraakDetail_Created()
   2:  {
   3:      // Write your code here.
   4:      IsDoorlopendeAfspraak = Afspraak.DoorlopendeAfspraak != null;
   5:  }


Listing 2: Toegevoegde property een waarde geven in code





.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }



Omdat ik het element wel als een checkbox op het scherm wil hebben, maar toch niet wil dat het gewijzigd wordt,



pas ik nog even een simpel trucje toe in de IsDoorlopendeAfspraak_Changed methode:



   1:  partial void IsDoorlopendeAfspraak_Changed()
   2:  {
   3:      // We're just setting it back to it's original value
   4:      if (IsDoorlopendeAfspraak != (Afspraak.DoorlopendeAfspraak != null))
   5:      {
   6:          IsDoorlopendeAfspraak = Afspraak.DoorlopendeAfspraak != null;
   7:      }
   8:  }







.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Listing 3: IsDoorlopendeAfspraak terugzetten als het veld gewijzigd wordt. Poor man’s readonly…

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>