Deutsch: TreeView

Tree View

Sie haben einen neuen Browser? Sie wundern sich, weshalb ich auf der Page eine Entwicklung verwende, die nur mit JavaScript läuft und auch dies nur in den neuesten Versionen (getestet erst mit 1.1 NS3+/IE4+). Lesen Sie hier alles über die Technik hinter dem Treeview, über seine Herkunft und lernen Sie viel über browserübergreifendes Programmieren, denn Sie können sich bestimmt vorstellen, dass die Page auch Alternativen für Leute ohne Luxusbrowser zu bieten hat.

Herkunft des Treeview

Auf die Gefahr hin, dass Sie mich nun als Plagiator bezeichnen: Der Tree stammt nicht vom mir... (die Tatsache, dass ich dies offen zugebe sollte mich aber von der Schande, ein Plagiator zu sein, erlösen). Er wurde geschrieben vom Macher der besten, deutschsprachigen JavaScript-Seite (javascript.seite.net). Gefunden habe ich das Tool aber in der Zeitschrift Internet Professionell (www.zdnet.de).
Nun gut. Aber einfach so habe ich das Programm nicht übernommen. Hier die Änderungen, die ich (notgedrungen) eingebaut habe:

Bugfix. Sollte ein "reload" nun überstehen, ohne den Browser ins Nirvana zu schicken
Anpassung der Grafiken auf mein cooles Gelb im Hintergrund
Neuprogrammierung der Link-Routine, damit der Spass mit den zwei Radio-Groups läuft
....

Technik

Ich habe mich, Schande über mich, noch nicht allzu eingehend mit dem Treeview befasst (ausser mit zwei der 3 Quelldateien, die ich modifizieren musste, um die Bugs zu fixen).

Das Ding, soviel kann ich sagen, läuft absolut objektorientiert: Der Aufbau des Baumes wird vollständig über verschachtelte Objekte gemanagt. Ein drittes, unsichtbares Frame wird dabei zur Speicherung von Daten verwendet.

Der Baum selbst befindet sich in keiner Datei: Das Skript öffnet nach Aufruf ein neues Dokument im Frame:

  doc.open('text/html', 'replace');

Nun wird der neu erstellte Inhalt beschrieben, mit der Konsequenz, dass Netscape auf ein View Sourcecode den Quelltextes des gesamten Skripts rausrückt, was angesichts der Tatsache, dass ich nichts zu verbergen habe auch nicht weiter schlimm ist.

Zum Abschluss noch ein Beispiel der Objektorientiertheit des Codes (ist für den Aufbau der ersten Ebene zuständig):

  var menu = new Menu();
  menu.addItem(new MenuItem("Home", "/pilif/index.html", "_top",""));
  menu.addItem(new MenuItem("Newscast", 0, "", ""));
  menu.addItem(new MenuItem("Applications", 0, "",""));
  menu.addItem(new MenuItem("Delphi Samples", 0, "",""));
  menu.addItem(new MenuItem("Services", 0, "",""));
  menu.addItem(new MenuItem("Other Stuff", 0, "",""));
  menu.addItem(new MenuItem("About this tree", "/pilif/index.html", "_top",""));

Kompatibilität

Wie gesagt: Die Page läuft auf jedem Browser; auch ohne jedes JavaScript. Wie das möglich ist, das zeige ich hier.

Hinweis

Obwohl hier der Quelltext von allen wichtigen Stellen erläutert wird, empfehle ich dennoch, die jeweiligen Pages zu öffnen und den Quelltext anzuzeigen (am besten mit Netscape, da dieser auch die Page mit dem Frameset anzeigen kann und ein kleines Syntaxhighlighting bietet)

1. Index

Auf der allerersten Seite wird die Weiche gestellt:

    <script language="JavaScript">
      <!--
      if(navigator.appVersion.substring(0,1) >= '4')
       if(navigator.appCodeName == "Mozilla")
        window.location.href = '/pilif/frametools/bestbrowser.html';
      //-->
    </script/>

Browser, die JavaScript unterstützen, sich Mozilla nennen und eine Versionsnummer von 4 und mehr haben, werden auf eine neue Page umgeleitet. Hier wird dann das neue Frameset definiert (siehe unten).
Andere Browser bekommen hier ein Frameset verpasst, wobei auch alte Browser per noframes nicht zu kurz kommen:

    <frameset  cols="181,*" frameborder="0" framespacing="0" border="0">
       <frame name="xcfg65j" src="frametools/navbar.html" scrolling="Auto" noresize>
       <frame name="asdf45k" src="frametools/welcome.html" scrolling="Auto" noresize>	
    </frameset>
    <noframes>
    <BODY background="/pilif/pics/hiterg.jpg" bgcolor="#FFFFFF" link="#0000FF" vlink="#008000">

    ...

Für Informationen über die Frames und wieso die so komische Namen haben, lesen Sie bitte das Whitepaper über die Frames.

2. bestbrwoser.html

So furchtbar viel tut sich hier nicht:

<frameset cols="150,*" frameborder="0" framespacing="0" border="0">
    <frameset rows="0,*" border=0 frameborder="no" framespacing=0>
        <frame name="idfh32o" src="/pilif/scripts/code.html" scrolling="No" 
	    FRAMEBORDER="No" noresize> 
        <frame name="xcfg65j" src="/pilif/scripts/menu.html" noresize>
    </frameset>
        <frame name="asdf45k" src="welcome.html" noresize>
</frameset>

Ausser dass hier kein <noframes> verwendet wird (die neuen Browser unterstützen dies gnaz sicher), wird nicht viel neues gemacht. Die Unterscheide zu Index.html auf den Punkt gebracht:

Viel code befidnet sich im Frame idfh23o, welches aber für den Benutzer nicht sichtbar ist
Der Baum befindet sich im Frame xcfg65j
An der Willkommens-Seite hat sich nichts geändert.

Dies war's dann auch schon mit der ganzen Umstellung. Der Rest läuft im Inndern des Baumes ab, den ich, wie gesagt, noch nicht genau analysiert habe.

--Datum der letzten Änderung: 26.03.99 21:11:49 MEZ--

Verwandte Themen

Internet Links