Visual Studio LightSwitch in de praktijk–Deel 7–Een detailscherm uitbreiden met gerelateerde informatie

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

Tot nu toe heb ik in deze serie alleen schermen gebruikt met gegevens van 1 entiteit daarop. Vanzelfsprekend is dat niet het enige soort scherm waarmee ik in mijn applicatie te maken heb en gelukkig heeft het Visual Studio LightSwitch team ook hierin voorzien.

In mijn applicatie wil ik op het detailscherm van een student, zowel zijn Afspraken en DoorlopendeAfspraken laten zien. Ik kies weer voor Add New Screen in het contextmenu van de Solution Explorer. Ik kies voor “Details Screen” en "de Student entiteit. Tevens vink ik nu de vakjes van de gerelateerde informatie aan:

image
Figuur 1: Een detailscherm met gerelateerde informatie maken

Zonder ook maar iets aangepast te hebben, ziet het scherm er nu al zo uit:

image
Figuur 2: Het gegeneerde scherm met gerelateerde gegevens

Zoals met alles in LightSwitch, is het weer heel doorzichtig hoe dit is gedaan, zodat ik ook later nog extra informatie zou kunnen toevoegen aan het scherm, zonder via de wizard een nieuw scherm te maken. (Merk op dat onderstaand screenshot later is gemaakt en er inmiddels meer functionaiteit aan het scherm is toegevoegd):

image
Figuur 3: Het scherm in de screen designer

Allereerst zijn de gegevenssets aan het ViewModel-deel van de designer (links) toegevoegd. Daarnaast is een Tab Layout control aan de Control Tree (midden) toegevoegd. Tenslotte is voor ieder van de gegevenssets een datagrid toegevoegd. De databinding aan het grid werkt vervolgens wee hetzelfde als we eerder hebben gezien bij een zoekscherm.

Middels de knop “Add Data Item” kan handmatig hetzelfde worden bereikt met een al bestaand scherm:

image
Figuur 4: Handmatig een gegevensset aan een scherm toevoegen

Vervolgens kan met (onder andere) de knop ernaast een element aan het scherm worden toegevoegd, dat aan de nieuwe gegevensset gekoppeld kan worden. Zo wordt eenvoudig exact hetzelfde resultaat bereikt als via de wizard. En dat moet ook, anders ben je in de aap gelogeerd als je aan een eerder gemaakte applicatie, functionaiteit wilt toevoegen.

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>