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

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

            <itemizedlist>
                <listitem>
                    <para>
                        <varname>$id</varname>: Der Name des Containers oder die DOM 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 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 <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 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>
                        <varname>$id</varname>: Der Name des Containers oder der DOM ID.
                    </para>
                </listitem>

                <listitem>
                    <para>
                        <varname>$attribs</varname> (Optional): Alle zusätzliche HTML 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 DOM 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 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 <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 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 <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>: 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 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>: dijit.layout.AccordionPane. 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>: dijit.layout.BorderContainer. 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>: dijit.layout.ContentPane. 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>: dijit.layout.SplitContainer. 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>: 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 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>: 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 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ärend
                    <varname>$attribs</varname> 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>
                    <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 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 <command>string ($id, $value = '', array
                $params = array(), array $attribs = array())</command>.
        </para>

        <itemizedlist>
            <listitem>
                <para>
                    <emphasis>Button</emphasis>: dijit.form.Button. 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>: dijit.form.CheckBox. 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>: 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 <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 dojo.data
                    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., '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 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>: 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 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>: 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 language="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.
                    <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/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 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 <classname>dijit._editor.RichText</classname> zeigt dass es potentielle
                        Sicherheits Probleme bereiten kann wenn man es auf ein HTML
                        <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>: 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
                            <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>: dijit.form.NumberSpinner. 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>: 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 language="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 language="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
                    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/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>: 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 <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 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 language="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 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>: 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 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>: 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 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>