Der Webbrowser als Bildanzeige

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.

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

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.

Entwurfsansicht der Tabelle tblBilder

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…

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

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.

Das Webbrowser-Control in der Mitte des Formularentwurf von frmBilder

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.

So präsentiert sich das Formular frmBilder dann zur Laufzeit

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.

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

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.

Info-Meldung beim Klick auf das Bild

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!

Info-Meldung bei binärem Inhalt des Bilds

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.

Das Kontextmenü des Webbrowser-Bilds

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.

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

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.

Einfügen des kopierten Bilds in MS Word

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)

Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!
Hier geht es zur Bestellung des Jahresabonnements des Magazins Access [basics]:
Zur Bestellung ...
Danach greifen Sie sofort auf alle rund 400 Artikel unseres Angebots zu - auch auf diesen hier!
Oder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:

Schreibe einen Kommentar