| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167 |
- <?xml version="1.0" encoding="UTF-8"?>
- <!-- EN-Revision: 16101 -->
- <!-- Reviewed: no -->
- <sect2 id="zend.dojo.view.dijit">
- <title>Dijit-Spezifische View Helfer</title>
- <para>
- Aus dem Dojo Handbuch: "Dijit ist ein Widget System das über Dojo gelegt wurde.". Dijit
- enthält eine Vielzahl von Layout und Formular Widgets die erstellt wurden um
- Zugriffsfeatures, Lokalisation, und standardtisiertes (und themenbasierendes) Look-and-Feel
- zu bieten.
- </para>
- <para>
- Zend Framework wird mit einer Vielzahl an View Helfern ausgeliefert die es erlauben Dijits
- in eigenen View Skripten darzustellen und anzupassen. Es gibt drei Basistypen:
- </para>
- <itemizedlist>
- <listitem>
- <para>
- <emphasis>Layout Container</emphasis>: Diese wurden erstellt um in View Skripten
- verwendet, oder von Formular Dekoratoren für Formulare, Unterformulare oder
- Anzeigegruppen konsumiert zu werden. Sie hüllen die verschiedenen angebotenen
- Klassen in dijit.layout ein. Jeder Dijit Layout Viewhelfer erwartet die folgenden
- Argumente:
- </para>
- <itemizedlist>
- <listitem><para>
- <code>$id</code>: Der Name des Containers oder die DOM ID.
- </para></listitem>
- <listitem><para>
- <code>$content</code>: Der Inhalt der vom Layout Container umhüllt werden
- soll.
- </para></listitem>
- <listitem><para>
- <code>$params</code> (Optional): Dijit-spezifische Parameter. Grundsätzlich
- kann jedes nicht-HTML Attribut verwendet werden um den Dijit Layout
- Container zu konfigurieren.
- </para></listitem>
- <listitem><para>
- <code>$attribs</code> (Optional): Jedes zusätzliche HTML Attribut das
- verwendet werden soll um den Container DIV darzustellen. Wenn der Schlüssel
- 'id' an dieses Array übergeben wird, wird es für die ID des DOM Formular
- Elements verwendet und <code>$id</code> wird für seinen Namen verwendet.
- </para></listitem>
- </itemizedlist>
- <para>
- Wenn an den Dijit Layout Viewhelfer keine Argumente übergeben werden, wird der
- Helfer selbst zurückgegeben. Das erlaubt es den Inhalt zu erhalten, was oft der
- einfachste Weg ist um Inhalt an den Layout Container zu übergeben. Beispiele für
- diese Funktionalität werden später in diesem Kapitel gezeigt.
- </para>
- </listitem>
- <listitem>
- <para>
- <emphasis>Form Dijit</emphasis>: Auch wen das dijit.form.Form Dijit für die
- Verwendung von Dijit Form Elementen nicht vollständig notwendig ist, stellt es
- sicher das, wenn ein Versuch unternommen wird ein Formular zu übertragen das die
- Client-seitigen Prüfungen nicht besteht, die Übertragung angehalten und eine
- Prüffehlermeldung geworfen wird. Der Form Dijit Viewhelfer erwartet die folgenden
- Argumente:
- </para>
- <itemizedlist>
- <listitem><para>
- <code>$id</code>: Der Name des Containers oder der DOM ID.
- </para></listitem>
- <listitem><para>
- <code>$attribs</code> (Optional): Alle zusätzliche HTML Attribute die
- verwendet werden sollten um das Container DIV darzustellen.
- </para></listitem>
- <listitem><para>
- <code>$content</code> (Optional): Der Inhalt der im Formular umschlossen
- wird. Wenn keiner übergeben wird, wird ein leerer String verwendet.
- </para></listitem>
- </itemizedlist>
- <para>
- Die Reihenfolge der Argumente variiert von den anderen Dijits um die Kompatibilität
- mit dem standard <code>form()</code> Viewhelfer zu haben.
- </para>
- </listitem>
- <listitem>
- <para>
- <emphasis>Form Elemente</emphasis>: Diese wurden designed um von
- <classname>Zend_Form</classname> verwendet zu werden, können aber auch selbstständig
- in Viewsktipten verwendet werden. Jedes Dijit Element Viewhelfer erwartet die
- folgenden Elemente:
- </para>
- <itemizedlist>
- <listitem><para>
- <code>$id</code>: Der Name des Elements oder die DOM ID.
- </para></listitem>
- <listitem><para>
- <code>$value</code> (Optional): Der aktuelle Wert des Elements.
- </para></listitem>
- <listitem><para>
- <code>$params</code> (Optional): Dijit-spezifische Parameter. Grundsätzlich
- können alle nicht-HTML Attribute für die Konfiguration des Dijits verwendet
- werden.
- </para></listitem>
- <listitem><para>
- <code>$attribs</code> (Optional): Jedes zusätzliche HTML Attribut das
- verwendet werden soll um das Dijit darzustellen. Wenn der Schlüssel 'id' an
- dieses Array übergeben wird, wird es für die ID des DOM Formular Elements
- verwendet und <code>$id</code> wird für seinen Namen verwendet.
- </para></listitem>
- </itemizedlist>
- <para>
- Einige Elemente benötigen mehr Argumente; diese werden in den Beschreibungen der
- individuellen Elementhelfer erklärt.
- </para>
- </listitem>
- </itemizedlist>
- <para>
- Um diese Viewhelfer zu verwendenn, muß der Pfad zu den Dojo Viewhelfern im View Objekt
- registriert werden.
- </para>
- <example id="zend.dojo.view.dijit.prefixpath">
- <title>Registrierung des Präfix Pfades zu den Dojo Viewhelfern</title>
- <programlisting 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 <code>string ($id = null, $content = '',
- array $params = array(), array $attribs = array())</code>. In allen Fällen wird,
- wenn man keine Argumente übergibt, das Helferobjekt selbst zurückgegeben. Das gibt einem
- Zugriff auf die <code>captureStart()</code> und <code>captureEnd()</code> Methoden,
- welche es erlauben Inhalte zu holen statt diese an den Layout Container zu übergeben.
- </para>
- <itemizedlist>
- <listitem>
- <para>
- <emphasis>AccordionContainer</emphasis>: dijit.layout.AccordionContainer. Fügt
- alle Ausschnitte vertikal zusallen; das Klicken auf die Überschrift eines
- Ausschnittes expandiert diesen und zeigt den betreffenden Ausschnitt an.
- </para>
- <programlisting 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>
- <code>captureStart($id, array $params = array(), array $attribs =
- array())</code>: Beginnt die Erfassung von Inhalt um Ihn in einem Container
- einzufügen. <code>$params</code> referiert auf die Dijit Parameters die mit dem
- Container verwendet werden, wärend <code>$attribs</code> auf alle generellen
- HTML Attribute die verwendet werden, zeigt.
- </para>
- <para>
- Container können für die Erfassung gekoppelt werden, <emphasis>solange keine IDs
- doppelt vorhanden sind</emphasis>.
- </para>
- </listitem>
- <listitem>
- <para>
- <code>captureEnd($id)</code>: Beendet die Erfassung von Inhalten die in den
- Container übernommen werden. <code>$id</code> sollte auf eine Id zeigen die
- vorher bei dem Aufruf von <code>captureStart()</code> verwendet wurde. Gibt
- einen String zurück der den Container und seinen Inhalt repräsentiert, wie wenn
- man einfach den Inhalt an den Helfer selbst übergeben hätte.
- </para>
- </listitem>
- </itemizedlist>
- <example id="zend.dojo.view.dijit.layout.borderexample">
- <title>Beispiel eines BorderContainer Layout Dijits</title>
- <para>
- BorderContainers, speziell wenn Sie mit der Fähigkeit gekoppelt werden Inhalte zu
- erfassen, sind nützlich um komplexe Layouteffekte zu erhalten.
- </para>
- <programlisting 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 <code>string ($id, $value = '', array $params
- = array(), array $attribs = array())</code>.
- </para>
- <itemizedlist>
- <listitem>
- <para>
- <emphasis>Button</emphasis>: dijit.form.Button. Zeigt einen Formular Button.
- </para>
- <programlisting 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
- <code>$checkedOptions</code>, welches das folgende enthalten kann:
- </para>
- <itemizedlist>
- <listitem><para>
- ein indiziertes Array mit zwei Werten, einen angehackten Wert und einem
- nicht angehackten Wert, in dieser Reihenfolge; oder
- </para></listitem>
- <listitem><para>
- ein assoziatives Array mit den Schnüsseln 'checkedValue' und
- 'unCheckedValue'.
- </para></listitem>
- </itemizedlist>
- <para>
- Wenn <code>$checkedOptions</code> nicht vorhanden ist, wird 1 und 0 angenommen.
- </para>
- <programlisting 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 <code>$options</code>; wenn es angegeben wird, wird ComboBox
- als <code>select</code> dargestellt. Es ist auch zu beachten das die
- verschiedenen <emphasis>Labelwerte</emphasis> des <code>$options</code> Arrays
- im Formular zurückgegeben werden -- nicht die Werte selbst.
- </para>
- <para>
- Alternativ kann eine Information übergeben werden die einen dojo.data
- Datenspeicher bezeichnet der mit diesem Element zu verwenden ist. Wenn er
- angegeben wird, wird die ComboBox als Texteingabe (<code>input</code>)
- dargestellt, und wird seine Optionen über den Datenspeicher holen.
- </para>
- <para>
- Um einen Datenspeicher zu spezifizieren, muß eine der folgenden
- <code>$params</code> Schlüsselkombinationen angegeben werden:
- </para>
- <itemizedlist>
- <listitem>
- <para>
- Der Schlüssel 'store' mit einem Arraywert; das Array sollte die
- folgenden Schlüssel enthalten:
- </para>
- <itemizedlist>
- <listitem><para>
- <emphasis>store</emphasis>: Der Name der Javascript Variable die den
- Datenspeicher repräsentiert (das könnte der Name sein den man für
- Ihn verwenden will).
- </para></listitem>
- <listitem><para>
- <emphasis>type</emphasis>: Der Typ des Datenspeichers der verwendet
- werden soll; z.B., 'dojo.data.ItemFileReadStore'.
- </para></listitem>
- <listitem><para>
- <emphasis>params</emphasis> (Optional): Ein assoziatives Array von
- Schlüssel/Werte Paaren die zu verwenden sind um den Datenspeicher zu
- konfigurieren. Der 'url' Parameter ist ein typisches Beispiel.
- </para></listitem>
- </itemizedlist>
- </listitem>
- <listitem>
- <para>
- Die Schlüssel:
- </para>
- <itemizedlist>
- <listitem><para>
- <emphasis>store</emphasis>: Ein String der den Namen des
- Datenspeicher zeigt der zu verwenden ist.
- </para></listitem>
- <listitem><para>
- <emphasis>storeType</emphasis>: Ein String der den dojo.data.type
- des Datenspeichers anzeigt der zu verwenden ist (z.B.
- 'dojo.data.ItemFileReadStore').
- </para></listitem>
- <listitem><para>
- <emphasis>storeParams</emphasis>: Ein assoziatives Array von
- Schlüssel/Wertepaaren mit denen der Datenspeicher konfiguriert wird.
- </para></listitem>
- </itemizedlist>
- </listitem>
- </itemizedlist>
- <programlisting 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 das das http-equiv Metatag des Content-Types
- des Dokument auf das Zeichenset utf-8 gestellt wird, was mit folgendem
- Aufruf gemacht wird:
- </para>
- <programlisting 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
- <code>headMeta()</code> Platzhalter im Layout Skript ausgegeben wird.
- </para>
- </note>
- </listitem>
- <listitem>
- <para>
- <emphasis>DateTextBox</emphasis>: dijit.form.DateTextBox. Wird von
- ValidationTextBox abgeleitet, und bietet sowohl Client-seitige Prüfungen von
- Daten, als auch einen Dropdown Kalender für die Auswahl von Daten. Man kann
- jeden Dijit Parameter spezifizieren der für ValidationTextBox oder TextBox
- vorhanden ist.
- </para>
- <programlisting 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. <code>dijit.Editor</code> ist
- ein pluginfähiger, erweiterbarer Editor mit einer Vielzahl an Parametern die für
- die Anpassung verwendet werden können; siehe <ulink
- url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/advanced-editing-and-display/editor-rich-text">in
- die dijit.Editor Dokumentation</ulink> für weitere Details.
- </para>
- <programlisting language="php"><![CDATA[
- echo $view->editor('foo');
- ]]></programlisting>
- </listitem>
- <listitem>
- <para>
- <emphasis>FilteringSelect</emphasis>: dijit.form.FilteringSelect. Wie die
- ComboBox ist das ein Select/Text Hybrid der entweder eine angegebenen Liste von
- Optionen darstellen kann, oder jene vom dojo.data Datenspeicher. Anders als
- ComboBox, erlaubt FilteringSelect keine Eingabe einer Option die nicht in seiner
- Liste vorhanden ist. Zusätzlich funktioniert es Sie ein Standatrd Select in dem
- die Optionswerte, nicht die Label, zurückgegeben werden wenn das Formular
- übertragen wird.
- </para>
- <para>
- Bitte beachten Sie die obigen Informationen über die ComboBox für Beispiele und
- mögliche Optionen für die Definition von Datenspeichern.
- </para>
- </listitem>
- <listitem>
- <para>
- <emphasis>HorizontalSlider</emphasis> und <emphasis>VerticalSlider</emphasis>:
- dijit.form.HorizontalSlider und dijit.form.VerticalSlider. Schieber sind UI
- Widgets für die Auswahl von Zahlen in einem gegebenen Bereich; es gibt eine
- horizontale und eine vertikale Variante.
- </para>
- <para>
- Grundsätzlich benötigen Sie die Dijit Parameter 'minimum', 'maximum' und
- 'discreteValues'. Diese definieren den Bereich der Werte. Andere übliche
- Optionen sind:
- </para>
- <itemizedlist>
- <listitem><para>
- 'intermediateChanges' kann gesetzt werden um zu zeigen ob ein onChange Event
- ausgelöst wird wenn der Gleiter genommen wird.
- </para></listitem>
- <listitem><para>
- 'clickSelect' kann gesetzt werden um das Klicken an einem Platz im Schieber
- zu erlauben um den Wert zu setzen.
- </para></listitem>
- <listitem><para>
- 'pageIncrement' kann den Wert spezifizieren mit dem addiert/subtrahiert wird
- wenn pageUp und pageDown verwendet werden.
- </para></listitem>
- <listitem><para>
- 'showButtons' kann gesetzt werden um die Darstellung von Buttons auf beiden
- Seiten des Schiebers, für die Veränderung des Wertes, zu erlauben.
- </para></listitem>
- </itemizedlist>
- <para>
- Die Zend Framework Implementation erstellt ein verstecktes Element um den Wert
- des Schiebers zu speichern.
- </para>
- <para>
- Optional kann es gewünscht sein einen Maßstab oder ein Label für den Gleiter zu
- zeigen. Um das zu tun, muß ein oder mehrere der Dijit Parameter 'topDecoration'
- und/oder 'bottomDecoration' (HorizontalSlider) oder 'leftDecoration' und/oder
- 'rightDecoration' (VerticalSlider) hinzufügen. Jede von Ihnen erwartet die
- folgenden Optionen:
- </para>
- <itemizedlist>
- <listitem><para>
- <emphasis>container</emphasis>: Der Name des Containers.
- </para></listitem>
- <listitem><para>
- <emphasis>labels</emphasis> (Optional): Ein Array von Labels das verwendet
- wird. Leere Strings können an beiden Seiten verwendet werden um Labels nur
- für die inneren Werte anzugeben. Wird benötigt wenn eine der 'Labels'
- Dijitvarianten spezifiziert wird.
- </para></listitem>
- <listitem><para>
- <emphasis>dijit</emphasis> (Optional): Entweder HorizontalRule,
- HorizontalRuleLabels, VerticalRule, oder VerticalRuleLabels, standardmäßig
- einer der Rule Dijits.
- </para></listitem>
- <listitem>
- <para>
- <emphasis>params</emphasis> (optional): Dijit Parameter für die
- Konfiguration des Rule Dijits das verwendet wird. Spezifische Parameter
- für diese Dijits sind:
- </para>
- <itemizedlist>
- <listitem><para>
- <emphasis>container</emphasis> (Optional): Ein Array von Parametern
- und Attributen für den Rule Container.
- </para></listitem>
- <listitem><para>
- <emphasis>labels</emphasis> (Optional): Ein Array von Parametern und
- Attributen für die Labels des Containers.
- </para></listitem>
- </itemizedlist>
- </listitem>
- <listitem><para>
- <emphasis>attribs</emphasis> (Optional): HTML Attribute die mit den
- Maßstäben/Labels verwendet werden. Diese sollten dem Format der
- <code>params</code> Option folgen und können ein assoziatives Array mit den
- Schlüsseln 'container' und 'labels' sein.
- </para></listitem>
- </itemizedlist>
- <programlisting 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
- nummerische Eingaben mit Buttons für das Inkrementieren und Dekrementieren.
- </para>
- <para>
- Erwartet entweder ein Assoziatives Array für den Dijit Parameter 'constraints',
- oder einfach die Schlüssel 'min', 'max' und 'places' (das würden auch die
- erwarteten Einträge des Constraints Parameters sein). 'places' kann verwendet
- werden um anzugeben um wieviel der NumberSpinner erhöht oder erniedrigt wird.
- </para>
- <programlisting 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, <code>$options</code>,
- ein assoziatives Array von Werte/Label Paaren das als Radiooptionen verwendet
- wird. Diese können auch als <code>$attribs</code> Schlüssel
- <code>Optionen</code> angegeben werden.
- </para>
- <programlisting 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 <code>ems</code> 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 ' .
- 'alphanummerischen Zeichen und Unterstrichen besteht',
- ),
- array(
- 'maxlength' => 20,
- )
- );
- ]]></programlisting>
- </listitem>
- </itemizedlist>
- </sect3>
- <sect3 id="zend.dojo.view.dijit.custom">
- <title>Eigene Dijits</title>
- <para>
- Wenn man viel in Dojo herumtaucht, wird man sehr bald selbst eigene Dijits schreiben,
- oder experimentelle Dijits von Dojox verwenden. Wärend Zend Framework nicht jeden Dijit
- direkt unterstützen kann, bietet es einiges an direkter rudimentärer Unterstützung für
- jeden Dijit, und es bietet einiges an rudimentärer Unterstützung für beliebige Dijit
- Typen über den <code>CustomDijit</code> View Helfer.
- </para>
- <para>
- Die API des <code>CustomDijit</code> View Helfers ist genauso wie die jedes anderen
- Dijits, mit einem grundsätzlichen Unterschied: Das dritten "params" Argument
- <emphasis>muss</emphasis> das Attribut "dojotype" enthalten. Der Wert dieses Attributs
- sollte die Dijit Klasse sein die man verwenden will.
- </para>
- <para>
- <code>CustomDijit</code> erweitert den Basis <code>DijitContainer</code> View Helfer,
- welches er erlaubt Inhalte zu fangen (durch Verwendung der
- <code>captureStart()</code>/<code>captureEnd()</code> Methodenpaare).
- <code>captureStart()</code> erwartet auch das man das "dojoType" Attribut als sein
- "params" Argument übergibt.
- </para>
- <example id="zend.dojo.view.dijit.custom.example">
- <title>Verwendung von CustomDijit um ein dojox.layout.ContentPane darzustellen</title>
- <para>
- <code>dojox.layout.ContentPane</code> ist eine Next-Generation Erweiterung von
- <code>dijit.layout.ContentPane</code> und bietet ein Superset der Möglichkeiten
- dieser Klasse. Bis seine Funktionalitäten stabil sind, wird es weiterhin in Dojox
- leben. Wenn man es trotzdem im heutigen Zend Framework verwenden will, kann man
- den <code>CustomDijit</code> View Helfer verwenden.
- is a next-generation
- iteration of <code>dijit.layout.ContentPane</code>, and provides
- a superset of that class's capabilities. Until it's
- functionality stabilizes, it will continue to live in Dojox.
- However, if you want to use it in Zend Framework today, you can,
- using the <code>CustomDijit</code> view helper.
- </para>
- <para>
- Grundsätzlich kann man das folgende tun:
- </para>
- <programlisting 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
- <code>captureStart()</code> 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 <code>CustomDijit</code> auch einfach erweitern um Unterstützung für
- eigene Dijits zu bieten. Wenn man, als Beispiel,
- <code>dijit.layout.ContentPane</code> erweitern will um eine eigene
- <code>foo.ContentPane</code> Klasse zu erstellen, kann man den folgenden Helfer
- erstellen um Ihn zu unterstützen:
- </para>
- <programlisting 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 API wie offizielle Dijits
- folgt, sollte die Verwendung oder Erweiterung von <code>CustomDijit</code> korrekt
- funktionieren.
- </para>
- </example>
- </sect3>
- </sect2>
- <!--
- vim:se ts=4 sw=4 et:
- -->
|