« Anterior
Zend_Dojo
Siguiente »

Elementos y Decoradores de Dojo Form

Sobre la base de los ayudantes de vista dijit ??? , la familia de clases Zend_Dojo_Form ofrece la posibilidad de utilizar Dijits nativamente en sus formularios.

Hay tres opciones para utilizar los elementos de Dojo form con sus formularios:

  • Use Zend_Dojo::enableForm() . Esto le permitirá añadir recursivamente paths de plugins para decoradores y elementos de todos los items de forms adjuntos. Además, el objeto vista será habilitado para Dojo. Note, sin embargo, que cualquier subformulario que agregue después de esta llamada también tendrá que ser pasado mediante Zend_Dojo::enableForm() .

  • Utilice las implementaciones específicas de Dojo para formularios y subformularios, Zend_Dojo_Form y Zend_Dojo_Form_SubForm respectivamente. Éstas pueden utilizarse como reemplazantes drop-in para Zend_Form y Zend_Form_SubForm , contener todos los paths apropiados de los decoradores y elementos, establecer una clase DisplayGroup por defecto específica, y habilitar la vista para Dojo.

  • Por último, y lo más tedioso, puede establecer por sí mismo el path apropiado para el decorador y para el elemento, establecer por defecto la clase DisplayGroup, y habilitar la vista para Dojo. Dado que Zend_Dojo::enableForm() ya hizo esto, hay pocas razones para seguir esta vía.

Ejemplo 353. Habilitando Dojo en sus formularios existentes

"Pero espere", podría decir; "Ya extendí Zend_Form con mi propia clase personalizada de form! ¿Cómo puede habilitarlo para Dojo?"

En primer lugar, y lo más fácil, simplemente cambie de extender Zend_Form a extender Zend_Dojo_Form , y actualizar todos los lugares donde se instancie a Zend_Form_SubForm para instanciar a Zend_Dojo_Form_SubForm .

Un segundo enfoque es llamar al método init() dentro de sus forms personalizados Zend_Dojo::enableForm() . Cuando la definición del formulario está completa, mediante un loop habilite todos los SubForms de Dojo: 

class My_Form_Custom extends Zend_Form
{
    public function init()
    {
        // Dojo habilita el form:
        Zend_Dojo::enableForm($this);

        // ... continuar con la definición del form desde aquí

        // Dojo habilita todos los sub forms:
        foreach ($this->getSubForms() as $subForm) {
            Zend_Dojo::enableForm($subForm);
        }
    }
}

El uso de los decoradores y elementos específicos de dijit form es como usar cualquier otro decorador o elemento de formularios.

Decoradores de Forms Específicos de Dijit

La mayoría de los elementos de formularios pueden usar el decorador DijitElement, que tomará los parámetros dijit de los elementos, y pasarán estos y otros metadatos al ayudante de vista especificado por el elemento. Sin embargo, para decorar los forms, sub forms, y grupos de visualización, hay un conjunto de decoradores correspondientes a los diversos esquemas dijit.

Todos los decoradores dijit buscan la propiedad dijitParams del elemento que va a ser decorado, y mandarlos como un array $params al ayudante de vista dijit que se está usando. Luego, éstos son separados de cualquiera de las otras propiedades para evitar la duplicación de información.

Decorador DijitElement

Al igual que el decorador ViewHelper , DijitElement espera una propiedad del helper en el elemento que luego usará como el ayudante de vista cuando lo renderice. Los parámetros Dijit suelen ser arrastrados directamente desde el elemento, pero también pueden ser pasados como opciones vía la clave dijitParams (el valor de esa clave debe ser un array asociativo de opciones).

Es importante que cada elemento tenga un único ID (como traído desde el método getId() del elemento). Si se detectan duplicados dentro del ayudante de vista dojo() , el decorador accionará un aviso, pero luego creará un único ID añadiéndole lo que devuelve uniqid() al identificador.

El uso estándar es simplemente asociar este decorador como el primero de su cadena de decoradores, sin opciones adicionales.

Ejemplo 354. Uso del Decorador DijitElement

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

Decorador DijitForm

El decorador DijitForm es muy similar al Form decorator ; de hecho, básicamente puede ser utilizado de manera intercambiable con él, ya que utiliza el mismo nombre de ayudante de vista ('form').

Dado que dijit.form.Form no requiere ningún parámetro dijit para la configuración, la principal diferencia es que el ayudante de vista dijit del form exige que se pase un DOM ID para garantizar que la creación programática del dijit pueda trabajar. El decorador garantiza esto, pasando el nombre del form como el identificador.

Decoradores basados en DijitContainer

El decorador DijitContainer es en realidad una clase abstracta desde la cual derivan una variedad de otros decoradores. Ofrece la misma funcionalidad de DijitElement , con el añadido del soporte para títulos. Muchos esquemas de dijits requieren o pueden utilizar un título; DijitContainer utilizará la propiedad del elemento leyenda (legend) si está disponible, y también pueden utilizar tanto 'legend' o 'title' como opción del decorador, si es pasada. El título será traducido si un adaptador de traducción con su correspondiente traducción está presente.

La siguiente es una lista de decoradores que heredan de DijitContainer :

  • AccordionContainer

  • AccordionPane

  • BorderContainer

  • ContentPane

  • SplitContainer

  • StackContainer

  • TabContainer

Ejemplo 355. Uso del Decorador DijitContainer

// Use un TabContainer para su form:
$form->setDecorators(array(
    'FormElements',
    array('TabContainer', array(
        'id'          => 'tabContainer',
        'style'       => 'width: 600px; height: 500px;',
        'dijitParams' => array(
            'tabPosition' => 'top'
        ),
    )),
    'DijitForm',
));

// Use un ContentPane en su sub form (que puede utilizarse con todos, pero no
// con AccordionContainer):
$subForm->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'dl')),
    'ContentPane',
));

Elementos de Formularios Dijit-Specific

Cada formulario dijit para el que se provee un ayudante tiene un elemento correspondiente Zend_Form . Todos ellos tienen los siguientes métodos disponibles para manipular los parámetros dijit:

  • setDijitParam($key, $value) : establecer un único parámetro dijit. Si el parámetro dijit ya existe, se borrará y se reemplazará por el nuevo.

  • setDijitParams(array $params) : establecer varios parámetros dijit a la vez. Cualquiera de los parámetros pasados que concuerden con los ya presentes se sobreescribirán.

  • hasDijitParam($key) : si un determinado parámetro dijit está definido y presente, devolverá TRUE, de lo contrario devolverá FALSE.

  • getDijitParam($key) : recupera el parámetro dijit. Si no está disponible, se devuelve un valor NULL.

  • getDijitParams() : recupera todos los parámetros dijit.

  • removeDijitParam($key) : elimina el parámetro dijit dado.

  • clearDijitParams() : borra todos los parámetros dijit actualmente definidos.

Los parámetros Dijit se almacenan en la propiedad pública dijitParams . Así, puede habilitar dijit para un elemento de un formulario existente simplemente estableciendo esta propiedad en el elemento; sencillamante no tendrá los accessors anteriores a fin de facilitar la manipulación de parámetros.

Además, los elementos específicos de dijit implementan una lista diferente de decoradores, correspondientes a lo siguiente:

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

En efecto, el decorador DijitElement es utilizado en lugar del decorador standard ViewHelper.

Finalmente, el elemento base Dijit asegura que el path del ayudante de vista de Dojo se establezca en la vista.

Una variante de DijitElement, DijitMulti, ofrece la funcionalidad del elemento abstracto del formulario Multi , permitiendo al desarrollador especificar 'multiOptions' -- típicamente opciones "select" u opciones de "radio".

Los siguientes elementos dijit están incluídos en la distribución standard de Zend Framework.

Button

Si bien no derivan del elemento standard Button ??? , implementan la misma funcionalidad, y pueden ser utilizados como una sustitución de drop-in, como se expone en la siguiente funcionalidad:

  • getLabel() utilizará el nombre del elemento como el rótulo del botón si no se ha provisto el nombre. Además, traducirá el nombre si un adaptador de traducción encuentra concordancia con un mensaje disponible.

  • isChecked() determina si el valor enviado coincide con la etiqueta; si así fuera, devuelve TRUE. Esto es útil para determinar qué botón se utilizó cuando se envió un formulario.

Además, sólo los decoradores DijitElement y DtDdWrapper se utilizan para elementos Button.

Ejemplo 356. Ejemplo de Uso del Elemento Button dijit

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

CheckBox

Si bien no derivan del elemento standard Checkbox ??? , aplican la misma funcionalidad. Esto significa exponer los siguientes métodos:

  • setCheckedValue($value) : establecer el valor a usar cuando el elemento está marcado (checked).

  • getCheckedValue() : obtener el valor del item a usar cuando está comprobado (checked).

  • setUncheckedValue($value) : establecer el valor del item a utilizar cuando está desactivado (unchecked).

  • getUncheckedValue() : obtener el valor del item a utilizar cuando está desactivado (unchecked).

  • setChecked($flag) : marcar el elemento como activado (checked) o desactivado (unchecked).

  • isChecked() : determina si el elemento está activo (checked) actualmente.

Ejemplo 357. Ejemplo de Uso de Elementos CheckBox dijit

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

ComboBox y FilteringSelect

Como se señaló en la documentación del ayudante de vista de ComboBox dijit ??? , los ComboBoxes son un híbrido entre "select" y "text input", permitiendo el autocompletado y la capacidad para especificar una alternativa a las opciones provistas. FilteringSelects es lo mismo, pero no permite entradas arbitrarias.

ComboBoxes que Devuelven los Valores de los Labels

Los ComboBoxes devuelven los valores de los rótulos (labels), y no los valores de opción, que pueden llevar a una desvinculación de las expectativas. Por esta razón, los ComboBoxes no auto-registran un validador InArray (aunque los FilteringSelects si lo hacen).

Los elementos de forms de ComboBox y FilteringSelect proporcionan accessors y mutators para examinar y establecer las opciones seleccionadas, así como para especificar un datastore dojo.data (si se usa). Se extienden desde DijitMulti, que le permite especificar opciones de selección vía los métodos setMultiOptions() y setMultiOption() . Además, están disponibles los siguientes métodos:

  • getStoreInfo() : Obtener del datastore toda la información establecida actualmente. Devuelve un array vacío si no hay datos actualmente establecidos.

  • setStoreId($identifier) : establece la variable del identificador (generalmente referenciado por el atributo 'jsId' en Dojo). Este debe ser un nombre de variable válido para javascript.

  • getStoreId() : recupera el nombre de la variable del identificador del datastore.

  • setStoreType($dojoType) : establece la clase del datastore a usar; por ejemplo, "dojo.data.ItemFileReadStore".

  • getStoreType() : obtiene la clase del datastore a usar.

  • setStoreParams(array $params) : establece cualquiera de los parámetros utilizados para configurar el objeto datastore. Como ejemplo, el datastore dojo.data.ItemFileReadStore esperaría un parámetro 'url' apuntando a un lugar que devolvería el objeto dojo.data.

  • getStoreParams() : obtiene cualquiera de los parámetros del datastore actualmente establecido; si no hay ninguno, se devuelve un array vacío.

  • setAutocomplete($flag) : indica si será usado o no el elemento seleccionado una vez que el usuario deje el elemento.

  • getAutocomplete() : obtener el valor del flag de autocomplete.

Por defecto, si no hay ningún dojo.data registrado con el elemento, este elemento registra un validador InArray que valida contra las claves del array de las opciones registradas. Puede desactivar este comportamiento ya sea llamando a setRegisterInArrayValidator(false) , o pasando un valor FALSE a la clave de configuración registerInArrayValidator .

Ejemplo 358. Elemento de ComboBox dijit Usado como select input

$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',
        ),
    )
);

Ejemplo 359. Elemento de ComboBox dijit Usado con datastore

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

Los ejemplos anteriores también podrían utilizar FilteringSelect en vez de ComboBox .

CurrencyTextBox

El CurrencyTextBox principalmente brinda apoyo a la entrada de moneda. La moneda puede ser localizada, y puede manejar tanto a valores fraccionarios como no fraccionarios.

Internamente, CurrencyTextBox deriva de NumberTextBox , ValidationTextBox , y TextBox ; todos los métodos disponibles a esas clases están disponibles. Además, pueden utilizarse los siguientes métodos restrictivos:

  • setCurrency($currency) : establecer el tipo de moneda a usar; y debe seguir la especificación ISO-4217

  • getCurrency() : recupera el tipo de moneda actual.

  • setSymbol($symbol) : establece el símbolo de 3 letras ISO-4217 de la moneda a usar.

  • getSymbol() : recupera el símbolo de la moneda actual.

  • setFractional($flag) : establece si la moneda debería permitir o no valores fraccionarios.

  • getFractional() : recupera el status del flag fraccional.

Ejemplo 360. Ejemplo de Uso del Elemento CurrencyTextBox dijit

$form->addElement(
    'CurrencyTextBox',
    'foo',
    array(
        'label'          => 'Currency:',
        'required'       => true,
        'currency'       => 'USD',
        'invalidMessage' => 'Invalid amount. ' .
                            'Include dollar sign, commas, and cents.',
        'fractional'     => false,
    )
);

DateTextBox

DateTextBox establece un calendario desplegable (drop-down) para seleccionar una fecha, así como validación y formateo de fechas del lado del clente.

Internamente, DateTextBox deriva de ValidationTextBox y TextBox ; todos los métodos disponibles a esas clases están disponibles. Además, los siguientes métodos pueden utilizarse para establecer restricciones individuales:

  • setAmPm($flag) y getAmPm() : Cuándo usar o no los strings AM/PM en los fortmatos de horas.

  • setStrict($flag) y getStrict() : Cuándo usar o no el matching para una expresión regular estricta al validar la entrada. Si es falso, que es el valor por defecto, será indulgente sobre espacios en blanco y algunas abreviaturas.

  • setLocale($locale) y getLocale() : Establece y recupera la localidad a utilizar con este elemento específico.

  • setDatePattern($pattern) y getDatePattern() : provee y recupera el patrón de formato de fechas unicode para el formateo de fechas.

  • setFormatLength($formatLength) y getFormatLength() : proporciona y recupera la longitud del tipo de formato a usar; debe ser uno de los siguientes: "long", "short", "medium" o "full".

  • setSelector($selector) y getSelector() : proporciona y recupera el estilo del selector; debe ser "date" o "time".

Ejemplo 361. Ejemplo de Uso del Elemento DateTextBox dijit

$form->addElement(
    'DateTextBox',
    'foo',
    array(
        'label'          => 'Date:',
        'required'       => true,
        'invalidMessage' => 'Invalid date specified.',
        'formatLength'   => 'long',
    )
);

Editor

Editor proporciona un editor WYSIWYG que puede ser utilizado tanto para crear como para editar contenidos HTML ricos. dijit.Editor es pluggable y podrá ampliarse con plugins personalizados si lo desea; para más detalles vea en la documentación de dijit.Editor .

El elemento form de Editor proporciona un número de accessors y mutators para manipular diversos parámetros dijit, tal como sigue:

  • captureEvents son eventos que se conectan al área de edición en si. Los siguientes accessors y mutators están disponibles para manipular la captura de eventos:

    • addCaptureEvent($event)

    • addCaptureEvents(array $events)

    • setCaptureEvents(array $events)

    • getCaptureEvents()

    • hasCaptureEvent($event)

    • removeCaptureEvent($event)

    • clearCaptureEvents()

  • events son eventos DOM estándar, como onClick, onKeyup, etc. Los siguientes accessors y mutators están disponibles para manipular eventos:

    • addEvent($event)

    • addEvents(array $events)

    • setEvents(array $events)

    • getEvents()

    • hasEvent($event)

    • removeEvent($event)

    • clearEvents()

  • plugins añaden funcionalidad al Editor -- herramientas adicionales para la barra de herramientas, estilos adicionales a permitir, etc. Los siguientes accessors y mutators están disponibles para manipular plugins:

    • addPlugin($plugin)

    • addPlugins(array $plugins)

    • setPlugins(array $plugins)

    • getPlugins()

    • hasPlugin($plugin)

    • removePlugin($plugin)

    • clearPlugins()

  • editActionInterval se utiliza para agrupar eventos para deshacer operaciones. Por defecto, este valor es de 3 segundos. El método setEditActionInterval($interval) puede ser usado para establecer el valor, mientras que getEditActionInterval() lo recuperará.

  • focusOnLoad se utiliza para determinar si este editor en particular recibirá atención cuando la página se haya cargado. Por defecto, esto es falso. El método setFocusOnLoad($flag) puede usarse para establecer el valor, mientras que getFocusOnLoad() lo recuperará.

  • height especifica la altura del editor; por defecto, es de 300px. El método setHeight($height) puede ser utilizado para establecer el valor, mientras que getHeight() lo recupera.

  • inheritWidth se utiliza para determinar si el editor utilizará el ancho del contenedor padre o simplemente toma por defecto el 100% del ancho. Por defecto, esto es falso (es decir, llenará el ancho de la ventana). El método setInheritWidth($flag) puede ser utilizado para establecer el valor, mientras que getInheritWidth() lo recuperará.

  • minHeight indica la altura mínima del editor; por defecto, es de 1em. El método setMinHeight($height) puede ser utilizado para establecer el valor, mientras que getMinHeight() lo recuperará.

  • styleSheets indica qué otras hojas de estilo CSS deberían ser utilizadas para incidir sobre la pantalla del Editor. Por defecto, ninguna está registrada, y hereda la página de estilos. Los siguientes accessors y mutators están disponibles para manipular al editor de hojas de estilo (stylesheets):

    • addStyleSheet($styleSheet)

    • addStyleSheets(array $styleSheets)

    • setStyleSheets(array $styleSheets)

    • getStyleSheets()

    • hasStyleSheet($styleSheet)

    • removeStyleSheet($styleSheet)

    • clearStyleSheets()

Ejemplo 362. Ejemplo de Uso del Elemento Editor dijit

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

Editor Dijit uses div by default

The Editor dijit uses an HTML DIV by default. The dijit._editor.RichText documentation indicates that having it built on an HTML TEXTAREA can potentially have security implications.

That said, there may be times when you want an Editor widget that can gracefully degrade to a TEXTAREA . In such situations, you can do so by setting the degrade property to TRUE : 

// At instantiation:
$editor = new Zend_Dojo_Form_Element_Editor('foo', array(
    'degrade' => true,
));

// Construction via the form:
$form->addElement('editor', 'content', array(
    'degrade' => true,
));

// Or after instantiation:
$editor->degrade = true;

HorizontalSlider

HorizontalSlider proporciona un widget deslizador de UI para seleccionar un valor numérico dentro de un rango. Internamente, establece el valor de un elemento oculto que es enviado por el formulario.

HorizontalSlider proviene del elemento abstracto Slider dijit . Además, tiene una variedad de métodos de ajuste y configuración de reglas deslizantes y etiquetas para esas reglas.

  • setTopDecorationDijit($dijit) y setBottomDecorationDijit($dijit) : establecen el nombre de la dijit a utilizar bien para la parte superior o inferior de la barra deslizante. Esto no debería incluir el prefijo "dijit.form.", sino sólo el último nombre -- "HorizontalRule" o "HorizontalRuleLabels".

  • setTopDecorationContainer($container) y setBottomDecorationContainer($container) : especifican el nombre a utilizar para el elemento contenedor de las reglas; por ejemplo 'Toprule', 'topContainer', etc.

  • setTopDecorationLabels(array $labels) y setBottomDecorationLabels(array $labels) : establecen las etiquetas a usar por uno de los tipos RuleLabels dijit. Debe ser un array indexado; especificar un único espacio vacío para saltar a la posición de una determinada etiqueta (como ser al comienzo o al final).

  • setTopDecorationParams(array $params) y setBottomDecorationParams(array $params) : parámetros dijit para utilizar al configurar la Regla o RuleLabels dijit.

  • setTopDecorationAttribs(array $attribs) y setBottomDecorationAttribs(array $attribs) : atributos HTML para especificar una Regla dada o el elemento contenedor de HTML RuleLabels.

  • getTopDecoration() y getBottomDecoration() : recuperar todos los metadatos para una determinada Regla o definición de RuleLabels, tal como han sido provistos por los mutators anteriores.

Ejemplo 363. Ejemplo de Uso del Elemento HorizontalSlider dijit

Lo siguiente creará un deslizador horizontal de selección con valores enteros que van desde -10 a 10. La parte superior tendrá etiquetas en las marcas del 20%, 40%, 60%, y 80%. La parte inferior será una regla con marcas en el 0, 50%, y 100%. Cada vez que se cambie el valor, el elemento oculto almacenará el valor actualizado. 

$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

Un número spinner es un elemento de texto para introducir valores numéricos; también incluye elementos de incremento y decremento del valor por una cantidad fija.

Se encuentran disponibles los siguientes métodos:

  • setDefaultTimeout($timeout) y getDefaultTimeout() : establece y recupera el tiempo de espera predeterminado en milisegundos, entre cuando el botón se mantiene presionado y cambia el valor.

  • setTimeoutChangeRate($rate) y getTimeoutChangeRate() : establece y recupera la tasa en milisegundos, en la que se harán cambios cuando un botón se mantiene presionado.

  • setLargeDelta($delta) y getLargeDelta() : establece y recupera la cantidad en la que el valor numérico debería cambiar cuando un botón se mantiene presionado.

  • setSmallDelta($delta) y getSmallDelta() : establece y recupera el delta con la que el número debería cambiar cuando se pulsa un botón una vez.

  • setIntermediateChanges($flag) y getIntermediateChanges() : establece y recupera el flag que indica si debe o no ser mostrado cada cambio de valor cuando un botón se mantiene presionado.

  • setRangeMessage($message) y getRangeMessage() : establece y recupera el mensaje indicando el rango de valores disponibles.

  • setMin($value) y getMin() : establece y recupera el valor mínimo posible.

  • setMax($value) y getMax() : establece y recupera el valor máximo posible.

Ejemplo 364. Ejemplo de Uso del Elemento NumberSpinner dijit

$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

Un cuadro de texto numérico es un elemento de texto de introducción de valores numéricos; a diferencia de NumberSpinner, se introducen manualmente. Se pueden proporcionar validaciones y restricciones para garantizar que el número permanece en un rango o formato particular.

Internmente, NumberTextBox proviene de ValidationTextBox y TextBox ; todos los métodos disponibles a esas clases están disponibles. Además, los siguientes métodos pueden utilizarse para establecer restricciones individuales:

  • setLocale($locale) y getLocale() : especifica y recupera un "locale" determinado o alternativo para usar con este dijit.

  • setPattern($pattern) y getPattern() : establece y recupera un patrón de formato numérico a usar en el formateo de números.

  • setType($type) y getType() : establece y recupera el tipo de formato numérico a utilizar (deberán ser uno de 'decimal', 'percent', o 'currency').

  • setPlaces($places) y getPlaces() : establece y recupera el número de decimales que soportará.

  • setStrict($flag) y getStrict() : establece y recupera el valor estricto del flag, que indica cuánta indulgencia es permitida en relación con espacios en blanco y con caracteres no numéricos.

Ejemplo 365. Ejemplo de Uso del Elemento NumberTextBox dijit

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

PasswordTextBox

PasswordTextBox es simplemente un ValidationTextBox que está ligado a una contraseña; su único objetivo es permitir la entrada de texto de contraseñas de dijit que también proporciona validación del lado del cliente.

Internmente, PasswordTextBox proviene de ValidationTextBox y TextBox ; todos los métodos disponibles a esas clases están disponibles.

Ejemplo 366. Ejemplo de Uso del Elemento PasswordTextBox dijit

$form->addElement(
    'PasswordTextBox',
    'password',
    array(
        'label'          => 'Password',
        'required'       => true,
        'trim'           => true,
        'lowercase'      => true,
        'regExp'         => '^[a-z0-9]{6,}$',
        'invalidMessage' => 'Invalid password; ' .
                            'must be at least 6 alphanumeric characters',
    )
);

RadioButton

RadioButton envuelve a elementos standard de entrada tipo radio para brindar un look-and-feel consistente con otros dojo dijits.

RadioButton se extiende desde DijitMulti, que le permite especificar la selección de opciones vía los métodos setMultiOptions() y setMultiOption() .

Por defecto, este elemento registra un validador InArray que valida contra las calves del array de las opciones registradas. Puede desactivar este comportamiento ya sea llamando a setRegisterInArrayValidator(false) , o pasando un valor falso a la clave de configuración registerInArrayValidator .

Ejemplo 367. Ejemplo de Uso del Elemento RadioButton dijit

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

SimpleTextarea

SimpleTextarea actúa principalmente como un textarea estándar de HTML . Sin embargo, no permite establecer filas ni columnas. En su lugar, el ancho de textarea debe especificarse utilizando medidas CSS estándar. A diferencia de Textarea, esta no aumentará automáticamente.

Ejemplo 368. Ejemplo de Uso del Elemento SimpleTextarea dijit

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

Elemento abstracto Slider

Slider es un elemento abstracto que proviene de ambos HorizontalSlider y VerticalSlider . Expone una serie de métodos comunes para configurar sus deslizadores, incluyendo a:

  • setClickSelect($flag) y getClickSelect() : establece y recupera el flag que indica cuando al presionar el botón deslizante cambia o no el valor.

  • setIntermediateChanges($flag) y getIntermediateChanges() : establece y recupera el flag que indica si dijit enviará o no una notificación sobre cada evento de cambio del deslizador.

  • setShowButtons($flag) y getShowButtons() : establece y recupera el flag que indica si los botones de uno u otro extremo se mostrarán o no; si es así, el usuario puede hacer clic sobre éstos para cambiar el valor de la barra deslizante.

  • setDiscreteValues($value) y getDiscreteValues() : establece y recupera el número de valores discretos representados por el deslizador.

  • setMaximum($value) y getMaximum() : establece y recupera el valor máximo del deslizador.

  • setMinimum($value) y getMinimum() : establece y recupera el valor mínimo del deslizador.

  • setPageIncrement($value) y getPageIncrement() : establece la cantidad en que cambiará el deslizador por eventos del teclado.

Ejemplos de uso provistos con cada clase extendida concretamente.

SubmitButton

Si bien no hay Dijit llamado SubmitButton, incluimos uno aquí para proporcionar un botón dijit capaz de enviar un formulario sin que se exijan ligaduras con javascript. Funciona exactamente igual que el Button dijit .

Ejemplo 369. Ejemplo de Uso del Elemento SubmitButton dijit

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

TextBox

Textbox se incluyó principalmente para proporcionar una entrada de texto con apariencia coherente y con el look-and-feel de los demás dijits. Sin embargo, también incluye algunas pequeñas capacidades de filtrado y validación, representadas en los métodos siguientes:

  • setLowercase($flag) y getLowercase() : establece y recupera el flag que indica si la entrada debe o no ser presentada en minúsculas.

  • setPropercase($flag) y getPropercase() : establece y recupera el flag que indica si la entrada debe ser o no ser presentada como Proper Case.

  • setUppercase($flag) y getUppercase() : establece y recupera el flag que indica si la entrada debe ser presentada como mayúsculas (UPPERCASE).

  • setTrim($flag) y getTrim() : establece y recupera el flag que indica si los espacios al comienzo o al final deben ser eliminados o no.

  • setMaxLength($length) y getMaxLength() : establece y recupera la longitud máxima del input.

Ejemplo 370. Ejemplo de Uso del Elemento TextBox dijit

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

Textarea

Textarea actúa principalmente como un textarea estándar de HTML . Sin embargo, no permite establecer filas y columnas. En su lugar, el ancho de la textarea debe especificarse utilizando medidas CSS estándar; las filas debe omitirse totalmente. Luego, la textarea crecerá verticalmente tanto como texto se añada a ella.

Ejemplo 371. Ejemplo de Uso del Elemento Textarea dijit

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

TimeTextBox

TimeTextBox es una entrada de texto que proporciona una lista desplegable (drop-down) para seleccionar un tiempo (fecha y hora). La lista desplegable, puede ser configurada para mostrar una cierta ventana de tiempo, con incrementos especificados.

Internamente, TimeTextBox proviene de DateTextBox , ValidationTextBox y TextBox ; todos los métodos disponibles a esas clases están disponibles. Además, los siguientes métodos pueden utilizarse para establecer restricciones individuales:

  • setTimePattern($pattern) y getTimePattern() : establece y recupera el patrón de formato de fecha y hora unicode para el formato correspondiente.

  • setClickableIncrement($format) y getClickableIncrement() : establece y recupera el string ISO-8601 representando la cantidad de tiempo a incrementar cada vez que se recolecta un elemento clickable.

  • setVisibleIncrement($format) y getVisibleIncrement() : establece y recupera el incremento visible en el selector de tiempo; debe seguir los formatos ISO-8601.

  • setVisibleRange($format) y getVisibleRange() : establece y recupera el intervalo de tiempo visible en el selector de tiempo en cualquier momento; debe seguir los formatos ISO-8601.

Ejemplo 372. Ejemplo de Uso del Elemento TimeTextBox dijit

Lo siguiente creará un TimeTextBox que muestra 2 horas a la vez, con incrementos de 10 minutos.

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

ValidationTextBox

ValidationTextBox ofrece la posibilidad de añadir validaciones y limitaciones a una entrada de texto. Internamente, proviene de TextBox , y añade los siguientes accessors y mutators para manejar parámetros dijit:

  • setInvalidMessage($message) y getInvalidMessage() : establece y recupera el mensaje de tooltip para mostrar cuando el valor no se validó.

  • setPromptMessage($message) y getPromptMessage() : establece y recupera el mensaje de tooltip a mostrar para el uso del elemento.

  • setRegExp($regexp) y getRegExp() : establece y recupera la expresión regular a utilizar para validar el elemento. La expresión regular no necesita límites (a diferencia de la familia de funciones preg*, de PHP ).

  • setConstraint($key, $value) y getConstraint($key) : establece y recupera restricciones adicionales para utilizar al validar el elemento; se utiliza principalmente con subclases. Las restricciones son almacenados en la clave 'constraints' de los parámetros dijit.

  • setConstraints(array $constraints) y getConstraints() : establece y recupera las restricciones para utilizar al validar el elemento; se utiliza principalmente con subclases.

  • hasConstraint($key) : prueba si una restricción dada existe.

  • removeConstraint($key) y clearConstraints() : elimina una restricción individual o todas las restricciones para el elemento.

Ejemplo 373. Ejemplo de Uso del Elemento ValidationTextBox dijit

Lo siguiente creará un ValidationTextBox que requiere un solo string compuesto exclusivamente por caracteres de palabra (es decir, sin espacios, la mayor parte de la puntuación es inválida).

$form->addElement(
    'ValidationTextBox',
    'foo',
    array(
        'label'          => 'ValidationTextBox',
        'required'       => true,
        'regExp'         => '[\w]+',
        'invalidMessage' => 'Invalid non-space text.',
    )
);

VerticalSlider

VerticalSlider es el hermano de HorizontalSlider , y opera en todos los sentidos como ese elemento. La única diferencia real es que los métodos 'top*' y 'bottom*' son sustituidos por 'left*' y 'right*', y en lugar de utilizar HorizontalRule y HorizontalRuleLabels, debe usarse VerticalRule y VerticalRuleLabels.

Ejemplo 374. Ejemplo de Uso del Elemento VerticalSlider dijit

Lo siguiente creará una selección deslizante vertical con valores enteros desde -10 a 10. La izquierda tendrá etiquetas en las marcas correspondientes al 20%, 40%, 60%, y 80%. El derecho tiene reglas en un 0, 50%, y 100%. Cada vez que se cambie el valor, se actualizará el elemento oculto que almacena el valor.

$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%',
        ),
    )
);

Ejemplos de Dojo Form

Ejemplo 375. Usando Zend_Dojo_Form

La forma más fácil de utilizar Dojo con Zend_Form es utilizar Zend_Dojo_Form , ya sea mediante el uso directo o mediante su extensión. Este ejemplo muestra la extensión de Zend_Dojo_Form , y muestra el uso de todos los elementos dijit. Crea cuatro sub forms, y decora el form para utilizar un TabContainer, mostrando cada sub form en su propia pestaña. 

class My_Form_Test extends Zend_Dojo_Form
{
    /**
     * Opciones para usar con elementos select
     */
    protected $_selectOptions = array(
        'red'    => 'Rouge',
        'blue'   => 'Bleu',
        'white'  => 'Blanc',
        'orange' => 'Orange',
        'black'  => 'Noir',
        'green'  => 'Vert',
    );

    /**
     * Inicialización del Formn
     *
     * @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' => 'Invalid amount. ' .
                                        'Include dollar sign, commas, ' .
                                        'and cents.',
                    // 'fractional' => true,
                    // 'symbol' => 'USD',
                    // 'type' => 'currency',
                )
            )
            ->addElement(
                'NumberTextBox',
                'numberbox',
                array(
                    'label' => 'NumberTextBox',
                    'required'  => true,
                    'invalidMessage' => 'Invalid elevation.',
                    'constraints' => array(
                        'min' => -20000,
                        'max' => 20000,
                        'places' => 0,
                    )
                )
            )
            ->addElement(
                'ValidationTextBox',
                'validationbox',
                array(
                    'label' => 'ValidationTextBox',
                    'required'  => true,
                    'regExp' => '[\w]+',
                    'invalidMessage' => 'Invalid non-space 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');
    }
}

Ejemplo 376. Modificando un form existente para utilizarlo con Dojo

Los forms existentes pueden ser modificados para ser utilizados también por Dojo, usando el método estático Zend_Dojo::enableForm() .

Este primer ejemplo muestra como decorar una instancia de un form existente:

$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',
    ),
)
);

Alternativamente, puede hacer un ligero retoque a su form de inicialización:

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

        // ...
    }
}

Por supuesto, si puede hacerlo... podría y debería simplemente alterar la clase a heredar de Zend_Dojo_Form , que es una sustitución del drop-in de Zend_Form que ya está habilitada por Dojo....


« Anterior
  
Siguiente »
Ayudantes de Dojo View