Visual Studio 2005 Rocks!

Dat was de opmerking tijdens de launch van Visual Studio: Visual Studio Rocks! In dit artikel probeer ik te laten zien dat dat inderdaad zo is. Aan de hand van een Dual List Control komt het LabelLayout panel aan de orde, en daarmee laat ik ook iets zien van de nieuwe Edit-And-Continue debug mogelijkheden. Een van de anderen nieuwe mogelijkheden van C# zijn Partial Classes en daar gaat het laatste stuk over.

DualList Control

Je kent een dergelijke control wel: je ziet twee lijstjes, één lijst met beschikbare onderwerpen en een ééjst met gekozen onderwerpen waarbij de lijst met gekozen onderwerpen een subset is van de lijst met beschikbare onderwerpen.

Fig 1: Voorbeeld van een DualListControl

Door te dubbelklikken op een van de items (of op de knoppen met enkele pijlen te klikken) wordt het item verplaatst naar de andere lijst. Logischerwijs wordt dat lijstje verder gebruikt in de applicatie. Bij het publiceren van een artikel op de SDN-website geef je b.v. keywords van het artikel mee, en deze keywords kies je op bovenstaande manier uit een lijst.

Ik ben meer een Google programmeur

Voordat ik zelf iets in elkaar ga Bob-de-Bouwer-en, kijk ik eerst op Google of ik iets kan vinden. Dus begon ik met Google om de code te zoeken van een dergelijke control. Op de site van ReflectionIT (http://www.reflectionIT.nl) vond ik er een.

De bijbehorende demoapplicatie voldeed echter niet helemaal aan mijn wensen. Zo wil ik, als ik mijn scherm vergroot, dat de DualList ook mee vergroot. Het voorbeeld dat ik gevonden had deed dat niet.

Fig 2: Voorbeeld van een scherm vergroten

Daarnaast was het een Visual Studio 2003 project en ik wilde er een voor Visual Studio 2005.

Helaas was er verder niets en dan moet je dus zelf aan de slag. Ik startte een nieuw Project in Visual Studio 2005 voor een UserControl. Dan komt het moment dat je de controls op het scherm gaat plakken. Ik zette twee ListBoxen neer en een paar buttons. Zo moest het scherm er ongeveer uit zien. Vervolgens probeerde ik alle controls te anchoren aan elkaar. En daar ging het voor mij mis. Dat had ik natuurlijk al gezien in de gevonden applicatie. Dat wilde ik dus anders.

Ik vroeg me af, hoe ik zoiets zou doen voor een webapplicatie. Ik zou dan een HTML tabel gebruikt hebben. Binnen alle nieuws snippets over Visual Studio 2005 die zich inmiddels in mijn hoofd genesteld hebben, herinnerde ik me dat er ook nieuwe controls voor layout toegevoegd waren. In de toolbox zag ik dan ook de volgende control:

Fig 3: TableLayoutPanel in ToolBox

Als je deze in de designer van een UserControl zet, dan ziet dat er als volgt uit:

Fig 4: TableLayoutPanel in de Designer

Met de functies “Add Column” en “Add Row” had ik al snel mijn scherm in elkaar gesleept zoals ik dat wilde. Ik wilde 4 buttons: selecteer één item, selecteer alle items, deselecteer één item, deselecteer alle items. De bovenste cel van de kolom met knoppen moet leeg zijn, evenals de onderste. Rechts en links daarvan moeten de selectie lijsten staan.

Drie minuten later ziet het er zo uit.

Fig 5: Contols in de TableLayoutPanel

Mooi he, maar eeuh … die listbox moet zich niets aantrekken van al die rijen natuurlijk. Tja, bij een HTML tabel zou je gebruik maken van rowspan. Je zegt dan tegen de rij, dat hij een regel is, maar verdeeld over zes rijen. Bij het TableLayoutPanel Control geef je dat niet aan bij de rijen, maar geef je dat aan bij de control. Dus in mijn geval, specificeer ik dat de ListBoxen een rowspan hebben van 6 rijen.

Fig 6: ColumnSpan en Rowspan

Daarna kon ik de kolommen en rijen voorzien van de juiste dimensies. Daarvoor is er een hele aardige editor.

Fig 7: Column en Row Styles editor

Overigens heb ik de code van het DualList control van ReflectionIT wel gebruikt. Bij dit artikel hoort ook de code, je bent vrij om deze te gebruiken en aan te passen. Mede dank aan ReflectionIT.

Nu moet ik nog een TestApplicatie hebben. Ik voeg dus een Windows Applicatie project toe.

Fig 8: Solution en Project indeling

Nu moet ik mijn nieuwe DualList Control op het scherm zetten. Per ongeluk klik in bijna automatisch op de Toolbox en wat zie ik?

Fig 9: DualListControl in de ToolBox

Handig! Nu hoef ik niet zelf een reference te maken naar mijn UserControl project. Ook hoef ik niet zelf mijn Control toe te voegen aan de ToolBox. Dit vond ik een erg aardige feature.

De TestApplicatie ziet er dan als volgt uit. De button toont in de twee tekstboxen het aantal elementen aan de linker kant en het aantal elementen aan de rechter kant.

Fig 10: Eindresultaat TestApplicatie

Die TableLayoutPanel is een erg handige control, waar we best plezier van zullen hebben. In ieder geval is de Designer van Visual Studio beter en gemakkelijker geworden. Als je een Control op je tekenvel sleept, dan krijg je hulplijntjes om je nieuwe Control op de juiste afstand tot andere Controls te zetten.

Fig 11: Hulplijntjes voor uitlijnen van Controls

Debug: Edit and Continue

Zoals eerder aangegeven zijn de sources van dit artikel vrijelijk te gebruiken. Als je dat doet, probeer dan ook eens de nieuwe Debug functionaliteit “Edit and Continue”.

Zet bijvoorbeeld een breakpoint in de constructor van Form1. In deze constructor wordt het lijstje van de ListBox met aanwezige items gemaakt. Voer nu de volgende stappen eens uit:

1. step over de declaratie;
2. kijk naar de inhoud van de Object array;
3. verander de inhoud van de Object array;
4. sleep de debug pointer terug naar de declaratie;
5. step over de declaratie;
6. kijk naar de inhoud van de Object array.

Zonder dat je de debugger gestopt hebt, heb je code aangepast.

Eindelijk kunnen we weer programmeren in debugmode!

Fig 12: Debug stappen

Dit voorbeeld betrog het aanpassen van de inhoud van een array. Dit klinkt nog simpel. Maar tik nu eens code in na de declaratie in de trant van:

if ( av != null )

Sleep nu de debug pointer ook eens terug en step dan weer langzaam verder. Inderdaad ook dat werkt.

Dergelijke aanpassingen uitvoeren kan overigens niet altijd. Tijdens mijn testen ben ik een situatie tegengekomen, dat je een foutmelding krijgt als je bepaalde code toevoegt. Heel logisch als je code hebt geschreven die niet compileert.

De productiviteit van de Visual Studio omgeving is met deze handigheidjes duidelijk weer verder verhoogd.

Partial Classes

Een van de vele nieuwigheidjes van .Net 2.0 zijn de Partial Classes. Wat zijn Partial Classes nou eigenlijk? Eigenlijk heel simpel: de definitie van een class kan over meerdere fysieke bestanden verspreid worden. Natuurlijk kunnen de bestandsnamen niet gelijk zijn, maar de class-definitie wel.

public partial class Class1

Java aanhangers zullen nu honend hun neus ophalen. Java biedt deze mogelijkheid al veel langer.

Tijdens het compileren zal de compiler deze partial classes samenvoegen tot één class. Daarbij worden dan ook de eventuele verschillen gelijkgetrokken. Als je iets over meerdere bestanden verspreidt, dan loop je de kans verschillen te laten ontstaan in de declaratie (verschillen in te implementeren interfaces, includes etc). De compiler zal deze kleine foutjes voor jou corrigeren.

Als je in Visual Studio 2005 een Windows Application project start, dan zie je al een voorbeeld van een partial class. Als je in de designer van Form1 zit en je gaat naar de code, dan staan daar de declaraties van de controls e.d. niet meer in. In Visual Studio 2003 stonden deze gewoon in het .cs file in een aparte region van Form1.

In Visual Studio 2005 staat deze code in de Form1.Designer.cs file … en dat is een partial class.

PS: Zie je ook dat mintekentje voor Form1.cs staan?

Fig. 13: Standaard Windows Application

Zo’n partial class klinkt dus wel heel aardig, maar ik kan me er ook verkeerd gebruik van voorstellen. We kunnen nu allemaal hele grote classes maken en deze gewoon verdelen meerdere files. En dat terwijl deze verdeling over verschillende bestanden eigenlijk misschien wel een decompositie over verschillende classes had moeten zijn.

Maar een goed gebruik zou zijn, zoals Microsoft dus zelf ook doet, dat gegenereerde code in principe afgeschermd is. Ik zeg ‘in principe’, want het file en dus de code is wel gewoon te benaderen en te wijzigen.

Maar even terug naar mijn vraag van daarnet: zag je dat mintekentje voor de Form1.cs? Als het nog een plustekentje is en je klikt daar op, dan zie je de bijbehorende partial class. Hoe zit dat nu als ik zelf een partial class maak, krijg ik dan ook automatisch zo’n plusje?

Zie onderstaand plaatje voor een voorbeeld.

Fig. 14: Eigen gemaakte partial classes

Zoals de tekening al toont … helaas.

Ik krijg een beetje het Calimero gevoel: “Waarom zij wel en ik niet?”

Als ik de code van de andere partial class inspecteer, dan zitten daar geen verschillen in ten opzichte van die van mij. Dus ben ik op zoek gegaan.

Met de nieuwe Visual Studio 2005 is er behoorlijk aantal verbeteringen in het user interface van de ontwikkelomgeving gekomen.

• Heel veel ondersteuning van Intellisense; zelfs in de debugger werkt dat eindelijk door
• Allerlei handige short cuts om code bijna automatisch:
  • te formatteren,
  • te refactoren (is bijna een artikel op zichzelf (waard))
  • en dergelijke.

Maar ook de helpondersteuning is enorm verbeterd. Was het voorheen nog zo, dat je alleen kon zoeken in de meegeleverde help file of de eventueel geïnstalleerde MSDN help, nu is dat anders. De hele wereld schiet te hulp bij het zoeken naar de juiste oplossing.

Help -> Search (Ctrl+Alt+F3) zoekt nu ook op verschillende .Net community sites.

Nu hoef je:

• niet meer eerst in de (soms beperkte) help te zoeken,
• te constateren dat er geen example bij zit
• en vervolgens een Internet Explorer te openen om te Googlen.

En zo kwam ik ook aan de oplossing voor het plustekentje van een partial class: via een community search kwam ik op http://www.devx.com/dotnet/Article/22603.

Ook de SDN site zou hier nog bij moeten staan ;-)

Ik word steeds weer afgeleid door de aardige nieuwigheidjes in Visual Studio. Maar nu dan de oplossing voor partial classes en het plus tekentje.

Zo moet het er uiteindelijk uitzien:

Fig 15: het gewenste resultaat

En om dat voor elkaar te krijgen moet je de volgende stappen uitvoeren:

Stap 1:

Alle projectfiles in Visual Studio 2005 zijn nu serieuze XML-documenten met een serieuze XSD. Sterker nog … alle project files zijn MSBuild make files, maar (ook) hierover is een eigen artikel meer op zijn plaats.

Heb je in Visual Studio 2003 wel eens het project file willen editen? Wat was dat toen omslachtig hè? Je moest eerst Visual Studio afsluiten, met notepad het project-file openen, aanpassen en opslaan, en weer Visual Studio openen. Nu hoeft dat niet meer. Je doet rechtermuisklik op het project en selecteert ‘Unload Project’.

Fig. 16: Unload project

Stap 2:

Het project is nu feitelijk in een andere modus gezet: hij behoort nog steeds tot de solution, maar is niet meer actief.

Fig. 17: Unloaded project

Nu weer rechtermuisklik op het project en kiezen voor ‘Edit ’.

Fig. 18: Edit projectfile

In de Visual Studio editor wordt het XML-bestand geopend. Hieronder zie je een deel van dit bestand.

Fig. 19: Gedeelte van het XML-projectfile

Stap 3:

De oplettende lezer heeft de oplossing zojuist al gezien. Om het plustekentje voor een partial class te krijgen moet je aangeven, dat de ene partial class afhankelijk is van een andere. In het geval van Form1 en zijn designer file: Form1.Designer.cs is afhankelijk van Form1.cs. In het geval van mijn voorbeeld: Class1.Generator.cs is afhankelijk van Class1.cs.

Dus als ik het projectfile aanpas zoals hieronder gebeurd is, dan zou ik mijn plustekentje moeten zien.

Fig. 20: Aangepast project file

En natuurlijk … sla de wijzigingen op.

Stap 4:

Het project hadden we geünload, dus moeten we het weer beschikbaar maken voor de solution. Niet door middel van rechtermuisklik, add existing project of iets dergelijks, maar gewoon op het unavailable project rechtermuisklikken en kiezen voor ‘Reload Project’.

Fig. 21: Reload Project

De aangepaste definitie van het project zal dan opnieuw gelezen worden, en het project is meteen weer onderdeel van de solution. En dit alles zonder Visual Studio te verlaten!

Het resultaat is dan zoals we wensten:

Fig. 22: Resultaat

Is het niet geweldig? En dat project files eigenlijk MSBuild files zijn, daar komen we op terug.

Zoals de titel van het artikel al aangeeft Visual Studio 2005 Rocks!

Visual Studio 2005 Rocks!

Sources

De sources die bij dit artikel horen kunt u downloaden via Meijer_VS2005Rocks_SRC.zip.