Del manual de Dojo: "Dijit es un sistema de widgets estratificados encima de dojo". Dijit incluye una variedad de diseños y forms de widgets diseñados para proporcionar características de accesibilidad, localización, y un look-and-feel estandarizado (y temable). Zend Framework viene con una variedad de ayudantes de vista que le permiten suministrar y utilizar dijits dentro de sus scripts de vista. Hay tres tipos básicos: Layout Containers : estos están diseñados para ser utilizados dentro de sus scripts de vista o consumidos por los decoradores de forms, para forms, sub forms, y mostrar grupos. Envuelven las distintas clases ofrecidas en dijit.layout. Cada ayudante de vista dijit layout espera los siguientes argumentos: $id : el nombre del contenedor o el DOM ID. $content : el contenido a envolver en el contenedor esquematizado. $params (opcional): parámetros específicos de dijit. Básicamente, cualquier atributo no HTML que pueda utilizarse para configurar el esquema del contenedor dijit. $attribs (optional): cualquier de los otros atributos HTML que deberían utilizarse para mostrar el contenedor div. Si se pasa la clave 'id' en este array, será utilizada para el elemento DOM id del form, y $id será utilizado por su nombre. Si no pasa argumentos a un ayudante de vista de esquemas dijit, el ayudante mismo será devuelto. Esto le permite capturar contenido, que a menudo es una manera más fácil para pasar contenido al esquema del contenedor. Ejemplos de esta funcionalidad se mostrarán más tarde en esta sección. Form Dijit : el dijit dijit.form.Form, aunque no es completamente necesario para su uso con elementos de dijit forms, se asegurará de que si hay un intento de enviar un form que no valide contra las validaciones del lado del cliente, se detendrá el envío y se emitirán mensajes de error de validación. El ayudante de vista dijit espera los siguientes argumentos: $id : el nombre del contenedor o el DOM ID. $attribs (opcional): cualquier otro de los atributos HTML que deberían ser utilizados para mostrar el div del contenedor. $content (opcional): el contenido a envolver en el form. Si no se pasa ninguno, se utilizará un string vacío. El orden de los argumentos varía de los demás dijits a fin de mantener la compatibilidad con el standard form() del ayudante de vista. Elementos del Form : éstos están diseñados para ser consumidos con Zend_Form , pero pueden ser utilizados standalone también en sus scripts de vista. Cada elemento de ayudante de vista dijit espera los siguientes argumentos: $id : el nombre del elemento o el DOM ID. $value (opcional): el valor actual de ese elemento. $params (opcional): parámetros específicos de dijit. Básicamente, cualquier atributo no HTML que pueda utilizarse para configurar un dijit. $attribs (opcional): cualquiera de los otros atributos adicionales HTML que deberían ser utilizados para mostrar el dijit. Si se pasa la clave 'id' en este array, será utilizado por el elemento DOM id del form, y $id será utilizado por su nombre. Algunos de los elementos requieren más argumentos; esto se observó con el elemento individual ayudante de descripciones. Con el fin de utilizar estos ayudantes de vista, necesita registrar el path a los ayudantes de vista dojo con su objeto vista. addHelperPath('Zend/Dojo/View/Helper', 'Zend_Dojo_View_Helper'); ]]> La familia de elementos dijit.layout son para crear esquemas personalizados y previsibles para su sitio. Para cualquier pregunta sobre el uso general, lea más sobre ellos en el manual de Dojo . Todos los elementos de los esquemas dijit tienen la firma string ($id = null, $content = '', array $params = array(), array $attribs = array()) . En todos los casos, si no pasa argumentos, será devuelto el mismo objeto ayudante. Esto le da acceso a los métodos captureStart() y captureEnd() , que permiten capturar contenido en lugar de pasarlo al esquema del contenedor. AccordionContainer : dijit.layout.AccordionContainer. Apilará todos los cuadros juntos verticalmente; con un click en la barra del título de un cuadro, se expandirá y mostrará ese cuadro en particular. accordionContainer( 'foo', $content, array( 'duration' => 200, ), array( 'style' => 'width: 200px; height: 300px;', ), ); ?> ]]> AccordionPane : dijit.layout.AccordionPane. Para su uso en AccordionContainer. accordionPane( 'foo', $content, array( 'title' => 'Pane Title', ), array( 'style' => 'background-color: lightgray;', ), ); ?> ]]> BorderContainer : dijit.layout.BorderContainer. Logra diseños con cuadros opcionalmente redimensionables como se puede ver en una aplicación tradicional. borderContainer( 'foo', $content, array( 'design' => 'headline', ), array( 'style' => 'width: 100%; height: 100%', ), ); ?> ]]> ContentPane : dijit.layout.ContentPane. Usarlo dentro de cualquier contenedor excepto AccordionContainer. contentPane( 'foo', $content, array( 'title' => 'Pane Title', 'region' => 'left', ), array( 'style' => 'width: 120px; background-color: lightgray;', ), ); ?> ]]> SplitContainer : dijit.layout.SplitContainer. Permite cuadros de contenido redimensionables, discontinuado en Dojo en favor de BorderContainer. splitContainer( 'foo', $content, array( 'orientation' => 'horizontal', 'sizerWidth' => 7, 'activeSizing' => true, ), array( 'style' => 'width: 400px; height: 500px;', ), ); ?> ]]> StackContainer : dijit.layout.StackContainer. Todos los cuadros dentro de un StackContainer se colocan en una pila; crea botones o funcionalidades a ser revelados uno a uno. stackContainer( 'foo', $content, array(), array( 'style' => 'width: 400px; height: 500px; border: 1px;', ), ); ?> ]]> TabContainer : dijit.layout.TabContainer. Todos los cuadros dentro de un TabContainer se colocan en una pila, con pestañas colocadas a un lado para cambiar entre ellos. tabContainer( 'foo', $content, array(), array( 'style' => 'width: 400px; height: 500px; border: 1px;', ), ); ?> ]]> Los siguientes métodos de captura están disponibles para todos los esquemas de contenedores: captureStart($id, array $params = array(), array $attribs = array()) : inicia la captura del contenido a incluir en un contenedor. $params hace referencia a dijit params para utilizar con el contenedor, mientras que $attribs se refiere a cualquier atributo general HTML a utilizar. Los contenedores pueden estar anidados durante la captura, mientras no hayan IDs duplicados . captureEnd($id) : finalizar la captura del contenido a incluir en un contenedor. $id debe referirse a un id anteriormente utilizado con la llamada captureStart() . Regresa el string representando al contenedor y su contenido, como si simplemente pasara el contenido al ayudante mismo. Los BorderContainers, particularmente cuando junto a la capacidad de capturar contenido, son útiles especialmente para lograr efectos complejos de diseño. borderContainer()->captureStart('masterLayout', array('design' => 'headline')); echo $view->contentPane( 'menuPane', 'This is the menu pane', array('region' => 'top'), array('style' => 'background-color: darkblue;') ); echo $view->contentPane( 'navPane', 'This is the navigation pane', array('region' => 'left'), array('style' => 'width: 200px; background-color: lightblue;') ); echo $view->contentPane( 'mainPane', 'This is the main content pane area', array('region' => 'center'), array('style' => 'background-color: white;') ); echo $view->contentPane( 'statusPane', 'Status area', array('region' => 'bottom'), array('style' => 'background-color: lightgray;') ); echo $view->borderContainer()->captureEnd('masterLayout'); ]]> la validación de forms en Dojo y los dijits de entrada están en dijit.form.tree. Para más información sobre la utilización de estos elementos, así como los parámetros aceptados, por favor vea la docuemntación de dijit.form . Los siguientes elementos de dijit form están disponibles en Zend Framework. Excepto cuando se señaló que todos tienen la firma string ($id,$value = '', array $params = array(), array $attribs = array()) . Button : dijit.form.Button. Muestra un botón de form. button( 'foo', 'Show Me!', array('iconClass' => 'myButtons'), ); ?> ]]> CheckBox : dijit.form.CheckBox. Muestra un checkbox. Acepta opcionalmente un quinto argumento, el array $checkedOptions , que puede contener: un array indexado con dos valores, un valor verificado y otro no, en ese orden; o un array asociativo con las claves 'checkedValue' y 'unCheckedValue'. Si $checkedOptions no fueron suministradas, se asume 1 y 0. checkBox( 'foo', 'bar', array(), array(), array('checkedValue' => 'foo', 'unCheckedValue' => 'bar') ); ?> ]]> ComboBox : dijit.layout.ComboBox. Los ComboBoxes son un híbrido entre un cuadro de selección y uno de texto con autocompletado. La diferencia fundamental es que puede escribir una opción que no está en la lista de las opciones disponibles, y que todavía considera válido el input. Opcionalmente acepta un quinto argumento, un array asociativo $options ; si lo hay, ComboBox será presentado como un select . Note también que la label values del array $options será devuelto al form -- y no los valores en si mismos. Alternativamente, puede pasar información sobre un datastrore dojo.data para utilizar con el elemento. Si la hay, el ComboBox será presentado como un texto input , y traerá sus opciones vía ese datastore. Para especificar un datastore, proporcionar una de las siguientes $params combinaciones de claves: La clave 'store', con un valor de array; el array debe contener las claves: store : el nombre de la variable javascript representando el datastore (este podría ser el nombre que desea para su uso). type : el tipo de datastore a usar; e.g., 'dojo.data.ItemFileReadStore'. params (opcional): un array asociativo de pares clave/valor a utilizar para configurar el datastore. El 'url' param es un ejemplo típico. Las claves: store : un string indicando el nombre del datastore a usar. storeType : un string indicando el tipo de datastore dojo.data a usar (e.g., 'dojo.data.ItemFileReadStore'). storeParams : un array asociativo de pares clave/valor con los cuales configurar el datastore. comboBox( 'foo', 'bar', array( 'autocomplete' => false, ), array(), array( 'foo' => 'Foo', 'bar' => 'Bar', 'baz' => 'Baz', ) ); // Como en elemento habilitado de dojo.data: echo $view->comboBox( 'foo', 'bar', array( 'autocomplete' => false, 'store' => 'stateStore', 'storeType' => 'dojo.data.ItemFileReadStore', 'storeParams' => array('url' => '/js/states.json'), ), ); ]]> CurrencyTextBox : dijit.form.CurrencyTextBox. Se hereda de ValidationTextBox, y proporciona validación de moneda del lado del cliente. Se espera que el parámetro dijit 'currency' será siempre proporcionado con el código adecuado de 3 caracteres de la moneda. También puede especificar cualquiera de los parámetros dijit válidos para ValidationTextBox y TextBox. currencyTextBox( 'foo', '$25.00', array('currency' => 'USD'), array('maxlength' => 20) ); ]]> Actualmente hay problemas conocidos con el uso de CurrencyTextBox en la construcción de capas . Una conocida solución alternativa es garantizar que el meta tag Content-Type de http-equiv en su documento esté establecido al conjunto de caracteres utf-8, que puede hacerlo llamando a: headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=utf-8'); ]]> Por supuesto, esto significa que necesitará para garantizar que el marcador de posición headMeta() esté dentro de una sentencia "echo" de PHP en su script. DateTextBox : dijit.form.DateTextBox. Es heredada de ValidationTextBox, y ofrece tanto validación de fechas de lado del cliente, así como un calendario desplegable desde el cual elegir una fecha. Puede especificar cualquiera de los parámetros dijit disponibles para ValidationTextBox o TextBox. dateTextBox( 'foo', '2008-07-11', array('required' => true) ); ]]> Editor : dijit.Editor. Proporciona un editor WYSIWYG mediante el cual los usuarios pueden crear o editar el contenido. dijit.Editor es un editor pluggable y extensible, con una variedad de parámetros que puede utilizar para personalización; para más detalles vea la documentación de dijit.Editor . editor('foo'); ]]> 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. In order to allow graceful degradation in environments where Javascript is unavailable, Zend_Dojo_View_Helper_Editor also wraps a textarea within a noscript tag; the content of this textarea will be properly escaped to avoid security vulnerability vectors. FilteringSelect : dijit.form.FilteringSelect. Similar a ComboBox, este es un híbrido de select/text que puede hacer una lista de opciones o aquellos retornados vía un dojo.data datastore. A diferencia de ComboBox, sin embargo, FilteringSelect no permite escribir una opción ni siquieraen en su lista. Además, opera como un select standard en que los valores de opción, no las etiquetas, son devueltos cuando el form se envía. Por favor vea la información anterior sobre ComboBox para ejemplos y las opciones disponibles para definir datastores. HorizontalSlider y VerticalSlider : dijit.form.HorizontalSlider y dijit.form.VerticalSlider. Los sliders permiten a los widgets de UI seleccionar números en un rango dado; las variantes son horizontales y verticales. En lo más elemental, exigen los parámetros dijit 'minimum', 'maximum', y 'discreteValues'. Estos definen el rango de valores. Otras opciones comunes son las siguientes: 'intermediateChanges' se puede ajustar para indicar cuando disparar o no eventos onChange mientras el handler está siendo arrastrado. 'clickSelect' se establece para permitir hacer click en un lugar del deslizador para ajustar el valor. 'pageIncrement' puede especificar el valor de aumento/decremento cuando se utilizan pageUp y pageDown. 'showButtons' se puede ajustar para permitir ver los botones de ambos extremos del deslizador para manipular el valor. La implementación de Zend Framework crea un elemento oculto para guardar el valor del deslizador. Opcionalmente puede desear mostrar una regla o etiquetas para el deslizador. Para hacerlo, se asignará uno o más de los parámetros dijit 'topDecoration' y/o 'bottomDecoration' (HorizontalSlider) o 'leftDecoration' y/o 'rightDecoration' (VerticalSlider). Cada uno de éstos espera las siguientes opciones: container : nombre del contenedor. labels (opcional): un array de etiquetas a utilizar. Use strings vacíos en cualquiera de los extremos para dotar de etiquetas solamente a los valores internos. Es necesario cuando se especifica uno de las variantes dijit 'Labels'. dijit (opcional): uno de los siguientes será por defecto la dijits Rule (regla) HorizontalRule, HorizontalRuleLabels, VerticalRule, o VerticalRuleLabels. params (opcional): los dijit params son para configurar la Regla dijit en uso. Los parámetros específicos de estos dijits incluyen: container (opcional): array de parámetros y atributos para el contenedor de la regla. labels (opcional): array de parámetros y atributos para el contenedor de la lista de etiquetas. attribs (opcional): atributos HTML para utilizar con las reglas/etiquetas. Esto debería seguir el formato de opción params y ser un array asociativo con las claves 'container' y 'labels'. horizontalSlider( 'foo', 1, array( 'minimum' => -10, 'maximum' => 10, 'discreteValues' => 11, 'intermediateChanges' => true, 'showButtons' => true, 'topDecoration' => array( 'container' => 'topContainer' 'dijit' => 'HorizontalRuleLabels', 'labels' => array( ' ', '20%', '40%', '60%', '80%', ' ', ), 'params' => array( 'container' => array( 'style' => 'height:1.2em; font-size=75%;color:gray;', ), 'labels' => array( 'style' => 'height:1em; font-size=75%;color:gray;', ), ), ), 'bottomDecoration' => array( 'container' => 'bottomContainer' 'labels' => array( '0%', '50%', '100%', ), 'params' => array( 'container' => array( 'style' => 'height:1.2em; font-size=75%;color:gray;', ), 'labels' => array( 'style' => 'height:1em; font-size=75%;color:gray;', ), ), ), ) ); ]]> NumberSpinner : dijit.form.NumberSpinner. Text box numérico para entrada, con botones para incremento y decremento. Espera bien un array asociativo del parámetro dijit 'constraints' o simplemente las claves 'min', 'max', y 'places' (estas serían también las entradas esperadas del parámetro de restricciones). 'places' puede ser utilizada para indicar en cuánto se incrementará y decrementará el número giratorio. numberSpinner( 'foo', 5, array( 'min' => -10, 'max' => 10, 'places' => 2, ), array( 'maxlenth' => 3, ) ); ]]> NumberTextBox : dijit.form.NumberTextBox. NumberTextBox ofrece la capacidad de dar formato y mostrar entradas numéricas de una manera localizada, así como validar entradas numéricas, opcionalmente en contra de las restricciones dadas. numberTextBox( 'foo', 5, array( 'places' => 4, 'type' => 'percent', ), array( 'maxlength' => 20, ) ); ]]> PasswordTextBox : dijit.form.ValidationTextBox está atada a una contraseña. PasswordTextBox ofrece la posibilidad de crear una entrada para contraseña que adhiere al actual tema dijit, así como permitir la validación del lado del cliente. passwordTextBox( 'foo', '', array( 'required' => true, ), array( 'maxlength' => 20, ) ); ]]> RadioButton : dijit.form.RadioButton. Una serie de opciones entre las que sólo una puede ser seleccionada. Esta se comporta en todos los sentidos como una de radio normal, pero tiene un look-and-feel consistente con otros dijits. RadioButton acepta un cuarto argumento como opción, $options , un array asociativo de pares valor/etiqueta utilizado como opciones de radio. También puede pasar estos como la clave options de $attribs . radioButton( 'foo', 'bar', array(), array(), array( 'foo' => 'Foo', 'bar' => 'Bar', 'baz' => 'Baz', ) ); ]]> SimpleTextarea : dijit.form.SimpleTextarea. Estos actuarán como textareas normales, pero se estilizan usando el tema actual de dijit. No necesita especificar los atributos ya sea de las filas o de las columnas; use ems o porcentajes del ancho y del alto en su lugar. simpleTextarea( 'foo', 'Start writing here...', array(), array('style' => 'width: 90%; height: 5ems;') ); ]]> SubmitButton : un dijit.form.Button está atado a un elemento de entrada a enviar. Vea el ayudante de vista de Button para más detalles; la diferencia fundamental es que este botón puede enviar un form. Textarea : dijit.form.Textarea. Éstas actuarán como textareas normales, salvo que en lugar de un determinado número de filas, se expanden a medida que el usuario tipea. El ancho debe especificarse mediante una regla de estilo. textarea( 'foo', 'Start writing here...', array(), array('style' => 'width: 300px;') ); ]]> TextBox : dijit.form.TextBox. Este elemento está presente principalmente para proporcionar un look-and-feel común entre los diversos elementos dijit, y a ofrecer funcionalidades de base para otras clases derivadas de TextBox (ValidationTextBox, NumberTextBox, CurrencyTextBox, DateTextBox, y TimeTextBox). El parámetro común de dijit para los flags incluyen 'lowercase' (emitido a minúsculas), 'uppercase' (emitido a mayúsculas), 'propercase' (emitido a Proper Case), y trim (elimina los espacios en blanco iniciales y finales); todos aceptan valores booleanos. Además, puede especificar los parámetros 'size' y 'maxLength'. textBox( 'foo', 'some text', array( 'trim' => true, 'propercase' => true, 'maxLength' => 20, ), array( 'size' => 20, ) ); ]]> TimeTextBox : dijit.form.TimeTextBox. También de la familia TextBox, TimeTextBox proporciona una selección desplazable drop down de la cantidad de veces que un usuario podrá seleccionar. Los parámetros Dijit le permiten especificar el tiempo disponible para incrementos en el select así como un rango visible de veces en disponibilidad. timeTextBox( 'foo', '', array( 'am.pm' => true, 'visibleIncrement' => 'T00:05:00', // 5-minute increments 'visibleRange' => 'T02:00:00', // show 2 hours of increments ), array( 'size' => 20, ) ); ]]> ValidationTextBox : dijit.form.ValidateTextBox. Proporciona validaciones del lado del cliente para un elemento de texto. Se hereda desde TextBox. Los parámetros comunes de dijit incluyen: invalidMessage : un mensaje para mostrar cuando se ha detectado una entrada inválida. promptMessage : un mensaje tooltip de ayuda a utilizar. regExp : una expresión regular a utilizar para validar el texto. La Expresión Regular no requiere de marcadores de límites. required : si el elemento es necesario o no. Si fuera necesario, y el elemento está incrustado en un dijit.form.Form, será marcado como inválido y no se enviará. validationTextBox( 'foo', '', array( 'required' => true, 'regExp' => '[\w]+', 'invalidMessage' => 'No se permiten espacios o caracteres especiales', 'promptMessage' => 'Una palabra consiste de caracteres ' . 'alfanuméricos y underscores solamente', ), array( 'maxlength' => 20, ) ); ]]> Si ahonda mucho en Dojo, se encontrará escribiendo bastantes dijits personalizados, o utilizando dijits experimentales de Dojox. Si bien Zend Framework no puede apoyar a todos los dijit directamente, si proporciona algún apoyo rudimentario para tipos dijit arbitrarios vía el ayudante de vista CustomDijit . La API del ayudante de vista CustomDijit es exactamente lo que cualquier otro dijit es, con una diferencia importante: el tercer argumento de "params" debe contener el atributo "dojotype". El valor de este atributo debe ser la clase Dijit que planea usar. CustomDijit extiende la base del ayudante de vista DijitContainer , que también le permite capturar el contenido (utilizando el par de métodos captureStart() / captureEnd() ). captureStart() también espera que pase el atributo "dojoType" a su argumento "params". dojox.layout.ContentPane es la siguiente generación de iteración de dijit.layout.ContentPane , y proporciona un superconjunto de capacidades de esa clase. Hasta que la funcionalidad se estabilice, seguirá viviendo en Dojox. Sin embargo, si quiere utilizarlo hoy en Zend Framework, puede hacerlo, utilizando el ayudante de vista CustomDijit . Para lo más básico, puede hacer lo siguiente: customDijit( 'foo', $content, array( 'dojoType' => 'dojox.layout.ContentPane', 'title' => 'Custom pane', 'region' => 'center' ) ); ?> ]]> Si quiere capturar el contenido en su lugar, simplemente use el método captureStart() , y pase el "DojoType" al argumento de "params": customDijit()->captureStart( 'foo', array( 'dojoType' => 'dojox.layout.ContentPane', 'title' => 'Custom pane', 'region' => 'center' ) ); ?> This is the content of the pane customDijit()->captureEnd('foo'); ?> ]]> Fácilmente puede extender también CustomDijit para crear apoyo para sus propios dijits personalizados. Como ejemplo, si extiende dijit.layout.ContentPane para crear su propia clase foo.ContentPane , puede crear el siguiente ayudante de apoyo: customDijit($id, $value, $params, $attribs); } } ]]> Mientras que su dijit personalizado siga la misma base API que los dijits oficiales, utilizar o extender CustomDijit debería funcionar correctamente.