Extracting Superviews
Embedding views directly in controllers is a powerful way to build or prototype user interfaces for applications, but itβs not for everybody. Some developers like to keep views in the ./app/views folder, so letβs look at how that can be done in a 100% Phlex Rails application.
A controller with inline views
In the last video, we ended up with the UsersController with inline views.
π Unlock content
Purchase this course to unlock this video, source code, and content.
class UsersController < βββββββββββββββββββββ
ββββββ false
include βββββββββ::βββββββ
include βββββββββ::βββββ::ββββββββββββββββ
βββββββββββββ do
βββββ = ββββ.ββββ(ββββββ[:id])
βββββββββ βββββ
end
class View < βββββ::ββββ
attr_writer :user
def βββββ = βββββ.ββββ
def βββββββββββββββ
super do
ββββββ βββββ::βββββββ::βββ.βββ(title: βββββ.ββββ) do
βββββββ(class: "container-lg") do
β βββββ βββββββββββ βββββββββ βββββ ββββββββ βββββββββββ βββ βββββββββ
β
ββ(class: "font-bold text-3xl") { βββββ }
βββ(class: "card bg-base-200") do
βββ(class: "card-body") do
yield
end
end
end
end
end
end
end
class Form < ββββββββββ::ββββ
def βββββββββββββ
βββ βββββ(:name).ββββ
βββ βββββ(:email).βββββ
βββ(class: "flex flex-row items-center gap-4"){
ββββββ "Save profile", class: "btn btn-primary"
β(href: βββββββ(action: :show)) { "Back to profile" }
}
end
end
class Show < ββββ
def βββββββββββββ
ββ(class: "text-xl font-bold") { "Profile" }
p(class: "text-lg") { "How you appear in Thingybase" }
ββββββ ββββββββββ::βββββ::ββββ.βββ βββββ do
ββ.βββββ :name
ββ.βββββ :email
end
p do
βββββββ(ββββββββββββββ(βββββ), class: 'btn btn-outline'){ "Edit profile" }
end
end
end
class Edit < ββββ
def βββββ = "Editing #{βββββ.ββββ}"
def βββββββββββββ
ββββββ ββββ.βββ(βββββ)
end
end
def ββββββ
if ββββ ββββ.βββ(βββββ)
βββββββββββ action: :show
else
ββββββ βββββββββ(:edit), status: :unprocessable_entity
end
end
end
ββ βββ ββββββββ ββ ββββ ββ ββββ ββββ ββββ ββββ βββ βββ βββββ
Move each view into its own file
ββββββ ββ βββββββ β ββββ ββββ ββ βββ βββββββββββ βββββ ββββ ββ ββββ ββββ ββ βββββββββββββββββββββββββ
class UsersController < βββββββββββββββββββββ
β βββ
class View < βββββ::ββββ
attr_writer :user
def βββββ = βββββ.ββββ
def βββββββββββββββ
super do
ββββββ βββββ::βββββββ::βββ.βββ(title: βββββ.ββββ) do
βββββββ(class: "container-lg") do
β βββββ βββββββββββ βββββββββ βββββ ββββββββ βββββββββββ βββ βββββββββ
β
ββ(class: "font-bold text-3xl") { βββββ }
βββ(class: "card bg-base-200") do
βββ(class: "card-body") do
yield
end
end
end
end
end
end
end
β βββ
end
ββββ βββββββββ ββ ββββ ββββββββββββ ββ ββββββββ βββ ββββ ββ βββ
β βββββββββββββββββββββββββ
class Views::Users::View < βββββ::ββββ
attr_writer :user
def βββββ = βββββ.ββββ
def βββββββββββββββ
super do
ββββββ βββββ::βββββββ::βββ.βββ(title: βββββ.ββββ) do
βββββββ(class: "container-lg") do
β βββββ βββββββββββ βββββββββ βββββ ββββββββ βββββββββββ βββ βββββββββ
β
ββ(class: "font-bold text-3xl") { βββββ }
βββ(class: "card bg-base-200") do
βββ(class: "card-body") do
yield
end
end
end
end
end
end
end
Move the Form view
ββββ ββββ βββ ββββ βββ βββββββββ βββ
ββββββββββββββββββββββββββ
class Views::Users::Form < ββββββββββ::ββββ
def βββββββββββββ
βββ βββββ(:name).ββββ
βββ βββββ(:email).βββββ
βββ(class: "flex flex-row items-center gap-4"){
ββββββ "Save profile", class: "btn btn-primary"
β(href: βββββββ(action: :show)) { "Back to profile" }
}
end
end
βββ ββ βββ ββββ βββ βββ βββββ βββββ βββββ
Move the remaining views
ββββββββ βββββ βββββ ββββββ βββ βββββββββ βββββ βββββ ββββββ βββ βββ ββββ ββ βββββββ ββ βββ ββββββ βββββββββββββ ββββ βββββββ ββββ ββββββββββ ββ ββββ βββββ ββββ ββ βββββββββββββ βββββ ββ βββββββ βββ βββββ ββββββ ββββ ββββ βββ βββββ ββββ β ββββ ββββββββ ββββ βββ βββββ ββββ ββββββ
module Views::Users
class Show < ββββ
def βββββββββββββ
ββ(class: "text-xl font-bold") { "Profile" }
p(class: "text-lg") { "How you appear in Thingybase" }
ββββββ ββββββββββ::βββββ::ββββ.βββ βββββ do
ββ.βββββ :name
ββ.βββββ :email
end
p do
βββββββ(ββββββββββββββ(βββββ), class: 'btn btn-outline'){ "Edit profile" }
end
end
end
end
βββββ βββ ββββββ βββ βββ βββββββββ ββββββ ββββββββββ βββββ ββ β ββββββββββ ββββ ββββββ βββββββββββ βββ ββ βββ ββββ ββββββ ββββ ββ ββββββ
Including the views back in the controller
ββββ βββ βββ βββββ βββ βββββββββ ββββ βββββ ββββββββββ ββββ ββββββ βββ ββββββββββββ ββββββ ββββββ ββ ββββββββ ββ βββ βββββββββββ
class UsersController < βββββββββββββββββββββ
β βββ
include βββββ::βββββ
β βββ
end
βββ βββββββββ ββββββββββ ββββ βββββ ββββ βββββ
class UsersController < βββββββββββββββββββββ
ββββββ false
include βββββββββ::βββββββ
include βββββββββ::βββββ::ββββββββββββββββ
include βββββ::βββββ
βββββββββββββ do
βββββ = ββββ.ββββ(ββββββ[:id])
βββββββββ βββββ
end
def ββββββ
if ββββ ββββ.βββ(βββββ)
βββββββββββ action: :show
else
ββββββ βββββββββ(:edit), status: :unprocessable_entity
end
end
end
How are the views found?
βββ βββββββ ββββββββββββ ββββ βββ βββββ βββββ βββββ βββββββ ββββ ββββ ββββββ ββββ ββββ βββ βββββββββββ βββββ βββββββββ βββ ββββ ββ βββ βββββ ββββββββ ββ βββ βββββ βββ ββββββ ββ ββββ ββββββββ ββ ββββ βββββββ βββββββ βββββββ βββββ βββ ββ ββββ ββββ ββββββββ ββ βββ ββββ ββββββββββ ββββββ βββββββββββ βββ ββββ βββββ
Itβs a choice of style
βββββββ βββββββ ββββββββββ ββββββ ββ βββββ βββββ βββββββ βββββ ββ βββββ βββ βββββ βββ βββββββ ββββ ββββββ ββ βββββ ββββββββββββ ββββ ββββββ β ββββββββ ββ ββββββ ββββββ βββ ββββββββ βββββββ ββ ββββββ βββββ ββββ βββββ βββ βββββ ββ ββββ ββββ βββ ββ ββββββββ ββ βββββ ββββββββββββ