Widgets und In-place-Bearbeitung

Diese Anleitung setzt voraus, dass Fiona 7 im Legacy-Modus installiert und initialisiert wurde. Im Folgenden werden die wesentlichen Schritte zur Umstellung einer bestehenden Anwendung auf Fiona-7-Technik beschrieben.

Inhalte „in-place“ bearbeiten

Die als Attributwerte im CMS abgelegten Inhalte können sehr leicht an Ort und Stelle („in place“) bearbeitbar gemacht werden. Hierfür steht der Helper fiona7_tag zur Verfügung. Das API folgt sehr stark dem API von scrivito_tag, lässt jedoch RailsConnector-Objekte als Argument zu.

Man kann also RailsConnector-Code wie beispielsweise

<h1><%= display_field @obj, :title %></h1>

leicht durch Fiona-7-Code ersetzen:

<%= fiona7_tag(@obj, :title, :h1) %>

In-place-Bearbeitung der Navigationen

Navigationen und Listen von Objekten können mit fiona7_tag_list erstellt werden. Diese Methode blendet einen Marker ein, mit dem eine neue Seite angelegt werden kann. Zusätzlich kann die Liste sortiert werden.

Die Liste der verfügbaren Seitenvorlagen ist anfangs leer. Die verfügbaren Vorlagen können mit Hilfe der Methode valid_page_classes_beneath der globalen Obj-Klasse in der Scrivito-Engine definiert werden.

Legen Sie also eine Datei mit dem Pfad „app/models/obj.rb” an und geben Sie ihr den folgenden Inhalt:

class Obj < RailsConnector::BasicObj
  in_place do
    def valid_page_classes_beneath(parent_path)
      ['Publication']
    end
  end
end

Dadurch wird beim Anlegen einer neuen Seite die Vorlage Publication angeboten. Sie können abhängig vom Pfad des übergeordneten Objekts (parent_path) unterschiedliche Vorlagen zur Verfügung stellen.

Zu jeder angebotenen Seitenvorlage muss es einen Thumbnail-View geben, damit im Auswahldialog je Vorlage ein Piktogramm angezeigt werden kann. Thumbnails werden von einem Rails-View mit dem Pfad „app/views/Vorlagenname/thumbnail.html.erb“ angezeigt. Für die Vorlage Publication benötigen Sie also eine Datei mit dem Pfad „app/views/publication/thumbnail.html.erb“:

<%= scrivito_thumbnail 'Publication', :content do %>
  Allgemeine Seite
<% end %>

Detailansicht und weitere Attribute

Manche Attribute (z.B. show_in_navigation) können nicht sinnvoll in-place bearbeitet werden. Für sie bietet sich die Detailansicht an, auf der Sie die benötigten Bearbeitungselemente unterbringen können. Die Detailansicht kann über den entsprechenden Befehl im Menü der jeweiligen Seite geöffnet werden.

Der Menübefehl ist verfügbar, wenn es einen details-View für die betreffende Vorlage gibt. Beispielsweise kann in der Detailansicht für die Publication-Vorlage unter „app/views/publication/details.html.erb“ (nach dem Schema „app/views/Vorlagenname/details.html.erb“) mit folgendem Code eine Eingabemöglichkeit für den Seitentitel geschaffen werden:

<div>
  <h3>Seitentitel</h3>
  <%= scrivito_tag :div, @obj, :title %>
</div>

In einer Fiona-7-Anwendung können Widgets auf genau dieselbe Art und Weise erstellt werden wie in einer Scrivito-Anwendung. Im Folgenden wird die Vorgehensweise anhand eines TextImageWidget beschrieben, das ein Bild und dessen Überschrift zusammenfasst. Der Konvention bei Fiona 7 und Scrivito folgend, sollten Widgets stets Widget und Seiten Page als Namenssuffix haben, damit beispielsweise der Verwendungszweck der entsprechenden Objektklassen sofort erkennbar ist.

Erstellen Sie für das Widget zunächst ein Model, das dessen Attribute definiert. Legen Sie hierfür zunächst eine Datei mit dem Pfad „app/models/image_text_widget.rb“ an. Das Model sollte von der Klasse Widget ableiten, die von Scrivito::Widget abgeleitet ist.

Die Klasse macht die Widget-Vorlage dem System bekannt. Sie hat zwei Attribute, headline für die Überschrift und image für die Verlinkung des Bildes.

Weshalb werden Bilder in Widgets verlinkt?

Hätte das Attribut image den Typ :binary, könnten die Bilddaten direkt im Widget gespeichert werden. Allerdings wäre ein auf diese Weise in ein Widget aufgenommenes Bild nicht wiederverwendbar, weil das Bild nicht als eigenständiges Objekt existiert. Aus diesem Grund hat sich die Konvention etabliert, Bilder als Objekte mit der Vorlage „Image“ anzulegen und sie in Widgets und auch Seiten mittels Referenz einzubinden.

Schritt 2: Show- und Thumbnail-Views anlegen

Damit ein Widget auf Webseiten genutzt werden kann, müssen zwei Views angelegt werden, „app/views/WidgetName/show.html.erb“, für die Anzeige seines Inhalts und „app/views/WidgetName/thumbnail.html.erb” für die Anzeige eines Icons oder Bildes im Widget-Auswahldialog.

Für das TextImageWidget werden die folgenden Dateien verwendet:

„app/views/text_image_widget/show.html.erb“:

<%= scrivito_tag :h3, widget, :headline %>
<%= scrivito_image_tag widget, :image %>

„app/views/text_image_widget/thumbnail.html.erb“:

<%= scrivito_thumbnail 'Text Image Widget', :image do %>
  Ein Widget mit einem Bild und einer Überschrift.
<% end %>

Der letzte Schritt besteht darin, Widgets auf einer Seite überhaupt verfügbar zu machen. Hierzu benötigt das Objekt, das die Seite repräsentiert, mindestens ein Attribut vom Typ widgetlist. Wenn Sie TextImageWidgets in Seiten vom Typ Publication aufnehmen möchten, fügen Sie ein solches Attribut vom Typ widgetlist zu der Publication-Objektklasse hinzufügt:

Um main_content auf Seiten vom Typ Publication zu rendern und bearbeitbar zu machen, fügen Sie in den View für die Publication-Vorlage die folgende Zeile ein:

<%= fiona7_tag :div, @obj, :main_content %>

Wenn man nun eine Seite mit der Vorlage Publication aufruft, wird für main_content ein Marker eingeblendet, mit dem man Widgets manipulieren kann. Noch ist es jedoch nicht möglich, Widgets zur Seite hinzuzufügen, weil die Liste der angebotenen Widgets im Auswahldialog leer ist – wie anfänglich beim Auswahldialog für Seitenvorlagen.

Die zur Auswahl anzubietenden Widgets werden über die Instanzmethode valid_widget_classes_for in der Klasse Obj gesteuert. Die erweiterte Definition von Obj sieht dann so aus:

Das TextImageWidget kann jetzt auf Seiten mit der Vorlage Publication im Attribut main_content verwendet werden. Die Überschrift eines solchen Widgets lässt sich nun in-place bearbeiten, und ein Bild kann per Drag-and-Drop hochgeladen werden.

Schritt 4: (optional) Detailseiten für Widgets

Analog zu Seiten können Widgets auch Detailansichten haben, um Widget-Attribute bearbeiten zu können, die in-place nicht zugänglich gemacht werden können oder sollen, etwa ein Attribut für die Hintergrundfarbe. Die Detailansicht eines Widgets wird per Konvention von dem View unter „app/views/WidgetName/details.html.erb” gerendert.