quickstart-create-layout.xml 9.1 KB

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