Jak nie trudno zauważyć, skrypty widoków z poprzedniej części zawierały jedynie fragmenty kodu HTML, a nie całe strony. Jest to zamierzone i ma na celu przygotowanie akcji tak, aby zwracały jedynie zawartość związaną z samą akcją, a nie aplikacją jako taką.
Teraz należy umieścić generowaną treść w pełnoprawnej stronie HTML. Przydatne jest również nadanie całej aplikacji jednolitego, zwięzłego wyglądu. Aby to osiągnąć zostanie użyty globalny layout (wzór) strony.
Zend Framework używa dwóch wzorów projektowych przy implementacji layoutów: Widok dwustopniowy (Two Step View) oraz Widok złożony (Composite View). Widok dwustopniowy jest najczęściej powiązany z Widokiem przekształconym (Transform View) - podstawową cechą jest założenie, że aplikacja tworzy widok podrzędny, który zostaje umieszczony w widoku głównym (layout) i dopiero taki - złożony widok jest przetwarzany do pokazania użytkownikowi. Widok złożony natomiast, zakłada tworzenie jednego bądź wielu autonomicznych widoków bez relacji rodzic-potomek.
Zend_Layout jest komponentem, który łączy te wzorce w aplikacji Zend Framework. Każdy skrypt widoku (view script) posiada własne elementy i nie musi zajmować się wyświetlaniem elementów wspólnych dla całej strony.
Mogą powstać sytuacje, w których niezbędne okaże się umieszczenie globalnych elementów w pojedynczym widoku. W tym celu Zend Framework udostępnia szereg pojemników (placeholders), które umożliwiają dostęp do takich elementów z poziomu lokalnego skryptu widoku.
Aby rozpocząć korzystanie z Zend_Layout
należy
najpierw poinstruować bootstrap aby
włączył zasób Layout
. Można to osiągnąć za pomocą komendy
zf enable layout (w katalogu tworzonego projektu):
% zf enable layout Layouts have been enabled, and a default layout created at application/layouts/scripts/layout.phtml A layout entry has been added to the application config file.
Tak jak jest to napisane w potwierdzeniu komendy, plik
application/configs/application.ini
został zaktualizowany i
zawiera następujący wpis w sekcji production
:
; application/configs/application.ini ; Dodane do sekcji [production]: resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"
W rezultacie plik INI powinien wyglądać następująco:
; application/configs/application.ini [production] phpSettings.display_startup_errors = 0 phpSettings.display_errors = 0 includePaths.library = APPLICATION_PATH "/../library" bootstrap.path = APPLICATION_PATH "/Bootstrap.php" bootstrap.class = "Bootstrap" appnamespace = "Application" resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers" resources.frontController.params.displayExceptions = 0 resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts" [staging : production] [testing : production] phpSettings.display_startup_errors = 1 phpSettings.display_errors = 1 [development : production] phpSettings.display_startup_errors = 1 phpSettings.display_errors = 1
Dodany zapis powoduje, że aplikacja szuka skryptów widoku w katalogu
application/layouts/scripts
.
Należy zauważyć, iż taki katalog wraz z plikiem layout.phtml
zostały utworzone w strukturze projektu przez narzędzie wiersza poleceń zf.
Następną przydatną rzeczą będzie upewnienie się, że deklaracja XHTML DocType jest umieszczona i poprawnie sformułowana. Aby to osiągnąć należy dodać zasób do bootstrapa.
Najprostszym sposobem na dodanie zasobu bootstrap jest utworzenie chronionej metody o
nazwie zaczynającej się na _init
. Celem jest zainicjalizowanie
deklaracji DocType więc nowa metoda w klasie bootstrap może się nazywać
_initDoctype()
:
// application/Bootstrap.php class Bootstrap extends Zend_Application_Bootstrap_Bootstrap { protected function _initDoctype() { } }
W ciele metody należy powiadomić zasób widoku aby użył odpowiedniego DocType.
Tylko skąd wziąć obiekt widoku? Najłatwiejszym rozwiązaniem jest
zainicjalizowanie zasobu View
. Potem można pobrać
obiekt i go użyć.
Aby zainicjalizować zasób widoku należy dodać następującą linijkę do pliku
application/configs/application.ini
w sekcji
production
:
; application/configs/application.ini ; Dodanie do sekcji [production]: resources.view[] =
Ten zapis inicjalizuje widok bez żadnych opcji (pisownia '[]' oznacza, że "view" jest tablicą bez żadnych kluczy ani wartości).
Teraz, skoro widok jest skonfigurowany, można wrócić do metody
_initDoctype()
.
W niej należy upewnić się, że zasób View
został
zainicjowany (na podstawie zapisów w pliku konfiguracyjnym), pobrać obiekt
widoku i go skonfigurować:
// application/Bootstrap.php class Bootstrap extends Zend_Application_Bootstrap_Bootstrap { protected function _initDoctype() { $this->bootstrap('view'); $view = $this->getResource('view'); $view->doctype('XHTML1_STRICT'); } }
Po zainicjalizowaniu Zend_Layout
i ustawieniu
deklaracji Doctype, należy utworzyć główny layout strony:
<!-- application/layouts/scripts/layout.phtml --> <?php echo $this->doctype() ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Zend Framework Quickstart Application</title> <?php echo $this->headLink()->appendStylesheet('/css/global.css') ?> </head> <body> <div id="header" style="background-color: #EEEEEE; height: 30px;"> <div id="header-logo" style="float: left"> <b>ZF Quickstart Application</b> </div> <div id="header-navigation" style="float: right"> <a href="<?php echo $this->url( array('controller'=>'guestbook'), 'default', true) ?>">Guestbook</a> </div> </div> <?php echo $this->layout()->content ?> </body> </html>
Za pomocą view helpera layout()
pobierana jest zawartość
przeznaczona do wyświetlenia (znajduje się w zmiennej "content"). Można ją umieszczać w
innych częściach layoutu ale w większości przypadków takie podejście wystarczy.
Należy zwrócić uwagę na użycie view helpera headLink()
. Jest to
prosty sposób na zachowanie kontroli nad elementami <link> dodawanymi w
różnych miejscach aplikacji oraz na wygenerowanie kodu HTML
dla tych elementów w pliku layoutu bądź innego skryptu widoku.
Jeśli zajdzie potrzeba dodania dodatkowego arkusza CSS w pojedynczej akcji to
można to zrobić używając headLink()
(na generowanej
stronie pojawi się automatycznie).
Punkt kontrolny
Teraz należy udać się pod adres "http://localhost" i sprawdzić efekty oraz wygenerowany kod. Powinien pojawić się nagłówek XHTML, elementy head, title oraz body.