Zur Hauptseite ... Zum Onlinearchiv ... Zum Abonnement ... Zum Newsletter ... Zu den Tools ... Zum Impressum ... Zum Login ...

Achtung: Dies ist nicht der vollständige Artikel, sondern nur ein paar Seiten davon. Wenn Sie hier nicht erfahren, was Sie wissen möchten, finden Sie am Ende Informationen darüber, wie Sie den ganzen Artikel lesen können.

Kompletten Artikel lesen?

Einfach für den Newsletter anmelden, dann lesen Sie schon in einer Minute den kompletten Artikel und erhalten die Beispieldatenbanken.

E-Mail:

Gedrucktes Heft

Diesen Beitrag finden Sie in Ausgabe 6/2012.

Unser Angebot für Sie!

Lesen Sie diesen Beitrag und 500 andere sofort im Onlinearchiv, und erhalten Sie alle zwei Monate brandheißes Access-Know-how auf 72 gedruckten Seiten! Plus attraktive Präsente, zum Beispiel das bald erscheinende Buch 'Access 2010 - Das Grundlagenbuch für Entwickler'!

Diesen Beitrag twittern

Zusammenfassung

Lernen Sie eine Möglichkeit kennen, hierarchische Daten ohne das TreeView-Steuerelement als Baum anzuzeigen.

Techniken

Formulare, VBA, HTML, Javascript

Voraussetzungen

Access 2000 und höher

Beispieldateien

TreeViewJS.mdb

Shortlink

www.access-im-unternehmen.de/862

TreeView ohne ActiveX

Sascha Trowitzsch, Berlin

Im August 2012 verteilte Microsoft über Windows-Update für alle Office-Installationen ab Version 2003 automatisch Security Patches, die nur eine einzige Komponente austauschten: die ActiveX-Bibliothek mscomctl.ocx, welche, unter anderem, das viel verwendete TreeView-Steuerelement enthält. Dabei machte die COM-Version der Bibliothek einen Sprung von 2.0 auf 2.1, was VBA-Module, in denen deren Elemente angesprochen werden, teilweise inkompatibel macht. Ergebnis sind deshalb Datenbanken, die seltsame Fehler melden, wenn Formulare mit TreeViews oder Listviews aufgerufen werden.

In Foren und Blogs wurden Workarounds für das Problem diskutiert, die im Wesentlichen Manipulationen der Registry vorschlagen, und auch Microsoft veröffentlichte schließlich einen Patch zum Patch, ohne jedoch das Problem an sich zu lösen. Mit solchen Workarounds, die zudem Administratorrechte erfordern, mag man am Einzelplatz glücklich werden, wer aber Datenbanken für Unternehmen mit Dutzenden von Arbeitsplätzen entwickelt, steht vor ärgerlichen Umständen.

Die Auffassung von IT-Verantwortlichen, dass ActiveX-Komponenten zu vermeiden seien, bekommt hier verständlicherweise neue Nahrung. Dabei war die MSComCtl-Bibliothek bisher relativ unverdächtig - ist sie doch Bestandteil der Office-Installation selbst.

Das wirft die Frage auf, ob diese Steuerelemente denn nicht durch andere Lösungen zu ersetzen wären. Und selbstverständlich gibt es diese. Mögliche Alternativen sind API-Module, die etwa ein TreeView-Fenster nativ von Grund auf neu erstellen. Schwierigkeiten bekommt man hier indessen meist mit den notwendigen Subclassing-Routinen, die VBA instabil werden lassen.

Auch existieren Lösungen, die TreeViews allein mit Access-Bordmitteln realisieren. Von den Features, dem Komfort und der Performance her können diese allerdings nicht wirklich mit dem ActiveX-Pendant konkurrieren.

Schaut man sich um, so findet man TreeViews aber nicht alleine in Anwendungen, sondern etwa auch auf Internetseiten, wo sie häufig Navigationszwecken dienen.

Diese TreeViews sind zumeist in JavaScript oder PHP programmiert. Es gibt sie in zahlreichen Varianten - umfangreiche oder simple, mit oder ohne AJAX. Und viele können von den Möglichkeiten her durchaus mit dem MSComCtl-TreeView mithalten. Was liegt da näher, als solch ein geskriptetes TreeView in einem Webbrowser-Steuerelement anzuzeigen?

So begab ich mich auf die Suche nach einem JavaScript-TreeView, das in den Möglichkeiten dem ActiveX-TreeView nahekommt. Einige Internetseiten bieten einen Überblick über freie TreeViews.

Nach dem Test diverser Lösungen fiel die Wahl auf das CoolJSTree, welches in einer abgespeckten freien sowie in einer umfangreicheren Bezahlversion (Professional) angeboten wird.

Das CoolJSTree

Sie finden diese Script-Lösung unter http://javascript.softdrawer.com/scripts/cooltree zum Download.

Das Paket enthält zahlreiche Beispiele, die Sie sofort im Browser begutachten können. Eine übersichtliche Dokumentation fehlt ebenfalls nicht.

Im Prinzip brauchen Sie die folgenden Dateien für ein CoolJSTree-TreeView:

  • die zentrale Datei cooltree.js, welche das JavaScript für den Aufbau des Baums enthält,
  • die tree_format.js, die Formatierungen der Nodes steuert,
  • die Datei tree_nodes.js, welche die Definition der anzuzeigenden Nodes beherbergt,
  • und ein Verzeichnis mit den Bilddateien für die Symbole der Nodes.

Es können aber, wie etliche der vom Entwickler beigesteuerten Beispiele zeigen, die Skripte natürlich auch zu einer kompakten Datei zusammengefasst oder sogar in das anzuzeigende HTML-Dokument selbst eingebaut werden. Dann müssen außer dieser HTML-Datei nur noch die Bilddateien vorhanden sein.

Von der Tabelle in den Browser

Wie aber kommt das JavaScript-TreeView als Steuerelement in ein Access-Formular, wie werden seine Knoten angelegt und gesteuert?

Zuerst braucht es hier ein Webbrowser Control, das Access 2010 bereits als Steuerelement beisteuert, während frühere Versionen auf das ActiveX-Steuerelement Microsoft Web Browser angewiesen sind.

Beide sind im Prinzip identisch und stellen einen kleinen Internet Explorer zur Verfügung, nur die Steuerung über das Objektmodell fällt marginal unterschiedlich aus. Das Steuerelement ziehen Sie auf die Ausmaße, die das TreeView haben soll. Ab Access 2007 können Sie es schließlich noch verankern - etwa mit der Option Quer nach unten dehnen -, wodurch es sich zur Laufzeit der Formulargröße anpasst.

Inhalt wird in das Control üblicherweise über dessen Methode Navigate2 und Angabe einer HTML-Datei als Parameter geladen. Ob diese aus dem Internet bezogen wird oder lokal, spielt dabei keine Rolle.

Man könnte also über VBA einen HTML-String zusammenbauen, der die Elemente des TreeViews und das JavaScript enthielte, und ihn anschließend als HTML-Datei abspeichern, damit der Webbrowser sie laden kann - wäre da nicht das Rechtesystem und Zonenmodell des Internet Explorers! Denn das Webbrowser-Steuerelement weigert sich beharrlich, jegliches JavaScript in lokalen Dateien auszuführen.

Auch Änderungen an den Zoneneinstellungen des Internet Explorers ändern daran nichts. Allerdings gibt es einen Trick, dem Browser einen Netzwerkpfad vorzugaukeln, wodurch dieser offenbar andere Sicherheitseinstellungen verwendet. Schreiben Sie den Pfad zur Datei als URL beispielsweise in dieser Form:

file://127.0.0.1/c$/meinverzeichnis/test.html

Mit dieser Pfadangabe (hier: Laufwerk C:) führt der Browser dann seltsamerweise auch integrierte JavaScripts aus.

Es gibt jedoch eine wesentlich elegantere Form, dem Control zur Anzeige von HTML-Inhalten zu verhelfen, als über den Umweg einer dynamisch erzeugten Datei.

Legen Sie zunächst ein leeres Dokument im Control an und schreiben Sie anschließend beliebigen Inhalt über die write-Methode desselben in es hinein. Das könnte so aussehen:

WebControlObject.Navigate2 "about:blank"

sHTML = "<HTML><BODY>Hallo!</BODY></HTML>"

WebControlObject.Document.write sHTML

Die write-Methode löst im Browser das erneute Rendern der Seite mit dem Inhalt der String-Variablen sHTML aus.

Das gezeigte Beispiel wird allerdings so nicht funktionieren, weil Sie vor dem Absetzen der write-Anweisung noch abwarten müssen, bis das leere Dokument komplett erzeugt ist. Dazu müsste vor der letzten Zeile noch über die ReadyState-Eigenschaft des WebControls der Status des Dokuments abgefragt werden, der mindestens den Wert Interactive haben muss. Das kann etwa mittels einer Schleife geschehen:

Do

    DoEvents

Loop Until WebControlObject.ReadyState >= READYSTATE_INTERACTIVE

Statt des simplen HTML-Strings oben ist nun der Aufbau der TreeView-Seite mitsamt den integrierten Skripten der Variablen sHTML zuzuweisen. Wie das in der Demo zum Beitrag gelöst ist und wie auf Ereignisse des TreeViews reagiert werden kann, erfahren Sie in den folgenden Abschnitten.

Eine einfache Demo-Anwendung

In der Demodatenbank TreeViewJS.mdb existiert ein Formular frmSample, das sich nach Klick auf die Schaltfläche Lade TreeView wie in Abb. 1 präsentiert.

pic001.png

Abb. 1: Einfaches Formular mit JavaScript-TreeView im Webbrowser-Steuerelement

Beim Laden des Formulars wird lediglich die Objektvariable oTree auf das WebControl-Objekt gesetzt:

    Private WithEvents oTree As SHDocVw.WebBrowser

    Set oTree = Me!ctlWeb.Object

Das wäre für den weiteren Code nicht unbedingt nötig, vereinfacht aber die Schreibweise im Modul.

Die eigentliche Routine zum Laden des TreeViews steht hinter dem Click-Ereignis cmdLoad_Click des Formulars. Nachdem hier ein leeres HMTL-Dokument im WebControl angelegt wurde, holt sich die Prozedur zuerst den Inhalt der Datei tree_template.html in eine String-Variable sDoc. Der Pfad zur Datei ist hier hartkodiert und steht auf dem Unterverzeichnis \trees der Datenbank; passen Sie das gegebenenfalls an. Im String werden dann diverse Platzhalter mit Inhalt gefüllt und abschließend der HTML-String einfach in das leere Dokument geschrieben:

    oTree.Document.write sDoc

Schon füllt sich das Browser-Fenster mit dem TreeView, in dem Sie die einzelnen Nodes mit der Maus ein- und ausklappen können.

Was hier in Kurzform dargestellt wurde, ist in Wirklichkeit natürlich etwas umfangreicher - die Prozedur verzweigt in verschiedene Unterfunktionen, die den Inhalt für die Platzhalter bereitstellen. Zunächst aber einiges zum Aufbau des HTML-Templates selbst.

Das Tree-Template

Statt der oben erwähnten drei eingebundenen CoolJSTree-JavaScripts sind deren Routinen alle in das Template selbst aufgenommen. Es enthält also alles, was eine HTML-Datei benötigt, und zusätzlich vier Skript-Abschnitte. Der wichtigste ist ganz am Ende zu finden:

    <script type="text/javascript">

    var tree = new COOLjsTree("tree1", TREE_ITEMS, TREE_FORMAT);

    </script>

Mit der Funktion COOLjsTree wird der Baum tatsächlich erstellt. Als Parameter werden eine beliebige Klassen-ID für den DIV-Abschnitt des TreeView erwartet, eine Variable, die die Nodes des Baums definiert, und eine Variable, die die Formatierungsanweisungen enthält. Die Funktion selbst ist im Skript-Block darüber mit seinem etwas kryptischen Code enthalten.

Die Variable TREE_FORMAT für die Formatierungen ist oben gleich nach dem BODY-Tag definiert. Dort steht kommentiert, welche Formatierungsmöglichkeiten fest vergeben werden können. Das sind etwa Angaben zu Einrückungen, Positionierung und vor allem zu den Icons. Der Aufbau des Blocks ist in der CoolJSTree-Dokumentation gut beschrieben. Das Interessante an den Abschnitten für die Icons sind die Pfadangaben zu den Bilddateien, die etwa so aussehen:

    ["???folder.png", "???folderopen.png", "???page.png"]

Da die Icons irgendwo vom Browser gelesen werden müssen, es aber keine relative URL geben kann - das Dokument wurde ja aus dem Nichts per about:blank erzeugt -, müssen hier absolute Pfade stehen. Und deshalb sind die Dateinamen mit drei Fragezeichen als Präfix versehen.

Diese Platzhalter werden später per VBA durch das tatsächliche Icon-Verzeichnis ersetzt:

    sDoc = Replace(sDoc, "???", sIconPath)

Der Vollständigkeit halber nachfolgend ein kleines Schnipsel, wie sich aus einem Windows-Pfad die URL für das Verzeichnis bildet:

    sIconPath = CurrentProject.Path & "\trees\icons\"

    sIconPath = Replace(sIconPath, "\", "/")

    sIconPath = "file://" & sIconPath

Statt der im icons-Verzeichnis mitgelieferten Icons können Sie selbstverständlich beliebige andere Bilddateien verwenden, die auch nicht zwingend im Format 16 x 16 daherkommen müssen. Das CoolJSTree passt seine Zeilen automatisch der Symbolgröße an.

Im TREE_FORMAT-Block steht allerdings nicht, wie die Texte des TreeViews formatiert werden sollen. Diese Node-Texte stellen allesamt A-Tags, also Hyperlinks dar. Also kann man sie einfach mit einer CSS-Style-Definition formatieren, die im HEAD-Abschnitt der HTML-Datei enthalten ist:

Sie haben das Ende des frei verfügbaren Teils des Artikels erreicht. Lesen Sie weiter, um zu erfahren, wie Sie den vollständigen Artikel lesen und auf viele hundert weitere Artikel zugreifen können.

Sind Sie Abonnent?Jetzt einloggen ...
 

Kompletten Artikel lesen?

Einfach für den Newsletter anmelden, dann lesen Sie schon in einer Minute den kompletten Artikel und erhalten die Beispieldatenbanken.

E-Mail:

© 2003-2015 André Minhorst Alle Rechte vorbehalten.