repo_zf1/documentation/manual/de/tutorials/quickstart-create-layout.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- EN-Revision: 19777 -->
<!-- Reviewed: no -->
<sect1 id="learning.quickstart.create-layout">
    <title>Ein Layout erstellen</title>

    <para>
        Wie man festgestellen kann waren die View Skripte im vorhergehenden Kapitel HTML Fragmente-
        und keine kompletten Seiten. Das ist so gewünscht; wir wollen das unsere Aktionen nur den
        Inhalt zurückgeben der für die Aktion selbst relevant ist, und nicht die Anwendung als
        ganzes.
    </para>

    <para>
        Jetzt müssen wir den erstellten Inhalt zu einer kompletten HTML Seite zusammenfügen. Wir
        wollen auch ein konsistentes Aussehen und Feeling für die Anwendung haben. Wir wollen ein
        globales Sitelayout verwenden um beide Arbeiten zu ermöglichen.
    </para>

    <para>
        Es gibt zwei Design Pattern die Zend Framework verwendet um Layouts zu implementieren:
        <ulink url="http://martinfowler.com/eaaCatalog/twoStepView.html">Two Step View</ulink> und
        <ulink
            url="http://java.sun.com/blueprints/corej2eepatterns/Patterns/CompositeView.html">Composite
            View</ulink>. <emphasis>Two Step View</emphasis> wird normalerweise mit dem <ulink
            url="http://www.martinfowler.com/eaaCatalog/transformView.html">Transform View</ulink>
        Pattern assoziiert; die grundsätzliche Idee besteht darin das die View der Anwendung eine
        Repräsentation erstellt die dann in die Master View für letzte Transformationen injiziert
        wird. Das <emphasis>Composite View</emphasis> Pattern arbeitet mit einer View die aus ein
        oder mehreren atomischen Anwendungs Views gemacht ist.
    </para>

    <para>
        Im Zend Framework kombiniert <link linkend="zend.layout">Zend_Layout</link> die Ideen hinter
        diesen Pattern. Statt dass jedes Action View Skript Site-weite Artefakte einfügen muss,
        können Sie sich einfach auf Ihre eigenen Beantwortungen konzentrieren.
    </para>

    <para>
        Natürlich benötigt man trotzdem Anwendungs-spezifische Informationen im Site-weiten View
        Skript. Glücklicherweise bietet Zend Framework eine Anzahl von View
        <emphasis>Platzhaltern</emphasis> die es erlauben solche Informationen von den Action View
        Skripten zu bekommen.
    </para>

    <para>
        To get started using Zend_Layout, first we need to inform our bootstrap to use the
        <classname>Layout</classname> resource. This can be done by adding the following line to
        your <filename>application/configs/application.ini</filename> file, within the
        <constant>production</constant> section:
    </para>

    <programlisting language="ini"><![CDATA[
; application/configs/application.ini

; Add to [production] section:
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"
]]></programlisting>

    <para>
        The final INI file should look as follows:
    </para>

    <programlisting language="ini"><![CDATA[
; application/configs/application.ini

[production]
; PHP settings we want to initialize
phpSettings.display_startup_errors = 0
phpSettings.display_errors = 0
includePaths.library = APPLICATION_PATH "/../library"
bootstrap.path = APPLICATION_PATH "/Bootstrap.php"
bootstrap.class = "Bootstrap"
resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers"
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
]]></programlisting>

    <para>
        This directive tells your application to look for layout view scripts in
        <filename>application/layouts/scripts</filename>. Create those directories now.
    </para>

    <para>
        We also want to ensure we have an XHTML DocType declaration for our application. To enable
        this, we need to add a resource to our bootstrap.
    </para>

    <para>
        The simplest way to add a bootstrap resource is to simply create a protected method
        beginning with the phrase <methodname>_init</methodname>. In this case, we want to
        initialize the doctype, so we'll create an <methodname>_initDoctype()</methodname> method
        within our bootstrap class:
    </para>

    <programlisting language="php"><![CDATA[
// application/Bootstrap.php

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
    protected function _initDoctype()
    {
    }
}
]]></programlisting>

    <para>
        Within that method, we need to hint to the view to use the appropriate doctype. But where
        will the view object come from? The easy solution is to initialize the
        <classname>View</classname> resource; once we have, we can pull the view object from the
        bootstrap and use it.
    </para>

    <para>
        To initialize the view resource, add the following line to your
        <filename>application/configs/application.ini</filename> file, in the section marked
        <constant>production</constant>:
    </para>

    <programlisting language="ini"><![CDATA[
; application/configs/application.ini

; Add to [production] section:
resources.view[] =
]]></programlisting>

    <para>
        This tells us to initialize the view with no options (the '[]' indicates that the "view" key
        is an array, and we pass nothing to it).
    </para>

    <para>
        Now that we have a view, let's flesh out our <methodname>_initDoctype()</methodname> method.
        In it, we will first ensure the <classname>View</classname> resource has run, fetch the view
        object, and then configure it:
    </para>

    <programlisting language="php"><![CDATA[
// application/Bootstrap.php

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
    protected function _initDoctype()
    {
        $this->bootstrap('view');
        $view = $this->getResource('view');
        $view->doctype('XHTML1_STRICT');
    }
}
]]></programlisting>

    <para>
        Now that we've initialized <classname>Zend_Layout</classname> and set the Doctype, let's
        create our site-wide layout:
    </para>

    <programlisting language="php"><![CDATA[
// application/layouts/scripts/layout.phtml

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>
]]></programlisting>

    <para>
        We grab our application content using the <methodname>layout()</methodname> view helper, and
        accessing the "content" key. You may render to other response segments if you wish to, but
        in most cases, this is all that's necessary.
    </para>

    <para>
        Note also the use of the <methodname>headLink()</methodname> placeholder. This is an easy
        way to generate the HTML for &lt;link&gt; elements, as well as to keep track of them
        throughout your application. If you need to add additional CSS sheets to support a single
        action, you can do so, and be assured it will be present in the final rendered page.
    </para>

    <note>
        <title>Checkpoint</title>

        <para>
            Now go to "http://localhost" and check out the source. You should see your XHTML header,
            head, title, and body sections.
        </para>
    </note>
</sect1>