Comparar revisiones

Capitulo 3: Introducción a XUL—¿Como construir una interfaz de usuario más intuitiva?

Change Revisions

Revisión 437461:

Revisión 437461 de M1k. el

Revisión 437771:

Revisión 437771 de M1k. el

Título:
Capitulo 3: Introducción a XUL—¿Como construir una interfaz de usuario más intuitiva?
Capitulo 3: Introducción a XUL—¿Como construir una interfaz de usuario más intuitiva?
Enlace amigable (slug):
Firefox_addons_developer_guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI
Firefox_addons_developer_guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI
Contenido:

Revisión 437461
Revisión 437771
n301    <h3 id="Root_elements">n301    <h3 id="Elementos_Nativos">
n314    <h4 id="General_root_elements">n314    <h4 id="Elementos_Nativos_Generales">
n317    <h5 id="window">n317    <h5 id="ventana">
n323    <h5 id="page">n323    <h5 id="pagina">
n329    <h4 id="Root_elements_for_dialog_windows">n329    <h4 id="Elementos_Nativos_para_di.C3.A1logos_de_ventanas">
n332    <h5 id="dialog">n332    <h5 id="di.C3.A1logo">
n341    <h5 id="Buttons_used_in_dialog_windows">n341    <h5 id="Botones_usados_en_di.C3.A1logos_de_ventanas">
n425    <h3 id="Menus">n425    <h3 id="Men.C3.BAs">
n431    <h4 id="Creating_the_menu">n431    <h4 id="Creando_un_men.C3.BA">
n479    <h4 id="Executing_commands_when_selecting_menu_items">n479    <h4 id="Ejecuci.C3.B3n_de_comandos_al_pulsar_sobre_los_iconos
 >">
n486      XUL tambien usa <span id="result_box" lang="es"><span classn486      XUL tambien usa <span id="result_box" lang="es"><span class
>="hps">controladores de eventos</span></span>, pero <span id="res>="hps">controladores de eventos</span></span>, pero <span id="res
>ult_box" lang="es"><span class="hps">también ofrece</span>&nbsp; >ult_box" lang="es"><span class="hps">también ofrece</span>&nbsp; 
>un <span class="hps">controlador de eventos</span> <span class="h>un <span class="hps">controlador de eventos</span> <span class="h
>ps">especiales</span>,</span> <a class="internal" href="/en/XUL/A>ps">especiales</span>,</span> <a class="internal" href="/en/XUL/A
>ttribute/oncommand" title="En/XUL/Attribute/Oncommand"><code>onco>ttribute/oncommand" title="En/XUL/Attribute/Oncommand"><code>onco
>mmand</code>,</a> <span lang="es"><span class="hps">para hacer fr>mmand</code>,</a> <span lang="es"><span class="hps">para hacer fr
>ente a</span> <span class="hps">las acciones</span> <span class=">ente a</span> <span class="hps">las acciones</span> <span class="
>hps">que a menudo tienen</span> <span class="hps">significados es>hps">que a menudo tienen</span> <span class="hps">significados es
>pecíficos</span></span>, <span id="result_box" lang="es"><span cl>pecíficos</span></span>, <span id="result_box" lang="es"><span cl
>ass="hps">como el</span></span> <span id="result_box" lang="es"><>ass="hps">como el</span></span> <span id="result_box" lang="es"><
>span class="hps">clic</span></span> <span id="result_box" lang="e>span class="hps">clic</span></span> <span id="result_box" lang="e
>s"><span class="hps">izquierdo</span>&nbsp; <span class="hps atn">s"><span class="hps">izquierdo</span>&nbsp; <span class="hps atn"
>>del mouse (</span><span>o</span> <span class="hps">derecho en</s>>del mouse (</span><span>o</span> <span class="hps">derecho, en</
>pan> <span class="hps">los sistemas</span> creados <span class="h>span> <span class="hps">los sistemas</span> creados <span class="
>ps">para surdos</span><span class="hps">)</span></span> ó la sele>hps">para surdos</span><span class="hps">)</span></span> ó la sel
>ción con la tecla Enter. La estructura N°10 muestra un ejemplo de>eción con la tecla Enter. La estructura N°10 muestra un ejemplo d
> <span id="result_box" lang="es"><span class="hps">controlador de>e <span id="result_box" lang="es"><span class="hps">controlador d
> eventos "</span></span><code>oncommand</code>" en acción. <span >e eventos "</span></span><code>oncommand</code>" en acción. <span
>id="result_box" lang="es"><span class="hps">Aparte de</span> <spa> id="result_box" lang="es"><span class="hps">Aparte de</span> <sp
>n class="hps">los elementos</span></span> <code>menuitem</code><s>an class="hps">los elementos</span></span> <code>menuitem</code><
>pan id="result_box" lang="es"><span>,</span> <span class="hps">qu>span id="result_box" lang="es"><span>,</span> <span class="hps">q
>e puede ser utilizado</span> <span class="hps">con</span> <span c>ue puede ser utilizado</span> <span class="hps">con</span> <span 
>lass="hps">botones y otros como controles</span> <span class="hps>class="hps">botones y otros como controles</span> <span class="hp
>">de entrada</span><span>.</span></span>>s">de entrada</span><span>.</span></span>
n511    <h5 id="Special_menu_items">n511    <h5 id=".C3.8Dtems_de_men.C3.BA_especiales">
n515      Much like input elements in HTML, <code>menuitem</code> elen515      <span id="result_box" lang="es"><span class="hps">Al igual 
>ments can operate like checkboxes and radio buttons by setting th>que</span> <span class="hps">los elementos de entrada</span> <spa
>eir <a class="internal" href="/en/XUL/Attribute/menuitem.type" ti>n class="hps">en</span> <span class="hps">HTML</span><span>, los 
>tle="En/XUL/Attribute/Menuitem.type"><code>type</code></a> attrib>elementos</span></span> <code>("menuitems")</code> <span id="resu
>utes.>lt_box" lang="es"><span class="hps">pueden funcionar</span> <span
 > class="hps">como</span> <span class="hps">casillas de verificaci
 >ón</span> <span class="hps">ó botones de opciones, según el</span
 >></span> <a class="internal" href="/en/XUL/Attribute/menuitem.typ
 >e" title="En/XUL/Attribute/Menuitem.type"><code>tipo</code></a> <
 >span id="result_box" lang="es"><span class="hps alt-edited">de at
 >ributo</span></span> <span id="result_box" lang="es">estableciend
 >o</span><span id="result_box" lang="es"><span>.</span></span>
n521      Adding <code>type="checkbox"</code> to a <code>menuitem</con521      Agrege <code>type="checkbox"</code> a un elemento <code>("m
>de> element will check that when it is selected, and uncheck it i>enuitems")</code> para verificar cuando éstos son seleccionados, 
>f it is selected again. For an example of menu items with checkbo>y deseleccionar cuando sean seleccionados nuevamente. Para ver un
>xes, see the <em>View</em> menu in Firefox, with items to show or> ejemplo de menú con <span id="result_box" lang="es"><span class=
> hide the toolbar and sidebar. When one has been checked, then th>"hps">casillas de verificación</span></span>, seleccione "<code>v
>e <code>checked="true"</code> attribute is set.>er</code>" en su barra de herramientas de Firefox, <span id="resu
 >lt_box" lang="es"><span class="hps">para mostrar</span> <span cla
 >ss="hps">u ocultar</span> <span class="hps">la barra de herramien
 >tas</span> <span class="hps">y/o la barra lateral</span><span>.</
 >span>&nbsp;</span> Cuando alguno de éstos ha sido seleccionado, s
 >e establece el atributo <code>checked="true"</code> (se activan ó
 > desactivan para cada elemento).
n524      radio buttonn524      botón radio
n527      Assigning <code>type="radio"</code> to multiple <code>menuin527      Agrege <code>type="radio"</code> para múltiples elementos&n
>tem</code> elements and setting them to have the same name attrib>bsp;<code>("menuitems")</code> <span id="result_box" lang="es"><s
>ute groups them so that selecting one deselects all the others, m>pan class="hps alt-edited">y configurar</span> <span class="hps">
>uch like radio buttons in HTML. For an example of this kind of me>que tengan</span> <span class="hps">la misma cantidad de</span> <
>nu item, see the <em>Character Encoding</em> submenu of the View >span class="hps">nombres</span> que <span class="hps">grupos de a
>menu in Firefox. The selected radio botónhas the <code>selected=">tributos</span></span>, nosea que <span id="result_box" lang="es"
>true"</code> attribute set.>><span class="hps">la selección de</span> <span class="hps">uno</
 >span> <span class="hps">anule a</span> <span class="hps">todos lo
 >s demás</span></span>, <span class="short_text" id="result_box" l
 >ang="es"><span class="hps">al igual que</span> <span class="hps">
 >los botones radio de opción</span> <span class="hps">en</span> <s
 >pan class="hps">HTML</span></span>. Para ver un ejemplo de éste t
 >ipo de menú, seleccione el submenú <em>Codificación de caracteres
 ></em> en el menú "<code>ver</code>" en su barra de herramientas d
 >e Firefox. La seleción de un botón radio para establecer el atrib
 >uto <code>select="true"</code> (de selección única entre un grupo
 > de elementos).
n530      Contextual menusn530      &nbsp;menues Contextuales
n533      The <a class="internal" href="/en/XUL/Attribute/context" tin533      El atributo <a href="/en/XUL/Attribute/context" title="En/X
>tle="En/XUL/Attribute/Context"><code>context</code></a> attribute>UL/Attribute/Context"><code>context</code></a> ("Contextual") es 
> is used to display a contextual menu or shortcut menu, that is, >usado para visualizar un menú Contextual ó panel de accesos rápid
>a custom menu that will appear when right-clicking on an element.>os. Es un menú personalizado que se exhibe al hacer clic derecho 
 >sobre un elemento.
534    </p>
535    <p>534    </p>
536      Earlier we placed the <a class="internal" href="/en/XUL/men535    <div class="almost_half_cell" id="gt-res-content">
>upopup" title="En/XUL/Menupopup"><code>menupopup</code></a> child 
> element inside a menu element; here, we use it outside the menu  
>element. Instead, the <code>menupopup</code> element is a direct  
>child of the root element and we invoke it using its <code>id</co 
>de> attribute, which we set as the value for the <code>context</c 
>ode> attribute on any other XUL element. When we right-click on t 
>hat XUL element, we reference that <code>menupopup</code> element 
> by its <code>id</code>, and display its contents as a contextual 
> menu. Jerárquia de instrucciones N°12 shows an example. 
536      <div dir="ltr" style="zoom:1">
537        Anteriormente hemos colocado el elemento hijo <code>menup
 >opup</code> dentro de un menú; aquí, son usados para exhibír un m
 >enú. Encambio, <code>menupopup</code> es directamente empotrado b
 >ajo el elemento nativo y son invocados usando el atributo <code>i
 >d</code>, que son configurados como los valores del <code>menú Co
 >ntextual</code> sobre cualquier otro elemento XUL. Al hacer clic 
 >derecho sobre el elemento XUL, se referencian, <code>menupopup</c
 >ode> con&nbsp; <code>id</code>, y visualisa su contenido como un 
 >menú Contextual. La estructura N°12 muestra un ejemplo.
538      </div>
537    </p>539    </div>
n545      Buttonsn547      Botones
n548      Buttons that users can click on are defined using the botónn550      Los <span id="result_box" lang="es"><span class="hps">boton
>element. To show one with an icon as shown in Figura 8, define an>es</span> <span class="hps">que los usuarios</span> <span class="
> image's URI as the value for the image attribute.>hps">pueden hacer clic</span></span> <span id="result_box" lang="
 >es"><span class="hps alt-edited">encima</span> <span class="hps a
 >lt-edited">se definen usando</span> a</span> <code>buttonelement<
 >/code>. To show one with an icon as shown in Figura 8, define an 
 >image's URI as the value for the image attribute.
n551      <strong>Nota:</strong> To see this sample in operation, usen553      <strong>Nota:</strong> To see this sample in operation, use
> any image as the one to display and place it in the same folder > any image as the one para visualizar unnd place it in the same f
>as the XUL document.>older as the XUL document.
n565    <table class="standard-table">n567    <table class="standard-table" height="398" width="319">
n577            <code>accept</code>n579            <code>acceptar</code>
578          </td>
579          <td>580          </td>
580            <code>close</code>
581          </td>581          <td>
582        </tr>582            <code>cerrar</code>
583        <tr>
584          <td>583          </td>
584        </tr>
585        <tr>
586          <td>
585            <code>cancel</code>587            <code>cancelar</code>
586          </td>
587          <td>588          </td>
588            <code>print</code>
589          </td>589          <td>
590        </tr>590            <code>imprimir</code>
591        <tr>
592          <td>591          </td>
593            <code>help</code>592        </tr>
593        <tr>
594          </td>594          <td>
595            <code>ayuda</code>
595          <td>596          </td>
596            <code>add</code>
597          </td>597          <td>
598        </tr>598            <code>agregar</code>
599        <tr>
600          <td>599          </td>
601            <code>open</code>600        </tr>
601        <tr>
602          </td>602          <td>
603            <code>abrir</code>
603          <td>604          </td>
605          <td>
604            <code>remove</code>606            <code>remover</code>
605          </td>
606        </tr>
607        <tr>
608          <td>607          </td>
609            <code>save</code>608        </tr>
609        <tr>
610          </td>610          <td>
611            <code>guardar</code>
611          <td>612          </td>
612            <code>refresh</code>
613          </td>613          <td>
614        </tr>614            <code>refrescar</code>
615        <tr>
616          <td>615          </td>
617            <code>find</code>616        </tr>
617        <tr>
618          </td>618          <td>
619            <code>buscar</code>
619          <td>620          </td>
620            <code>go-forward</code>
621          </td>621          <td>
622        </tr>622            <code>avanzar</code>
623        <tr>
624          <td>623          </td>
625            <code>clear</code>624        </tr>
625        <tr>
626          </td>626          <td>
627            <code>borrar</code>
627          <td>628          </td>
628            <code>go-back</code>
629          </td>629          <td>
630        </tr>630            <code>retroceder</code>
631        <tr>
632          <td>631          </td>
633            <code>yes</code>632        </tr>
633        <tr>
634          </td>634          <td>
635            <code>si</code>
635          <td>636          </td>
637          <td>
636            <code>properties</code>638            <code>propiedades</code>
n644            <code>select-font</code>n646            <code>seleccionar</code> <code>fuente</code>
645          </td>
646        </tr>
647        <tr>
648          <td>647          </td>
649            <code>apply</code>648        </tr>
649        <tr>
650          </td>650          <td>
651            <code>aplicar</code>
651          <td>652          </td>
653          <td>
652            <code>select-color</code>654            <code>seleccionar color</code>
n658      <strong>Table 2: Values for the icon attribute</strong>n660      <strong>Table 2: Valores para los atributos íconos</strong>
n661      Toolbar buttonsn663      botones de <span class="short_text" id="result_box" lang="e
 >s"><span class="hps">barra de herramientas</span></span>
n664      The <a class="internal" href="/en/XUL/toolbarbutton" title=n666      La <span class="short_text" id="result_box" lang="es"><span
>"En/XUL/Toolbarbutton"><code>toolbar</code></a>botónelement is th> class="hps">barra de herramientas "</span></span><a class="inter
>e element used to define toolbar buttons. This is typically place>nal" href="/en/XUL/toolbarbutton" title="En/XUL/Toolbarbutton"><c
>d inside a <a class="internal" href="/en/XUL/toolbar" title="En/X>ode>toolbar"</code></a> botónelement is the element used to defin
>UL/Toolbar"><code>toolbar</code></a> element, which defines a too>e toolbar buttons. <span class="short_text" id="result_box" lang=
>lbar, but it can be used in other locations.>"es"><span class="hps">Éste</span> <span class="hps">se coloca</s
 >pan> <span class="hps">típicamente</span> <span class="hps">dentr
 >o de una</span></span> <span class="short_text" id="result_box" l
 >ang="es"><span class="hps">barra de herramientas</span></span> <a
 > class="internal" href="/en/XUL/toolbar" title="En/XUL/Toolbar"><
 >code>"toolbar"</code></a> , que define a la <span class="short_te
 >xt" id="result_box" lang="es"><span class="hps">barra de herramie
 >ntas</span></span>, but it can be used in other locations.
n1109      Use the <a class="internal" href="/en/XUL/stack" title="En/n1111      Use the <a class="internal" href="/en/XUL/stack" title="En/
>XUL/Stack"><code>stack</code></a> element to overlap multiple wid>XUL/Stack"><code>stack</code></a> element to overlap multiple wid
>gets. The <code>stack</code> element differs from a normal box in>gets. The <code>stack</code> element differs from a normal box in
> that all the elements in it are layered over each other, working> that all the elements in it are layered over each other, working
> from the bottom up. Jerárquia de instrucciones N°21 shows an exa> from the bottom up. Jerárquia de instrucciones N°21 muestra un e
>mple of a thermometer-style progress bar, with its output shown i>jemplo of a thermometer-style progress bar, with its output shown
>n Figura 17.> in Figura 17.
n1170      By inserting an <code>xul-overlay</code> processing instrucn1172      By inserting an <code>xul-overlay</code> processing instruc
>tion between the XML declaration and the opening tag of the root >tion between the XML declaration and the opening tag of the eleme
>element, the XUL document specified by the <code>xul-overlay</cod>nto nativo, the XUL document specified by the <code>xul-overlay</
>e> will be read in at the same time as the current XUL document. >code> will be read in at the same time as the current XUL documen
>The XUL document that actually gets displayed will be a combinati>t. The XUL document that actually gets displayed will be a combin
>on of the original XUL document and the one specified in <code>xu>ation of the original XUL document and the one specified in <code
>l-overlay</code>.>>xul-overlay</code>.
n1195      When defining an XUL document to open as an overlay, use ann1197      When defining an XUL document to open as an overlay, use an
> <a class="internal" href="/en/XUL/overlay" title="En/XUL/Overlay> <a class="internal" href="/en/XUL/overlay" title="En/XUL/Overlay
>"><code>overlay</code></a> element as the root element. Save the >"><code>overlay</code></a> element as the elemento nativo. Save t
>text of Jerárquia de instrucciones N°24 as <code>overlayDocument.>he text of Jerárquia de instrucciones N°24 as <code>overlayDocume
>xul</code> in the same directory as <code>base.xul</code>.>nt.xul</code> in the same directory as <code>base.xul</code>.
t1386      Firefox allows you to use a special URI scheme, <code>moz-it1388      Firefox allows you to use a special URI scheme, <code>moz-i
>con</code>, that produces filetype icons that are standard for wh>con</code>, that produces filetype icons that are standard for wh
>atever platform it is running on. For example, to display a 16x16>atever platform it is running on. For example, para visualizar un
> icon for a file with a .pdf dot-extension (a PDF file), you woul> 16x16 icon for a file with a .pdf dot-extension (a PDF file), yo
>d write <code><a class="external" href="moz-icon://.PDF?size=16" >u would write <code><a class="external" href="moz-icon://.PDF?siz
>rel="freelink">moz-icon://.PDF?size=16</a></code>.>e=16" rel="freelink">moz-icon://.PDF?size=16</a></code>.

Volver al historial