Der Webbrowser als Bildanzeige

Lies diesen Artikel und viele weitere mit einem kostenlosen, einwöchigen Testzugang.

Die Handhabung von Bildern in Formularen war und ist ein Dauerbrennerthema in vielen Foren. Das genuine Bildsteuerelement von Access weist auch in der zeitweilig modernisierten Version etliche Beschränkungen auf. Das Anlage-Steuerelement ist zwar pfiffig, aber dessen Programmierung fällt reichlich umständlich aus. Doch zu unserem Favoriten haben wir schon früher einmal ein alternatives Steuerelement auserkoren: das Webbrowser Control.

Beispieldatenbank

Die Beispiele dieses Artikels finden Sie in der Datenbank 1702_BildWeb.zip.

Das Webbrowser Control als Universalcontainer

In der Ausgabe 04/2016 von Access Basics, Elemente für die Bildanzeige, verglichen wir die möglichen Methoden, um Bilder in Formularen und Berichten zur Anzeige zu bringen. Neben dem Bildsteuerelement, dem Anlage-Steuerelement, einer zweckentfremdeten Schaltfläche und dem MSForms Image Control kam dort auch ein Webbrowser-Steuerelement zum Einsatz. Es stellte sich heraus, dass Letzteres sich sowohl qualitativ, wie auch von der Programmierung her, sehr gut für diesen Zweck eignet.

Tatsächlich ist das Webbrowser Control als Host für den Internet Explorer eine Universalwaffe! Überall da, wo der Fundus von Access-Steuerelementen versagt, lässt sich über den Webbrowser fast alles realisieren. Schließlich gibt es ja inzwischen sehr komplexe Applikationen, die rein webbasiert arbeiten; und dorthin geht ohnehin der Trend. Liebäugeln Sie also eh schon mit der Portierung Ihrer Datenbank zu einer Weblösung, so ist der integrierte Webbrowser unter Access ein nützlicher Anfang, um sich mit Webprogrammierung vertraut zu machen.

Der Vorteil des Webbrowser Controls ist, dass es den gewaltigen Umfang der HTML-Bibliothek von Windows offenlegt. Über diese können Webseiten programmatisch nicht nur über HTML gesteuert werden, sondern auch über Objekte und deren Eigenschaften, sowie Methoden. Praktisch jedes HTML-Tag (Element) hat ein Pendant als Objektklasse in der HTML-Bibliothek von Microsoft. Über weitere Hilfsbibliotheken, auf die Sie verweisen können, wie die Microsoft XML Library oder die Shell-Bibliothek, haben Sie schließlich den Internet Explorer vollständig im Griff.

Webbrowser vs. Anlagesteuerelement

Das Anlagesteuerelement scheint alle Lösungen zur Bildanzeige dadurch auszustechen, dass es die Bilddaten binär aus einer Tabelle mit Anlagefeld hervorholen kann. Mit seinem Popup-Toolbar ist es zudem ohne jeglichen Programmcode möglich, Bilddateien zu laden und direkt im gebundenen Feld zu speichern.

Ein Bild im Webbrowser hingegen verlangt nach einer URL, die den Pfad zur Datei enthalten muss. Ein Abspeichern der Bilddatei selbst in einem Tabellenfeld scheint damit verwehrt. Bestenfalls könnte man die Datei binär in ein OLE-Feld laden, um dieses später wieder als temporäre Datei zu exportieren und deren Pfad als URL dem Webbrowser Control zu übergeben.

Tatsächlich jedoch gibt es eine Lösung, die diesen Umweg obsolet macht. Das Formular frmBilder der Beispieldatenbank zeigt, wie auf diese temporäre Datei über eine spezielle Kodierung der Bilddaten verzichtet werden kann. Damit steht diese Lösung dem Anlagesteuerelement in nichts nach. Sie erfordert lediglich einige überschaubare VBA-Routinen.

Bildtabelle

Die Tabelle zur Speicherung sowohl des Bildpfads, wie auch der Binärdaten, nennt sich tblBilder und zeigt sich in der Datenblattansicht wie in Bild 1. Das Feld Datei nimmt den vollen Pfad der Bilddatei auf. BildName dient zur optionalen Angabe einer Bezeichnung des Bilds und ist im Entwurf der Tabelle auf den Text Bild voreingestellt. Schließlich sollen die Binärdaten des Bilds im Feld Binaer aufgenommen werden, das hier aber nicht, wie eher üblich, als OLE-Feld daherkommt, sondern als Memo-Feld.

Bild 1: Die Tabelle tblBilder enthält zunächst nur die Pfade zu den Bilddateien im Feld Datei und einen Default-Namen

Den Grund erfahren Sie später. Der Entwurf der Tabelle ergibt sich damit gemäß Bild 2. Der Autowert ID als Primärschlüssel vervollständigt die Tabelle.

Bild 2: Entwurfsansicht der Tabelle tblBilder

Die angezeigten Datensätze kommen übrigens beim Aufruf des Intro-Formulars zustande. Hier ist eine kleine Routine UpdatePics hinterlegt, die alle Bilddateien, die sich im Datenbankpfad befinden, enumeriert und in der Tabelle ablegt. Bei Ihnen wird der Inhalt der Tabelle deshalb wohl anders aussehen.

Die Tabelle stellt die Basis für das Formular frmBilder dar, wobei dort das Webbrowser-Steuerelement an das Feld Datei gebunden ist. Damit zeigt es die Bilder auch schon ordnungsgemäß an, falls die Pfadangaben stimmen. Gleichzeitig kodiert eine Prozedur die Bilddaten und speichert sie im Feld Binaer (siehe Bild 3). Bei erneutem Aufruf des Datensatzes im Formular schaut der Code im Ereignis Beim Anzeigen (Form_Current) nach, ob das Feld Binaer leer ist. Da das nun nicht mehr der Fall ist, verwendet es die Daten des Memo-Felds zur Bildanzeige, ohne eine Datei lesen zu müssen. Soweit der Überblick! Schauen wir uns das im folgend im Detail an…

Bild 3: Das Memo-Feld Binaer füllt sich später beim Aufruf eines Bilds im Webbrowser des Formulars frmBilder

Bild im Webbrowser im Formular

Der Entwurf des Formulars frmBilder (siehe Bild 4) ist so schlicht, wie die zugrundeliegende Tabelle. Die Textfelder oben im Formularkopf sind an die entsprechenden Tabellenfelder BildName für die Bezeichnung und Datei für den Pfad zur Bilddatei gebunden. Über den blauen Button cmdLoad kann ein Dateiauswahldialog geöffnet werden, um ein Bild aus dem Dateisystem laden zu können. Das rote Label mit der Beschriftung Binär ist auf Unsichtbar gestellt und wird erst per Code zum Vorschein gebracht.

Bild 4: Das Webbrowser-Control in der Mitte des Formularentwurf von frmBilder

Im Detailbereich des Formulars befindet sich in voller Ausdehnung nur das Webbrowser-Steuerelement ctlWeb. Seine Verankerung ist auf Quer und nach unten dehnen eingestellt, damit es alle Größenänderungen des veränderbaren Formularrahmens mitmacht. Links oben steht in ihm auch schon der Steuerelementinhalt, der jedoch nicht den Namen des Tabellenfelds anzeigt, sondern den Ausdruck =”about:blank”.

Tatsächlich ist das Control nicht wirklich an die Tabelle gebunden, sondern nur indirekt über den VBA-Code des Formulars. Denn das Webbrowser-Steuerelement von Access muss nicht zwingend an ein Feld gebunden sein. Sie können auch eine feste URL im Eigenschaftenblatt unter Steuerelementinhalt eintragen, die dann standardmäßig angezeigt wird. Mit dem vorliegenden Eintrag erhalten Sie immer eine leere Seite.

Im Fußbereich des Formulars gibt es einige zusätzliche Elemente, die Einfluss auf die Anzeige des Bilds haben. Ist das Kontrollkästchen Originalgröße aktiviert, so wird das Bild in seiner vollen Ausdehnung gerendert. Andernfalls passt es sich, je nach Breite oder Höhe, genau in die Fläche des Webbrowser Controls ein. Die fünf Schaltflächen daneben demonstrieren, dass sich über das HTML-Objektmodell auch auf sehr einfache Weise Bildeffekte erzielen lassen. Hier können Sie das Bild horizontal oder vertikal spiegeln, sowie im oder gegen den Uhrzeigersinn um 90° drehen.

Der Undo-Button macht solche Änderungen rückgängig. In Bild 5 sehen Sie ein geladenes Beispielbild. Hier hat das Control das Bild aus dem Dateipfad eingelesen. Im Hintergrund aber wurden dessen Daten, wie erwähnt, in die Tabelle geschrieben.

Bild 5: So präsentiert sich das Formular frmBilder dann zur Laufzeit

So kommt es bei erneutem Aufruf des Datensatzes zur Darstellung in Bild 6: Das Binär-Label oben wird eingeblendet und zusätzlich gibt rechts unten ein weiteres Label Auskunft über den Speicherbedarf des Bilds im Memo-Feld der Tabelle. Da es sich im Beispiel um ein Bitmap-Format handelt, im Textfeld Bilddatei zu erkennen, ist dieser ziemlich hoch.

Bild 6: Ist ein Bild bereits eingelesen, so zeigt sich das Label Binär oben rechts

Bei Linksklick auf das Bild erscheint eine Meldung, die direkt die aktuell im Webbrowser Control hinterlegte URL ausgibt. Bei aus dem Dateisystem geladenem Bild ergibt sich dabei etwa die Meldung in Bild 7. Hier hat der Internet Explorer den Pfad in das file-Protokoll umgewandelt und die Backslashes automatisch in Slashes umgewandelt.

Bild 7: Info-Meldung beim Klick auf das Bild

Kommt das Bild hingegen binär aus der Tabelle, so zeigt die Meldung, wie in Bild 8, deren Memo-Text ausschnittsweise an. Dafür kommt keineswegs anderer Code zum Einsatz. Tatsächlich handelt es sich bei dem langen String unmittelbar um die Source-URL des Browsers!

Bild 8: Info-Meldung bei binärem Inhalt des Bilds

Bei Rechtsklick auf das Bild erscheint ein Kontextmenü, wie sonst im Internet Explorer auch (siehe Bild 9). Leider hat man auf dessen Einträge ohne größere Umstände keinen Einfluss. Man kann es allerdings mit wenig Code auch deaktivieren, wie wir noch sehen werden. Wir haben dies zunächst nicht getan, weil damit deutlich wird, welche Möglichkeiten das Webbrowser Control zur Verfügung stellt. So etwa lässt sich das Bild, egal, ob als Datei oder binär geladen, als Datei abspeichern, über den E-Mail-Client versenden oder ausdrucken.

Bild 9: Das Kontextmenü des Webbrowser-Bilds

Beim Speichern hat man die Wahl zwischen mehreren Dateiformaten, wie Bild 10 zeigt. Dabei scheint es keine Rolle zu spielen, welches Ursprungsformat das Bild hat. Auch bei JPG werden beim Abspeichern nur PNG und BMP angeboten.

Bild 10: Beim Export des Bilds in eine Datei stellt der Webbrowser diese zwei Dateiformate zur Verfügung

Auch ein Kopieren des Bilds in die Zwischenablage ist möglich, so dass es danach etwa in Word wieder eingefügt werden kann. Allerdings kopiert das Control gleich mehrere Formate in die Zwischenablage, wie etwa neben dem Bitmap auch den Quelltext des Browsers. Beim Einfügen in Word etwa müssen Sie die Funktion Einfügen | Inhalte einfügen… im Start-Tab des Ribbon bemühen, was den Dialog in Bild 11 auf den Plan ruft. Hier ist HTML voreingestellt. Sie müssen stattdessen den Eintrag Geräteunabhängige Bitmap auswählen, um das Bild in ein Dokument zu bekommen.

Bild 11: Einfügen des kopierten Bilds in MS Word

Am Störendsten sind im Kontextmenü sicherlich die Einträge weiter unten, die einen Anwender, der gar nicht weiß, dass er einen Browser für die Bildanzeige vor sich hat, verwirren. Deshalb wäre ein Abschalten des Kontextmenüs ratsam. Denn alle darin enthaltenen Anweisungen lassen sich gegebenenfalls auch recht einfach per Code über das Objektmodell des Browsers auslösen. Mit einigen Klimmzügen ließe sich das Kontextmenü sogar durch ein eigenes in der Datenbank angelegtes ersetzen. Da Microsoft leider seit mehreren Versionen keinen Editor für solche Menüs mehr in Access einbaut und deren Anlage deshalb rein programmtechnisch erfolgen muss, lassen wir diese Möglichkeit hier außen vor.

Programmierung der Bildanzeige

Gehen wir Schritt für Schritt vor. Schalten Sie im Formular auf einen neuen Datensatz. Die Bildfläche bleibt weiß. Über den Button für den Dateiauswahldialog (cmdLoad) öffnen Sie eine Bilddatei. Der dem Click-Ereignis hinterlegte Code steht in Listing 1 und verwendet das FileDialog-Objekt von Access oder, genauer, der Office-Bibliothek.

Private Sub cmdLoad_Click()
     Dim ODlg As Office.FileDialog
     Dim sFile As String
     Dim sExt As String
     Dim bin() As Byte
     
     Set ODlg = Application.FileDialog(msoFileDialogFilePicker)
     With ODlg
         .AllowMultiSelect = False
         .InitialView = msoFileDialogViewDetails
         .InitialFileName = CurrentProject.Path
         .Filters.Add "Bild-Dateien", "*.jpg,*.jpeg,*.png,*.bmp,*.tif*"
         If .Show Then
             sFile = .SelectedItems(1)
         End If
     End With
     If Len(sFile) = 0 Then Exit Sub
     
     Me!txtDatei = sFile
     sExt = Mid(sFile, InStrRev(sFile, ".") + 1)
     ...
     ... (Fortsetzung folgt) ...
End Sub

Listing 1: Beim Laden einer Bilddatei über den Button cmdLoad spielt sich diese Prozedur ab (erster Teil)

Hier wird zunächst die Objektvariable ODlg auf das von Access zur Verfügung gestellte FileDialog-Objekt gesetzt, wobei gleich der Dateiauswahlmodus über die Konstante msoFileDialogPicker angefordert wird. Im folgenden With-Block werden nun einige Einstellungen für den Dialog vorgenommen. Mehrfachauswahl etwa ist untersagt (AllowMultiSelect), die Ansicht wird auf Details gesetzt (InitialView), der Baum navigiert zum Datenbankverzeichnis (InitialFileName) und die erlaubten Dateiendungen sind auf einige Bildformate beschränkt, mit denen der Internet Explorer klarkommt (Filters). Die Methode Show zeigt dann den Dialog erst an. Da der Dialog modal ist, hält der Code an dieser Stelle an. Hat der Anwender eine Datei ausgewählt, so quittiert die Funktion dies mit der Rückgabe True, wonach die Variable sFile mit dem ersten und einzigen Element der SelectedItems-Auflistung bestückt wird. Andernfalls ist die Länge des Strings in sFile gleich 0 und die Prozedur wird verlassen.

Weiter wird nun der Dateipfad in das Textfeld txtDatei des Formulars geschrieben. Die Dateiendung wird über einen Ausdruck mithilfe der Mid– und InstrRev-Funktionen ermittelt und in die Variable sExt gespeichert. Soweit die Vorarbeiten. Für das Verständnis der restlichen Zeilen der Routine, die im Listing ausgelassen wurden, müssen erst die Vorgänge beim Laden und Anzeigen des Formulars näher beleuchtet werden.

Initialisierung des Webbrowser Controls beim Laden des Formulars

In Form_Load steht nur eine Zeile:

Set oBrowser = Me!ctlWeb.Object

Das Webbrowser-Steuerelement hat im Formular den Namen ctlWeb. Seine Object-Eigenschaft gibt den eigentlichen Webbrowser zurück, die der Objektvariablen zugewiesen wird. Deren Deklaration befindet sich im Modulkopf des Formulars:

Private WithEvents oBrowser As WebBrowser

Die Variable ist also vom Typ Webbrowser und das Statement WithEvents gibt an, dass dieses Objekt Ereignisse auslösen kann. Nun werden Sie eine Klasse Webbrowser im Objektkatalog vergeblich suchen. Die Access-Bibliothek enthält deren Definition nicht. Der Typ ist nämlich in einer Bibliothek zu finden, die Sie erst einmal in die Verweise des VBA-Projekts laden müssen: die Microsoft Internet Controls (shdocvw). Diese Bibliothek ist das Kernstück des Internet Explorers. Markieren Sie nun im Objektkatalog die Klasse Webbrowser, so stellen Sie fest, dass diese fast die gleichen Methoden und Eigenschaften aufweist, wie die Klasse WebbrowserControl von Access, nur dass jene viele zusätzliche Eigenschaften zeigt, die sich auf die Gestalt des Steuerelements im Formulars beziehen. Microsoft hat im WebbrowserControl die Eigenschaften von Access-Steuerelementen mit denen des Internet Explorers vermengt.

Ende des frei verfügbaren Teil. Wenn Du mehr lesen möchtest, hole Dir ...

Testzugang

eine Woche kostenlosen Zugriff auf diesen und mehr als 1.000 weitere Artikel

diesen und alle anderen Artikel mit dem Jahresabo