FileMaker 12 und CSS: Anleitung und erste Erfahrungen (Update)

Eigene Layout-Designs mit FileMaker 12 und CSSEine der Neuerungen in FileMaker Pro 12 ist die neue Layoutdesign-Architektur. Dem Entwickler stehen 40 neue Standard-Designs zur Verfügung, die bereits Tasten mit ansehnlichen Mouse-Over-Effekten, Felder mit abgerundeten Kanten, Objekte mit Schatten oder Hintergrundmuster enthalten.

Als Grafiker und Designer sind die neuen Darstellungsmöglichkeiten sehr zu begrüßen. FileMaker setzt hier endlich zeitgemäße Technik ein und verabschiedet sich von dem Ballast der in die Jahre gekommenen alten Layout-Engine, auch wenn dies mit einem unangenehmen Dateiformatwechsel verbunden ist. Doch beim näheren Hinsehen stellt man fest, dass viele Parameter eines zugewiesenen Layoutdesign mit Bordmittel gar nicht zu erreichen sind…

Eigene Layoutdesigns erstellen?

Wie vielleicht schon bekannt ist, basiert die neue Darstellungsform in FileMaker Pro 12 auf sogenannte „Cascading Style Sheets“, kurz CSS. Diese sind eine strukturierte beschreibende Sprache für Inhalte und sorgen in so gut wie jeder modernen Website für deren Optik und Verhalten.

Da die CSS auch bei FileMaker in Textform vorliegen, ist die Verlockung groß, sich seine eigenen Designs zu gestalten. Wir haben uns angesehen, ob das möglich ist und was dabei zu beachten ist.

Wo sind die CSS gespeichert?

Unter Windows 7 befinden sich die 40 Standard-Designs als einzelne Ordner in „Themes“ im „FileMaker Pro 12 Advanced“-Verzeichnis, in dem auch das ausführbare FileMaker-Programm abgelegt ist.

Am Mac müssen wir zuerst durch Klicken mit der rechten Maustaste (oder ctrl-Klick) auf das Programm „FileMaker Pro Advanced“ den Paketinhalt anzeigen und finden dann im Ordner „Contents:Resources“ ebenfalls einen Ordner namens „Themes“. Wenn wir uns als Beispiel das darin enthaltene Design „cosmos“ genauer ansehen, so befinden sich in dem gleichnamigen Ordner folgende Dateien:

  • cosmos.css (enthält die eigentlichen Formatdefinitionen der Designvorlage)
  • cosmos_ja.css, cosmos_sc.css, cosmos_tc.css (enthalten Schriftänderungen für japanische bzw. chinesische Systeme)
  • der Ordner „images“ (enthält alle in CSS verwendeten Bilder und das Vorschaubild „cosmosPreview.jpg“, das in FileMaker bei der Design-Auswahl angezeigt wird)
  • manifest.xml (enthält u.a. die ID des Designs, den Namen und die Gruppenbezeichnung)
  • manifest_de.xml, etc (enthält den deutschen Namen und Gruppenbezeichnung, bzw. für das jeweilige installierte Sprachpaket)

Darf ich die CSS verändern bzw. wie kann ich eigene Designs erstellen?

Zuerst möchte ich vorausschicken, dass dies von FileMaker Inc. zum aktuellen Zeitpunkt weder offiziell unterstützt wird, noch eine Dokumentation darüber verfügbar ist. Weiters sollte man, bevor man beginnt, seine eigene Designs zu kreieren, sich grundsätzlich schon mit CSS beschäftigt haben, bzw. sich vorher in das Thema einlesen.

Unbedingt ist natürlich auch die „FMPA Lizenz (Deutsch).pdf“ (zu finden im Ordner „FileMaker Pro 12 Advanced“) – zu beachten, die es nicht erlaubt, das Programm selbst zu verändern.

Am Mac müssen wir allerdings gar nicht die Programmresourcen modifizieren:

Wir können eigene Designs auch in den Ordner „Application Support/FileMaker/Extensions/Themes“ ablegen. Diese werden vom FileMaker Programm erkannt und mit den Standard-Designs in der Übersicht angezeigt.

Ein Thema anpassen

Zum Testen kopieren wir uns einen beliebigen Design-Ordner in das Verzeichnis „Application Support/FileMaker/Extensions/Themes“ und benennen diesen in „Beispiel“ um.

In manifest.xml müssen wir folgende Anpassungen durchführen:

Element „ID“: 

<id>at.karo.theme.beispiel01</id>

Hier müssen wir eine neue eindeutige ID vergeben – unter dieser ID werden die CSS und Bilder in FileMaker intern abgelegt. Mehr dazu später.

Elemente „Name“ und „Gruppe“: 

<name>Beispiel</name>
<group>karo</group>

Diesen beiden Elemente müssen ebenfalls in der Datei manifest_de.xml gleichlautend angepasst werden.

<cssfile>beispiel.css</cssfile>

Hier muss der Name der Datei stehen, welche die CSS für unser neues Design enthält.

<preview>images/beispielPreview.png</preview>

Wenn wir ein Vorschaubild erstellt haben, so wird hier der Pfad zu diesem eingetragen. Ein Vorschaubild sollte 736 x 612 Pixel groß sein. In der Datei beispiel.css können dann die Stilvorlagen für das neue Erscheinungsbild angepasst werden.

Wie kommen die neuen Stilvorlagen in eine FileMaker Datei?

Das neu erstellte Design erscheint im AuswahldialogSobald wir unser eigenes Design angelegt haben, ist es für FileMaker bereits abrufbereit. Es ist nicht erforderlich FileMaker neu zu starten. Durch Aufruf des Dialogs zur Auswahl des Designs werden alle verfügbaren CSS Designs geladen und angezeigt. Weise ich meinem Layout zum ersten Mal ein Design zu, und wurde es in dieser FileMaker-Datei noch nie verwendet, so werden sämtliche CSS und Bilder daraus in die FileMaker-Datei kopiert und unter der ID, die im manifest.xml angegeben wurde, abgelegt.

Sobald ich jedoch einem weiteren Layout dasselbe Design zuordne, wird nur mehr auf diese gespeicherte CSS referenziert und es kommen keine neuen Definitionen mehr zur Datei hinzu.

Die FileMaker-Datei vergisst nicht…

Hier kommen wir allerdings schon zum problematischen Teil: Wurde ein Design auch nur ein einziges Mal einem Layout in einer FileMaker-Datei zugeordnet, bleiben sämtliche Informationen (CSS-Beschreibungen und dazubehörige Bilder) in dieser Datei gespeichert. Werden den Layouts neue Designs zugewiesen, so verbleiben die alten obsoleten Designs weiterhin enthalten, auch wenn kein einziges Layout dieses mehr verwendet. Kein komprimiertes Speichern, kein Clonen oder Wiederherstellen der FileMaker-Datei kann diese entfernen!

Und dieses Verhalten gilt auch für Standard-Designs und läßt sich leicht aufzeigen:

Wir erstellen eine leere Datei ohne Tabellen oder Felder. Diese hat zu Beginn knapp 90 KB. Weist man nun alle verfügbaren Standard-Designs einem Layout der Reihe nach zu (auch ohne ein neues Layout zu erzeugen) so hat die Datei am Ende 3,4 MB – eben aufgefüllt mit allen bisher verwendeten CSS Themen.

Wie kann ich mein eigenes Design aktualisieren (aktualisiert am 17. April 2012)

Da FileMaker immer zuerst auf die in der FileMaker-Datei gespeicherten CSS zugreift, werden nachträgliche Formatänderungen in der CSS-Datei im Ordner “Themes” (hier beispiel.css) auch bei einem erneuten Zuweisen auf ein FileMaker-Layout nicht wirksam.

Bei der ersten Veröffentlichung dieses Artikels konnten wir Änderungen nur übernehmen, indem wir die ID in manifest.xml änderten und somit ein „neues“ Design in die Datei brachten. Diese Vorgangsweise hatte allerdings einen gravierenden Nachteil: Weiterhin wurde der alte Satz an CSS-Formatierungen NICHT entfernt. Die Datei wuchs somit mit jeder Änderung der ID weiter an – CSS-Informationen und Bilder wurden ebenso mehrfach abgelegt. Wählten wir an dieser Stelle eine alte bereits vergebene ID, so wurde wieder auf die in der FileMaker-Datei gespeicherten Stilvorlagen zugegriffen…

Doch wie inzwischen bekannt wurde, geht es viel einfacher: Hält man bei der Auswahl eines selbst gestalteten FileMaker-Designs vor dem Drücken des OK-Buttons die Tasten cmd-alt-ctrl-shift, so werden die CSS-Daten des gewählten Designs von FileMaker erneut in die Datei geladen. Zuvor getätigte Änderungen in der Formatierung sind unmittelbar darauf auf dem Layout sichtbar.

Mit dieser Methode werden auch sämtliche in diesem Design referenzierten Bilder neu geladen und die alten unter dieser ID gespeicherten nicht mehr benötigten CSS-Informationen und Bilder aus der FileMaker-Datei entfernt.

Empfehlungen für die Praxis

Da die genannten Umstände der Zuordnung auch für die Standard Designs gilt, sollten wir zum Testen niemals eine „Live-Datei“ verwenden, sondern Gestaltung und Tests in einer Extra Datei vornehmen. Ist das Aussehen dort fixiert, können wir alle Elemente einfach in unsere Lösungsdatei über die Zwischenablage kopieren und dort mithilfe des Inspektors (im Reiter „Darstellung“) Stile kopieren und an weitere Objekte anwenden.

Zu beachten ist allerdings, dass es Formatierungen gibt, die nicht über Objekte beschrieben werden, sondern nur durch Zuordnung eines Designs wirksam werden: Das betrifft zum Beispiel Schatten oder Hintergrundmuster wie sie im Standard-Design „Bambus“ zu finden sind.

Eine alternative Herangehensweise an das Thema möchte ich hier auch noch kurz erwähnen: Wenn wir die gespeicherten Informationen einer Zwischenablage eines FileMaker-Layoutobjektes untersuchen, wie es zum Beispiel mit dem Clip Manager von myFMbutler möglich ist, so finden wir im XML Code den Eintrag <LocalCSS> mit einer umfangreichen CSS Beschreibung des zuvor kopierten Layoutobjekts. Auch hier öffnet sich eine Möglichkeit über Manipulation der Zwischenablage, die Formatierungen nach seinen Wünschen zu beeinflussen.

Fazit

Wie wir an den oben gezeigten Beispielen sehen, ist die Verwendung eigener Designs nicht ganz unproblematisch.

Der Wunsch ist natürlich groß, dass die Firma FileMaker in einer der nächsten Versionen einen CSS Editor zur Verfügung stellt und vorallem das Bereinigen von alten obsolten Designs in einer Datei unterstützt. Wir lassen uns überraschen, was da noch kommen wird…

Autor: karo productions, Inh. Robert Kaiser • Parkgasse 7, A-2105 Oberrohrbach

Diesen Beitrag bewerten:

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (1 Stimmen, Durchschnitt: 5,00 von 5)
Loading...

Über den Autor

Robert Kaiser
Robert Kaiser ist zertifizierter FileMaker Entwickler, FBA Mitglied und Werbegrafiker. Als Inhaber und Gründer von karo productions entwickelt er seit mehr als 15 Jahren FileMaker Anwendungen. Seine Spezialgebiete sind Redaktionssysteme und DTP-Lösungen aller Größenordnungen. Im Fokus seiner Anwendungen stehen sowohl die einfache Bedienung, als auch die Möglichkeit, als erfahrener Benutzer möglichst schnell ans Ziel zu kommen, wie zum Beispiel in seiner Datenbank für TCM-Ernährungsberater PepperPlusMint. Von dieser gibt es auch eine abgespeckte Version als Runtime-Lösung im Mac App Store.

4 Kommentare

  1. Robert Kaiser

    Und es ist schön, wenn man auch Matt noch was neues erzählen kann…
    http://www.youtube.com/playlist?list=PL2095A0D8D15CF4FD

  2. Robert Kaiser

    Wie bereits im Artikel erwähnt, ist die Erstellung von eigenen Designs mit Vorsicht zu geniessen, da sie von FileMaker nicht offiziell unterstützt werden:
    http://help.filemaker.com/app/answers/detail/a_id/10880
    Wir sind gespannt, ob und wie FileMaker die Erstellung unterstützen wird…
    karo

  3. Olli

    Hallo Robert,

    habe das wie angegeben unter FileMaker 13 probiert aber leider irgendwie nicht geschafft…

    Hält man bei der Auswahl eines selbst gestalteten FileMaker-Designs vor dem Drücken des OK-Buttons die Tasten cmd-alt-ctrl-shift, so werden die CSS-Daten des gewählten Designs von FileMaker erneut in die Datei geladen. Zuvor getätigte Änderungen in der Formatierung sind unmittelbar darauf auf dem Layout sichtbar.

    Geht das unter FileMaker 13 nicht mehr oder was mache ich falsch?

    lg

    Olli

    1. Robert Kaiser (Beitrag Autor)

      Hi Olli, nachdem FileMaker Inc. hier schon 2012 sich gegen diese Vorgangsweise ausgesprochen hat, hab ich diese Variante auch nicht mehr weiter verfolgt.
      Falls ich dennoch Modifikationen machen muss (auf eigenes Risiko natürlich ;-) dann ausschließlich über den XML Code der Zwischenablage. Das geht z. B. mit dem ClipManager von FMButler.
      lg karo

Schreiben Sie einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.