Kurs Ruby on Rails – Lekcja 6 – Stylowanie widoków
Tworząc warstwę widoku (Frontend) możemy się posługiwać różnymi frameworkami, językami oraz tworzyć struktury plików. Jednak wszystko finalnie musi zostać przeprocesowane do formatu, który jest obsługiwany przez przeglądarki internetowe. Do tego właśnie służy webpack. Kompiluje naszą aplikację do plików wynikowych, statycznych, które są przesyłane do użytkowników w momencie gdy odwiedzą naszą aplikację.
Webpacker jest to gem, który zawiera w sobie webpacka. Paczka jest zawarta domyślnie w aplikacjach rails 6. W poprzednich i w nowszej wersji są zastosowane inne rozwiązania. Jako że kurs wystartował, gdy railsy były w wersji 6, skupimy się tu na webpacku. Nic również nie stoi na przeszkodzie, żeby użyć webpackera w najnowszej wersji railsów.
Każdy widok, który tworzyliśmy w poprzednich lekcjach jest wstrzykiwany w konkretne miejsce layoutu. Domyślnie ładowany jest application layout mieszczący się w app/views/layouts/application.html.erb, w którym już dodawaliśmy powiadomienia. Widzimy też, że w nagłówku (head) strony ładowane są dwie rzeczy:
stylesheet_link_tag 'application'javascript_pack_tag 'application' W prostych słowach, są to spisy plików, które mają być załadowane z zawartością CSS (stylesheet) oraz JS (javascript).CSS
Dla CSS i stylesheet_link_tag aplikacja szuka pliku o nazwie application w app/assets/stylesheets. Zawartość tego pliku to komentarz opisujący do czego on służy oraz:
*= require_tree .
*= require_selfrequire_tree . – oznacza, że wszystkie pliki zawarte w tym samym katalogu zostaną załączone do projektu. Jest to wygodne rozwiązanie, ponieważ dodając nowy plik nie musimy go dopisywać do manifestu. Niestety często bywa tak, że potrzebujemy je ładować w konkretnej kolejności, ponieważ mogą one od siebie zależeć. Wtedy musimy ładować każdy plik z osobna w wybranej kolejności, zamiast używać require tree. require_self – oznacza załączenie tego (application.css) pliku po tym jak zostaną zaimportowane wszystkie pliki z katalogu.
JS
Dla JS i javascript_pack_tag plik wejścia (entry point) znajduje się w app/javascript/packs. Rola tego pliku jest dokładnie taka sama jak dla CSS, tzn. zawiera spis rzeczy, które mają być załadowane na stronie. Domyślnie znajduje się tam już kilka paczek, które są ładowane, więc możemy zaobserwować w jaki sposób dodać kolejne.
jQuery
JQuery to paczka zawierająca zbiór metod, ułatwiających pisanie funkcjonalności. Jest ona bardzo powszechnie stosowana, głównie w aplikacjach, które nie używają bardziej zaawansowanych frameworków jak np. React. Dzięki jQuery możemy w prosty sposób modyfikować stronę, wysyłać asynchroniczne zapytania. Wiele paczek, wymaga go do poprawnego działania.
Webpack działa na podobnej zasadzie do bundlera, którego używaliśmy w poprzednich lekcjach. Aby zainstalować jquery w naszym projekcie, piszemy w terminalu:
yarn add jqueryPolecenie to ściągnie paczkę oraz doda ją do packages.json, który jest odpowiednikiem Gemfile, oraz yarn.lock, który jest odpowiednikiem Gemfile.lock.
Aby móc korzystać z niej we wszystkich plikach bez potrzeby importowania, możemy ustawić w webpacku, aby ładował ją globalnie i przypisał do zmiennej jquery. Dodatkową konwencją tej biblioteki jest przypisanie jej wywołania do $, dzięki czemu wygodniej pisze się skrypt. Otwieramy plik config/webpack/environment.js i doprowadzamy go do takiej postaci:
const { environment } = require('@rails/webpacker')
const webpack = require("webpack");
environment.plugins.prepend(
"Provide",
new webpack.ProvidePlugin({
$: "jquery/src/jquery",
jQuery: "jquery/src/jquery",
})
);
module.exports = environmentBootstrap
Boostrap jest to zbiór stylów oraz skryptów JS, które umożliwiają nam stworzyć responsywne, estetyczne widoki. Aby go zainstalować używamy ponownie yarna.
yarn add bootstrapDodajemy go do naszego application.js, ale tym razem również do application.css, jako że musimy również dodać pliki ze stylami. JS:
import "bootstrap"CSS:
*= require bootstrapW dokumentacji bootstrapa w sekcji Introduction możemy się dowiedzieć, że do poprawnego działania potrzebny jest również Popper, który jest używany do obsługi tooltipów. Bez czytania dokumentacji, również się dowiemy, że jest on potrzebny 🙂 bo w konsoli przeglądarki zobaczymy błąd:
Cannot find module '@popperjs/core'A więc dodajemy poppera:
yarn add popper.jsJego nie musimy dodawać do application.js, ponieważ nie będziemy go używać. Będzie on dodawany w tych plikach, które go używają i Bootstrap sam sobie o to zadba.
Teraz, gdy włączycie serwer i wejdziecie na localhost, zobaczycie, że wygląd strony się troszkę zmienił.
Zacznijmy od dodania marginesów po bokach strony, aby zawartość była bardziej na środku. Zakładając, że nigdzie nie będziemy dodawać elementów dochodzących do krawędzi, możemy dodać taki margines globalnie, tj. dla wszystkich stron. Osiągniemy to edytując layout app/views/layouts/application.html i umieszczając yield w środku odpowiedniej klasy bootstrapa, w taki sposób:
<div class='container'>
<%= yield %>
</div>Opis klasy: https://getbootstrap.com/docs/5.1/layout/containers
div jest to znacznik HTML, który sam z siebie w żaden sposób nie modyfikuje treści. Możemy mu przypisać klasy, które będą wykorzystane przez pliki CSS do ustawienia wyglądu.
Teraz możemy zmodyfikować odnośniki tak, aby wyglądały ciekawiej. https://getbootstrap.com/docs/5.1/helpers/colored-links/
Przy każdym elemencie jest opis jego opcji oraz w jaki sposób go zastosować. Użyjmy jakiegoś koloru dla linku w app/views/users/index.html.
Jak widzimy, w bootstrapie w przykładach użycia znajduje się czysty HTML:
<a href="#" class="link-success">Success link</a>U nas ten link wygląda aktualnie w ten sposób:
<%= link_to 'Add New User', new_user_path %>Każda metoda pomocnicza w railsach generująca kawałek HTML, ma możliwość ustawienia klas. Aby dodać link-warning, musimy zmodyfikować naszą linijkę w następujący sposób:
<%= link_to 'Add New User', new_user_path, class: 'link-warning' %>Po odświeżeniu strony zobaczymy, że nasz tekst zmienił kolor na zielony.
Bootstrap dostarcza nam wiele gotowych komponentów, między innymi przyciski. https://getbootstrap.com/docs/5.1/components/buttons/
Użyjmy teraz primary button do naszego linku, używając obu klas btn i btn-success
<%= link_to 'Add New User', new_user_path, class: 'btn btn-success' %>Po odświeżeniu strony zobaczymy, że nasz tekst zmienił się w przycisk.
Oczywiście nic nie stoi nam na przeszkodzie, aby łączyć klasy
<%= link_to 'Add New User', new_user_path, class: 'btn btn-success link-warning' %>Na stronie boostrapa wyszukujemy element table. Pokaże nam się przykład, w jaki sposób powinniśmy skonstruować naszą tabelę oraz kilka innych wariantów. Kluczowe jest tutaj nadanie naszej tabeli odpowiedniej klasy. Dodajmy więc ją do naszej tebeli użytkowników:
<table class="table">Po odświeżeniu zobaczymy już ładnie sformatowaną i czytelną tabelę.
Bootstrap oferuje bardzo wiele możliwości poprzez łączenie ze sobą różnych klas, w zależności od naszych potrzeb. Jest to trochę jak układanie klocków.
Ostylujmy teraz nasz formularz dodawania użytkownika app/views/users/_user.html Dla pól formularzy jest klasa form-control. https://getbootstrap.com/docs/5.1/forms/form-control/
<%= form.text_field :name, class: 'form-control' %>Jak widać, klasa ta rozciąga nam pole na całość strony. Jest to bardzo nieczytelne dla użytkownika, tym bardziej, że nie jest to pole, w które będziemy wpisywać długi tekst. Do tego nie posiadamy żadnej przerwy między polem, a przyciskiem.
Użyjmy więc klasy mb-3, która znajduje się w przykładzie dla form-control.
<div class='mb-3'>
<%= form.text_field :name, class: 'form-control' %>
</div>Klasa ta pochodzi z tego miejsca: https://getbootstrap.com/docs/5.1/utilities/spacing/#notation i oznacza dodanie marginesu pod elementem o wielkości 3.
Aby nasze pole nie było takie długie, musimy zmniejszyć mu kontener, w którym się znajduje. Możemy do tego użyć siatki opisanej tutaj: https://getbootstrap.com/docs/5.1/layout/grid/ Za jego pomocą możemy ustawić różne siatki dla różnych szerokości ekranu. Na dużych ekranach możemy wyświetlić np. 5 pól obok siebie, a na telefonach wyświetlać je po jednym w wierszu. Użyjmy Medium tak, aby wyeliminować tylko małe rozdzielczości.
Cyfra przy klasie oznacza jaką częścią całego wiersza ma być nasz element. Grid bootstrapa posiada 12 kolumn w wierszu. Jeśli chcemy, by nasz element był do połowy strony, używamy cyfry 6. Wtedy możemy po drugiej stronie zmieścić jeszcze drugi element o wielkości 6. Jeśli drugi element będzie mieć więcej niż 6, oznaczać to będzie, że nie zmieści się już w tym samym wierszu i zostanie wyświetlony poniżej.
Ponieważ nasze pole nie wymaga dużo miejsca, dajmy mu wielkość 2 kolumn:
<div class='mb-3 col-md-2'>
<%= form.text_field :name, class: 'form-control' %>
</div>Aby wszystko nabrało bardziej profesjonalnego wyglądu, stwórzmy również label nad naszym polem:
<%= form.label :name %>I oczywiście ostylujmy przycisk. Aby nadać mu klasę, musimy dać mu również tekst, który ma zostać wyświetlony.
<%= form.submit 'Create User', class: 'btn btn-success' %>Jeśli potrzebujemy dodać jakiś styl, którego nie ma w bootstrapie, lub po prostu potrzebujemy gdzieś innej kolorystyki, możemy to osiągnąć poprzez stworzenie własnych CSSów.
Podczas używania scaffoldów z poprzednich lekcji, wygenerowały się nam pliki css do każdego z zasobów. Nie oznacza to jednak, że klasy z users.css nie będą użyte dla np. komentarzy. Ważne jest więc rozważne konstruowanie klas tak, aby było nam wygodnie w przyszłości.
Dodajmy klasę w pliku app/assets/stylesheets/users.scss
.users-header {
text-shadow: 2px 2px red;
}A następnie, użyjmy jej w app/views/users/index.html
<h1 class='users-header'>Users</h1>Po odświeżeniu zobaczymy czerwony cień pod naszym nagłówkiem.
Opcje CSS możecie znaleźć na stronie: https://www.w3schools.com/css/default.asp A różnice między .css, a .scss tutaj: https://sass-lang.com/guide
Pliki JS dodajemy w app/javascript. Dla porządku i aby nie dodawać ich do katalogu z paczkami, możemy stworzyć nowy katalog np. scripts, a w nim stworzyć plik users.js.
Następnie musimy dodać nasz plik do naszej paczki, aby był ładowany na stronie, a więc w app/javascript/packs/application.js dodajemy:
require("../scripts/users");Za pomocą jquery dodajmy funkcję, która sprawi, że po kliknięciu w nagłówek Users pojawi się nam komunikat:
$(".users-header").on("click", () => {
alert("kurs ruby on rails");
});W ten sposób nasz kod zostanie wywołany na stronie, jednak najprawdopodobniej nie zadziała. Stanie się tak dlatego, że skrypt zostanie wykonany w pierwszej kolejności, jeszcze przed stworzeniem zawartości strony. Poszuka on elementów z klasą users-header by nadać im listener na kliknięcie, jednak żadnego nie znajdzie. Jest bardzo wiele sposobów na naprawienie tego problemu. My skupimy się na dodaniu funkcji, która poczeka z wykonaniem skryptu na to, aż się załaduje cała strona. Po zmianie, nasz plik będzie wyglądać w następujący sposób:
$(document).ready(() => {
$(".users-header").on("click", () => {
alert("kurs ruby on rails");
});
});Teraz (po odświeżeniu strony), gdy klikniemy na nagłówek Users wyświetli nam się nasz komunikat.
Pobierzmy logo BinarApps ze strony: https://binarapps.com/wp-content/uploads/2019/11/logo-2.svg I umieśćmy go w katalogu app/assets/images.
Railsy posiadają specjalną metodę, która dodaje na stronę rzeczy zawarte w tym katalogu. Dodajmy do naszej listy userów dodany wcześniej obrazek:
<%= image_tag "logo-2.svg" %>Wiedząc już w jaki sposób dodać CSS, możemy nadać mu klasę i style, aby było mniejsze.
Dodajemy klasę do obrazka:
<%= image_tag "logo-2.svg", class: 'binar-logo' %>I dodajemy styl CSS:
.binar-logo {
width: 100px;
}
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://www.w3schools.com/css/
https://cssguidelin.es/
https://www.w3schools.com/jquERy/default.asp
Share
Przeczytaj również o...
It has already become clear that User Experience (UX) is a key factor in shaping how companies build a business. The customer-centric approach has almost completely replaced […]
July 21, 2022
What if there was one simple method to find opportunities for improved design, uncover UX problems, and learn about your target users’ behavior and preferences? Would you […]
July 12, 2022