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

<?xml version="1.0" encoding="UTF-8"?>
<!-- EN-Revision: 24249 -->
<!-- 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 standardisiertes (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 <command>dijit.layout</command> ein. Jeder Dijit Layout Viewhelfer
                erwartet die folgenden Argumente:
            </para>

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

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

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

                <listitem>
                    <para>
                        <varname>$attribs</varname> (Optional): Jedes zusätzliche
                        <acronym>HTML</acronym> 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 <acronym>DOM</acronym> Formular Elements verwendet
                        und <varname>$id</varname> 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 <command>dijit.form.Form</command>
                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>
                        <varname>$id</varname>: Der Name des Containers oder der
                        <acronym>DOM</acronym> ID.
                    </para>
                </listitem>

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

                <listitem>
                    <para>
                        <varname>$content</varname> (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 <methodname>form()</methodname> 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>
                        <varname>$id</varname>: Der Name des Elements oder die
                        <acronym>DOM</acronym> ID.
                    </para>
                </listitem>

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

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

                <listitem>
                    <para>
                        <varname>$attribs</varname> (Optional): Jedes zusätzliche
                        <acronym>HTML</acronym> 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 <acronym>DOM</acronym> Formular Elements verwendet und
                        <varname>$id</varname> 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 language="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 <command>dijit.layout</command> 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/reference-guide/dijit/layout.html">lesen Sie
                hierüber im Dojo Handbuch nach</ulink>.
        </para>

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

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

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

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

                <programlisting language="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>:
                    <command>dijit.layout.BorderContainer</command>. Ermöglicht
                    Layouts mit optional größenveränderbaren Ausschnitten wie man Sie in
                    traditionellen Anwendungen oft sieht.
                </para>

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

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

                <programlisting language="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>:
                    <command>dijit.layout.SplitContainer</command>. Erlaubt
                    Ausschnitte mit größenveränderbarem Inhalt; sollte in Dojo nicht mehr verwendet
                    werden, stattdessen BorderContainer.
                </para>

                <programlisting language="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>:
                    <command>dijit.layout.StackContainer</command>. Alle
                    Ausschnitte eines StackContainers werden in einem Stack platziert; erstelle
                    Buttons oder Funktionalität um einen auf einmal zu erhalten.
                </para>

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

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

                <programlisting language="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>
                    <command>captureStart($id, array $params = array(), array $attribs =
                        array());</command>: Beginnt die Erfassung von Inhalt um Ihn in einem
                    Container einzufügen. <varname>$params</varname> referiert auf die Dijit
                    Parameters die mit dem Container verwendet werden, während
                    <varname>$attribs</varname> auf alle generellen <acronym>HTML</acronym>
                    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>
                    <methodname>captureEnd($id)</methodname>: Beendet die Erfassung von Inhalten
                    die in den Container übernommen werden. <varname>$id</varname> sollte auf eine
                    Id zeigen die vorher bei dem Aufruf von <methodname>captureStart()</methodname>
                    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 language="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 <command>dijit.form</command> Baum.
            Für zusätzliche Informationen über die generelle Verwendung dieser Elemente, sowie der
            akzeptierten Parameter <ulink
                url="http://dojotoolkit.org/reference-guide/dijit/form.html">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 <command>string ($id, $value = '', array
                $params = array(), array $attribs = array())</command>.
        </para>

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

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

            <listitem>
                <para>
                    <emphasis>CheckBox</emphasis>: <command>dijit.form.CheckBox</command>. Zeigt
                    eine Checkbox an. Akzeptiert ein optionales fünftes Argument, das Array
                    <varname>$checkedOptions</varname>, 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 <varname>$checkedOptions</varname> nicht vorhanden ist, wird 1 und 0
                    angenommen.
                </para>

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

            <listitem>
                <para>
                    <emphasis>ComboBox</emphasis>: <command>dijit.layout.ComboBox</command>.
                    Comboboxen 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 <varname>$options</varname>; wenn es
                    angegeben wird, wird ComboBox als <emphasis>select</emphasis> dargestellt. Es
                    ist auch zu beachten dass die verschiedenen <emphasis>Labelwerte</emphasis> des
                    <varname>$options</varname> Arrays im Formular zurückgegeben werden -- nicht
                    die Werte selbst.
                </para>

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

                <para>
                    Um einen Datenspeicher zu spezifizieren, muß eine der folgenden
                    <varname>$params</varname> 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.,
                                    '<command>dojo.data.ItemFileReadStore</command>'.
                                </para>
                            </listitem>

                            <listitem>
                                <para>
                                    <emphasis>params</emphasis> (Optional): Ein assoziatives Array
                                    von Schlüssel und 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
                                    <command>dojo.data</command> Typ des Datenspeichers anzeigt der
                                    zu verwenden ist
                                    (z.B. '<command>dojo.data.ItemFileReadStore</command>').
                                </para>
                            </listitem>

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

                <programlisting language="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>:
                    <command>dijit.form.CurrencyTextBox</command>. 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 language="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 dass das http-equiv Metatag des
                        Content-Types des Dokument auf das Zeichenset utf-8 gestellt wird, was mit
                        folgendem Aufruf gemacht wird:
                    </para>

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

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

            <listitem>
                <para>
                    <emphasis>DateTextBox</emphasis>: <command>dijit.form.DateTextBox</command>.
                    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 language="php"><![CDATA[
echo $view->dateTextBox(
    'foo',
    '2008-07-11',
    array('required' => true)
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>Editor</emphasis>: <command>dijit.Editor</command>. Bietet einen
                    <acronym>WYSIGYG</acronym> Editor über den Benutzer Inhalte erstellen oder
                    bearbeiten können. <command>dijit.Editor</command> 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/reference-guide/dijit/Editor.html">in
                        die dijit.Editor Dokumentation</ulink> für weitere Details.
                </para>

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

                <note>
                    <title>Das Editor Dijit verwendet standardmäßig div</title>

                    <para>
                        Das Editor dijit verwendet standardmäßig ein <acronym>HTML</acronym>
                        <acronym>DIV</acronym>. Die <ulink
                            url="http://api.dojotoolkit.org/jsdoc/HEAD/dijit._editor.RichText">Dokumentation</ulink>
                        für <command>dijit._editor.RichText</command> zeigt dass es potentielle
                        Sicherheits Probleme bereiten kann wenn man es auf ein
                        <acronym>HTML</acronym> <acronym>TEXTAREA</acronym> erstellt.
                    </para>

                    <para>
                        Um eine sanfte Degration in Umgebungen zu erlauben in denen Javascript nicht
                        vorhanden ist, umhüllt <classname>Zend_Dojo_View_Helper_Editor</classname>
                        auch eine <acronym>TEXTAREA</acronym> in einem <acronym>NOSCRIPT</acronym>
                        Tag; der Inhalt dieser <acronym>TEXTAREA</acronym> wird richtig escaped
                        um sicherheitsproblematische Vektoren zu vermeiden.
                    </para>
                </note>
            </listitem>

            <listitem>
                <para>
                    <emphasis>FilteringSelect</emphasis>:
                    <command>dijit.form.FilteringSelect</command>. Wie die ComboBox ist das ein
                    Select und Text Hybrid der entweder eine angegebenen Liste von Optionen
                    darstellen kann, oder jene vom <command>dojo.data</command> Datenspeicher.
                    Anders als ComboBox, erlaubt FilteringSelect keine Eingabe einer Option die
                    nicht in seiner Liste vorhanden ist. Zusätzlich funktioniert es Sie ein Standard
                    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>:
                    <command>dijit.form.HorizontalSlider</command> und
                    <command>dijit.form.VerticalSlider</command>. 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 oder
                            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 Implementation von Zend Framework 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): <acronym>HTML</acronym>
                            Attribute die mit den Maßstäben und Labels verwendet werden. Diese
                            sollten dem Format der <property>params</property> Option folgen und
                            können ein assoziatives Array mit den Schlüsseln 'container' und
                            'labels' sein.
                        </para>
                    </listitem>
                </itemizedlist>

                <programlisting language="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>: <command>dijit.form.NumberSpinner</command>.
                    Eine Textbox für numerische 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 language="php"><![CDATA[
echo $view->numberSpinner(
    'foo',
    5,
    array(
        'min'    => -10,
        'max'    => 10,
        'places' => 2,
    ),
    array(
        'maxlenth' => 3,
    )
);
]]></programlisting>
            </listitem>

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

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

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

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

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

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

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

            <listitem>
                <para>
                    <emphasis>SimpleTextarea</emphasis>:
                    <command>dijit.form.SimpleTextarea</command>. 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 <property>ems</property> oder Prozente für die Breite und Höhe.
                </para>

                <programlisting language="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 <command>dijit.form.Button</command>
                    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>: <command>dijit.form.Textarea</command>. 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 language="php"><![CDATA[
echo $view->textarea(
    'foo',
    'Start writing here...',
    array(),
    array('style' => 'width: 300px;')
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>TextBox</emphasis>: <command>dijit.form.TextBox</command>. 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 lowercase),
                    'uppercase' (Casten auf <acronym>UPPERCASE</acronym>), '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 language="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>: <command>dijit.form.TimeTextBox</command>.
                    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 language="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>:
                    <command>dijit.form.ValidateTextBox</command>. 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
                            <command>dijit.form.Form</command> eingebettet ist, wird es als ungültig
                            markiert und die Übertragung verhindert.
                        </para>
                    </listitem>
                </itemizedlist>

                <programlisting language="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 ' .
                            'alphanumerischen 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 <classname>CustomDijit</classname> View Helfer.
        </para>

        <para>
            Die <acronym>API</acronym> des <classname>CustomDijit</classname> 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>
            <classname>CustomDijit</classname> erweitert den Basis
            <classname>DijitContainer</classname> View Helfer, welches er erlaubt Inhalte zu fangen
            (durch Verwendung der <methodname>captureStart()</methodname> und
            <methodname>captureEnd()</methodname> Methodenpaare).
            <methodname>captureStart()</methodname> 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>
                <command>dojox.layout.ContentPane</command> ist eine Next-Generation Erweiterung von
                <command>dijit.layout.ContentPane</command> 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 <classname>CustomDijit</classname> View Helfer verwenden.
            </para>

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

            <programlisting language="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
                <methodname>captureStart()</methodname> Methode verwendet, und der "dojoType" als
                "params" Argument übergeben werden:
            </para>

            <programlisting language="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 <classname>CustomDijit</classname> auch einfach erweitern um Unterstützung
                für eigene Dijits zu bieten. Wenn man, als Beispiel,
                <command>dijit.layout.ContentPane</command> erweitern will um eine eigene
                <command>foo.ContentPane</command> Klasse zu erstellen, kann man den folgenden
                Helfer erstellen um Ihn zu unterstützen:
            </para>

            <programlisting language="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 <acronym>API</acronym> wie
                offizielle Dijits folgt, sollte die Verwendung oder Erweiterung von
                <classname>CustomDijit</classname> korrekt funktionieren.
            </para>
        </example>
    </sect3>
</sect2>