Hlavní navigace

Ruby on Rails - Vnořené šablony

9. 11. 2009 0:11 (aktualizováno) | Martin Popelák

Prvním praktickým článkem bych vám rád představil plugin do webového frameworku Ruby on Rails nazvaný Nested Layouts (česky pak Vnořené šablony). K porozumění vám bude stačit základní znalost frameworku a web designu.

Při tvorbě aplikací jste se již určitě setkali s problémem, kdy jste části stránky potřebovali v nějakých případech skrývat, či měnit v závislosti na různých okolnostech. Většinou vám z toho vzešlo mnoho šablon, které obsahovaly dlouhý a nepřehledný kód plný podmínek, což byl kámen úrazu hlavně pro web designéry, kteří se v tom lehce ztratili a občas upravili i to, co neměli. Řešení se nabízelo samo. Rozdělit si stránku na několik vrstev, které se mohou libovolně a jednoduše zaměňovat přímo z controlleru. Nebudu vás zbytečně zatěžovat vysvětlováním, kterak věci fungují, ale přejdu rovnou k praktické ukázce.

Mějme jednoduchou webovou aplikaci rozdělenou na dvě části. Část pro všechny návštěvníky a část pro registrované uživatele. Nezaregistrovaným uživatelům chceme zobrazit velký banner po straně a footer element s informacemi. Na barevném schématu vidíte jednotlivé vrstvy pomocí barev (zelená > červená > oranžová) (obr 1). V případě registrovaných uźivatelů nám odpadá velký banner a je nahrazen malým, který je umístěn v pravém sloupci. Tím se nám zůži zbylé místo na obsah. Vrstvy rozděleny (černá > modrá> červená > oranžová) (obr 2). Stejně tak ale můžeme mít jen jednosloupcovou verzi bez reklam (černá > červená > oranžová) (obr 3)

# Příklad kódu, nejprve k obrázku 1
class VisitorsController  ["main_without_banner", "crumb_navigation"]
  end
end

# Pokud využíváte hojně ve své aplikaci ajax a rádi byste aktualizovali jen
# část stránky, není nic lehčího
class RegistredController
  def ajax_update
    respond_to do |format|
      format.js { render :action =>"index", :layout => ["two_columns_layout",
                   "crumb_navigation"]}
    end
  end
end

# V šablonách žádná změna nenastává. Tedy na místě, kde se má vloźit dalśí
# obsah nechtejte jak jste zvyklí

Doufám, že to jako ukázka stačí a pokud byste rádi vyuźili tento plugin, najdete ho na Githubu

nested_layouts_1
nested_layouts_4