Formular Elemente und Dekoratore für DojoAufbauend 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:
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:
Die Verwendung der Dijit-spezifischen Formulardekoratoren und Elemente ist wie die Verwendung von anderen Formulardekoratoren oder Element. Dijit-Spezifische Formular DekoratoreDie 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 DekoratorDie 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
DijitForm DekoratorDer 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 DekoratoreDer 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:
Example #3 Verwendung des DijitContainer Dekorators
Dijit-Specifische FomularelementeJedes 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:
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: 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. ButtonWä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:
Zusätzlich werden nur die Dekoratore DijitElement und DtDdWrapper für Buttonelemente benutzt. Example #4 Beispiel für die Verwendung des Button Dijit Elements
CheckBoxWä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:
Example #5 Beispiel für die Verwendung des CheckBox Dijit Elements
ComboBox und FilteringSelectWie 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.
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:
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 Example #7 Das ComboBox Dijit Element mit einem Datenspeicher verwenden Das obige Beispiel könnte auch FilteringSelect statt ComboBox verwenden. CurrencyTextBoxDie 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:
Example #8 Beispiel für die Verwendung des CurrencyTextBox Dijit Elements
DateTextBoxDateTextBox 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:
Example #9 Beispiel der Verwendung des DateTextBox Dijit Elements
EditorEditor 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:
Example #10 Beispiel der Verwendung des Editor dijit Elements
HorizontalSliderHorizontalSlider bietet ein Schieber UI Widget für die Auswahl eines numerischen 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.
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.
NumberSpinnerEin Nummernkreisel (Number Spinner) ist ein Textelement für die Eingabe von numerischen Werten; es enthält auch Elemente für das inkrementieren und dekrementieren des Wertes mit einer gesetzten Anzahl. Die folgenden Methoden sind vorhanden:
Example #12 Beispiel der Verwendung des NumberSpinner Dijit Elements
NumberTextBoxEine NumberTextBox ist ein Textelement für die Eingabe von numerischen 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:
PasswordTextBoxPasswordTextBox 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 PasswordTextBox abgeleitet von ValidationTextBox und TextBox; alle in diesen Klassen vorhandenen Methoden sind vorhanden. Example #14 Beispiel für die Verwendung des PasswordTextBox Dijit Elements
RadioButtonRadioButton 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. SimpleTextareaSimpleTextarea 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
Abstraktes Slider ElementSlider 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:
Ein Beispiel der Verwendung wird mit jeder konkreten Klasse angegeben die diese Klasse erweitert. SubmitButtonWä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
TextBoxTextBox 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:
Example #18 Beispiel der Verwendung des TextBox Dijit Elements
TextareaTextarea 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
TimeTextBoxTimeTextBox 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:
Example #20 Beispiel der Verwendung des TimeTextBox Dijit Elements Das folgende erstellt eine TimeTextBox die 2 Stunden zugleich anzeigt und um 10 Minuten inkrementiert.
ValidationTextBoxValidationTextBox 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:
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).
VerticalSliderVerticalSlider 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.
Dojo Formular BeispieleExample #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.
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:
Alternativ kann die Formular Initialisierung auch leicht verschnellert werden:
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...
|