repo_zf1/documentation/manual/es/module_specs/Zend_Dojo-View-Helpers.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- EN-Revision: 20176 -->
    <!-- Reviewed: no -->
<sect2 id="zend.dojo.view.dijit">
    <title>Ayudantes de Vistas Específicos de Dijit</title>

    <para>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).</para>

    <para>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:</para>

    <itemizedlist>
        <listitem>
            <para>
                <emphasis>Layout Containers</emphasis> : 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: </para>

            <itemizedlist>
                <listitem>
                    <para>
                        <varname>$id</varname> : el nombre del contenedor o el
                        DOM ID. </para>
                </listitem>

                <listitem>
                    <para>
                        <varname>$content</varname> : el contenido a envolver en
                        el contenedor esquematizado. </para>
                </listitem>

                <listitem>
                    <para>
                        <varname>$params</varname> (opcional): parámetros
                        específicos de dijit. Básicamente, cualquier atributo no
                            <acronym>HTML</acronym> que pueda utilizarse para
                        configurar el esquema del contenedor dijit. </para>
                </listitem>

                <listitem>
                    <para>
                        <varname>$attribs</varname> (optional): cualquier de los
                        otros atributos <acronym>HTML</acronym> 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 <varname>$id</varname> será
                        utilizado por su nombre. </para>
                </listitem>
            </itemizedlist>

            <para>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.</para>
        </listitem>

        <listitem>
            <para>
                <emphasis>Form Dijit</emphasis> : 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: </para>

            <itemizedlist>
                <listitem>
                    <para>
                        <varname>$id</varname> : el nombre del contenedor o el
                        DOM ID. </para>
                </listitem>

                <listitem>
                    <para>
                        <varname>$attribs</varname> (opcional): cualquier otro
                        de los atributos <acronym>HTML</acronym> que deberían
                        ser utilizados para mostrar el div del contenedor.
                    </para>
                </listitem>

                <listitem>
                    <para>
                        <varname>$content</varname> (opcional): el contenido a
                        envolver en el form. Si no se pasa ninguno, se utilizará
                        un string vacío. </para>
                </listitem>
            </itemizedlist>

            <para> El orden de los argumentos varía de los demás dijits a fin de
                mantener la compatibilidad con el standard
                    <methodname>form()</methodname> del ayudante de vista.
            </para>
        </listitem>

        <listitem>
            <para>
                <emphasis>Elementos del Form</emphasis> : éstos están diseñados
                para ser consumidos con <classname>Zend_Form</classname> , pero
                pueden ser utilizados standalone también en sus scripts de
                vista. Cada elemento de ayudante de vista dijit espera los
                siguientes argumentos: </para>

            <itemizedlist>
                <listitem>
                    <para>
                        <varname>$id</varname> : el nombre del elemento o el DOM
                        ID. </para>
                </listitem>

                <listitem>
                    <para>
                        <varname>$value</varname> (opcional): el valor actual de
                        ese elemento. </para>
                </listitem>

                <listitem>
                    <para>
                        <varname>$params</varname> (opcional): parámetros
                        específicos de dijit. Básicamente, cualquier atributo no
                            <acronym>HTML</acronym> que pueda utilizarse para
                        configurar un dijit. </para>
                </listitem>

                <listitem>
                    <para>
                        <varname>$attribs</varname> (opcional): cualquiera de
                        los otros atributos adicionales <acronym>HTML</acronym>
                        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 <varname>$id</varname> será
                        utilizado por su nombre. </para>
                </listitem>
            </itemizedlist>

            <para>Algunos de los elementos requieren más argumentos; esto se
                observó con el elemento individual ayudante de descripciones.
            </para>
        </listitem>
    </itemizedlist>

    <para>Con el fin de utilizar estos ayudantes de vista, necesita registrar el
        path a los ayudantes de vista dojo con su objeto vista.</para>

    <example id="zend.dojo.view.dijit.prefixpath">
        <title>Registrando el Prefijo del Path al Ayudante de Vista de
            Dojo</title>

        <programlisting language="php"><![CDATA[
$view->addHelperPath('Zend/Dojo/View/Helper', 'Zend_Dojo_View_Helper');
]]></programlisting>
    </example>

    <sect3 id="zend.dojo.view.dijit.layout">
        <title>Elementos del Esquema Dijit</title>

        <para> La familia de elementos dijit.layout son para crear esquemas
            personalizados y previsibles para su sitio. Para cualquier pregunta
            sobre el uso general, <ulink
                url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout"
                > lea más sobre ellos en el manual de Dojo</ulink> . </para>

        <para> Todos los elementos de los esquemas dijit tienen la firma
                <command>string ($id = null, $content = '', array $params =
                array(), array $attribs = array())</command> . En todos los
            casos, si no pasa argumentos, será devuelto el mismo objeto
            ayudante. Esto le da acceso a los métodos
                <methodname>captureStart()</methodname> y
                <methodname>captureEnd()</methodname> , que permiten capturar
            contenido en lugar de pasarlo al esquema del contenedor. </para>

        <itemizedlist>
            <listitem>
                <para>
                    <emphasis>AccordionContainer</emphasis> :
                    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. </para>

                <programlisting language="php"><![CDATA[
<?php echo $view->accordionContainer(
    'foo',
    $content,
    array(
        'duration' => 200,
    ),
    array(
        'style' => 'width: 200px; height: 300px;',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>AccordionPane</emphasis> :
                    dijit.layout.AccordionPane. Para su uso en
                    AccordionContainer. </para>

                <programlisting language="php"><![CDATA[
<?php echo $view->accordionPane(
    'foo',
    $content,
    array(
        'title' => 'Pane Title',
    ),
    array(
        'style' => 'background-color: lightgray;',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>BorderContainer</emphasis> :
                    dijit.layout.BorderContainer. Logra diseños con cuadros
                    opcionalmente redimensionables como se puede ver en una
                    aplicación tradicional. </para>

                <programlisting language="php"><![CDATA[
<?php echo $view->borderContainer(
    'foo',
    $content,
    array(
        'design' => 'headline',
    ),
    array(
        'style' => 'width: 100%; height: 100%',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>ContentPane</emphasis> : dijit.layout.ContentPane.
                    Usarlo dentro de cualquier contenedor excepto
                    AccordionContainer. </para>

                <programlisting language="php"><![CDATA[
<?php echo $view->contentPane(
    'foo',
    $content,
    array(
        'title'  => 'Pane Title',
        'region' => 'left',
    ),
    array(
        'style' => 'width: 120px; background-color: lightgray;',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>SplitContainer</emphasis> :
                    dijit.layout.SplitContainer. Permite cuadros de contenido
                    redimensionables, discontinuado en Dojo en favor de
                    BorderContainer. </para>

                <programlisting language="php"><![CDATA[
<?php echo $view->splitContainer(
    'foo',
    $content,
    array(
        'orientation'  => 'horizontal',
        'sizerWidth'   => 7,
        'activeSizing' => true,
    ),
    array(
        'style' => 'width: 400px; height: 500px;',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>StackContainer</emphasis> :
                    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. </para>

                <programlisting language="php"><![CDATA[
<?php echo $view->stackContainer(
    'foo',
    $content,
    array(),
    array(
        'style' => 'width: 400px; height: 500px; border: 1px;',
    ),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>TabContainer</emphasis> :
                    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. </para>

                <programlisting language="php"><![CDATA[
<?php echo $view->tabContainer(
    'foo',
    $content,
    array(),
    array(
        'style' => 'width: 400px; height: 500px; border: 1px;',
    ),
); ?>
]]></programlisting>
            </listitem>
        </itemizedlist>

        <para>Los siguientes métodos de captura están disponibles para todos los
            esquemas de contenedores:</para>

        <itemizedlist>
            <listitem>
                <para>
                    <command>captureStart($id, array $params = array(), array
                        $attribs = array())</command> : inicia la captura del
                    contenido a incluir en un contenedor.
                        <varname>$params</varname> hace referencia a dijit
                    params para utilizar con el contenedor, mientras que
                        <varname>$attribs</varname> se refiere a cualquier
                    atributo general <acronym>HTML</acronym> a utilizar. </para>

                <para> Los contenedores pueden estar anidados durante la
                    captura, <emphasis>mientras no hayan IDs
                        duplicados</emphasis> . </para>
            </listitem>

            <listitem>
                <para>
                    <methodname>captureEnd($id)</methodname> : finalizar la
                    captura del contenido a incluir en un contenedor.
                        <varname>$id</varname> debe referirse a un id
                    anteriormente utilizado con la llamada
                        <methodname>captureStart()</methodname> . Regresa el
                    string representando al contenedor y su contenido, como si
                    simplemente pasara el contenido al ayudante mismo. </para>
            </listitem>
        </itemizedlist>

        <example id="zend.dojo.view.dijit.layout.borderexample">
            <title>Ejemplo de esquema de BorderContainer dijit</title>

            <para>Los BorderContainers, particularmente cuando junto a la
                capacidad de capturar contenido, son útiles especialmente para
                lograr efectos complejos de diseño.</para>

            <programlisting language="php"><![CDATA[
$view->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');
]]></programlisting>
        </example>
    </sect3>

    <sect3 id="zend.dojo.view.dijit.form">
        <title>Elementos de Dijit Form</title>

        <para> 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 <ulink
                url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-specialized-input"
                >vea la docuemntación de dijit.form</ulink> . </para>

        <para> Los siguientes elementos de dijit form están disponibles en Zend
            Framework. Excepto cuando se señaló que todos tienen la firma
                <methodname>string ($id,$value = '', array $params = array(),
                array $attribs = array())</methodname> . </para>

        <itemizedlist>
            <listitem>
                <para>
                    <emphasis>Button</emphasis> : dijit.form.Button. Muestra un
                    botón de form. </para>

                <programlisting language="php"><![CDATA[
<?php echo $view->button(
    'foo',
    'Show Me!',
    array('iconClass' => 'myButtons'),
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>CheckBox</emphasis> : dijit.form.CheckBox. Muestra
                    un checkbox. Acepta opcionalmente un quinto argumento, el
                    array <varname>$checkedOptions</varname> , que puede
                    contener: </para>

                <itemizedlist>
                    <listitem>
                        <para>un array indexado con dos valores, un valor
                            verificado y otro no, en ese orden; o</para>
                    </listitem>

                    <listitem>
                        <para>un array asociativo con las claves 'checkedValue'
                            y 'unCheckedValue'.</para>
                    </listitem>
                </itemizedlist>

                <para> Si <varname>$checkedOptions</varname> no fueron
                    suministradas, se asume 1 y 0. </para>

                <programlisting language="php"><![CDATA[
<?php echo $view->checkBox(
    'foo',
    'bar',
    array(),
    array(),
    array('checkedValue' => 'foo', 'unCheckedValue' => 'bar')
); ?>
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>ComboBox</emphasis> : 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 <varname>$options</varname> ; si lo hay, ComboBox
                    será presentado como un <emphasis>select</emphasis> . Note
                    también que la <emphasis>label values</emphasis> del array
                        <varname>$options</varname> será devuelto al form -- y
                    no los valores en si mismos. </para>

                <para> 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
                        <emphasis>input</emphasis> , y traerá sus opciones vía
                    ese datastore. </para>

                <para> Para especificar un datastore, proporcionar una de las
                    siguientes <varname>$params</varname> combinaciones de
                    claves: </para>

                <itemizedlist>
                    <listitem>
                        <para>La clave 'store', con un valor de array; el array
                            debe contener las claves:</para>

                        <itemizedlist>
                            <listitem>
                                <para>
                                    <emphasis>store</emphasis> : el nombre de la
                                    variable javascript representando el
                                    datastore (este podría ser el nombre que
                                    desea para su uso). </para>
                            </listitem>

                            <listitem>
                                <para>
                                    <emphasis>type</emphasis> : el tipo de
                                    datastore a usar; e.g.,
                                    'dojo.data.ItemFileReadStore'. </para>
                            </listitem>

                            <listitem>
                                <para>
                                    <emphasis>params</emphasis> (opcional): un
                                    array asociativo de pares clave/valor a
                                    utilizar para configurar el datastore. El
                                    'url' param es un ejemplo típico. </para>
                            </listitem>
                        </itemizedlist>
                    </listitem>

                    <listitem>
                        <para>Las claves:</para>

                        <itemizedlist>
                            <listitem>
                                <para>
                                    <emphasis>store</emphasis> : un string
                                    indicando el nombre del datastore a usar.
                                </para>
                            </listitem>

                            <listitem>
                                <para>
                                    <emphasis>storeType</emphasis> : un string
                                    indicando el tipo de datastore dojo.data a
                                    usar (e.g., 'dojo.data.ItemFileReadStore').
                                </para>
                            </listitem>

                            <listitem>
                                <para>
                                    <emphasis>storeParams</emphasis> : un array
                                    asociativo de pares clave/valor con los
                                    cuales configurar el datastore. </para>
                            </listitem>
                        </itemizedlist>
                    </listitem>
                </itemizedlist>

                <programlisting language="php"><![CDATA[
// Como un elemento select:
echo $view->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'),
    ),
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>CurrencyTextBox</emphasis> :
                    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. </para>

                <programlisting language="php"><![CDATA[
echo $view->currencyTextBox(
    'foo',
    '$25.00',
    array('currency' => 'USD'),
    array('maxlength' => 20)
);
]]></programlisting>

                <note>
                    <title>Cuestiones con la Construcción</title>

                    <para> Actualmente hay <ulink
                            url="http://trac.dojotoolkit.org/ticket/7183">
                            problemas conocidos con el uso de CurrencyTextBox en
                            la construcción de capas</ulink> . 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: </para>

                    <programlisting language="php"><![CDATA[
$view->headMeta()->appendHttpEquiv('Content-Type',
                                   'text/html; charset=utf-8');
]]></programlisting>

                    <para> Por supuesto, esto significa que necesitará para
                        garantizar que el marcador de posición
                            <methodname>headMeta()</methodname> esté dentro de
                        una sentencia "echo" de <acronym>PHP</acronym> en su
                        script. </para>
                </note>
            </listitem>

            <listitem>
                <para>
                    <emphasis>DateTextBox</emphasis> : 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. </para>

                <programlisting language="php"><![CDATA[
echo $view->dateTextBox(
    'foo',
    '2008-07-11',
    array('required' => true)
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>Editor</emphasis> :
                        <command>dijit.Editor</command>. Proporciona un editor
                    WYSIWYG mediante el cual los usuarios pueden crear o editar
                    el contenido. <command>dijit.Editor</command> es un editor
                    pluggable y extensible, con una variedad de parámetros que
                    puede utilizar para personalización; para más detalles vea
                        <ulink
                        url="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/advanced-editing-and-display/editor-rich-text"
                        >la documentación de dijit.Editor</ulink> . </para>

                <programlisting language="php"><![CDATA[
echo $view->editor('foo');
]]></programlisting>

                <note>
                    <title>Editor Dijit uses div by default</title>

                    <para> The Editor dijit uses an <acronym>HTML</acronym>
                        <acronym>DIV</acronym> by default. The
                            <classname>dijit._editor.RichText</classname>
                        <ulink
                            url="http://api.dojotoolkit.org/jsdoc/HEAD/dijit._editor.RichText"
                            >documentation</ulink> indicates that having it
                        built on an <acronym>HTML</acronym>
                        <acronym>TEXTAREA</acronym> can potentially have
                        security implications. </para>

                    <para> In order to allow graceful degradation in
                        environments where Javascript is unavailable,
                            <classname>Zend_Dojo_View_Helper_Editor</classname>
                        also wraps a <acronym>textarea</acronym> within a
                            <acronym>noscript</acronym> tag; the content of this
                            <acronym>textarea</acronym> will be properly escaped
                        to avoid security vulnerability vectors. </para>
                </note>
            </listitem>

            <listitem>
                <para>
                    <emphasis>FilteringSelect</emphasis> :
                    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. </para>

                <para>Por favor vea la información anterior sobre ComboBox para
                    ejemplos y las opciones disponibles para definir datastores.
                </para>
            </listitem>

            <listitem>
                <para>
                    <emphasis>HorizontalSlider</emphasis> y
                        <emphasis>VerticalSlider</emphasis> :
                    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. </para>

                <para>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:</para>

                <itemizedlist>
                    <listitem>
                        <para>'intermediateChanges' se puede ajustar para
                            indicar cuando disparar o no eventos onChange
                            mientras el handler está siendo arrastrado.</para>
                    </listitem>

                    <listitem>
                        <para>'clickSelect' se establece para permitir hacer
                            click en un lugar del deslizador para ajustar el
                            valor.</para>
                    </listitem>

                    <listitem>
                        <para>'pageIncrement' puede especificar el valor de
                            aumento/decremento cuando se utilizan pageUp y
                            pageDown.</para>
                    </listitem>

                    <listitem>
                        <para>'showButtons' se puede ajustar para permitir ver
                            los botones de ambos extremos del deslizador para
                            manipular el valor.</para>
                    </listitem>
                </itemizedlist>

                <para>La implementación de Zend Framework crea un elemento
                    oculto para guardar el valor del deslizador.</para>

                <para>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:</para>

                <itemizedlist>
                    <listitem>
                        <para>
                            <emphasis>container</emphasis> : nombre del
                            contenedor. </para>
                    </listitem>

                    <listitem>
                        <para>
                            <emphasis>labels</emphasis> (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'. </para>
                    </listitem>

                    <listitem>
                        <para>
                            <emphasis>dijit</emphasis> (opcional): uno de los
                            siguientes será por defecto la dijits Rule (regla)
                            HorizontalRule, HorizontalRuleLabels, VerticalRule,
                            o VerticalRuleLabels. </para>
                    </listitem>

                    <listitem>
                        <para>
                            <emphasis>params</emphasis> (opcional): los dijit
                            params son para configurar la Regla dijit en uso.
                            Los parámetros específicos de estos dijits incluyen: </para>

                        <itemizedlist>
                            <listitem>
                                <para>
                                    <emphasis>container</emphasis> (opcional):
                                    array de parámetros y atributos para el
                                    contenedor de la regla. </para>
                            </listitem>

                            <listitem>
                                <para>
                                    <emphasis>labels</emphasis> (opcional):
                                    array de parámetros y atributos para el
                                    contenedor de la lista de etiquetas. </para>
                            </listitem>
                        </itemizedlist>
                    </listitem>

                    <listitem>
                        <para>
                            <emphasis>attribs</emphasis> (opcional): atributos
                            HTML para utilizar con las reglas/etiquetas. Esto
                            debería seguir el formato de opción
                                <methodname>params</methodname> y ser un array
                            asociativo con las claves 'container' y 'labels'.
                        </para>
                    </listitem>
                </itemizedlist>

                <programlisting language="php"><![CDATA[
echo $view->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;',
                ),
            ),
        ),
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>NumberSpinner</emphasis> :
                    dijit.form.NumberSpinner. Text box numérico para entrada,
                    con botones para incremento y decremento. </para>

                <para>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.</para>

                <programlisting language="php"><![CDATA[
echo $view->numberSpinner(
    'foo',
    5,
    array(
        'min'    => -10,
        'max'    => 10,
        'places' => 2,
    ),
    array(
        'maxlenth' => 3,
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>NumberTextBox</emphasis> :
                    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. </para>

                <programlisting language="php"><![CDATA[
echo $view->numberTextBox(
    'foo',
    5,
    array(
        'places' => 4,
        'type'   => 'percent',
    ),
    array(
        'maxlength' => 20,
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>PasswordTextBox</emphasis> :
                    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. </para>

                <programlisting language="php"><![CDATA[
echo $view->passwordTextBox(
    'foo',
    '',
    array(
        'required' => true,
    ),
    array(
        'maxlength' => 20,
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>RadioButton</emphasis> : 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. </para>

                <para> RadioButton acepta un cuarto argumento como opción,
                        <varname>$options</varname> , un array asociativo de
                    pares valor/etiqueta utilizado como opciones de radio.
                    También puede pasar estos como la clave
                        <methodname>options</methodname> de
                        <varname>$attribs</varname> . </para>

                <programlisting language="php"><![CDATA[
echo $view->radioButton(
    'foo',
    'bar',
    array(),
    array(),
    array(
        'foo' => 'Foo',
        'bar' => 'Bar',
        'baz' => 'Baz',
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>SimpleTextarea</emphasis> :
                    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 <methodname>ems</methodname> o
                    porcentajes del ancho y del alto en su lugar. </para>

                <programlisting language="php"><![CDATA[
echo $view->simpleTextarea(
    'foo',
    'Start writing here...',
    array(),
    array('style' => 'width: 90%; height: 5ems;')
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>SubmitButton</emphasis> : 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. </para>
            </listitem>

            <listitem>
                <para>
                    <emphasis>Textarea</emphasis> : 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. </para>

                <programlisting language="php"><![CDATA[
echo $view->textarea(
    'foo',
    'Start writing here...',
    array(),
    array('style' => 'width: 300px;')
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>TextBox</emphasis> : 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). </para>

                <para>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'.</para>

                <programlisting language="php"><![CDATA[
echo $view->textBox(
    'foo',
    'some text',
    array(
        'trim'       => true,
        'propercase' => true,
        'maxLength'  => 20,
    ),
    array(
        'size' => 20,
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>TimeTextBox</emphasis> : 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. </para>

                <programlisting language="php"><![CDATA[
echo $view->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,
    )
);
]]></programlisting>
            </listitem>

            <listitem>
                <para>
                    <emphasis>ValidationTextBox</emphasis> :
                    dijit.form.ValidateTextBox. Proporciona validaciones del
                    lado del cliente para un elemento de texto. Se hereda desde
                    TextBox. </para>

                <para>Los parámetros comunes de dijit incluyen:</para>

                <itemizedlist>
                    <listitem>
                        <para>
                            <emphasis>invalidMessage</emphasis> : un mensaje
                            para mostrar cuando se ha detectado una entrada
                            inválida. </para>
                    </listitem>

                    <listitem>
                        <para>
                            <emphasis>promptMessage</emphasis> : un mensaje
                            tooltip de ayuda a utilizar. </para>
                    </listitem>

                    <listitem>
                        <para>
                            <emphasis>regExp</emphasis> : una expresión regular
                            a utilizar para validar el texto. La Expresión
                            Regular no requiere de marcadores de límites.
                        </para>
                    </listitem>

                    <listitem>
                        <para>
                            <emphasis>required</emphasis> : 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á. </para>
                    </listitem>
                </itemizedlist>

                <programlisting language="php"><![CDATA[
echo $view->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,
    )
);
]]></programlisting>
            </listitem>
        </itemizedlist>
    </sect3>

    <sect3 id="zend.dojo.view.dijit.custom">
        <title>Dijits Personalizados</title>

        <para> 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 <code>CustomDijit</code>
            . </para>

        <para> La <acronym>API</acronym> del ayudante de vista
                <methodname>CustomDijit</methodname> es exactamente lo que
            cualquier otro dijit es, con una diferencia importante: el tercer
            argumento de "params" <emphasis>debe</emphasis> contener el atributo
            "dojotype". El valor de este atributo debe ser la clase Dijit que
            planea usar. </para>

        <para>
            <code>CustomDijit</code> extiende la base del ayudante de vista
                <code>DijitContainer</code> , que también le permite capturar el
            contenido (utilizando el par de métodos
                <methodname>captureStart()</methodname> /
                <methodname>captureEnd()</methodname> ).
                <methodname>captureStart()</methodname> también espera que pase
            el atributo "dojoType" a su argumento "params". </para>

        <example id="zend.dojo.view.dijit.custom.example">
            <title>Usando CustomDijit para mostrar un
                dojox.layout.ContentPane</title>

            <para>
                <methodname>dojox.layout.ContentPane</methodname> es la
                siguiente generación de iteración de
                    <methodname>dijit.layout.ContentPane</methodname> , 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
                    <code>CustomDijit</code> . </para>

            <para>Para lo más básico, puede hacer lo siguiente:</para>

            <programlisting language="php"><![CDATA[
<?php echo $this->customDijit(
    'foo',
    $content,
    array(
        'dojoType' => 'dojox.layout.ContentPane',
        'title'    => 'Custom pane',
        'region'   => 'center'
    )
); ?>
]]></programlisting>

            <para> Si quiere capturar el contenido en su lugar, simplemente use
                el método <methodname>captureStart()</methodname> , y pase el
                "DojoType" al argumento de "params": </para>

            <programlisting language="php"><![CDATA[
<?php $this->customDijit()->captureStart(
    'foo',
    array(
        'dojoType' => 'dojox.layout.ContentPane',
        'title'    => 'Custom pane',
        'region'   => 'center'
    )
); ?>
This is the content of the pane
<?php echo $this->customDijit()->captureEnd('foo'); ?>
]]></programlisting>

            <para> Fácilmente puede extender también
                    <methodname>CustomDijit</methodname> para crear apoyo para
                sus propios dijits personalizados. Como ejemplo, si extiende
                    <methodname>dijit.layout.ContentPane</methodname> para crear
                su propia clase <methodname>foo.ContentPane</methodname> , puede
                crear el siguiente ayudante de apoyo: </para>

            <programlisting language="php"><![CDATA[
class My_View_Helper_FooContentPane
    extends Zend_Dojo_View_Helper_CustomDijit
{
    protected $_defaultDojoType = 'foo.ContentPane';

    public function fooContentPane(
        $id = null, $value = null,
        array $params = array(), array $attribs = array()
    ) {
        return $this->customDijit($id, $value, $params, $attribs);
    }
}
]]></programlisting>

            <para> Mientras que su dijit personalizado siga la misma base
                    <acronym>API</acronym> que los dijits oficiales, utilizar o
                extender <code>CustomDijit</code> debería funcionar
                correctamente. </para>
        </example>
    </sect3>
</sect2>