Visual Web Developer 2008 Express Edition

Transkript

1 Visual Web Developer 2008 Express Edition I Erste Schritte In diesem Kapitel lernen Sie weshalb Sie mit Visual Web Developer 2008 Express Edition arbeiten sollten was eine IDE ist wie Sie ein neues ASP.NET-Projekt erstellen wie Sie den Explorerbereich, den Editorbereich, die Toolbox, das Eigenschaftenfenster und den Build- und Debugbereich von Visual Web Developer 2008 Express Edition nutzen Haben Sie alle Installationsanleitungen des ersten Kapitels befolgt? In diesem Fall können Sie damit beginnen, eigene Webanwendungen zu programmieren. Das Hilfsmittel, das Sie dazu verwenden werden, ist Visual Web Developer 2008 Express Edition. Diese Software stellt Ihnen alle Hilfsmittel zur Verfügung, die Sie benötigen, um schnell und einfach zur eigenen Webanwendung zu gelangen. Die Betonung liegt dabei auf»schnell und einfach«, denn wenn Sie viel Zeit haben und gerne den umständlichen Weg gehen, müssen Sie nicht mit Visual Web Developer 2008 Express Edition arbeiten. Sie können ebenso gut einen einfachen Texteditor benutzen, was jedoch sehr viel schwieriger und arbeitsintensiver ist, wie das folgende Beispiel zeigt. 3.1 Webanwendungen ohne Visual Web Developer 2008 Express Edition erstellen Wie bereits im zweiten Kapitel erwähnt wurde, ist lediglich das.net Framework erforderlich, damit auf einem Computer Webanwendungen ausgeführt werden können. Visual Web Developer 2008 Express Edition ist hierfür nicht notwendig. Es ist einfach ein Hilfsmittel, das Sie bei der Erstellung von Webanwendungen unterstützt. Der Einsatz dieser Software ist aber nicht zwingend vorgeschrieben. Sie können auch einen gewöhnlichen Texteditor einsetzen, um die Befehle aufzuschreiben, aus denen Ihre Webanwendung bestehen und die der Computer ausführen soll. Warum also Visual Web Developer 2008 Express Edition benutzen? Lassen Sie uns zur Beantwortung dieser Frage eine sehr einfache Webanwendung sowohl mit einem Texteditor als auch mit Visual Web Developer 2008 Express Edition erstellen. Die Webanwendung soll aus einer einzelnen Seite bestehen, die ein Eingabefeld und eine Schaltfläche enthält. Der Benutzer gibt etwas in das Textfeld ein, klickt auf die Schaltfläche und der Inhalt des Textfeldes wird daraufhin noch einmal auf der Seite angezeigt. Dies ist zugegebenermaßen kein sehr anspruchsvolles Programm, doch es 31

2 Visual Web Developer 2008 Express Edition verdeutlicht die Unterschiede zwischen der Arbeit mit einem Editor und der Verwendung von Visual Web Developer 2008 Express Edition. Würden Sie mit einem Editor arbeiten, müssten Sie den in Abbildung 3.1 dargestellten Programmcode eingeben. Abbildung 3.1: Wie lange brauchen Sie, um diesen Programmcode einzugeben? Wenn Sie schnell tippen, brauchen Sie ungefähr fünf Minuten, um diesen Programmcode einzugeben. Danach speichern Sie die Datei als.aspx-seite in einem Webverzeichnis des Webservers (das Veröffentlichen von Webanwendungen wird in Kapitel 13 detailliert beschrieben). Wenn Ihnen keine Tippfehler unterlaufen sind, können Sie die Seite nun mit einem Browser aufrufen, was zu dem in Abbildung 3.2 dargestellten Ergebnis führt. Abbildung 3.2: Nach einer Eingabe und einem Klick auf die Schaltfläche wird die Eingabe über den Bedienelementen ausgegeben. 32

3 3.2 Webanwendungen mit Visual Web Developer 2008 Express Edition erstellen Sie geben etwas in das Textfeld ein, klicken auf die Schaltfläche, und die Eingabe wird über den Bedienelementen ausgegeben. Die reine Erstellung der Webanwendung hat somit ca. fünf Minuten gedauert. Es wäre noch mehr Zeit vergangen, wenn Sie den Programmcode nicht einfach abgetippt hätten. Denn dann hätten Sie darüber nachgedacht, welche Befehle und Tags wann und wo erforderlich gewesen wären. 3.2 Webanwendungen mit Visual Web Developer 2008 Express Edition erstellen Lassen Sie uns nun dieselbe Webanwendung mit Visual Web Developer 2008 Express Edition erstellen. Die folgende Anleitung soll noch nicht erklären, wie Sie mit dieser Software umgehen. Sie soll lediglich zeigen, welcher Geschwindigkeitsvorteil sich ergibt und wie einfach die Erstellung von Webanwendungen mit Visual Web Developer 2008 Express Edition ist. Lassen Sie sich also nicht entmutigen, wenn Sie nicht verstehen, was genau Sie eigentlich im Folgenden tun. Die Bedienung und Funktionalität von Visual Web Developer 2008 Express Edition wird nach diesem Beispiel ausführlich erläutert. 1. Starten Sie Visual Web Developer 2008 Express Edition, indem Sie das Startmenü öffnen und Alle Programme bzw. Programme auswählen. Wählen Sie anschließend Microsoft Visual Web Developer 2008 Express Edition aus. Das Programm wird daraufhin für die erste Verwendung konfiguriert, was ein wenig dauern kann. Danach präsentiert es sich Ihnen wie in Abbildung 3.3 dargestellt. I Erste Schritte Abbildung 3.3: So präsentiert sich Visual Web Developer 2008 Express Edition nach dem Start. 2. Wählen Sie im Menü Datei den Befehl Neue Website. 33

4 Visual Web Developer 2008 Express Edition 3. Klicken Sie im folgenden Dialogfeld auf die Schaltfläche OK, um die Voreinstellung für den Speicherort und den Namen der Website zu übernehmen. Wie Sie jetzt im Fenster von Visual Web Developer 2008 Express Edition sehen können, hat das Programm bereits einen großen Teil des Webanwendungscodes, den Sie zuvor manuell eingegeben haben, automatisch generiert. Der Code ist aber noch nicht vollständig, was Sie nun ändern werden. 4. Klicken Sie unter dem Fensterbereich, in dem der Programmcode angezeigt wird, auf den Registerreiter Entwurf, wie in Abbildung 3.4 dargestellt. Abbildung 3.4: Klicken Sie hier. Visual Web Developer 2008 Express Edition zeigt nun die künftige Benutzeroberfläche der Webanwendung an. Allerdings ist diese noch leer, weil sich darauf weder ein Textfeld noch eine Schaltfläche befindet. Auch das werden Sie ändern. 5. Bewegen Sie den Mauszeiger links im Fenster von Visual Web Developer 2008 Express Edition auf das Symbol der so genannten Toolbox, um diese zu öffnen, wie in Abbildung 3.5 dargestellt. Abbildung 3.5: Bewegen Sie den Mauszeiger an diese Position, um die Toolbox zu öffnen. 6. Doppelklicken Sie in der Toolbox auf TextBox und dann auf Button, wie in Abbildung 3.6 dargestellt. Abbildung 3.6: Doppelklick 1 und Doppelklick 2. Visual Web Developer 2008 Express Edition ordnet daraufhin die ausgewählten Objekte nacheinander auf der Benutzeroberfläche der Webanwendung an. 34

5 3.2 Webanwendungen mit Visual Web Developer 2008 Express Edition erstellen 7. Bewegen Sie nun den Mauszeiger auf die soeben eingefügte Schaltfläche und führen Sie einen Doppelklick aus. Visual Web Developer 2008 Express Edition wechselt wieder zur Codeansicht. 8. Geben Sie die folgende Zeile ein: Response.Write(TextBox1.Text) I Erste Schritte Zeit, Arbeit und Tippfehler Das war alles. Die Webanwendung ist nun fertiggestellt. Drücken Sie die Taste F5, um die Anwendung zu starten. Wenn ein Dialogfeld angezeigt wird, das Sie darüber informiert, dass das Debuggen nicht aktiviert ist, klicken Sie einfach auf OK. Sollte ein weiteres Dialogfeld angezeigt werden, das Sie darüber informiert, dass im Internet Explorer das Skriptdebugging deaktiviert ist, befolgen Sie die im Dialogfeld aufgeführte Anleitung, damit Sie das Ergebnis Ihrer Arbeit betrachten können. Der Skriptdebugger ist eine Komponente, die die in einer Webseite enthaltenen Skripts überprüft und eventuelle Fehler meldet. Nach dem Start wird die Webanwendung im Browser angezeigt. Sie können etwas in das Textfeld eingeben, auf die Schaltfläche klicken und sich das Ergebnis ansehen, wie bereits in Abbildung 3.2 dargestellt. Hierfür mussten Sie nur eine einzige Zeile Programmcode eingeben. Alle anderen Codezeilen hat Visual Web Developer 2008 Express Edition für Sie generiert. Verglichen mit dem zuerst beschriebenen Editorverfahren ist dies eine enorme Arbeits- und Zeitersparnis. Und dabei haben Sie nur eine sehr einfache Webanwendung erstellt. Stellen Sie sich vor, wie viel Arbeit und Zeit Sie sparen, wenn Sie umfangreiche Webanwendungen mit vielen Bedienelementen erstellen müssen und dazu Visual Web Developer 2008 Express Edition anstelle eines Editors verwenden. Doch der geringe Arbeitsaufwand und die Geschwindigkeit, in der Sie Webanwendungen mit Visual Web Developer 2008 Express Edition erstellen können, sind nicht die einzigen Vorteile. Wenn Sie mit dem Editor arbeiten, können Ihnen Tippfehler unterlaufen. Sofern sich diese Tippfehler im Programmcode befinden ein Befehl wurde beispielsweise falsch geschrieben, wird die Webanwendung nicht gestartet und eine Fehlermeldung wird angezeigt. Bei umfangreichen Webanwendungen kann sich die anschließende Suche nach dem Fehler schwieriger gestalten als die sprichwörtliche Suche nach der Nadel im Heuhaufen. Natürlich können Ihnen auch Tippfehler unterlaufen, wenn Sie mit Visual Web Developer 2008 Express Edition arbeiten. Der Unterschied zum Editor besteht jedoch darin, dass Visual Web Developer 2008 Express Edition diese Fehler bemerkt und sofort anzeigt. 1. Um dies zu überprüfen, schließen Sie zunächst das Browserfenster, in dem die Webanwendung angezeigt wird. 2. Wechseln Sie zum Fenster von Visual Web Developer 2008 Express Edition. Dort sollte immer noch die Codezeile angezeigt werden, die Sie zuletzt eingegeben haben. 3. Entfernen Sie in dieser Zeile den Buchstaben»e«des Wortes Write. Ein Listenfeld wird angezeigt. 4. Schließen Sie das Listenfeld mit einem Druck auf die Taste Esc, und wechseln Sie in die nächste Codezeile, indem Sie die Taste Pfeil unten drücken. 35

6 Visual Web Developer 2008 Express Edition Der falsch geschriebene Befehl Response.Writ wird jetzt mit einer geschlängelten Linie unterstrichen dargestellt. Der Fehler wird zusätzlich in der Fehlerliste unterhalb des Codefensters angezeigt, die Sie mit einem Klick auf die Registerkarte Fehlerliste öffnen müssen. Auch wenn Sie den Mauszeiger auf den unterschlängelten Text bewegen, erscheint ein Infokästchen, das Sie über den Fehler informiert. Sie sehen also, dass es bei der Arbeit mit Visual Web Developer 2008 Express Edition sehr schwierig ist, einen Fehler zu übersehen. Abbildung 3.7: Fehler werden unterstrichen und in der Fehlerliste angezeigt. Auch wenn Sie nicht wirklich verstanden haben sollten, was genau Sie in den letzten Minuten eigentlich getan haben, ist doch eines deutlich geworden: Die Arbeit mit Visual Web Developer 2008 Express Edition weist gegenüber dem Einsatz eines einfachen Editors mehrere Vorteile auf. Sie sparen Zeit, Arbeit und noch einmal Zeit, weil Sie nicht endlose Nächte unter einem kalten Neonlicht damit verbringen müssen, im Programmcode nach Tippfehlern zu suchen (auch wenn die echten Freaks dies als Programmiererromantik bezeichnen würden). Nachdem ich Sie nun hoffentlich überzeugen konnte, mit Visual Web Developer 2008 Express Edition zu arbeiten, wenden wir uns der sogenannten IDE dieses Programms zu. 3.3 Die IDE Das, was Sie auf Ihrem Bildschirm sehen, wenn Sie Visual Web Developer 2008 Express Edition starten, ist die sogenannte IDE (Integrated Development Environment, integrierte Entwicklungsumgebung). Damit ist ein Konglomerat aus mehreren Fensterbereichen gemeint, das Sie bei der Entwicklung eigener ASP.NET-Webanwendungen unterstützt. Die verbleibenden Abschnitte dieses Kapitels stellen die IDE vor, so dass Sie mit ihr vertraut werden und für die Entwicklung eigener Anwendungen gerüstet sind. Im nächsten Kapitel werden Sie dann das hier Erlernte umsetzen und mithilfe der IDE eine einfache ASP.NET-Website erstellen. Die IDE ist standardmäßig in die folgenden Bereiche unterteilt, die in den folgenden Abschnitten näher erläutert werden: Editorbereich Toolbox 36

7 3.3 Die IDE Fenster CSS-Eigenschaften Fenster Stile verwalten Explorerbereich Eigenschaftenfenster Build- und Debugbereich Um die einzelnen Bereiche kennen zu lernen, legen Sie zunächst ein neues Projekt an. I Erste Schritte Neues Projekt anlegen Wenn Sie mit Visual Web Developer 2008 Express Edition arbeiten, gibt es verschiedene Standardvorlagen für eigene Projekte: ASP.NET-Website, ASP.NET-Webdienst, WCF-Dienst, Dynamic Data Entities- Website, Dynamic Data-Website und Leere Website. Eine ASP.NET-Website ist eine Website, die ASP.NET-Elemente enthält, also ASP.NET-Webseiten, ASP.NET-Benutzersteuerelemente usw. ASP.NET-Websites werden auch als ASP.NET-Webanwendungen bezeichnet. Ein ASP.NET-Webdienst (der mittlerweile vorwiegend als ASMX-Dienst bezeichnet wird) ist eine (kleine) Anwendung, die von einer Person oder einem Unternehmen im Internet angeboten wird und die von einer anderen Person oder einem anderen Unternehmen in eine eigene Anwendung eingebunden werden kann. Ein Beispiel hierfür ist eine Währungsumrechnung, die von einem Unternehmen als Webdienst angeboten wird und die Umrechnungskurse täglich aktualisiert. Ein anderes Unternehmen, das viele Auslandsgeschäfte tätigt, könnte diesen Webdienst in das eigene Fakturierungsprogramm einbinden, um immer mit den aktuellen Kursen zu arbeiten. Ein WCF-Dienst bietet dieselben Möglichkeiten wie der zuvor beschriebene ASMX-Dienst. Zusätzlich bündelt er jedoch die Funktionalität von Technologien, die früher verwendet wurden, um Daten zwischen einem Client und Windows-Server auszutauschen (.NET Remoting), eine bestimmte Form der Kommunikation zu ermöglichen (die so genannte transaktive Kommunikation) und mit Warteschlangen zu arbeiten. Eine Dynamic Data- bzw. Dynamic Data Entities-Website ermöglicht es Ihnen, innerhalb kurzer Zeit eine datengesteuerte Website zu erstellen, die mit der neuen LINQ-Sprache zur Abfrage von Datenbanken arbeitet. Die dazu notwendigen Webseiten werden Ihnen von den entsprechenden Vorlagen vorgegeben. Die leere Website enthält noch keine Ordner und Dateien. Sie verwenden diese Projektart, um eine Website von Grund auf neu zu erstellen. Um ein neues Projekt zu erstellen, gehen Sie wie folgt vor: 1. Wenn Sie bereits ein Projekt geöffnet haben, schließen Sie dieses zunächst, indem Sie im Menü Datei den Befehl Projekt schließen auswählen. 2. Wählen Sie anschließend im selben Menü den Befehl Neue Website. Daraufhin wird das in Abbildung 3.8 dargestellte Dialogfeld geöffnet, in dem Sie die gewünschte Projektart auswählen und den Projektnamen vergeben. 37

8 Visual Web Developer 2008 Express Edition Abbildung 3.8: Dieses Dialogfeld hilft Ihnen, ein neues Projekt (eine neue ASP.NET-Website) zu erstellen. 3. Zur Erläuterung der Benutzeroberfläche von Visual Web Developer 2008 Express Edition verwenden wir eine ASP.NET-Website. Achten Sie deshalb darauf, dass diese Projektart im Listenfeld unter Vorlagen ausgewählt ist. Neben Speicherort geben Sie an, wo die neue Website erstellt werden soll: lokal auf Ihrem Computer bzw. in einem Netzwerkverzeichnis (Dateisystem) oder an einem Ort, den Sie über eine HTTPoder FTP-Verbindung erreichen. Tipp: Websites nicht direkt auf dem Webserver erstellen Wenn Sie HTTP oder FTP auswählen, können Sie die neue Website direkt auf einem Webserver erstellen. Sie nutzen diese Option in der Regel, wenn Sie einen Webserver oder Webspace auf einem Webserver gemietet haben. In diesem Fall steht der Webservercomputer in den Räumlichkeiten des jeweiligen Webhosters beziehungsweise Providers (das Unternehmen, das den Webserver oder Webspace zur Verfügung stellt), so dass Sie nur über das Internet (über eine HTTP- oder FTP-Verbindung) auf den Computer zugreifen können. Beachten Sie jedoch, dass die meisten Entwickler die Website zunächst lokal erstellen und erst dann veröffentlichen, wenn sie fertiggestellt ist und ausgiebig getestet wurde. Der Grund hierfür besteht darin, dass eine Website in der Entwicklung oft noch Sicherheitslücken aufweist. Und wenn sie sich bereits auf einem Webserver befindet und für die Öffentlichkeit zugänglich ist, werden diese Sicherheitslücken gerne von kriminell motivierten Benutzern genutzt, um eigenen Skriptcode einzuschleusen (Softlink vwd0301). Außerdem ist es einfacher, Sicherheitskopien von einer Website zu erstellen, wenn sich diese lokal auf dem eigenen Computer befindet. Und zu guter Letzt sieht ein fertiggestelltes Haus immer schöner aus als die Baustelle, an der man wochenlang vorbeiging. 38

9 3.3 Die IDE 4. Übernehmen Sie also zunächst im Listenfeld neben Speicherort die Voreinstellung Dateisystem. 5. Geben Sie im Textfeld daneben den Pfad zu dem Ordner ein, in dem die Website erstellt werden soll, oder klicken Sie auf Durchsuchen, um diesen Pfad mit Hilfe eines Standarddialogfelds auszuwählen. Geben Sie am Ende des Pfades einen Namen für die neue Website ein. Lautet der Pfad beispielsweise C:\MeineWebsites und soll der Name der Website MeineErsteSite sein, muss der vollständige Pfad C:\MeineWebsites\MeineErsteSite lauten. 6. Lassen Sie auch die Voreinstellung Visual Basic im Feld neben Sprache unverändert. Dies ist die Programmiersprache, mit der wir in diesem Buch arbeiten. Microsoft bietet zur Programmierung des.net Frameworks noch eine zweite Sprache an: Visual C#. In der Entwicklergemeinde herrscht Uneinigkeit darüber, welches die bessere Sprache sei. Die meisten Entwickler sind jedoch der Meinung, dass sich für Anfänger Visual Basic.NET besonders eignet. Dies und der Umstand, dass es für Webanwendungen keine Rolle spielt, welche Sprache Sie benutzen, haben mich dazu bewogen, auf Visual Basic.NET zurückzugreifen. 7. Klicken Sie auf OK, um die neue ASP.NET-Website erstellen zu lassen. Sobald Visual Web Developer 2008 Express Edition alle erforderlichen Ordner und Dateien für die neue Website generiert hat, präsentiert sich die IDE wie in Abbildung 3.9 dargestellt. I Erste Schritte Abbildung 3.9: Die IDE von Visual Web Developer 2008 Express Edition, nachdem eine neue Website angelegt wurde. 39

10 Visual Web Developer 2008 Express Edition Ganz links befindet sich ein Auswahlbereich, über den die sogenannte Toolbox und die Fenster CSS- Eigenschaften und Stile verwalten geöffnet werden können, daneben der Editorbereich, darunter der Build- und Debugbereich und ganz rechts der Explorerbereich und das Eigenschaftenfenster. All diese Bereiche werden nachfolgend ausführlich beschrieben. 3.4 Der Explorerbereich Rechts oben im Fenster von Visual Web Developer 2008 Express Edition befindet sich ein Fensterbereich mit einer sogenannten Registerkartengruppe. Sie erkennen dies an den Registerreitern, die im Gegensatz zu den Reitern echter Registerkarten unten an den»karten«angebracht und mit Projektmappen-Explorer und Datenbank-Explorer bezeichnet sind. Diese Bezeichnungen werden jedoch in der Regel nicht vollständig angezeigt, weil der Fensterbereich hierfür zu schmal ist. Um eine Registerkarte zu öffnen, klicken Sie auf den entsprechenden Registerreiter. Der Projektmappen-Explorer Der Projektmappen-Explorer hilft Ihnen, durch ein Projekt zu navigieren, das Sie mit Visual Web Developer 2008 Express Edition geöffnet haben. In unserem Fall ist dies die soeben erzeugte neue Website. Jedes Projekt besteht in der Regel aus mehreren Dateien und Ordnern. Eine ASP.NET-Webanwendung besteht beispielsweise oft aus mehreren ASP.NET-Seiten (Dateiendung.aspx), sogenannten Benutzersteuerelementen (Dateiendung.ascx), Bildern, Sounddateien und anderen Ressourcen. Der Projektmappen-Explorer stellt all diese Elemente in hierarchischer Form dar, so dass Sie nicht den Überblick über Ihr Projekt verlieren. Die oberste Hierarchiestufe bildet das Stammverzeichnis der Website, die im Projektmappen-Explorer durch den Pfad repräsentiert wird, der zu diesem Verzeichnis führt. Aufgrund des begrenzten Raums wird dieser Pfad jedoch nicht vollständig angezeigt. Auf der Stufe darunter sind alle Ordner und Dateien aufgeführt, die sich in diesem Verzeichnis befinden und aus denen die Website somit besteht. Visual Web Developer 2008 Express Edition hat beispielsweise für unsere neue Website automatisch einen Ordner namens App_Data und drei Dateien namens Default.aspx, Default.aspx.vb und web.config generiert. Wenn Sie nun verzweifelt nach der Datei Default.aspx.vb suchen und diese nicht finden, liegt das an dem Knoten (das Pluszeichen) vor Default.aspx. Klicken Sie einmal auf diesen Knoten, um die Ansicht der Hierarchiestufe zu öffnen, die Default.aspx untergeordnet ist. Sie sollten die gesuchte Datei nun sehen können, wie in Abbildung 3.10 dargestellt. 40

11 3.4 Der Explorerbereich I Erste Schritte Abbildung 3.10: Der Projektmappen-Explorer zeigt alle Dateien eines Projekts an. Start- und Code-Behind-Dateien Default.aspx bzw. index.aspx ist die Startdatei einer ASP.NET-Website, so wie default.html bzw. index.html die Startseite einer gewöhnlichen Website ist. Wenn also die URL zur Startdatei einer ASP.NET-Webanwendung lautet, muss der Besucher nur eingeben. Die Startseite wird dann automatisch ausgeführt. Default.aspx.vb ist eine sogenannte Code-Behind-Datei, die der Datei Default.aspx zugeordnet ist. Dies bedeutet, dass Default.aspx.vb den ASP.NET-Programmcode für die Datei Default.aspx enthält, also die Befehle, die der Webservercomputer ausführen soll. Dieser Code könnte auch direkt in Default.aspx vermerkt werden, wodurch jedoch die Übersichtlichkeit verloren ginge, weil die Datei dann sowohl HTML-Tags als auch ASP.NET-Programmcode enthalten würde. Das vb am Ende des Dateinamens deutet darauf hin, dass der in der Code-Behind-Datei vorliegende Programmcode in der Programmiersprache Visual Basic.NET verfasst ist. Sie fragen sich nun möglicherweise, weshalb Visual Web Developer 2008 Express Edition bereits die Startseite und die dazugehörige Code-Behind-Datei generiert hat. Schließlich möchten Sie selbst das Erscheinungsbild der Startseite festlegen und den ASP.NET-Programmcode schreiben, der ausgeführt werden soll, wenn ein Besucher die Startseite aufruft und damit arbeitet. Doch keine Angst. Visual Web Developer 2008 Express Edition hat lediglich das Grundgerüst generiert, das für jede leere ASP.NET- Seite und Code-Behind-Datei benötigt wird. Im Editorbereich sehen Sie beispielsweise den Inhalt der Datei Default.aspx: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" > <head runat="server"> <title>unbenannte Seite</title> </head> <body> <form id="form1" runat="server"> <div> 41

12 Visual Web Developer 2008 Express Edition </div> </form> </body> </html> Wenn Sie bereits HTML-Seiten erstellt haben, erkennen Sie, dass dies von der ersten Zeile einmal abgesehen eine leere HTML-Seite ist. Es gibt ein html-tag, ein body-tag, ein form-tag und ein div-tag. Texte, Bilder und HTML-Elemente, wie zum Beispiel Listenfelder oder Schaltflächen, sind noch nicht in der Seite enthalten. Den Beweis, dass es sich hierbei um eine leere Seite handelt, erhalten Sie auch, wenn Sie unten im Editorbereich auf den Registerreiter Entwurf klicken. Dann wird die Seite so angezeigt, wie sie sich einem Benutzer präsentieren würde. Klicken Sie, nachdem Sie die leere Seite betrachtet haben, wieder auf den Registerreiter Quelle, um zur Anzeige des Quellcodes zurückzukehren. Um den Quellcode der Code-Behind-Datei anzeigen zu lassen, führen Sie im Projektmappen-Explorer einen Doppelklick auf Default.aspx.vb aus: Partial Class _Default Inherits System.Web.UI.Page End Class Dies ist ebenfalls nur ein Grundgerüst einer leeren Code-Behind-Datei, das Sie mit dem ASP.NET-Code vervollständigen können, der vom Webservercomputer für die ASP.NET-Webseite Default.aspx ausgeführt werden soll. Sie haben bereits in diesem Kapitel im Abschnitt 3.2,»Webanwendungen mit Visual Web Developer 2008 Express Edition erstellen«code in eine Code-Behind-Datei eingefügt und werden auch in den folgenden Kapiteln noch öfter mit solchen Dateien arbeiten. Was genau die zuvor ausgeführten Codezeilen bedeuten, erfahren Sie in Kapitel 5. Die Datei web.config Wenn Sie mit Visual Web Developer 2008 Express Edition eine neue ASP.NET-Website erstellen, wird automatisch eine XML-Datei namens web.config generiert und im Stammverzeichnis der Site abgelegt. Diese Datei enthält verschiedene Konfigurationseinstellungen zur Webanwendung. Sie vermerken hier beispielsweise, welche Benutzer auf die Webanwendung zugreifen dürfen. Eine ausführliche Erläuterung der Datei web.config finden Sie in Kapitel 11. Der Ordner App_Data Der Ordner App_Data wird ebenfalls automatisch von Visual Web Developer 2008 Express Edition generiert, wenn Sie eine neue ASP.NET-Website anlegen. Er nimmt später alle Anwendungsdaten auf, die Sie für die Site benötigen, wie zum Beispiel Datenbanken und XML-Dateien. Aufgaben des Projektmappen-Explorers Der Projektmappen-Explorer dient jedoch nicht nur der übersichtlichen Darstellung der Ordner und Dateien, aus denen das Projekt besteht. Sie können ihn ebenfalls verwenden, um dem Projekt neue Ordner und Dateien hinzuzufügen und diese umzubenennen oder zu löschen. Sie werden in den folgenden Kapiteln häufiger mit diesem Explorer arbeiten. 42

13 Der Datenbank-Explorer 3.4 Der Explorerbereich Den Datenbank-Explorer benötigen Sie, wenn Sie in Ihrem Projekt auf eine Datenbank zugreifen. Ein Beispiel hierfür wurde schon oft zitiert: eine Online-Shop-Webanwendung, deren Produktdaten (z. B. Artikelname, Beschreibung und Preis) in einer Datenbank gespeichert sind. Der Datenbank-Explorer listet alle Datenbankverbindungen auf, die zur Verfügung stehen. Er ermöglicht es Ihnen außerdem, jede dort aufgeführte Datenbank einzusehen, so dass Sie einen Überblick über die jeweiligen Datenstrukturen und die Daten selbst erhalten. Und Sie können die Struktur und die Daten nachträglich bearbeiten. Abbildung 3.11 zeigt den Datenbank-Explorer mit zwei Datenverbindungen (Verbindungen zu Datenbanken, auf die das aktuelle Projekt zugreifen kann). I Erste Schritte Abbildung 3.11: Der Datenbank-Explorer mit zwei Datenverbindungen. Auch der Datenbank-Explorer ist aus Gründen der Übersichtlichkeit hierarchisch aufgebaut. Wenn Sie den Knoten vor einer Datenverbindung öffnen (in der Abbildung sind dies die Datenverbindungen ASPNETDB.MDF und tibonote.northwind.dbo), werden auf der Hierarchiestufe darunter alle Kategorien für die Elemente angezeigt, aus denen die jeweilige Datenquelle bestehen kann. Eine Datenbank kann beispielsweise Datenbankdiagramme, Tabellen, Ansichten, gespeicherte Prozeduren usw. enthalten. Sie können dann den Knoten vor einer Kategorie öffnen, um zu überprüfen, ob die Datenbank über Elemente dieses Typs verfügt. Mit dem Datenbank-Explorer können Sie einer Datenquelle neue Elemente hinzufügen oder bereits bestehende Elemente einsehen bzw. ändern. In Kapitel 10 arbeiten Sie mit diesem Explorer, um eine Datenbank mit den für das Projekt benötigten Strukturen und Daten zu füllen. Die Symbole des Explorerbereichs Der Explorerbereich verfügt wie viele andere Fensterbereiche auch über eine Symbolleiste, über die Sie einige wichtige Funktionen initiieren. Diese Symbole sind in der folgenden Tabelle erläutert. 43

14 Visual Web Developer 2008 Express Edition Tabelle 3.1: Die Symbole des Explorerbereichs Symbol Name Explorer Beschreibung Eigenschaften Projektmappen-Explorer Wechselt zum Eigenschaftenfenster und zeigt dort die Eigenschaften des Objekts an, das im Projektmappen-Explorer ausgewählt wurde. Das Eigenschaftenfenster ist später in diesem Kapitel im Abschnitt»Das Fenster CSS-Eigenschaften«beschrieben. Aktualisieren Projektmappen- und Datenbank-Explorer Aktualisiert im Projektmappen-Explorer den Status der Ordner und Dateien. Diese Schaltfläche wird dort nur benötigt, wenn mehrere Entwickler an einem Projekt arbeiten. Nach einem Klick darauf wird im Projektmappen-Explorer mit Hilfe eines speziellen Symbols angezeigt, ob eine Datei gerade von einem anderen Entwickler bearbeitet wird. Im Datenbank-Explorer klicken Sie auf dieses Symbol, um die ausgewählte Datenverbindung aktualisieren zu lassen. Dies ist notwendig, wenn Sie die jeweilige Datenquelle mit einem anderen Programm als Visual Web Developer 2008 Express Edition bearbeitet und verändert haben. Verknüpfte Dateien schachteln Code anzeigen Ansicht-Designer Website kopieren ASP.NET- Konfiguration Projektmappen-Explorer Mit dieser Schaltfläche geben Sie an, auf welcher Hierarchiestufe Code-Behind-Dateien im Projektmappen-Explorer angezeigt werden sollen. Code- Behind-Dateien können auf derselben Hierarchiestufe wie die mit ihnen verknüpften Dateien oder eine Stufe darunter angezeigt werden (siehe Abschnitt»Start- und Code-Behind-Dateien«). Projektmappen-Explorer Öffnet den Quellcode der im Projektmappen- Explorer ausgewählten Datei (zum Beispiel eine ASP.NET-Webseite) zur Bearbeitung im Editorbereich. Der Editorbereich wird später in diesem Kapitel im Abschnitt»3.5 Der Editorbereich«beschrieben. Projektmappen-Explorer Öffnet die im Projektmappen-Explorer ausgewählte Datei (zum Beispiel eine ASP.NET-Webseite) zur Bearbeitung im Entwurfsmodus des Editorbereichs. Dort wird sie so angezeigt, wie sie sich den Besuchern später präsentiert. Der Editorbereich wird später in diesem Kapitel im Abschnitt 3.5,»Der Editorbereich«beschrieben. Projektmappen-Explorer Öffnet das Fenster Web kopieren, mit dessen Hilfe ein vollständiges Webprojekt vom Entwicklungsrechner auf einen Webserver kopiert werden kann. Ausführliche Informationen hierzu erhalten Sie in Kapitel 13. Projektmappen-Explorer Startet das Websiteverwaltungs-Tool von ASP.NET. Weitere Informationen zu diesem Tool finden Sie in Kapitel

15 3.5 Der Editorbereich Tabelle 3.1: Die Symbole des Explorerbereichs (Fortsetzung) Symbol Name Explorer Beschreibung Aktualisieren Datenbank-Explorer Hält die zuvor initiierte Aktualisierung einer Datenverbindung anhalten an. Mit Datenbank verbinden Datenbank-Explorer Stellt eine neue Verbindung zu einer Datenquelle her. Weitere Informationen hierzu finden Sie in Kapitel 10. I Erste Schritte 3.5 Der Editorbereich Im Fenster von Visual Web Developer 2008 Express Edition beansprucht der Editorbereich den meisten Platz. Er befindet sich in der Mitte über dem Build- und Debugbereich (siehe Abschnitt 3.8,»Der Buildund Debugbereich«) und dient der Bearbeitung von Projektdateien. Nach dem Start von Visual Web Developer 2008 Express Edition wird dort jedoch zunächst eine ähnliche Startseite wie in Abbildung 3.12 angezeigt. Abbildung 3.12: Die Startseite im Editorbereich. 45

16 Die Startseite Visual Web Developer 2008 Express Edition Die Startseite selbst ist in vier Bereiche unterteilt: Wenn Sie bereits Projekte mit Visual Web Developer 2008 Express Edition bearbeitet haben, sind die zuletzt bearbeiteten Projekte im Bereich Zuletzt geöffnete Projekte aufgeführt. Wenn Sie eines dieser Projekte öffnen möchten, klicken Sie einfach auf den entsprechenden Namen. Ist das Projekt, das Sie öffnen möchten, nicht in der Liste aufgeführt, klicken Sie unterhalb der Liste neben Öffnen auf den Link Website. Und schließlich können Sie auch eine neue Webseite erstellen, indem Sie neben Erstellen auf Website klicken. Im Bereich Erste Schritte sind Links zu Anleitungen zur Erstellung von Websites und Webdiensten aufgeführt. Sie haben hier außerdem die Möglichkeit verschiedene Ressourcen zum Thema Visual Web Developer 2008 Express Edition einzusehen. Im Bereich MSDN Online Deutschland finden Sie eine Liste mit aktuellen Online-Themen, die sich auf die Entwicklung mit Microsoft-Produkten beziehen. Diese Liste wird regelmäßig aktualisiert. Wenn Sie ein Thema interessiert, klicken Sie einfach auf die entsprechende Überschrift. Wenn Sie in der Startseite nach unten blättern, wird der vierte Bereich angezeigt, der den Namen Visual Web Developer-Schlagzeilen trägt. Sie finden dort wichtige Visual Web Developer-Links, die beispielsweise zu aktuellen Updates und Service Packs führen. Dateien bearbeiten Die wichtigste Aufgabe des Editorbereichs besteht darin, Ihnen die Bearbeitung der Dateien zu ermöglichen, aus denen Ihr Projekt besteht. Denn darum geht es schließlich, wenn Sie mit Visual Web Developer 2008 Express Edition arbeiten. Sie möchten das Erscheinungsbild Ihrer ASP.NET-Webseiten festlegen und den Programmcode schreiben, der ausgeführt werden soll, wenn ein Benutzer mit diesen Seiten arbeitet. Doch der Editorbereich ist nicht ausschließlich auf die Bearbeitung von ASP.NET-Webseiten beschränkt. Sie können hier auch jede andere Datei bearbeiten, die Sie für Ihr Projekt benötigen. Wenn Sie im Projektmappen-Explorer eine Datei mit einem Doppelklick zur Bearbeitung auswählen, erkennt der Editorbereich automatisch, um welchen Dateityp es sich handelt. Er aktiviert dann das jeweils erforderliche Bearbeitungswerkzeug, mit dem Sie die ausgewählte Datei bearbeiten können. Code-Editor und Ansicht-Designer Die beiden wohl wichtigsten Editoren sind der Code-Editor und der Ansicht-Designer. Sie dienen der Bearbeitung von ASP.NET-Webseiten, ASP.NET-Benutzersteuerelementen (siehe Kapitel 10) und ASP.NET-Code. Wenn Sie im Projektmappen-Explorer beispielsweise einen Doppelklick auf einer ASP.NET-Webseite ausführen (z. B. Default.aspx), wird diese im Editorbereich zur Bearbeitung geöffnet. Hierfür wird standardmäßig zunächst der Code-Editor verwendet, mit dem Sie den Quellcode der Seite bearbeiten können. Um zum Ansicht-Designer zu wechseln, klicken Sie unten im Editorbereich auf den Registerreiter Entwurf. Der Ansicht-Designer zeigt die Webseite so an, wie sie sich später dem Besucher präsentiert. Sie können in diesem sogenannten Entwurfsmodus Objekte aus der Toolbox (siehe Abschnitt»3.6 Toolbox 46

17 3.5 Der Editorbereich und Stilefenster«) auf die Benutzeroberfläche der Webseite ziehen oder die Menüleiste von Visual Web Developer 2008 Express Edition benutzen, um Tabellen einzufügen und das Erscheinungsbild der Seitenelemente festzulegen. Sie können außerdem die Positionen und Größen der eingefügten Objekte mit Hilfe der Maus verändern. Der Ansicht-Designer ist somit mit einem Webdesigner wie Expression Web oder Dreamweaver vergleichbar (obwohl er nicht den Funktionsumfang dieser Produkte bietet). Er dient der visuellen Bearbeitung von ASP.NET-Webseiten und ASP.NET-Benutzersteuerelementen. Wenn eine Seite im Entwurfsmodus angezeigt wird und Sie zur Quellcodebearbeitung zurückkehren möchten, klicken Sie unten im Editorbereich auf den Registerreiter Quelle. I Erste Schritte Registerkarten Jede zur Bearbeitung geöffnete Datei wird im Editorbereich auf einer eigenen Registerkarte angezeigt. Die Registerreiter sind oben auf den Karten angeordnet und zeigen die Namen der jeweiligen Dateien an, wie in Abbildung 3.13 dargestellt. Abbildung 3.13: In diesem Editorbereich sind die beiden Dateien Default.aspx.vb und Default.aspx zur Bearbeitung geöffnet. Eine weitere Registerkarte zeigt die Startseite an. Der in der Abbildung gezeigte Editorbereich enthält drei Registerkarten. Auf der ersten Registerkarte ist die Datei Default.aspx.vb zur Bearbeitung geöffnet, während sich auf der zweiten Registerkarte die Datei Default.aspx befindet. Die dritte Registerkarte zeigt die Startseite an. Um eine Registerkarte in den Vordergrund zu holen, klicken Sie auf den entsprechenden Reiter. Der im Reiter angezeigte Name wird daraufhin in Fettschrift angezeigt. In der Abbildung befindet sich somit die Registerkarte mit der Datei Default.aspx im Vordergrund. 47

18 Visual Web Developer 2008 Express Edition Um eine Registerkarte zu schließen, klicken Sie auf das kleine Kreuz in der rechten oberen Ecke des Editorbereichs. Beachten Sie, dass Sie mit diesem Klick nur die Bearbeitung der Datei beenden. Die Datei selbst wird dadurch nicht aus dem Projekt gelöscht. 3.6 Toolbox und Stilefenster Ganz links im Fenster von Visual Web Developer 2008 Express Edition befindet sich eine vertikale Registerreiterleiste mit drei Registerreitern namens Toolbox, CSS-Eigenschaften und Stile verwalten. Um eine der damit verbundenen Registerkarten zu öffnen, bewegen Sie einfach den Mauszeiger auf den jeweiligen Registerreiter. Die folgenden Abschnitte erläutern, welchen Zweck diese Registerkarten erfüllen. Die Toolbox Ganz links im Fenster von Visual Web Developer 2008 Express Edition befindet sich die Toolbox. Wenn Sie ein neues Projekt erstellen oder ein bereits vorhandenes Projekt öffnen, enthält die Toolbox die Symbole der so genannten Steuerelemente. Dabei handelt es sich um die bereits im zweiten Kapitel im Abschnitt»Die Klassenbibliothek«erwähnten vorgefertigten Objekte, wie zum Beispiel Eingabefelder und Schaltflächen, die Sie für Ihre eigenen Webanwendungen benutzen dürfen. Wenn Sie in diesem Kapitel die Anleitung im Abschnitt 3.2,»Webanwendungen mit Visual Web Developer 2008 Express Edition erstellen«befolgt haben (Schritt 6), haben Sie bereits mit der Toolbox gearbeitet, um ein Textfeld und eine Schaltfläche auf der Benutzeroberfläche der dort beschriebenen Webanwendung anzuordnen. Wichtig: Verschiedene Arten von Steuerelementen Beachten Sie bitte, dass es zwei verschiedene Arten von Steuerelementen gibt: ASP.NET- Steuerelemente und HTML-Steuerelemente. Der Unterschied zwischen diesen beiden Steuerelementarten besteht darin, dass Sie einem HTML-Steuerelement keinen ASP.NET-Code zuordnen können. Fügen Sie beispielsweise eine HTML-Schaltfläche auf einer ASP.NET-Webseite ein, können Sie nicht mit Hilfe von ASP.NET-Code angeben, was geschehen soll, wenn der Besucher später auf diese Schaltfläche klickt. Dies ist nur mit JavaScript-Code möglich, der im Gegensatz zu ASP.NET-Code nicht auf dem Webserver, sondern clientseitig (auf dem Computer des Besuchers) ausgeführt wird. HTML-Steuerelemente verwenden Sie somit nur dann, wenn Sie mit JavaScript-Code arbeiten möchten. Hierfür kann es verschiedene Gründe geben. Ein Grund ist beispielsweise die Geschwindigkeit. JavaScript-Code ist in die jeweilige HTML-Seite eingebettet und wird somit zusammen mit der Seite zum Browser des Besuchers übertragen. Er wird direkt auf dem Computer des Besuchers ausgeführt. Es gibt deshalb nicht wie beim ASP.NET-Code einer ASP.NET- Webseite einen Umweg über den Webserver, der den Code erst ausführen und das Ergebnis der Ausführung in Form von HTML an den Browser des Besuchers zurücksenden muss. 48

19 3.6 Toolbox und Stilefenster Aus diesem Grund wird JavaScript oft für grafische Operationen verwendet, wie zum Beispiel die Realisierung eines Anzeigenwechslers, der wie bei einer Diashow Bilder nacheinander auf der Webseite anzeigt. Ein weiteres Beispiel ist die Überprüfung der Gültigkeit von Benutzereingaben. Dabei geht es um die Beantwortung der Frage, ob der Besucher die Daten eingegeben hat, die erwartet wurden (z. B. eine Zahl, wenn nach dem Alter gefragt wird, ein Datum, wenn nach dem gewünschten Liefertermin gefragt wurde usw.) Eine solche Überprüfung ist zwar auch mit ASP.NET-Code möglich, aber selbst das.net Framework wandelt diesen Code in den entsprechenden JavaScript-Code um. Für andere Aufgaben ist ASP.NET-Code besser geeignet, wie zum Beispiel für die Arbeit mit Datenbanken. Während der Lektüre dieses Buches erfahren Sie, in welchen Situationen Sie ASP.NET verwenden und wann JavaScript die bessere Alternative ist. I Erste Schritte Wenn Sie einen Blick auf die Toolbox werfen, werden Sie feststellen, dass die dort angebotenen Steuerelemente in mehrere Kategorien unterteilt sind. Abgesehen von der Kategorie HTML sind allen Kategorien ASP.NET-Steuerelemente zugeordnet. Um sich alle Steuerelemente anzeigen zu lassen, die zu einer bestimmten Kategorie gehören, klicken Sie auf das Pluszeichen vor dem Kategorienamen. Steuerelemente einfügen Um ein Steuerelement auf der Benutzeroberfläche einer ASP.NET-Webseite oder eines ASP.NET- Benutzersteuerelements anzuordnen, öffnen Sie diese Seite bzw. das Benutzersteuerelement im Entwurfsmodus. Dazu muss die Seite/das Element im Editorbereich geöffnet sein. Sollten Sie nicht die Benutzeroberfläche, sondern den Code der Seite sehen, klicken Sie unten im Editorbereich auf den Registerreiter Entwurf. Mit einem Doppelklick auf das gewünschte Steuerelement fügen Sie es auf der Benutzeroberfläche an der Position der Schreibmarke ein. Hinweis: Einfügen von Steuerelementen in der Quellcodeansicht Sie können Steuerelemente auf die eben beschriebene Weise auch dann einfügen, wenn die Quellcodeansicht aktiviert ist. In diesem Fall wird das entsprechende Tag für das Steuerelement an der Position der Schreibmarke eingefügt. Diese Vorgehensweise ist jedoch sehr unübersichtlich, da Sie nicht genau sehen, wo auf der Webseite Sie das Steuerelement angeordnet haben. Sie erzielen bessere Ergebnisse, wenn Sie im Ansicht-Designer arbeiten (Registerkarte Entwurf). Dort sehen Sie die Webseite so, wie sie sich später den Besuchern präsentiert. Sie können hier außerdem das Steuerelement nachträglich mit Hilfe der Maus an eine andere Position verschieben und seine Größe ändern. Das Fenster CSS-Eigenschaften In der Registerreiterleiste links im Fenster von Visual Web Developer 2008 Express Edition befindet sich unter dem Registerreiter Toolbox der Registerreiter CSS-Eigenschaften. Wenn Sie den Mauszeiger darauf bewegen, wird rechts daneben das gleichnamige Fenster geöffnet, in dem Sie die Eigenschaften von CSS- Stilen bearbeiten können. CSS ist die Abkürzung für Cascading Stylesheets, was wörtlich übersetzt soviel wie stufenförmig aufgebaute Stilblätter bedeuten würde. Dies ist ein Name, der nicht sonderlich aufschlussreich ist. Eine bessere sinngemäße Übersetzung könnte vielleicht vererbbare Stilvorlagen lauten. 49

20 Visual Web Developer 2008 Express Edition Stile fassen in der Regel mehrere Gestaltungsmerkmale unter einem Namen zusammen. Dies ist sinnvoll, wenn Sie z.b. verschiedenen Texten in einem Dokument wiederholt dieselben Gestaltungsmerkmale zuweisen müssen. Wenn Sie auf einer ASPX-Seite ein Element anordnen (z.b. ein Eingabefeld, eine Schaltfläche, Text, ein Bild usw.) und die Visual Web Developer-Symbolleiste Formatierung verwenden, um das Layout dieses Elements zu ändern (z.b. seine Ausrichtung oder bei Texten die Schriftart), ist die Wahrscheinlichkeit groß, dass Visual Web Developer diese Veränderung im Seitencode mithilfe von CSS definiert. Dazu wird entweder im Tag des Elements das Attribut style gesetzt, oder es wird im <head>-bereich der Seite mit dem <style>-tag eine CSS-Klasse definiert, die dann im Tag des Elements mit dem Attribut class genutzt wird. Das Fenster CSS-Eigenschaften zeigt an, ob und welche CSS-Eigenschaften dem auf der aktuellen ASP.NET-Seite markierten Element zugewiesen sind. Eine mit dem style-attribut definierte Eigenschaft ist im oberen Bereich des Fensters, der die Überschrift Zugewiesene Regeln trägt, als Inlineformatvorlage gekennzeichnet, weil die Definition innerhalb des jeweiligen Tags (inline) erfolgt. Direkt daneben ist das Tag des Elements samt style-attribut aufgeführt. Wurde für die Gestaltung des Elements eine CSS- Klasse verwendet, ist unter Zugewiesene Regeln der Name dieser Klasse aufgeführt, der immer mit einem Punkt beginnt (z.b..style1). Daneben ist zu sehen, welchem Element die Klasse zugewiesen ist. Würde beispielsweise eine CSS-Klasse namens.style1 auf das HTML-Element span angewendet, stünde dort <span.style1>. Der untere Bereich des Fensters heißt CSS-Eigenschaften und besteht aus zwei Spalten. Die erste Spalte führt alle verfügbaren CSS-Eigenschaften auf, die in mehrere Kategorien unterteilt sind. Wurde eine dieser Eigenschaften für die unter Zugewiesene Regeln aufgeführte Inlineformatvorlage oder CSS-Klasse verwendet, wird der Eigenschaftsname in Fettschrift angezeigt und in der Spalte rechts daneben ist der entsprechende Eigenschaftswert zu sehen. Hätten Sie beispielsweise dem zuvor erwähnten span-element die Schriftart Arial zugewiesen, würde unter CSS-Eigenschaften und dort in der Kategorie Zeichen die Eigenschaft font-family fett dargestellt, da diese die Schriftart festlegt. Rechts daneben wäre als Eigenschaftswert Arial vermerkt. Da dieses Buch hauptsächlich die Programmierung von Webanwendungen und nicht die Gestaltung von Webseiten behandelt, kann hier die Arbeit mit CSS nicht in aller Tiefe erörtert werden. Ausführliche Informationen zu CSS erhalten Sie in Büchern, die sich mit der Webseitengestaltung befassen (z.b. mein Expression Web-Handbuch von Microsoft Press) oder im Internet. Eine Website, die sich sehr ausführlich mit dem Thema CSS beschäftigt, ist beispielsweise Das Fenster Stile verwalten In der Registerreiterleiste links im Fenster von Visual Web Developer 2008 Express Edition befindet sich unter dem Registerreiter CSS-Eigenschaften der Registerreiter Stile verwalten. Wenn Sie den Mauszeiger darauf bewegen, wird rechts daneben das gleichnamige Fenster geöffnet. Dieses Fenster führt alle CSS- Klassen (die auch als Formatvorlagen bezeichnet werden) auf, die in der aktuellen ASP.NET-Seite zum Einsatz kommen. Sie können die in diesen Klassen gespeicherten Gestaltungsmerkmale ändern und die Klassen selbst umbenennen (wenn Ihnen die von Visual Web Developer vorgegebenen Namen nicht gefallen). Dazu bewegen Sie den Mauszeiger auf den jeweiligen Klassennamen und klicken mit der rechten Maustaste. Wählen Sie im folgenden Kontextmenü den Eintrag Formatvorlage ändern. 50

21 3.7 Das Eigenschaftenfenster Das Fenster bietet Ihnen außerdem die Möglichkeit, interne Stile (CSS-Klassen, die in einer ASP.NET- Seite definiert werden und auch nur dort genutzt werden können) in externe Stile (CSS-Klassen, die in jeder beliebigen ASP.NET-Seite verwendbar sind) umzuwandeln. Dies ist mit dem Link Stylesheet anfügen möglich, der es Ihnen erlaubt, eine externe CSS-Datei an die aktuelle Seite zu binden. Anschließend können Sie weiter unten im Fenster Stile verwalten im Bereich CSS-Formatvorlagen interne Stile, die unter Aktuelle Seite aufgeführt sind, per Drag & Drop in die externe CSS-Datei verschieben. Auch für dieses Fenster gilt, dass dieses Buch hauptsächlich die Programmierung von Webanwendungen und nicht die Gestaltung von Webseiten behandelt. Ausführliche Informationen zu CSS erhalten Sie in entsprechenden literarischen Werken, die sich mit der Webseitengestaltung befassen oder im Internet, z.b. unter I Erste Schritte 3.7 Das Eigenschaftenfenster Unter der Registerkartengruppe mit dem Projektmappen-Explorer und dem Datenbank-Explorer ist das sogenannte Eigenschaftenfenster angeordnet. Hier können Sie bereits während der Entwicklung Ihrer Webanwendung die Eigenschaften aller Elemente festlegen, mit denen Sie arbeiten (z. B. Steuerelemente, HTML-Tags usw.). Was Eigenschaften sind, wurde bereits im zweiten Kapitel im Abschnitt»Eigenschaften und Methoden«erläutert. Wenn Sie beispielsweise ein Textfeld-Steuerelement (TextBox) auf einer ASP.NET-Webseite anordnen, zeigt das Eigenschaftenfenster alle Eigenschaften dieses Objekts an. Eine dieser Eigenschaften trägt den Namen width. Damit legen Sie die Breite des Textfeldes fest. Sie finden diese Eigenschaft im Eigenschaftenfenster in der Kategorie Layout. Wenn Sie dort in die Spalte rechts neben den Eigenschaftennamen klicken, können Sie einen Wert für die Breite eingeben, z. B. 100px. Auf diese Weise setzen Sie die Breite des Textfeldes auf 100 Pixel. Trotz des Namens dient das Eigenschaftenfenster auch der Bearbeitung von Ereignissen, auf die Sie in Ihrer Webanwendung reagieren können (z. B. der Klick auf eine Schaltfläche oder die Auswahl eines Eintrags aus einem Listenfeld). Tabelle 3.2 hält weitere Informationen hierzu bereit. Eigenschaften anzeigen Damit im Eigenschaftenfenster die Eigenschaften des gewünschten Objekts angezeigt werden, müssen Sie dieses markieren. Dazu stehen Ihnen verschiedene Möglichkeiten zur Verfügung. Wenn Sie eine ASP.NET-Webseite im Entwurfsmodus anzeigen lassen, klicken Sie das gewünschte Objekt (z. B. eine Schaltfläche oder ein Textfeld) einmal mit der linken Maustaste an. In der Quellcodeansicht zeigt das Eigenschaftenfenster die Eigenschaften des Tags an, in dem sich gerade die Schreibmarke befindet. Abbildung 3.14 zeigt den Inhalt des Eigenschaftenfensters einer ASP.NET-Webseite, auf der ein Textfeld-Steuerelement markiert wurde. 51

22 Visual Web Developer 2008 Express Edition Abbildung 3.14: Das Eigenschaftenfenster zeigt die Eigenschaften eines markierten Textfeldes an. Unter der Titelleiste ist der Name des markierten Objekts aufgeführt, dessen Eigenschaften angezeigt werden. In der Abbildung ist dies das Textfeld mit dem Namen TextBox1. Dabei handelt es sich um den Namen, den Visual Web Developer 2008 Express Edition automatisch vergibt, wenn Sie auf einer ASP.NET-Webseite ein Textfeld-Steuerelement mithilfe der Toolbox zum ersten Mal einfügen. Neben dem Namen finden Sie eine Zeichenfolge, die Sie darüber informiert, wo sich die Klasse befindet, aus der das Textfeld-Objekt erzeugt wurde. Weitere Informationen hierzu finden Sie in Kapitel 8. Eigenschaftswerte ändern Unter der Symbolleiste des Eigenschaftenfensters sind schließlich die Eigenschaften des markierten Objekts und die ihnen zugewiesenen Werte aufgeführt. Um den Wert einer Eigenschaft zu ändern, klicken Sie in das Feld neben dem Eigenschaftennamen. Bei einigen Eigenschaften erscheint dann rechts am Feld entweder ein nach unten weisender Pfeil oder ein Auslassungszeichen (...). Wenn Sie darauf klicken, können Sie den gewünschten Wert mithilfe eines Listenfeldes auswählen oder in einem Dialogfeld näher bestimmen. Im unteren Bereich des Eigenschaftenfensters wird übrigens immer eine kurze Beschreibung der Eigenschaft angezeigt, die ausgewählt ist oder deren Wert Sie ändern. Die Symbole des Eigenschaftenfensters Wie viele andere Fenster auch verfügt das Eigenschaftenfenster über eine Symbolleiste, deren Symbole in der folgenden Tabelle erläutert sind. 52

23 3.8 Der Build- und Debugbereich Tabelle 3.2: Die Symbole des Eigenschaftenfensters Symbol Name Nach Kategorien Alphabetisch Eigenschaften Ereignisse Eigenschaftenseiten Beschreibung Listet alle Eigenschaften des markierten Objekts nach Kategorie sortiert auf. Bei einem Textfeld-Steuerelement (TextBox) gibt es beispielsweise eine Kategorie namens Darstellung, der Eigenschaften untergeordnet sind, mit deren Hilfe Sie unter anderem die Farben und Ränder des Textfeldes festlegen können. Dann gibt es eine Kategorie namens Font, mit deren Eigenschaften Sie alle Einstellungen zur im Textfeld angezeigten Schrift vornehmen können. Kategorien können reduziert werden, um die Anzahl der angezeigten Eigenschaften zu verringern und so die Übersichtlichkeit zu verbessern. Wenn Sie eine Kategorie erweitern oder reduzieren möchten, klicken Sie links neben dem Kategorienamen auf das Plus- (+) bzw. Minuszeichen (-). Die Eigenschaften werden nicht in Kategorien unterteilt, sondern nach Eigenschaftsname sortiert angezeigt. Zeigt die Eigenschaften des markierten Objekts an. Das Eigenschaftenfenster kann auch die Ereignisse vieler Objekte anzeigen. Zeigt die Ereignisse des markierten Objekts an, auf die Sie mit Programmcode reagieren können. Um eine sogenannte Ereignisbehandlungsroutine für eines der angezeigten Ereignisse einzufügen, führen Sie auf dem Feld rechts neben dem Ereignisnamen einen Doppelklick aus. Weitere Informationen hierzu finden Sie in Kapitel 9. Sie können diese Schaltfläche nur dann anklicken, wenn im Projektmappen- Explorer die oberste Hierarchiestufe des Projekts (der Pfad zum Projektordner) ausgewählt ist. Nach einem Klick darauf wird das Dialogfeld Eigenschaftenseiten geöffnet. Mit Hilfe dieses Dialogfeldes können Sie Einstellungen vornehmen, die sich auf das gesamte Projekt beziehen. I Erste Schritte 3.8 Der Build- und Debugbereich Ganz unten im Fenster von Visual Web Developer 2008 Express Edition befindet sich der sogenannte Build- und Debugbereich. In diesem Bereich werden Fenster angezeigt, die Sie bei der Erstellung von ASP.NET-Websites und Webdiensten sowie bei der Fehlersuche unterstützen. Während der Arbeit an einem ASP.NET-Projekt ist dort in der Regel das Fenster Ausgabe zu sehen, das während verschiedener Anwendungsvorgänge (z.b. während der Kompilierung einer Webanwendung) Meldungen zu diesen Vorgängen anzeigt. Unter dem Fenster ist eine Registerreiterleiste angeordnet, mit deren Hilfe Sie von der Registerkarte Ausgabe zur Registerkarte Fehlerliste wechseln können. Dieses Fenster informiert Sie, wenn Ihnen beim Schreiben des Programmcodes Fehler unterlaufen. Ein Beispiel hierfür wurde bereits in diesem Kapitel im Abschnitt»Zeit, Arbeit und Tippfehler«vorgestellt. Mit Hilfe der drei Schaltflächen im oberen Bereich des Fensters Fehlerliste können Sie festlegen, welche Informationen angezeigt werden sollen, standardmäßig werden nur Fehler angezeigt. Sie können jedoch auch auf Warnungen und Meldungen klicken, um zusätzlich über Vorfälle informiert zu werden, die zwar keinen Abbruch der Website- bzw. Webdienstausführung zur Folge haben, die aber während der Ausführung ein unerwartetes Verhalten verursachen können. 53