Benötigte Dateien in Layern gruppieren; ein Layer sammelt alle benötigten Dateien in eine einzelne JS Datei. (Daher der Name dieses Kapitels)

"Interne" nicht-javascript Dateien die von Dijits verwendet werden (typischerweise Templatedateien). Diese werden auch in der gleichen JS Datei gruppiert wie der Layer.

Die Datei wird an ShrinkSafe übergeben, welches Leerzeichen und Kommentare entfernt, sowie Variablennamen verkleinert.

setView(Zend_View_Interface $view): Setzt eine Viewinstanz im Container

enable(): Die Dojo Integration explizit einschalten.

disable(): Die Dojo Integration ausschalten.

isEnabled(): Ermitteln ob die Dojo Integration eingeschaltet ist oder nicht.

requireModule($module): Ein dojo.require Statement konfigurieren.

getModules(): Erkennen welche Module benötigt werden.

registerModulePath($module, $path): Einen Dojo Modulpfad registrieren.

getModulePaths(): Eine Liste von registrierten Modulpfaden erhalten.

addLayer($path): Einen Layerpfad (eigenen Build) für die Verwendung hinzufügen.

getLayers(): Eine Liste von allen registrierten Layerpfaden (eigene Builds) erhalten.

removeLayer($path): Den Layer der $path entspricht von der Liste der registrierten Layer (eigene Builds) entfernen.

setCdnBase($url): Den Basis URL für ein CDN setzen; typischerweise ist das Zend_Dojo::CDN_BASE_AOL oder Zend_Dojo::CDN_BASE_GOOGLE, aber es wird der URL String vor der Versionsnummer benötigt.

getCdnBase(): Den Basis CDN Url empfangen.

setCdnVersion($version = null): Setzen selche Version von Dojo vom CDN verwendet wird.

getCdnVersion(): Die Dojo Version vom CDN erhalten die verwendet wird.

setCdnDojoPath($path): Setzt den relativen Pfad zur dojo.js oder dojo.xd.js Datei am CDN; typischerweise ist das entweder Zend_Dojo::CDN_DOJO_PATH_AOL oder Zend_Dojo::CDN_DOJO_PATH_GOOGLE, aber es wird der Pfadstring nach der Versionsnummer benötigt.

getCdnDojoPath(): Das letzte Pfadsegment der CDN Url erhalten das auf die dojo.js Datei zeigt.

useCdn(): Dem Container mitteilen das CDN verwendet werden soll; aktiviert die Integration implizit.

setLocalPath($path): Dem Container den Pfad zu einer lokalen Dojo Installation mitteilen (sollte ein Pfad relativ zum Server sein, und die dojo.js Datei selbst enthalten); aktiviert die Integration implizit.

getLocalPath(): Erkennen welches lokale Pfad zu Dojo verwendet wird.

useLocalPath(): Verwendet die Integration einen lokalen Dojopfad?

setDjConfig(array $config): Setzt Dojo oder Dijit Konfigurationswerte (erwartet ein assoziatives Array).

setDjConfigOption($option, $value): Setzt einen einzelnen Dojo oder Dijit Konfigurationswert.

getDjConfig(): Retourniert alle Dojo oder Dijit Konfigurationswerte.

getDjConfigOption($option, $default = null): Retourniert einen einzelnen Dojo oder Dijit Konfigurationswert.

addStylesheetModule($module): Fügt ein Stylesheet hinzu basierend auf einem Modulthema.

getStylesheetModules(): Retourniert die als Modulthema registrierten Modulthemen.

addStylesheet($path): Fügt einen lokalen Stylesheet zur Verwendung mit Dojo hinzu.

getStylesheets(): Retourniert die lokalen Dojo Stylesheets.

addOnLoad($spec, $function = null): Fügt ein Lambda für dojo.onLoad hinzu das dieses aufruft. Wenn ein Argument übergeben wird, wird dieses entweder als Funktionsname oder als Javascriptabschluss angenommen. Wenn zwei Argumente übergeben werden, wird das erste als Name der Variablen der Objektinstanz angenommen und der zweite entweder als Methodenname in diesem Objekt oder ein Abschluß um dieses Objekt zu verwenden.

prependOnLoad($spec, $function = null): genau wie addOnLoad(), außer das vor den Anfang des onLoad Stacks angefügt wird.

getOnLoadActions(): Gibt alle im Container registrierten dojo.onLoad Aktionen zurück. Das ist ein Array von Arrays.

onLoadCaptureStart($obj = null): Empfange Daten die als Lambda für dojo.onLoad() verwendet werden sollen. Wenn $obj angegeben wird, wird der bekommene JS Code als Abschluß angenommen der mit diesem Javascript Objekt verwendet werden soll.

onLoadCaptureEnd($obj = null): Beendet das Empfangen von Daten für die Verwendung mit dojo.onLoad().

javascriptCaptureStart(): Empfange Javascript das im Dojo JS inkludiert werden soll (onLoad, require, und andere Anweisungen).

javascriptCaptureEnd(): Beende das Empfangen von Javascript.

__toString(): Castet den Container zu einem String; stellt alle HTML Stile und Skriptelemente dar.

AccordionContainer: dijit.layout.AccordionContainer. Fügt alle Ausschnitte vertikal zusallen; das Klicken auf die Überschrift eines Ausschnittes expandiert diesen und zeigt den betreffenden Ausschnitt an.

<?php echo $view->accordionContainer(
    'foo',
    $content,
    array(
        'duration' => 200,
    ),
    array(
        'style' => 'width: 200px; height: 300px;',
    ),
); ?>

AccordionPane: dijit.layout.AccordionPane. Für die Verwendung im AccordionContainer.

<?php echo $view->accordionPane(
    'foo',
    $content,
    array(
        'title' => 'Titel des Ausschnittes',
    ),
    array(
        'style' => 'background-color: lightgray;',
    ),
); ?>

BorderContainer: dijit.layout.BorderContainer. Ermöglicht Layouts mit optional größenveränderbaren Ausschnitten wie man Sie in traditionellen Anwendungen oft sieht.

<?php echo $view->borderContainer(
    'foo',
    $content,
    array(
        'design' => 'headline',
    ),
    array(
        'style' => 'width: 100%; height: 100%',
    ),
); ?>

ContentPane: dijit.layout.ContentPane. Wird in allen Containern ausser AccordionContainer verwendet.

<?php echo $view->contentPane(
    'foo',
    $content,
    array(
        'title'  => 'Titel des Ausschnittes',
        'region' => 'left',
    ),
    array(
        'style' => 'width: 120px; background-color: lightgray;',
    ),
); ?>

SplitContainer: dijit.layout.SplitContainer. Erlaubt Ausschnitte mit größenveränderbarem Inhalt; sollte in Dojo nicht mehr verwendet werden, stattdessen BorderContainer.

<?php echo $view->splitContainer(
    'foo',
    $content,
    array(
        'orientation'  => 'horizontal',
        'sizerWidth'   => 7,
        'activeSizing' => true,
    ),
    array(
        'style' => 'width: 400px; height: 500px;',
    ),
); ?>

StackContainer: dijit.layout.StackContainer. Alle Ausschnitte eines StackContainers werden in einem Stack platziert; erstelle Buttons oder Funktionalität um einen auf einmal zu erhalten.

<?php echo $view->stackContainer(
    'foo',
    $content,
    array(),
    array(
        'style' => 'width: 400px; height: 500px; border: 1px;',
    ),
); ?>

TabContainer: dijit.layout.TabContainer. Alle Ausschnitte eines TabContainers werden in einem Stack platziert, wobei Tabs auf einer Seite positioniert werden um zwischen Ihnen zu wählen.

<?php echo $view->tabContainer(
    'foo',
    $content,
    array(),
    array(
        'style' => 'width: 400px; height: 500px; border: 1px;',
    ),
); ?>

captureStart($id, array $params = array(), array $attribs = array());: Beginnt die Erfassung von Inhalt um Ihn in einem Container einzufügen. $params referiert auf die Dijit Parameters die mit dem Container verwendet werden, während $attribs auf alle generellen HTML Attribute die verwendet werden, zeigt.

Container können für die Erfassung gekoppelt werden, solange keine IDs doppelt vorhanden sind.

captureEnd($id): Beendet die Erfassung von Inhalten die in den Container übernommen werden. $id sollte auf eine Id zeigen die vorher bei dem Aufruf von captureStart() verwendet wurde. Gibt einen String zurück der den Container und seinen Inhalt repräsentiert, wie wenn man einfach den Inhalt an den Helfer selbst übergeben hätte.

Button: dijit.form.Button. Zeigt einen Formular Button.

<?php echo $view->button(
    'foo',
    'Zeig mich!',
    array('iconClass' => 'myButtons'),
); ?>

CheckBox: dijit.form.CheckBox. Zeigt eine Checkbox an. Akzeptiert ein optionales fünftes Argument, das Array $checkedOptions, welches das folgende enthalten kann:

Wenn $checkedOptions nicht vorhanden ist, wird 1 und 0 angenommen.

<?php echo $view->checkBox(
    'foo',
    'bar',
    array(),
    array(),
    array('checkedValue' => 'foo', 'unCheckedValue' => 'bar')
); ?>

ComboBox: dijit.layout.ComboBox. Comboboxen sind ein Hybrid zwischen einem Select und einer Textbox mit automatischer Vervollständigung. Der grundsätzliche Unterschied ist das man eine Option eingeben kann die nicht in der Liste der vorhandenen Optionen ist, und trotzdem eine gültige Eingabe angenommen wird. Sie akzeptiert ein optionales fünftes Argument, ein assoziatives Array $options; wenn es angegeben wird, wird ComboBox als select dargestellt. Es ist auch zu beachten dass die verschiedenen Labelwerte des $options Arrays im Formular zurückgegeben werden -- nicht die Werte selbst.

Alternativ kann eine Information übergeben werden die einen dojo.data Datenspeicher bezeichnet der mit diesem Element zu verwenden ist. Wenn er angegeben wird, wird die ComboBox als Texteingabe (input) dargestellt, und wird seine Optionen über den Datenspeicher holen.

Um einen Datenspeicher zu spezifizieren, muß eine der folgenden $params Schlüsselkombinationen angegeben werden:

// Als Select Element:
echo $view->comboBox(
    'foo',
    'bar',
    array(
        'autocomplete' => false,
    ),
    array(),
    array(
        'foo' => 'Foo',
        'bar' => 'Bar',
        'baz' => 'Baz',
    )
);

// Als dojo-aktiviertes Element:
echo $view->comboBox(
    'foo',
    'bar',
    array(
        'autocomplete' => false,
        'store'        => 'stateStore',
        'storeType'    => 'dojo.data.ItemFileReadStore',
        'storeParams'  => array('url' => '/js/states.json'),
    ),
);

CurrencyTextBox: dijit.form.CurrencyTextBox. Abgeleitet von ValidationTextBox, und bietet Clientseitige Prüfung von Wärgungen. Es erwartet das der Dijit Parameter 'currency' mit einem entsprechenden 3-zeichen Währungscode angegeben wird. Man kann auch anderen Dijit Parameter spezifizieren die für ValidationTextBox und TextBox gültig sind.

echo $view->currencyTextBox(
    'foo',
    '$25.00',
    array('currency' => 'USD'),
    array('maxlength' => 20)
);

$view->headMeta()->appendHttpEquiv('Content-Type',
                                   'text/html; charset=utf-8');

DateTextBox: dijit.form.DateTextBox. Wird von ValidationTextBox abgeleitet, und bietet sowohl Client-seitige Prüfungen von Daten, als auch einen Dropdown Kalender für die Auswahl von Daten. Man kann jeden Dijit Parameter spezifizieren der für ValidationTextBox oder TextBox vorhanden ist.

echo $view->dateTextBox(
    'foo',
    '2008-07-11',
    array('required' => true)
);

Editor: dijit.Editor. Bietet einen WYSIGYG Editor über den Benutzer Inhalte erstellen oder bearbeiten können. dijit.Editor ist ein pluginfähiger, erweiterbarer Editor mit einer Vielzahl an Parametern die für die Anpassung verwendet werden können; siehe in die dijit.Editor Dokumentation für weitere Details.

echo $view->editor('foo');

FilteringSelect: dijit.form.FilteringSelect. Wie die ComboBox ist das ein Select und Text Hybrid der entweder eine angegebenen Liste von Optionen darstellen kann, oder jene vom dojo.data Datenspeicher. Anders als ComboBox, erlaubt FilteringSelect keine Eingabe einer Option die nicht in seiner Liste vorhanden ist. Zusätzlich funktioniert es Sie ein Standard Select in dem die Optionswerte, nicht die Label, zurückgegeben werden wenn das Formular übertragen wird.

Bitte beachten Sie die obigen Informationen über die ComboBox für Beispiele und mögliche Optionen für die Definition von Datenspeichern.

HorizontalSlider und VerticalSlider: dijit.form.HorizontalSlider und dijit.form.VerticalSlider. Schieber sind UI Widgets für die Auswahl von Zahlen in einem gegebenen Bereich; es gibt eine horizontale und eine vertikale Variante.

Grundsätzlich benötigen Sie die Dijit Parameter 'minimum', 'maximum' und 'discreteValues'. Diese definieren den Bereich der Werte. Andere übliche Optionen sind:

Die Implementation von Zend Framework erstellt ein verstecktes Element um den Wert des Schiebers zu speichern.

Optional kann es gewünscht sein einen Maßstab oder ein Label für den Gleiter zu zeigen. Um das zu tun, muß ein oder mehrere der Dijit Parameter 'topDecoration' und/oder 'bottomDecoration' (HorizontalSlider) oder 'leftDecoration' und/oder 'rightDecoration' (VerticalSlider) hinzufügen. Jede von Ihnen erwartet die folgenden Optionen:

echo $view->horizontalSlider(
    'foo',
    1,
    array(
        'minimum'             => -10,
        'maximum'             => 10,
        'discreteValues'      => 11,
        'intermediateChanges' => true,
        'showButtons'         => true,
        'topDecoration'       => array(
            'container' => 'topContainer'
            'dijit'     => 'HorizontalRuleLabels',
            'labels'    => array(
                ' ',
                '20%',
                '40%',
                '60%',
                '80%',
                ' ',
            ),
            'params' => array(
                'container' => array(
                    'style' => 'height:1.2em; font-size=75%;color:gray;',
                ),
                'labels' => array(
                    'style' => 'height:1em; font-size=75%;color:gray;',
                ),
            ),
        ),
        'bottomDecoration'    => array(
            'container' => 'bottomContainer'
            'labels'    => array(
                '0%',
                '50%',
                '100%',
            ),
            'params' => array(
                'container' => array(
                    'style' => 'height:1.2em; font-size=75%;color:gray;',
                ),
                'labels' => array(
                    'style' => 'height:1em; font-size=75%;color:gray;',
                ),
            ),
        ),
    )
);

NumberSpinner: dijit.form.NumberSpinner. Eine Textbox für numerische Eingaben mit Buttons für das Inkrementieren und Dekrementieren.

Erwartet entweder ein Assoziatives Array für den Dijit Parameter 'constraints', oder einfach die Schlüssel 'min', 'max' und 'places' (das würden auch die erwarteten Einträge des Constraints Parameters sein). 'places' kann verwendet werden um anzugeben um wieviel der NumberSpinner erhöht oder erniedrigt wird.

echo $view->numberSpinner(
    'foo',
    5,
    array(
        'min'    => -10,
        'max'    => 10,
        'places' => 2,
    ),
    array(
        'maxlenth' => 3,
    )
);

NumberTextBox: dijit.form.NumberTextBox. NumberTextBox bietet die Möglichkeit die Nummerneinträge auf lokalisiertem Weg zu formatieren und anzuzeigen, optional gegen angegebene Abhängigkeiten.

echo $view->numberTextBox(
    'foo',
    5,
    array(
        'places' => 4,
        'type'   => 'percent',
    ),
    array(
        'maxlength' => 20,
    )
);

PasswordTextBox: dijit.form.ValidationTextBox bindet eine Passworteingabe. PasswordTextBox bietet die Möglichkeit Passworteingaben zu erstellen die das aktuelle Dijitthema verwenden, sowie Clientseitige Prüfungen erlauben.

echo $view->passwordTextBox(
    'foo',
    '',
    array(
        'required' => true,
    ),
    array(
        'maxlength' => 20,
    )
);

RadioButton: dijit.form.RadioButton. Ein Set von Optionen von denen nur eine ausgewählt werden kann. Dieses Verhalten entspricht auf jedem Fall dem normaler Radio Buttons, hat aber das Look-and-Feel das mit dem anderer Dijit konsistent ist.

RadioButton akzeptiert ein optionales fünftes Argument, $options, ein assoziatives Array von Werte und Label Paaren das als Radiooptionen verwendet wird. Diese können auch als $attribs Schlüssel options angegeben werden.

echo $view->radioButton(
    'foo',
    'bar',
    array(),
    array(),
    array(
        'foo' => 'Foo',
        'bar' => 'Bar',
        'baz' => 'Baz',
    )
);

SimpleTextarea: dijit.form.SimpleTextarea. Diese funktionieren wie normale Textareas, werden aber gestylt indem das aktuelle dijit Thema verwendet wird. Es müssen weder die rows noch die columns Attribute spezifiziert werden; verwende stattdessen ems oder Prozente für die Breite und Höhe.

echo $view->simpleTextarea(
    'foo',
    'Bitte ab hier schreiben...',
    array(),
    array('style' => 'width: 90%; height: 5ems;')
);

SubmitButton: Ein dijit.form.Button bindet ein Submit Eingabeelement. Siehe den Button Viewhelfer für weitere Details; der grundsätzliche Unterschied ist der, das dieser Button ein Formular übertragen kann.

Textarea: dijit.form.Textarea. Diese funktionieren wie normale Textareas, ausgenommen das Sie statt dem Setzen einer Anzahl von Reihen als Benutzertypen expandieren. Die Breite sollte über Styleeinstellungen spezifiziert werden.

echo $view->textarea(
    'foo',
    'Start writing here...',
    array(),
    array('style' => 'width: 300px;')
);

TextBox: dijit.form.TextBox. Diese Element ist primär vorhanden um das übliche Look-and-Feel zwischen den verschiedenen Dijit Elementen zu bieten, und um die Basisfunktionalität der anderen von TextBox abgeleiteten Klassen (ValidationTextBox, NumberTextBox, CurrencyTextBox, DateTextBox, und TimeTextBox) zu bieten.

Übliche Dijitparameter enthalten 'lowercase' (Casten auf lowercase), 'uppercase' (Casten auf UPPERCASE), 'propercase' (Casten auf ProperCase), und 'trim' (entferne führende und schließende Leerezeichen); alle akzeptieren boolsche Werte. Zusätzlich kann es gewünscht sein die Parameter 'size' und 'maxLength' zu spezifizieren.

echo $view->textBox(
    'foo',
    'Irgendein Text',
    array(
        'trim'       => true,
        'propercase' => true,
        'maxLength'  => 20,
    ),
    array(
        'size' => 20,
    )
);

TimeTextBox: dijit.form.TimeTextBox. Auch aus der TextBox Familie, bietet TimeTextBox eine Drop Down Auswahl für Zeiten die verschiebbar ist und die vom Benutzer ausgewählt werden kann. Dijit Parameter erlaubes es die Zeit zu spezifizieren die im Select vorhanden ist sowie auch den sichtbaren Bereich der Zeiten.

echo $view->timeTextBox(
    'foo',
    '',
    array(
        'am.pm'            => true,
        'visibleIncrement' => 'T00:05:00', // 5-Minuten addieren
        'visibleRange'     => 'T02:00:00', // Zeigt 2 Stunden die hinzugefügt werden können
    ),
    array(
        'size' => 20,
    )
);

ValidationTextBox: dijit.form.ValidateTextBox. Bietet Client-seitige Prüfungen für Textelemente. Ist von TextBox abgeleitet.

Übliche Dijit Parameter enthalten:

echo $view->validationTextBox(
    'foo',
    '',
    array(
        'required' => true,
        'regExp'   => '[\w]+',
        'invalidMessage' => 'Keine Leerzeichen oder nicht-Wort Zeichen erlaubt',
        'promptMessage'  => 'Nur ein einzelnes Wort das aus ' .
                            'alphanumerischen Zeichen und Unterstrichen besteht',
    ),
    array(
        'maxlength' => 20,
    )
);