doc Format

Host Access Transformation Services
Tutorial
© Abteilung Technische Informatik, Institut für Informatik, Universität Leipzig
© Abteilung Technische Informatik, Wilhelm Schickard Institut für Informatik,
Universität Tübingen
Übersicht
Dieses Tutorial beschäftigt sich mit dem Produkt IBM Rational HATS in der Version 7.1 in Verbindung mit dem
IBM Rational Software Architect in der Version 7.0.0.8. Nachdem Sie das Tutorial durchgearbeitet haben, sind
Sie in der Lage eine einfache Web-Oberfläche für eine 3270 Host-Anwendung zu erstellen, welche über das
Internet über einen Webbrowser aufgerufen werden kann.
Um dieses Tutorial durchführen zu können, benötigen Sie das „WinXP und HATS“ VMWare Image und den
VMWare Player, welche Sie auf den DVDs im Anhang dieses Tutorials finden.
1. Rational HATS starten
Nachdem Sie das VMWare Image erfolgreich geöffnet und gestartet haben, erscheint der Desktop der
virtuellen Maschine. Doppelklicken Sie nun auf das Symbol „HATS Toolkit 7.1“ um die Entwicklungsumgebung
zu starten.
2. HATS Projekt anlegen
Nachdem die Entwicklungsumgebung gestartet wurde, befinden Sie sich standardmäßig in der „Host Access
Transformation Service“-Ansicht. Erstellen Sie nun ein neues HATS-Projekt indem Sie im Menü „File“ den
Menüpunkt „New Project“ auswählen. Bei der Erstellung von Projekten können Sie von einem Assistenten
unterstützt werden (Abbildung 1), wählen Sie hier den Menüpunkt „HATS/HATS-Project“ aus und klicken
anschließend auf „Next“.
Abbildung 1
Der in Abbildung 2 dargestellte Assistent zur Projekterstellung öffnet sich nun. Verwenden sie als Projektnamen
bitte „HATS_Tutorial“, als Zielserver „Websphere Application Server 6.1“ und als Enterprise Application Projekt
„HATS_Tutorial_EAR“.
Abbildung 2
Ein Klick auf „Next“ bringt Sie zu dem in Abbildung 3 dargestellten Bildschirm. Hier müssen Sie nun
Einstellungen zu Ihrer gewünschten 3270-Verbindung vornehmen. Verwenden Sie als Hostname bitte die IPAdresse des Ziel-Mainframes. In unserem Fall ist dies „134.2.14.211“, die IP-Adresse des Tübinger Mainframes
hobbit.informatik.uni-tuebingen.de. Als Verbindunstyp wählen sie das 3270 Protokoll aus und als Port den
Telnet-Port des Mainframes, in unserem Beispiel „423“. Für die Codepage und Bildschirmgröße können Sie die
Standardeinstellungen belassen. Klicken Sie auf „Next“.
Abbildung 3
Abbildung 4
Bei dem in Abbildung 4 dargestellten Bildschirm können Sie ebenfalls die Standardeinstellungen belassen.
Klicken Sie erneut auf „Next“ um zu Abbildung 5 zu gelangen. Hier können Sie nun das Standard-Template für
Ihre HATS Web-Anwendung auswählen. Templates sind einfach JavaServer-Pages, welche natürlich auch
manuell erstellt werden können - in diesem Tutorial wird hierauf jedoch nicht weiter eingegangen. Wir
verwenden stattdessen das Template „CorporateMonoTan.jsp“. Klicken Sie abschließend auf „Finish“ um zu
Abbildung 6 zu gelangen.
Abbildung 5
Soeben haben Sie erfolgreich Ihre erste einfache HATS-Anwendung erstellt. Die Entwicklungsumgebung
gratuliert Ihnen dazu und liefert interessante Hinweise in kleinen Popup-Fenstern. Nachdem Sie diese zur
Kenntnis genommen haben, können Sie das Popup durch einen Klick auf „Ok“ schließen.
In Abbildung 6 sehen Sie Ihre Anwendungsübersicht, in welcher Sie mehrere Reiter finden, mit Hilfe derer Sie
später die vom Assistenen vorgenommenen Einstellungen nachträglich abändern können.
Abbildung 6
3. Ihre erste HATS Anwendung testen
Nachdem Sie sich die Übersicht angeschaut haben, können Sie den ersten Versuch unternehmen, Ihre soeben
erstellte Anwendung zu testen. Dazu gibt es die Möglichkeit das Projekt einfach nur auszuführen und im
Webbrowser zu testen oder die Möglichkeit das Programm mit einem zusätzlichen 3270-Terminal zu DebugZwecken zu starten. Wir demonstrieren hier letztere Möglichkeit.
Klicken Sie dazu mit rechts auf den Projektnamen und wählen Sie in dem nun aufgeklappten Menü „Debug on
Server“ aus (Abbildung 7). Anschließend müssen Sie noch den gewünschten Ziel-Application Server auswählen.
In diesem Tutorial wählen wir den „IBM Websphere Application Server 6.1“ und klicken anschließend auf
„Finish“ (Abbildung 8).
Abbildung 7
Abbildung 8
Nachdem der lokale Websphere Application Server nun gestartet wurde, öffnet sich ein neuer Reiter mit dem
internen Webbrowser der Entwicklungsumgebung (Abbildung 9). Ein Klick auf das „Maximize“-Symbol rechts
oben am Reiter vergrößert die Bildschirmfläche (Abbildung 10).
Ihre Anwendung läuft nun erfolgreich und gestattet Ihnen den Zugriff auf die Host-Anwendungen des
Mainframes über den Webbrowser. Der 3270-Datenstrom wird automatisch in einfache HTML-Eingabefelder
transformiert, wodurch die HATS Web-Anwendung bedient werden kann. Experimentieren Sie etwas mit der
Oberfläche und loggen sie sich in das TSO-Subsystem ein.
Abbildung 9
Abbildung 10
Abbildung 11
Wie Sie sicherlich schon bemerkt haben, hat sich mit dem Testen der Anwendung ein neues Fenster „HodConn“
geöffnet. Klicken Sie auf das minimierte Fenster (Abbildung 11).
Abbildung 12
In diesem Fenster (Abbildung 12) sehen Sie parallel den momentan genutzen 3270-Datenstrom in einem
eigenen klassischen Terminalemulator. Um das Projekt in einem fortgeschrittenen Stadium zu testen und zu
debuggen ist dieses Tool äußert hilfsreich, da somit jede Transformation eines Screens leicht nachzuverfolgen
ist.
Erforschen Sie noch etwas, wie die HATS Web-Anwendung den 3270-Datenstrom transformiert um einzelne
Elemente darzustellen. Melden Sie sich anschließend bitte wieder ordnungsgemäß vom TSO-Subsystem ab und
schließen Sie den Reiter des internen Webbrowsers.
Abbildung 13
4. 3270-Bildschirmschnappschüsse erstellen
In diesem Abschnitt werden Sie den 3270-Terminalemulator der Entwicklungsumgebung kennenlernen und
damit für spätere Bearbeitungszwecke Bildschirmschnappschüsse (Screenshots) erstellen.
Öffnen Sie links in der Baumstruktur den Punkt „Connections“ durch einen Klick auf das Plus-Symbol. Klicken Sie
anschließend mit rechts auf das Verbindungselement „main“ und wählen Sie im nun aufgeklappten Menü
„Open HATS Host Terminal“ und dann den Menüpunkt „main“ aus (Abbildung 13). Anschließend erscheint der
Emulator wie in Abbildung 14 dargestellt.
Den 3270-Terminalemulator können Sie nun wie gewohnt benutzen. Verwenden Sie anstatt der Enter-Taste die
IBM-typische Strg-Taste um die Eingabe zu bestätigen. Melden Sie sich bitte im TSO-Subsystem an und starten
Sie das ISPF Primary Option Menu durch Eingabe von „ispf“ in die TSO-Shell. Der Bildschirm sollte nun ähnlich
zu Abbildung 15 aussehen.
Abbildung 14
Abbildung 15
Diesen Bildschirm werden wir nun speichern, damit wir ihn später in der Darstellung anpassen können. Klicken
Sie dazu auf das dritte Symbol „Capture“ in der Menüleiste des 3270-Terminalemulators. Anschließend sollte
der Dialog aus Abbildung 16 erscheinen. Hier können Sie dem aufgezeichneten Bildschirm einen Namen
zuweisen. Wir belassen den Standardvorschlag der Entwicklungsumgebung und klicken auf „Finish“.
Abbildung 16
5. Bildschirmanpassung
Den gerade aufgezeichneten Bildschirm werden wir nun in der Darstellung anpassen. Öffnen Sie links in der
Projektnavigation den Punkt „Screen Captures“ durch einen Klick auf das Plus-Symbol. Klicken Sie anschließend
mit rechts auf den Dateinamen des gerade aufgezeichneten Bildschirms und wählen Sie im aufgeklappten
Menü „New Hats“ den Menüpunkt „Screen Customization“ aus (Abbildung 17).
Im folgenden Fenster können Sie nun der neuen Screen-Anpassung einen Namen geben. Wir belassen den
Standardvorschlag der Entwicklungsumgebung und klicken auf „Next“. (Abbildung 18).
Abbildung 17
Abbildung 18
Im nun erscheinenden Fenster müssen Sie das Erkennungskriterium für den aufgezeichneten Screen festlegen.
Sie haben die Möglichkeit jeden Screen anhand der Anzahl der Eingabefelder, der Anzahl der Zeichen, der
Cursorposition oder anhand von bestimmten Zeichenketten zu klassifizieren. Das ISPF Primary Option Menu
klassifizieren wir in diesem Tutorial dadurch, dass der Ausgabetext „ISPF Primary Option Menu“ sich genau an
der nun im Folgenden ausgewählten Position befindet. Kennzeichnen Sie die Position nun in dem Sie mit
gedrückter linker Maustaste ein gelbes Rechteck um „ISPF Primary Option Menu“ auf dem aufgezeichneten
Bildschirm aufziehen (Abbildung 19). Klicken Sie anschließend bitte auf „Next“ um zur Abbildung 20 zu
gelangen.
Hier können Sie nun auswählen wie standardmäßig die neue Screen-Anpassung dargestellt werden soll. Zur
Auswahl stehen vier Optionen wobei wir uns hier für die Option „Prepopulated with Default Rendering“
entscheiden um möglichst viele Elemente des Host-Screens im Entwurfsmodus dargestellt zu bekommen. Ein
abschließender Klick auf „Finish“ erstellt eine neue Transformation in Form einer JavaServer Page und wechselt
in den Entwurfsmodus (Abbildung 21).
Abbildung 19
Abbildung 20
Abbildung 21
In dem Entwurfsmodus können Sie per Drag and Drop nun beliebig die Elemente innerhalb der JavaServer Page
verschieben. Am Beispiel der Seitenüberschrift „ISPF Primary Option Menu“ demonstrieren wir nun kurz die
einzelnen Arbeitsschritte um ein Element im Aussehen anzupassen.
Markieren Sie dazu mit einem Linksklick das Element „ISPF Primary Option Menu“. Klicken Sie anschließend mit
rechts auf das Element und wählen dann im aufgeklappten Menü „HATS Tools“ und dann „Edit Host
Component“ aus (Abbildung 22).
Abbildung 22
Anschließend sollte wie in Abbildung 23 ein Fenster erscheinen mit welchen man den Textbereich des 3270Screens einem HTML-Element zuweisen kann. Da der Textbereich korrekt zugewiesen wurde, belassen wir das
gelbe Rechteck ohne Änderung.
Um in dem 3270-Bildschirm Eingabefelder, geschützte oder versteckte Felder des 3270-Datenstroms sichtbar
zu machen, aktiviert man die in Abbildung 24 rot gefärbten Auswahlfelder.
Abbildung 23
Abbildung 24
Durch einen Klick auf „Next“ gelangen Sie zu Abbildung 25. Hier können Sie dem in Abbildung 23 markierten
Bereich eine Komponente zuordnen. Mögliche Komponenten sind unter anderen Eingabefelder, Tabellen,
Funktionstasten und Auswahllisten für welche bestimmt definierte Kriterien zu Erkennung gelten müssen. So
ist es für den momentan ausgewählten Bereich „ISPF Primary Option Menu“ zum Beispiel nicht möglich die
Komponente Eingabefeld zuzuweisen.
Mit fortgeschrittenen Kenntnissen kann man mit der Programmiersprache Java eigenständig neue
Komponenten entwickeln und sich diese seinen Bedürfnissen anpassen. In diesem Tutorial wird hierauf jedoch
nicht näher eingegangen.
Wählen Sie als Komponente in diesem Beispiel die Komponente „Text“ aus.
Zu jeder Komponente gehört ein Widget, welches sich um die HTML-Umsetzung der Komponente kümmert. Zu
jeder Komponente stehen verschiedene Widgets zur Verfügung. So kann zum Beispiel ein Eingabefeld als
normales Eingabefeld oder auch alternativ als Auswahlfeld dargestellt werden. In unserem einfachen Beispiel
nutzen wir nur das zur Komponente „Text“ gehörende Widget „Label“ (Abbildung 26).
Abbildung 25
Abbildung 26
Abbildung 27
Die Komponente und das Widget kann den Bedürfnissen angepasst werden (Abbildung 27). Dazu klicken Sie
bei der Widget-Auswahl auf das obere Symbol (1). Im sich nun öffnenden Fenster deaktivieren Sie mit einem
Klick die Option „Use Projects Defaults“ und klicken auf das Symbol (2) um die Darstellung des Textes zu
manipulieren (Abbildung 28).
Hier können Sie das Aussehen des Textes nach Belieben ändern. In diesem Tutorial wurde zum Beispiel die
Schriftart „Verdana“ mit einer Größe von 24 Punkten ausgewählt. Durch das anschließende Klicken auf „Ok“
werden die Einstellungen übernommen und Sie gelangen zurück (Abbildung 29).
Abbildung 28
Um nun bestimmte Textabschnitte inhaltlich anzupassen, klicken Sie auf das Brillen-Symbol (Abbildung 30).
Anschließend erscheint ein neues Fenster in welchem Sie unter dem Punkt „Replace“ den zu ersetzenden
Originaltext markieren und unter dem Punkt „Width“ die Option „Text or HTML“ anklicken und in das folgende
Textfeld den neuen Text eingeben. Ein Klick auf „OK“ übernimmt die Änderung und führt Sie zurück zum
Enwurfsmodus, wo Sie das Ergebnis betrachten können (Abbildung 31).
Abbildung 29
Abbildung 30
Abbildung 31
Abbildung 32
Um nun vom Entwurfsmodus in den Vorschaumodus zu wechseln, klicken Sie auf den Reiter „Preview“, welcher
in Abbildung 32 hervorgehoben wurde. Hier wird Ihnen nun gezeigt wie Ihr angepasster Bildschirm später im
Webbrowser aussehen wird.
Falls Sie über JavaServer-Page Kenntnisse verfügen, können Sie sich den erstellten Java-Server-Page Code durch
Klick auf den Reiter „Source“ anschauen und gegebenenfalls manipulieren (Abbildung 33).
Abbildung 33
6. HTML-Grundgerüst anpassen
Abschließend wird nun noch demonstriert wie Sie das HTML-Grundgerüst (Template) der HATS WebAnwendung anpassen können. Klicken Sie dazu links auf das Plus-Symbol bei dem Verzeichnis „Web Content“
und dann auf das Unterverzeichnis „Templates“. Wählen Sie nun das von Ihnen zu Beginn als Standard
deklarierte Template „CorporateMonoTan“ aus, um es im Entwurfsmodus anzupassen (Abbildung 34).
Abbildung 34
Wie Sie schon bei der Bildschirmanpassung gesehen haben, handelt es sich bei diesem Template ebenfalls um
eine JavaServer-Page, welche entweder wieder im Entwurfs- oder im Quellcodemodus angepasst werden kann.
Durch einen Klick im Entwurfsmodus auf die Überschrift „My Company“ können Sie die Überschrift nach Ihren
Wünschen anpassen (Abbildung 35).
Abbildung 35
Ebenso einfach wie das Abändern der Überschrift können Sie der Anwendung HTML-Links oder andere HTMLElemente per Drag and Drop hinzufügen.
Die Entwicklungsumgebung stellt hierzu eine Palette mit HTML-Elementen am rechten Rand zur Verfügung.
Klicken Sie auf den Menüpunkt „HTML-Tags“ um die Liste mit HTML-Elementen aufzuklappen (Abbildung 36).
Abbildung 36
In diesem Tutorial fügen wir dem Template noch einen Link zur Universitätshomepage hinzu. Wählen Sie dazu
aus der Palette unter dem genannten Punkt „HTML-Tags“ das Element „Link“ aus und klicken Sie im
Entwurfsmodus an die für den Link gewünschte Position in dem Template.
Nun erscheint ein kleines Fenster in welchem Sie die URL für den Link angeben können (Abbildung 37). Ebenso
können Sie hier festlegen ob es sich um einen Link auf eine Webseite, eine E-Mailadresse oder auf eine Datei
handelt. Ein Klick auf „OK“ schließt das Fenster und fügt den Link hinzu (Abbildung 38).
Abbildung 37
Abbildung 38
Zum Abschluss können Sie das Projekt nun erneut auf dem lokalen Application Server starten um das Ergebnis
Ihrer Arbeit anzuschauen. Das Projekt kann jedoch ebenfalls im EAR-Format exportiert werden und auf einem
anderen Websphere Application Server eingerichtet werden.
Herzlichen Glückwunsch!