documentation/manual/pl/tutorials/quickstart-create-layout.xml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!-- EN-Revision: 20977 -->
   3 <!-- Reviewed: yes -->
   4 <sect1 id="learning.quickstart.create-layout">
   5     <title>Utworzenie layoutu</title>
   6
   7     <para>
   8         Jak nie trudno zauważyć, skrypty widoków z poprzedniej części zawierały jedynie fragmenty
   9         kodu HTML, a nie całe strony. Jest to zamierzone i ma na celu przygotowanie akcji tak, aby
  10         zwracały jedynie zawartość związaną z samą akcją, a nie aplikacją jako taką.
  11     </para>
  12
  13     <para>
  14         Teraz należy umieścić generowaną treść w pełnoprawnej stronie HTML. Przydatne jest również
  15         nadanie całej aplikacji jednolitego, zwięzłego wyglądu. Aby to osiągnąć zostanie użyty
  16         globalny layout (wzór) strony.
  17     </para>
  18
  19     <para>
  20         Zend Framework używa dwóch wzorów projektowych przy implementacji layoutów: <ulink
  21         url="http://martinfowler.com/eaaCatalog/twoStepView.html">Widok dwustopniowy
  22         (Two Step View)</ulink> oraz
  23         <ulink
  24         url="http://java.sun.com/blueprints/corej2eepatterns/Patterns/CompositeView.html">Widok
  25         złożony (Composite View)</ulink>.
  26         <emphasis>Widok dwustopniowy</emphasis> jest najczęściej powiązany z <ulink
  27         url="http://www.martinfowler.com/eaaCatalog/transformView.html">Widokiem przekształconym
  28         (Transform View)</ulink> - podstawową cechą jest założenie, że aplikacja tworzy widok
  29         podrzędny, który zostaje umieszczony w widoku głównym (layout) i dopiero taki - złożony
  30         widok jest przetwarzany do pokazania użytkownikowi.
  31         <emphasis>Widok złożony</emphasis> natomiast, zakłada tworzenie jednego bądź wielu
  32          autonomicznych widoków bez relacji rodzic-potomek.
  33     </para>
  34
  35     <para>
  36         <link linkend="zend.layout">Zend_Layout</link> jest komponentem, który łączy te wzorce w
  37         aplikacji Zend Framework. Każdy skrypt widoku (view script) posiada własne elementy i
  38         nie musi zajmować się wyświetlaniem elementów wspólnych dla całej strony.
  39     </para>
  40
  41     <para>
  42         Mogą powstać sytuacje, w których niezbędne okaże się umieszczenie globalnych elementów w
  43         pojedynczym widoku. W tym celu Zend Framework udostępnia szereg
  44         <emphasis>pojemników (placeholders)</emphasis>, które umożliwiają dostęp do takich
  45         elementów z poziomu lokalnego skryptu widoku.
  46     </para>
  47
  48     <para>
  49         Aby rozpocząć korzystanie z <classname>Zend_Layout</classname> należy
  50         najpierw poinstruować bootstrap aby
  51         włączył zasób <classname>Layout</classname>. Można to osiągnąć za pomocą komendy
  52         <command>zf enable layout</command> (w katalogu tworzonego projektu):
  53     </para>
  54
  55     <programlisting language="shell"><![CDATA[
  56 % zf enable layout
  57 Layouts have been enabled, and a default layout created at
  58 application/layouts/scripts/layout.phtml
  59 A layout entry has been added to the application config file.
  60 ]]></programlisting>
  61
  62     <para>
  63         Tak jak jest to napisane w potwierdzeniu komendy, plik
  64         <filename>application/configs/application.ini</filename> został zaktualizowany i
  65         zawiera następujący wpis w sekcji <constant>production</constant>:
  66     </para>
  67
  68     <programlisting language="ini"><![CDATA[
  69 ; application/configs/application.ini
  70
  71 ; Dodane do sekcji [production]:
  72 resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"
  73 ]]></programlisting>
  74
  75     <para>
  76         W rezultacie plik INI powinien wyglądać następująco:
  77     </para>
  78
  79     <programlisting language="ini"><![CDATA[
  80 ; application/configs/application.ini
  81
  82 [production]
  83 phpSettings.display_startup_errors = 0
  84 phpSettings.display_errors = 0
  85 includePaths.library = APPLICATION_PATH "/../library"
  86 bootstrap.path = APPLICATION_PATH "/Bootstrap.php"
  87 bootstrap.class = "Bootstrap"
  88 appnamespace = "Application"
  89 resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers"
  90 resources.frontController.params.displayExceptions = 0
  91 resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"
  92
  93 [staging : production]
  94
  95 [testing : production]
  96 phpSettings.display_startup_errors = 1
  97 phpSettings.display_errors = 1
  98
  99 [development : production]
 100 phpSettings.display_startup_errors = 1
 101 phpSettings.display_errors = 1
 102 ]]></programlisting>
 103
 104     <para>
 105         Dodany zapis powoduje, że aplikacja szuka skryptów widoku w katalogu
 106         <filename>application/layouts/scripts</filename>.
 107         Należy zauważyć, iż taki katalog wraz z plikiem <filename>layout.phtml</filename>
 108         zostały utworzone w strukturze projektu przez narzędzie wiersza poleceń zf.
 109     </para>
 110
 111     <para>
 112         Następną przydatną rzeczą będzie upewnienie się, że deklaracja XHTML DocType jest
 113         umieszczona i poprawnie sformułowana. Aby to osiągnąć należy dodać zasób do bootstrapa.
 114     </para>
 115
 116     <para>
 117         Najprostszym sposobem na dodanie zasobu bootstrap jest utworzenie chronionej metody o
 118         nazwie zaczynającej się na <methodname>_init</methodname>. Celem jest zainicjalizowanie
 119         deklaracji DocType więc nowa metoda w klasie bootstrap może się nazywać
 120         <methodname>_initDoctype()</methodname>:
 121     </para>
 122
 123     <programlisting language="php"><![CDATA[
 124 // application/Bootstrap.php
 125
 126 class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
 127 {
 128     protected function _initDoctype()
 129     {
 130     }
 131 }
 132 ]]></programlisting>
 133
 134     <para>
 135         W ciele metody należy powiadomić zasób widoku aby użył odpowiedniego DocType.
 136         Tylko skąd wziąć obiekt widoku? Najłatwiejszym rozwiązaniem jest
 137         zainicjalizowanie zasobu <classname>View</classname>. Potem można pobrać
 138         obiekt i go użyć.
 139     </para>
 140
 141     <para>
 142         Aby zainicjalizować zasób widoku należy dodać następującą linijkę do pliku
 143         <filename>application/configs/application.ini</filename> w sekcji
 144         <constant>production</constant>:
 145     </para>
 146
 147     <programlisting language="ini"><![CDATA[
 148 ; application/configs/application.ini
 149
 150 ; Dodanie do sekcji [production]:
 151 resources.view[] =
 152 ]]></programlisting>
 153
 154     <para>
 155         Ten zapis inicjalizuje widok bez żadnych opcji (pisownia '[]' oznacza,
 156         że "view" jest tablicą bez żadnych kluczy ani wartości).
 157     </para>
 158
 159     <para>
 160         Teraz, skoro widok jest skonfigurowany, można wrócić do metody
 161         <methodname>_initDoctype()</methodname>.
 162         W niej należy upewnić się, że zasób <classname>View</classname> został
 163         zainicjowany (na podstawie zapisów w pliku konfiguracyjnym), pobrać obiekt
 164         widoku i go skonfigurować:
 165     </para>
 166
 167     <programlisting language="php"><![CDATA[
 168 // application/Bootstrap.php
 169
 170 class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
 171 {
 172     protected function _initDoctype()
 173     {
 174         $this->bootstrap('view');
 175         $view = $this->getResource('view');
 176         $view->doctype('XHTML1_STRICT');
 177     }
 178 }
 179 ]]></programlisting>
 180
 181     <para>
 182         Po zainicjalizowaniu <classname>Zend_Layout</classname> i ustawieniu
 183         deklaracji Doctype, należy utworzyć główny layout strony:
 184     </para>
 185
 186     <programlisting language="php"><![CDATA[
 187 <!-- application/layouts/scripts/layout.phtml -->
 188 <?php echo $this->doctype() ?>
 189 <html xmlns="http://www.w3.org/1999/xhtml">
 190 <head>
 191   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 192   <title>Zend Framework Quickstart Application</title>
 193   <?php echo $this->headLink()->appendStylesheet('/css/global.css') ?>
 194 </head>
 195 <body>
 196 <div id="header" style="background-color: #EEEEEE; height: 30px;">
 197     <div id="header-logo" style="float: left">
 198         <b>ZF Quickstart Application</b>
 199     </div>
 200     <div id="header-navigation" style="float: right">
 201         <a href="<?php echo $this->url(
 202             array('controller'=>'guestbook'),
 203             'default',
 204             true) ?>">Guestbook</a>
 205     </div>
 206 </div>
 207
 208 <?php echo $this->layout()->content ?>
 209
 210 </body>
 211 </html>
 212 ]]></programlisting>
 213
 214     <para>
 215         Za pomocą view helpera <methodname>layout()</methodname> pobierana jest zawartość
 216         przeznaczona do wyświetlenia (znajduje się w zmiennej "content"). Można ją umieszczać w
 217         innych częściach layoutu ale w większości przypadków takie podejście wystarczy.
 218     </para>
 219
 220     <para>
 221         Należy zwrócić uwagę na użycie view helpera <methodname>headLink()</methodname>. Jest to
 222         prosty sposób na zachowanie kontroli nad elementami &lt;link&gt; dodawanymi w
 223         różnych miejscach aplikacji oraz na wygenerowanie kodu HTML dla tych elementów
 224         w pliku layoutu bądź innego skryptu widoku.
 225         Jeśli zajdzie potrzeba dodania dodatkowego arkusza CSS w pojedynczej akcji to
 226         można to zrobić używając <methodname>headLink()</methodname>(na generowanej
 227         stronie pojawi się automatycznie).
 228     </para>
 229
 230     <note>
 231         <title>Punkt kontrolny</title>
 232
 233         <para>
 234             Teraz należy udać się pod adres "http://localhost" i sprawdzić efekty oraz
 235             wygenerowany kod. Powinien pojawić się nagłówek XHTML, elementy head, title oraz body.
 236         </para>
 237     </note>
 238 </sect1>