Host Access Transformation Services Tutorial

Transkript

1 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 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 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.

3 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 IP-Adresse des Ziel-Mainframes. In unserem Fall ist dies , 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.

4 Abbildung 3 Abbildung 4

5 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.

6 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 Debug-Zwecken 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).

7 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

8 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

9 Abbildung 10 Abbildung 11

10 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 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.

11 Abbildung 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.

12 Abbildung 14 Abbildung 15

13 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 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 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).

14 Abbildung 17 Abbildung 18

15 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

16 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

17 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 3270-Screens 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 Datenstroms sichtbar zu machen, aktiviert man die in Abbildung 24 rot gefärbten Auswahlfelder.

18 Abbildung 23 Abbildung 24

19 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

20 Abbildung 26 Abbildung 27

21 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

22 Abbildung 30 Abbildung 31

23 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

24 6. HTML-Grundgerüst anpassen Abschließend wird nun noch demonstriert wie Sie das HTML-Grundgerüst (Template) der HATS Web-Anwendung 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).

25 Abbildung 35 Ebenso einfach wie das Abändern der Überschrift können Sie der Anwendung HTML-Links oder andere HTML-Elemente 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.

26 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 adresse 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!