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

<?xml version="1.0" encoding="UTF-8"?>
<!-- EN-Revision: 15103 -->
<!-- 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>
                        <methodname>$id</methodname>: el nombre del contenedor o el DOM ID.
                </para></listitem>

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

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

                <listitem><para>
                        <methodname>$attribs</methodname> (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 <methodname>$id</methodname> 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>
                        <methodname>$id</methodname>: el nombre del contenedor o el DOM ID.
                </para></listitem>

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

                <listitem><para>
                        <methodname>$content</methodname> (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>
                        <methodname>$id</methodname>: el nombre del elemento o el DOM ID.
                </para></listitem>

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

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

                <listitem><para>
                        <methodname>$attribs</methodname> (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 <methodname>$id</methodname> 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 
            <methodname>string ($id = null, $content = '', array $params =
                array(), array $attribs = array())</methodname>. 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>
                    <methodname>captureStart($id, array $params = array(), array $attribs = array())</methodname>:
                    inicia la captura del contenido a incluir en un contenedor.
                    <methodname>$params</methodname> hace referencia a dijit params para 
                    utilizar con el contenedor, mientras que <methodname>$attribs</methodname> 
                    se refiere a cualquier atributo general HTML 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.
                    <methodname>$id</methodname> 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 <methodname>$checkedOptions</methodname>, 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 <methodname>$checkedOptions</methodname> 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 <methodname>$options</methodname>; si lo 
                    hay, ComboBox será presentado como un <methodname>select</methodname>. 
                    Note también que la <emphasis>label values</emphasis> del 
                    array <methodname>$options</methodname> 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 
                    <methodname>input</methodname>, y traerá sus opciones vía ese datastore.
                </para>

                <para>
                    Para especificar un datastore, proporcionar una de las 
                    siguientes <methodname>$params</methodname> 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 PHP 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>: dijit.Editor. Proporciona un 
                    editor WYSIWYG mediante el cual los usuarios pueden crear o 
                    editar el contenido. <methodname>dijit.Editor</methodname> 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>
            </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,
                    <methodname>$options</methodname>, un array asociativo de pares 
                    valor/etiqueta utilizado como opciones de radio. 
                    También puede pasar estos como la clave <methodname>options</methodname> 
                    de <methodname>$attribs</methodname>. 
                </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 <methodname>CustomDijit</methodname>.
        </para>

        <para>
            La API 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>
            <methodname>CustomDijit</methodname> extiende la base del ayudante de vista 
            <methodname>DijitContainer</methodname>, 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 <methodname>CustomDijit</methodname>.
            </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 API que 
                los dijits oficiales, utilizar o extender <methodname>CustomDijit</methodname> 
                debería funcionar correctamente.
            </para>
        </example>
    </sect3>
</sect2>
<!--
vim:se ts=4 sw=4 et:
-->