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
.
CurrencyTextBoxEl 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,
)
);
]]>DateTextBoxDateTextBox 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'),
));
]]>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
:
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 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;',
),
),
)
);
]]>NumberSpinnerUn 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,
)
);
]]>NumberTextBoxUn 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,
),
)
);
]]>PasswordTextBoxPasswordTextBox 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',
)
);
]]>RadioButtonRadioButton 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!',
)
);
]]>TextBoxTextbox 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;',
)
);
]]>TimeTextBoxTimeTextBox 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 dijitLo 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 dijitLo 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 dijitLo 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%',
),
)
);
]]>