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

<?xml version="1.0" encoding="UTF-8"?>
    <!-- EN-Revision: 19418 -->
    <!-- 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
            <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.
                    <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
                    <methodname>select</methodname>
                    .
                    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
                    <methodname>input</methodname>
                    , 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>
                    : 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>

                <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>
                        documentation
                        indicates that having it built on an
                        <acronym>HTML</acronym>
                        <acronym>TEXTAREA</acronym>
                        can
                        potentially have security implications.
                    </para>

                    <para>
                        That said, there may be times when you want an Editor widget that can
                        gracefully degrade to a
                        <acronym>TEXTAREA</acronym>
                        . In such situations, you
                        can do so by passing a boolean
                        <constant>true</constant>
                        value to the
                        <varname>degrade</varname>
                        parameter:
                    </para>

                    <programlisting language="php"><![CDATA[
echo $this->editor('foo', '', array('degrade' => true));
]]></programlisting>
                </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>