Vortragsdatenbank mit Javascript, XML und XSLT

XMLDiese Applikation demonstriert, wie man mittels Javascript eine XML-Datei einlädt (AJAX), diese mittels XSLT als HTML-Tabelle darstellt und einzelne Datensätze über XPath-Ausdrücke in Javascript adressiert und ändert.

Die Oberfläche besteht aus zwei Bereichen:

  • Auf der linken Seite eine Liste mit bereits eingetragenen Vorträgen.
  • Auf der rechten Seite ein Eingabeformular für alle Daten zu einem Vortrag.

Außerdem finden sich rechts noch einige Buttons zum Anlegen, Bearbeiten oder Löschen von Einträgen.

Es werden folgende Arbeitsschritte unterstützt:

  • Neuanlegen eines Eintrags
    Klickt man auf der rechten Seite den Button “Neu”, so werden die Eingabefelder zurückgesetzt und man kann die Daten eines neuen Vortrags eingeben. Wenn man damit fertig ist, klickt man auf “Okay”, um die Daten zur Liste hinzuzufügen, oder auf “Abbrechen”, um die Eingaben zu verwerfen.
  • Ändern eines Eintrags
    Man wählt in der Liste einen Eintrag durch Einfachklick aus, woraufhin die Daten des Vortrags in das Eingabeformular geladen werden. Klickt man nun auf “Bearbeiten”, so lassen sich die angezeigten Daten ändern. Wenn man damit fertig ist, klickt man auf “Okay”, um die Daten in die Liste zu übernehmen, oder auf “Abbrechen”, um die Änderungen zu verwerfen.
  • Löschen eines Eintrags
    Man wählt in der Liste einen Eintrag durch Einfachklick aus und klickt auf den Button “Löschen”. Auf eine Sicherheitsabfrage wurde hier verzichtet.

Ein Abspeichern der Liste ist in der Demo nicht möglich. In der vollständigen Version wird bei einem Klick auf “Daten speichern” das XML-Dokument mit der geänderten Fassung überschrieben.

Hintergrund: Dieses Projekt ist ursprünglich für einen Vortrag “Weitere XML-Techniken: XPath, XLink, XPointer” für die Vorlesung “Softwareengineering 2″ entstanden. Im Rahmen der Vorlesung wurde auch ein anderer Vortrag zum Thema XSLT gehalten. Aus reiner Neugierde hatte ich mir einige Javascript-Funktionen zusammengesucht und eine kleine Demo-Applikation geschnitzt, welche alle angesprochenen Elemente funktional vereint.

Stand: 23.07.2008, 02:02 Uhr

1 Kommentar

  1. good und eine kleine Demo-Applikation tahnx

Kommentieren