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:
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.
Beispiel für die Verwendung des Button Dijit ElementsaddElement(
'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.
Beispiel für die Verwendung des CheckBox Dijit ElementsaddElement(
'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.
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.
Das ComboBox Dijit Element als Select Eingabe verwendenaddElement(
'ComboBox',
'foo',
array(
'label' => 'ComboBox (select)',
'value' => 'blue',
'autocomplete' => false,
'multiOptions' => array(
'red' => 'Rouge',
'blue' => 'Bleu',
'white' => 'Blanc',
'orange' => 'Orange',
'black' => 'Noir',
'green' => 'Vert',
),
)
);
]]>Das ComboBox Dijit Element mit einem Datenspeicher verwendenaddElement(
'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 soll; 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.
Beispiel für die Verwendung des CurrencyTextBox Dijit ElementsaddElement(
'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 oder 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.
Beispiel der Verwendung des DateTextBox Dijit ElementsaddElement(
'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ährend
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ährend 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ährend
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ährend 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ährend 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()Beispiel der Verwendung des Editor dijit ElementsaddElement('editor', 'content', array(
'plugins' => array('undo', '|', 'bold', 'italic'),
'editActionInterval' => 2,
'focusOnLoad' => true,
'height' => '250px',
'inheritWidth' => true,
'styleSheets' => array('/js/custom/editor.css'),
));
]]>Das Editor Dijit verwendet standardmäßig div
Das Editor dijit verwendet standardmäßig ein HTML
DIV. Die Dokumentation für
dijit._editor.RichText zeigt dass es potentielle Sicherheits
Probleme bereiten kann wenn man es auf ein HTML
TEXTAREA erstellt.
Deshalb kann es Zeiten geben in denen man ein Editor Widget benötigt das korrekt zu
einer TEXTAREA degradiert. In solchen Situationen kann man dass
durchführen indem die Eigenschaft degrade auf
TRUE gesetzt wird:
true,
));
// Erstellung über die Form:
$form->addElement('editor', 'content', array(
'degrade' => true,
));
// Oder nach der Instanzierung:
$editor->degrade = true;
]]>HorizontalSlider
HorizontalSlider 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.
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.
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.
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 numerischen
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 numerische 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.
Beispiel der Verwendung des NumberSpinner Dijit ElementsaddElement(
'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 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:
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 numerischen 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-numerische Zeichen erlaubt ist.
Beispiel der Verwendung des NumberTextBox Dijit ElementsaddElement(
'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 PasswordTextBox abgeleitet von
ValidationTextBox und
TextBox; alle in diesen Klassen
vorhandenen Methoden sind vorhanden.
Beispiel für die Verwendung des PasswordTextBox Dijit ElementsaddElement(
'PasswordTextBox',
'password',
array(
'label' => 'Passwort',
'required' => true,
'trim' => true,
'lowercase' => true,
'regExp' => '^[a-z0-9]{6,}$',
'invalidMessage' => 'Ungültiges Passwort; muß mindestens 6 '
. 'alphanumerische Zeichen lang 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.
Beispiel der Verwendung des RadioButton Dijit ElementsaddElement(
'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
Beispiel der Verwendung des SimpleTextarea Dijit ElementsaddElement(
'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.
Beispiel der Verwendung des SubmitButton Dijit ElementsaddElement(
'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.
Beispiel der Verwendung des TextBox Dijit ElementsaddElement(
'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.
Beispiel der Verwendung des Textarea Dijit ElementsaddElement(
'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.
Beispiel der Verwendung des TimeTextBox Dijit Elements
Das folgende erstellt eine TimeTextBox die 2 Stunden zugleich anzeigt und um 10
Minuten inkrementiert.
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.
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).
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.
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.
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%',
),
)
);
]]>