Mehr zu Twitter Bootstrap

In dieser Episode setzen wir das Twitter Bootstrap-Projekt fort und zeigen, wie Sie Flash-Meldungen anzeigen, Formularvalidierungen mit SimpleForm hinzufügen, das Layout mit Variablen anpassen und auf die Verwendung von Sass umschalten können.

In der vorherigen Episode haben wir Ihnen gezeigt, wie Sie Twitter Bootstrap mit Rails verwenden können. Dieses Mal werden wir das Projekt fortsetzen, das wir beim letzten Mal begonnen haben. Wir zeigen Ihnen, wie Sie Formulare mit Simple Form verbessern, wie Sie Twitter Bootstrap mit LESS anpassen und wie Sie bei Bedarf auf SASS umsteigen können.

Die Benutzererfahrung verbessern

Hier sind wir das letzte Mal stehen geblieben. Wir werden damit beginnen, uns auf einige der Benutzererfahrungsprobleme zu konzentrieren, die diese App hat.

Eines dieser Probleme ist, dass Flash-Meldungen nicht angezeigt werden. Wenn wir ein Produkt über das Bearbeitungsformular aktualisieren, wird keine Flash-Meldung angezeigt, die besagt, dass das Produkt aktualisiert wurde. Wenn wir uns den Abschnitt zu den Komponenten der Dokumentation ansehen, werden wir feststellen, dass es einen Abschnitt zu Benachrichtigungen (Alerts) gibt, und diese eignen sich perfekt, um Flash-Meldungen für den Benutzer anzuzeigen. Die Standardoptionen ermöglichen es uns, drei Arten von Benachrichtigungen anzuzeigen: Erfolg (success), Information und Warnung. Um die Update-Meldung anzuzeigen, müssen wir die Flash-Meldung einfach in ein div mit einer CSS-Klasse von "alert-success" einbetten.

Wir werden die Flash-Meldungen zur Layoutdatei der Anwendung hinzufügen, innerhalb des Containers, aber oberhalb des Inhalts.

// app/views/layouts/application.html.erb

  <% flash.each do |name, msg| %>
    <div class="alert alert-<%= name.to_sym == :notice ? "success" : "error" %>">
      <%= msg  %>
    </div>
  <% end %>

Hier durchlaufen wir die Meldungen und zeigen jede einzelne an. Wir umschließen jede Meldung in einem div und verwenden den Namen der Flash-Meldung, um zu bestimmen, ob sie als Erfolgsbenachrichtigung oder als Fehlerbenachrichtigung angezeigt werden soll. Wenn wir jetzt ein Produkt aktualisieren, sehen wir die Flash-Meldung.

Um die Doppelung los zu werden löschen wir notice aus der index.html.erb und der show.html.erb Datei.
Twitter Bootstrap erleichtert das Hinzufügen einer Schaltfläche zum Schließen zu einer Benachrichtigung. Alles, was wir tun müssen, ist, eine weitere Zeile Code hinzuzufügen.

Es könnte sein das wir bootstrap neu installieren müssen und neu einbinden. Einmal per npm install bootstrap und in der app/javascript/application.js
import './bootstrap'; hinter dem jquery import.

// app/views/layouts/application.html.erb

<% flash.each do |name, msg| %>
<div class="alert-dismissible fade show alert alert-<%= name.to_sym == :notice ? "success" : "danger" %>"
  role="alert">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  <%= msg %>
</div>
<% end %>

Diese Funktionalität wird über JavaScript gesteuert. Wir haben noch nicht viel über das JavaScript gesprochen, das Bootstrap bereitstellt, aber es umfasst viele nützliche jQuery-Plugins. Wir können diese verwenden, um Modalfenster, Dropdowns, Registerkarten, Tooltips, Popovers zu erstellen, die Informationen anzeigen, wenn ein Benutzer über ein Element schwebt, und vieles mehr. Alle diese Plugins sind bereits in unserer Rails-Anwendung enthalten. Wenn wir in die application.js-Datei schauen, sehen wir, dass eine twitter/bootstrap-Datei eingebunden ist, die alle Plugins lädt. Es gibt auch eine bootstrap.js-Datei, die einige der Plugin-Funktionalitäten aktiviert.

// app/javascript/application.js

import "jquery";
import "./popper.js";
import "./bootstrap";

Hier fügen/aktivieren wir, popover:

const popoverTriggerList = document.querySelectorAll(
  '[data-bs-toggle="popover"]'
);
const popoverList = [...popoverTriggerList].map(
  (popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl)
);

Und können es wie folgt aktivieren.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover"
  data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>

Validierungen

Ein weiterer Bereich, in dem wir die Benutzererfahrung in unserer Rails-Anwendung verbessern können, betrifft die Formulare, insbesondere im Zusammenhang mit Validierungen. Auf dem Produktmodell haben wir noch keine Validierungen, daher werden wir damit beginnen, einige hinzuzufügen.

// app/models/product.rb

class Product < ApplicationRecord
  validates_presence_of :name, :price
end

Wenn wir jetzt versuchen, ein Produkt zu bearbeiten und eines der Felder leer lassen, werden wir zurück zum Formular geleitet, aber es werden keine Fehlermeldungen angezeigt, um uns mitzuteilen, was falsch ist. Twitter Bootstrap bietet eine gute Möglichkeit, Fehlermeldungen in einem Formular anzuzeigen, und es färbt das Formularfeld für ungültige Felder ein. Daher werden wir dies in unserem Produktformular verwenden. Das Problem dabei ist, dass das Markup für unser Formular bereits ziemlich komplex ist. Wenn wir versuchen würden, die Logik für die Validierungen darin einzubetten, würde die Seite schnell unübersichtlich werden.

// app/assets/stylesheets/_main.scss

#error_explanation {
  color: red;

  ul {
    color: red;
    margin: 0 0 30px 0;
  }
}

.field_with_errors {

  .form-control {
    border-color: #dc3545;

    &:focus {
      box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, .25);
    }
  }

  +.invalid-feedback {
    display: block;
  }
}

Jetzt noch unsere form etwas erweitern mit einem invalid-feedback.

// app/views/products/_form.html.erb

<fieldset>
  <div class="col-md-6">
    <%= form.label :name, class: 'form-label' %>
    <div class="forms">
      <%= form.text_field :name, class: 'form-control' %>
      <div class="invalid-feedback">
        Please provide a valid name.
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <%= form.label :price, class: 'form-label' %>
    <div class="forms">
      <%= form.text_field :price, class: 'form-control' %>
      <div class="invalid-feedback">
        Please provide a valid price.
      </div>
    </div>
  </div>

  <div class="col-md-6 mt-5">
    <%= form.submit nil, class: 'btn btn-primary' %>
    <%= link_to 'Cancel', products_path, class: 'btn' %>
  </div>
</fieldset>

Um uns hier zu helfen, werden wir eine Gem verwenden, um das Formular auszugeben. SimpleForm hat vor Kurzem Bootstrap-Unterstützung hinzugefügt, und obwohl wir Formtastic mit dem Formtastic Bootstrap-Gem verwenden könnten, werden wir hier SimpleForm verwenden. Um es zu verwenden, müssen wir das entsprechende Gem zur Gemfile hinzufügen und dann bundle install ausführen.

// Gemfile

gem 'simple_form'

Als nächstes müssen wir den Installationsgenerator von SimpleForm ausführen. Beachte, dass wir die Option --bootstrap übergeben, damit die Twitter Bootstrap-Variante verwendet wird.

// app/views/products/_form.html.erb

<%= simple_form_for @product, :html => { :class => 'form-horizontal' } do |f| %>
  <fieldset class="col-md-6">

    <%= f.input :name %>
    <%= f.input :price %>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', products_path, :class => 'btn' %>
    </div>
  </fieldset>
<% end %>

Wenn du mit der Funktionsweise von SimpleForm nicht vertraut bist, wirf einen Blick auf https://github.com/heartcombo/simple_form, in der es detailliert behandelt wird. Du kannst nun unser Produktformular ausprobieren. Wenn wir es neu laden und dann versuchen, ein Produkt ohne Namen zu aktualisieren, sehen wir eine Fehlermeldung, die vom Namensfeld angezeigt wird.

Die Anpassung des Stils

Unsere Anwendung sieht jetzt viel besser aus als zuvor, aber was ist, wenn wir sie weiter anpassen und ihr eine einzigartige Note verleihen möchten? Zum Beispiel, wie ändern wir die Farbe der Links und Schaltflächen oder das Erscheinungsbild des Headers? Wenn du dir den Abschnitt "Using LESS" in der Dokumentation ansiehst, findest du eine Liste von Variablen, die festgelegt werden können, um das Erscheinungsbild unserer Seite anzupassen. Wir können die Farben, die Größen und so weiter ändern. Selbst diese Seite listet nicht alle verfügbaren Variablen auf; um diese zu sehen, müssen wir den Quellcode betrachten.

// app/assets/stylesheets/_main.scss

.bg-body-tertiary {
  background-color: #555 !important;
  .navbar-brand,
  .nav-link {
    color: #eee;
  }
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

Wenn wir jetzt eine Seite auf der Website neu laden, ist der Header in einem helleren Grauton.

Meld dich an und schreibe ein Kommentar