Dynamische Navigation in FileMaker mit JQuery und dem MBS-Plugin.

Eine layoutbasierte Benutzeroberfläche kann in FileMaker auf unterschiedliche Art und Weise realisiert werden. Der einfachste Weg ist sicherlich, einfach entsprechende Schaltflächen auf dem Layout zu platzieren, zu beschriften und ihnen Scripte zuzuweisen. Diese Methode ist zwar die schnellste, aber auch die unkomfortabelste Lösung. Denn sobald ein Menüpunkt hinzugefügt oder die Sortierung der Menüpunkte geändert werden soll, muß dies oftmals auf vielen Layouts erfolgen und kostet dementsprechend viel Zeit. Eine etwas flexiblere Methode für ein Navigationsmenü in FileMaker stellt die Verwendung entsprechender globaler Felder dar. In den globalen Feldern wird die Beschriftung für eine Schaltfläche als Textfeld und ggf. auch die Schaltfläche selbst als Medienfeld gespeichert und auf dem Layout aufgerufen. Global deshalb, damit die Schaltflächen auch im Suchen-Modus angezeigt werden können. Diese Vorgehensweise ist flexibler als die erstgenannte Methode, in der Realisierung ist sie jedoch relativ aufwendig und damit ebenfalls sehr zeitintensiv. Einen ganz anderen Weg geht Jens Liebelt, der dynamische Menüs in einem Web-Viewer mit Hilfe von JQuery und dem MBS-Plugin entwickelt hat. FileMaker-Datenbanken erhalten dadurch eine höchst moderne, sehr flexible und dennoch einfach zu administrierende Benutzeroberfläche – selbstverständlich auch mit praktisch grenzenlosen Möglichkeiten, was Animation oder Aufbau des Menüs betrifft. Was im Detail dahintersteckt, erläutert dieser Artikel.

Kernstück aus FileMaker-Sicht ist das MBS-Plugin.

Das MBS-Plugin ermöglicht die Interaktion mit FileMaker und Inhalten aus einem Web-Viewer, der auf einem FileMaker-Layout platziert ist und fungiert quasi als „Brücke“ zwischen Web-Viewer-Inhalten und FileMaker. So läßt sich mit dem MBS-Plugin beispielsweise abfragen, welcher Menüpunkt einer Website innerhalb eines Web-Viewers ausgewählt wurde, über wieviele Seiten ein PDF-Dokument im Web-Viewer verfügt oder welche Schaltfläche auf einer Website im Web-Viewer gewählt wurde. In der aktuellen Version bietet das MBS-Plugin 44 Funktionen für die Abfrage von Web-Viewer-Inhalten direkt in FileMaker. Doch das ist längst nicht alles, was das MBS-Plugin für den FileMaker-Entwickler zur Verfügung stellt: Hinzu kommen Funktionen aus den Bereichen AppleScript, FileMaker Containerfelder, SQL, eine extrem umfangreiche Bibliothek für Bildbearbeitung, Diashows, PDF-Dateien, Systeminfo und vieles mehr. Genauere Informationen über den Funktionsumfang des MBS-Plugins für FileMaker finden Sie auf der Website des Herstellers. Eine Lizenz für fünf Benutzer kostet 119 Euro incl. Mehrwertsteuer, eine Lizenz für Entwickler und unbegrenzter Distribution mit eigenen Lösungen schlägt mit 469 Euro zu Buche. Das MBS-Plugin wird für die Realisierung der im Folgenden erläuterten Lösung zwingend benötigt.

JQuery für den Web-basierten Teil der Benutzeroberfläche.

Das Web-basierte Menü an sich wird in der vorgestellten Lösung mit JQuery realisiert. JQuery ist eine umfangreiche, auf JavaScript basierende Klassenbibliothek, die besonders gut für Navigation geeignet ist. Für JQuery gibt es eine Reihe von kostenlosen oder günstigen Plugins für die Navigation auf Websites, die einfach mittels Google oder anderen Suchmaschinen gefunden werden können. Einige Navigations-Plugins sind beispielsweise auf der offiziellen Website von JQuery zu finden. Auf dieser Seite steht auch die jeweils neueste Version der JavaScript Klassenbibliothek zur Verfügung. Es sollte bei der Auswahl eines passenden JQuery-Plugins jedoch möglichst darauf geachtet werden, daß es nicht allzu komplex aufgebaut ist, um die zugrundeliegende Menüstruktur später problemlos in FileMaker-Datenfeldern abbilden zu können.

Der Web-Viewer in FileMaker bekommt eine neue Bedeutung.

Mit der in diesem Artikel vorgestellten Lösung bekommt dem Web-Viewer in FileMaker eine erheblich erweiterte Bedeutung zugeschrieben. Denn ab jetzt geht es nicht mehr nur darum, innerhalb eines Web-Viewers Inhalte aus dem Internet darzustellen, sondern er ist für nichts Geringeres als die Hauptnavigation innerhalb einer FileMaker-Datenbank verantwortlich. Bei der Nutzung eines Web-Viewers als Navigationselement wird dieser zu einem festen Bestandteil jedes Bildschirmlayouts, auf dem die zentrale Navigation verfügbar sein soll. Der Vorteil einer Navigation in einem Web-Viewer liegt in der gewonnen Flexibilität bei der Erweiterung und Sortierung der verfügbaren Menüpunkte. Auch ist es mit dieser Lösung problemlos möglich, Menüpunkte aufgrund verschiedener Kriterien wie Benutzerrechte oder statusbedingter Situationen einzuschränken oder zu erweitern. Der Entwickler Jens Liebelt empfiehlt in seinem Artikel, ein vertikal aufgebautes Menü zu verwenden, da bei einem horizontal aufgebauten Menü der Platz auf dem Bildschirm schnell zu knapp wird, je umfangreicher die Menüpunkte werden. Bei einem vertikalen Menü besteht außerdem die Möglichkeit, problemlos auch mehrere Ebenen zu verwenden – in seiner Lösung wurden maximal zwei Unterebenen realisiert.

Die Abstraktion des Menüs in FileMaker

Nach Installation des MBS-Plugins in FileMaker und Auswahl eines geeigneten JQuery Plugins müssen beide Technologien innerhalb von FileMaker zusammengebracht – sprich – abstrahiert werden. Der Entwickler Jens Liebelt benötigt für diesen Zweck in seiner Lösung lediglich fünf Datenbankfelder, um das Modell in die FileMaker-Datenbank zu übertragen. Hierbei gilt: Je einfacher der Listenaufbau des JQuery-Menüs, desto einfacher ist die Abstraktion in FileMaker. Um das Menü in einem FileMaker-Web-Viewer darzustellen, genügt ein einfaches Script zur Erstellung der lokalen „Website“ (des Menüs). Diese lokale Website beinhaltet das Sliding Menü und die Callback-Scripte und wird nach jeder Änderung im Menü neu erstellt. Um das FileMaker-typische Zeichensatzformat UTF-16le in UTF8 zu konvertieren, nutzt Jens Liebelt den TextWrangler. Das Script in FileMaker dient dazu, die Liste (UL/LI) und die JavaScripte für die Zusammenarbeit mit FileMaker zu erstellen. Hierbei wird im Script außerdem die Sortierung der Menüpunkte berücksichtigt.

Video zeigt Details für die Entwicklung dynamischer Menüs mit JQuery.

Um die Funktionsweise seiner Lösung detaillierter zu erläutern, hat der Entwickler ein Videotutorial veröffentlicht:

Für dynamische Menüs sind FileMaker und JQuery ein perfektes Team.

Der FileMaker-Entwickler Jens Liebelt zeigt in seinem Fachartikel, daß ein Web-Viewer im FileMaker weit mehr sein kann als ein Bereich zum reinen Anzeigen von Internetseiten. Mit dem Web-Viewer und dem MBS-Plugin wird es möglich, die gesamte Navigation innerhalb einer FileMaker-Datenbank auf höchst flexible Weise zu realisieren, wobei auch die gesamte Erstellung und Administration des Menüs innerhalb von FileMaker realisiert werden kann.

Weitere Informationen erhalten Sie auf der Website von Jens Liebelt.