Einführung
Die Webentwicklungsumgebung in RAD 6.0 stellt eine umfassende Gruppe von Tools bereit, die zur schnellen Erstellung von
Webbenutzerschnittstellen dienen. Sie umfasst den Web Site Designer und den Page Designer sowie
zahlreiche Assistenten (Wizards), die das Erstellen komplexer Webseiten vereinfachen. Dieses Dokument enthält
Richtlinien, die die effektive Verwendung dieser Tools zum Erstellen von Webbenutzerschnittstellen erläutern. Sie
beschreiben eine Entwicklungsstrategie, nennen die unterstützten Seitentypen und listen die Features auf, die das
Erstellen einer Webseite vereinfachen.
Entwicklung
Obwohl Sie jede einzelne Webseite in Ihrer Benutzerschnittstelle unmittelbar mit dem Page Designer erstellen
können, bevorzugt RAD 6.0 eine Vorgehensweise, die die Top-down-Entwicklung mit dem Web Site Designer als
Ausgangspunkt vorsieht. Der zugehörige Navigationseditor kann Folgendes ausführen:
-
Die Navigationsstruktur Ihrer Website definieren:
Beginnen Sie, indem Sie ein hierarchisches Diagramm erstellen, das die Struktur der Website darstellt. In der
Ansicht Palette ist das Fach Site verfügbar, so dass Sie mittels Drag-and-drop neue oder
vorhandene Seiten und Projekte in das Diagramm aufnehmen können und diese in Gruppen organisieren können. Der
Editor stellt ein visuelles Mittel dar, um Seiten auf einfache Weise hinzuzufügen, zu löschen und neu zu
strukturieren. Indem Sie ein Navigationsdiagramm erstellen, ist es dem Web Site Designer möglich, die
Navigationslinks zwischen Ihren Webseiten automatisch zu erkennen und zu verfolgen sowie eine Website-Übersicht
zu generieren. Wenn Sie später eine einzelne Seite mit dem Page Designer erstellen, können Sie
Navigationselemente hinzufügen, z. B. eine Navigationsleiste oder ein Menü, das Sie so anpassen können, das es
nur die Links anzeigt, die abhängig von der Sitestruktur dafür geeignet sind, d. h. Sie können lediglich die
Links zur Hauptsite, zur übergeordneten Site, zu gleichgeordneten Sites und zu unmittelbar untergeordneten
Sites anzeigen.
-
Eine Seitenvorlage anwenden:
Eine Seitenvorlage definiert die visuellen Elemente und das Layout, die allen Ihren Seiten gemeinsam sind, und
sie erlaubt Ihnen, für die Website eine einheitliche Darstellung und Funktionsweise (Look-and-feel)
festzulegen. Eine Seitenvorlage kann mittels eines Assistenten entweder während der Erstellung des Webprojekts
oder später separat erstellt werden. Mit dem Navigationseditor können Sie eine Vorlage auf einfache
Art und Weise auf ausgewählte Seiten oder auf alle Seiten in Ihrem Diagramm anwenden. Als Vorgehensweise wird
empfohlen, die Navigationselemente in die Vorlage aufzunehmen und diese auf alle Seiten anzuwenden, damit in
der gesamten Website einheitliche Navigationsteuerelemente verwendet werden.
-
Den Seitentyp auswählen, der für jede Webseite verwendet werden soll:
Klicken Sie doppelt auf eine Seite, um den Assistenten zum Erstellen einer Seite (Create a page) zu
starten. Dieser Assistent erlaubt Ihnen, einen der unterstützten Seitentypen auszuwählen (siehe den Abschnitt
"Auswahl des Seitentyps"), Anfangsmerkmale für die Seite anzugeben und die Seite im Editor Page
Designer zu öffnen. Jetzt können Sie den Inhalt der Webseite erstellen und bearbeiten. Beachten Sie, dass
das Fach Web Site Navigation in der Ansicht Palette automatisch verfügbar ist, damit Sie
mittels Drag-and-drop Navigationselemente in die Seite aufnehmen können.
Auswahl des Seitentyps
RAD 6.0 unterstützt das Erstellen von Webbenutzerschnittstellen mittels HTML, JSP und Faces JSP. Diese Technologien
stellen Implementierungslösungen dar, die für die Erfordernisse unterschiedlicher Arten von Webanwendungen geeignet
ist. Außerdem definiert jede Technologie einen Seitentyp, der unterschiedliche Features der Webbenutzerschnittstelle
unterstützt. Beim Erstellen einer Webbenutzerschnittstelle ist es daher sehr wichtig, die Features zu kennen, die von
jedem Seitentyp unterstützt werden, und zu wissen, ob dieser Seitentyp geeignet ist für die Art von Webanwendung, die
Sie entwickeln. In den folgenden Abschnitten werden die Features der Webbenutzerschnittstelle genannt, die von den
unterschiedlichen Seitentypen in RAD 6.0 unterstützt werden, und es wird angegeben, welche Seitentypen in
Webanwendungen verwendet werden können, die auf einem statischen, dynamischen, Struts- oder JSF-Framework (JavaServer
Faces) basieren.
Unterstützte Features der Benutzerschnittstelle
Die unterschiedlichen Seitentypen, die von RAD 6.0 zur Implementierung von Webbenutzerschnittstellen bereitgestellt
werden, können in drei Kategorien gruppiert werden. HTML, JSP und Faces JSP. Der Seitentyp JSP unterscheidet außerdem
zwischen einfacher JSP-Datei und Struts-JSP-Datei. In ähnlicher Weise kann der Seitentyp Faces JSP entweder ein Basic
Faces JSP oder Faces JSP mit clientseitigem Caching sein. Diese verschiedenen Seitentypen werden nachfolgend
beschrieben.
HTML
Dieser Seitentyp erlaubt das Erstellen einer Basis-HTML-Seite und unterstützt außerdem weitere Markup-Sprachen (siehe
Tabelle 1, "Features der Seitentypen"). Typische HTML-Features wie Frameset, Cascading Style Sheet und
JavaScript-Scripting werden ebenfalls unterstützt. Außerdem erlaubt das Tool die Definition und Verwendung von
Seitenvorlagen, mit denen webseitenübergreifend eine einheitliche Darstellung und Funktionsweise (Look-and-feel)
erzeugt werden kann.
JSP
Der Seitentyp JSP dient der Unterstützung von Benutzerschnittstellen, die mit der JSP-Technologie implementiert wurden
(RAD 6.0 unterstützt den Standard JSP 2.0). Alle Features einer Basis-HTML-Seite sind verfügbar und werden ergänzt
durch JSP-Scripting (Java Scriptlet) und Aktionen (angepasste Tags). Das Tool ermöglicht die Definition eines
JSP-Fragments, um einheitliche Teile einer Seite in eine separate Datei auszugliedern, die gegebenenfalls in andere
JSP-Seiten eingefügt werden kann. Außerdem wird der Zugriff auf Back-End-Daten mittels SDO (Service Data Object)
unterstützt (eine Beschreibung der SDOs finden Sie unter Konzept: Frameworks für Webanwendungen).
Struts JSP
Eine Struts-JSP-Seite erweitert eine einfache JSP durch automatische Unterstützung Struts-spezifischer Elemente (eine
Beschreibung von Struts finden Sie unter "Konzepte: Frameworks für Webanwendungen"). Eine solche Seite dient der
Entwicklung von Webbenutzerschnittstellen für Anwendungen, die mit dem Struts-Framework implementiert werden.
Insbesondere unterstützt das Tool automatisch den Zugriff auf die Struts-HTML- (struts-html.tld) und
-Bean-Tag-Bibliotheken (struts-bean.tld) und erlaubt das direkte Einfügen von Feldern aus einer ActionForm-Bean in die
Seite. Darüber hinaus bietet es die Möglichkeit, weitere Struts-Bibliotheken hinzuzufügen.
Faces JSP
Der Seitentyp Faces JSP ist eine JSP-Seite, die speziell für Webbenutzerschnittstellen entworfen wurde, die mit der
JSF-Technologie implementiert werden. (Eine Beschreibung der JSF finden Sie unter Konzept: Frameworks für Webanwendungen). Dieser Seitentyp erlaubt den Zugriff auf die
Bibliothek der JSF-Basis-Tags und auf vordefinierte Komponenten der Benutzerschnittstelle (Faces-Komponenten), die
mittels Drag-and-drop in die Seite aufgenommen werden können. Darüber hinaus unterstützt Faces JSP das Erstellen von
Scripts mittels Java Snippets, um beispielsweise die Behandlung von Ereignissen bei Komponenten der
Benutzerschnittstelle festzulegen.
Faces JSP mit clientseitigem Caching
Dieser Seitentyp erweitert Faces JSP, indem er Komponenten der Benutzerschnittstelle bereitstellt, die auf der
Clientseite zwischengespeichert werden können. Das clientseitige Caching erlaubt es insbesondere, dass eine Komponente
an JavaScript-Variablen gebunden wird anstatt an Daten auf der Serverseite. Dadurch können Sie Webseiten mit einer
besseren Leistung erstellen, weil die Zahl der Umläufe zwischen Client und Server verringert wird. Folgende
Faces-Client-Komponenten werden bereitgestellt:
-
Datenraster: Zeigt die Datensätze aus einer relationalen Datenquelle oder die Elemente aus einem JavaBean Array in
einer Tabelle an.
-
Diagramm: Zeigt die Daten in einem Balkendiagramm, einem Kreisdiagramm oder einem Kurvendiagramm an. Das Plug-in
Macromedia Flash muss im Browser installiert sein, damit die Diagramme verwendet werden können.
-
Baumstruktursicht: Zeigt die hierarchischen Daten in einer Baumstruktur an.
-
Web-Service: Ermöglicht es, dass die Faces-Seite Daten aus einem vorhandenen Web-Service abruft, ohne die Seite zu
aktualisieren.
Die folgende Tabelle enthält eine Zusammenfassung der von jedem Seitentyp unterstützten Features. Sie können die als
Leitfaden zum Ermitteln des Seitentyps verwenden, der die Anforderungen der Benutzerschnittstelle einer bestimmten
Webanwendung am besten erfüllt.
Seitentyp
|
Markup-Sprache
|
Unterstützung von Cascading Style Sheet
|
Unterstützung von Seitenvorlagen
|
Syntax im XML-Stil
|
Scripting-Unterstützung
|
SDO-Datenzugriff (*)
|
HTML
|
HTML 4.01
HTML 4.01 Frameset
Compact HTML 1.0
XHTML 1.0 oder 1.1
XHTML 1.0 Frameset
WML 1.3
|
Ja
Ja
Nein
Ja
Ja
Nein
|
Ja
Nein
Nein
Ja
Nein
Nein
|
Nicht anwendbar
|
JavaScript
|
Nicht anwendbar
|
JSP
|
HTML 4.01
HTML 4.01 Frameset
Compact HTML 1.0
XHTML 1.0 oder 1.1
XHTML 1.0 Frameset
WML 1.3
|
Ja
Ja
Nein
Ja
Ja
Nein
|
Ja
Nein
Nein
Ja
Nein
Nein
|
Nein
Nein
Nein
Ja
Ja
Ja
|
JavaScript
Java Scriptlet
Angepasster Tag
|
Ja
|
Struts JSP
|
HTML 4.01
HTML 4.01 Frameset
XHTML 1.0 oder 1.1
XHTML 1.0 Frameset
|
Ja
Ja
Ja
Ja
|
Ja
Nein
Ja
Nein
|
Nein
Nein
Ja
Ja
|
JavaScript
Java Scriptlet
Angepasster Tag
|
Ja
|
Faces JSP
|
HTML 4.01
XHTML 1.0 oder 1.1
|
Ja
Ja
|
Ja
Ja
|
Nein
Ja
|
JavaScript
Java Scriptlet
Angepasster Tag
Java Snippet
|
Ja
|
Faces JSP mit clientseitigem Caching
|
HTML 4.01
XHTML 1.0 oder 1.1
|
Ja
Ja
|
Ja
Ja
|
Nein
Ja
|
JavaScript
Java Scriptlet
Angepasster Tag
Java Snippet
Macromedia Flash
|
Ja (mit clientseitigem Datencaching)
|
* Der SDO-Datenzugriff benötigt WAS Version 5.1 als Implementierungsziel
Tabelle 1 - Features der Seitentypen
Anwendbarkeit auf die Webanwendungen
Der Seitentyp, der bei der Implementierung einer Webbenutzerschnittstelle verwendet werden soll, ist im wesentlichen
abhängig von der Art von Webanwendung, die entwickelt wird. Für statische Webanwendungen ist die Entscheidung einfach,
denn der Seitentyp HTML ist die einzige Option. Für dynamische Webanwendungen können sowohl HTML- als auch JSP-Seiten
verwendet werden. Wenn Sie eine dynamische Webanwendung unter Verwendung eines Struts- oder JSF-Framework entwickeln,
können Sie für die Benutzerschnittstelle außerdem die spezifischen Seitentypen dieser Technologien verwenden. Dadurch
können Sie die spezielle Unterstützung des Tools nutzen und Ihre Benutzerschnittstelle auf einfache Art und Weise
erstellen. Tabelle 2 zeigt die Anwendbarkeit jedes Seitentyps für statische Webanwendungen, dynamische Webanwendungen
und Webanwendungen mit Verwendung des Struts- und JSF-Frameworks.
Seitentyp
|
Statische Webanwendung
|
Dynamische Webanwendung (nicht auf Framework basierend)
|
Struts-Webanwendung
|
JSF-Webanwendung
|
HTML
|
Ja
|
Ja
|
Ja
|
Ja
|
JSP
|
Nein
|
Ja
|
Ja
|
Ja
|
Struts JSP
|
Nein
|
Nein
|
Ja (empfohlen)
|
Nein
|
Faces JSP
|
Nein
|
Nein
|
Ja (mit Integrationsbibliothek)
|
Ja (empfohlen)
|
Faces JSP mit clientseitigem Caching
|
Nein
|
Nein
|
Ja (mit Integrationsbibliothek)
|
Ja (empfohlen)
|
Tabelle 2 - Anwendbarkeit der Seitentypen
Seiteneditierung
Page Designer ist in RAD 6.0 das Tool zum Editieren einer Webseite. Es stellt eine zentrale Editoransicht
bereit, in der Sie eine Seite visuell nach WYSIWYG-Art oder auf der Basis von Quellcodetext erstellen können. Das Tool
arbeitet mit anderen Ansichten zusammen, um die Entwicklung von unterschiedlichen Webseitentypen zu unterstützen.
Insbesondere sind folgende Ansichten verfügbar, die die Seiteneditierung in erheblichem Maße vereinfachen:
Ansicht "Palette"
Die Ansicht "Palette" stellt eine umfassende Gruppe von fertigen Komponenten der Benutzerschnittstelle bereit, die Sie
in eine Seite aufnehmen können. Die Ansicht verwaltet diese Komponenten in Fächern, in denen funktional
zusammengehörige Komponenten gruppiert werden. Beispielsweise sind die Elemente für ein HTML-Standardformular, wie
Schaltflächen, Textfelder und Dropdown-Listen, in dem Fach Form Tags gruppiert. Die Liste der Fächer, die in
der Ansicht "Palette" angezeigt werden, ist abhängig von dem Typ der Seite, die editiert wird. Tabelle 3 listet die
Standardfächer auf, die für jeden unterstützten Seitentyp angezeigt werden. Sie können sowohl die Palette als auch die
meisten Fächer anpassen, indem Sie Fächer bzw. Komponenten hinzufügen, löschen, ausblenden oder einblenden. Eine
Beschreibung jedes Faches und seines Standardinhalts finden Sie in der Produktdokumentation.
Palettenfach
|
HTML
|
JSP
|
Struts JSP
|
Faces JSP
|
Faces JSP mit clientseitigem Caching
|
HTML Tags
|
X
|
X
|
X
|
X
|
X
|
Form Tags
|
X
|
X
|
X
|
|
|
Page Template
|
X
|
X
|
X
|
X
|
X
|
Web Site Navigation
|
X
|
X
|
X
|
X
|
X
|
Portal
|
X
|
X
|
X
|
X
|
X
|
JSP Tags
|
|
X
|
X
|
X
|
X
|
Data
|
|
X
|
X
|
X
|
X
|
Faces Components
|
|
|
|
X
|
X
|
Faces Client Components
|
|
|
|
|
X
|
Struts HTML Tags
|
|
|
X
|
|
|
Struts Bean Tags
|
|
|
X
|
|
|
Struts Logic Tags
|
|
|
X
|
|
|
Struts Nested Tags
|
|
|
ausgeblendet
|
|
|
Struts Tiles Tags
|
|
|
ausgeblendet
|
|
|
Tabelle 3 - Standardpalettenfächer nach Seitentyp
Ansicht "Schnelle Bearbeitung"
Mit dieser Ansicht können Sie JavaScript-Code-Snippets schnell zu Ihrer Seite hinzufügen. Bei Auswahl einer Komponente
auf Ihrer Seite wird eine Liste der möglichen Ereignisse, die dafür geeignet sind, im linken Teilfenster der Ansicht
"Schnelle Bearbeitung" angezeigt. Anschließend können Sie ein Ereignis auswählen und ein Script dafür hinzufügen, indem
Sie einen der folgenden Schritte ausführen:
-
Geben Sie das Script direkt im Scripteditor im rechten Teilfenster ein.
-
Klicken Sie den Scripteditor mit der rechten Maustaste an, wählen Sie Insert Snippet aus, und wählen
Sie aus der angezeigten kontextabhängigen Liste ein Snippet aus.
Ressourcen
Ausführliche Informationen zum Web Site Designer und Page Designer finden Sie in der
Produktdokumentation:
-
Starten Sie Rational Application Developer Version 6.0.
-
Wählen Sie in der Menüleiste Help > Help Contents aus.
-
Blenden Sie die Optionen unter Developing Web Applications ein.
-
Lesen Sie die Informationen zu Web Site Design oder Web Page Design.
|