Previous Next

Dojo Form Elemente und Dekoratore

Aufbauend auf den Dijit View Helfern bietet die Familie der Zend_Dojo_Form Klassen die Möglichkeit Dijits nativ in eigenen Formularen anzupassen.

Es gibt drei Optionen für die Anpassung der Dojo Formularelemente in eigenen Formularen:

  • Verwenden von Zend_Dojo::enableForm(). Das fügt Pluginpfade für Dekoratore und Elemente in allen hinzugefügten Formularelementen, rekursiv, hinzu. Zusätzlich macht es die Viewobjekte dojo-verwendbar. Trotzdem ist zu beachten das jedes Unterformular das nach diesem Aufruf angefügt wird, auch an Zend_Dojo::enableForm() übergeben wird.

  • Verwenden der Dojo-spezifischen Formular und Unterformular Implementationen, Zend_Dojo_Form und Zend_Dojo_Form_SubForm. Diese können als sofort verwendbarer Ersatz für Zend_Form und Zend_Form_SubForm verwendet werden, enthalten alle notwendigen Dekorator und Elementpfade, setzen die Dojo-spezifische Standard-DisplayGroup-Klasse, und machen die View dojo-verwendbar.

  • Als letztes, und weitschweifigstes, kan man die notwendigen Dekorator und Elementpfade selbst setzen, die Standard-DisplayGroup-Klasse setzen, und die View dojo-verwendbar machen. Da Zend_Dojo::enableForm() das bereits macht, gibt es nur sehr wenig Gründe diesen Weg zu nehmen.

Example #1 Aktivieren von Dojo in bestehenden Formularen

"Warte mal,", wird man sagen; "Ich erweitere bereits Zend_Form mit meiner eigenen Formularklasse! Wie kann ich Sie Dojo-verwendbar machen?'"

Als erstes, und einfachstes, muß einfach die Erweiterung von Zend_Form so geändert werden das Zend_Dojo_Form erweitert wird, und alle Plätze in denen man Zend_Form_SubForm instanziert so aktualisiert werden das Zend_Dojo_Form_SubForm instanziert wird.

Ein zweiter Weg ist der Aufruf von Zend_Dojo::enableForm() in der eigenen init() Methode des Formulars; wenn die Fomulardefinition komplett ist, muß durch alle Unterformulare iteriert werden um Sie für Dojo zu aktivieren:

class My_Form_Custom extends Zend_Form
{
    public function init()
    {
        // Das Formular Dojo-aktivieren:
        Zend_Dojo::enableForm($this);

        // ... die Fomulardefinition hier weiterführen

        // Alle Unterformulare für Dojo aktivieren:
        foreach ($this->getSubForms() as $subForm) {
            Zend_Dojo::enableForm($subForm);
        }
    }
}

Die Verwendung der Dijit-spezifischen Formulardekoratoren und Elemente ist wie die Verwendung von anderen Formulardekoratoren oder Element.

Dijit-Spezifische Formular Dekoratore

Die meisten Formular Elemente können den DijitElement Dekorator verwenden, welche die Dijit Parameter von den Elementen nimmt und Sie, und andere Metadaten, dem View Helfer übergibt der vom Element spezifiziert wurde. Für die Dekoration von Formularen, Unterformularen und Anzeigegruppen gibt es trotzdem ein Set von Dekoratoren die den verschiedenen Layout Dijits entsprechen.

Alle Dijit Dekoratore schauen nach der dijitParams Eigenschaft des gegebenen Elements das dekoriert werden soll, und gibt Sie als $params Array an den verwendeten Dijit View Helfer; diese werden dann von den anderen Eigenschaften seperiert damit keine Duplikation von Informationen stattfindet.

DijitElement Dekorator

Die der ViewHelper Dekorator erwartet DijitElement eine helper Eigenschaft im Elemente welche dann verwendet wird wenn der View Helfer sich um die Darstellung kümmert. Dijit Parameter werden typischerweise direkt vom Element geholt, können aber auch als Optionen über den dijitParams Schlüssel übergeben werden (der Wert des Schlüssels sollte ein assoziatives Array von Optionen sein).

Es ist wichtig das jedes Element eine einzigartige ID hat (die wird vom der getId() Methode des Elements geholt). Wenn doppelte im dojo() View Helfer erkannt werden, wird der Dekorator eine Notiz auswerfen, aber dann eine eindeutige ID erstellen indem die Rückgabe von uniqid() an den Identifikator angehängt wird.

Die Standardverwendung besteht einfach darin diesen Dekorator als ersten in der Dekoratorkette assoziieren, und keine zusätzlichen Optionen zu setzen.

Example #2 Verwendung des DijitElement Dekorators

$element->setDecorators(array(
    'DijitElement',
    'Errors',
    'Label',
    'ContentPane',
));

DijitForm Dekorator

Der DijitForm Dekorator ist dem Form Dekorator sehr ähnlich; faktisch kann er mit diesem grundsätzlich getauscht werden, da er den selben View Helfernamen verwendet ('form').

Da dijit.form.Form keine dijit Parameter für die Konfiguration benötigt, besteht der grundsätzliche Unterschied darin das dem Dijit Fomular Viewhelfer eine DOM ID übergeben werden muß um sicherzustellen das die programtechnische Dijiterstellung funktionieren kann. Der Dekorator stellt das sicher indem der Formularname als Identifikator übergeben wird.

DijitContainer-basierende Dekoratore

Der DijitContainer Dekorator ist in Wirklichkeit eine abstrakte Klasse von der eine Anzahl an anderen Dekoratoren erbt. Er bietet die selbe Funktionalität wie DijitElement mit der zusätzlichen Unterstützung des Titels. Viele Layout Dijits benötigen den Titel oder können Ihn verwenden; DijitContainer verwendet die Legend Eigenschaft des Elements wenn Sie vorhanden ist, und kann auch die 'legend' oder die 'titel' Dekoratoroption verwenden, wenn diese übergeben werden. Der Titel wird übersetzt wenn ein Übersetzungsadapter mit einer entsprechenden Übersetzung vorhanden ist.

Nachfolgend ist eine Liste an Dekoratoren die von DijitContainer erben:

  • AccordionContainer

  • AccordionPane

  • BorderContainer

  • ContentPane

  • SplitContainer

  • StackContainer

  • TabContainer

Example #3 Verwendung des DijitContainer Dekorators

// Einen TabContainer im eigenen Formular verwenden:
$form->setDecorators(array(
    'FormElements',
    array('TabContainer', array(
        'id'          => 'tabContainer',
        'style'       => 'width: 600px; height: 500px;',
        'dijitParams' => array(
            'tabPosition' => 'top'
        ),
    )),
    'DijitForm',
));

// Ein ContentPane im eigenen Unterformular verwenden (welches mit allen ausser AccordionContainer
// verwendet werden kann):
$subForm->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'dl')),
    'ContentPane',
));

Dijit-Specifische Fomularelemente

Jedes Formular-Dijit für welches ein Viewhelfer vorhanden ist hat ein korrespondierendes Zend_Form Element. Alle von Ihnen bieten die folgenden Methoden für die Manipulation von Dijit Parametern an:

  • setDijitParam($key, $value): Setzt einen einzelnen Dijit Parameter. Wenn der Dijit Parmeter bereits existiert wird er überschrieben.

  • setDijitParams(array $params): Setzt mehrere Dijit Parameter auf einmal. Jeder übergebene Parameter der bereits existierenden entspricht wird überschrieben.

  • hasDijitParam($key): Wenn ein angegebener Dijit Parameter definiert und vorhanden ist, wird TRUE zurückgegeben, andernfalls FALSE.

  • getDijitParam($key): Gibt den angegebenen Dijit Parameter. Wenn er nicht vorhanden ist, wird ein null Wert zurückgegeben.

  • getDijitParams(): Gibt alle Dijit Parameter zurück.

  • removeDijitParam($key): Entfernt den angegebenen Dijit Parameter.

  • clearDijitParams(): Löscht alle aktuell definierten Dijit Parameter.

Dijit Parameter werden in der öffentlichen dijitParams Eigenschaft gespeichert. Deshalb kann ein existierendes Formularelement einfach dijit-aktiviert werden indem diese Eigenschaft auf dem Element gesetzt wird; man hat in diesem Fall nur nicht die Zugriffsmethoden um die Parameter zu manipulieren.

Zusätzlich implementieren Dijit-spezifische Element eine andere Liste von Dekoratoren, die dem folgenden entsprechen:

$element->addDecorator('DijitElement')
        ->addDecorator('Errors')
        ->addDecorator('HtmlTag', array('tag' => 'dd'))
        ->addDecorator('Label', array('tag' => 'dt'));

Effektiv wird der DijitElement Dekorator statt dem standardmäßigen ViewHelper Dekorator verwendet.

Letztendlich stellt das Basis-Dijitelement sicher das der Dojo Viewhelfer Pfad in der View gesetzt ist.

Eine Variante von DijitElement, DijitMulti, bietet die Funktionalität des abstrakten Multi Formularelements, das es Entwicklern erlaubt 'multiOptions' zu spezifizieren -- typischerweise Select-Optionen oder Radio-Optionen.

Die folgenden Dijitelemente werden in der standardmäßigen Zend Framework Distribution ausgeliefert.

Button

Wärend es nicht vom standardmäßigen Button Element abgeleitet ist, implementiert es die gleiche Funktionalität, und kann als Drop-In Ersatz hierfür verwendet werden. Die folgende Funktionalität wird zur Verfügung gestellt:

  • getLabel() verwendet den Elementnamen als Label für den Button wenn kein Name angegeben wurde. Zusätzlich übersetzt es den Namen wenn ein Übersetzungsadapter mit einer passenden übersetzten Meldung vorhanden ist.

  • isChecked() ermittelt ob der übermittelte Wert zum Label passt; wenn das der Fall ist wird true zurückgegeben. Das ist für die Erkennung, welcher Button verwendet wurde als das Formular übermittelt wurde, nützlich.

Zusätzlich werden nur die Dekoratore DijitElement und DtDdWrapper für Buttonelemente benutzt.

Example #4 Beispiel für die Verwendung des Button Dijit Elements

$form->addElement(
    'Button',
    'foo',
    array(
        'label' => 'Button Label',
    )
);

CheckBox

Wärend es nicht vom standardmäßigen Checkbox Element abgeleitet ist, implementiert es die gleiche Funktionalität. Das bedeutet das die folgenden Methoden zur Verfügung gestellt werden:

  • setCheckedValue($value): Setzt den Wert der verwendet werden soll wenn das Element angehakt ist.

  • getCheckedValue(): Gibt den Wert des Elements zurück der verwendet wird wenn das Element angehakt ist.

  • setUncheckedValue($value): Setzt den Wert des Elements der verwendet wird wenn das Element nicht angehakt ist.

  • getUncheckedValue(): Gibt den Wert des Elements zurück der verwendet wird wenn das Element nicht angehakt ist.

  • setChecked($flag): Markiert das Element als angehakt oder nicht angehakt.

  • isChecked(): Ermittelt ob das Element aktuell angehakt ist.

Example #5 Beispiel für die Verwendung des CheckBox Dijit Elements

$form->addElement(
    'CheckBox',
    'foo',
    array(
        'label'          => 'Eine Checkbox',
        'checkedValue'   => 'foo',
        'uncheckedValue' => 'bar',
        'checked'        => true,
    )
);

ComboBox und FilteringSelect

Wie in der ComboBox Dijit Viewhelfer Dokumentation beschrieben, sind Comboboxen ein Hybrid zwischen Select und Texteingaben, erlauben automatische Vervollständigung und die Fähigkeit eine Alternative zu den angebotenen Optionen zu spezifizieren. FilteringSelects sind genauso, nur erlauben Sie keine eigenen Eingaben.

Note: ComboBoxen geben die Labelwerte zurück

ComboBoxen geben die Labelwerte, und nicht die Werte der Option zurück, was zu einem Problem bei den Annahmen führen kann. Aus diesem Grund registieren Sie die InArray Prüfung nicht automatisch (obwohl FilteringSelects das macht).

Das ComboBox und FilteringSelect Formularelemente bietet Zugriffsmethoden und Mutatoren für das Ermitteln und Setzen von Selectoptionen sowie das Spezifizieren des dojo.data Datenspeichers (wenn er verwendet wird). Sie erweitern DijitMulti, welches es erlaubt Selectoptionen über die Methoden setMultiOptions() und setMultiOption() zu spezifizieren. Zusätzlich stehen die folgenden Methoden zur Verfügung:

  • getStoreInfo(): Gibt alle aktuell gesetzten Informationen des Datenspeichers zurück. Gibt ein leeres Array zurück wenn aktuell keine Daten gesetzt sind.

  • setStoreId($identifier): Setzt die Identifikatorvariable des Speichers (normalerweise wird darauf durch das Attribut 'jsId' in Dojo referiert). Das sollte ein gültiger Name für eine Javascriptvariable sein.

  • getStoreId(): Gibt den Namen der Identifikatorvariable des Speichers zurück.

  • setStoreType($dojoType): Setzt die Datenspeicherklasse die verwendet werden soll; z.B., "dojo.data.ItemFileReadStore".

  • getStoreType(): Gibt die Dojo Datenspeicherklasse zurück die verwendet werden soll.

  • setStoreParams(array $params): Setzt jeden verwendeten Parameter um das Datenspeicherobjekt zu konfigurieren. Als Beispiel würde der dojo.data.ItemFileReadStore Datenspeicher einen 'url' Parameter erwarten der auf einen Ort zeigt der das dojo.data Objekt zurückgibt.

  • getStoreParams(): Gibt alle aktuell gesetzten Datenspeicher Parameter zurück; wenn keiner gesetzt ist, wird ein leeres Array zurückgegeben.

  • setAutocomplete($flag): Zeigt ob das selektierte Element verwendet wird oder nicht wenn der Benutzer das Element verlässt.

  • getAutocomplete(): Gibt den Wert des autocomplete Flags zurück.

Standardmäßig, wenn kein dojo.data Speicher im Element registriert wurde, registriert dieses Element eine InArray Prüfung welche die Arrayschlüssel gegen registrierte Optionen prüft. Dieses Verhalten kann deaktiviert werden indem entweder setRegisterInArrayValidator(false) ausgerufen, oder ein false Wert an den Registrierungsschlüssel registerInArrayValidator übergeben wird.

Example #6 Das ComboBox Dijit Element als Select Eingabe verwenden

$form->addElement(
    'ComboBox',
    'foo',
    array(
        'label'        => 'ComboBox (select)',
        'value'        => 'blue',
        'autocomplete' => false,
        'multiOptions' => array(
            'red'    => 'Rouge',
            'blue'   => 'Bleu',
            'white'  => 'Blanc',
            'orange' => 'Orange',
            'black'  => 'Noir',
            'green'  => 'Vert',
        ),
    )
);

Example #7 Das ComboBox Dijit Element mit einem Datenspeicher verwenden

$form->addElement(
    'ComboBox',
    'foo',
    array(
        'label'       => 'ComboBox (datastore)',
        'storeId'     => 'stateStore',
        'storeType'   => 'dojo.data.ItemFileReadStore',
        'storeParams' => array(
            'url' => '/js/states.txt',
        ),
        'dijitParams' => array(
            'searchAttr' => 'name',
        ),
    )
);

Das obige Beispiel könnte auch FilteringSelect statt ComboBox verwenden.

CurrencyTextBox

Die CurrencyTextBox ist primär für die Unterstützung von Währungseingaben. Die Währung kann lokalisiert werden, und unterstützt sowohl Kommazahlen als auch ganze Zahlen.

Intern ist die CurrencyTextBox abgeleitet von NumberTextBox, ValidationTextBox, und TextBox; alle vorhandenen Methoden dieser Klassen sind vorhanden. Zusätzlich können die folgenden bedingten Methoden verwendet werden:

  • setCurrency($currency): Setzt den Typ der Währung die verwendet werden sol; sollte der » ISO-4217 Spezifikation folgen.

  • getCurrency(): Gibt den aktuellen Währungstyp zurück.

  • setSymbol($symbol): Setzt das 3-buchstabige » ISO-4217 Symbol der Währung das verwendet werden soll.

  • getSymbol(): Gibt das aktuelle Währungssymbol zurück.

  • setFractional($flag): Setzt ob für die Währung Kommazahlen oder ganze Zahlen verwendet werden dürfen.

  • getFractional(): Gibt den Status des Kommazahlen Flags zurück.

Example #8 Beispiel für die Verwendung des CurrencyTextBox Dijit Elements

$form->addElement(
    'CurrencyTextBox',
    'foo',
    array(
        'label'          => 'Währung:',
        'required'       => true,
        'currency'       => 'USD',
        'invalidMessage' => 'Ungültiger Wert. Es müssen das Dollarzeichen, ' .
                            'ein Komma und Cents enthalten sein.',
        'fractional'     => false,
    )
);

DateTextBox

DateTextBox bietet einen Kalender Drop-Down für die Auswahl eines Datums, sowie einer Clientseitigen Überprüfung und Formatierung.

Intern ist DateTextBox abgeleitet von ValidationTextBox und TextBox; alle vorhandenen Methoden dieser Klassen sind vorhanden. Zusätzlich können die folgenden Methoden verwendet werden um individuelle Abhängigkeiten zu setzen:

  • setAmPm($flag) and getAmPm(): Ob in der Zeit AM/PM Strings verwendet werden sollen oder nicht.

  • setStrict($flag) und getStrict(): Ob Reguläre Ausdrücke strikt passen müssen oder nicht. Wenn es false ist, was der Standardwert ist, wird es nicht über Leerzeichen und einige Abkürzungen lamentieren.

  • setLocale($locale) und getLocale(): Setzt und gibt die Locale zurück die mit diesem speziellen Element verwendet werden soll.

  • setDatePattern($pattern) und getDatePattern(): Bietet und gibt den » Unicode Pattern des Datumsformats für die Formatierung des Datums zurück.

  • setFormatLength($formatLength) und getFormatLength(): Bietet und gibt den Formatlänge Typ der verwendet werden soll zurück; sollte "long", "short", "medium" oder "full" sein.

  • setSelector($selector) und getSelector(): Bietet und gibt den Stil des Selektors zurück; sollte entweder "date" oder "time" sein.

Example #9 Beispiel der Verwendung des DateTextBox Dijit Elements

$form->addElement(
    'DateTextBox',
    'foo',
    array(
        'label'          => 'Datum:',
        'required'       => true,
        'invalidMessage' => 'Ungültiges Datum spezifiziert.',
        'formatLength'   => 'long',
    )
);

Editor

Editor bietet einen WYSIWYG Editor der verwendet werden kann um Rich HTML Inhalte sowohl zu erstellen als auch zu bearbeiten. dijit.Editor ist pluggable und kann mit eigenen Plugins erweitert werden wenn das gewünscht ist; siehe »  die dijit.Editor Dokumentation für weitere Details.

Das Editor Form Element bietet eine Anzahl an Zugriffsmethoden und Mutatoren für die Manipulation der verschiedenen dijit Paramter, wie folgt:

  • captureEvents sind Events die auf die Bearbeitungsfläche selbst verbinden. Die folgenden Zugriffsmethoden und Mutatoren sind für die Manipulation von Capture Events vorhanden:

    • addCaptureEvent($event)

    • addCaptureEvents(array $events)

    • setCaptureEvents(array $events)

    • getCaptureEvents()

    • hasCaptureEvent($event)

    • removeCaptureEvent($event)

    • clearCaptureEvents()

  • events sind Standard DOM Events, wie onClick, onKeyUp, usw. Die folgenden Zugriffsmethoden und Mutatoren sind für die Manipulation von Events vorhanden:

    • addEvent($event)

    • addEvents(array $events)

    • setEvents(array $events)

    • getEvents()

    • hasEvent($event)

    • removeEvent($event)

    • clearEvents()

  • plugins fügen dem Editor Funktionalitäten hinzu -- zusätzliche Tools für die Toolbar, zusätzliche erlaubte Stile, usw. Die folgenden Zugriffsmethoden und Mutatoren sind für die Manipulation von Plugins vorhanden:

    • addPlugin($plugin)

    • addPlugins(array $plugins)

    • setPlugins(array $plugins)

    • getPlugins()

    • hasPlugin($plugin)

    • removePlugin($plugin)

    • clearPlugins()

  • editActionInterval wird verwendet um Events für die Undo Operationen zu gruppieren. Standardmäßig ist dieser Wert 3 Sekunden. Die Methode setEditActionInterval($interval) kann verwendet werden um den Wert zu setzen, wärend getEditActionInterval() ihn zurückgibt.

  • focusOnLoad wird verwendet um zu erkennen ob dieser spezielle Editor den Fokus erhält wenn die Seite geladen wurde. Standardmäßig ist er false. Die Methode setFocusOnLoad($flag) kann verwendet werden um den Wert zu setzen, wärend getFocusOnLoad() ihn empfängt.

  • height spezifiziert die Höhe des Editors; standardmäßig ist sie 300px. Die Methode setHeight($height) kann verwendet werden um den Wert zu setzen, wärend getHeight() ihn zurückgibt.

  • inheritWidth wird verwendet um zu erkennen ob der Editor die Breite des Parent Containers verwendet, oder einfach auf 100% Höhe. Standardmäßig ist er false (im Normalfall wird der die Breite des Fensters ausfüllen). Die Methode setInheritWidth($flag) kann verwendet werden um den Wert zu setzen, wärend getInheritWidth() ihn zurückgibt.

  • minHeight zeigt die Mindesthöhe des Editors an; standardmäßig ist sie 1em. Die Methode setMinHeight($height) kann verwendet werden um den Wert zu setzen, wärend getMinHeight() ihn empfängt.

  • styleSheets zeigt an welche zusätzlichen CSS Stylesheets verwendet werden sollen um die Anzeige des Editors zu beeinflussen. Standardmäßig sind keine registriert, und es verwendet die Seitenstile. Die folgenden Zugriffsmethoden und Mutatoren sind für die Manipulation von Editor Stylesheets vorhanden:

    • addStyleSheet($styleSheet)

    • addStyleSheets(array $styleSheets)

    • setStyleSheets(array $styleSheets)

    • getStyleSheets()

    • hasStyleSheet($styleSheet)

    • removeStyleSheet($styleSheet)

    • clearStyleSheets()

Example #10 Beispiel der Verwendung des Editor dijit Elements

$form->addElement('editor', 'content', array(
    'plugins'            => array('undo', '|', 'bold', 'italic'),
    'editActionInterval' => 2,
    'focusOnLoad'        => true,
    'height'             => '250px',
    'inheritWidth'       => true,
    'styleSheets'        => array('/js/custom/editor.css'),
));

HorizontalSlider

HorizontalSlider bietet ein Schieber UI Widget für die Auswahl eines nummerischen Wertes in einem Bereich. Intern, setzt es den Wert eines versteckten Elements welches vom Formular übermittelt wird.

HorizontalSlider ist vom abstrakten Slider Dijit Element abgeleitet. Zusätzlich hat es eine Vielzahl von Methoden für das Setzen und Konfigurieren der Schieberregeln und Regel Labels.

  • setTopDecorationDijit($dijit) und setBottomDecorationDijit($dijit): Setzt den Namen des Dijits das entweder oberhalb oder unterhalb des Schiebers verwendet werden soll. Es darf nicht den "dijit.form." Präfix enthalten, sondern nur den endgültigen Namen -- entweder "HorizontalRule" oder "HorizontalRuleLabels".

  • setTopDecorationContainer($container) und setBottomDecorationContainer($container): Spezifiziert den Namen der für das Containerelement der Regeln verwendet werden soll; z.B. 'topRule', 'topContainer', usw.

  • setTopDecorationLabels(array $labels) und setBottomDecorationLabels(array $labels): Setzt die Labels die für eine der RuleLabel Dijit Typen verwendet werden sollen. Diese sollten ein indiziertes Array sein; spezifiziere eine einzelnes Leerzeichen um eine gegebene Labelposition zu überspringen (wie beim Beginn oder dem Ende).

  • setTopDecorationParams(array $params) und setBottomDecorationParams(array $params): Dijit Parameter die verwendet werden sollen wenn die gegebene Rule oder RuleLabels Dijits konfiguriert werden

  • setTopDecorationAttribs(array $attribs) und setBottomDecorationAttribs(array $attribs): HTML Attribute die für die gegebene Rule oder RuleLabels HTML Elementcontainer spezifiziert werden.

  • getTopDecoration() und getBottomDecoration(): Geben alle Metadaten für eine gegebene Rule oder RuleLabels Definition zurück, wie von den obigen Mutatoren geliefert.

Example #11 Beispiel der Verwendung des HorizontalSlider Dijit Elements

Das folgende erzeugt eine horizontale Schieberauswahl mit Integerwerten die von -10 bis 10 reichen. Oben sind Labels bei den 20%, 40%, 60% und 80% Marken. Unten sind Regeln bei 0, 50% und 100%. Jedesmal wenn der Wert geändert wird, wird das versteckte Element das den Wert speichert aktualisiert.

$form->addElement(
    'HorizontalSlider',
    'horizontal',
    array(
        'label'                     => 'HorizontalSlider',
        'value'                     => 5,
        'minimum'                   => -10,
        'maximum'                   => 10,
        'discreteValues'            => 11,
        'intermediateChanges'       => true,
        'showButtons'               => true,
        'topDecorationDijit'        => 'HorizontalRuleLabels',
        'topDecorationContainer'    => 'topContainer',
        'topDecorationLabels'       => array(
                ' ',
                '20%',
                '40%',
                '60%',
                '80%',
                ' ',
        ),
        'topDecorationParams'      => array(
            'container' => array(
                'style' => 'height:1.2em; font-size=75%;color:gray;',
            ),
            'list' => array(
                'style' => 'height:1em; font-size=75%;color:gray;',
            ),
        ),
        'bottomDecorationDijit'     => 'HorizontalRule',
        'bottomDecorationContainer' => 'bottomContainer',
        'bottomDecorationLabels'    => array(
                '0%',
                '50%',
                '100%',
        ),
        'bottomDecorationParams'   => array(
            'list' => array(
                'style' => 'height:1em; font-size=75%;color:gray;',
            ),
        ),
    )
);

NumberSpinner

Ein Nummernkreisel (Number Spinner) ist ein Textelement für die Eingabe von nummerischen Werten; es enthält auch Elemente für das inkrementieren und dekrementieren des Wertes mit einer gesetzten Anzahl.

Die folgenden Methoden sind vorhanden:

  • setDefaultTimeout($timeout) und getDefaultTimeout(): Setzt und gibt den Standardtimeout, in Millisekunden, zurück der zwischen dem gedrückt halten des Buttons und der Änderung des Wertes ist.

  • setTimeoutChangeRate($rate) und getTimeoutChangeRate(): Setzt und gibe die Rate, in Millisekunden, zurück mit der Änderungen durchgeführt werden wenn ein Button gedrückt gehalten wird.

  • setLargeDelta($delta) und getLargeDelta(): Setzt und gibt die Menge zurück mit welcher der nummerische Wert geändert werden soll wenn ein Button gedrückt gehalten wird.

  • setSmallDelta($delta) und getSmallDelta(): Setzt und gibt das Delta zurück mit dem die Nummer geändert werden soll wenn ein Button einmal gedrückt wird.

  • setIntermediateChanges($flag) und getIntermediateChanges(): Setzt un gibt das Flag zurück das anzeigt ob jede Änderung des Werte angezeigt werden soll wenn der Button gedrückt gehalten wird, oder nicht.

  • setRangeMessage($message) und getRangeMessage(): Setzt und gibt die Nachricht zurück die den Bereich der möglichen Werte anzeigt.

  • setMin($value) und getMin(): Setzt und gibt den mindesten möglichen Wert zurück.

  • setMax($value) und getMax(): Setzt und gibt den maximalen möglichen Wert zurück.

Example #12 Beispiel der Verwendung des NumberSpinner Dijit Elements

$form->addElement(
    'NumberSpinner',
    'foo',
    array(
        'value'             => '7',
        'label'             => 'NumberSpinner',
        'smallDelta'        => 5,
        'largeDelta'        => 25,
        'defaultTimeout'    => 500,
        'timeoutChangeRate' => 100,
        'min'               => 9,
        'max'               => 1550,
        'places'            => 0,
        'maxlength'         => 20,
    )
);

NumberTextBox

Eine NumberTextBox ist ein Textelement für die Eingabe von nummerischen Werten; anders als beim NummerSpinner, werden Nummern manuell eingegeben. Prüfungen und Abhängigkeiten können angegeben werden um sicherzustellen das die Nummer immer in einem bestimmten Bereich oder Format ist.

Intern wird NumberTextBox abgeleitet von ValidationTextBox und TextBox; alle in diesen Klassen vorhandenen Methoden sind vorhanden. Zusätzlich können die folgenden Methoden verwendet werden um individuelle Abhängigkeiten zu setzen:

  • setLocale($locale) und getLocale(): Spezifiziert und gibt ein spezifisches oder alternatives Gebietsschema zurück das mit diesem Dijit verwendet werden soll.

  • setPattern($pattern) und getPattern(): Setzt und gibt ein » Nummern Patternformat zurück das verwendet wird um eine Nummer zu formatieren.

  • setType($type) und getType(): Setzt und gibt eine nummerischen Formattyp zurück der verwendet wird (sollte 'decimal', 'percent' oder 'currency' sein).

  • setPlaces($places) und getPlaces(): Setzt und gibt die Anzahl der Dezimalstellen die unterstützt werden sollen zurück.

  • setStrict($flag) und getStrict(): Setzt und gibt den Wert des Strictflags zurück, welches anzeigt wieviel Ungenauigkeit in Bezug auf Leerzeichen und nicht-nummerische Zeichen erlaubt ist.

Example #13 Beispiel der Verwendung des NumberTextBox Dijit Elements

$form->addElement(
    'NumberTextBox',
    'elevation',
    array(
        'label'          => 'NumberTextBox',
        'required'       => true,
        'invalidMessage' => 'Ungültige Eingabe.',
        'places'         => 0,
        'constraints'    => array(
            'min'    => -20000,
            'max'    => 20000,
        ),
    )
);

PasswordTextBox

PasswordTextBox ist einfach eine ValidationTextBox die an eine Passworteingabe gebunden ist; Ihre primäre Aufgabe ist es eine Dijit-bezogene Texteingabe für Passwörter zu erlauben die Client-seitige Prüfungen erlaubt.

Intern wird NumberTextBox abgeleitet von ValidationTextBox und TextBox; alle in diesen Klassen vorhandenen Methoden sind vorhanden.

Example #14 Beispiel für die Verwendung des PasswordTextBox Dijit Elements

$form->addElement(
    'PasswordTextBox',
    'password',
    array(
        'label'          => 'Passwort',
        'required'       => true,
        'trim'           => true,
        'lowercase'      => true,
        'regExp'         => '^[a-z0-9]{6,}$',
        'invalidMessage' => 'Ungültiges Passwort; muß mindestens 6 alphanummerische Zeichen sein',
    )
);

RadioButton

RadioButton umschließt ein standard Radio-Input Element um ein konsistentes Look and Feel mit den anderen Dojo Dijits zu bieten.

RadioButton erweitert DijitMulti, welches es erlaubt Selectoptionen über die setMultiOptions() und setMultiOption() Methoden zu spezifizieren.

Standardmäßig registriert dieses Element eine InArray Prüfung welche die Arrayschlüssel gegen registrierte Optionen prüft. Dieses Verhalten kann deaktiviert werden indem entweder setRegisterInArrayValidator(false) ausgerufen, oder ein false Wert an den Registrierungsschlüssel registerInArrayValidator übergeben wird.

Example #15 Beispiel der Verwendung des RadioButton Dijit Elements

$form->addElement(
    'RadioButton',
    'foo',
    array(
        'label' => 'RadioButton',
        'multiOptions'  => array(
            'foo' => 'Foo',
            'bar' => 'Bar',
            'baz' => 'Baz',
        ),
        'value' => 'bar',
    )
);

SimpleTextarea

SimpleTextarea arbeitet primär wie ein Standard HTML Textarea. Trotzdem unterstützt es weder die rows noch die cols Einstellung. Stattdessen, sollte die Breite von Textarea durch die Verwendung von standard CSS Maßeinheiten definiert werden. Anders als Textarea wird er nicht automatisch wachsen

Example #16 Beispiel der Verwendung des SimpleTextarea Dijit Elements

$form->addElement(
    'SimpleTextarea',
    'simpletextarea',
    array(
        'label'    => 'SimpleTextarea',
        'required' => true,
        'style'    => 'width: 80em; height: 25em;',
    )
);

Abstraktes Slider Element

Slider ist ein abstraktes Element welches abgeleitet ist von HorizontalSlider und VerticalSlider. Es bietet eine Anzahl von üblichen Methoden für die Konfiguration von Slidern an, inklusive:

  • setClickSelect($flag) und getClickSelect(): Setzt und gibt das Flag zurück das anzeigt ob das Klicken auf den Slider den Wert ändert oder nicht.

  • setIntermediateChanges($flag) und getIntermediateChanges(): Setzt und gibt das Flag zurück das anzeigt ob das Dijit eine Benachrichtigung bei jedem Slider-Event schickt oder nicht.

  • setShowButtons($flag) und getShowButtons(): Setzt und gibt das Flag zurück das anzeigt ob Buttons an den Enden angezeigt werden oder nicht; wenn ja, dann kann der Benutzer diese anklicken und damit den Wert des Sliders ändern.

  • setDiscreteValues($value) und getDiscreteValues(): Setzt und gibt die Anzahl an diskreten Werte zurück die vom Slider repräsentiert werden.

  • setMaximum($value) und getMaximum(): Setzt den maximalen Wert des Sliders.

  • setMinimum($value) und getMinimum(): Setzt den minimalen Wert des Sliders.

  • setPageIncrement($value) und getPageIncrement(): Setzt den Wert um den sich der Slider auf Tastaturereignisse ändert.

Ein Beispiel der Verwendung wird mit jeder konkreten Klasse angegeben die diese Klasse erweitert.

SubmitButton

Wärend es kein Dijit gibt das SubmitButton heißt, wurde dieses inkludiert um ein Button Dijit anzubieten das fähig ist ein Formular zu übertragen ohne das irgendeine zusätzliche Javascript Verknüpfung benötigt wird. Es funktioniert exakt wie das Button Dijit.

Example #17 Beispiel der Verwendung des SubmitButton Dijit Elements

$form->addElement(
    'SubmitButton',
    'foo',
    array(
        'required'   => false,
        'ignore'     => true,
        'label'      => 'Submit Button!',
    )
);

TextBox

TextBox wurde primär inkludiert um eine Text Eingabe anzubieten die das gleiche Look-and-Feel wie die anderen Dijits hat. Trotzdem enthält es einige Filter- und Prüfmöglichkeiten, die in den folgenden Methoden repräsentiert sind:

  • setLowercase($flag) und getLowercase(): Setzt und gibt das Tag zurück das anzeigt ob die Eingabe auf Kleinschreibung (lowercase) geändert wird oder nicht.

  • setPropercase($flag) und getPropercase(): Setzt und gibt das Tag zurück das anzeigt ob die Eingabe auf Proper Case geändert wird oder nicht.

  • setUppercase($flag) und getUppercase(): Setzt und retourniert das Flag das anzeigt ob die Eingabe auf Großschreibung (UPPERCASE) geändert wird oder nicht.

  • setTrim($flag) und getTrim(): Setzt und retourniert das Flag das anzeigt ob führende Leerzeichen entfernt werden oder nicht.

  • setMaxLength($length) und getMaxLength(): Setzt und retourniert die maximale Länge der Eingabe.

Example #18 Beispiel der Verwendung des TextBox Dijit Elements

$form->addElement(
    'TextBox',
    'foo',
    array(
        'value'      => 'irgendein Text',
        'label'      => 'TextBox',
        'trim'       => true,
        'propercase' => true,
    )
);

Textarea

Textarea funktioniert primär wie eine standard HTML Textarea. Trotzdem unterstützt es weder die Zeilen- noch die Spalteneinstellungen. Stattdessen sollte die Breite von Textarea durch Verwendung von CSS Maßeinheiten spezifiziert werden; Zeilen sollten komplett vermieden werden. Die Textarea wird dann vertikal wachsen wenn Text hinzugefügt wird.

Example #19 Beispiel der Verwendung des Textarea Dijit Elements

$form->addElement(
    'Textarea',
    'textarea',
    array(
        'label'    => 'Textarea',
        'required' => true,
        'style'    => 'width: 200px;',
    )
);

TimeTextBox

TimeTextBox ist eine Texteingabe die einen Drop-Down für die Auswahl einer Zeit bietet. Der Drop-Down kann so konfiguriert werden das ein bestimmtes Zeitfenster, mit speziellen Inkrementierungen, angezeigt wird.

Intern wird die TimeTextBox von DateTextBox, ValidationTextBox und TextBox abgeleitet; alle vorhandenen Methoden dieser Klassen sind vorhanden. Zusätzlich können die folgenden Methoden verwendet werden um individuelle Abhängigkeiten einzustellen:

  • setTimePattern($pattern) und getTimePattern(): Setzt und retourniert den » Unicode Zeitformat Pattern für die Formatierung der Zeit.

  • setClickableIncrement($format) und getClickableIncrement(): Setzt den » ISO-8601 String der die Anzahl repräsentiert mit dem jedes anklickbare Element der Zeitauswahl inkrementiert wird.

  • setVisibleIncrement($format) und getVisibleIncrement(): Definiert das der Inkrement in der Zeitauswahl sichtbar ist; muß dem ISO-8601 Format entsprechen.

  • setVisibleRange($format) und getVisibleRange(): Setzt und retorniert den Zeitbereich der in der Zeitauswahl zu jedem Zeitpunkt sichtbar ist; muß dem ISO-8601 Format entsprechen.

Example #20 Beispiel der Verwendung des TimeTextBox Dijit Elements

Das folgende erstellt eine TimeTextBox die 2 Stunden zugleich anzeigt und um 10 Minuten inkrementiert.

$form->addElement(
    'TimeTextBox',
    'foo',
    array(
        'label'              => 'TimeTextBox',
        'required'           => true,
        'visibleRange'       => 'T04:00:00',
        'visibleIncrement'   => 'T00:10:00',
        'clickableIncrement' => 'T00:10:00',
    )
);

ValidationTextBox

ValidationTextBox bietet die Möglichkeit Prüfungen und Abhängigkeiten zu einer Texteingabe hinzuzufügen. Intern ist Sie von TextBox abgeleitet, und fügt die folgenden Zugriffsmethoden und Mutatoren für die Manipulation der Dijit Parameter hinzu:

  • setInvalidMessage($message) und getInvalidMessage(): Setzt und retourniert die Tooltipnachricht die angezeigt werden soll wenn der Wert nicht gültig ist.

  • setPromptMessage($message) und getPromptMessage(): Setzt und retourniert die Tooltipnachricht die angezeigt werden soll wenn das Element verwendet wird.

  • setRegExp($regexp) und getRegExp(): Setzt und retourniert den regulären Ausdruck der für die Prüfung des Elements verwendet wird. Der reguläre Ausdruck benötigt keine Begrenzungen (anders als PHP's Funktionsfamilie preg*).

  • setConstraint($key, $value) und getConstraint($key): Setzt und retourniert zusätzliche Abhängigkeiten die für die Prüfung des Elements verwendet werden; wird primär mit Unterklassen verwendet. Abhängigkeiten werden im 'constraints' Schlüssel der Dijit Parameter abgespeichert.

  • setConstraints(array $constraints) und getConstraints(): Setzt und retourniert individuelle Abhängigkeiten die bei der Prüfung eines Elements verwendet werden; wird primär mit Unterklassen verwendet.

  • hasConstraint($key): Testet ob eine angegebene Abhängigkeit existiert.

  • removeConstraint($key) und clearConstraints(): Entfernt eine einzelne oder alle Abhängigkeiten des Elements.

Example #21 Beispiel für die Verwendung des ValidationTextBox Dijit Elements

Das folgende erstellt eine ValidationTextBox die einen einzelnen String benötigt der nur aus Buchstaben besteht (z.B, keine Leerzeichen, die meisten Trennungen sind ungültig).

$form->addElement(
    'ValidationTextBox',
    'foo',
    array(
        'label'          => 'ValidationTextBox',
        'required'       => true,
        'regExp'         => '[\w]+',
        'invalidMessage' => 'Ungültige Buchstaben.',
    )
);

VerticalSlider

VerticalSlider ist der Schwager von HorizontalSlider, und funktioniert auf dem gleichen Weg wie dieses Element. Der einzige wirkliche Unterschied besteht darin, das die 'top*' und 'bottom*' Methoden mit 'left*' und 'right*' ersetzt wurden, und statt HorizontalRule und HorizontalRuleLabels jetzt VerticalRule und VerticalRuleLabels verwendet werden sollten.

Example #22 Beispiel der Verwendung des VerticalSlider Dijit Elements

Das folgende erstellt eine Vertikale Schieberauswahl mit Ganzzahlen die von -10 bis 10 reichen. Die linke Seite hat Label bei den 20%, 40%, 60% und 80% Marken. Die rechte Seite hat Regeln bei 0, 50% und 100%. Jedesmal wenn der Wert verändert wird, wird auch das versteckte Element, das den Wert speichert, aktualisiert.

$form->addElement(
    'VerticalSlider',
    'foo',
    array(
        'label'                    => 'VerticalSlider',
        'value'                    => 5,
        'style'                    => 'height: 200px; width: 3em;',
        'minimum'                  => -10,
        'maximum'                  => 10,
        'discreteValues'           => 11,
        'intermediateChanges'      => true,
        'showButtons'              => true,
        'leftDecorationDijit'      => 'VerticalRuleLabels',
        'leftDecorationContainer'  => 'leftContainer',
        'leftDecorationLabels'     => array(
                ' ',
                '20%',
                '40%',
                '60%',
                '80%',
                ' ',
        ),
        'rightDecorationDijit' => 'VerticalRule',
        'rightDecorationContainer' => 'rightContainer',
        'rightDecorationLabels' => array(
                '0%',
                '50%',
                '100%',
        ),
    )
);

Dojo Formular Beispiele

Example #23 Zend_Dojo_Form verwenden

Der einfachste Weg um Dojo mit Zend_Form zu verwenden besteht darin Zend_Dojo_Form zu verwenden, entweder durch direkte Verwendung oder indem Sie erweitert wird. Dieses Beispiel zeigt die Erweiterung von Zend_Dojo_Form und die Verwendung aller Dijit Elemente. Es erstellt vier Unterformulare, und dekoriert das Formular damit ein TabContainer verwendet wird, welcher jedes Unterformular in seinem eigenen Tab zeigt.

class My_Form_Test extends Zend_Dojo_Form
{
    /**
     * Optionen die mit Select Elementen verwendet werden
     */
    protected $_selectOptions = array(
        'red'    => 'Rouge',
        'blue'   => 'Bleu',
        'white'  => 'Blanc',
        'orange' => 'Orange',
        'black'  => 'Noir',
        'green'  => 'Vert',
    );

    /**
     * Form Initialisierung
     *
     * @return void
     */
    public function init()
    {
        $this->setMethod('post');
        $this->setAttribs(array(
            'name'  => 'masterForm',
        ));
        $this->setDecorators(array(
            'FormElements',
            array('TabContainer', array(
                'id' => 'tabContainer',
                'style' => 'width: 600px; height: 500px;',
                'dijitParams' => array(
                    'tabPosition' => 'top'
                ),
            )),
            'DijitForm',
        ));
        $textForm = new Zend_Dojo_Form_SubForm();
        $textForm->setAttribs(array(
            'name'   => 'textboxtab',
            'legend' => 'Text Elements',
            'dijitParams' => array(
                'title' => 'Text Elements',
            ),
        ));
        $textForm->addElement(
                'TextBox',
                'textbox',
                array(
                    'value'      => 'some text',
                    'label'      => 'TextBox',
                    'trim'       => true,
                    'propercase' => true,
                )
            )
            ->addElement(
                'DateTextBox',
                'datebox',
                array(
                    'value' => '2008-07-05',
                    'label' => 'DateTextBox',
                    'required'  => true,
                )
            )
            ->addElement(
                'TimeTextBox',
                'timebox',
                array(
                    'label' => 'TimeTextBox',
                    'required'  => true,
                )
            )
            ->addElement(
                'CurrencyTextBox',
                'currencybox',
                array(
                    'label' => 'CurrencyTextBox',
                    'required'  => true,
                    // 'currency' => 'USD',
                    'invalidMessage' => 'Ungültiger Wert. ' .
                                        'Dollarzeichen, Komma und Cents ' .
                                        'müssen vorhanden sein..',
                    // 'fractional' => true,
                    // 'symbol' => 'USD',
                    // 'type' => 'currency',
                )
            )
            ->addElement(
                'NumberTextBox',
                'numberbox',
                array(
                    'label' => 'NumberTextBox',
                    'required'  => true,
                    'invalidMessage' => 'Ungültiger Wert.',
                    'constraints' => array(
                        'min' => -20000,
                        'max' => 20000,
                        'places' => 0,
                    )
                )
            )
            ->addElement(
                'ValidationTextBox',
                'validationbox',
                array(
                    'label' => 'ValidationTextBox',
                    'required'  => true,
                    'regExp' => '[\w]+',
                    'invalidMessage' => 'Ungültiger nicht-leerzeichen Text.',
                )
            )
            ->addElement(
                'Textarea',
                'textarea',
                array(
                    'label'    => 'Textarea',
                    'required' => true,
                    'style'    => 'width: 200px;',
                )
            );
        $editorForm = new Zend_Dojo_Form_SubForm();
        $editorForm->setAttribs(array(
            'name'   => 'editortab',
            'legend' => 'Editor',
            'dijitParams' => array(
                'title' => 'Editor'
            ),
        ))
        $editorForm->addElement(
            'Editor',
            'wysiwyg',
            array(
                'label'        => 'Editor',
                'inheritWidth' => 'true',
            )
        );

        $toggleForm = new Zend_Dojo_Form_SubForm();
        $toggleForm->setAttribs(array(
            'name'   => 'toggletab',
            'legend' => 'Toggle Elements',
        ));
        $toggleForm->addElement(
                'NumberSpinner',
                'ns',
                array(
                    'value'             => '7',
                    'label'             => 'NumberSpinner',
                    'smallDelta'        => 5,
                    'largeDelta'        => 25,
                    'defaultTimeout'    => 1000,
                    'timeoutChangeRate' => 100,
                    'min'               => 9,
                    'max'               => 1550,
                    'places'            => 0,
                    'maxlength'         => 20,
                )
            )
            ->addElement(
                'Button',
                'dijitButton',
                array(
                    'label' => 'Button',
                )
            )
            ->addElement(
                'CheckBox',
                'checkbox',
                array(
                    'label' => 'CheckBox',
                    'checkedValue'  => 'foo',
                    'uncheckedValue'  => 'bar',
                    'checked' => true,
                )
            )
            ->addElement(
                'RadioButton',
                'radiobutton',
                array(
                    'label' => 'RadioButton',
                    'multiOptions'  => array(
                        'foo' => 'Foo',
                        'bar' => 'Bar',
                        'baz' => 'Baz',
                    ),
                    'value' => 'bar',
                )
            );
        $selectForm = new Zend_Dojo_Form_SubForm();
        $selectForm->setAttribs(array(
            'name'   => 'selecttab',
            'legend' => 'Select Elements',
        ));
        $selectForm->addElement(
                'ComboBox',
                'comboboxselect',
                array(
                    'label' => 'ComboBox (select)',
                    'value' => 'blue',
                    'autocomplete' => false,
                    'multiOptions' => $this->_selectOptions,
                )
            )
            ->addElement(
                'ComboBox',
                'comboboxremote',
                array(
                    'label' => 'ComboBox (remoter)',
                    'storeId' => 'stateStore',
                    'storeType' => 'dojo.data.ItemFileReadStore',
                    'storeParams' => array(
                        'url' => '/js/states.txt',
                    ),
                    'dijitParams' => array(
                        'searchAttr' => 'name',
                    ),
                )
            )
            ->addElement(
                'FilteringSelect',
                'filterselect',
                array(
                    'label' => 'FilteringSelect (select)',
                    'value' => 'blue',
                    'autocomplete' => false,
                    'multiOptions' => $this->_selectOptions,
                )
            )
            ->addElement(
                'FilteringSelect',
                'filterselectremote',
                array(
                    'label' => 'FilteringSelect (remoter)',
                    'storeId' => 'stateStore',
                    'storeType' => 'dojo.data.ItemFileReadStore',
                    'storeParams' => array(
                        'url' => '/js/states.txt',
                    ),
                    'dijitParams' => array(
                        'searchAttr' => 'name',
                    ),
                )
            );
        $sliderForm = new Zend_Dojo_Form_SubForm();
        $sliderForm->setAttribs(array(
            'name'   => 'slidertab',
            'legend' => 'Slider Elements',
        ));
        $sliderForm->addElement(
                'HorizontalSlider',
                'horizontal',
                array(
                    'label' => 'HorizontalSlider',
                    'value' => 5,
                    'minimum' => -10,
                    'maximum' => 10,
                    'discreteValues' => 11,
                    'intermediateChanges' => true,
                    'showButtons' => true,
                    'topDecorationDijit' => 'HorizontalRuleLabels',
                    'topDecorationContainer' => 'topContainer',
                    'topDecorationLabels' => array(
                            ' ',
                            '20%',
                            '40%',
                            '60%',
                            '80%',
                            ' ',
                    ),
                    'topDecorationParams' => array(
                        'container' => array(
                            'style' => 'height:1.2em; ' .
                                       'font-size=75%;color:gray;',
                        ),
                        'list' => array(
                            'style' => 'height:1em; ' .
                                       'font-size=75%;color:gray;',
                        ),
                    ),
                    'bottomDecorationDijit' => 'HorizontalRule',
                    'bottomDecorationContainer' => 'bottomContainer',
                    'bottomDecorationLabels' => array(
                            '0%',
                            '50%',
                            '100%',
                    ),
                    'bottomDecorationParams' => array(
                        'list' => array(
                            'style' => 'height:1em; ' .
                                       'font-size=75%;color:gray;',
                        ),
                    ),
                )
            )
            ->addElement(
                'VerticalSlider',
                'vertical',
                array(
                    'label' => 'VerticalSlider',
                    'value' => 5,
                    'style' => 'height: 200px; width: 3em;',
                    'minimum' => -10,
                    'maximum' => 10,
                    'discreteValues' => 11,
                    'intermediateChanges' => true,
                    'showButtons' => true,
                    'leftDecorationDijit' => 'VerticalRuleLabels',
                    'leftDecorationContainer' => 'leftContainer',
                    'leftDecorationLabels' => array(
                            ' ',
                            '20%',
                            '40%',
                            '60%',
                            '80%',
                            ' ',
                    ),
                    'rightDecorationDijit' => 'VerticalRule',
                    'rightDecorationContainer' => 'rightContainer',
                    'rightDecorationLabels' => array(
                            '0%',
                            '50%',
                            '100%',
                    ),
                )
            );

        $this->addSubForm($textForm, 'textboxtab')
             ->addSubForm($editorForm, 'editortab')
             ->addSubForm($toggleForm, 'toggletab')
             ->addSubForm($selectForm, 'selecttab')
             ->addSubForm($sliderForm, 'slidertab');
    }
}

Example #24 Ein existierendes Formular verändern um Dojo zu verwenden

Ein bestehendes Formular kann verändert werden damit es auch Dojo verwendet, indem die statische Methode Zend_Dojo::enableForm() verwendet wird.

Dieses erste Beispiel zeigt die eine bestehende Instanz eines Formulars dekoriert werden kann:

$form = new My_Custom_Form();
Zend_Dojo::enableForm($form);
$form->addElement(
'ComboBox',
'query',
array(
    'label'        => 'Color:',
    'value'        => 'blue',
    'autocomplete' => false,
    'multiOptions' => array(
        'red'    => 'Rouge',
        'blue'   => 'Bleu',
        'white'  => 'Blanc',
        'orange' => 'Orange',
        'black'  => 'Noir',
        'green'  => 'Vert',
    ),
)
);

Alternativ kann die Formular Initialisierung auch leicht verschnellert werden:

class My_Custom_Form extends Zend_Form
{
    public function init()
    {
        Zend_Dojo::enableForm($this);

        // ...
    }
}

Natürlich kann auch das getan werden... man könnte und sollte einfach die Klasse so verändern das Sie Zend_Dojo_Form ableitet, was eine eins-zu-eins Ersetzung von Zend_Form ist, die bereits Dojo versteht...

Previous Next
Introduction to Zend Framework
Übersicht
Installation
Zend_Acl
Einführung
Verfeinern der Zugriffskontrolle
Fortgeschrittene Verwendung
Zend_Amf
Einführung
Zend_Amf_Server
Zend_Auth
Einführung
Datenbanktabellen Authentifizierung
Digest Authentication
HTTP Authentication Adapter
LDAP Authentifizierung
Open ID Authentifikation
Zend_Cache
Einführung
Die Theorie des Cachens
Zend_Cache Frontends
Zend_Cache Backends
Zend_Captcha
Einführung
Captcha Anwendung
Captcha Adapter
Zend_Config
Einleitung
Theory of Operation
Zend_Config_Ini
Zend_Config_Xml
Zend_Config_Writer
Zend_Config_Writer
Zend_Console_Getopt
Einführung in Getopt
Definieren von Getopt Regeln
Holen von Optionen und Argumenten
Konfigurieren von Zend_Console_Getopt
Zend_Controller
Zend_Controller Schnellstart
Zend_Controller Grundlagen
Der Front Controller
Das Request Objekt
Der Standard Router
Der Dispatcher
Action Kontroller
Action Helfer
Das Response Objekt
Plugins
Eine konventionelle modulare Verzeichnis Struktur verwenden
MVC Ausnahmen
Migration von vorhergehenden Versionen
Zend_Currency
Einführung in Zend_Currency
Arbeiten mit Währungen
Migration von vorhergehenden Versionen
Zend_Date
Einführung
Theorie der Arbeitsweise
Basis Methoden
Zend_Date API Übersicht
Erstellen von Datumswerten
Konstanten für generelle Datums Funktionen
Funktionierende Beispiele
Zend_Db
Zend_Db_Adapter
Zend_Db_Statement
Zend_Db_Profiler
Zend_Db_Select
Zend_Db_Table
Zend_Db_Table_Row
Zend_Db_Table_Rowset
Zend_Db_Table Relationships
Zend_Debug
Variablen ausgeben
Zend_Dojo
Einführung
Zend_Dojo_Data: dojo.data Envelopes
Dojo View Helfer
Dojo Form Elemente und Dekoratore
Zend_Dom
Einführung
Zend_Dom_Query
Zend_Exception
Verwenden von Ausnahmen
Zend_Feed
Einführung
Feeds importieren
Feeds von Websites abrufen
Einen RSS Feed konsumieren
Einen Atom Feed konsumieren
Einen einzelnen Atom Eintrag konsumieren
Verändern der Feed- und Eintragsstruktur
Eigene Klassen für Feeds und Einträge
Zend_File
Zend_File_Transfer
Prüfungen für Zend_File_Transfer
Filter für Zend_File_Transfer
Migration von vorhergehenden Versionen
Zend_Filter
Einführung
Standard Filter Klassen
Filter Ketten
Filter schreiben
Zend_Filter_Input
Zend_Filter_Inflector
Zend_Form
Zend_Form
Schnellstart mit Zend_Form
Erstellen von Form Elementen mit Hilfe von Zend_Form_Element
Erstellen von Form durch Verwendung von Zend_Form
Erstellen von eigenem Form Markup durch Zend_Form_Decorator
Standard Form Elemente die mit dem With Zend Framework ausgeliefert werden
Standard Form Dekoratore die mit dem Zend Framework ausgeliefert werden
Internationalisierung von Zend_Form
Fortgeschrittene Verwendung von Zend_Form
Zend_Gdata
Einführung zu Gdata
Authentifizierung mit AuthSub
Die Buchsuche Daten API verwenden
Authentifizieren mit ClientLogin
Google Kalender verwenden
Verwenden der Google Dokumente Listen Daten API
Using Google Health
Google Tabellenkalkulation verwenden
Google Apps Provisionierung verwenden
Google Base verwenden
Picasa Web Alben verwenden
Verwenden der YouTube Daten API
Gdata Ausnahmen auffangen
Zend_Http
Zend_Http_Client - Einführung
Zend_Http_Client - Fortgeschrittende Nutzung
Zend_Http_Client - Verbindungsadapter
Zend_Http_Cookie und Zend_Http_CookieJar
Zend_Http_Response
Zend_InfoCard
Einführung
Zend_Json
Einführung
Grundlegende Verwendung
JSON Objects
XML zu JSON Konvertierung
Zend_Json_Server - JSON-RPC server
Zend_Layout
Einführung
Zend_Layout Schnellstart
Zend_Layout Konfigurations Optionen
Erweiterte Verwendung von Zend_Layout
Zend_Ldap
Einleitung
Zend_Loader
Dynamisches Laden von Dateien und Klassen
Plugins laden
Zend_Locale
Einführung
Zend_Locale verwenden
Normalisierung und Lokalisierung
Arbeiten mit Daten und Zeiten
Unterstützte Gebietsschemata
Migrieren von vorhergehenden Versionen
Zend_Log
Übersicht
Writer
Formatter
Filter
Zend_Mail
Einführung
Versand über SMTP
Versand von mehreren E-Mails über eine SMTP Verbindung
Verwendung von unterschiedlichen Versandwegen
HTML E-Mail
Anhänge
Empfänger hinzufügen
Die MIME Abgrenzung kontrollieren
Zusätzliche Kopfzeilen
Zeichensätze
Kodierung
SMTP Authentifizierung
SMTP Übertragungen sichern
Lesen von Mail Nachrichten
Zend_Measure
Einführung
Erstellung einer Maßeinheit
Ausgabe von Maßeinheiten
Manipulation von Maßeinheiten
Arten von Maßeinheiten
Zend_Memory
Übersicht
Memory Manager
Memory Objekte
Zend_Mime
Zend_Mime
Zend_Mime_Message
Zend_Mime_Part
Zend_OpenId
Einführung
Zend_OpenId_Consumer Grundlagen
Zend_OpenId_Provider
Zend_Paginator
Einführung
Verwendung
Konfiguration
Advanced usage
Zend_Pdf
Einführung
Erstellen und Laden von PDF Dokumenten
Änderungen von PDF Dokumenten speichern
Dokument Seiten
Zeichnen
Dokument Informationen und Metadaten
Anwendungsbeispiel für die Zend_Pdf Komponente
Zend_ProgressBar
Zend_ProgressBar
Zend_Registry
Die Registry verwenden
Zend_Rest
Einführung
Zend_Rest_Client
Zend_Rest_Server
Zend_Search_Lucene
Überblick
Indexerstellung
Einen Index durchsuchen
Abfragesprache
Abfrage Erzeugungs API
Zeichensätze
Erweiterbarkeit
Zusammenarbeit Mit Java Lucene
Erweitert
Die besten Anwendungen
Zend_Server
Einführung
Zend_Server_Reflection
Zend_Service
Einführung
Zend_Service_Akismet
Zend_Service_Amazon
Zend_Service_Audioscrobbler
Zend_Service_Delicious
Zend_Service_Flickr
Zend_Service_Nirvanix
Zend_Service_ReCaptcha
Zend_Service_Simpy
Einführung
Zend_Service_StrikeIron
Zend_Service_StrikeIron: Mitgelieferte Services
Zend_Service_StrikeIron: Erweiterte Verwendung
Zend_Service_Technorati
Zend_Service_Twitter
Zend_Service_Yahoo
Zend_Session
Einführung
Grundsätzliche Verwendung
Fortgeschrittene Benutzung
Globales Session Management
Zend_Session_SaveHandler_DbTable
Zend_Soap
Zend_Soap_Server
Zend_Soap_Client
WSDL Zugriffsmethoden
AutoDiscovery
Zend_Test
Einführung
Zend_Test_PHPUnit
Zend_Text
Zend_Text_Figlet
Zend_Text_Table
Zend_TimeSync
Einführung
Arbeiten mit Zend_TimeSync
Zend_Translate
Einführung
Adapter für Zend_Translate
Benutzen von Übersetzungs Adaptoren
Migration von vorhergehenden Versionen
Zend_Uri
Zend_Uri
Zend_Validate
Einführung
Standard Prüfklassen
Kettenprüfungen
Schreiben von Prüfern
Zend_Version
Auslesen der Version des Zend Frameworks
Zend_View
Einführung
Controller Skripte
View Scripte
View Helfer
Zend_View_Abstract
Zend_Wildfire
Zend_Wildfire
Zend_XmlRpc
Einführung
Zend_XmlRpc_Client
Zend_XmlRpc_Server
Zend Framework Voraussetzungen
PHP Version
PHP Erweiterungen
Zend Framework Komponenten
Zend Framework Abhängigkeiten
Zend Framework Coding Standard für PHP
Übersicht
PHP Dateiformatierung
Namens Konventionen
Code Stil
Zend Framework Performance Guide
Einführung
Laden von Klassen
Internationalisierung (I18n) und Lokalisierung (L10n)
Darstellen der View
Urheberrecht Informationen