Microsoft Visual Web Developer im Praxiseinsatz
Visuelle Welten

DeveloperIT-ProjekteSoftware

ASP.NET 2.0 heißt die neue Zauberwaffe aus dem Hause Microsoft. Damit es mit der Web-Entwicklung auch klappt, liefert Microsoft mit dem Visual Web Developer eine ausgewachsene IDE mit.

Schwerer Stand für ASP-NET

Microsoft Visual Web Developer im Praxiseinsatz

Technisch war ASP.NET von Anfang an sehr beeindruckend. Funktional dem eigenen Vorgänger ASP meilenweit voraus, konnte es sich in den Augen vieler Kritiker auch gegen die Java-Fraktion und gegen den Platzhirsch PHP behaupten. Nur hat sich dieser gute Ruf nicht in Marktanteilen niedergeschlagen. Die Gründe dafür sind schwer zu analysieren. Sicherlich hat eine Microsoft-Technik im Open-Source-affinen Webbereich keinen leichten Stand.

Dazu kommt, dass ASP.NET ein doch recht komplexes Konzept zu Grunde liegt, das am Anfang von Microsoft nur schwer verständlich vermarktet wurde. Das ominöse .NET stand über allem und sollte sogar der nächsten Windows-Version als Namenszusatz angehängt werden (dem heutigen Windows 2003). Dabei ist das .NET-Framework im engeren Sinne nur eine Klassenbibliothek, die eben auch sehr viele Webfähigkeiten besitzt.

Neben der unklaren Kommunikation ist ASP.NET auch für die Zielgruppe der Webskript-Programmierer nicht ganz so einfach zu handhaben. Am schwersten wiegt hier, dass sich diese Zielgruppe kaum eine teure Entwicklungsumgebung wie Microsoft Visual Studio geleistet hat. Und die übrigen Alternativen wie die ASP.NET-Unterstützung in Dreamweaver waren nicht gerade praxistauglich.

Ein wenig besser wurde die Situation mit dem Erscheinen von ASP.NET Web Matrix. Der Erfolg dieses Freizeitprojekts einiger Microsoft-Entwickler hat wohl mit dazu beigetragen, dass Microsoft für ASP.NET 2.0 einen an Visual Studio angelehnten und hochoffiziellen Editor zur Verfügung stellt.


Kostenlose Tools

Microsoft Visual Web Developer im Praxiseinsatz

Aber der Reihe nach: ASP.NET selbst ist kostenlos, benötigt aber, sieht man vom Open-Source-Projekt Mono ab, einen Windows-Server. Zum Testen reicht dank des in Visual Web Developer integrierten Test-Webservers allerdings auch Windows XP in der Home- oder in der Professional-Variante. Auch für Windows-Hosting und damit für ASP.NET gibt es mittlerweile unter anderem dank einer umfangreichen Kampagne von Microsoft schon sehr viele Provider-Angebote.

Auf der Editor-Seite sah das bis vor kurzem nicht ganz so gut aus. Nun hat Microsoft für ASP.NET 2.0 Visual Web Developer Express Edition vorgestellt (kurz Visual Web Developer oder VWD). Dieses Tool ist Teil der Reihe der Express-Editionen, die als kostenlose oder sehr günstige Tools vor allem bisher noch nicht sehr Microsoft-nahe Zielgruppen sowie Schüler und Studenten ansprechen sollen.

Visual Web Developer ist aktuell kostenlos. Sie können es herunterladen, oder Sie verwenden die komfortable Installations-CD-ROM, die diesem Heft beiliegt. Microsoft hat Visual Web Developer für ein Jahr kostenlos zur Verfügung gestellt.

Diese Zeitspanne läuft für die englischsprachige Version im November 2006 ab, für die deutsche einen Monat später. Allerdings steht noch nicht fest, was anschließend geschehen soll. Denkbar ist, dass Visual Web Developer weiterhin kostenlos verteilt wird, ebenso möglich ist auch ein Obolus in unbekannter Größenordnung ? gerüchteweise ungefähr 50 Euro.

Neben den Entwicklungswerkzeugen gibt es als Express Edition außerdem den SQL Server Express. Das ist eine abgespeckte Variante des Microsoft SQL Servers und damit der Nachfolger der MSDE. Der SQL Server Express soll in der Web-Entwicklung Access-Datenbanken ablösen, denn er erlaubt auch dateibasierte Datenbanken. ASP.NET 2.0 verwendet solche Datenbanken beispielsweise für die neuen Sicherheitslösungen und das Rollenmanagement. Der SQL Server Express ist dauerhaft als kostenlose Alternative gedacht.


Erste Schritte

Microsoft Visual Web Developer im Praxiseinsatz

Die Installation von Visual Web Developer läuft immer gleich ab, ob Sie es nun von der dem Heft beiliegenden CD-ROM oder aus dem Netz installieren. Sollten Sie die Installationsdateien als ISO benötigen, erhalten Sie diese beispielsweise unter www.codezone.de/VisualStudioExpressImageISO.Codezone.

Bevor Sie mit der Installation starten, sollten Sie alle alten Betas und Versionen deinstallieren. Auch Visual Studio 2005 sollte nicht installiert sein. Keine Probleme machen dagegen die Vorgängerversionen und ASP.NET 1.x. Microsoft bietet unter msdn.microsoft.com/vstudio/express/support/uninstall ein Tool zur Deinstallation von alten Versionen an.


Installation

Microsoft Visual Web Developer im Praxiseinsatz

Die Installation selbst läuft komplett menügeführt. Sie haben die Wahl, ob Sie die MSDN-Dokumentation und den SQL Server 2005 Express mitinstallieren möchten. Beides ist im Prinzip zu empfehlen, dann steigt allerdings der Festplattenplatzbedarf auf 1,5 GByte. Beim Zielordner verrät Visual Web Developer schon, dass es sich an sich um einen Teil des großen Visual Studio mit einigen wenigen Einschränkungen handelt: Sie sehen dort ein stolzes Microsoft Visual Studio 8 als Standardordner. Das .NET Framework 2.0 wird automatisch mitinstalliert, ebenso die zwei Standard-Programmiersprachen für Visual Web Developer, C# und Visual Basic.NET.

Zum Schluss werden Sie aufgefordert, sich zu registrieren. Bei der Registrierung können Sie noch einen Fundus an kostenlosen Dreingaben nutzen. Das besonders wertvolle deutschsprachige Tutorial steht allerdings auch ohne Registrierung zur Verfügung (www.codezone.de/MicrosoftVisualWebDeveloper2005Express.Codezone).


Einfache Organisation

Microsoft Visual Web Developer im Praxiseinsatz

In Visual Web Developer sind Webseiten standardmäßig in Websites geordnet. Das erinnert ein wenig an Dreamweaver und andere Web-Editoren. Sie können allerdings auch einzelne ASP.NET-Seiten – so genannte Web Forms – unabhängig von Websites erstellen.

In der Praxis sind die kompletten Websites allerdings deutlich einfacher zu verwalten. Wenn Sie über Datei, Neue Website oder über die Startseite von Visual Web Developer eine neue Website erstellen, haben Sie die Wahl zwischen verschiedenen Varianten. Ein Webdienst ist ein Webservice und das Starter Kit für persönliche Websites liefert eine fertige Website mit Login und Personalisierung. Für den Beginn eines eigenen Projekts erstellen Sie entweder eine Leere Website oder eine ASP.NET-Website. Letztere startet bereits mit einer Hauptseite (Default.aspx). Für das vorliegende Beispiel verwenden Sie eine ASP.NET-Website und nennen den Ordner und damit die Website Navigation.

Als alternativen Speicherort können Sie übrigens auch einen Remote-Server auswählen, zu dem per HTTP oder FTP Kontakt aufgenommen wird. Die FTP-Verbindung hat außerdem auch im Programm selbst Einzug gehalten. Mit dem Menübefehl Website, Website kopieren öffnet sich ein Dialog, in dem Sie einen FTP-Server wählen und Ihre Daten mit ihm synchronisieren können. Der Menüpunkt ist nur sichtbar, wenn gerade eine Website geöffnet ist.

Wenn Sie eine Website erstellt haben, verwalten Sie sie über das Bedienfeld Projektmappen-Explorer. Dort erscheint der Speicherordner mit allen Unterordnern und Dateien. Um neue Webseiten und Ähnliches einzufügen, verwenden Sie am schnellsten das Kontextmenü und klicken mit der rechten Maustaste auf den gewünschten Speicherort.


Für Control-Freaks

Microsoft Visual Web Developer im Praxiseinsatz

Im Prinzip ist die Bedienung von Visual Web Developer ganz einfach. Um eine Webseite zu öffnen, klicken Sie sie im Projektmappen-Explorer doppelt an. Zur Wahl stehen dann zwei Ansichten: Entwurf und Quelle. Die Entwurfsansicht ist ein echter Wysiwyg-Modus und hebt sich damit von vielen Programmier-IDEs für Konkurrenztechniken ab. Über die Toolbox auf der linken Seite ziehen Sie die einzelnen Controls auf die Seite.

Was das Control-Konzept angeht, hat sich gegenüber ASP.NET 1.x nicht viel geändert. HTML-Controls gibt es nach wie vor. Sie entsprechen weitgehend den HTML-Elementen, nur dass sie über ASP.NET programmiertechnisch ansteuerbar sind.

Die Webcontrols gehen einen Schritt weiter und sind meist eine Verbindung aus verschiedenen HTML-Elementen, wodurch auch komplexere Elemente wie ein Kalender realisiert werden können. In ASP.NET 2.0 sind mehr als 50 dieser Webcontrols neu hinzugekommen. Deren Einsatzzweck reicht von der Sicherheit über die Navigation bis zur Datenbankanbindung. Die Sicherheits-Controls spielen beispielsweise mit dem neuen Provider-Modell von ASP.NET zusammen. Sie können über die Konfiguration Sicherheitseinstellungen vornehmen und Rollen einrichten. Im Hintergrund übernehmen Provider die Verbindung zu einer von ASP.NET 2.0 automatisch erzeugten Datenbank ? dazu ist die Express-Edition oder ein ausgewachsener SQL-Server verpflichtend.

All dies erfolgt komplett ohne Programmierung, so dass ein Login-Bereich mit Registrierung und allem Drum und Dran ohne eine Zeile Code entstehen kann. Selbstverständlich ist für ausgefallenere Wünsche dann doch wieder Handarbeit nötig. Eine Übersicht über die Sicherheitscontrols liefert das bei Visual Web Developer mitgelieferte Starter Kit für persönliche Websites.


Flotte Profi-Navigation

Microsoft Visual Web Developer im Praxiseinsatz

Neben der Sicherheit sind die neuen Navigations-Controls besonders beeindruckend. Damit entstehen Menüs, Sitemaps und Breadcrumb-Navigationen. Die Basis für diese Menü-Varianten ist standardmäßig eine XML-Datei mit der Seitenstruktur der Website. Wenn Sie also eines der Controls aus dem Bereich Navigation aus der Toolbox auf die Seite ziehen, finden Sie im Menü Häufige Aufgaben die Option Datenquelle auswählen. Da noch keine Sitemap-Datei vorhanden ist, wählen Sie Neue Datenquelle. Die möglichen Datenquellen sind eine Sitemap und eine beliebige XML-Datei. Wählen Sie hier Sitemap.

Als Nächstes legen Sie die Sitemap-Datei an. Klicken Sie dazu mit der rechten Maustaste auf den obersten Knoten im Projektmappen-Explorer. Wählen Sie dann Neues Element hinzufügen und im folgenden Dialog Siteübersicht. Fügen Sie das Element hinzu. Hier geben Sie nun die ineinander verschachtelten Knoten der Navigation ein. Der Wert des Attributs title ist der Wert, der in der Navigation auftaucht, url ist die Adresse, auf die gelinkt wird:









Wenn Sie die Seite nun testen, erscheint das Menü. Zum Testen verwenden Sie Debuggen, Debuggen starten oder, wenn Sie keine Fehlerüberprüfung durchführen wollen, Debuggen, Starten ohne Debuggen. Wenn alles glatt geht, startet bei beiden Varianten der in Visual Web Developer integrierte Test-Webserver.


Brotkrumen für alle Browser

Microsoft Visual Web Developer im Praxiseinsatz

Auf derselben Basis können Sie eine Breadcrumb-Navigation erzeugen. Das Control dafür heißt SiteMapPath. Das Menu-Control erlaubt per Javascript ein- und ausklappbare Menüs, die – bei Microsoft erstaunlich – browserübergreifend funktionieren. Die Formatierung der Navigations-Controls nehmen Sie im Eigenschafteninspektor vor. Unter Darstellung ändern Sie die Farben, die Bilder für die einzelnen Zustände und die Schriftart. Im Bereich Stile lassen sich für verschiedene Zustände eigene Formatierungen festlegen.

Um Navigations-Controls seitenübergreifend einzusetzen, verwenden Sie die neuen Masterseiten (Masterpages) und definieren dort das Navigations-Control. Es erscheint dann auf allen Seiten, die die Masterseite verwenden.


Datenanbindung

Microsoft Visual Web Developer im Praxiseinsatz

Nach dem Menü soll Ihre Seite noch ein paar Dummy-Daten aus einer Datenbank erhalten. Hierfür kommt der neue SQL Server Express zum Einsatz. Die Datenbankverbindungen verwalten Sie im Datenbank-Explorer.

Hier geht allerdings noch ein wenig mehr als nur das Herstellen der Verbindung – schließlich besitzt der SQL Server Express selbst keine Verwaltungsoberfläche und muss deswegen über Kommandozeile oder mit einer der im Netz verfügbaren Open-Source-Lösungen gepflegt werden. Anders sieht es aus, wenn Sie auf Visual Web Developer setzen. Wenn Sie dort eine neue Datenbankverbindung herstellen und beispielsweise eine MS-SQL-Server-Datenbankdatei (MDF-Datei) oder eine Datenbank wählen, erhalten Sie eine komplette Oberfläche, um neue Tabellen anzulegen, die Felder der Tabellen zu bestimmen und Daten einzutragen. Alle notwendigen Befehle finden sich im Kontextmenü.

Erstellen Sie zum Testen zuerst eine neue Tabelle. Durch einen Doppelklick öffnet sich diese in der Entwurfsansicht, und Sie haben die Möglichkeit, Felder zu definieren. Manches ist hier ein wenig ungewohnt benannt. Um zum Beispiel einen Autoincrement-Wert zu erhalten, wählen Sie einen numerischen Datentyp, zum Beispiel int, und dann unter Identitätsspezifikation in den Spalteneigenschaften den Wert Ja.

Damit Sie ein paar Werte erhalten, ergänzen Sie noch ein zweites Feld mit beliebigen Zeichen (nvarchar). Um die Daten schließlich in die Website einzubinden, gibt es eine sehr einfache Lösung: Sie ziehen beispielsweise die Tabelle aus dem Datenbank-Explorer einfach in der Entwurfsansicht auf eine Seite. Daraufhin produziert ASP.NET automatisch das Control zur Verbindung mit der Datenquelle, das Sqldatasource-Control, und das Control zur Darstellung, das Gridview-Control. Selbstverständlich lassen sich auch beide einzeln einsetzen und per Programmierung miteinander verbinden. Das Drag and Drop aus dem Datenbank-Explorer ist nur die einfachste Variante und kommt im Gegensatz zu ASP.NET Web Matrix komplett ohne Editor-spezifisches Control aus.


Gestaltung anpassen

Microsoft Visual Web Developer im Praxiseinsatz

Das Gridview-Control lässt sich nun noch hübscher gestalten. Über das Menü Häufige Aufgaben können Sie zuerst einmal die Spalten bearbeiten. Dort entfernen Sie beispielsweise die Spalte mit der Autoincrement-ID aus den Datensätzen. Wenn Sie das Feld mit der ID gar nicht auslesen möchten, ändern Sie die Datenquelle mit Datenquelle konfigurieren. Dort wählen Sie zuerst die Datenbankverbindung, dann ändern Sie die SQL-Anweisung.

All dies erfolgt entweder menügeführt oder mit benutzerdefinierten, also selbst zusammengestellten SQL-Anweisungen. Für die Darstellung der Daten gibt es auch mehrere Optionen: Über Paging verteilen Sie Datensätze über mehrere Seiten. Außerdem können Sie sortieren oder die Auswahl von einzelnen Daten zulassen. Bei Letzterem erscheint ein Link, der den jeweiligen Datensatz auswählt. Mit dem ebenfalls neuen Control DetailsView ließe sich dazu noch eine Detailansicht für jeden Datensatz anzeigen.

Unter Autom. Formatierung finden Sie noch einige vorgefertigte Formate für Ihre Daten. Diese Formate verwenden im Prinzip auch nur die verschiedenen Attribute und Zustände für die Webcontrols, die Sie auch von Hand oder mit dem Eigenschafteninspektor vornehmen könnten.

Um das Ganze inklusive Menü noch ein wenig hübscher anzuordnen, verwenden Sie aus dem Register HTML in der Toolbox noch das div-Element und packen in jeweils ein solches Element das Treeview-Control und das Gridview-Control. Im Quellcode können Sie nun die beiden noch mit float ausrichten. Das Menü erhält zu guter Letzt über die automatische Formatierung noch andere Pfeile und eine andere Schrift.


Designdateien

Microsoft Visual Web Developer im Praxiseinsatz

Die automatische Formatierung ist natürlich nicht des Designers Weisheit letzter Schluss. Für umfangreichere Formatierungen müssen Sie sich selbst mit den Attributen der Webcontrols vertraut machen. Zwar ist auch eine Formatierung über CSS-Klassen per Zuweisung über das Attribut CSSClass möglich, aber gerade die einzelnen HTML-Elemente eines Webcontrols lassen sich kaum getrennt mit CSS formatieren.

Um trotzdem seitenunabhängiges, zentrales Design zu erhalten, helfen die neuen Designdateien. Ursprünglich, in der englischsprachigen Version von ASP.NET 2.0, wurden sie auch Themes genannt. Solche Designdateien werden einer oder mehreren Webseiten zugewiesen. In der Designdatei sind für bestimmte Webcontrols die Attribute festgelegt. Diese Angaben für Webcontrols heißen auch Skins. Man unterscheidet dabei zwei Arten von Skins: solche mit einer ID, die nur für Controls gelten, die dieselbe SkinId besitzen und solche ohne ID, die für alle Controls dieser Art gültig sind.

Um in Visual Web Developer eine Designdatei zu erstellen, erzeugen Sie ein neues Element. Dazu steht wie schon gewohnt entweder das Kontextmenü oder das Menü Datei, Neue Datei zur Verfügung. Da Designdateien immer im Ordner App_Themes eingefügt werden müssen, um wirksam zu sein, liefert Visual Web Developer eine Warnmeldung und erzeugt den Ordner.

Leider gibt es in Visual Web Developer für die Designdatei kein Intellisense. Um weniger Tippfehler zu machen, bietet es sich an, ein Webcontrol bereits in der Webseite mit Intellisense und Wysiwyg zu formatieren und sie dann in die Designdatei zu kopieren. Allerdings müssen Sie die ID und alle Attribute entfernen, die nicht themable sind, also nicht für Designdateien erlaubt sind. Ob ein Attribut themable ist, erfahren Sie in der Dokumentation.


Fazit

Microsoft Visual Web Developer im Praxiseinsatz

Mit dem Visual Web Developer Express Edition steht für ASP.NET endlich eine gute Entwicklungsumgebung zur Verfügung, die nicht nur deswegen begeistern kann, weil sie kostenlos ist. Website-Verwaltung, Debugging und Wysiwyg-Ansicht aus einer Hand sind dabei die angenehmsten Funktionen. Insofern haben die unvoreingenommenen Kritiker noch deutlich weniger zu meckern als bei ASP.NET 1.x. Die Frage bleibt allerdings, ob die gute Technik allein ausreichen wird, Microsoft die PHP-, Python- und Ruby-Anhänger in die Arme zu treiben.