Partiendo de los helpers de vista
específicos de dijit, la familia de clases Zend_Dojo_Form
proporciona la capacidad de utilizar Dijits de forma nativa dentro de sus formularios.
Hay tres opciones para utilizar los elementos de formulario de Dojo con sus formularios:
Usar
Zend_Dojo::enableForm(). Esto añadirá rutas de plugin para decoradores y elementos a todos los elementos de formulario adjuntos, de forma recursiva. Además, habilitará Dojo en el objeto de vista. Tenga en cuenta, sin embargo, que cualquier subformulario que adjunte después de esta llamada también necesitará ser pasado porZend_Dojo::enableForm().Usar las implementaciones de formulario y subformulario específicas de Dojo,
Zend_Dojo_FormyZend_Dojo_Form_SubFormrespectivamente. Estas se pueden usar como reemplazos directos deZend_FormyZend_Form_SubForm, contienen todas las rutas apropiadas de decoradores y elementos, establecen una clase DisplayGroup por defecto específica de Dojo, y habilitan Dojo en la vista.Por último, y lo más tedioso, puede establecer usted mismo las rutas apropiadas de decoradores y elementos, establecer la clase DisplayGroup por defecto, y habilitar Dojo en la vista. Dado que
Zend_Dojo::enableForm()ya hace esto, hay poca razón para tomar este camino.
Ejemplo 29.12. Habilitar Dojo en sus formularios existentes
"Pero espera," dirá usted, "¡Ya estoy extendiendo Zend_Form con mi
propia clase de formulario personalizada! ¿Cómo puedo habilitar Dojo en ella?'"
Primero, y lo más fácil, simplemente cambie de extender
Zend_Form a extender Zend_Dojo_Form,
y actualice cualquier lugar donde instancie
Zend_Form_SubForm para instanciar
Zend_Dojo_Form_SubForm.
Un segundo enfoque es llamar a Zend_Dojo::enableForm()
dentro del método init() de su formulario personalizado; cuando la
definición del formulario esté completa, recorra todos los SubForms para habilitar
Dojo en ellos:
class My_Form_Custom extends Zend_Form
{
public function init()
{
// Dojo-enable the form:
Zend_Dojo::enableForm($this);
// ... continue form definition from here
// Dojo-enable all sub forms:
foreach ($this->getSubForms() as $subForm) {
Zend_Dojo::enableForm($subForm);
}
}
}
El uso de los decoradores y elementos de formulario específicos de dijit es igual que usar cualquier otro decorador o elemento de formulario.
La mayoría de los elementos de formulario pueden usar el decorador DijitElement, que tomará los parámetros de dijit de los elementos, y pasará estos y otros metadatos al helper de vista especificado por el elemento. Para decorar formularios, subformularios y grupos de visualización, sin embargo, hay un conjunto de decoradores correspondientes a los diversos dijits de disposición.
Todos los decoradores de dijit buscan la propiedad dijitParams del
elemento que se está decorando, y las pasan como el
array $params al helper de vista de dijit que se está usando; estas
se separan luego de cualquier otra propiedad para que no se produzca duplicación de
información.
Al igual que el decorador ViewHelper, DijitElement espera una propiedad helper en el elemento, la cual usará después como el helper de vista al renderizar. Los parámetros de dijit típicamente se obtendrán directamente del elemento, pero también pueden pasarse como opciones a través de la clave dijitParams (el valor de esa clave debe ser un array asociativo de opciones).
Es importante que cada elemento tenga un ID único (obtenido del
método getId() del elemento). Si se detectan duplicados dentro
del helper de vista dojo(), el decorador
activará un aviso, pero luego creará un ID único añadiendo el
retorno de uniqid() al identificador.
El uso estándar es simplemente asociar este decorador como el primero en su cadena de decoradores, sin opciones adicionales.
Ejemplo 29.13. Uso del decorador DijitElement
$element->setDecorators(array(
'DijitElement',
'Errors',
'Label',
'ContentPane',
));
El decorador DijitForm es muy similar al decorador Form; de hecho, puede usarse básicamente de forma intercambiable con él, ya que utiliza el mismo nombre de helper de vista ('form').
Dado que dijit.form.Form no requiere ningún parámetro de dijit para su configuración, la principal diferencia es que el helper de vista de formulario dijit requiere que se pase un ID de DOM para garantizar que la creación programática de dijit pueda funcionar. El decorador se asegura de esto, pasando el nombre del formulario como identificador.
El decorador DijitContainer es en realidad una clase
abstracta de la que derivan otros decoradores. Ofrece
la misma funcionalidad que DijitElement,
con la adición de soporte de título. Muchos dijits de disposición requieren o
pueden utilizar un título; DijitContainer utilizará la propiedad legend del
elemento, si está disponible, y también puede utilizar la opción de decorador
'legend' o 'title', si se pasa. El título se
traducirá si hay presente un adaptador de traducción con una
traducción correspondiente.
La siguiente es una lista de decoradores que heredan de
DijitContainer:
AccordionContainer
AccordionPane
BorderContainer
ContentPane
SplitContainer
StackContainer
TabContainer
Ejemplo 29.14. Uso del decorador DijitContainer
// Use a TabContainer for your form:
$form->setDecorators(array(
'FormElements',
array('TabContainer', array(
'id' => 'tabContainer',
'style' => 'width: 600px; height: 500px;',
'dijitParams' => array(
'tabPosition' => 'top'
),
)),
'DijitForm',
));
// Use a ContentPane in your sub form (which can be used with all but
// AccordionContainer):
$subForm->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'dl')),
'ContentPane',
));
Cada dijit de formulario para el cual se proporciona un helper de vista tiene un
elemento Zend_Form correspondiente. Todos ellos tienen los siguientes métodos
disponibles para manipular los parámetros de dijit:
setDijitParam($key, $value): establece un único parámetro de dijit. Si el parámetro de dijit ya existe, será sobrescrito.setDijitParams(array $params): establece varios parámetros de dijit a la vez. Cualquier parámetro pasado que coincida con uno ya presente lo sobrescribirá.hasDijitParam($key): si un parámetro de dijit dado está definido y presente, devuelveTRUE, de lo contrario devuelveFALSE.getDijitParam($key): recupera el parámetro de dijit dado. Si no está disponible, se devuelve un valorNULL.getDijitParams(): recupera todos los parámetros de dijit.removeDijitParam($key): elimina el parámetro de dijit dado.clearDijitParams(): elimina todos los parámetros de dijit actualmente definidos.
Los parámetros de dijit se almacenan en la propiedad pública dijitParams. Por lo tanto, puede habilitar dijit en un elemento de formulario existente simplemente estableciendo esta propiedad en el elemento; simplemente no tendrá los accesores anteriores para facilitar la manipulación de los parámetros.
Además, los elementos específicos de dijit implementan una lista diferente de decoradores, correspondiente a lo siguiente:
$element->addDecorator('DijitElement')
->addDecorator('Errors')
->addDecorator('HtmlTag', array('tag' => 'dd'))
->addDecorator('Label', array('tag' => 'dt'));
En efecto, el decorador DijitElement se usa en lugar del decorador estándar ViewHelper.
Finalmente, el elemento Dijit base se asegura de que la ruta del helper de vista Dojo esté establecida en la vista.
Una variante de DijitElement, DijitMulti, proporciona la funcionalidad del
elemento de formulario abstracto Multi, permitiendo al desarrollador
especificar 'multiOptions' -- típicamente opciones de select u opciones de radio.
Los siguientes elementos de dijit se distribuyen en la distribución estándar de Zend Framework.
Aunque no deriva de el elemento Button estándar, implementa la misma funcionalidad, y puede usarse como un reemplazo directo del mismo. Se expone la siguiente funcionalidad:
getLabel()utilizará el nombre del elemento como la etiqueta del botón si no se proporciona ningún nombre. Además, traducirá el nombre si hay disponible un adaptador de traducción con un mensaje de traducción coincidente.isChecked()determina si el valor enviado coincide con la etiqueta; si es así, devuelveTRUE. Esto es útil para determinar qué botón se usó cuando se envió un formulario.
Además, solo se utilizan los decoradores DijitElement y
DtDdWrapper para los elementos Button.
Ejemplo 29.15. Ejemplo de uso del elemento dijit Button
$form->addElement(
'Button',
'foo',
array(
'label' => 'Button Label',
)
);
Aunque no deriva de el elemento Checkbox estándar, implementa la misma funcionalidad. Esto significa que se exponen los siguientes métodos:
setCheckedValue($value): establece el valor a usar cuando el elemento está marcado.getCheckedValue(): obtiene el valor del elemento a usar cuando está marcado.setUncheckedValue($value): establece el valor del elemento a usar cuando no está marcado.getUncheckedValue(): obtiene el valor del elemento a usar cuando no está marcado.setChecked($flag): marca el elemento como marcado o no marcado.isChecked(): determina si el elemento está actualmente marcado.
Ejemplo 29.16. Ejemplo de uso del elemento dijit CheckBox
$form->addElement(
'CheckBox',
'foo',
array(
'label' => 'A check box',
'checkedValue' => 'foo',
'uncheckedValue' => 'bar',
'checked' => true,
)
);
Como se indica en la documentación del helper de vista de dijit ComboBox documentación del helper de vista dijit, los ComboBox son un híbrido entre select y entrada de texto, que permiten autocompletar y la capacidad de especificar una alternativa a las opciones proporcionadas. Los FilteringSelect son lo mismo, pero no permiten entrada arbitraria.
![[Note]](images/note.png) |
Los ComboBox devuelven los valores de la etiqueta |
|---|---|
Los ComboBox devuelven los valores de la etiqueta, y no los valores de la opción,
lo cual puede llevar a una desconexión en las expectativas. Por esta razón, los
ComboBox no auto-registran un validador |
Los elementos de formulario ComboBox y FilteringSelect proporcionan accesores y mutadores para
examinar y establecer las opciones de select, así como especificar un
almacén de datos dojo.data (si se usa). Derivan de DijitMulti, lo que
le permite especificar opciones de select mediante los métodos
setMultiOptions() y setMultiOption().
Además, están disponibles los siguientes métodos:
getStoreInfo(): obtiene toda la información del almacén de datos actualmente establecida. Devuelve un array vacío si actualmente no hay ningún dato establecido.setStoreId($identifier): establece la variable identificadora del almacén (normalmente referida por el atributo 'jsId' en Dojo). Esto debe ser un nombre de variable de javascript válido.getStoreId(): recupera el nombre de la variable identificadora del almacén.setStoreType($dojoType): establece la clase del almacén de datos a usar; por ejemplo, "dojo.data.ItemFileReadStore".getStoreType(): obtiene la clase de almacén de datos de dojo a usar.setStoreParams(array $params): establece cualquier parámetro usado para configurar el objeto de almacén de datos. Como ejemplo, el almacén de datos dojo.data.ItemFileReadStore esperaría un parámetro 'url' que apunte a una ubicación que devolvería el objeto dojo.data.getStoreParams(): obtiene cualquier parámetro del almacén de datos actualmente establecido; si no hay ninguno, se devuelve un array vacío.setAutocomplete($flag): indica si el elemento seleccionado se usará o no cuando el usuario abandone el elemento.getAutocomplete(): obtiene el valor del indicador de autocompletar.
Por defecto, si no se registra ningún almacén dojo.data con el elemento,
este elemento registra un validador InArray que
valida contra las claves del array de opciones registradas. Puede
deshabilitar este comportamiento llamando a
setRegisterInArrayValidator(false), o pasando un
valor FALSE a la clave de configuración
registerInArrayValidator.
Ejemplo 29.17. Uso del elemento dijit ComboBox como entrada select
$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 29.18. Uso del elemento dijit ComboBox con almacén de datos
$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 lugar de ComboBox.
CurrencyTextBox está pensado principalmente para soportar entrada de moneda. La moneda puede estar localizada, y puede soportar valores tanto fraccionarios como no fraccionarios.
Internamente, CurrencyTextBox deriva de NumberTextBox, ValidationTextBox, y TextBox; todos los métodos disponibles para esas clases están disponibles. Además, se pueden usar los siguientes métodos de restricción:
setCurrency($currency): establece el tipo de moneda a usar; debe seguir la especificación ISO-4217.getCurrency(): recupera el tipo de moneda actual.setSymbol($symbol): establece el símbolo de moneda ISO-4217 de 3 letras a usar.getSymbol(): obtiene el símbolo de moneda actual.setFractional($flag): establece si la moneda debe permitir o no valores fraccionarios.getFractional(): recupera el estado del indicador fraccionario.
Ejemplo 29.19. Ejemplo de uso del elemento dijit CurrencyTextBox
$form->addElement(
'CurrencyTextBox',
'foo',
array(
'label' => 'Currency:',
'required' => true,
'currency' => 'USD',
'invalidMessage' => 'Invalid amount. ' .
'Include dollar sign, commas, and cents.',
'fractional' => false,
)
);
DateTextBox proporciona un desplegable de calendario para seleccionar una fecha, así como validación y formateo de fecha en el lado del cliente.
Internamente, DateTextBox deriva de ValidationTextBox y TextBox; todos los métodos disponibles para esas clases están disponibles. Además, los siguientes métodos se pueden usar para establecer restricciones individuales:
setAmPm($flag)ygetAmPm(): si se deben usar o no las cadenas AM o PM en las horas.setStrict($flag)ygetStrict(): si se debe usar o no una coincidencia estricta de expresión regular al validar la entrada. Si esFALSE, que es el valor por defecto, será indulgente con los espacios en blanco y algunas abreviaturas.setLocale($locale)ygetLocale(): establece y recupera la configuración regional a usar con este elemento específico.setDatePattern($pattern)ygetDatePattern(): proporciona y recupera el patrón unicode de formato de fecha para formatear la fecha.setFormatLength($formatLength)ygetFormatLength(): proporciona y recupera el tipo de longitud de formato a usar; debe ser uno de "long", "short", "medium" o "full".setSelector($selector)ygetSelector(): proporciona y recupera el estilo del selector; debe ser "date" o "time".
Ejemplo 29.20. Ejemplo de uso del elemento dijit DateTextBox
$form->addElement(
'DateTextBox',
'foo',
array(
'label' => 'Date:',
'required' => true,
'invalidMessage' => 'Invalid date specified.',
'formatLength' => 'long',
)
);
Editor proporciona un editor WYSIWYG que se puede usar tanto para crear como editar contenido HTML enriquecido. dijit.Editor es conectable y se puede extender con plugins personalizados si se desea; consulte la documentación de dijit.Editor para más detalles.
El elemento de formulario Editor proporciona varios accesores y mutadores para manipular varios parámetros de dijit, de la siguiente manera:
-
Los captureEvents son eventos que se conectan al área de edición misma. Los siguientes accesores y mutadores están disponibles para manipular eventos de captura:
addCaptureEvent($event)addCaptureEvents(array $events)setCaptureEvents(array $events)getCaptureEvents()hasCaptureEvent($event)removeCaptureEvent($event)clearCaptureEvents()
-
Los events son eventos DOM estándar, como onClick, onKeyUp, etc. Los siguientes accesores y mutadores están disponibles para manipular eventos:
addEvent($event)addEvents(array $events)setEvents(array $events)getEvents()hasEvent($event)removeEvent($event)clearEvents()
-
Los plugins añaden funcionalidad al Editor -- herramientas adicionales para la barra de herramientas, estilos adicionales permitidos, etc. Los siguientes accesores y mutadores están disponibles para manipular plugins:
addPlugin($plugin)addPlugins(array $plugins)setPlugins(array $plugins)getPlugins()hasPlugin($plugin)removePlugin($plugin)clearPlugins()
editActionInterval se usa para agrupar eventos para operaciones de deshacer. Por defecto, este valor es 3 segundos. El método
setEditActionInterval($interval)se puede usar para establecer el valor, mientras quegetEditActionInterval()lo recuperará.focusOnLoad se usa para determinar si este editor en particular recibirá el foco cuando la página se haya cargado. Por defecto, esto es
FALSE. El métodosetFocusOnLoad($flag)se puede usar para establecer el valor, mientras quegetFocusOnLoad()lo recuperará.height especifica la altura del editor; por defecto, esto es 300px. El método
setHeight($height)se puede usar para establecer el valor, mientras quegetHeight()lo recuperará.inheritWidth se usa para determinar si el editor usará el ancho del contenedor padre o simplemente tomará por defecto el 100% del ancho. Por defecto, esto es
FALSE(es decir, llenará el ancho de la ventana). El métodosetInheritWidth($flag)se puede usar para establecer el valor, mientras quegetInheritWidth()lo recuperará.minHeight indica la altura mínima del editor; por defecto, esto es 1em. El método
setMinHeight($height)se puede usar para establecer el valor, mientras quegetMinHeight()lo recuperará.-
Las styleSheets indican qué hojas de estilo CSS adicionales se deben usar para afectar la visualización del Editor. Por defecto, no se registra ninguna, y hereda los estilos de la página. Los siguientes accesores y mutadores están disponibles para manipular las hojas de estilo del editor:
addStyleSheet($styleSheet)addStyleSheets(array $styleSheets)setStyleSheets(array $styleSheets)getStyleSheets()hasStyleSheet($styleSheet)removeStyleSheet($styleSheet)clearStyleSheets()
Ejemplo 29.21. Ejemplo de uso del elemento dijit Editor
$form->addElement('editor', 'content', array(
'plugins' => array('undo', '|', 'bold', 'italic'),
'editActionInterval' => 2,
'focusOnLoad' => true,
'height' => '250px',
'inheritWidth' => true,
'styleSheets' => array('/js/custom/editor.css'),
));
|
El Dijit Editor usa div por defecto |
|---|---|
|
El dijit Editor usa un DIV HTML por defecto. La documentación de dijit._editor.RichText indica que construirlo sobre un TEXTAREA HTML puede tener potencialmente implicaciones de seguridad.
Dicho esto, puede haber ocasiones en las que desee un widget Editor que pueda degradarse
elegantemente a un TEXTAREA. En tales situaciones, puede hacerlo
estableciendo la propiedad degrade a
// 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 proporciona un widget deslizante de interfaz para seleccionar un valor numérico dentro de un rango. Internamente, establece el valor de un elemento oculto que se envía con el formulario.
HorizontalSlider deriva del elemento dijit Slider abstracto. Además, tiene una variedad de métodos para establecer y configurar reglas y etiquetas de reglas del deslizador.
setTopDecorationDijit($dijit)ysetBottomDecorationDijit($dijit): establece el nombre del dijit a usar para la parte superior o inferior del deslizador. Esto no debe incluir el prefijo "dijit.form.", sino solo el nombre final -- uno de "HorizontalRule" o "HorizontalRuleLabels".setTopDecorationContainer($container)ysetBottomDecorationContainer($container): especifica el nombre a usar para el elemento contenedor de las reglas; por ejemplo, 'topRule', 'topContainer', etc.setTopDecorationLabels(array $labels)ysetBottomDecorationLabels(array $labels): establece las etiquetas a usar para uno de los tipos de dijit RuleLabels. Estos deben ser un array indexado; especifique un único espacio vacío para omitir una posición de etiqueta dada (como el principio o el final).setTopDecorationParams(array $params)ysetBottomDecorationParams(array $params): parámetros de dijit a usar al configurar el dijit Rule o RuleLabels dado.setTopDecorationAttribs(array $attribs)ysetBottomDecorationAttribs(array $attribs): atributos HTML a especificar para el contenedor de elemento HTML Rule o RuleLabels dado.getTopDecoration()ygetBottomDecoration(): recupera todos los metadatos para una definición Rule o RuleLabels dada, tal como se proporciona con los mutadores anteriores.
Ejemplo 29.22. Ejemplo de uso del elemento dijit HorizontalSlider
Lo siguiente creará una selección de deslizador horizontal con valores enteros que van de -10 a 10. La parte superior tendrá etiquetas en las marcas del 20%, 40%, 60% y 80%. La parte inferior tendrá reglas en 0, 50% y 100%. Cada vez que se cambia el valor, el elemento oculto que almacena el valor se actualizará.
$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;',
),
),
)
);
Un number spinner es un elemento de texto para introducir valores numéricos; también incluye elementos para incrementar y decrementar el valor en una cantidad determinada.
Están disponibles los siguientes métodos:
setDefaultTimeout($timeout)ygetDefaultTimeout(): establece y recupera el tiempo de espera por defecto, en milisegundos, entre el momento en que se mantiene presionado el botón y el momento en que se cambia el valor.setTimeoutChangeRate($rate)ygetTimeoutChangeRate(): establece y recupera la velocidad, en milisegundos, a la que se realizarán cambios cuando un botón se mantiene presionado.setLargeDelta($delta)ygetLargeDelta(): establece y recupera la cantidad por la que debe cambiar el valor numérico cuando se mantiene presionado un botón.setSmallDelta($delta)ygetSmallDelta(): establece y recupera el delta por el cual debe cambiar el número cuando se presiona un botón una vez.setIntermediateChanges($flag)ygetIntermediateChanges(): establece y recupera el indicador que señala si cada cambio de valor debe mostrarse o no cuando se mantiene presionado un botón.setRangeMessage($message)ygetRangeMessage(): establece y recupera el mensaje que indica el rango de valores disponibles.setMin($value)ygetMin(): establece y recupera el valor mínimo posible.setMax($value)ygetMax(): establece y recupera el valor máximo posible.
Ejemplo 29.23. Ejemplo de uso del elemento dijit NumberSpinner
$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,
)
);
Un number text box es un elemento de texto para introducir valores numéricos; a diferencia de NumberSpinner, los números se introducen manualmente. Se pueden proporcionar validaciones y restricciones para garantizar que el número permanezca dentro de un rango o formato particular.
Internamente, NumberTextBox deriva de ValidationTextBox y TextBox; todos los métodos disponibles para esas clases están disponibles. Además, los siguientes métodos se pueden usar para establecer restricciones individuales:
setLocale($locale)ygetLocale(): especifica y recupera una configuración regional específica o alternativa a usar con este dijit.setPattern($pattern)ygetPattern(): establece y recupera un formato de patrón numérico a usar para formatear el número.setType($type)ygetType(): establece y recupera el tipo de formato numérico a usar (debe ser uno de 'decimal', 'percent' o 'currency').setPlaces($places)ygetPlaces(): establece y recupera el número de decimales a soportar.setStrict($flag)ygetStrict(): establece y recupera el valor del indicador strict, que indica cuánta flexibilidad se permite en relación a los espacios en blanco y los caracteres no numéricos.
Ejemplo 29.24. Ejemplo de uso del elemento dijit NumberTextBox
$form->addElement(
'NumberTextBox',
'elevation',
array(
'label' => 'NumberTextBox',
'required' => true,
'invalidMessage' => 'Invalid elevation.',
'places' => 0,
'constraints' => array(
'min' => -20000,
'max' => 20000,
),
)
);
PasswordTextBox es simplemente un ValidationTextBox que está vinculado a una entrada de contraseña; su único propósito es permitir una entrada de texto con tema dijit para contraseñas que también proporciona validación en el lado del cliente.
Internamente, PasswordTextBox deriva de ValidationTextBox y TextBox; todos los métodos disponibles para esas clases están disponibles.
Ejemplo 29.25. Ejemplo de uso del elemento dijit PasswordTextBox
$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 envuelve elementos de entrada radio estándar para proporcionar una apariencia consistente con otros dijits de dojo.
RadioButton deriva de DijitMulti, lo que
le permite especificar opciones de select mediante los métodos
setMultiOptions() y setMultiOption().
Por defecto, este elemento registra un validador InArray
que valida contra las claves del array de opciones registradas. Puede
deshabilitar este comportamiento llamando a
setRegisterInArrayValidator(false), o pasando un
valor FALSE a la clave de configuración
registerInArrayValidator.
Ejemplo 29.26. Ejemplo de uso del elemento dijit RadioButton
$form->addElement(
'RadioButton',
'foo',
array(
'label' => 'RadioButton',
'multiOptions' => array(
'foo' => 'Foo',
'bar' => 'Bar',
'baz' => 'Baz',
),
'value' => 'bar',
)
);
SimpleTextarea actúa principalmente como un textarea HTML estándar. Sin embargo, no soporta ni la configuración rows ni cols. En su lugar, el ancho del textarea debe especificarse usando medidas CSS estándar. A diferencia de Textarea, no crecerá automáticamente
Ejemplo 29.27. Ejemplo de uso del elemento dijit SimpleTextarea
$form->addElement(
'SimpleTextarea',
'simpletextarea',
array(
'label' => 'SimpleTextarea',
'required' => true,
'style' => 'width: 80em; height: 25em;',
)
);
Slider es un elemento abstracto del cual derivan HorizontalSlider y VerticalSlider. Expone varios métodos comunes para configurar sus deslizadores, incluyendo:
setClickSelect($flag)ygetClickSelect(): establece y recupera el indicador que señala si al hacer clic en el deslizador se cambia o no el valor.setIntermediateChanges($flag)ygetIntermediateChanges(): establece y recupera el indicador que señala si el dijit enviará o no una notificación en cada evento de cambio del deslizador.setShowButtons($flag)ygetShowButtons(): establece y recupera el indicador que señala si se mostrarán o no botones en cada extremo; si es así, el usuario puede hacer clic en ellos para cambiar el valor del deslizador.setDiscreteValues($value)ygetDiscreteValues(): establece y recupera el número de valores discretos representados por el deslizador.setMaximum($value)ygetMaximum(): establece el valor máximo del deslizador.setMinimum($value)ygetMinimum(): establece el valor mínimo del deslizador.setPageIncrement($value)ygetPageIncrement(): establece la cantidad por la que el deslizador cambiará con eventos de teclado.
Se proporciona un ejemplo de uso con cada clase concreta que lo extiende.
Aunque no hay ningún Dijit llamado SubmitButton, incluimos uno aquí para proporcionar un dijit de botón capaz de enviar un formulario sin requerir ningún enlace javascript adicional. Funciona exactamente igual que el dijit Button.
Ejemplo 29.28. Ejemplo de uso del elemento dijit SubmitButton
$form->addElement(
'SubmitButton',
'foo',
array(
'required' => false,
'ignore' => true,
'label' => 'Submit Button!',
)
);
TextBox se incluye principalmente para proporcionar una entrada de texto con apariencia consistente con los demás dijits. Sin embargo, también incluye algunas capacidades menores de filtrado y validación, representadas en los siguientes métodos:
setLowercase($flag)ygetLowercase(): establece y recupera el indicador que señala si la entrada debe convertirse o no a minúsculas.setPropercase($flag)ygetPropercase(): establece y recupera el indicador que señala si la entrada debe convertirse o no a mayúscula inicial (Proper Case).setUppercase($flag)ygetUppercase(): establece y recupera el indicador que señala si la entrada debe convertirse o no a MAYÚSCULAS.setTrim($flag)ygetTrim(): establece y recupera el indicador que señala si se deben eliminar o no los espacios en blanco iniciales o finales.setMaxLength($length)ygetMaxLength(): establece y recupera la longitud máxima de la entrada.
Ejemplo 29.29. Ejemplo de uso del elemento dijit TextBox
$form->addElement(
'TextBox',
'foo',
array(
'value' => 'some text',
'label' => 'TextBox',
'trim' => true,
'propercase' => true,
)
);
Textarea actúa principalmente como un textarea HTML estándar. Sin embargo, no soporta ni la configuración rows ni cols. En su lugar, el ancho del textarea debe especificarse usando medidas CSS estándar; rows debe omitirse por completo. El textarea entonces crecerá verticalmente a medida que se añade texto.
Ejemplo 29.30. Ejemplo de uso del elemento dijit Textarea
$form->addElement(
'Textarea',
'textarea',
array(
'label' => 'Textarea',
'required' => true,
'style' => 'width: 200px;',
)
);
TimeTextBox es una entrada de texto que proporciona un desplegable para seleccionar una hora. El desplegable puede configurarse para mostrar una determinada ventana de tiempo, con incrementos especificados.
Internamente, TimeTextBox deriva de DateTextBox, ValidationTextBox y TextBox; todos los métodos disponibles para esas clases están disponibles. Además, los siguientes métodos se pueden usar para establecer restricciones individuales:
setTimePattern($pattern)ygetTimePattern(): establece y recupera el patrón unicode de formato de hora para formatear la hora.setClickableIncrement($format)ygetClickableIncrement(): establece la cadena ISO_8601 que representa la cantidad en que se incrementa cada elemento clicable en el selector de hora.setVisibleIncrement($format)ygetVisibleIncrement(): establece el incremento visible en el selector de hora; debe seguir los formatosISO_8601.setVisibleRange($format)ygetVisibleRange(): establece y recupera el rango de tiempo visible en el selector de hora en un momento dado; debe seguir los formatosISO_8601.
Ejemplo 29.31. Ejemplo de uso del elemento dijit TimeTextBox
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 proporciona la capacidad de añadir validaciones y restricciones a una entrada de texto. Internamente, deriva de TextBox, y añade los siguientes accesores y mutadores para manipular parámetros de dijit:
setInvalidMessage($message)ygetInvalidMessage(): establece y recupera el mensaje emergente a mostrar cuando el valor no valida.setPromptMessage($message)ygetPromptMessage(): establece y recupera el mensaje emergente a mostrar para el uso del elemento.setRegExp($regexp)ygetRegExp(): establece y recupera la expresión regular a usar para validar el elemento. La expresión regular no necesita delimitadores (a diferencia de la familia de funciones preg* de PHP).setConstraint($key, $value)ygetConstraint($key): establece y recupera restricciones adicionales a usar al validar el elemento; usado principalmente con subclases. Las restricciones se almacenan en la clave 'constraints' de los parámetros de dijit.setConstraints(array $constraints)ygetConstraints(): establece y recupera restricciones individuales a usar al validar el elemento; usado principalmente con subclases.hasConstraint($key): comprueba si existe una restricción dada.removeConstraint($key)yclearConstraints(): elimina una restricción individual o todas las restricciones del elemento.
Ejemplo 29.32. Ejemplo de uso del elemento dijit ValidationTextBox
Lo siguiente creará un ValidationTextBox que requiere una única cadena formada solo por caracteres de palabra (es decir, sin espacios, la mayoría de la puntuación no es válida).
$form->addElement(
'ValidationTextBox',
'foo',
array(
'label' => 'ValidationTextBox',
'required' => true,
'regExp' => '[\w]+',
'invalidMessage' => 'Invalid non-space text.',
)
);
VerticalSlider es el hermano de HorizontalSlider, y funciona en todos los aspectos como ese elemento. La única diferencia real es que los métodos 'top*' y 'bottom*' se reemplazan por 'left*' y 'right*', y en lugar de usar HorizontalRule y HorizontalRuleLabels, se deben usar VerticalRule y VerticalRuleLabels.
Ejemplo 29.33. Ejemplo de uso del elemento dijit VerticalSlider
Lo siguiente creará una selección de deslizador vertical con valores enteros que van de -10 a 10. La izquierda tendrá etiquetas en las marcas del 20%, 40%, 60% y 80%. La derecha tendrá reglas en 0, 50% y 100%. Cada vez que se cambia el valor, el elemento oculto que almacena el valor se actualizará.
$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%',
),
)
);
Ejemplo 29.34. Uso de Zend_Dojo_Form
La forma más fácil de utilizar Dojo con Zend_Form es
utilizar Zend_Dojo_Form, ya sea mediante uso directo o
extendiéndolo. Este ejemplo muestra la extensión de Zend_Dojo_Form, y
muestra el uso de todos los elementos de dijit. Crea cuatro subformularios, y
decora el formulario para utilizar un TabContainer, mostrando cada subformulario
en su propia pestaña.
class My_Form_Test extends Zend_Dojo_Form
{
/**
* Options to use with select elements
*/
protected $_selectOptions = array(
'red' => 'Rouge',
'blue' => 'Bleu',
'white' => 'Blanc',
'orange' => 'Orange',
'black' => 'Noir',
'green' => 'Vert',
);
/**
* Form initialization
*
* @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 29.35. Modificar un formulario existente para utilizar Dojo
Los formularios existentes también se pueden modificar para utilizar Dojo, mediante
el método estático Zend_Dojo::enableForm().
Este primer ejemplo muestra cómo decorar una instancia de formulario 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 ajuste en la inicialización de su formulario:
class My_Custom_Form extends Zend_Form
{
public function init()
{
Zend_Dojo::enableForm($this);
// ...
}
}
Por supuesto, si puede hacer eso... podría y debería simplemente modificar
la clase para que herede de Zend_Dojo_Form, que es un reemplazo directo
de Zend_Form que ya está habilitado para Dojo...