{"id":55000845,"date":"2012-08-01T00:00:00","date_gmt":"2020-05-22T21:47:31","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=845"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"AccessDaten_mit_HTML_darstellen","status":"publish","type":"post","link":"https:\/\/access-im-unternehmen.de\/AccessDaten_mit_HTML_darstellen\/","title":{"rendered":"Access-Daten mit HTML darstellen"},"content":{"rendered":"

\"\"<\/p>\n

Access-Formulare offenbaren immer wieder mal kleine Mankos: Mal lassen sich keine hierarchisch strukturierten Daten darstellen, mal möchten Sie die Daten vielleicht mit ein paar farbigen Elementen aufhübschen. Mit HTML hingegen ist dies alles möglich – Sie bauen sich einfach mit Elementen wie table, tr und td die gewünschte Struktur auf und füllen diese mit den entsprechenden Daten. Fehlt nur noch ein wenig Interaktivität, oder Nein: Auch das gelingt mit DHTML.<\/b><\/p>\n

Warum Webbrowser und DHTML<\/b><\/p>\n

Anlass für das Aufgreifen des Webbrowser-Steuerelements und der Möglichkeiten von DHTML war ein Projekt für einen Kunden, der sich sowohl eine Fehlzeitenübersicht als auch eine Outlook-ähnliche Darstellung von über den Tag verteilten Aufgaben wünschte.<\/p>\n

Kein Problem: Die benötigten Elemente lassen sich nämlich prima per HTML darstellen und auch ein Anklicken eines Tabellenelements oder das Anzeigen eines Kontextmenüs lässt sich realisieren.<\/p>\n

Die Verwaltung der Fehlzeiten sieht im angesprochenen Projekt übrigens wie in Bild 2 dar.<\/p>\n

\"pic002.png\"<\/p>\n

Bild 1: Fehlzeitenverwaltung auf HTML-Basis<\/span><\/b><\/p>\n

\"pic001.png\"<\/p>\n

Bild 2: Wochenübersicht<\/span><\/b><\/p>\n

Die Fehlzeitenübersicht erlaubt das Anlegen von Fehlzeiten per Kontextmenü, während die Wochenübersicht die durchgeführten Tätigkeiten beim Überfahren mit der Maus als Tool-TipText anzeigt.<\/p>\n

Vorbereitungen<\/b><\/p>\n

Für eine Darstellung wie in den beiden Abbildungen benötigen Sie zunächst ein Formular mit einem Webbrowser-Steuerelement. Dieses fügen Sie dem Formular in der Entwurfsansicht über den Eintrag ActiveX-Steuerelemente der Toolbox mit den Steuerelementen hinzu (s. Bild 3). Um einen einfachen Text im Webbrowser-Steuerelement anzuzeigen, sind nur wenige Zeilen Code nötig. Als Erstes deklarieren Sie eine Objektvariable mit dem Schlüsselwort WithEvents<\/b>, damit Sie per Code auf die Ereignisse des Webbrowser-Steuerelements reagieren können:<\/p>\n

\"pic003.png\"<\/p>\n

Bild 3: Formular mit Webbrowser-Steuerelement<\/span><\/b><\/p>\n

Dim WithEvents objWebbrowser As WebBrowser<\/pre>\n
Dann legen Sie eine Ereignisprozedur an, die durch das Ereignis Beim Laden <\/b>ausgelöst wird. Diese Prozedur fügt der Variablen objWebbrowser <\/b>einen Verweis auf das Steuerelement hinzu und ruft eine leere Seite auf (about:blank<\/b>).<\/p>\n
Die folgende Schleife ist eine Warteschleife, die erst verlassen wird, wenn about:blank <\/b>geladen ist. Erst dann wird mit <p>Hallo!<\/p> <\/b>ein Text im aktuellen Dokument im Webbrowser-Steuerelement angezeigt (s. Bild 4).<\/p>\n
\"pic004.png\"<\/p>\n
Bild 4: Eine erste Ausgabe im Webbrowser-Steuerelement<\/span><\/b><\/p>\n
Private Sub Form_Load()\r\n    Set objWebbrowser = Me!ctlWebbrowser.Object\r\n    objWebbrowser.Navigate "about:blank"\r\n    Do While Not objWebbrowser.ReadyState = READYSTATE_COMPLETE\r\n         DoEvents\r\n        Debug.Print objWebbrowser.ReadyState\r\n    Loop\r\n    objWebbrowser.Document.Write "<p>Hallo!<\/p>"\r\nEnd Sub<\/pre>\n
Statt des simplen Textes können Sie im Webbrowser-Steuerelement alles abbilden, was Sie auch in herkömmlichen Webanwendungen vorfinden. Wir interessieren uns jedoch zunächst einmal für die Darstellung von Daten, in den meisten Fällen in tabellarischer oder ähnlicher Form.<\/p>\n
Tabellen aufbauen<\/b><\/p>\n
Eine Tabelle besteht aus table<\/b>-, tr<\/b>– und td<\/b>-Elementen. Wir könnten diese nun im Rahmen einer Do While<\/b>-Schleife über die darzustellenden Datensätze Zeile für Zeile per Textverkettung zusammensetzen, aber es gibt bessere Methoden.<\/p>\n
Und die bieten überdies die Möglichkeit, etwa einzelne Tabellenzellen als Objekt zu referenzieren, diesem weitere Eigenschaften zuzuweisen oder auch Ereignisse für dieses Objekt festzulegen.<\/p>\n
Tabelle per DOM anlegen<\/b><\/p>\n
Wir sprechen dabei von der MSHTML-Bibliothek, die uns die Methoden des Document Object Model <\/b>zur Verfügung stellt. Um diese zu nutzen, fügen Sie dem VBA-Projekt der Datenbank einen Verweis auf die Bibliothek Microsoft HTML Object Library <\/b>hinzu (s. Bild 5). Für die folgenden Beispiele lagern wir die Zeilen zum Leeren des Dokuments in eine eigene Prozedur aus, die wie folgt aussieht:<\/p>\n
\"pic005.png\"<\/p>\n
Bild 5: Verweis auf die MSHTML-Bibliothek<\/span><\/b><\/p>\n
Private Sub WebbrowserLeeren()\r\n    objWebbrowser.Navigate "about:blank"\r\n    Do While Not objWebbrowser.ReadyState = READYSTATE_COMPLETE\r\n        DoEvents\r\n    Loop\r\nEnd Sub<\/pre>\n
Anschließend legen Sie eine neue Schaltfläche namens cmdEinfacheTabelle <\/b>im Formular an und hinterlegen die folgende Ereignisprozedur für die Ereigniseigenschaft Beim Klicken<\/b>:<\/p>\n
Private Sub cmdEinfacheTabelle_Click()\r\n      Dim objDocument As MSHTML.HTMLDocument\r\n    Dim objTable As MSHTML.HTMLTable\r\n    Dim objRow As MSHTML.HTMLTableRow\r\n    Dim objCell As MSHTML.HTMLTableCell\r\n    Dim i As Integer\r\n    Dim j As Integer\r\n    WebbrowserLeeren\r\n    Set objDocument = objWebbrowser.Document\r\n    Set objTable = objDocument.createElement("Table")\r\n    objDocument.Body.appendChild objTable\r\n    For i = 1 To 3\r\n        Set objRow = objTable.insertRow\r\n        For j = 1 To 3\r\n            Set objCell = objRow.insertCell\r\n            objCell.innerText = "Zeile " & i & ", Spalte " & j\r\n        Next j\r\n    Next i\r\nEnd Sub<\/pre>\n
Die Prozedur deklariert zunächst einige Variablen zum Speichern von Verweisen auf das Dokument sowie auf ein Table<\/b>-, ein TableRow<\/b>– und ein TableCell<\/b>-Element. Sie sehen schon: Die Benennung der Objekte stimmt nicht mit den unter HTML verwendeten Bezeichnungen überein, wo man mit table<\/b>, tr <\/b>und td <\/b>arbeitet. Die hier verwendeten Objektnamen sind jedoch intuitiver.<\/p>\n
Die Prozedur leert zunächst das Webbrowser-Steuerelement und speichert dann einen Verweis auf das aktuell enthaltene Document<\/b>-Objekt in der Variablen objDocument<\/b>. Dies ist der Ausgangspunkt für weitere Aktionen. Danach erstellt sie mit der CreateElement<\/b>-Methode ein neues Objekt des Typs HTMLTable<\/b>. Der CreateElement<\/b>-Methode übergeben Sie den Typ allerdings ohne vorangestelltes HTML <\/b>– Table <\/b>reicht also aus.<\/p>\n
Damit dieses Element nicht im luftleeren Raum hängt, fügen Sie es als Child-Element an das Element objDocument <\/b>an. Da Rahmen, Hintergrund et cetera noch nicht festgelegt sind, bleiben diese weiß und die Tabelle ist nicht zu sehen. Dies behalten wir zunächst auch für die Zeilen und Zellen bei. Eine Zeile, also ein HTMLTableRow<\/b>, wird dem HTMLTable<\/b>-Objekt mit der Methode insertRow <\/b>angehängt. Das Ergebnis dieser Methode speichern wir in der Variablen objRow<\/b>. Diese wiederum bietet die Methode insertCell <\/b>an, mit der wir die einzelnen Zellen hinzufügen können. Den Verweis auf diese Zellen speichern wir temporär in einer Variablen des Typs HTMLTableCell<\/b>.<\/p>\n
Das Anlegen von Zeilen und Zellen bauen wir in zwei For…Next<\/b>-Schleifen ein, die jeweils die Zahlen von 1 <\/b>bis 3 <\/b>durchlaufen. Damit wird eine Matrix von drei Zeilen mit je drei Zellen erstellt. Schließlich tun wir noch etwas dafür, dass Sie das Ergebnis auch im Formular betrachten können: Wir fügen den Tabellenzellen einen Text hinzu, der die aktuelle Zeile und Zelle markiert. Das Ergebnis zeigt Bild 6.<\/p>\n
\"pic006.png\"<\/p>\n
Bild 6: Per Code erzeugte Tabelle<\/span><\/b><\/p>\n
Rahmen, Abstände und Co.<\/b><\/p>\n
Wenn Sie eine optisch ansprechende Tabelle anlegen möchten, benötigen Sie Rahmen, Hintergründe, Abstände zum Text und vieles mehr. Die folgenden Abschnitte beschreiben, wie Sie diese Eigenschaften sinnvoll einstellen können. Zunächst einmal: Die MSHTML-Bibliothkek erleichtert die Arbeit schon sehr, weil sie sämtliche Eigenschaften per IntelliSense anbietet. Allerdings gibt es doch noch einiges zu beachten.<\/p>\n
Rahmen hinzufügen<\/b><\/p>\n
Wenn Sie jeder Zelle der Tabelle einen Rahmen hinzufügen möchten, erledigen Sie dies gleich beim Anlegen der Zellen beispielsweise mit den folgenden drei Anweisungen:<\/p>\n
objCell.Style.BorderColor = "#000000"\r\nobjCell.Style.BorderStyle = "dotted"\r\nobjCell.Style.BorderWidth = "1px"<\/pre>\n
Damit setzen Sie sogenannte CSS-Formatierungen ein, die mehr Möglichkeiten als die HTML-Eigenschaften der Elemente bieten. In diesem Fall weisen Sie die Rahmenfarbe, die Art (dotted <\/b>entspricht gestrichelt) und die Breite zu. Statt dotted <\/b>können Sie auch einen durchgezogenen Rand (solid<\/b>) oder andere Varianten verwenden. Das Ergebnis sehen Sie in Bild 7.<\/p>\n
\"pic007.png\"<\/p>\n
Bild 7: Per Code erzeugte Tabelle mit Linien<\/span><\/b><\/p>\n
Vom Rahmen zur Trennlinie<\/b><\/p>\n
Nun soll nicht jede Zelle ein eigenes Kästchen erhalten, sondern es soll jeweils eine Linie zwischen den Zellen dargestellt werden. Hierfür sieht CSS ein eigenes Attribut namens border-collapse <\/b>vor. Diese Eigenschaft ist jedoch nicht per IntelliSense als Element von style <\/b>verfügbar. Sie können es jedoch von Hand eingeben. Zu beachten ist, dass Sie dieses Attribut ohne Bindestrich eingeben und dieses nur für die übergeordnete Tabelle festlegen können:<\/p>\n
objTable.Style.borderCollapse = "collapse"<\/pre>\n
<\/p>\n
Das Ergebnis finden Sie in Bild 8, diesmal mit durchgehendem Rand in grauer Farbe.<\/p>\n
\"pic008.png\"<\/p>\n
Bild 8: Durchgehende, zusammengeführte Ränder<\/span><\/b><\/p>\n
Abstand der Schrift<\/b><\/p>\n
Aus optischen Gründen möchten Sie vielleicht ein wenig mehr Platz zwischen Text und Rahmen lassen. Dies erledigen Sie mit dem padding<\/b>-Attribut (es werden tatsächlich einige Attribute groß, andere kleingeschrieben). Damit stellen Sie den Abstand des Textes zum rechten, linken, oberen und unteren Rahmen ein:<\/p>\n
objCell.Style.padding = "10px"<\/pre>\n
Wenn Sie dies je nach Seite individuell gestalten möchten, verwenden Sie entsprechend paddingTop<\/b>, paddingLeft<\/b>, paddingBottom <\/b>und paddingRight<\/b>.<\/p>\n
Hintergrundfarbe einstellen<\/b><\/p>\n
In unserer kleinen Beispieltabelle sollen die Felder wie auf einem Schachbrett abwechselnd einen weißen und einen alternativen Hintergrund aufweisen. Den Hintergrund stellen Sie mit der Eigenschaft backgroundColor <\/b>ein, der Farbcode #eeeeee <\/b>entspricht einem hellen Grau. Mit der If…Then<\/b>-Bedingung färben Sie nur jedes zweite Feld ein:<\/p>\n
If (i + j) Mod 2 = 0 Then\r\n    objCell.Style.backgroundColor = "#eeeeee"\r\nEnd If<\/pre>\n
Das Ergebnis sieht schließlich wie in Bild 9 aus.<\/p>\n
\"pic009.png\"<\/p>\n
Bild 9: Schachbrettmuster<\/span><\/b><\/p>\n
Schriftart einstellen<\/b><\/p>\n
Für die Schriftart bietet CSS unter MSHTML folgende Eigenschaften an:<\/p>\n