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:
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 de Uso del Elemento Button dijitaddElement(
'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 de Uso de Elementos CheckBox dijitaddElement(
'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.
Elemento de ComboBox dijit Usado como select inputaddElement(
'ComboBox',
'foo',
array(
'label' => 'ComboBox (select)',
'value' => 'blue',
'autocomplete' => false,
'multiOptions' => array(
'red' => 'Rouge',
'blue' => 'Bleu',
'white' => 'Blanc',
'orange' => 'Orange',
'black' => 'Noir',
'green' => 'Vert',
),
)
);
]]>Elemento de ComboBox dijit Usado con datastoreaddElement(
'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-4217getCurrency(): 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 de Uso del Elemento CurrencyTextBox dijitaddElement(
'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 de Uso del Elemento DateTextBox dijitaddElement(
'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 de Uso del Elemento Editor dijitaddElement('editor', 'content', array(
'plugins' => array('undo', '|', 'bold', 'italic'),
'editActionInterval' => 2,
'focusOnLoad' => true,
'height' => '250px',
'inheritWidth' => true,
'styleSheets' => array('/js/custom/editor.css'),
));]>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 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.
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 de Uso del Elemento NumberSpinner dijitaddElement(
'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 de Uso del Elemento NumberTextBox dijitaddElement(
'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 de Uso del Elemento PasswordTextBox dijitaddElement(
'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 de Uso del Elemento RadioButton dijitaddElement(
'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 de Uso del Elemento SimpleTextarea dijitaddElement(
'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 de Uso del Elemento SubmitButton dijitaddElement(
'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 de Uso del Elemento TextBox dijitaddElement(
'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 de Uso del Elemento Textarea dijitaddElement(
'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 de Uso del Elemento TimeTextBox dijit
Lo siguiente creará un TimeTextBox que muestra 2 horas a la vez,
con incrementos de 10 minutos.
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 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).
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 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.
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%',
),
)
);
]]>