Richtlinie: Webbenutzerschnittstellen erstellen
Diese Richtlinie beschreibt, wie Webbenutzerschnittstellen mit der Modellierumgebung RAD 6.0 erstellt werden.
Beziehungen
Zugehörige Elemente
Hauptbeschreibung

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:

  1. Starten Sie Rational Application Developer Version 6.0.
  2. Wählen Sie in der Menüleiste Help > Help Contents aus.
  3. Blenden Sie die Optionen unter Developing Web Applications ein.
  4. Lesen Sie die Informationen zu Web Site Design oder Web Page Design.