Ich habe selbst einige Zeit herumprobieren müssen, wie man HTML Datensätze mit Spry filtern kann. Am besten natürlich so, dass man mit einem Link direkt einen bestimmten Datensatz oder eine Datensatzkategorie filtern kann. Was mit XML Datensätze über xPath relativ einfach geht erfordert mit einem HTML Datensatz auf Basis einer Tabelle ein wenig Anpassung.

Zunächst aber: was ist Spry?

Spry ist das Adobe eigene AJAX Framework und unterstützt neben Navigationselementen (Menüleisten, Akkordeon, Registerkarten) und Formularüberprüfungen auch Datensätze auf Basis von HTML oder XML. Mit einem Spry Datensatz kann z.B. eine einfache HTML Tabelle als Basis für einen Datensatz verwendet werden. Dieser Datensatz lässt sich dann in einen Master/Detailbereich, eine sortierbare Tabelle oder in Container auf einer anderen Seite wieder verwenden. 

Erstellung eines Spry Datensatzes 

Um einen Spry Datensatz zu erstellen klickt man zunächst im Einfügen-Bedienfeld von Dreamweaver auf die Kategorie Spry und wählt dort die Funktion Spry-Datensatz aus. Vorher sollte man natürlich eine HTML Tabelle mit Datensätzen angelegt haben. Damit man später Datensätze oder Kategorien direkt anwählen kann, darf die Tabelle keine Kopfzeile besitzen. Zellen können statt Text auch Bilder und sogar HTML Formatierungen enthalten. So könnte eine einfach HTML Tabelle aussehen, die z.B. in einem HTML Dokument namens kontakte.html gespeichert wird:

Damit man die Tabelle als Datensatz verwenden kann, muss ihr über das Eigenschaften-Bedienfeld unbedingt eine ID zugeweisen werden! Damit man später auch nach Datensätzen oder Kategorien Filtern kann, erzeuge ich zusätzlich eine ID und einen Klassenstil pro Datensatz - also pro Zeile. Mit der ID (id="hans") kann man auf jeden einzelnen Eintrag verweisen und mit dem Klassenstil (class="freunde") auf Kategorieren. Als Kategorien unterscheide ich hier zwischen Freunde und Familie. So sieht der Quellcode meiner HTML Tabelle für den ersten Eintrag aus:

<table border="0" cellpadding="2" cellspacing="2" id="kontakte">

  <tr id="hans" class="freunde">

    <td>Hans</td>

    <td>19.05.1978</td>

    <td> Diese E-Mail-Adresse ist gegen Spambots geschützt! Sie müssen JavaScript aktivieren, damit Sie sie sehen können. </td>

  </tr>

  ...

</table>

Verwenden des Spry Datensatz-Assistenten

Nach aufrufen der Spry Datensatz Funktion öffnet sich der Spry-Assistent. Als Datentyp wird HTML angegeben. Als Datensatznamen wählt man z.B. dsKontakte und als Datendatei wählen wir das Dokument kontakte.html aus. Mit dem Pfeil klickt man einfach auf die Tabelle, um festzulegen, dass diese die Datensätze enthält. Bevor man zu Schritt 2 geht, sollte noch die Funktion "Erweiterte Datenauswahl" aktiviert werden. Als Zeilenselektor wird "tr" und als Spaltenselektor "td" eingetragen.

Im zweiten Schritt können die Typen der Datensatzspalten und die Sortierung eingetragen werden. Wichtig ist, dass die Funktion "Erste Zeile als Kopfzeile verwenden" deaktiviert wird.

Im Dritten Schritt verwenden wir das Master-/Detayllayout und klicken auf einrichten. Hier können Tags für die einzelnen Datensätze angegeben werden. Die zweite und dritte Spalte würde ich in diesem Fall vielleicht als Paragraph ausgeben.

Nach dieser Prozedur habe ich zumindest schon mal einen einfachen Spry Master-/Detailbereich auf meiner Seite, wo man einzelne Datensätze anklicken kann und dann weitere Informationen im Detailbereich darstellen kann. Jetzt kommt der schwierigere Teil.

Hinzufügen der SpryURLUtils.js

Zwar fügt der Assistent meiner Site schon eine ganze Reihe von Javascripts in den Spry Ordner hinzu, aber damit ich Parameter an meine Links hängen kann, die dann einen Datensatz oder eine Kategorie filtern brauche ich noch die SpryURLUtils.js Datei. Die habe ich mir aus dem Spry Framework genommen und dann ebenfalls in den Spry Ordner gelegt. Das Spry Framework findet man unter den Adobe Labs. Nach dem Entpacken der ZIP Datei findet man die SpryURLUtils.js Datei im Unterordner includes. 

Natürlich muss man im HTML Dokument noch auf die hinzugefügte SpryURLUtils.js Datei verweisen. Dies macht man mit folgendem Eintrag im Head Bereich Seite:

<script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>

Ändern des Spry Scriptes im Head Bereich

Ich möchte jetzt gerne einen Link erstellen, der auf einen Datensatz oder eine Kategorie verweist, wie z.B:

<a href="/kontaktseite.html?Name=hans">Verweise auf Hans</a>

oder:

<a href="/kontaktseite.html?Kategorie=freunde">Zeige alle Freunde</a>

Damit die Parameter, die den Links angehängt wurden von Spry verarbeitet werden, muss ich das Script im Headbereich ändern und den entsprechend den Parametern einen gefilterten Datensatz anzeigen lassen. Der wichtigste Eintrag dazu ist rowSelector. Dieser filtert entweder nach der ID oder nach dem Klassenstil bzw. zeigt alles an, wenn kein Parameter gefunden wird.

<!--

  // Hier legt die Funktion getLocationParamsAsObject aus dem hinzugefügten SpryURLUtils Script alle URL Parameter in der Variablen params ab.

  var params = Spry.Utils.getLocationParamsAsObject(); 

  //jetzt überprüfen wir, ob ein Parameter namens "Name" oder "Kategorie" übergeben wurde und laden einen entsprechend gefilterten Datensatz: 

  if (params.Name) {

    var dsKontakte = new Spry.Data.HTMLDataSet("kontakte.html", "kontakte", {  tableModeEnabled: false, rowSelector: "#"+params.Name, dataSelector: "td", sortOnLoad: "column0", sortOrderOnLoad: "ascending"} );

  } else if (params.Kategorie) {

    var dsKontakte = new Spry.Data.HTMLDataSet("kontakte.html", "kontakte", { tableModeEnabled: false, rowSelector: "."+params.Kategorie, dataSelector: "td", sortOnLoad: "column0", sortOrderOnLoad: "ascending"} );

  } else {

    var dsKontakte = new Spry.Data.HTMLDataSet("kontakte.html", "kontakte", { tableModeEnabled: false, rowSelector:"tr", dataSelector: "td", sortOnLoad: "column0", sortOrderOnLoad: "ascending"} );

  }

--> 

Kommentare (0)

 Zeige/Verstecke Kommentareingabe