Vier Layouts mit dem b4um Bento Generator

Im vorherigen Tutorial haben wir mit b4um:scaffold eine vollständige Produktverwaltung erstellt.

Unser Product besitzt die Felder:

name
description
price
status

und wir haben bereits mehrere Testprodukte angelegt.

Jetzt verwenden wir genau diese Produktverwaltung weiter. Diesmal erstellen wir keine neuen Daten und auch kein neues Model. Stattdessen beschäftigen wir uns ausschließlich mit der Darstellung unserer vorhandenen Produkte.

Der b4um Generator bietet dafür vier verschiedene Layouts:

grid
list
alternating
bento

So können wir für eine bestehende Ressource unterschiedliche Darstellungen ausprobieren und das Layout auswählen, das am besten zum jeweiligen Projekt passt.

Für dieses Tutorial verwenden wir:

b4um_generators 0.1.0

Der b4um Bento Generator

Für eine bereits vorhandene Ressource können wir den Bento-Generator verwenden:

bin/rails generate b4um:bento Product

Wichtig ist dabei:

Product muss bereits existieren.

Außerdem benötigt der Generator das vorhandene Resource-Partial:

app/views/products/_product.html.erb

Beides haben wir bereits durch unser Scaffold aus dem vorherigen Tutorial.

Der Bento-Generator erstellt keine neue Datenbankmigration, keine neuen Routes und keinen zusätzlichen Controller.

Er kümmert sich um die Darstellung unserer vorhandenen Produkte.

Wo wird das Layout erzeugt?

Der Generator erstellt das wiederverwendbare Partial:

app/views/products/_bento.html.erb

Dieses können wir anschließend beispielsweise aus unserer Index-Seite aufrufen:

<%= render "bento", products: @products %>

Dabei wird die vorhandene Collection @products an das Partial übergeben.

Der Generator verändert also nicht unsere Produktdaten. Wir stellen dieselben Datensätze lediglich auf unterschiedliche Weise dar.

1. Grid – das Standardlayout

Wir beginnen mit dem Grid-Layout.

Dafür können wir einfach ausführen:

bin/rails generate b4um:bento Product

Denn Grid ist das Standardlayout des Bento-Generators.

Explizit können wir dasselbe Layout mit:

bin/rails generate b4um:bento Product --layout=grid

erzeugen.

Beide Varianten erzeugen das Grid-Layout.

Das ist ein wichtiger Unterschied:

b4um:bento

ist der Name des Generators.

Das bedeutet nicht, dass automatisch das Layout bento ausgewählt wird.

Ohne --layout verwendet der Generator:

grid

Wie sieht Grid aus?

Das Grid ist eine klassische Kartenübersicht.

Auf größeren Bildschirmen werden die Karten in drei Spalten dargestellt.

Auf Tablets passt sich das Layout auf zwei Spalten an und auf kleineren Smartphone-Displays auf eine Spalte.

Vereinfacht:

Desktop

┌─────────┐ ┌─────────┐ ┌─────────┐
│ Product │ │ Product │ │ Product │
└─────────┘ └─────────┘ └─────────┘
┌─────────┐ ┌─────────┐
│ Product │ │ Product │
└─────────┘ └─────────┘

Das Grid eignet sich besonders dann, wenn alle Einträge ungefähr gleich wichtig sind und eine gleichmäßige Übersicht gewünscht ist.

Das Grid-Layout stellt die vorhandenen Produkte in einem gleichmäßigen responsiven Kartenraster dar.

2. List – kompakte Listenansicht

Als Nächstes probieren wir das List-Layout aus:

bin/rails generate b4um:bento Product --layout=list

Da bereits ein _bento.html.erb vorhanden ist, achten wir jetzt genau auf die Ausgabe des Generators.

Wenn Rails fragt, ob die vorhandene Datei ersetzt werden soll, prüfen wir zunächst, ob sie eigene Änderungen enthält.

Für unsere Tutorial-Testanwendung möchten wir bewusst das nächste Layout ausprobieren. Deshalb darf das bisherige generierte Layout durch die neue Variante ersetzt werden.

Wie sieht List aus?

list verwendet eine kompaktere horizontale Darstellung.

Statt eines Kartenrasters stehen die einzelnen Datensätze stärker untereinander.

Vereinfacht:

┌────────────────────────────────────┐
│ Product                    Aktion  │
│ Beschreibung                       │
└────────────────────────────────────┘

┌────────────────────────────────────┐
│ Product                    Aktion  │
│ Beschreibung                       │
└────────────────────────────────────┘

┌────────────────────────────────────┐
│ Product                    Aktion  │
│ Beschreibung                       │
└────────────────────────────────────┘

Auf kleineren Displays passt sich auch diese Ansicht automatisch an. Der Aktionsbereich wird dort unter den eigentlichen Inhalt verschoben.

Das List-Layout eignet sich gut, wenn viele Einträge übersichtlich untereinander dargestellt werden sollen.

Das List-Layout stellt dieselben Produktdaten in einer kompakten horizontalen Listenansicht dar.

3. Alternating – abwechselnde Darstellung

Jetzt wechseln wir zum dritten Layout:

bin/rails generate b4um:bento Product --layout=alternating

alternating verwendet eine großzügigere Darstellung.

Dabei wechselt der Aktionsbereich zwischen der linken und rechten Seite.

Vereinfacht:

┌─────────────────────────────────────┐
│ Inhalt                     Aktion → │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│ ← Aktion                    Inhalt  │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│ Inhalt                     Aktion → │
└─────────────────────────────────────┘

Dadurch entsteht ein stärker gestalteter, rhythmischer Seitenaufbau.

Auf mobilen Geräten wird daraus automatisch eine einspaltige Darstellung.

Dieses Layout eignet sich besonders für Inhalte, die etwas großzügiger präsentiert werden sollen und bei denen nicht möglichst viele Einträge gleichzeitig sichtbar sein müssen.

Beim Alternating-Layout wechselt der Aktionsbereich zwischen den Seiten und erzeugt dadurch eine abwechslungsreiche Darstellung.

4. Bento – das klassische Bento-Design

Zum Schluss kommen wir zum klassischen Bento-Layout.

Dafür müssen wir die Variante ausdrücklich angeben:

bin/rails generate b4um:bento Product --layout=bento

Das ist besonders wichtig:

bin/rails generate b4um:bento Product

bedeutet Grid.

Für das klassische Bento-Design benötigen wir:

--layout=bento

Was unterscheidet Bento vom Grid?

Beim Grid besitzen die Karten grundsätzlich eine gleichmäßige Rasterstruktur.

Beim klassischen Bento-Layout werden dagegen unterschiedliche Kartengrößen miteinander kombiniert.

Das erzeugt eine abwechslungsreichere Darstellung.

Bei unserem ursprünglichen Scaffold haben wir dieses Prinzip bereits gesehen.

Die Karten verwenden ein wiederkehrendes Muster:

1 → wide
2 → soft
3 → normal
4 → large
5 → normal

Vereinfacht könnte das beispielsweise so aussehen:

┌─────────────────────┐ ┌──────────┐
│                     │ │          │
│       wide          │ │   soft   │
│                     │ │          │
└─────────────────────┘ └──────────┘

┌──────────┐ ┌─────────────────────┐
│          │ │                     │
│  normal  │ │        large        │
│          │ │                     │
└──────────┘ │                     │
             └─────────────────────┘

┌──────────┐
│  normal  │
└──────────┘

Dadurch wirkt die Übersicht weniger wie ein klassisches Raster und stärker wie eine gestaltete Landing- oder Präsentationsseite.

Das klassische Bento-Layout kombiniert unterschiedliche Kartengrößen zu einer abwechslungsreichen Produktübersicht.

Die vier Layouts im Vergleich

Wir haben jetzt dieselben Product-Datensätze in vier unterschiedlichen Darstellungen gesehen.

Layout

Charakter

grid | Gleichmäßiges responsives Kartenraster
list | Kompakte horizontale Liste
alternating | Großzügige, abwechselnde Darstellung
bento | Gemischte Kartengrößen im klassischen Bento-Stil

Keines dieser Layouts verändert unsere gespeicherten Produkte.

Wir ändern lediglich die Darstellung.

Das ist einer der Vorteile des wiederverwendbaren Bento-Partials: Die Daten und die Darstellung bleiben voneinander getrennt.

Welches Layout sollte ich verwenden?

Das hängt davon ab, welche Inhalte dargestellt werden sollen.

Grid eignet sich für eine klassische Übersicht mit vielen gleichwertigen Einträgen.

List ist interessant, wenn viele Datensätze kompakt untereinander dargestellt werden sollen.

Alternating bietet mehr Raum und eignet sich für stärker präsentationsorientierte Inhalte.

Bento eignet sich für eine visuell abwechslungsreiche Übersicht, bei der unterschiedliche Kartengrößen Teil des Designs sein sollen.

Und wir können die Entscheidung später wieder ändern, ohne unser Product-Modell oder die gespeicherten Datensätze neu anzulegen.

Ein Partial – verschiedene Collections

Das erzeugte Partial verwendet eine lokale Collection.

Normalerweise verwenden wir:

<%= render "bento", products: @products %>

Wir sind aber nicht auf @products festgelegt.

Wenn unser Controller beispielsweise eine Auswahl besonders wichtiger Produkte bereitstellt, könnten wir dasselbe Partial auch so verwenden:

<%= render "products/bento", products: @featured_products %>

Dadurch lässt sich dieselbe Darstellung an unterschiedlichen Stellen der Anwendung wiederverwenden.

Keine neuen Models, Routes oder Controller

Der Bento-Generator ist bewusst auf die Darstellung beschränkt.

Bei:

bin/rails generate b4um:bento Product --layout=grid

oder einer der anderen Varianten werden keine neuen:

Migrationen
Routes
Controller

benötigt.

Wir arbeiten mit der bereits vorhandenen Ressource und ihrem Resource-Partial.

Das unterscheidet b4um:bento deutlich von:

b4um:scaffold

Das Scaffold baut die eigentliche CRUD-Grundlage auf.

Der Bento-Generator kümmert sich anschließend um eine wiederverwendbare Darstellung dieser vorhandenen Ressource.

Das haben wir gelernt

Der b4um Bento-Generator bietet vier Layoutvarianten:

bin/rails generate b4um:bento Product --layout=grid
bin/rails generate b4um:bento Product --layout=list
bin/rails generate b4um:bento Product --layout=alternating
bin/rails generate b4um:bento Product --layout=bento

Ohne explizite Layout-Angabe:

bin/rails generate b4um:bento Product

wird standardmäßig:

grid

verwendet.

Damit können wir eine vorhandene Ressource unterschiedlich präsentieren, ohne ihre Datenstruktur verändern zu müssen.

Im nächsten Tutorial

Nachdem wir verschiedene Karten- und Präsentationslayouts kennengelernt haben, können wir uns eine völlig andere Darstellungsform ansehen:

Tabellen mit b4um:table.

Dort verwenden wir wieder dieselben Products und erzeugen daraus eine responsive Tabellenansicht.

So können wir anschließend direkt vergleichen, wann sich Karten, Listen oder eine klassische Tabelle besser für unsere Daten eignen.

Meld dich an und schreibe ein Kommentar