repo_zf1/documentation/manual/de/module_specs/Zend_Dojo-View-Helpers.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- EN-Revision: 15156 -->
<!-- Reviewed: no -->
<sect2 id="zend.dojo.view.dijit">
    <title>Dijit-Spezifische View Helfer</title>

    <para>
        Aus dem Dojo Handbuch: "Dijit ist ein Widget System das über Dojo gelegt wurde.". Dijit
        enthält eine Vielzahl von Layout und Formular Widgets die erstellt wurden um Zugriffsfeatures,
        Lokalisation, und standardtisiertes (und themenbasierendes) Look-and-Feel zu bieten.
    </para>

    <para>
        Zend Framework wird mit einer Vielzahl an View Helfern ausgeliefert die es erlauben Dijits
        in eigenen View Skripten darzustellen und anzupassen. Es gibt drei Basistypen:
    </para>

    <itemizedlist>
        <listitem>
            <para>
                <emphasis>Layout Container</emphasis>: Diese wurden erstellt um in View Skripten verwendet,
                oder von Formular Dekoratoren für Formulare, Unterformulare oder Anzeigegruppen
                konsumiert zu werden. Sie hüllen die verschiedenen angebotenen Klassen in dijit.layout ein.
                Jeder Dijit Layout Viewhelfer erwartet die folgenden Argumente:
            </para>

            <itemizedlist>
                <listitem><para>
                        <code>$id</code>: Der Name des Containers oder die DOM ID.
                </para></listitem>

                <listitem><para>
                        <code>$content</code>: Der Inhalt der vom Layout Container umhüllt werden soll.
                </para></listitem>

                <listitem><para>
                        <code>$params</code> (Optional): Dijit-spezifische Parameter. Grundsätzlich kann
                        jedes nicht-HTML Attribut verwendet werden um den Dijit Layout Container zu
                        konfigurieren.
                </para></listitem>

                <listitem><para>
                        <code>$attribs</code> (Optional): Jedes zusätzliche HTML Attribut das verwendet werden
                        soll um den Container DIV darzustellen. Wenn der Schlüssel 'id' an dieses Array
                        übergeben wird, wird es für die ID des DOM Formular Elements verwendet und
                        <code>$id</code> wird für seinen Namen verwendet.
                </para></listitem>
            </itemizedlist>

            <para>
                Wenn an den Dijit Layout Viewhelfer keine Argumente übergeben werden, wird der Helfer selbst
                zurückgegeben. Das erlaubt es den Inhalt zu erhalten, was oft der einfachste Weg ist um
                Inhalt an den Layout Container zu übergeben. Beispiele für diese Funktionalität werden später
                in diesem Kapitel gezeigt.
            </para>
        </listitem>

        <listitem>
            <para>
                <emphasis>Form Dijit</emphasis>: Auch wen das dijit.form.Form Dijit für die Verwendung von
                Dijit Form Elementen nicht vollständig notwendig ist, stellt es sicher das, wenn ein Versuch
                unternommen wird ein Formular zu übertragen das die Client-seitigen Prüfungen nicht besteht,
                die Übertragung angehalten und eine Prüffehlermeldung geworfen wird. Der Form Dijit
                Viewhelfer erwartet die folgenden Argumente:
            </para>

            <itemizedlist>
                <listitem><para>
                        <code>$id</code>: Der Name des Containers oder der DOM ID.
                </para></listitem>

                <listitem><para>
                        <code>$attribs</code> (Optional): Alle zusätzliche HTML Attribute die verwendet werden
                        sollten um das Container DIV darzustellen.
                </para></listitem>

                <listitem><para>
                        <code>$content</code> (Optional): Der Inhalt der im Formular umschlossen wird.
                        Wenn keiner übergeben wird, wird ein leerer String verwendet.
                </para></listitem>
            </itemizedlist>

            <para>
                Die Reihenfolge der Argumente variiert von den anderen Dijits um die Kompatibilität mit dem
                standard <code>form()</code> Viewhelfer zu haben.
            </para>
        </listitem>

        <listitem>
            <para>
                <emphasis>Form Elemente</emphasis>: Diese wurden designed um von <classname>Zend_Form</classname>
                verwendet zu werden, können aber auch selbstständig in Viewsktipten verwendet werden.
                Jedes Dijit Element Viewhelfer erwartet die folgenden Elemente:
            </para>

            <itemizedlist>
                <listitem><para>
                        <code>$id</code>: Der Name des Elements oder die DOM ID.
                </para></listitem>

                <listitem><para>
                        <code>$value</code> (Optional): Der aktuelle Wert des Elements.
                </para></listitem>

                <listitem><para>
                        <code>$params</code> (Optional): Dijit-spezifische Parameter. Grundsätzlich können
                        alle nicht-HTML Attribute für die Konfiguration des Dijits verwendet werden.
                </para></listitem>

                <listitem><para>
                        <code>$attribs</code> (Optional): Jedes zusätzliche HTML Attribut das verwendet werden
                        soll um das Dijit darzustellen. Wenn der Schlüssel 'id' an dieses Array
                        übergeben wird, wird es für die ID des DOM Formular Elements verwendet und
                        <code>$id</code> wird für seinen Namen verwendet.
                </para></listitem>
            </itemizedlist>

            <para>
                Einige Elemente benötigen mehr Argumente; diese werden in den Beschreibungen der individuellen
                Elementhelfer erklärt.
            </para>
        </listitem>
    </itemizedlist>

    <para>
        Um diese Viewhelfer zu verwendenn, muß der Pfad zu den Dojo Viewhelfern im View Objekt registriert
        werden.
    </para>

    <example id="zend.dojo.view.dijit.prefixpath">
        <title>Registrierung des Präfix Pfades zu den Dojo Viewhelfern</title>

        <programlisting role="php"><![CDATA[
$view->addHelperPath('Zend/Dojo/View/Helper', 'Zend_Dojo_View_Helper');
]]></programlisting>
    </example>

    <sect3 id="zend.dojo.view.dijit.layout">
        <title>Dijit Layout Elemente</title>

        <para>
            Die Familie der dijit.layout Elemente sind für die Erstellung von eigenen, vorhersagbaren
            Layouts für die eigene Site. Für alle Fragen über die generelle Verwendung
            <ulink url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout">lesen Sie hierüber
            im Dojo Handbuch nach</ulink>.
        </para>

        <para>
            Alle Dijit Layoutelemente haben die Signatur
            <code>string ($id = null, $content = '', array $params = array(), array $attribs = array())</code>.
            In allen Fällen wird, wenn man keine Argumente übergibt, das Helferobjekt selbst zurückgegeben.
            Das gibt einem Zugriff auf die <code>captureStart()</code> und <code>captureEnd()</code>
            Methoden, welche es erlauben Inhalte zu holen statt diese an den Layout Container zu übergeben.
        </para>

        <itemizedlist>
            <listitem>
                <para>
                    <emphasis>AccordionContainer</emphasis>: dijit.layout.AccordionContainer. Fügt alle
                    Ausschnitte vertikal zusallen; das Klicken auf die Überschrift eines Ausschnittes expandiert
                    diesen und zeigt den betreffenden Ausschnitt an.
                </para>

                <programlisting role="php"><![CDATA[
<?php echo $view->accordionContainer(
    'foo',
    $content,
    array(
        'duration' => 200,
    ),
    array(
        'style' => 'width: 200px; height: 300px;',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>AccordionPane</emphasis>: dijit.layout.AccordionPane. Für die Verwendung im
                    AccordionContainer.
                </para>

                <programlisting role="php"><![CDATA[
<?php echo $view->accordionPane(
    'foo',
    $content,
    array(
        'title' => 'Titel des Ausschnittes',
    ),
    array(
        'style' => 'background-color: lightgray;',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>BorderContainer</emphasis>: dijit.layout.BorderContainer. Ermöglicht Layouts
                    mit optional größenveränderbaren Ausschnitten wie man Sie in traditionellen Anwendungen
                    oft sieht.
                </para>

                <programlisting role="php"><![CDATA[
<?php echo $view->borderContainer(
    'foo',
    $content,
    array(
        'design' => 'headline',
    ),
    array(
        'style' => 'width: 100%; height: 100%',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>ContentPane</emphasis>: dijit.layout.ContentPane. Wird in allen Containern
                    ausser AccordionContainer verwendet.
                </para>

                <programlisting role="php"><![CDATA[
<?php echo $view->contentPane(
    'foo',
    $content,
    array(
        'title'  => 'Titel des Ausschnittes',
        'region' => 'left',
    ),
    array(
        'style' => 'width: 120px; background-color: lightgray;',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>SplitContainer</emphasis>: dijit.layout.SplitContainer. Erlaubt Ausschnitte mit
                    größenveränderbarem Inhalt; sollte in Dojo nicht mehr verwendet werden, stattdessen
                    BorderContainer.
                </para>

                <programlisting role="php"><![CDATA[
<?php echo $view->splitContainer(
    'foo',
    $content,
    array(
        'orientation'  => 'horizontal',
        'sizerWidth'   => 7,
        'activeSizing' => true,
    ),
    array(
        'style' => 'width: 400px; height: 500px;',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>StackContainer</emphasis>: dijit.layout.StackContainer. Alle Ausschnitte eines
                    StackContainers werden in einem Stack platziert; erstelle Buttons oder Funktionalität um
                    einen auf einmal zu erhalten.
                </para>

                <programlisting role="php"><![CDATA[
<?php echo $view->stackContainer(
    'foo',
    $content,
    array(),
    array(
        'style' => 'width: 400px; height: 500px; border: 1px;',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>TabContainer</emphasis>: dijit.layout.TabContainer. Alle Ausschnitte eines
                    TabContainers werden in einem Stack platziert, wobei Tabs auf einer Seite positioniert
                    werden um zwischen Ihnen zu wählen.
                </para>

                <programlisting role="php"><![CDATA[
<?php echo $view->tabContainer(
    'foo',
    $content,
    array(),
    array(
        'style' => 'width: 400px; height: 500px; border: 1px;',
    ),
); ?>
]]></programlisting>
            </listitem>
        </itemizedlist>

        <para>
            Die folgenden Erfassungsmethoden sind für alle Layout Container vorhanden:
        </para>

        <itemizedlist>
            <listitem>
                <para>
                    <code>captureStart($id, array $params = array(), array $attribs = array())</code>:
                    Beginnt die Erfassung von Inhalt um Ihn in einem Container einzufügen. <code>$params</code>
                    referiert auf die Dijit Parameters die mit dem Container verwendet werden, wärend
                    <code>$attribs</code> auf alle generellen HTML Attribute die verwendet werden, zeigt.
                </para>

                <para>
                    Container können für die Erfassung gekoppelt werden, <emphasis>solange keine IDs
                    doppelt vorhanden sind</emphasis>.
                </para>
            </listitem>

            <listitem>
                <para>
                    <code>captureEnd($id)</code>: Beendet die Erfassung von Inhalten die in den Container
                    übernommen werden. <code>$id</code> sollte auf eine Id zeigen die vorher bei dem
                    Aufruf von <code>captureStart()</code> verwendet wurde. Gibt einen String zurück der
                    den Container und seinen Inhalt repräsentiert, wie wenn man einfach den Inhalt an den
                    Helfer selbst übergeben hätte.
                </para>
            </listitem>
        </itemizedlist>

        <example id="zend.dojo.view.dijit.layout.borderexample">
            <title>Beispiel eines BorderContainer Layout Dijits</title>

            <para>
                BorderContainers, speziell wenn Sie mit der Fähigkeit gekoppelt werden Inhalte zu erfassen,
                sind nützlich um komplexe Layouteffekte zu erhalten.
            </para>

            <programlisting role="php"><![CDATA[
$view->borderContainer()->captureStart('masterLayout',
                                       array('design' => 'headline'));

echo $view->contentPane(
    'menuPane',
    'Das ist der Menü Ausschnitt',
    array('region' => 'top'),
    array('style' => 'background-color: darkblue;')
);

echo  $view->contentPane(
    'navPane',
    'Das ist der Navigations Ausschnitt',
    array('region' => 'left'),
    array('style' => 'width: 200px; background-color: lightblue;')
);

echo $view->contentPane(
    'mainPane',
    'Das ist der Hauptabschnitt',
    array('region' => 'center'),
    array('style' => 'background-color: white;')
);

echo $view->contentPane(
    'statusPane',
    'Status area',
    array('region' => 'bottom'),
    array('style' => 'background-color: lightgray;')
);

echo $view->borderContainer()->captureEnd('masterLayout');
]]></programlisting>
        </example>
    </sect3>

    <sect3 id="zend.dojo.view.dijit.form">
        <title>Dijit Formularelemente</title>

        <para>
            Dojo's Formularprüfung und Eingabe Dijits sind im dijit.form Baum. Für zusätzliche Informationen
            über die generelle Verwendung dieser Elemente, sowie der akzeptierten Parameter
            <ulink url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-specialized-input">besuchen
            Sie bitte die dijit.form Dokumentation</ulink>.
        </para>

        <para>
            Die folgenden Dijit Formularelemente sind im Zend Framework vorhanden. Ausser wo es beschrieben
            wird, haben alle die Signatur
            <code>string ($id, $value = '', array $params = array(), array $attribs = array())</code>.
        </para>

        <itemizedlist>
            <listitem>
                <para>
                    <emphasis>Button</emphasis>: dijit.form.Button. Zeigt einen Formular Button.
                </para>

                <programlisting role="php"><![CDATA[
<?php echo $view->button(
    'foo',
    'Zeig mich!',
    array('iconClass' => 'myButtons'),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>CheckBox</emphasis>: dijit.form.CheckBox. Zeigt eine Checkbox an. Akzeptiert
                    ein optionales fünftes Argument, das Array <code>$checkedOptions</code>, welches das
                    folgende enthalten kann:
                </para>

                <itemizedlist>
                    <listitem><para>
                            ein indiziertes Array mit zwei Werten, einen angehackten Wert und einem nicht
                            angehackten Wert, in dieser Reihenfolge; oder
                    </para></listitem>

                    <listitem><para>
                            ein assoziatives Array mit den Schnüsseln 'checkedValue' und 'unCheckedValue'.
                    </para></listitem>
                </itemizedlist>

                <para>
                    Wenn <code>$checkedOptions</code> nicht vorhanden ist, wird 1 und 0 angenommen.
                </para>

                <programlisting role="php"><![CDATA[
<?php echo $view->checkBox(
    'foo',
    'bar',
    array(),
    array(),
    array('checkedValue' => 'foo', 'unCheckedValue' => 'bar')
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>ComboBox</emphasis>: dijit.layout.ComboBox. Komboboxen sind ein Hybrid zwischen
                    einem Select und einer Textbox mit automatischer Vervollständigung. Der grundsätzliche
                    Unterschied ist das man eine Option eingeben kann die nicht in der Liste der
                    vorhandenen Optionen ist, und trotzdem eine gültige Eingabe angenommen wird. Sie akzeptiert
                    ein optionales fünftes Argument, ein assoziatives Array <code>$options</code>; wenn es
                    angegeben wird, wird ComboBox als <code>select</code> dargestellt. Es ist auch zu
                    beachten das die verschiedenen <emphasis>Labelwerte</emphasis> des <code>$options</code>
                    Arrays im Formular zurückgegeben werden -- nicht die Werte selbst.
                </para>

                <para>
                    Alternativ kann eine Information übergeben werden die einen dojo.data Datenspeicher
                    bezeichnet der mit diesem Element zu verwenden ist. Wenn er angegeben wird,
                    wird die ComboBox als Texteingabe (<code>input</code>) dargestellt, und wird seine
                    Optionen über den Datenspeicher holen.
                </para>

                <para>
                    Um einen Datenspeicher zu spezifizieren, muß eine der folgenden <code>$params</code>
                    Schlüsselkombinationen angegeben werden:
                </para>

                <itemizedlist>
                    <listitem>
                        <para>
                            Der Schlüssel 'store' mit einem Arraywert; das Array sollte die folgenden
                            Schlüssel enthalten:
                        </para>

                        <itemizedlist>
                            <listitem><para>
                                <emphasis>store</emphasis>: Der Name der Javascript Variable die den
                                Datenspeicher repräsentiert (das könnte der Name sein den man für Ihn
                                verwenden will).
                            </para></listitem>

                            <listitem><para>
                                <emphasis>type</emphasis>: Der Typ des Datenspeichers der verwendet werden
                                soll; z.B., 'dojo.data.ItemFileReadStore'.
                            </para></listitem>

                            <listitem><para>
                                <emphasis>params</emphasis> (Optional): Ein assoziatives Array von
                                Schlüssel/Werte Paaren die zu verwenden sind um den Datenspeicher zu
                                konfigurieren. Der 'url' Parameter ist ein typisches Beispiel.
                            </para></listitem>
                        </itemizedlist>
                    </listitem>

                    <listitem>
                        <para>
                            Die Schlüssel:
                        </para>

                        <itemizedlist>
                            <listitem><para>
                                <emphasis>store</emphasis>: Ein String der den Namen des Datenspeicher zeigt
                                der zu verwenden ist.
                            </para></listitem>

                            <listitem><para>
                                <emphasis>storeType</emphasis>: Ein String der den dojo.data.type des
                                Datenspeichers anzeigt der zu verwenden ist (z.B. 'dojo.data.ItemFileReadStore').
                            </para></listitem>

                            <listitem><para>
                                <emphasis>storeParams</emphasis>: Ein assoziatives Array von
                                Schlüssel/Wertepaaren mit denen der Datenspeicher konfiguriert wird.
                            </para></listitem>
                        </itemizedlist>
                    </listitem>
                </itemizedlist>

                <programlisting role="php"><![CDATA[
// Als Select Element:
echo $view->comboBox(
    'foo',
    'bar',
    array(
        'autocomplete' => false,
    ),
    array(),
    array(
        'foo' => 'Foo',
        'bar' => 'Bar',
        'baz' => 'Baz',
    )
);

// Als dojo-aktiviertes Element:
echo $view->comboBox(
    'foo',
    'bar',
    array(
        'autocomplete' => false,
        'store'        => 'stateStore',
        'storeType'    => 'dojo.data.ItemFileReadStore',
        'storeParams'  => array('url' => '/js/states.json'),
    ),
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>CurrencyTextBox</emphasis>: dijit.form.CurrencyTextBox. Abgeleitet von
                    ValidationTextBox, und bietet Clientseitige Prüfung von Wärgungen. Es erwartet das
                    der Dijit Parameter 'currency' mit einem entsprechenden 3-zeichen Währungscode angegeben
                    wird. Man kann auch anderen Dijit Parameter spezifizieren die für ValidationTextBox und
                    TextBox gültig sind.
                </para>

                <programlisting role="php"><![CDATA[
echo $view->currencyTextBox(
    'foo',
    '$25.00',
    array('currency' => 'USD'),
    array('maxlength' => 20)
);
]]></programlisting>

                <note>
                    <title>Probleme mit Builds</title>

                    <para>
                        es gibt aktuell <ulink url="http://trac.dojotoolkit.org/ticket/7183">bekannte
                        Probleme bei der Verwendung der CurrencyTextBox mit Build Layern</ulink>. Ein
                        bekannter Work-Around ist sicherzustellen das das http-equiv Metatag des Content-Types
                        des Dokument auf das Zeichenset utf-8 gestellt wird, was mit folgendem Aufruf gemacht
                        wird:
                    </para>

                    <programlisting role="php"><![CDATA[
$view->headMeta()->appendHttpEquiv('Content-Type',
                                   'text/html; charset=utf-8');
]]></programlisting>

                    <para>
                        Das bedeutet natürlich, das man sicherstellen muß das der <code>headMeta()</code>
                        Platzhalter im Layout Skript ausgegeben wird.
                    </para>
                </note>
            </listitem>

            <listitem>
                <para>
                    <emphasis>DateTextBox</emphasis>: dijit.form.DateTextBox. Wird von ValidationTextBox
                    abgeleitet, und bietet sowohl Client-seitige Prüfungen von Daten, als auch einen
                    Dropdown Kalender für die Auswahl von Daten. Man kann jeden Dijit Parameter spezifizieren
                    der für ValidationTextBox oder TextBox vorhanden ist.
                </para>

                <programlisting role="php"><![CDATA[
echo $view->dateTextBox(
    'foo',
    '2008-07-11',
    array('required' => true)
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>Editor</emphasis>: dijit.Editor. Bietet einen WYSIGYG Editor über den
                    Benutzer Inhalte erstellen oder bearbieten können. <code>dijit.Editor</code> ist ein
                    pluginfähiger, erweiterbarer Editor mit einer Vielzahl an Parametern die für
                    die Anpassung verwendet werden können; siehe
                    <ulink url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/advanced-editing-and-display/editor-rich-text">
                    in die dijit.Editor Dokumentation</ulink> für weitere Details.
                </para>

                <programlisting role="php"><![CDATA[
echo $view->editor('foo');
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>FilteringSelect</emphasis>: dijit.form.FilteringSelect. Wie die ComboBox ist das
                    ein Select/Text Hybrid der entweder eine angegebenen Liste von Optionen darstellen kann,
                    oder jene vom dojo.data Datenspeicher. Anders als ComboBox, erlaubt FilteringSelect keine
                    Eingabe einer Option die nicht in seiner Liste vorhanden ist. Zusätzlich funktioniert es
                    Sie ein Standatrd Select in dem die Optionswerte, nicht die Label, zurückgegeben werden
                    wenn das Formular übertragen wird.
                </para>

                <para>
                    Bitte beachten Sie die obigen Informationen über die ComboBox für Beispiele und
                    mögliche Optionen für die Definition von Datenspeichern.
                </para>
            </listitem>

            <listitem>
                <para>
                    <emphasis>HorizontalSlider</emphasis> und <emphasis>VerticalSlider</emphasis>:
                    dijit.form.HorizontalSlider und dijit.form.VerticalSlider. Schieber sind UI Widgets für
                    die Auswahl von Zahlen in einem gegebenen Bereich; es gibt eine horizontale und eine
                    vertikale Variante.
                </para>

                <para>
                    Grundsätzlich benötigen Sie die Dijit Parameter 'minimum', 'maximum' und 'discreteValues'.
                    Diese definieren den Bereich der Werte. Andere übliche Optionen sind:
                </para>

                <itemizedlist>
                    <listitem><para>
                        'intermediateChanges' kann gesetzt werden um zu zeigen ob ein onChange Event ausgelöst
                        wird wenn der Gleiter genommen wird.
                    </para></listitem>

                    <listitem><para>
                        'clickSelect' kann gesetzt werden um das Klicken an einem Platz im Schieber zu erlauben
                        um den Wert zu setzen.
                    </para></listitem>

                    <listitem><para>
                        'pageIncrement' kann den Wert spezifizieren mit dem addiert/subtrahiert wird wenn
                        pageUp und pageDown verwendet werden.
                    </para></listitem>

                    <listitem><para>
                        'showButtons' kann gesetzt werden um die Darstellung von Buttons auf beiden Seiten
                        des Schiebers, für die Veränderung des Wertes, zu erlauben.
                    </para></listitem>
                </itemizedlist>

                <para>
                    Die Zend Framework Implementation erstellt ein verstecktes Element um den Wert des
                    Schiebers zu speichern.
                </para>

                <para>
                    Optional kann es gewünscht sein einen Maßstab oder ein Label für den Gleiter zu zeigen.
                    Um das zu tun, muß ein oder mehrere der Dijit Parameter 'topDecoration' und/oder
                    'bottomDecoration' (HorizontalSlider) oder 'leftDecoration' und/oder
                    'rightDecoration' (VerticalSlider) hinzufügen. Jede von Ihnen erwartet die folgenden
                    Optionen:
                </para>

                <itemizedlist>
                    <listitem><para>
                        <emphasis>container</emphasis>: Der Name des Containers.
                    </para></listitem>

                    <listitem><para>
                        <emphasis>labels</emphasis> (Optional): Ein Array von Labels das verwendet wird. Leere
                        Strings können an beiden Seiten verwendet werden um Labels nur für die inneren Werte
                        anzugeben. Wird benötigt wenn eine der 'Labels' Dijitvarianten spezifiziert wird.
                    </para></listitem>

                    <listitem><para>
                        <emphasis>dijit</emphasis> (Optional): Entweder HorizontalRule, HorizontalRuleLabels,
                        VerticalRule, oder VerticalRuleLabels, standardmäßig einer der Rule Dijits.
                    </para></listitem>

                    <listitem>
                        <para>
                            <emphasis>params</emphasis> (optional): Dijit Parameter für die Konfiguration des
                            Rule Dijits das verwendet wird. Spezifische Parameter für diese Dijits sind:
                        </para>

                        <itemizedlist>
                            <listitem><para>
                                <emphasis>container</emphasis> (Optional): Ein Array von Parametern und
                                Attributen für den Rule Container.
                            </para></listitem>

                            <listitem><para>
                                <emphasis>labels</emphasis> (Optional): Ein Array von Parametern und
                                Attributen für die Labels des Containers.
                            </para></listitem>
                        </itemizedlist>
                    </listitem>

                    <listitem><para>
                        <emphasis>attribs</emphasis> (Optional): HTML Attribute die mit den Maßstäben/Labels
                        verwendet werden. Diese sollten dem Format der <code>params</code> Option folgen und
                        können ein assoziatives Array mit den Schlüsseln 'container' und 'labels' sein.
                    </para></listitem>
                </itemizedlist>

                <programlisting role="php"><![CDATA[
echo $view->horizontalSlider(
    'foo',
    1,
    array(
        'minimum'             => -10,
        'maximum'             => 10,
        'discreteValues'      => 11,
        'intermediateChanges' => true,
        'showButtons'         => true,
        'topDecoration'       => array(
            'container' => 'topContainer'
            'dijit'     => 'HorizontalRuleLabels',
            'labels'    => array(
                ' ',
                '20%',
                '40%',
                '60%',
                '80%',
                ' ',
            ),
            'params' => array(
                'container' => array(
                    'style' => 'height:1.2em; font-size=75%;color:gray;',
                ),
                'labels' => array(
                    'style' => 'height:1em; font-size=75%;color:gray;',
                ),
            ),
        ),
        'bottomDecoration'    => array(
            'container' => 'bottomContainer'
            'labels'    => array(
                '0%',
                '50%',
                '100%',
            ),
            'params' => array(
                'container' => array(
                    'style' => 'height:1.2em; font-size=75%;color:gray;',
                ),
                'labels' => array(
                    'style' => 'height:1em; font-size=75%;color:gray;',
                ),
            ),
        ),
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>NumberSpinner</emphasis>: dijit.form.NumberSpinner. Eine Textbox für nummerische
                    Eingaben mit Buttons für das Inkrementieren und Dekrementieren.
                </para>

                <para>
                    Erwartet entweder ein Assoziatives Array für den Dijit Parameter 'constraints', oder
                    einfach die Schlüssel 'min', 'max' und 'places' (das würden auch die erwarteten Einträge
                    des Constraints Parameters sein). 'places' kann verwendet werden um anzugeben um wieviel
                    der NumberSpinner erhöht oder erniedrigt wird.
                </para>

                <programlisting role="php"><![CDATA[
echo $view->numberSpinner(
    'foo',
    5,
    array(
        'min'    => -10,
        'max'    => 10,
        'places' => 2,
    ),
    array(
        'maxlenth' => 3,
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>NumberTextBox</emphasis>: dijit.form.NumberTextBox. NumberTextBox bietet die
                    Möglichkeit die Nummerneinträge auf lokalisiertem Weg zu formatieren und anzuzeigen, optional
                    gegen angegebene Abhängigkeiten.
                </para>

                <programlisting role="php"><![CDATA[
echo $view->numberTextBox(
    'foo',
    5,
    array(
        'places' => 4,
        'type'   => 'percent',
    ),
    array(
        'maxlength' => 20,
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>PasswordTextBox</emphasis>: dijit.form.ValidationTextBox bindet eine
                    Passworteingabe. PasswordTextBox bietet die Möglichkeit Passworteingaben zu erstellen
                    die das aktuelle Dijitthema verwenden, sowie Clientseitige Prüfungen erlauben.
                </para>

                <programlisting role="php"><![CDATA[
echo $view->passwordTextBox(
    'foo',
    '',
    array(
        'required' => true,
    ),
    array(
        'maxlength' => 20,
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>RadioButton</emphasis>: dijit.form.RadioButton. Ein Set von Optionen von denen
                    nur eine ausgewählt werden kann. Dieses Verhalten entspricht auf jedem Tall dem normaler
                    Radio Buttons, hat aber das Look-and-Feel das mit dem anderer Dijit konsistent ist.
                </para>

                <para>
                    RadioButton akzeptiert ein optionales viertes Argument, <code>$options</code>, ein
                    assoziatives Array von Werte/Label Paaren das als Radiooptionen verwendet wird. Diese
                    können auch als <code>$attribs</code> Schlüssel <code>Optionen</code> angegeben werden.
                </para>

                <programlisting role="php"><![CDATA[
echo $view->radioButton(
    'foo',
    'bar',
    array(),
    array(),
    array(
        'foo' => 'Foo',
        'bar' => 'Bar',
        'baz' => 'Baz',
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>SimpleTextarea</emphasis>: dijit.form.SimpleTextarea. Diese funktionieren
                    wie normale Textareas, werden aber gestylt indem das aktuelle dijit Thema verwendet
                    wird. Es müssen weder die rows noch die columns Attribute spezifiziert werden;
                    verwende stattdessen <code>ems</code> oder Prozente für die Breite und Höhe.
                </para>

                <programlisting role="php"><![CDATA[
echo $view->simpleTextarea(
    'foo',
    'Bitte ab hier schreiben...',
    array(),
    array('style' => 'width: 90%; height: 5ems;')
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>SubmitButton</emphasis>: Ein dijit.form.Button bindet ein Submit Eingabeelement.
                    Siehe den Button Viewhelfer für weitere Details; der grundsätzliche Unterschied ist der,
                    das dieser Button ein Formular übertragen kann.
                </para>
            </listitem>

            <listitem>
                <para>
                    <emphasis>Textarea</emphasis>: dijit.form.Textarea. Diese funktionieren wie normale
                    Textareas, ausgenommen das Sie statt dem Setzen einer Anzahl von Reihen als Benutzertypen
                    expandieren. Die Breite sollte über Styleeinstellungen spezifiziert werden.
                </para>

                <programlisting role="php"><![CDATA[
echo $view->textarea(
    'foo',
    'Start writing here...',
    array(),
    array('style' => 'width: 300px;')
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>TextBox</emphasis>: dijit.form.TextBox. Diese Element ist primär vorhanden um das
                    übliche Look-and-Feel zwischen den verschiedenen Dijit Elementen zu bieten, und um
                    die Basisfunktionalität der anderen von TextBox abgeleiteten Klassen (ValidationTextBox,
                    NumberTextBox, CurrencyTextBox, DateTextBox, und TimeTextBox) zu bieten.
                </para>

                <para>
                    Übliche Dijitparameter enthalten 'lowercase' (Casten auf kleinschreibung), 'uppercase'
                    (Casten auf GROßSCHREIBUNG), 'propercase' (Casten auf ProperCase), und 'trim' (entferne
                    führende und schließende Leerezeichen); alle akzeptieren boolsche Werte. Zusätzlich kann
                    es gewünscht sein die Parameter 'size' und 'maxLength' zu spezifizieren.
                </para>

                <programlisting role="php"><![CDATA[
echo $view->textBox(
    'foo',
    'Irgendein Text',
    array(
        'trim'       => true,
        'propercase' => true,
        'maxLength'  => 20,
    ),
    array(
        'size' => 20,
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>TimeTextBox</emphasis>: dijit.form.TimeTextBox. Auch aus der TextBox Familie,
                    bietet TimeTextBox eine Drop Down Auswahl für Zeiten die verschiebbar ist und die vom
                    Benutzer ausgewählt werden kann. Dijit Parameter erlaubes es die Zeit zu spezifizieren
                    die im Select vorhanden ist sowie auch den sichtbaren Bereich der Zeiten.
                </para>

                <programlisting role="php"><![CDATA[
echo $view->timeTextBox(
    'foo',
    '',
    array(
        'am.pm'            => true,
        'visibleIncrement' => 'T00:05:00', // 5-Minuten addieren
        'visibleRange'     => 'T02:00:00', // Zeigt 2 Stunden die hinzugefügt werden können
    ),
    array(
        'size' => 20,
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>ValidationTextBox</emphasis>: dijit.form.ValidateTextBox. Bietet Client-seitige
                    Prüfungen für Textelemente. Ist von TextBox abgeleitet.
                </para>

                <para>
                    Übliche Dijit Parameter enthalten:
                </para>

                <itemizedlist>
                    <listitem><para>
                        <emphasis>invalidMessage</emphasis>: Eine Nachricht die angezeigt wird wenn eine
                        ungültige Eingabe erkannt wurde.
                    </para></listitem>

                    <listitem><para>
                        <emphasis>promptMessage</emphasis>: Eine Tooltip Hilfenachricht die verwendet wird.
                    </para></listitem>

                    <listitem><para>
                        <emphasis>regExp</emphasis>: Ein regulärer Ausdruck der für die Prüfung des Textes
                        verwendet wird. Reguläre Ausdrücke benötigen keine Begrenzungen.
                    </para></listitem>

                    <listitem><para>
                        <emphasis>required</emphasis>: Ob das Element benötigt wird oder nicht. Wenn das der
                        Fall ist, und das Element in einem dijit.form.Form eingebettet ist, wird es als
                        ungültig markiert und die Übertragung verhindert.
                    </para></listitem>
                </itemizedlist>

                <programlisting role="php"><![CDATA[
echo $view->validationTextBox(
    'foo',
    '',
    array(
        'required' => true,
        'regExp'   => '[\w]+',
        'invalidMessage' => 'Keine Leerzeichen oder nicht-Wort Zeichen erlaubt',
        'promptMessage'  => 'Nur ein einzelnes Wort das aus ' .
                            'alphanummerischen Zeichen und Unterstrichen besteht',
    ),
    array(
        'maxlength' => 20,
    )
);
]]></programlisting>
            </listitem>
        </itemizedlist>
    </sect3>

    <sect3 id="zend.dojo.view.dijit.custom">
        <title>Eigene Dijits</title>

        <para>
            Wenn man viel in Dojo herumtaucht, wird man sehr bald selbst eigene Dijits schreiben,
            oder experimentelle Dijits von Dojox verwenden. Wärend Zend Framework nicht jeden Dijit
            direkt unterstützen kann, bietet es einiges an direkter rudimentärer Unterstützung für
            jeden Dijit, und es bietet einiges an rudimentärer Unterstützung für beliebige Dijit
            Typen über den <code>CustomDijit</code> View Helfer.
        </para>

        <para>
            Die API des <code>CustomDijit</code> View Helfers ist genauso wie die jedes anderen
            Dijits, mit einem grundsätzlichen Unterschied: Das dritten "params" Argument
            <emphasis>muss</emphasis> das Attribut "dojotype" enthalten. Der Wert dieses Attributs
            sollte die Dijit Klasse sein die man verwenden will.
        </para>

        <para>
            <code>CustomDijit</code> erweitert den Basis <code>DijitContainer</code> View Helfer,
            welches er erlaubt Inhalte zu fangen (durch Verwendung der
            <code>captureStart()</code>/<code>captureEnd()</code> Methodenpaare).
            <code>captureStart()</code> erwartet auch das man das "dojoType" Attribut als sein
            "params" Argument übergibt.
        </para>

        <example id="zend.dojo.view.dijit.custom.example">
            <title>Verwendung von CustomDijit um ein dojox.layout.ContentPane darzustellen</title>

            <para>
                <code>dojox.layout.ContentPane</code> ist eine Next-Generation Erweiterung von
                <code>dijit.layout.ContentPane</code> und bietet ein Superset der Möglichkeiten
                dieser Klasse. Bis seine Funktionalitäten stabil sind, wird es weiterhin in Dojox
                leben. Wenn man es trotzdem im heutigen Zend Framework verwenden will, kann man
                den <code>CustomDijit</code> View Helfer verwenden.
                is a next-generation
                iteration of <code>dijit.layout.ContentPane</code>, and provides
                a superset of that class's capabilities. Until it's
                functionality stabilizes, it will continue to live in Dojox.
                However, if you want to use it in Zend Framework today, you can,
                using the <code>CustomDijit</code> view helper.
            </para>

            <para>
                Grundsätzlich kann man das folgende tun:
            </para>

            <programlisting role="php"><![CDATA[
<?php echo $this->customDijit(
    'foo',
    $content,
    array(
        'dojoType' => 'dojox.layout.ContentPane',
        'title'    => 'Eigene Ebene',
        'region'   => 'center'
    )
); ?>
]]></programlisting>

            <para>
                Wenn man stattdessen Inhalte fangen will, sollte einfach die
                <code>captureStart()</code> Methode verwendet, und der "dojoType" als "params"
                Argument übergeben werden:
            </para>

            <programlisting role="php"><![CDATA[
<?php $this->customDijit()->captureStart(
    'foo',
    array(
        'dojoType' => 'dojox.layout.ContentPane',
        'title'    => 'Eigene Ebene',
        'region'   => 'center'
    )
); ?>
Das ist der Inhalt der Ebene
<?php echo $this->customDijit()->captureEnd('foo'); ?>
]]></programlisting>

            <para>
                Man kann <code>CustomDijit</code> auch einfach erweitern um Unterstützung für
                eigene Dijits zu bieten. Wenn man, als Beispiel,
                <code>dijit.layout.ContentPane</code> erweitern will um eine eigene
                <code>foo.ContentPane</code> Klasse zu erstellen, kann man den folgenden Helfer
                erstellen um Ihn zu unterstützen:
            </para>

            <programlisting role="php"><![CDATA[
class My_View_Helper_FooContentPane
    extends Zend_Dojo_View_Helper_CustomDijit
{
    protected $_defaultDojoType = 'foo.ContentPane';

    public function fooContentPane(
        $id = null, $value = null,
        array $params = array(), array $attribs = array()
    ) {
        return $this->customDijit($id, $value, $params, $attribs);
    }
}
]]></programlisting>

            <para>
                Solange der eigene Dijit der gleichen grundsätzlichen API wie offizielle Dijits
                folgt, sollte die Verwendung oder Erweiterung von <code>CustomDijit</code> korrekt
                funktionieren.
            </para>
        </example>
    </sect3>
</sect2>
<!--
vim:se ts=4 sw=4 et:
-->