view-placeholders-standard.xml 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!-- EN-Revision: 24249 -->
  3. <!-- Reviewed: no -->
  4. <sect1 id="learning.view.placeholders.standard">
  5. <title>Standard Platzhalter</title>
  6. <para>
  7. In der <link linkend="learning.view.placeholders.basics">vorherigen Sektion</link>, haben
  8. wir den <methodname>placeholder()</methodname> View Helfer kennengelernt, und wie er für das
  9. Sammeln eigener Inhalte verwendet werden kann. In dieser Sektion sehen wir uns einige
  10. konkrete Platzhalter an die mit Zend Framework ausgeliefert werden, und wie Sie für den
  11. eigenen Vorteil verwendet werden können wenn komplexe kombinierte Layouts erstellt werden.
  12. </para>
  13. <para>
  14. Die meisten mitgelieferten Platzhalter sind für die Erstellung von Inhalten der
  15. <emphasis>&lt;head&gt;</emphasis> Sektion des Layout Inhalts -- ein Areal das man
  16. normalerweise nicht direkt über Anwendungs View Skripte manipuliert, aber eines das man
  17. beeinflussen will. Als Beispiel: Wenn man will das der Titel auf jeder Seite bestimmte
  18. Inhalte enthält, aber spezifische Inhalte auf dem Controller und/oder der Aktion basieren;
  19. wenn man <acronym>CSS</acronym> Dateien spezifizieren will um Sie basieren auf der Sektion
  20. in der man sich befindet zu Laden; wenn man spezifische JavaScript Skripts zu
  21. unterschiedlichen Zeiten laden will; oder wenn man die <emphasis>DocType</emphasis>
  22. Deklaration setzen will.
  23. </para>
  24. <para>
  25. Zend Framework wird mit einer Platzhalter Implementation für jede dieser Situationen
  26. ausgeliefert, und verschiedenen mehr.
  27. </para>
  28. <sect2 id="learning.view.placeholders.standard.doctype">
  29. <title>Setzen vom DocType</title>
  30. <para>
  31. Die <emphasis>DocType</emphasis> Deklaration ist problematisch zu merken, und oft ist es
  32. essentiell Sie in die Dokumente einzubinden um sicherzustellen das der Browser den
  33. Inhalt richtig darstellt. Der <methodname>doctype()</methodname> View Helfer erlaubt es
  34. einfache String Merkmale zu verwenden um den gewünschten <emphasis>DocType</emphasis> zu
  35. spezifizieren; zusätzlich fragen andere Helfer den <methodname>doctype()</methodname>
  36. ab, um sicherzustellen dass die erzeugte Ausgabe mit dem angefragten
  37. <emphasis>DocType</emphasis> übereinstimmt.
  38. </para>
  39. <para>
  40. Wenn man als Beispiel <acronym>XHTML1</acronym> Strict <acronym>DTD</acronym> verwenden
  41. will kann man einfach folgendes spezifizieren:
  42. </para>
  43. <programlisting language="php"><![CDATA[
  44. $this->doctype('XHTML1_STRICT');
  45. ]]></programlisting>
  46. <para>
  47. Neben anderen vorhandenen Gedächnishilfen sind die folgenden Typen zu finden:
  48. </para>
  49. <variablelist>
  50. <varlistentry>
  51. <term>XHTML1_STRICT</term>
  52. <listitem>
  53. <para>
  54. <acronym>XHTML</acronym> 1.0 Strict
  55. </para>
  56. </listitem>
  57. </varlistentry>
  58. <varlistentry>
  59. <term>XHTML1_TRANSITIONAL</term>
  60. <listitem>
  61. <para>
  62. <acronym>XHTML</acronym> 1.0 Transitional
  63. </para>
  64. </listitem>
  65. </varlistentry>
  66. <varlistentry>
  67. <term>HTML4_STRICT</term>
  68. <listitem>
  69. <para>
  70. <acronym>HTML</acronym> 4.01 Strict
  71. </para>
  72. </listitem>
  73. </varlistentry>
  74. <varlistentry>
  75. <term>HTML4_Loose</term>
  76. <listitem>
  77. <para>
  78. <acronym>HTML</acronym> 4.01 Loose
  79. </para>
  80. </listitem>
  81. </varlistentry>
  82. <varlistentry>
  83. <term>HTML5</term>
  84. <listitem>
  85. <para>
  86. <acronym>HTML</acronym> 5
  87. </para>
  88. </listitem>
  89. </varlistentry>
  90. </variablelist>
  91. <para>
  92. Man kann den Typ zuordnen und die Deklaration in einem einzelnen Aufruf darstellen:
  93. </para>
  94. <programlisting language="php"><![CDATA[
  95. echo $this->doctype('XHTML1_STRICT');
  96. ]]></programlisting>
  97. <para>
  98. Trotzdem ist der bessere Ansatz den Typ in der Bootstrap zuzuordnen, und Ihn dann im
  99. Layout darzustellen. Man könnte versuchen das folgende in der Bootstrap Klasse
  100. hinzuzufügen:
  101. </para>
  102. <programlisting language="php"><![CDATA[
  103. class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
  104. {
  105. protected function _initDocType()
  106. {
  107. $this->bootstrap('View');
  108. $view = $this->getResource('View');
  109. $view->doctype('XHTML1_STRICT');
  110. }
  111. }
  112. ]]></programlisting>
  113. <para>
  114. Und dann im Layout Skript einfach auf dem Helfer am Beginn der Datei
  115. <methodname>echo()</methodname> ausrufen:
  116. </para>
  117. <programlisting language="php"><![CDATA[
  118. <?php echo $this->doctype() ?>
  119. <html>
  120. <!-- ... -->
  121. ]]></programlisting>
  122. <para>
  123. Das stellt sicher dass DocType-beachtende View Helfer das richtige Markup darstellen,
  124. das der Typ richtig gesetzt ist bevor das Layout dargestellt wird, und bietet einen
  125. einzelnen Ort an dem der DocType geändert werden kann.
  126. </para>
  127. </sect2>
  128. <sect2 id="learning.view.placeholders.standard.head-title">
  129. <title>Den Titel der Seite spezifizieren</title>
  130. <para>
  131. Oft will eine Site den Namen der Site oder der Firma als Teil des Seitentitels einfügen,
  132. und dann zusätzliche Informationen basieren auf dem Ort in dieser Site einfügen. Als
  133. Beispiel enthält die Website <filename>zend.com</filename> den String
  134. "<filename>Zend.com</filename>" auf allen Seiten und fügt Informationen basierend auf
  135. der Seite voran: "Zend Server - <filename>Zend.com</filename>". Im Zend Framework
  136. kann der <methodname>headTitle()</methodname> View Helfer helfen diese Aufgabe zu
  137. vereinfachen.
  138. </para>
  139. <para>
  140. Am einfachsten erlaubt es der <methodname>headTitle()</methodname> Helfer den Inhalt zu
  141. für das <emphasis>&lt;title&gt;</emphasis> Tag zu sammeln; wenn man es ausgibt, wird es
  142. basierend auf der Reihenfolge mit der es hinzugefügt wurde zusammengefügt. Man kann die
  143. Reihenfolge kontrollieren indem <methodname>prepend()</methodname> und
  144. <methodname>append()</methodname> verwendet werden, und einen Separator angegeben
  145. welcher zwischen den Segmenten zu verwenden ist, indem die Methode
  146. <methodname>setSeparator()</methodname> verwendet wird.
  147. </para>
  148. <para>
  149. Typischerweise sollten jene Segmente die in allen Seiten gemeinsam sind in der Bootstrap
  150. spezifiziert werden, ähnlich wie wir den DocType definiert haben. In diesem Fall
  151. definieren wir eine <methodname>_initPlaceholders()</methodname> Methode um auf den
  152. verschiedenen Platzhaltern zu arbeiten, und einen initialen Titel sowie einen Separator
  153. zu spezifizieren.
  154. </para>
  155. <programlisting language="php"><![CDATA[
  156. class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
  157. {
  158. // ...
  159. protected function _initPlaceholders()
  160. {
  161. $this->bootstrap('View');
  162. $view = $this->getResource('View');
  163. $view->doctype('XHTML1_STRICT');
  164. // Setzt den initialen Titel und Separator:
  165. $view->headTitle('Meine Site')
  166. ->setSeparator(' :: ');
  167. }
  168. // ...
  169. }
  170. ]]></programlisting>
  171. <para>
  172. Im View Skript könnten wir ein weiteres Segment hinzufügen:
  173. </para>
  174. <programlisting language="php"><![CDATA[
  175. <?php $this->headTitle()->append('Eine Seite'); // Nach anderen Segmenten platzieren ?>
  176. <?php $this->headTitle()->prepend('Eine Seite'); // Davor platzieren ?>
  177. ]]></programlisting>
  178. <para>
  179. In unserem Layout geben wie den <methodname>headTitle()</methodname> Helfer einfach aus:
  180. </para>
  181. <programlisting language="php"><![CDATA[
  182. <?php echo $this->doctype() ?>
  183. <html>
  184. <?php echo $this->headTitle() ?>
  185. <!-- ... -->
  186. ]]></programlisting>
  187. <para>
  188. Das erzeugt die folgende Ausgabe:
  189. </para>
  190. <programlisting language="html"><![CDATA[
  191. <!-- Wenn append() verwendet wurde: -->
  192. <title>Meine Site :: Eine Seite</title>
  193. <!-- Wenn prepend() verwendet wurde: -->
  194. <title>Eine Seite :: Meine Site</title>
  195. ]]></programlisting>
  196. </sect2>
  197. <sect2 id="learning.view.placeholders.standard.head-link">
  198. <title>Stylesheets mit HeadLink spezifizieren</title>
  199. <para>
  200. Gute <acronym>CSS</acronym> Entwickler erstellen oft ein generisches Stylesheet für
  201. Siteweite Stile, und individuelle Stylesheets für spezifische Sektionen oder Seite der
  202. Website, und laden die zweiteren über Konditionen um die Menge der Daten zu verringern
  203. die bei jeder Anfrage übertragen werden müssen. Der <methodname>headLink()</methodname>
  204. Platzhalter macht die Sammlung von solchen konditionellen Stylesheets in der Anwendung
  205. trivial.
  206. </para>
  207. <para>
  208. Um das zu ermöglichen definiert <methodname>headLink()</methodname> eine Anzahl von
  209. "virtuellen" Methoden (durch Überladen) welche den Prozess trivial machen. Jene mit
  210. denen wir uns befassen sind <methodname>appendStylesheet()</methodname> und
  211. <methodname>prependStylesheet()</methodname>. Jede nimmt bis zu vier Argumente,
  212. <varname>$href</varname> (den relativen Pfad zum Stylesheet), <varname>$media</varname>
  213. (den <acronym>MIME</acronym> Typ, der standardmäßig "text/css" ist),
  214. <varname>$conditionalStylesheet</varname> (kann verwendet werden um eine "Kondition" zu
  215. spezifizieren bei dem das Stylesheet evaluiert wird), und <varname>$extras</varname>
  216. (ein assoziatives Array von Schlüssel und Werte Paare, üblicherweise verwendet um einen
  217. Schlüssel für "media" zu definieren). In den meisten Fällen muss man nur das erste
  218. Argument spezifizieren, den relativen Pfad zum Stylesheet.
  219. </para>
  220. <para>
  221. In unserem Beispiel nehmen wir an das alle Seiten das Stylesheet laden mussen welches in
  222. "<filename>/styles/site.css</filename>" vorhanden ist (relativ zum Dokument Root); wir
  223. spezifizieren dass in unserer Bootstrap Methode
  224. <methodname>_initPlaceholders()</methodname>.
  225. </para>
  226. <programlisting language="php"><![CDATA[
  227. class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
  228. {
  229. // ...
  230. protected function _initPlaceholders()
  231. {
  232. $this->bootstrap('View');
  233. $view = $this->getResource('View');
  234. $view->doctype('XHTML1_STRICT');
  235. // Setzt den initialen Titel und Separator:
  236. $view->headTitle('Meine Site')
  237. ->setSeparator(' :: ');
  238. // Setzt das initiale Stylesheet:
  239. $view->headLink()->prependStylesheet('/styles/site.css');
  240. }
  241. // ...
  242. }
  243. ]]></programlisting>
  244. <para>
  245. Später, im Controller oder einem Action-spezifischen View Skript, können wir weitere
  246. Stylesheets hinzufügen:
  247. </para>
  248. <programlisting language="php"><![CDATA[
  249. <?php $this->headLink()->appendStylesheet('/styles/user-list.css') ?>
  250. ]]></programlisting>
  251. <para>
  252. In unserem Layout View Skript geben wir den Platzhalter einfach wieder aus:
  253. </para>
  254. <programlisting language="php"><![CDATA[
  255. <?php echo $this->doctype() ?>
  256. <html>
  257. <?php echo $this->headTitle() ?>
  258. <?php echo $this->headLink() ?>
  259. <!-- ... -->
  260. ]]></programlisting>
  261. <para>
  262. Das erzeugt die folgende Ausgabe:
  263. </para>
  264. <programlisting language="html"><![CDATA[
  265. <link rel="stylesheet" type="text/css" href="/styles/site.css" />
  266. <link rel="stylesheet" type="text/css" href="/styles/user-list.css" />
  267. ]]></programlisting>
  268. </sect2>
  269. <sect2 id="learning.view.placeholders.standard.head-script">
  270. <title>Sammeln von Skripten durch Verwendung von HeadScript</title>
  271. <para>
  272. Eine andere gemeinsame Taktik um lange Ladezeiten bei Seiten zu verhindern besteht darin
  273. JavaScript nur dann zu Laden wenn es notwendig ist. So gesehen benötigt man verschiedene
  274. Layer von Skripten: möglicherweise einen für die fortlaufende Verbesserung der Menüs der
  275. Site, und einen weiteren für Seiten-spezifische Inhalte. In diesen Situationen bietet
  276. der <methodname>headScript()</methodname> Helfer eine Lösung.
  277. </para>
  278. <para>
  279. Ähnlich wie der <methodname>headLink()</methodname> Helfer bietet
  280. <methodname>headScript()</methodname> die Möglichkeit Skripte der Sammlung anzuhängen
  281. oder voranzustellen, und dann das komplette Set auszugeben. Es bietet die Flexibilität
  282. Skriptdateien zu spezifizieren damit diese selbst geladen werden, als auch explizit
  283. JavaScript. Man hat auch die Option JavaScript über
  284. <methodname>captureStart()</methodname>/<methodname>captureEnd()</methodname>
  285. einzufangen, was es erlaubt JavaScript einfach im Code zu haben statt notwendigerweise
  286. einen zusätzlichen Aufruf zum Server zu machen.
  287. </para>
  288. <para>
  289. So wie <methodname>headLink()</methodname> bietet <methodname>headScript()</methodname>
  290. "virtuelle" Methoden durch Überladen als Bequemlichkeit wenn Elemente spezifiziert
  291. werden um Sie zu sammeln; übliche Methoden sind <methodname>prependFile()</methodname>,
  292. <methodname>appendFile()</methodname>, <methodname>prependScript()</methodname>, und
  293. <methodname>appendScript()</methodname>. Die ersten zwei erlauben es Dateien zu
  294. spezifizieren auf die im <varname>$src</varname> Attribut des
  295. <emphasis>&lt;script&gt;</emphasis> Tags referenziert wird; die letzteren zwei nehmen
  296. den angegebenen Inhalt und stellen Ihn als literales JavaScript im
  297. <emphasis>&lt;script&gt;</emphasis> Tag dar.
  298. </para>
  299. <para>
  300. In diesem Beispiel spezifizieren wir ein Skript, "<filename>/js/site.js</filename>"
  301. muss bei jeder Seite geladen werden; wir aktualisieren die
  302. <methodname>_initPlaceholders()</methodname> Methode in der Bootstrap um das zu tun.
  303. </para>
  304. <programlisting language="php"><![CDATA[
  305. class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
  306. {
  307. // ...
  308. protected function _initPlaceholders()
  309. {
  310. $this->bootstrap('View');
  311. $view = $this->getResource('View');
  312. $view->doctype('XHTML1_STRICT');
  313. // Setzt den initialen Titel und Separator:
  314. $view->headTitle('My Site')
  315. ->setSeparator(' :: ');
  316. // Setzt das initiale Stylesheet:
  317. $view->headLink()->prependStylesheet('/styles/site.css');
  318. // Setzt das initiale JS das geladen werden soll:
  319. $view->headScript()->prependFile('/js/site.js');
  320. }
  321. // ...
  322. }
  323. ]]></programlisting>
  324. <para>
  325. In einem View Skript können wir dann eine extra Skript Datei der Quelle hinzufügen um
  326. etwas JavaScript zu sammeln und es in unserem Dokument einzufügen.
  327. </para>
  328. <programlisting language="php"><![CDATA[
  329. <?php $this->headScript()->appendFile('/js/user-list.js') ?>
  330. <?php $this->headScript()->captureStart() ?>
  331. site = {
  332. baseUrl: "<?php echo $this->baseUrl() ?>"
  333. };
  334. <?php $this->headScript()->captureEnd() ?>
  335. ]]></programlisting>
  336. <para>
  337. In unserem Layout Skript wird der Platzhalter dann einfach ausgegeben, wie wir es
  338. bereits bei den anderen gemacht haben:
  339. </para>
  340. <programlisting language="php"><![CDATA[
  341. <?php echo $this->doctype() ?>
  342. <html>
  343. <?php echo $this->headTitle() ?>
  344. <?php echo $this->headLink() ?>
  345. <?php echo $this->headScript() ?>
  346. <!-- ... -->
  347. ]]></programlisting>
  348. <para>
  349. Das erstellt die folgende Ausgabe:
  350. </para>
  351. <programlisting language="html"><![CDATA[
  352. <script type="text/javascript" src="/js/site.js"></script>
  353. <script type="text/javascript" src="/js/user-list.js"></script>
  354. <script type="text/javascript">
  355. site = {
  356. baseUrl: "<?php echo $this->baseUrl() ?>"
  357. };
  358. </script>
  359. ]]></programlisting>
  360. <note>
  361. <title>InlineScript Variante</title>
  362. <para>
  363. Viele Browser blockieren oft die Anzeige von Seiten bis alle Skripte und Stylesheets
  364. geladen wurden auf die in der <emphasis>&lt;head&gt;</emphasis> Sektion referenziert
  365. wird. Wenn man eine Anzahl solcher Direktiven hat, kann das Einfluß darauf haben wie
  366. bald jemand damit beginnen kann sich die Seite anzuschauen:
  367. </para>
  368. <para>
  369. Ein Weg darum zu kommen besteht darin die <emphasis>&lt;script&gt;</emphasis> Tags
  370. einfach nach dem schließenden <emphasis>&lt;body&gt;</emphasis> Tag des Dokuments
  371. auszugeben. (Das ist eine Praxis die speziell vom <ulink
  372. url="http://developer.yahoo.com/yslow/">Y! Slow Projekt</ulink> empfohlen wird)
  373. </para>
  374. <para>
  375. Zend Framework unterstützt das auf zwei unterschiedlichen Wegen:
  376. </para>
  377. <itemizedlist>
  378. <listitem>
  379. <para>
  380. Man kann das <methodname>headScript()</methodname> Tag im Layout Skript
  381. überall wo man will darstellen; nur weil der Titel auf "head" referenziert
  382. heißt das nicht dass er an dieser Position dargestellt werden muss.
  383. </para>
  384. </listitem>
  385. <listitem>
  386. <para>
  387. Alternativ kann der <methodname>inlineScript()</methodname> Helfer verwendet
  388. werden der einfach eine Variante von <methodname>headScript()</methodname>
  389. ist und das selbe Verhalten hat, aber eine eigene Registry verwendet.
  390. </para>
  391. </listitem>
  392. </itemizedlist>
  393. </note>
  394. </sect2>
  395. </sect1>