diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
| commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
| tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/archive/mozilla/xul | |
| parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
| download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip | |
initial commit
Diffstat (limited to 'files/es/archive/mozilla/xul')
72 files changed, 10354 insertions, 0 deletions
diff --git a/files/es/archive/mozilla/xul/action/index.html b/files/es/archive/mozilla/xul/action/index.html new file mode 100644 index 0000000000..f44a54305b --- /dev/null +++ b/files/es/archive/mozilla/xul/action/index.html @@ -0,0 +1,87 @@ +--- +title: action +slug: Archive/Mozilla/XUL/action +tags: + - para_revisar + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/action +--- +<p><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/es/docs/XUL/Elementos">Referencia de XUL</a> [ + <a href="#Examples">Ejemplos</a> | + <a href="#Attributes">Atributos</a> | + <a href="#Properties">Propiedades</a> | + <a href="#Methods">Methoden</a> | + <a href="#Related">Métodos</a> ] +</span></p> +<p>Utilizado para especificar el contenido que debe ser generado para cada resultado correspondiente de una consulta. La acción debe estar contenido dentro de un elemento <code><a href="/es/docs/Mozilla/Tech/XUL/query" title="query">query</a></code> o <code><a href="/es/docs/Mozilla/Tech/XUL/rule" title="rule">rule</a></code>.</p> +<p>Un descendiente de la acción debe tener un atributo <code id="a-uri"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code> seteado a la variable miembro. Este elemento y sus descendientes pueden utilizar variables en lugar de valores de atributos. Las variables son un signo de interrogación seguido por un nombre. Por regla general, cada variable será una referencia a los datos dentro de la fuente de datos, determina a partir de la consulta. Si la misma variable aparece varias veces, tendrá el mismo valor en cada lugar.</p> +<p>Para más información, ver <a href="/en/XUL/Template_Guide/Actions" title="en/XUL/Template_Guide/Actions">Acciones</a>.</p> +<h3 id="Examples" name="Examples">Ejemplos</h3> +<pre class="eval">se necesitan ejemplos +</pre> +<h3 id="Attributes" name="Attributes">Atributos</h3> +<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);"> +<tbody> +<tr> +<td><p><strong>Heredados desde el elemento XUL</strong><br> <small> +<code id="a-align"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>, +<code id="a-allowevents"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>, +<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>, +<code id="a-class"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>, +<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>, +<code id="a-collapsed"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>, +<code id="a-container"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>, +<code id="a-containment"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>, +<code id="a-context"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>, +<code id="a-contextmenu"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>, +<code id="a-datasources"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>, +<code id="a-dir"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>, +<code id="a-empty"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>, +<code id="a-equalsize"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>, +<code id="a-flags"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>, +<code id="a-flex"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>, +<code id="a-height"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>, +<code id="a-hidden"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>, +<code id="a-id"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>, +<code id="a-insertafter"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>, +<code id="a-insertbefore"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>, +<code id="a-left"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>, +<code id="a-maxheight"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>, +<code id="a-maxwidth"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>, +<code id="a-menu"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>, +<code id="a-minheight"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>, +<code id="a-minwidth"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>, +<code id="a-mousethrough"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>, +<code id="a-observes"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>, +<code id="a-ordinal"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>, +<code id="a-orient"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>, +<code id="a-pack"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>, +<code id="a-persist"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>, +<code id="a-popup"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>, +<code id="a-position"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>, +<code id="a-preference-editable"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>, +<code id="a-querytype"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>, +<code id="a-ref"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>, +<code id="a-removeelement"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>, +<code id="a-sortDirection"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>, +<code id="a-sortResource"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>, +<code id="a-sortResource2"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>, +<code id="a-statustext"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>, +<code id="a-style"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>, +<code id="a-template"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>, +<code id="a-tooltip"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>, +<code id="a-tooltiptext"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>, +<code id="a-top"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>, +<code id="a-uri"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>, +<code id="a-wait-cursor"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>, +<code id="a-width"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p> +</td> +</tr> +</tbody> +</table> +<h3 id="Properties" name="Properties">Propiedades</h3> +<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Propiedades Heredadas</strong><br> <small> <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><h3 id="Methods" name="Methods">Métodos</h3> +<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Métodos Heredados</strong><br> <small><code><a href="https://developer.mozilla.org/es/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a class="internal" href="/es/DOM/Node.compareDocumentPosition" title="es/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <a class="internal" href="/es/DOM/Node.getFeature" title="es/DOM/Node.getFeature">getFeature</a>, <a class="internal" href="/es/DOM/Node.getUserData" title="es/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a class="internal" href="/es/DOM/Node.isEqualNode" title="es/DOM/Node.isEqualNode">isEqualNode</a>, <a class="internal" href="/es/DOM/Node.isSameNode" title="es/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.isSupported">isSupported()</a></code>, <a class="internal" href="/es/DOM/Node.lookupNamespaceURI" title="es/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a class="internal" href="/es/DOM/Node.lookupPrefix" title="es/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a class="internal" href="/es/DOM/Node.setUserData" title="es/DOM/Node.setUserData">setUserData</a></small></p> </td> </tr> </tbody> +</table> diff --git a/files/es/archive/mozilla/xul/attribute/index.html b/files/es/archive/mozilla/xul/attribute/index.html new file mode 100644 index 0000000000..4914368c25 --- /dev/null +++ b/files/es/archive/mozilla/xul/attribute/index.html @@ -0,0 +1,304 @@ +--- +title: Atributos +slug: Archive/Mozilla/XUL/Attribute +translation_of: Archive/Mozilla/XUL/Attribute +--- +<div><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/es/docs/XUL/Elementos">Referencia de XUL</a></span></div> + +<ul> + <li><a href="/es/XUL/Attribute/acceltext" title="es/XUL/Attribute/acceltext">acceltext</a></li> + <li><a href="/es/XUL/Attribute/accessible" title="es/XUL/Attribute/accessible">accessible</a></li> + <li><a href="/es/XUL/Attribute/accesskey" title="es/XUL/Attribute/accesskey">accesskey</a></li> + <li><a href="/es/XUL/Attribute/activetitlebarcolor" title="es/XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a> </li> + <li><a href="/es/XUL/Attribute/afterselected" title="es/XUL/Attribute/afterselected">afterselected</a></li> + <li><a href="/es/XUL/Attribute/align" title="es/XUL/Attribute/align">align</a></li> + <li><a href="/es/XUL/Attribute/allowevents" title="es/XUL/Attribute/allowevents">allowevents</a></li> + <li><a href="/es/XUL/Attribute/allownegativeassertions" title="es/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></li> + <li><a href="/es/XUL/Attribute/alternatingbackground" title="es/XUL/Attribute/alternatingbackground">alternatingbackground</a></li> + <li><a href="/es/XUL/Attribute/alwaysopenpopup" title="es/XUL/Attribute/alwaysopenpopup">alwaysopenpopup</a></li> + <li><a href="/es/XUL/Attribute/attribute" title="es/XUL/Attribute/attribute">attribute</a></li> + <li><a href="/es/XUL/Attribute/autoCheck" title="es/XUL/Attribute/autoCheck">autocheck</a></li> + <li><a href="/es/XUL/Attribute/autoCheck" title="es/XUL/Attribute/autoCheck">autoCheck</a></li> + <li><a href="/es/XUL/Attribute/autocompleteenabled" title="es/XUL/Attribute/autocompleteenabled">autocompleteenabled</a></li> + <li><a href="/es/XUL/Attribute/autocompletepopup" title="es/XUL/Attribute/autocompletepopup">autocompletepopup</a></li> + <li><a href="/es/XUL/Attribute/autocompletesearch" title="es/XUL/Attribute/autocompletesearch">autocompletesearch</a></li> + <li><a href="/es/XUL/Attribute/autocompletesearchparam" title="es/XUL/Attribute/autocompletesearchparam">autocompletesearchparam</a></li> + <li><a href="/es/XUL/Attribute/autoFill" title="es/XUL/Attribute/autoFill">autoFill</a></li> + <li><a href="/es/XUL/Attribute/autoFillAfterMatch" title="es/XUL/Attribute/autoFillAfterMatch">autoFillAfterMatch</a></li> + <li><a href="/es/XUL/Attribute/autoscroll" title="es/XUL/Attribute/autoscroll">autoscroll</a></li> + <li><a href="/es/XUL/Attribute/beforeselected" title="es/XUL/Attribute/beforeselected">beforeselected</a></li> + <li><a href="/es/XUL/Attribute/buttonaccesskeyaccept" title="es/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></li> + <li><a href="/es/XUL/Attribute/buttonaccesskeycancel" title="es/XUL/Attribute/buttonaccesskeycancel">buttonaccesskeycancel</a></li> + <li><a href="/es/XUL/Attribute/buttonaccesskeydisclosure" title="es/XUL/Attribute/buttonaccesskeydisclosure">buttonaccesskeydisclosure</a></li> + <li><a href="/es/XUL/Attribute/buttonaccesskeyextra1" title="es/XUL/Attribute/buttonaccesskeyextra1">buttonaccesskeyextra1</a></li> + <li><a href="/es/XUL/Attribute/buttonaccesskeyextra2" title="es/XUL/Attribute/buttonaccesskeyextra2">buttonaccesskeyextra2</a></li> + <li><a href="/es/XUL/Attribute/buttonaccesskeyhelp" title="es/XUL/Attribute/buttonaccesskeyhelp">buttonaccesskeyhelp</a></li> + <li><a href="/es/XUL/Attribute/buttonalign" title="es/XUL/Attribute/buttonalign">buttonalign</a></li> + <li><a href="/es/XUL/Attribute/buttondir" title="es/XUL/Attribute/buttondir">buttondir</a></li> + <li><a href="/es/XUL/Attribute/buttondisabledaccept" title="es/XUL/Attribute/buttondisabledaccept">buttondisabledaccept</a></li> + <li><a href="/es/XUL/Attribute/buttonlabelaccept" title="es/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></li> + <li><a href="/es/XUL/Attribute/buttonlabelcancel" title="es/XUL/Attribute/buttonlabelcancel">buttonlabelcancel</a></li> + <li><a href="/es/XUL/Attribute/buttonlabeldisclosure" title="es/XUL/Attribute/buttonlabeldisclosure">buttonlabeldisclosure</a></li> + <li><a href="/es/XUL/Attribute/buttonlabelextra1" title="es/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></li> + <li><a href="/es/XUL/Attribute/buttonlabelextra2" title="es/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></li> + <li><a href="/es/XUL/Attribute/buttonlabelhelp" title="es/XUL/Attribute/buttonlabelhelp">buttonlabelhelp</a></li> + <li><a href="/es/XUL/Attribute/buttonorient" title="es/XUL/Attribute/buttonorient">buttonorient</a></li> + <li><a href="/es/XUL/Attribute/buttonpack" title="es/XUL/Attribute/buttonpack">buttonpack</a></li> + <li><a href="/es/XUL/Attribute/buttons" title="es/XUL/Attribute/buttons">buttons</a></li> + <li><a href="/es/XUL/Attribute/checked" title="es/XUL/Attribute/checked">checked</a></li> + <li><a href="/es/XUL/Attribute/checkState" title="es/XUL/Attribute/checkState">checkState</a></li> + <li><a href="/es/XUL/Attribute/class" title="es/XUL/Attribute/class">class</a></li> + <li><a href="/es/XUL/Attribute/closebutton" title="es/XUL/Attribute/closebutton">closebutton</a></li> + <li><a href="/es/XUL/Attribute/coalesceduplicatearcs" title="es/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></li> + <li><a href="/es/XUL/Attribute/collapse" title="es/XUL/Attribute/collapse">collapse</a></li> + <li><a href="/es/XUL/Attribute/collapsed" title="es/XUL/Attribute/collapsed">collapsed</a></li> + <li><a href="/es/XUL/Attribute/color" title="es/XUL/Attribute/color">color</a></li> + <li><a href="/es/XUL/Attribute/cols" title="es/XUL/Attribute/cols">cols</a></li> + <li><a href="/es/XUL/Attribute/command" title="es/XUL/Attribute/command">command</a></li> + <li><a href="/es/XUL/Attribute/commandupdater" title="es/XUL/Attribute/commandupdater">commandupdater</a></li> + <li><a href="/es/XUL/Attribute/completedefaultindex" title="es/XUL/Attribute/completedefaultindex">completedefaultindex</a></li> + <li><a href="/es/XUL/Attribute/container" title="es/XUL/Attribute/container">container</a></li> + <li><a href="/es/XUL/Attribute/containment" title="es/XUL/Attribute/containment">containment</a></li> + <li><a href="/es/XUL/Attribute/contentcontextmenu" title="es/XUL/Attribute/contentcontextmenu">contentcontextmenu</a></li> + <li><a href="/es/XUL/Attribute/contenttooltip" title="es/XUL/Attribute/contenttooltip">contenttooltip</a></li> + <li><a href="/es/XUL/Attribute/context" title="es/XUL/Attribute/context">context</a></li> + <li><a href="/es/XUL/Attribute/contextmenu" title="es/XUL/Attribute/contextmenu">contextmenu</a></li> + <li><a href="/es/XUL/Attribute/control" title="es/XUL/Attribute/control">control</a></li> + <li><a href="/es/XUL/Attribute/crop" title="es/XUL/Attribute/crop">crop</a></li> + <li><a href="/es/XUL/Attribute/curpos" title="es/XUL/Attribute/curpos">curpos</a></li> + <li><a href="/es/XUL/Attribute/current" title="es/XUL/Attribute/current">current</a></li> + <li><a href="/es/XUL/Attribute/currentset" title="es/XUL/Attribute/currentset">currentset</a></li> + <li><a href="/es/XUL/Attribute/customindex" title="es/XUL/Attribute/customindex">customindex</a></li> + <li><a href="/es/XUL/Attribute/customizable" title="es/XUL/Attribute/customizable">customizable</a></li> + <li><a href="/es/XUL/Attribute/cycler" title="es/XUL/Attribute/cycler">cycler</a></li> + <li><a href="/es/XUL/Attribute/datasources" title="es/XUL/Attribute/datasources">datasources</a></li> + <li><a href="/es/XUL/Attribute/decimalplaces" title="es/XUL/Attribute/decimalplaces">decimalplaces</a></li> + <li><a href="/es/XUL/Attribute/default" title="es/XUL/Attribute/default">default</a></li> + <li><a href="/es/XUL/Attribute/defaultButton" title="es/XUL/Attribute/defaultButton">defaultButton</a></li> + <li><a href="/es/XUL/Attribute/defaultset" title="es/XUL/Attribute/defaultset">defaultset</a></li> + <li><a href="/es/XUL/Attribute/description" title="es/XUL/Attribute/description">description</a></li> + <li><a href="/es/XUL/Attribute/dir" title="es/XUL/Attribute/dir">dir</a></li> + <li><a href="/es/XUL/Attribute/disableAutocomplete" title="es/XUL/Attribute/disableAutocomplete">disableAutocomplete</a></li> + <li><a href="/es/XUL/Attribute/disableAutocomplete" title="es/XUL/Attribute/disableAutocomplete">disableautocomplete</a></li> + <li><a href="/es/XUL/Attribute/disableautoselect" title="es/XUL/Attribute/disableautoselect">disableautoselect</a></li> + <li><a href="/es/XUL/Attribute/disableclose" title="es/XUL/Attribute/disableclose">disableclose</a></li> + <li><a href="/es/XUL/Attribute/disabled" title="es/XUL/Attribute/disabled">disabled</a></li> + <li><a href="/es/XUL/Attribute/disablehistory" title="es/XUL/Attribute/disablehistory">disablehistory</a></li> + <li><a href="/es/XUL/Attribute/disableKeyNavigation" title="es/XUL/Attribute/disableKeyNavigation">disableKeyNavigation</a></li> + <li><a href="/es/XUL/Attribute/disableKeyNavigation" title="es/XUL/Attribute/disableKeyNavigation">disablekeynavigation</a></li> + <li><a href="/es/XUL/Attribute/disablesecurity" title="es/XUL/Attribute/disablesecurity">disablesecurity</a></li> + <li><a href="/es/XUL/Attribute/dlgtype" title="es/XUL/Attribute/dlgtype">dlgtype</a></li> + <li><a href="/es/XUL/Attribute/dragging" title="es/XUL/Attribute/dragging">dragging</a></li> + <li><a href="/es/XUL/Attribute/editable" title="es/XUL/Attribute/editable">editable</a></li> + <li><a href="/es/XUL/Attribute/editortype" title="es/XUL/Attribute/editortype">editortype</a></li> + <li><a href="/es/XUL/Attribute/element" title="es/XUL/Attribute/element">element</a></li> + <li><a href="/es/XUL/Attribute/empty" title="es/XUL/Attribute/empty">empty</a></li> + <li><a href="/es/XUL/Attribute/emptytext" title="es/XUL/Attribute/emptytext">emptytext</a></li> + <li><a href="/es/XUL/Attribute/enableColumnDrag" title="es/XUL/Attribute/enableColumnDrag">enableColumnDrag</a></li> + <li><a href="/es/XUL/Attribute/enablehistory" title="es/XUL/Attribute/enablehistory">enablehistory</a></li> + <li><a href="/es/XUL/Attribute/equalsize" title="es/XUL/Attribute/equalsize">equalsize</a></li> + <li><a href="/es/XUL/Attribute/eventnode" title="es/XUL/Attribute/eventnode">eventnode</a></li> + <li><a href="/es/XUL/Attribute/events" title="es/XUL/Attribute/events">events</a></li> + <li><a href="/es/XUL/Attribute/expr" title="es/XUL/Attribute/expr">expr</a></li> + <li><a href="/es/XUL/Attribute/firstdayofweek" title="es/XUL/Attribute/firstdayofweek">firstdayofweek</a></li> + <li><a href="/es/XUL/Attribute/firstpage" title="es/XUL/Attribute/firstpage">firstpage</a></li> + <li><a href="/es/XUL/Attribute/first-tab" title="es/XUL/Attribute/first-tab">first-tab</a></li> + <li><a href="/es/XUL/Attribute/fixed" title="es/XUL/Attribute/fixed">fixed</a></li> + <li><a href="/es/XUL/Attribute/flags" title="es/XUL/Attribute/flags">flags</a></li> + <li><a href="/es/XUL/Attribute/flex" title="es/XUL/Attribute/flex">flex</a></li> + <li><a href="/es/XUL/Attribute/focused" title="es/XUL/Attribute/focused">focused</a></li> + <li><a href="/es/XUL/Attribute/forceComplete" title="es/XUL/Attribute/forceComplete">forceComplete</a></li> + <li><a href="/es/XUL/Attribute/forceComplete" title="es/XUL/Attribute/forceComplete">forcecomplete</a></li> + <li><a href="/es/XUL/Attribute/grippyhidden" title="es/XUL/Attribute/grippyhidden">grippyhidden</a></li> + <li><a href="/es/XUL/Attribute/grippytooltiptext" title="es/XUL/Attribute/grippytooltiptext">grippytooltiptext</a></li> + <li><a href="/es/XUL/Attribute/group" title="es/XUL/Attribute/group">group</a></li> + <li><a href="/es/XUL/Attribute/handleCtrlPageUpDown" title="es/XUL/Attribute/handleCtrlPageUpDown">handleCtrlPageUpDown</a></li> + <li><a href="/es/XUL/Attribute/handleCtrlTab" title="es/XUL/Attribute/handleCtrlTab">handleCtrlTab</a></li> + <li><a href="/es/XUL/Attribute/height" title="es/XUL/Attribute/height">height</a></li> + <li><a href="/es/XUL/Attribute/helpURI" title="es/XUL/Attribute/helpURI">helpURI</a></li> + <li><a href="/es/XUL/Attribute/hidden" title="es/XUL/Attribute/hidden">hidden</a></li> + <li><a href="/es/XUL/Attribute/hidechrome" title="es/XUL/Attribute/hidechrome">hidechrome</a></li> + <li><a href="/es/XUL/Attribute/hidecolumnpicker" title="es/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></li> + <li><a href="/es/XUL/Attribute/hideheader" title="es/XUL/Attribute/hideheader">hideheader</a></li> + <li><a href="/es/XUL/Attribute/hideseconds" title="es/XUL/Attribute/hideseconds">hideseconds</a></li> + <li><a href="/es/XUL/Attribute/hidespinbuttons" title="es/XUL/Attribute/hidespinbuttons">hidespinbuttons</a></li> + <li><a href="/es/XUL/Attribute/homepage" title="es/XUL/Attribute/homepage">homepage</a></li> + <li><a href="/es/XUL/Attribute/href" title="es/XUL/Attribute/href">href</a></li> + <li><a href="/es/XUL/Attribute/icon" title="es/XUL/Attribute/icon">icon</a></li> + <li><a href="/es/XUL/Attribute/id" title="es/XUL/Attribute/id">id</a></li> + <li><a href="/es/XUL/Attribute/ignoreBlurWhileSearching" title="es/XUL/Attribute/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a></li> + <li><a href="/es/XUL/Attribute/ignoreBlurWhileSearching" title="es/XUL/Attribute/ignoreBlurWhileSearching">ignorebluewhilesearching</a></li> + <li><a href="/es/XUL/Attribute/ignorecase" title="es/XUL/Attribute/ignorecase">ignorecase</a></li> + <li><a href="/es/XUL/Attribute/ignoreincolumnpicker" title="es/XUL/Attribute/ignoreincolumnpicker">ignoreincolumnpicker</a></li> + <li><a href="/es/XUL/Attribute/ignorekeys" title="es/XUL/Attribute/ignorekeys">ignorekeys</a></li> + <li><a href="/es/XUL/Attribute/image" title="es/XUL/Attribute/image">image</a></li> + <li><a href="/es/XUL/Attribute/inactivetitlebarcolor" title="es/XUL/Attribute/inactivetitlebarcolor">inactivetitlebarcolor</a> </li> + <li><a href="/es/XUL/Attribute/increment" title="es/XUL/Attribute/increment">increment</a></li> + <li><a href="/es/XUL/Attribute/index" title="es/XUL/Attribute/index">index</a></li> + <li><a href="/es/XUL/Attribute/inputtooltiptext" title="es/XUL/Attribute/inputtooltiptext">inputtooltiptext</a></li> + <li><a href="/es/XUL/Attribute/insertafter" title="es/XUL/Attribute/insertafter">insertafter</a></li> + <li><a href="/es/XUL/Attribute/insertbefore" title="es/XUL/Attribute/insertbefore">insertbefore</a></li> + <li><a href="/es/XUL/Attribute/instantApply" title="es/XUL/Attribute/instantApply">instantApply</a></li> + <li><a href="/es/XUL/Attribute/inverted" title="es/XUL/Attribute/inverted">inverted</a></li> + <li><a href="/es/XUL/Attribute/iscontainer" title="es/XUL/Attribute/iscontainer">iscontainer</a></li> + <li><a href="/es/XUL/Attribute/isempty" title="es/XUL/Attribute/isempty">isempty</a></li> + <li><a href="/es/XUL/Attribute/key" title="es/XUL/Attribute/key">key</a></li> + <li><a href="/es/XUL/Attribute/keycode" title="es/XUL/Attribute/keycode">keycode</a></li> + <li><a href="/es/XUL/Attribute/keytext" title="es/XUL/Attribute/keytext">keytext</a></li> + <li><a href="/es/XUL/Attribute/label" title="es/XUL/Attribute/label">label</a></li> + <li><a href="/es/XUL/Attribute/lastpage" title="es/XUL/Attribute/lastpage">lastpage</a></li> + <li><a href="/es/XUL/Attribute/lastSelected" title="es/XUL/Attribute/lastSelected">lastSelected</a></li> + <li><a href="/es/XUL/Attribute/last-tab" title="es/XUL/Attribute/last-tab">last-tab</a></li> + <li><a href="/es/XUL/Attribute/left" title="es/XUL/Attribute/left">left</a></li> + <li><a href="/es/XUL/Attribute/linkedpanel" title="es/XUL/Attribute/linkedpanel">linkedpanel</a></li> + <li><a href="/es/XUL/Attribute/max" title="es/XUL/Attribute/max">max</a></li> + <li><a href="/es/XUL/Attribute/maxheight" title="es/XUL/Attribute/maxheight">maxheight</a></li> + <li><a href="/es/XUL/Attribute/maxlength" title="es/XUL/Attribute/maxlength">maxlength</a></li> + <li><a href="/es/XUL/Attribute/maxpos" title="es/XUL/Attribute/maxpos">maxpos</a></li> + <li><a href="/es/XUL/Attribute/maxrows" title="es/XUL/Attribute/maxrows">maxrows</a></li> + <li><a href="/es/XUL/Attribute/maxwidth" title="es/XUL/Attribute/maxwidth">maxwidth</a></li> + <li><a href="/es/XUL/Attribute/member" title="es/XUL/Attribute/member">member</a></li> + <li><a href="/es/XUL/Attribute/menu" title="es/XUL/Attribute/menu">menu</a></li> + <li><a href="/es/XUL/Attribute/menuactive" title="es/XUL/Attribute/menuactive">menuactive</a></li> + <li><a href="/es/XUL/Attribute/min" title="es/XUL/Attribute/min">min</a></li> + <li><a href="/es/XUL/Attribute/minheight" title="es/XUL/Attribute/minheight">minheight</a></li> + <li><a href="/es/XUL/Attribute/minResultsForPopup" title="es/XUL/Attribute/minResultsForPopup">minResultsForPopup</a></li> + <li><a href="/es/XUL/Attribute/minResultsForPopup" title="es/XUL/Attribute/minResultsForPopup">minresultsforpopup</a></li> + <li><a href="/es/XUL/Attribute/minwidth" title="es/XUL/Attribute/minwidth">minwidth</a></li> + <li><a href="/es/XUL/Attribute/mode" title="es/XUL/Attribute/mode">mode</a></li> + <li><a href="/es/XUL/Attribute/modifiers" title="es/XUL/Attribute/modifiers">modifiers</a></li> + <li><a href="/es/XUL/Attribute/mousethrough" title="es/XUL/Attribute/mousethrough">mousethrough</a></li> + <li><a href="/es/XUL/Attribute/multiline" title="es/XUL/Attribute/multiline">multiline</a></li> + <li><a href="/es/XUL/Attribute/multiple" title="es/XUL/Attribute/multiple">multiple</a></li> + <li><a href="/es/XUL/Attribute/name" title="es/XUL/Attribute/name">name</a></li> + <li><a href="/es/XUL/Attribute/negate" title="es/XUL/Attribute/negate">negate</a></li> + <li><a href="/es/XUL/Attribute/newlines" title="es/XUL/Attribute/newlines">newlines</a></li> + <li><a href="/es/XUL/Attribute/next" title="es/XUL/Attribute/next">next</a></li> + <li><a href="/es/XUL/Attribute/noautofocus" title="es/XUL/Attribute/noautofocus">noautofocus</a></li> + <li><a href="/es/XUL/Attribute/noautohide" title="es/XUL/Attribute/noautohide">noautohide</a></li> + <li><a href="/es/XUL/Attribute/nomatch" title="es/XUL/Attribute/nomatch">nomatch</a></li> + <li><a href="/es/XUL/Attribute/object" title="es/XUL/Attribute/object">object</a></li> + <li><a href="/es/XUL/Attribute/observes" title="es/XUL/Attribute/observes">observes</a></li> + <li><a href="/es/XUL/Attribute/onbeforeaccept" title="es/XUL/Attribute/onbeforeaccept">onbeforeaccept</a></li> + <li><a href="/es/XUL/Attribute/onbookmarkgroup" title="es/XUL/Attribute/onbookmarkgroup">onbookmarkgroup</a></li> + <li><a href="/es/XUL/Attribute/onchange" title="es/XUL/Attribute/onchange">onchange</a></li> + <li><a class="internal" href="/es/XUL/Attribute/onclick" title="En/XUL/Attribute/Onclick">onclick</a></li> + <li><a href="/es/XUL/Attribute/onclosetab" title="es/XUL/Attribute/onclosetab">onclosetab</a></li> + <li><a href="/es/XUL/Attribute/oncommand" title="es/XUL/Attribute/oncommand">oncommand</a></li> + <li><a href="/es/XUL/Attribute/oncommandupdate" title="es/XUL/Attribute/oncommandupdate">oncommandupdate</a></li> + <li><a href="/es/XUL/Attribute/ondialogaccept" title="es/XUL/Attribute/ondialogaccept">ondialogaccept</a></li> + <li><a href="/es/XUL/Attribute/ondialogcancel" title="es/XUL/Attribute/ondialogcancel">ondialogcancel</a></li> + <li><a href="/es/XUL/Attribute/ondialogdisclosure" title="es/XUL/Attribute/ondialogdisclosure">ondialogclosure</a></li> + <li><a href="/es/XUL/Attribute/ondialogextra1" title="es/XUL/Attribute/ondialogextra1">ondialogextra1</a></li> + <li><a href="/es/XUL/Attribute/ondialogextra2" title="es/XUL/Attribute/ondialogextra2">ondialogextra2</a></li> + <li><a href="/es/XUL/Attribute/ondialoghelp" title="es/XUL/Attribute/ondialoghelp">ondialoghelp</a></li> + <li><a href="/es/XUL/Attribute/onerror" title="es/XUL/Attribute/onerror">onerror</a></li> + <li><a href="/es/XUL/Attribute/onerrorcommand" title="es/XUL/Attribute/onerrorcommand">onerrorcommand</a></li> + <li><a href="/es/XUL/Attribute/onextra1" title="es/XUL/Attribute/onextra1">onextra1</a></li> + <li><a href="/es/XUL/Attribute/onextra2" title="es/XUL/Attribute/onextra2">onextra2</a></li> + <li><a href="/es/XUL/Attribute/oninput" title="es/XUL/Attribute/oninput">oninput</a></li> + <li><a href="/es/XUL/Attribute/onload" title="es/XUL/Attribute/onload">onload</a></li> + <li><a href="/es/XUL/Attribute/onnewtab" title="es/XUL/Attribute/onnewtab">onnewtab</a></li> + <li><a href="/es/XUL/Attribute/onpageadvanced" title="es/XUL/Attribute/onpageadvanced">onpageadvanced</a></li> + <li><a href="/es/XUL/Attribute/onpagehide" title="es/XUL/Attribute/onpagehide">onpagehide</a></li> + <li><a href="/es/XUL/Attribute/onpagerewound" title="es/XUL/Attribute/onpagerewound">onpagerewound</a></li> + <li><a href="/es/XUL/Attribute/onpageshow" title="es/XUL/Attribute/onpageshow">onpageshow</a></li> + <li><a href="/es/XUL/Attribute/onpaneload" title="es/XUL/Attribute/onpaneload">onpaneload</a></li> + <li><a href="/es/XUL/Attribute/onpopuphidden" title="es/XUL/Attribute/onpopuphidden">onpopuphidden</a></li> + <li><a href="/es/XUL/Attribute/onpopuphiding" title="es/XUL/Attribute/onpopuphiding">onpopuphiding</a></li> + <li><a href="/es/XUL/Attribute/onpopupshowing" title="es/XUL/Attribute/onpopupshowing">onpopupshowing</a></li> + <li><a href="/es/XUL/Attribute/onpopupshown" title="es/XUL/Attribute/onpopupshown">onpopupshown</a></li> + <li><a href="/es/XUL/Attribute/onsearchcomplete" title="es/XUL/Attribute/onsearchcomplete">onsearchcomplete</a></li> + <li><a href="/es/XUL/Attribute/onselect" title="es/XUL/Attribute/onselect">onselect</a></li> + <li><a href="/es/XUL/Attribute/ontextcommand" title="es/XUL/Attribute/ontextcommand">ontextcommand</a></li> + <li><a href="/es/XUL/Attribute/ontextentered" title="es/XUL/Attribute/ontextentered">ontextentered</a></li> + <li><a href="/es/XUL/Attribute/ontextrevert" title="es/XUL/Attribute/ontextrevert">ontextrevert</a></li> + <li><a href="/es/XUL/Attribute/ontextreverted" title="es/XUL/Attribute/ontextreverted">ontextreverted</a></li> + <li><a href="/es/XUL/Attribute/onwizardback" title="es/XUL/Attribute/onwizardback">onwizardback</a></li> + <li><a href="/es/XUL/Attribute/onwizardcancel" title="es/XUL/Attribute/onwizardcancel">onwizardcancel</a></li> + <li><a href="/es/XUL/Attribute/onwizardfinish" title="es/XUL/Attribute/onwizardfinish">onwizardfinish</a></li> + <li><a href="/es/XUL/Attribute/onwizardnext" title="es/XUL/Attribute/onwizardnext">onwizardnext</a></li> + <li><a href="/es/XUL/Attribute/open" title="es/XUL/Attribute/open">open</a></li> + <li><a href="/es/XUL/Attribute/ordinal" title="es/XUL/Attribute/ordinal">ordinal</a></li> + <li><a href="/es/XUL/Attribute/orient" title="es/XUL/Attribute/orient">orient</a></li> + <li><a href="/es/XUL/Attribute/pack" title="es/XUL/Attribute/pack">pack</a></li> + <li><a href="/es/XUL/Attribute/pageid" title="es/XUL/Attribute/pageid">pageid</a></li> + <li><a href="/es/XUL/Attribute/pageincrement" title="es/XUL/Attribute/pageincrement">pageincrement</a></li> + <li><a href="/es/XUL/Attribute/pagestep" title="es/XUL/Attribute/pagestep">pagestep</a></li> + <li><a href="/es/XUL/Attribute/parent" title="es/XUL/Attribute/parent">parent</a></li> + <li><a href="/es/XUL/Attribute/parsetype" title="es/XUL/Attribute/parsetype">parsetype</a></li> + <li><a href="/es/XUL/Attribute/persist" title="es/XUL/Attribute/persist">persist</a></li> + <li><a href="/es/XUL/Attribute/persistence" title="es/XUL/Attribute/persistence">persistence</a></li> + <li><a href="/es/XUL/Attribute/phase" title="es/XUL/Attribute/phase">phase</a></li> + <li><a href="/es/XUL/Attribute/pickertooltiptext" title="es/XUL/Attribute/pickertooltiptext">pickertooltiptext</a></li> + <li><a href="/es/XUL/Attribute/popup" title="es/XUL/Attribute/popup">popup</a></li> + <li><a href="/es/XUL/Attribute/position" title="es/XUL/Attribute/position">position</a></li> + <li><a href="/es/XUL/Attribute/predicate" title="es/XUL/Attribute/predicate">predicate</a></li> + <li><a href="/es/XUL/Attribute/preference" title="es/XUL/Attribute/preference">preference</a></li> + <li><a href="/es/XUL/Attribute/preference-editable" title="es/XUL/Attribute/preference-editable">preference-editable</a></li> + <li><a href="/es/XUL/Attribute/primary" title="es/XUL/Attribute/primary">primary</a></li> + <li><a href="/es/XUL/Attribute/priority" title="es/XUL/Attribute/priority">priority</a></li> + <li><a href="/es/XUL/Attribute/properties" title="es/XUL/Attribute/properties">properties</a></li> + <li><a href="/es/XUL/Attribute/querytype" title="es/XUL/Attribute/querytype">querytype</a></li> + <li><a href="/es/XUL/Attribute/readonly" title="es/XUL/Attribute/readonly">readonly</a></li> + <li><a href="/es/XUL/Attribute/ref" title="es/XUL/Attribute/ref">ref</a></li> + <li><a href="/es/XUL/Attribute/rel" title="es/XUL/Attribute/rel">rel</a></li> + <li><a href="/es/XUL/Attribute/removeelement" title="es/XUL/Attribute/removeelement">removeelement</a></li> + <li><a href="/es/XUL/Attribute/resizeafter" title="es/XUL/Attribute/resizeafter">resizeafter</a></li> + <li><a href="/es/XUL/Attribute/resizebefore" title="es/XUL/Attribute/resizebefore">resizebefore</a></li> + <li><a href="/es/XUL/Attribute/rows" title="es/XUL/Attribute/rows">rows</a></li> + <li><a href="/es/XUL/Attribute/screenX" title="es/XUL/Attribute/screenX">screenX</a></li> + <li><a href="/es/XUL/Attribute/screenY" title="es/XUL/Attribute/screenY">screenY</a></li> + <li><a href="/es/XUL/Attribute/searchSessions" title="es/XUL/Attribute/searchSessions">searchSessions</a></li> + <li><a href="/es/XUL/Attribute/searchlabel" title="es/XUL/Attribute/searchlabel">searchlabel</a></li> + <li><a href="/es/XUL/Attribute/selected" title="es/XUL/Attribute/selected">selected</a></li> + <li><a href="/es/XUL/Attribute/selectedIndex" title="es/XUL/Attribute/selectedIndex">selectedIndex</a></li> + <li><a href="/es/XUL/Attribute/seltype" title="es/XUL/Attribute/seltype">seltype</a></li> + <li><a href="/es/XUL/Attribute/setfocus" title="es/XUL/Attribute/setfocus">setfocus</a></li> + <li><a href="/es/XUL/Attribute/showcaret" title="es/XUL/Attribute/showcaret">showcaret</a></li> + <li><a href="/es/XUL/Attribute/showCommentColumn" title="es/XUL/Attribute/showCommentColumn">showCommentColumn</a></li> + <li><a href="/es/XUL/Attribute/showCommentColumn" title="es/XUL/Attribute/showCommentColumn">showcommentcolumn</a></li> + <li><a href="/es/XUL/Attribute/showpopup" title="es/XUL/Attribute/showpopup">showpopup</a></li> + <li><a href="/es/XUL/Attribute/size" title="es/XUL/Attribute/size">size</a></li> + <li><a href="/es/XUL/Attribute/sizemode" title="es/XUL/Attribute/sizemode">sizemode</a></li> + <li><a href="/es/XUL/Attribute/sizetopopup" title="es/XUL/Attribute/sizetopopup">sizetopopup</a></li> + <li><a href="/es/XUL/Attribute/smoothscroll" title="es/XUL/Attribute/smoothscroll">smoothscroll</a></li> + <li><a href="/es/XUL/Attribute/sort" title="es/XUL/Attribute/sort">sort</a></li> + <li><a href="/es/XUL/Attribute/sortActive" title="es/XUL/Attribute/sortActive">sortActive</a></li> + <li><a href="/es/XUL/Attribute/sortDirection" title="es/XUL/Attribute/sortDirection">sortDirection</a></li> + <li><a href="/es/XUL/Attribute/sortResource" title="es/XUL/Attribute/sortResource">sortResource</a></li> + <li><a href="/es/XUL/Attribute/sortResource2" title="es/XUL/Attribute/sortResource2">sortResource2</a></li> + <li><a href="/es/XUL/Attribute/spellcheck" title="es/XUL/Attribute/spellcheck">spellcheck</a></li> + <li><a href="/es/XUL/Attribute/src" title="es/XUL/Attribute/src">src</a></li> + <li><a href="/es/XUL/Attribute/state" title="es/XUL/Attribute/state">state</a></li> + <li><a href="/es/XUL/Attribute/statedatasource" title="es/XUL/Attribute/statedatasource">statedatasource</a></li> + <li><a href="/es/XUL/Attribute/statusbar" title="es/XUL/Attribute/statusbar">statusbar</a></li> + <li><a href="/es/XUL/Attribute/statustext" title="es/XUL/Attribute/statustext">statustext</a></li> + <li><a href="/es/XUL/Attribute/style" title="es/XUL/Attribute/style">style</a></li> + <li><a href="/es/XUL/Attribute/subject" title="es/XUL/Attribute/subject">subject</a></li> + <li><a href="/es/XUL/Attribute/substate" title="es/XUL/Attribute/substate">substate</a></li> + <li><a href="/es/XUL/Attribute/suppressonselect" title="es/XUL/Attribute/suppressonselect">suppressonselect</a></li> + <li><a href="/es/XUL/Attribute/tabindex" title="es/XUL/Attribute/tabindex">tabindex</a></li> + <li><a href="/es/XUL/Attribute/tabScrolling" title="es/XUL/Attribute/tabScrolling">tabScrolling</a></li> + <li><a href="/es/XUL/Attribute/tabScrolling" title="es/XUL/Attribute/tabScrolling">tabscrolling</a></li> + <li><a href="/es/XUL/Attribute/targets" title="es/XUL/Attribute/targets">targets</a></li> + <li><a href="/es/XUL/Attribute/template" title="es/XUL/Attribute/template">template</a></li> + <li><a href="/es/XUL/Attribute/timeout" title="es/XUL/Attribute/timeout">timeout</a></li> + <li><a href="/es/XUL/Attribute/title" title="es/XUL/Attribute/title">title</a></li> + <li><a href="/es/XUL/Attribute/toolbarname" title="es/XUL/Attribute/toolbarname">toolbarname</a></li> + <li><a href="/es/XUL/Attribute/tooltip" title="es/XUL/Attribute/tooltip">tooltip</a></li> + <li><a href="/es/XUL/Attribute/tooltiptext" title="es/XUL/Attribute/tooltiptext">tooltiptext</a></li> + <li><a href="/es/XUL/Attribute/tooltiptextnew" title="es/XUL/Attribute/tooltiptextnew">tooltiptextnew</a></li> + <li><a href="/es/XUL/Attribute/top" title="es/XUL/Attribute/top">top</a></li> + <li><a href="/es/XUL/Attribute/type" title="es/XUL/Attribute/type">type</a></li> + <li><a href="/es/XUL/Attribute/uri" title="es/XUL/Attribute/uri">uri</a></li> + <li><a href="/es/XUL/Attribute/userAction" title="es/XUL/Attribute/userAction">userAction</a></li> + <li><a href="/es/XUL/Attribute/validate" title="es/XUL/Attribute/validate">validate</a></li> + <li><a href="/es/XUL/Attribute/value" title="es/XUL/Attribute/value">value</a></li> + <li><a href="/es/XUL/Attribute/var" title="es/XUL/Attribute/var">var</a></li> + <li><a href="/es/XUL/Attribute/wait-cursor" title="es/XUL/Attribute/wait-cursor">wait-cursor</a></li> + <li><a href="/es/XUL/Attribute/width" title="es/XUL/Attribute/width">width</a></li> + <li><a href="/es/XUL/Attribute/windowtype" title="es/XUL/Attribute/windowtype">windowtype</a></li> + <li><a href="/es/XUL/Attribute/wrap" title="es/XUL/Attribute/wrap">wrap</a></li> + <li><a href="/es/XUL/Attribute/wraparound" title="es/XUL/Attribute/wraparound">wraparound</a></li> +</ul> diff --git a/files/es/archive/mozilla/xul/bestiario_xul/index.html b/files/es/archive/mozilla/xul/bestiario_xul/index.html new file mode 100644 index 0000000000..7d2f8b3a9d --- /dev/null +++ b/files/es/archive/mozilla/xul/bestiario_xul/index.html @@ -0,0 +1,186 @@ +--- +title: Bestiario XUL +slug: Archive/Mozilla/XUL/Bestiario_XUL +tags: + - Complementos + - Todas_las_Categorías + - XUL + - extensiones +translation_of: Archive/Mozilla/XUL/A_XUL_Bestiary +--- +<p> </p> +<p>Este documento sobre XUL presenta algunos de los conceptos clave y términos del entorno de desarollo XUL. El propósito de este artículo no es explicar estos elementos en profundidad sino decir lo que son en términos sencillos. Se han seleccionado los elementos para este grupo porque parecen que están inmersos en el misterio, que son poco usados como conceptos o términos, o que son infravalorados de acuerdo a su papel en XUL y al desarrollo multiplataforma. En contraposición al <a class="external" href="http://www.mozilla.org/docs/jargon.html"> + <i> + Mozilla Jargon File</i> + </a>, este artículo explica los elementos de especial interés para el desarrollo web o de contenidos y pretende establecer un contexto para comprender las nuevas tecnologías de Mozilla y en particular el lenguaje de interfaces de usuario basado en XML de Mozilla: XUL.</p> +<h2 id="Chrome" name="Chrome">Chrome</h2> +<p>Algunas de las más potentes y con frecuencia incomprendidas características de XUL y del navegador Mozilla tienen que ver con chrome. El término chrome es usado en diferentes contextos para referirse a cosas distintas. En general, chrome se refiere a una interfaz XUL y a todos sus ficheros de apoyo. chrome quiere decir que el contenido y estructura XUL + la apariencia que le da CSS + cualesquiera ficheros de configuración regional y específicos de la plataforma son parte de dicha interfaz XUL. En comparación, la apariencia es sólo el CSS y los gráficos referenciados para el fichero XUL, las cadenas de texto de la configuración regional están almacenadas en un DTD y el contenido es sólo el XUL.</p> +<h3 id="La_URL_chrome" name="La_URL_chrome">La URL chrome</h3> +<p>El concepto de chrome como algo integrado y dinámico separado de alguna forma del núcleo de la aplicación se realiza a través de la url chrome apuntando a partes de XUL a sus ficheros relacionados. La url chrome se parece a las direcciones http, como se muestra en la siguiente instrucción de proceso de apariencia global:</p> +<pre class="eval"><?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +</pre> +<p>Esto especifica un chrome para que pueda ser cargado por el motor de renderizado Gecko. En el ejemplo anterior, el chrome es simplemente un fichero de apariencia cargado en el fichero XUL, aunque el chrome puede además cargar otros chromes, como cuando un menuitem de una ventana muestra un nuevo chrome:</p> +<pre class="eval"><menuitem + value="Mozilla Help" + oncommand="window.openDialog('<a class="external" rel="freelink">chrome://help/content/help.xul</a>', + '_blank', + 'chrome,all,dialog=no')" /> +</pre> +<p>En el ejemplo anterior, la url chrome se usa para apuntar a un chrome dentro de la jerarquía de paquetes de la aplicación Mozilla. Existe un chrome + <i> + Help</i> + definido en mozilla/bin/chrome/help que es invocado desde el menú de Ayuda. Nótese que cuando no se especifica el nombre de fichero en la ruta del directorio del chrome se supone que dicho nombre de fichero coincide con el del paquete. En otras palabras, una url chrome como el apuntador global de antes pediría un fichero llamado global.css y el apuntador de ayuda anterior podría ser reescrito como '<a class="external" rel="freelink">chrome://help/content</a>' dado que el nombre del paquete es "help".</p> +<h3 id="Ver_otros_chromes_que_no_son_de_Mozilla" name="Ver_otros_chromes_que_no_son_de_Mozilla">Ver otros chromes que no son de Mozilla</h3> +<p>Existe un modificador especial que puede ser usado al iniciar Mozilla con algún otro chrome diferente al predeterminado. Cuando Mozilla es ejecutado desde la línea de comandos con el modificador <code>-chrome</code>, se puede especificar el chrome que se quiera, como el del anterior ejemplo.</p> +<pre class="eval">mozilla -chrome <a class="external" rel="freelink">chrome://help/content/help.xul</a> +</pre> +<p>Esto mostrará el paquete de ayuda mencionado anteriormente como un chrome + <i> + independiente</i> + . Esta opción especial te permite crear y acceder a chromes independientes del navegador Mozilla y es un punto de inicio para explicar las posibilidades de XUL como plataforma más alla del simple rediseño del navegador.</p> +<h2 id="Paquetes" name="Paquetes">Paquetes</h2> +<p>Un paquete es de algún modo parecido a un chrome pero específico para la arquitectura de Mozilla. Un paquete es un trozo de código de interfaz que se ubica en un lugar en particular dentro de la jerarquía de paquetes de Mozilla. Como un chrome, dicho trozo generalmente alberga contenido XUL, información de apariencia CSS y gráficos, cadenas de configuración regional y quizá algo de código específico para la plataforma. El navegador es un paquete definido en mozilla/bin/chrome/navigator, la parte de correo y noticias es un paquete situado en mozilla/bin/chrome/mailnews/, etc... El directorio de cada paquete tiene tres subdirectorios: content, skin y locale; en el que se ubican el XUL, el CSS y la información de configuración regional, respectivamente:</p> +<pre class="eval">navigator/ + content/ + default/ + navigator.xul + ... + skin/ + default/ + navigator.css + nav-icon.gif + ... + locale/ + US-en/ + navigator.dtd +</pre> +<p>El directorio predeterminado (default) subyacente de cada uno de esos subdirectorios del paquete principal se asume en la url chrome (p.e.: <a class="external" rel="freelink">chrome://help/content/help.xul</a> no incluye un directorio predeterminado como parte de la url, pese a que dicho directorio exista en la estructura real). Cuando se crean diferentes chromes para un paquete, se puede crear un directorio subyacente al directorio content cuyo contenido será cargado en lugar del predeterminado. Por ejemplo, si se quiere crear una nueva apariencia con la que dotar al paquete navigator se puede crear un subdirectorio bajo navigator/skin/ cuyo contenido sea cargado en lugar del predeterminado. Así, la estructura quedaría:</p> +<pre class="eval">navigator/ + content/ + default/ + navigator.xul + ... + skin/ + default/ + navigator.css + nav-icon.gif + ... + <b>myNewSkin/</b> + newskin.css + newgifs.gif + ... + locale/ + US-en/ + navigator.dtd +</pre> +<p>Para cargar la información del chrome guardada en el paquete del nuevo directorio como el de antes, se puede usar la siguiente url chrome:</p> +<pre class="eval"><a class="external" rel="freelink">chrome://navigator/skin/myNewSkin/newskin.css</a> +</pre> +<p>que cargará los gráficos de dicho subdirectorio cuando se necesiten:</p> +<h2 id="Apariencia" name="Apariencia">Apariencia</h2> +<p>La apariencia es el conjunto de CSS y gráficos que proporcionan el aspecto o presentan a XUL. XUL por sí mismo contiene muy poca información sobre cómo deben de presentarse los controles en la interfaz. Antes incluso de que se aplique la apariencia global (la cual es cargada en casi cada fichero XUL que se ve en Mozilla y cuya ausencia de los propios ficheros XUL puede hacer que se muestren de modo extraño, sin sentido, invisibles, o todo a la vez), el fichero xul.css es cargado para proporcionar algo de información de presentación muy básica para los controles comunes. Por todo esto, CSS es una parte vital de lo que hace a XUL lo que es, especialmente con el llegada de CSS 2 y sus nuevas capacidades de posicionamiento.</p> +<p>Los cambios de apariencia son más apropiados cuando se trata de cambiar dinámicamente la apariencia general de una aplicación. Pese a que esto aún no existe en el navegador, muy pronto será posible cambiar por completo el aspecto de la aplicación dinámicamente aunque sólo para ampliar la apariencia definida en el global.css principal o en otra apariencia global. Cuando se crean estilos en las etiquetas <tags>, como atributos de estilo para elementos individuales, o en ficheros CSS personalizados se está rompiendo la capacidad de Gecko para dotar de apariencia a la aplicación a la que pertenece el XUL.</p> +<h2 id="Controles" name="Controles">Controles</h2> +<p>Los controles (widgets en inglés) son las piezas que permiten ser ensambladas para construir un interfaz. Los menús, las barras de herramientas, los botones y las barras de desplazamiento son controles y como tales son piezas de propósito general al igual que las cajas (box) y las cajas de relleno (spring). Dichos controles pueden ser creados y ubicados dentro de un fichero XUL como elementos simples: <code><menu></code>, <code><toolbar></code>, etc... La sintaxis para estos elementos está basada en su mayoría en XML. De modo colectivo, estos controles son también conocidos como el XPToolkit.</p> +<h2 id="Modelos_de_objetos_DOM_y_AOM" name="Modelos_de_objetos:_DOM_y_AOM">Modelos de objetos: DOM y AOM</h2> +<p>El Modelo de Objetos de Documento (DOM) es la representación de un documento como una serie de objetos interactivos mediante código. Cuando un lenguaje de script como JavaScript accede a las diversas partes de un documento HTML, lo hace a través del DOM. Las partes del documento, tales como la cabecera, los enlaces, el cuerpo..., cualquier etiqueta está disponible como nodos cuyos atributos pueden ser leídos y establecidos. Desafortunadamente, existen diferentes modelos de objetos de documento correspondientes a los diferentes tipos de documentos y también a las diferentes nociones propietarias sobre las que un documento debería ser accedido mediante un programa. El <a class="external" href="http://www.w3c.org">W3C</a> ha estandarizado un modelo de objetos de documento en concreto y ya tiene una recomendación candidata para una versión de actualización. Este es el DOM reflejado en XUL y en el navegador Mozilla. El DOM asienta el objeto window en el más alto nivel del árbol de nodos. El objeto window tiene nodos hijos como el objeto document, el objeto history que almacena las páginas que el usuario ha visitado, nodos de marcos, etc... siendo todos ellos accesibles mediante un programa.</p> +<p>Con las dramáticas mejoras en el modelo de objetos y el poder del DOM 2 del W3C, el concepto del DOM se ver forzado más allá del más abstracto DHTML. Dado que cualquier desarrollo web dinámico es dependiente una vez el programa accede al documento web (o a la interfaz XUL), y dado que el DOM es un estándar y las primeras nociones del HTML dinámico no, el término "DOM" es usado como sinónimo por o en lugar de términos como "HTML dinámico" o "DHTML".</p> +<p>AOM significa modelo de objetos de aplicación y es una extensión del DOM hasta la interfaz definida en XUL. Mientras que HTML es reflejado en el DOM en forma de nodos como + <i> + link</i> + , + <i> + layer</i> + e + <i> + img</i> + , XUL es reflejado en el modelo de objetos de aplicación en la jerarquía de los controles XUL: browser, menu, menuitem, etc... El DOM y el AOM forman una especie de evolución, siendo el conjunto total manipulable desde los estándares sobre los que XUL está basado.</p> +<h2 id="Casi_sin.C3.B3nimos_de_XUL" name="Casi_sin.C3.B3nimos_de_XUL">Casi sinónimos de XUL</h2> +<p>Existe una gran confusión sobre las palabras que comienzan con "X" en el proyecto de código abierto de Mozilla. La sección <a href="#Mozilla_XPArchitecture">Arquitectura XP de Mozilla</a> que se verá más adelante describe XPCOM, XPIDL y XPConnect; tres tecnologías relacionadas de alguna forma para acceder al código de la aplicación desde la interfaz. Esta sección explica XUL, XPToolkit y XPFE, que son de algún modo sinónimos y a la vez diferentes.</p> +<p>En pocas palabras, XUL es el lenguaje basado en XML usado para crear interfaces, XPToolkit es el conjunto de controles XUL (menus, toolbars, etc...) utilizados realmente para este propósito: ser los ladrillos de la interfaz, y XPFE es la parte frontal multiplataforma que ha sido creada a partir de XPToolkit.</p> +<p>Las diferencias son significativas: XUL es el universo de elementos, atributos, sintaxis, reglas y relaciones mientras que el XPToolkit es en realidad un counjunto finito de elementos específicos para el interfaz creados en XUL. EL XPFE es lo que ha sido creado fuera del XPToolkit. Una pobre relación análoga para XUL, XPToolkit y XPFE puede ser la que forman HTML, las etiquetas HTML y una página web, respectivamente.</p> +<h2 id="Partes_XUL" name="Partes_XUL">Partes XUL</h2> +<p>La gente se confunde a veces con la sintaxis que describe las partes de un control. Para un control como el menú que se muestra a continuación, + <i> + menu</i> + es el elemento y tanto + <i> + value</i> + como + <i> + id</i> + son atributos.</p> +<pre class="eval"><b><menu id="file" value="File" ></b> + <popup> + <menuitem value="New" onclick="CreateNewDoc()" /> + <menuitem value="Open" onclick="OpenDoc()" /> + <menuitem value="Close" onclick="CloseDoc()" /> + </popup> +<b></menu></b> +</pre> +<p>El elemento da nombre al item, el control, mientras que los atributos describen características de dicho elemento, tales como su nombre, su estilo, etc... En la jerga orientada a objetos, el elemento es análogo al propio objeto mientras que los atributos son como propiedades. Los atributos tienen un valor asociado a él (tales como la cadena "file" para el atributo id en el ejemplo anterior). Nótese que el elemento + <i> + menu</i> + incluye tanto una etiqueta de apertura al principio como una de cierre al final del ejemplo. De alguna forma, el elemento + <i> + menu</i> + engloba tanto al él mismo como a sus hijos, los elementos + <i> + menuitem</i> + y el elemento + <i> + popup</i> + .</p> +<h2 id="Eventos" name="Eventos">Eventos</h2> +<p>Los eventos son también origen de confusión para muchos desarrolladores inexpertos. De hecho, ni yo mismo estoy seguro de comprenderlos del todo pero aquí va una explicación simple de lo que son los eventos y de cómo utilizarlos, básicamente, en una interfaz basada en eventos como la creada en XUL. Los eventos son mensajes que son enviados desde un objeto cuando dicho objeto realiza alguna acción. Por ejemplo, un documento provoca el evento + <i> + load</i> + cuando es cargado en un navegador. El evento + <i> + click</i> + es provocado por un botón cuando es pulsado.</p> +<p>Si no se hace nada con estos eventos, entonces probablemente nunca se sabrá nada de ellos. Los documentos serán cargados, los botones serán pulsados y los enlaces serán sobrevolados... y los eventos serán provocados para cada una de esas acciones de modo imperceptible. En cambio si se escriben + <i> + manejadores de eventos</i> + dentro de + <i> + escuchadores de eventos</i> + como se explicará en breve, se podrán usar estos eventos para realizar otras acciones. El uso de eventos para disparar otros acciones más explícitas explica vagamente lo que es un modelo de eventos.</p> +<p>¿Dónde exactamente están estos eventos provocados? ¿Provocados por quién? Los eventos que son lanzados por un objeto, emergen como una + <i> + burbuja</i> + a través del modelo jerárquico que es el DOM (o el AOM) nodo a nodo. Dichos eventos pueden ser manejados en cualquier punto de la jerarquía (incluyendo el mismo nodo en el que es lanzado). Si nadie en un nivel en particular de la jerarquía está interesado en el evento, entonces el evento continúa + <i> + emergiendo</i> + al siguiente nivel superior hasta llegar a lo más alto de la jerarquía.</p> +<p>El término no es usado con frecuencia, pero un + <i> + escuchador de eventos</i> + es un atributo especial de un objeto que escucha sus propios eventos. El documento, por ejemplo, tiene un escuchador de eventos <code>onload</code> para escuchar a su evento <code>load</code>. Los botones XUL tienen escuchadores de eventos <code>onclick</code>. Los escuchadores de eventos son algo realmente útil: en lugar de usarlos se podría detectar cuándo un objeto ha disparado un evento, luego averiguar de qué evento se trataba y luego tratar el evento como respuesta, pero el escuchador de eventos proporciona un mecanismo fácil para escribir manejadores de eventos para eventos tanto comunes como específicos.</p> +<p>Un manejador de eventos es un retal de código que se escribe en respuesta a un evento. Un manejador de evento <code>onload</code> viene a decir que cuando el documento se cargue, el manejador será llamadao. Y el atributo escuchador de evento proporciona un lugar muy apropiado en el que escribir manejadores de eventos (de hecho es tan apropiado que el término + <i> + manejador de evento</i> + es frecuentemente usado para describir tanto al atributo escuchador de eventos como al código manejador de eventos). Para crear un manejador de eventos, sólo hay que escribir el código que se quiere que sea ejecutado dentro del escuchador de eventos apropiado:</p> +<pre class="eval"><menuitem value="Púlsame" onclick="alert('Evento manejado.')" /> +</pre> +<p>Esto sigue la explicación de antes de que los manejadores de eventos pueden ser escritos para eventos que son lanzados en algún nivel inferior en la jerarquía. Un menubar en XUL, por ejemplo, puede contener manejadores de eventos para los eventos lanzados por sus menuitems hijos.</p> +<h2 id="Arquitectura_XP_de_Mozilla" name="Arquitectura_XP_de_Mozilla">Arquitectura XP de Mozilla</h2> +<p>Obviamente, Mozilla es mucho más que una simple interfaz. Es multiplataforma basado en los estándares y, de algún modo, los manejadores de eventos escritos en JavaScript y que residen en la interfaz XUL se están volviendo muy importantes en el núcleo de la aplicación.</p> +<p>Cosas como interfaces para sockets, edición, correo/noticias, seguridad... Las tecnologías que hacen esto posible son quizá las menos comprendidas del conglomerado de innovaciones que es Mozilla. Además de los programar estas cosas tan importantes en C++ y compilarlas plataforma a plataforma, los arquitectos y desarrolladores de Mozilla utilizan tres tecnologías + <i> + XP</i> + que unen el núcleo con la interfaz.</p> +<p>XPCOM no es un lenguaje de programación sino una aproximación a la programación (en C++) que proporciona un auténtico modelo de objetos de componentes multiplataforma, de donde la tecnología toma su nombre. Basado en COM, XPCOM proporciona un lenguaje e interfaces independientes de la plataforma que otros objetos pueden usar para acceder a sus servicios. XPCOM refuerza las reglas para diseñar y compilar que hacen posible el uso de servicios de un objeto sin conocer nada sobre la implementación.</p> +<p>XPIDL, el lenguaje de definición de interfaces multiplataforma, es un lenguaje en el que estas interfaces asistidas por XPCOM pueden ser descritos. Usar XPIDL para describir las interfaces XPCOM hace que éstas estén disponibles en ficheros de cabecera especiales. Finalmente, XPConnect es la tecnología que conecta estas interfaces XPCOM/XPIDL con JavaScript, el lenguaje de script que utiliza XUL. La unión de estas tres tecnologías multiplataforma se ubica en mitad de una arquitectura que tiene este aspecto:</p> +<p><img align="none" alt="Bridging C++ and JavaScript"></p> +<p>Autor: <a class="link-mailto" href="mailto:oeschger@netscape.com">Ian Oeschger</a><br> + Otros documentos: <a class="external" href="http://www.mozilla.org/docs/jargon.html">Mozilla Jargon File</a> y <a href="es/Introducci%c3%b3n_a_XUL">Introducción a XUL</a></p> +<div class="originaldocinfo"> + <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + <ul> + <li>Author(s): <a class="link-mailto" href="mailto:oeschger@netscape.com">Ian Oeschger</a></li> + <li>Last Updated Date: April 16, 2000</li> + <li>Copyright Information: Copyright (C) <a class="link-mailto" href="mailto:oeschger@netscape.com">Ian Oeschger</a></li> + </ul> +</div> +<p> </p> diff --git a/files/es/archive/mozilla/xul/cómo_implementar_un_componente_procesador_de_consultas_xul/index.html b/files/es/archive/mozilla/xul/cómo_implementar_un_componente_procesador_de_consultas_xul/index.html new file mode 100644 index 0000000000..f53b35c6a3 --- /dev/null +++ b/files/es/archive/mozilla/xul/cómo_implementar_un_componente_procesador_de_consultas_xul/index.html @@ -0,0 +1,187 @@ +--- +title: Cómo implementar un componente procesador de consultas XUL +slug: Archive/Mozilla/XUL/Cómo_implementar_un_componente_procesador_de_consultas_XUL +translation_of: Archive/Mozilla/XUL/How_to_implement_a_custom_XUL_query_processor_component +--- +<p>El servicio XUL apoya el uso de plantillas para crear un bloque de contenidos a partir de una consulta a una fuente de datos. La <a href="es/Guia_de_Plantillas_XUL"> Guia de Plantillas XUL</a> presenta una gran fuente de información detallada acerca del uso de las plantillas XUL. El servicio XUL proporciona procesadores de consulta de plantillas para RDF, XML y SQL (<a href="es/Almacenamiento">mozStorage</a>). Este sistema de plantillas también da soporte a la creación de procesadores de consultas personalizadas. Los procesadores de consultas personalizadas son componentes XPCOM que deben implementar la interfaz <a href="es/NsIXULTemplateQueryProcessor">nsIXULTemplateQueryProcessor</a> y seguir algunos de los criterios que indican cuándo se deben registrar los mismos.</p> + +<p>En este ejemplo, crearemos un <a href="es/C%c3%b3mo_crear_sencillo_componente_XPCOM_en_JavaScript">sencillo componente XPCOM en JavaScript</a>. Dicho componente mantendrá una pequeña selección de objetos de JavaScript en su fuente de datos. En la práctica, se usaría una fuente propia de datos personalizada.</p> + +<p>A continuación presentamos un ejemplo del posible aspecto que podría tener nuestro servicio de XUL al utilizar un procesador de consultas personalizado:</p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <grid> + <columns> + <column flex="1"/> + <column flex="3"/> + <column flex="2"/> + <column flex="1"/> + </columns> + + <rows datasources="dummy" ref="." querytype="simpledata"> + <template> + <row uri="?"> + <label value="?name"/> + <label value="?age"/> + <label value="?hair"/> + <label value="?eye"/> + </row> + </template> + </rows> + </grid> +</window> +</pre> + +<p>Algunas cosas a tener en cuenta. En realidad no estamos utilizando las <code>fuentes de datos</code> en nuestro componente de ejemplo, por lo que lo configuraremos con un valor no válido. Un hilo vacío también valdría. El tipo de <code>consulta</code> es importante. Se usa para crear un caso de nuestro objeto XPCOM. La contracción de la identidad de nuestro componente XPCOM debería tener la forma de <code>"@mozilla.org/xul/xul-query-processor;1?name=xxx"</code>, donde las <strong>xxx</strong> representan el <code>tipo de consulta</code> utilizado en el bloque de plantillas XUL. A continuación mostramos nuestro ejemplo de procesador de consultas XPCOM de JavaScript:</p> + +<pre>Components.utils.import("resource://gre/modules/XPCOMUtils.jsm"); + + +// basic wrapper for nsIXULTemplateResult +function TemplateResult(aData) { + this._data = aData; + // just make a random number for the id + this._id = Math.random(100000).toString(); +} + +TemplateResult.prototype = { + QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsIXULTemplateResult]), + + // private storage + _data: null, + + // right now our results are flat lists, so no containing/recursion take place + isContainer: false, + isEmpty: true, + mayProcessChildren: false, + resource: null, + type: "simple-item", + + get id() { + return this._id; + }, + + // return the value of that bound variable such as ?name + getBindingFor: function(aVar) { + // strip off the ? from the beginning of the name + var name = aVar.toString().slice(1); + return this._data[name]; + }, + + // return an object instead of a string for convenient comparison purposes + // or null to say just use string value + getBindingObjectFor: function(aVar) { + return null; + }, + + // called when a rule matches this item. + ruleMatched: function(aQuery, aRuleNode) { }, + + // the output for a result has been removed and the result is no longer being used by the builder + hasBeenRemoved: function() { } +}; + + +// basic wrapper for nsISimpleEnumerator +function TemplateResultSet(aArrayOfData) { + this._index = 0; + this._array = aArrayOfData; +} + +TemplateResultSet.prototype = { + QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsISimpleEnumerator]), + + hasMoreElements: function() { + return this._index < this._array.length; + }, + + getNext: function() { + return new TemplateResult(this._array[this._index++]); + } +}; + + +// The query processor class - implements nsIXULTemplateQueryProcessor +function TemplateQueryProcessor() { + // our basic list of data + this._data = [ + {name: "mark", age: 36, hair: "brown", eye: "brown"}, + {name: "bill", age: 25, hair: "red", eye: "black"}, + {name: "joe", age: 15, hair: "blond", eye: "blue"}, + {name: "jimmy", age: 65, hair: "gray", eye: "dull"} + ]; +} + +TemplateQueryProcessor.prototype = { + QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsIXULTemplateQueryProcessor]), + classDescription: "Sample XUL Template Query Processor", + classID: Components.ID("{282cc4ea-a49c-44fc-81f4-1f03cbb7825f}"), + contractID: "@mozilla.org/xul/xul-query-processor;1?name=simpledata", + + getDatasource: function(aDataSources, aRootNode, aIsTrusted, aBuilder, aShouldDelayBuilding) { + // TODO: parse the aDataSources variable + // for now, ignore everything and let's just signal that we have data + return this._data; + }, + + initializeForBuilding: function(aDatasource, aBuilder, aRootNode) { + // perform any initialization that can be delayed until the content builder + // is ready for us to start + }, + + done: function() { + // called when the builder is destroyed to clean up state + }, + + compileQuery: function(aBuilder, aQuery, aRefVariable, aMemberVariable) { + // outputs a query object. + // eventually we should read the <query> to create filters + return this._data; + }, + + generateResults: function(aDatasource, aRef, aQuery) { + // preform any query and pass the data to the result set + return new TemplateResultSet(this._data); + }, + + addBinding: function(aRuleNode, aVar, aRef, aExpr) { + // add a variable binding for a particular rule, which we aren't using yet + }, + + translateRef: function(aDatasource, aRefstring) { + // if we return null, everything stops + return new TemplateResult(null); + }, + + compareResults: function(aLeft, aRight, aVar) { + // -1 less, 0 ==, +1 greater + if (aLeft < aRight) { + return -1; + } + else if (aLeft > aRight) { + return 1; + } + else { + return 0; + } + } +}; + + +var components = [TemplateQueryProcessor]; + +function NSGetModule(compMgr, fileSpec) { + return XPCOMUtils.generateModule(components); +} +</pre> + +<p>Nuestro ejemplo de procesador de consultas es muy fácil. Notas aclaratorias:</p> + +<ul> + <li>Estamos usando el <code>getBindingFor</code> en vez del <code>getBindingObjectFor</code> para simplificar así el código. La variable introducida en el <code>getBindingFor</code> todavía conserva las “?” por lo que debéis aseguraros de introducirla de forma correcta.</li> + <li>No se usarán cualquiera de los elementos <code><query/></code> o <code><rule/></code> en el bloque de plantillas de XUL. Se podrá hacer uso de éstas para apoyar el filtrado de fuentes de datos.</li> + <li>No estamos manejando <code>fuentes de datos</code>, sino que en su lugar, estamos introduciendo a mano el componente. Se podría ampliar fácilmente este ejemplo para manejar varias <code>fuentes de datos</code> a través de la comprobación del valor de las mismas en el <code>getDatasource</code> y en el <code>initializeForBuilding</code>.</li> + <li>No se usarán cualquiera de los elementos <code><query/></code> o <code><rule/></code> en el bloque de plantillas de XUL. Se podrá hacer uso de éstas para apoyar el filtrado de fuentes de datos.</li> +</ul> diff --git a/files/es/archive/mozilla/xul/dialog/index.html b/files/es/archive/mozilla/xul/dialog/index.html new file mode 100644 index 0000000000..90b8773539 --- /dev/null +++ b/files/es/archive/mozilla/xul/dialog/index.html @@ -0,0 +1,383 @@ +--- +title: dialog +slug: Archive/Mozilla/XUL/Dialog +translation_of: Archive/Mozilla/XUL/dialog +--- +<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/es/docs/XUL/Elementos">Referencia de XUL</a> [ + <a href="#Examples">Ejemplos</a> | + <a href="#Attributes">Atributos</a> | + <a href="#Properties">Propiedades</a> | + <a href="#Methods">Methoden</a> | + <a href="#Related">Métodos</a> ] +</span></div> + +<p>Este elemento debería utilizarse en lugar del elemento <code><a href="/es/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> para cuadros de diálogo. El atributo <code id="a-buttons"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code> puede utilizarse para configurar aquellos botones que deberían aparecer en el cuadro de diálogo. Estos botones serán colocados en el lugar correcto para la plataforma del usuario.</p> + +<p>Hay más información disponible en <a href="/en/XUL_Tutorial/Creating_Dialogs" title="en/XUL_Tutorial/Creating_Dialogs">XUL Tutorial</a> y en <a href="/en/Code_snippets/Dialogs_and_Prompts" title="en/Code_snippets/Dialogs_and_Prompts">Dialogs and prompts</a> (fragmentos de código).</p> + +<dl> + <dt>Atributos</dt> + <dd><a href="#a-buttonaccesskeyaccept">buttonaccesskeyaccept</a>, <a href="#a-buttonaccesskeycancel">buttonaccesskeycancel</a>, <a href="#a-buttonaccesskeydisclosure">buttonaccesskeydisclosure</a>, <a href="#a-buttonaccesskeyextra1">buttonaccesskeyextra1</a>, <a href="#a-buttonaccesskeyextra2">buttonaccesskeyextra2</a>, <a href="#a-buttonaccesskeyhelp">buttonaccesskeyhelp</a>, <a href="#a-buttonalign">buttonalign</a>, <a href="#a-buttondir">buttondir</a>, <a href="#a-buttondisabledaccept">buttondisabledaccept</a>, <a href="#a-buttonlabelaccept">buttonlabelaccept</a>, <a href="#a-buttonlabelcancel">buttonlabelcancel</a>, <a href="#a-buttonlabeldisclosure">buttonlabeldisclosure</a>, <a href="#a-buttonlabelextra1">buttonlabelextra1</a>, <a href="#a-buttonlabelextra2">buttonlabelextra2</a>, <a href="#a-buttonlabelhelp">buttonlabelhelp</a>, <a href="#a-buttonorient">buttonorient</a>, <a href="#a-buttonpack">buttonpack</a>, <a href="#a-buttons">buttons</a>, <a href="#a-defaultButton">defaultButton</a>, <a href="#a-ondialogaccept">ondialogaccept</a>, <a href="#a-ondialogcancel">ondialogcancel</a>, <a href="#a-ondialogdisclosure">ondialogdisclosure</a>, <a href="#a-ondialogextra1">ondialogextra1</a>, <a href="#a-ondialogextra2">ondialogextra2</a>, <a href="#a-ondialoghelp">ondialoghelp</a>, <a href="#a-title">title</a></dd> +</dl> + +<dl> + <dt>Propiedades</dt> + <dd><a href="#p-buttons">buttons</a>, <a href="#p-defaultButton">defaultButton</a></dd> +</dl> + +<dl> + <dt>Métodos</dt> + <dd><a href="#m-acceptDialog">acceptDialog</a>, <a href="#m-cancelDialog">cancelDialog</a>, <a href="#m-centerWindowOnScreen">centerWindowOnScreen</a>, <a href="#m-getButton">getButton</a>, <a href="#m-moveToAlertPosition">moveToAlertPosition</a></dd> +</dl> + +<h3 id="Examples" name="Examples">Ejemplos</h3> + +<div class="float-right"><img alt="Image:XUL_ref_dialog.png" class="internal" src="/@api/deki/files/453/=XUL_ref_dialog.png"></div> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<dialog id="donothing" title="Dialog example" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + buttons="accept,cancel" + buttonlabelcancel="Cancel" + buttonlabelaccept="Save" + ondialogaccept="return doOK();" + ondialogcancel="return doCancel();"> + + <dialogheader title="Options" description="My preferences"/> + <groupbox> + <caption label="Colour"/> + <radiogroup> + <radio label="Red"/> + <radio label="Green" selected="true"/> + <radio label="Blue"/> + </radiogroup> + <label value="Nickname"/> + <textbox /> + </groupbox> +</dialog> +</pre> + +<h3 id="Attributes" name="Attributes">Atributos</h3> + +<p> </p><div id="a-activetitlebarcolor"> + + +<dl> + <dt><code id="a-activetitlebarcolor"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/activetitlebarcolor">activetitlebarcolor</a></code> </dt> + <dd>Type: <em>color string</em></dd> + <dd>Specify background color of the window's titlebar when it is active (foreground). Moreover this hides separator between titlebar and window contents. <em>This only affects Mac OS X.</em></dd> +</dl> +</div> <div id="a-buttonaccesskeyaccept"> + +<dl> + <dt> + <code id="a-buttonaccesskeyaccept"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The access key to use for the "accept" button.</dd> +</dl> +</div> <div id="a-buttonaccesskeycancel"> + +<dl> + <dt> + <code id="a-buttonaccesskeycancel"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeycancel">buttonaccesskeycancel</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The access key to use for the "cancel" button.</dd> +</dl> +</div> <div id="a-buttonaccesskeydisclosure"> + +<dl> + <dt> + <code id="a-buttonaccesskeydisclosure"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeydisclosure">buttonaccesskeydisclosure</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The access key to use for the "disclosure" button.</dd> +</dl> +</div> <div id="a-buttonaccesskeyextra1"> + +<dl> + <dt> + <code id="a-buttonaccesskeyextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyextra1">buttonaccesskeyextra1</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The access key to use for the first extra button.</dd> +</dl> +</div> <div id="a-buttonaccesskeyextra2"> + + +<dl> + <dt><code id="a-buttonaccesskeyextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyextra2">buttonaccesskeyextra2</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The access key to use for the second extra button.</dd> +</dl> +</div> <div id="a-buttonaccesskeyhelp"> + +<dl> + <dt> + <code id="a-buttonaccesskeyhelp"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyhelp">buttonaccesskeyhelp</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The access key to use for the "help" button.</dd> +</dl> +</div> <div id="a-buttonalign"> + +<dl> + <dt> + <code id="a-buttonalign"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonalign">buttonalign</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + The value of the <code id="a-align"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> attribute for the box containing the buttons.</dd> +</dl> +</div> <div id="a-buttondir"> + + +<dl> + <dt><code id="a-buttondir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttondir">buttondir</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The value of the <code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> attribute for the box containing the buttons.</dd> +</dl> +</div> <div id="a-buttondisabledaccept"> + + +<dl> + <dt><code id="a-buttondisabledaccept"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttondisabledaccept">buttondisabledaccept</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If <code>true</code>, the accept button is disabled.</dd> +</dl> +</div> <div id="a-buttonlabelaccept"> + + +<dl> + <dt><code id="a-buttonlabelaccept"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label to appear on the "accept" button.</dd> +</dl> +</div> <div id="a-buttonlabelcancel"> + + +<dl> + <dt><code id="a-buttonlabelcancel"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelcancel">buttonlabelcancel</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label to appear on the "cancel" button.</dd> +</dl> +</div> <div id="a-buttonlabeldisclosure"> + + +<dl> + <dt><code id="a-buttonlabeldisclosure"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabeldisclosure">buttonlabeldisclosure</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label to appear on the "disclosure" button.</dd> +</dl> +</div> <div id="a-buttonlabelextra1"> + + +<dl> + <dt><code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label to appear on the first extra button.</dd> +</dl> +</div> <div id="a-buttonlabelextra2"> + + +<dl> + <dt><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label to appear on the second extra button.</dd> +</dl> +</div> <div id="a-buttonlabelhelp"> + + +<dl> + <dt><code id="a-buttonlabelhelp"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelhelp">buttonlabelhelp</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label to appear on the "help" button.</dd> +</dl> +</div> <div id="a-buttonorient"> + + +<dl> + <dt><code id="a-buttonorient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonorient">buttonorient</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The value of the <code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attribute for the box containing the buttons.</dd> +</dl> +</div> <div id="a-buttonpack"> + + +<dl> + <dt><code id="a-buttonpack"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonpack">buttonpack</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The value of the <code id="a-pack"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code> attribute for the box containing the buttons.</dd> +</dl> +</div> <div id="a-buttons"> + +<dl> + <dt> + <code id="a-buttons"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code></dt> + <dd> + Type: <em>comma-separated list of the values below</em></dd> + <dd> + A comma-separated list of buttons to appear in the dialog box. The buttons will be placed in suitable locations for the user's platform and basic event handling will be performed automatically. The following values can be used in the list: + <ul> + <li><code>accept</code>: The OK button, which will accept the changes when pressed. This button will also be the default button.</li> + <li><code>cancel</code>: The cancel button which will cancel the operation.</li> + <li><code>help</code>: A help button for displaying help about the dialog.</li> + <li><code>disclosure</code>: A button to show more information. This might be a button or a disclosure triangle.</li> + <li><code>extra1</code>: An optional additional button. You can set its label with the <code><code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></code> attribute and its command with the<code> <code><code id="a-ondialogextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogextra1">ondialogextra1</a></code></code> attribute</code>.</li> + <li><code>extra2</code>: A second optional additional button. You can set its label with the <code><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></code> attribute and its command with the<code> <code><code id="a-ondialogextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogextra2">ondialogextra2</a></code></code> attribute</code>.</li> + </ul> + </dd> +</dl> +<div class="note"><strong>Note:</strong> If you don't want to display any buttons in the dialog box, set the value of this attribute to "," (a single comma).</div> +<div class="warning"><strong>Warning:</strong> If the <code>accept</code> and <code>cancel</code> buttons are actually shown is system dependent and is mainly controlled by the value of the boolean preference <code>browser.preferences.instantApply</code>. If it is set to <code>true</code> any changes to settings are supposed to be applied immediately. The <code>accept</code> button is therefore unnecessary and is hidden. The <code>cancel</code> button might be shown as an additional possibility to close the dialog in this situation (Windows and Linux) or might be hidden, too (Mac OS).<br> + The default setting of <code>browser.preferences.instantApply</code> currently is <code>true</code> on Linux and Mac OS and <code>false</code> on Windows (which however might or might not change soon, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=738797" title="FIXED: Enable the in-content preferences by default">bug 738797</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1037225" title="FIXED: Consider keeping browser.preferences.instantApply = false on Windows">bug 1037225</a>).</div> +</div> <div id="a-defaultButton"> + + +<dl> + <dt><code id="a-defaultButton"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/defaultButton">defaultButton</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Normally this attribute should not be set, but if it is, it specifies the default button in the dialog. Typically, this means that the button will be activated when the Enter key is pressed. This should be set to one of the same values as those for the <code id="a-buttons"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code> attribute.</dd> +</dl> +</div> <div id="a-inactivetitlebarcolor"> + + +<dl> + <dt><code id="a-inactivetitlebarcolor"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/inactivetitlebarcolor">inactivetitlebarcolor</a></code> </dt> + <dd>Type: <em>color string</em></dd> + <dd>Specify background color of the window's titlebar when it is inactive (background). Moreover this hides separator between titlebar and window contents. <em>This affects only on Mac OS X.</em></dd> +</dl> +</div> <div id="a-ondialogaccept"> + + +<dl> + <dt><code id="a-ondialogaccept"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogaccept">ondialogaccept</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the accept button is pressed, or when the <span id="m-acceptDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/acceptDialog">acceptDialog</a></code></span> method is called. If the handler returns <code>true</code>, the dialog will indeed go away, but if it returns <code>false</code> it will not.</dd> +</dl> +</div> <div id="a-ondialogcancel"> + + +<dl> + <dt><code id="a-ondialogcancel"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogcancel">ondialogcancel</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the "cancel" button is pressed or when the <span id="m-cancelDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/cancelDialog">cancelDialog</a></code></span> method is called. If the routine returns true, the dialog will indeed go away, but if it returns false it will not.</dd> +</dl> +</div> <div id="a-ondialogdisclosure"> + + +<dl> + <dt><code id="a-ondialogdisclosure"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogdisclosure">ondialogdisclosure</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the "disclosure" button is pressed.</dd> +</dl> +</div> <div id="a-ondialogextra1"> + + +<dl> + <dt><code id="a-ondialogextra1"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogextra1">ondialogextra1</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the first extra button is pressed.</dd> +</dl> +</div> <div id="a-ondialogextra2"> + + +<dl> + <dt><code id="a-ondialogextra2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialogextra2">ondialogextra2</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the second extra button is pressed.</dd> +</dl> +</div> <div id="a-ondialoghelp"> + + +<dl> + <dt><code id="a-ondialoghelp"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ondialoghelp">ondialoghelp</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>The code in this attribute is called when the "help" button is pressed.</dd> +</dl> +</div> <div id="a-title"> + + +<dl> + <dt><code id="a-title"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/title">title</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The text to appear in the title bar of the window.</dd> +</dl> +</div> + +<h3 id="Properties" name="Properties">Propiedades</h3> + +<p> </p><div id="p-buttons"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/buttons">buttons</a></span></code></dt> + <dd>Typo: <em>lista de los valores de abajo separados por comas</em></dd> + <dd>Una lista separada por comas de botones que aparecerán en el cuadro de diálogo. Los botones serán puestos en lugares adecuados para la plataforma del usuario y la gestión básica de eventos se ejecutará automáticamente. En la lista pueden utilizarse los siguientes valores:</dd> +</dl> + +<ul> + <li><code>accept</code>: El botón Aceptar, que aceptará los cambios cuando se presione. Este botón también será el botón predeterminado.</li> + <li><code>cancel</code>: El botón Cancelar que cancelará la operación.</li> + <li><code>help</code>: Un boton Ayuda para mostrar ayuda sobre el diálogo.</li> + <li><code>disclosure</code>: Un botón para mostrar más información. Este podría ser un botón o un triángulo.</li> + <li><code>extra1</code>: Un botón adicional opcional. Usted puede configurar su leyenda con el atributo<code> <code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></code>.</li> + <li><code>extra2</code>: Un segundo botón adicional opcional. Usted puede configurar su leyenda con el atributo <code><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></code>.</li> +</ul></div> <div id="p-defaultButton"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/defaultButton">defaultButton</a></span></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Normally this attribute should not be set, but if it is, it specifies the default button in the dialog. Typically, this means that the button will be activated when the Enter key is pressed. This should be set to one of the same values as those for the <code id="a-buttons"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code> attribute.</dd> +</dl></div> + +<h3 id="Methods" name="Methods">Métodos</h3> + +<table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;"> +<tbody> +<tr> +<td> +<p><strong>Métodos Heredados</strong><br> +<small><code><a href="https://developer.mozilla.org/es/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a href="/es/DOM/Node.compareDocumentPosition" title="es/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <a href="/es/DOM/Node.getFeature" title="es/DOM/Node.getFeature">getFeature</a>, <a href="/es/DOM/Node.getUserData" title="es/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a href="/es/DOM/Node.isEqualNode" title="es/DOM/Node.isEqualNode">isEqualNode</a>, <a href="/es/DOM/Node.isSameNode" title="es/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.isSupported">isSupported()</a></code>, <a href="/es/DOM/Node.lookupNamespaceURI" title="es/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a href="/es/DOM/Node.lookupPrefix" title="es/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/es/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a href="/es/DOM/Node.setUserData" title="es/DOM/Node.setUserData">setUserData</a></small></p> + +</td> +</tr> +</tbody> +</table> <dl> + <dt> + <span id="m-acceptDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/acceptDialog">acceptDialog()</a></code></span></dt> + <dd> + Return type: <em>no return value</em></dd> + <dd> + Accepts the dialog and closes it, similar to pressing the OK button.</dd> +</dl> <dl> + <dt><span id="m-cancelDialog"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/cancelDialog">cancelDialog()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Cancels the dialog and closes it, similar to pressing the Cancel button.</dd> +</dl> <dl> + <dt><span id="m-centerWindowOnScreen"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/centerWindowOnScreen">centerWindowOnScreen()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Centers the dialog on the screen.</dd> +</dl> <dl> + <dt><span id="m-getButton"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getButton">getButton( type )</a></code></span></dt> + <dd>Return type: <em>button element</em></dd> + <dd>Returns the <code><a href="/en-US/docs/Mozilla/Tech/XUL/button" title="button">button</a></code> element in the dialog corresponding to the given type.</dd> +</dl> <dl> + <dt><span id="m-moveToAlertPosition"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/moveToAlertPosition">moveToAlertPosition()</a></code></span></dt> + <dd>Return type: <em>no return value</em></dd> + <dd>Moves and resizes the dialog to a position and size suitable for an alert box.</dd> +</dl> + +<h3 id="Related" name="Related">Relacionado</h3> + +<dl> + <dt>Elementos</dt> + <dd><code><a href="/es/docs/Mozilla/Tech/XUL/dialogheader" title="dialogheader">dialogheader</a></code></dd> +</dl> diff --git a/files/es/archive/mozilla/xul/elementos/index.html b/files/es/archive/mozilla/xul/elementos/index.html new file mode 100644 index 0000000000..99aa60adfc --- /dev/null +++ b/files/es/archive/mozilla/xul/elementos/index.html @@ -0,0 +1,323 @@ +--- +title: Elementos +slug: Archive/Mozilla/XUL/Elementos +tags: + - Todas_las_Categorías + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/elements +--- +<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th colspan="3">Todos los elementos XUL (ordenados alfabéticamente)</th> + </tr> + <tr> + <td> + <p><a class="internal" href="/es/XUL/action" title="es/XUL/action">action</a><br> + <a class="internal" href="/Es/XUL/Arrowscrollbox" title="Es/XUL/Arrowscrollbox">arrowscrollbox</a><br> + <a class="internal" href="/Es/XUL/Assign" title="es/XUL/Assign">assign</a><br> + <a class="internal" href="/Es/XUL/Bbox" title="es/XUL/bbox">bbox</a><br> + <a class="internal" href="/es/XUL/binding" title="es/XUL/binding">binding</a><br> + <a class="internal" href="/es/XUL/bindings" title="es/XUL/bindings">bindings</a><br> + <a class="internal" href="/es/XUL/box" title="es/XUL/box">box</a><br> + <a class="internal" href="/es/XUL/broadcaster" title="es/XUL/broadcaster">broadcaster</a><br> + <a class="internal" href="/es/XUL/broadcasterset" title="es/XUL/broadcasterset">broadcasterset</a><br> + <a class="internal" href="/es/XUL/button" title="es/XUL/button">button</a><br> + <a class="internal" href="/es/XUL/browser" title="es/XUL/browser">browser</a><br> + <a class="internal" href="/es/XUL/checkbox" title="es/XUL/checkbox">checkbox</a><br> + <a class="internal" href="/es/XUL/caption" title="es/XUL/caption">caption</a><br> + <a class="internal" href="/es/XUL/colorpicker" title="es/XUL/colorpicker">colorpicker</a><br> + <a class="internal" href="/es/XUL/column" title="es/XUL/column">column</a><br> + <a class="internal" href="/es/XUL/columns" title="es/XUL/columns">columns</a><br> + <a class="internal" href="/es/XUL/commandset" title="es/XUL/commandset">commandset</a><br> + <a class="internal" href="/es/XUL/command" title="es/XUL/command">command</a><br> + <a class="internal" href="/es/XUL/conditions" title="es/XUL/conditions">conditions</a><br> + <a class="internal" href="/es/XUL/content" title="es/XUL/content">content</a><br> + <a class="internal" href="/es/XUL/datepicker" title="es/XUL/datepicker">datepicker</a><br> + <a class="internal" href="/es/XUL/deck" title="es/XUL/deck">deck</a><br> + <a class="internal" href="/es/XUL/description" title="es/XUL/description">description</a><br> + <a class="internal" href="/Es/XUL/Dialog" title="es/XUL/dialog">dialog</a><br> + <a class="internal" href="/es/XUL/dialogheader" title="es/XUL/dialogheader">dialogheader</a><br> + <a class="internal" href="/es/XUL/dropmarker" title="es/XUL/dropmarker">dropmarker</a><br> + <a class="internal" href="/es/XUL/editor" title="es/XUL/editor">editor</a><br> + <a class="internal" href="/es/XUL/grid" title="es/XUL/grid">grid</a><br> + <a class="internal" href="/es/XUL/grippy" title="es/XUL/grippy">grippy</a><br> + <a class="internal" href="/es/XUL/groupbox" title="es/XUL/groupbox">groupbox</a><br> + <a class="internal" href="/es/XUL/hbox" title="es/XUL/hbox">hbox</a><br> + <a class="internal" href="/es/XUL/iframe" title="es/XUL/iframe">iframe</a><br> + <a class="internal" href="/es/XUL/image" title="es/XUL/image">image</a><br> + <a class="internal" href="/es/XUL/key" title="es/XUL/key">key</a><br> + <a class="internal" href="/es/XUL/keyset" title="es/XUL/keyset">keyset</a><br> + <a class="internal" href="/es/XUL/label" title="es/XUL/label">label</a><br> + <a class="internal" href="/es/XUL/listbox" title="es/XUL/listbox">listbox</a><br> + <a class="internal" href="/es/XUL/listcell" title="es/XUL/listcell">listcell</a><br> + <a class="internal" href="/es/XUL/listcol" title="es/XUL/listcol">listcol</a><br> + <a class="internal" href="/es/XUL/listcols" title="es/XUL/listcols">listcols</a><br> + <a class="internal" href="/es/XUL/listhead" title="es/XUL/listhead">listhead</a><br> + <a class="internal" href="/es/XUL/listheader" title="es/XUL/listheader">listheader</a><br> + <a class="internal" href="/es/XUL/listitem" title="es/XUL/listitem">listitem</a></p> + </td> + <td> + <p><a class="internal" href="/es/XUL/member" title="es/XUL/member">member</a><br> + <a class="internal" href="/es/XUL/menu" title="es/XUL/menu">menu</a><br> + <a class="internal" href="/es/XUL/menubar" title="es/XUL/menubar">menubar</a><br> + <a class="internal" href="/es/XUL/menuitem" title="es/XUL/menuitem">menuitem</a><br> + <a class="internal" href="/es/XUL/menulist" title="es/XUL/menulist">menulist</a><br> + <a class="internal" href="/es/XUL/menupopup" title="es/XUL/menupopup">menupopup</a><br> + <a class="internal" href="/es/XUL/menuseparator" title="es/XUL/menuseparator">menuseparator</a><br> + <a class="internal" href="/es/XUL/notification" title="es/XUL/notification">notification</a><br> + <a class="internal" href="/es/XUL/notificationbox" title="es/XUL/notificationbox">notificationbox</a><br> + <a class="internal" href="/es/XUL/observes" title="es/XUL/observes">observes</a><br> + <a class="internal" href="/es/XUL/overlay" title="es/XUL/overlay">overlay</a><br> + <a class="internal" href="/es/XUL/page" title="es/XUL/page">page</a><br> + <a class="internal" href="/es/XUL/panel" title="es/XUL/panel">panel</a><br> + <a class="internal" href="/es/XUL/param" title="es/XUL/param">param</a><br> + <a class="internal" href="/es/XUL/popupset" title="es/XUL/popupset">popupset</a><br> + <a class="internal" href="/es/XUL/preference" title="es/XUL/preference">preference</a><br> + <a class="internal" href="/es/XUL/preferences" title="es/XUL/preferences">preferences</a><br> + <a class="internal" href="/es/XUL/prefpane" title="es/XUL/prefpane">prefpane</a><br> + <a class="internal" href="/es/XUL/prefwindow" title="es/XUL/prefwindow">prefwindow</a><br> + <a class="internal" href="/es/XUL/progressmeter" title="es/XUL/progressmeter">progressmeter</a><br> + <a class="internal" href="/es/XUL/query" title="es/XUL/query">query</a><br> + <a class="internal" href="/es/XUL/queryset" title="es/XUL/queryset">queryset</a><br> + <a class="internal" href="/es/XUL/radio" title="es/XUL/radio">radio</a><br> + <a class="internal" href="/es/XUL/radiogroup" title="es/XUL/radiogroup">radiogroup</a><br> + <a class="internal" href="/es/XUL/resizer" title="es/XUL/resizer">resizer</a><br> + <a class="internal" href="/es/XUL/richlistbox" title="es/XUL/richlistbox">richlistbox</a><br> + <a class="internal" href="/es/XUL/richlistitem" title="es/XUL/richlistitem">richlistitem</a><br> + <a class="internal" href="/es/XUL/row" title="es/XUL/row">row</a><br> + <a class="internal" href="/es/XUL/rows" title="es/XUL/rows">rows</a><br> + <a class="internal" href="/es/XUL/rule" title="es/XUL/rule">rule</a><br> + <a class="internal" href="/es/XUL/scale" title="es/XUL/scale">scale</a><br> + <a class="internal" href="/es/XUL/script" title="es/XUL/script">script</a><br> + <a class="internal" href="/es/XUL/scrollbar" title="es/XUL/scrollbar">scrollbar</a><br> + <a class="internal" href="/es/XUL/scrollbox" title="es/XUL/scrollbox">scrollbox</a><br> + <a class="internal" href="/es/XUL/scrollcorner" title="es/XUL/scrollcorner">scrollcorner</a><br> + <a class="internal" href="/es/XUL/separator" title="es/XUL/separator">separator</a><br> + <a class="internal" href="/es/XUL/spacer" title="es/XUL/spacer">spacer</a><br> + <a class="internal" href="/es/XUL/spinbuttons" title="es/XUL/spinbuttons">spinbuttons</a><br> + <a class="internal" href="/es/XUL/splitter" title="es/XUL/splitter">splitter</a><br> + <a class="internal" href="/es/XUL/stack" title="es/XUL/stack">stack</a><br> + <a class="internal" href="/Es/XUL/Statusbar" title="es/XUL/statusbar">statusbar</a></p> + </td> + <td> + <p><a class="internal" href="/es/XUL/statusbarpanel" title="es/XUL/statusbarpanel">statusbarpanel</a><br> + <a class="internal" href="/es/XUL/stringbundle" title="es/XUL/stringbundle">stringbundle</a><br> + <a class="internal" href="/es/XUL/stringbundleset" title="es/XUL/stringbundleset">stringbundleset</a><br> + <a class="internal" href="/es/XUL/tab" title="es/XUL/tab">tab</a><br> + <a class="internal" href="/es/XUL/tabbrowser" title="es/XUL/tabbrowser">tabbrowser</a> (Firefox-a partir de<br> + Firefox 3/Gecko 1.9)<br> + <a class="internal" href="/es/XUL/tabbox" title="es/XUL/tabbox">tabbox</a><br> + <a class="internal" href="/es/XUL/tabpanel" title="es/XUL/tabpanel">tabpanel</a><br> + <a class="internal" href="/es/XUL/tabpanels" title="es/XUL/tabpanels">tabpanels</a><br> + <a class="internal" href="/es/XUL/tabs" title="es/XUL/tabs">tabs</a><br> + <a class="internal" href="/es/XUL/template" title="es/XUL/template">template</a><br> + <a class="internal" href="/es/XUL/textnode" title="es/XUL/textnode">textnode</a><br> + <a class="internal" href="/es/XUL/textbox" title="es/XUL/textbox">textbox</a><br> + <a class="internal" href="/es/XUL/textbox_(Firefox_autocomplete)" title="es/XUL/textbox (Firefox autocomplete)">textbox (Firefox autocomplete)</a><br> + <a class="internal" href="/es/XUL/textbox_(Mozilla_autocomplete)" title="es/XUL/textbox (Mozilla autocomplete)">textbox (Mozilla autocomplete)</a><br> + <a class="internal" href="/es/XUL/timepicker" title="es/XUL/timepicker">timepicker</a><br> + <a class="internal" href="/es/XUL/titlebar" title="es/XUL/titlebar">titlebar</a><br> + <a class="internal" href="/es/XUL/toolbar" title="es/XUL/toolbar">toolbar</a><br> + <a class="internal" href="/es/XUL/toolbarbutton" title="es/XUL/toolbarbutton">toolbarbutton</a><br> + <a class="internal" href="/es/XUL/toolbargrippy" title="es/XUL/toolbargrippy">toolbargrippy</a><br> + <a class="internal" href="/es/XUL/toolbaritem" title="es/XUL/toolbaritem">toolbaritem</a><br> + <a class="internal" href="/es/XUL/toolbarpalette" title="es/XUL/toolbarpalette">toolbarpalette</a><br> + <a class="internal" href="/es/XUL/toolbarseparator" title="es/XUL/toolbarseparator">toolbarseparator</a><br> + <a class="internal" href="/es/XUL/toolbarset" title="es/XUL/toolbarset">toolbarset</a><br> + <a class="internal" href="/es/XUL/toolbarspacer" title="es/XUL/toolbarspacer">toolbarspacer</a><br> + <a class="internal" href="/es/XUL/toolbarspring" title="es/XUL/toolbarspring">toolbarspring</a><br> + <a class="internal" href="/es/XUL/toolbox" title="es/XUL/toolbox">toolbox</a><br> + <a class="internal" href="/es/XUL/tooltip" title="es/XUL/tooltip">tooltip</a><br> + <a class="internal" href="/es/XUL/tree" title="es/XUL/tree">tree</a><br> + <a class="internal" href="/es/XUL/treecell" title="es/XUL/treecell">treecell</a><br> + <a class="internal" href="/es/XUL/treechildren" title="es/XUL/treechildren">treechildren</a><br> + <a class="internal" href="/es/XUL/treecol" title="es/XUL/treecol">treecol</a><br> + <a class="internal" href="/es/XUL/treecols" title="es/XUL/treecols">treecols</a><br> + <a class="internal" href="/es/XUL/treeitem" title="es/XUL/treeitem">treeitem</a><br> + <a class="internal" href="/es/XUL/treerow" title="es/XUL/treerow">treerow</a><br> + <a class="internal" href="/es/XUL/treeseparator" title="es/XUL/treeseparator">treeseparator</a><br> + <a class="internal" href="/es/XUL/triple" title="es/XUL/triple">triple</a><br> + <a class="internal" href="/es/XUL/vbox" title="es/XUL/vbox">vbox</a><br> + <a class="internal" href="/es/XUL/where" title="es/XUL/where">where</a><br> + <a class="internal" href="/es/XUL/window" title="es/XUL/window">window</a><br> + <a class="internal" href="/es/XUL/wizard" title="es/XUL/wizard">wizard</a><br> + <a class="internal" href="/es/XUL/wizardpage" title="es/XUL/wizardpage">wizardpage</a></p> + </td> + </tr> + </tbody> +</table> +<h1 id="Referencia_de_XUL">Referencia de XUL</h1> +<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th colspan="3">Elementos XUL por categoría</th> + </tr> + <tr> + <td> + <p><u><strong>VENTANAS</strong></u></p> + <p><a class="internal" href="/Es/XUL/Dialog" title="es/XUL/dialog">dialog</a><br> + <a class="internal" href="/es/XUL/overlay" title="es/XUL/overlay">overlay</a><br> + <a class="internal" href="/es/XUL/page" title="es/XUL/page">page</a><br> + <a class="internal" href="/es/XUL/window" title="es/XUL/window">window</a><br> + <a class="internal" href="/es/XUL/wizard" title="es/XUL/wizard">wizard</a><br> + <a class="internal" href="/es/XUL/wizardpage" title="es/XUL/wizardpage">wizardpage</a><br> + <a class="internal" href="/es/XUL/preference" title="es/XUL/preference">preference</a><br> + <a class="internal" href="/es/XUL/preferences" title="es/XUL/preferences">preferences</a><br> + <a class="internal" href="/es/XUL/prefpane" title="es/XUL/prefpane">prefpane</a><br> + <a class="internal" href="/es/XUL/prefwindow" title="es/XUL/prefwindow">prefwindow</a></p> + <p><u><strong>ESTRUCTURA<br> + DE VENTANAS</strong></u></p> + <p><a class="internal" href="/es/XUL/browser" title="es/XUL/browser">browser</a><br> + <a class="internal" href="/es/XUL/tabbrowser" title="es/XUL/tabbrowser">tabbrowser</a><br> + <a class="internal" href="/es/XUL/editor" title="es/XUL/editor">editor</a><br> + <a class="internal" href="/es/XUL/iframe" title="es/XUL/iframe">iframe</a><br> + <a class="internal" href="/es/XUL/titlebar" title="es/XUL/titlebar">titlebar</a><br> + <a class="internal" href="/es/XUL/resizer" title="es/XUL/resizer">resizer</a><br> + <a class="internal" href="/Es/XUL/Statusbar" title="es/XUL/statusbar">statusbar</a><br> + <a class="internal" href="/es/XUL/statusbarpanel" title="es/XUL/statusbarpanel">statusbarpanel</a><br> + <a class="internal" href="/es/XUL/dialogheader" title="es/XUL/dialogheader">dialogheader</a><br> + <a class="internal" href="/es/XUL/notification" title="es/XUL/notification">notification</a><br> + <a class="internal" href="/es/XUL/notificationbox" title="es/XUL/notificationbox">notificationbox</a></p> + <p><u><strong>MENUS Y VENTANAS<br> + EMERGENTES</strong></u></p> + <p><a class="internal" href="/es/XUL/menubar" title="es/XUL/menubar">menubar</a><br> + <a class="internal" href="/es/XUL/menu" title="es/XUL/menu">menu</a><br> + <a class="internal" href="/es/XUL/menuitem" title="es/XUL/menuitem">menuitem</a><br> + <a class="internal" href="/es/XUL/menuseparator" title="es/XUL/menuseparator">menuseparator</a><br> + <a class="internal" href="/es/XUL/menupopup" title="es/XUL/menupopup">menupopup</a><br> + <a class="internal" href="/es/XUL/panel" title="es/XUL/panel">panel</a><br> + <a class="internal" href="/es/XUL/tooltip" title="es/XUL/tooltip">tooltip</a><br> + <a class="internal" href="/es/XUL/popupset" title="es/XUL/popupset">popupset</a></p> + <p><u><strong>BARRAS DE<br> + HERRAMIENTAS</strong></u></p> + <p><a class="internal" href="/es/XUL/toolbar" title="es/XUL/toolbar">toolbar</a><br> + <a class="internal" href="/es/XUL/toolbarbutton" title="es/XUL/toolbarbutton">toolbarbutton</a><br> + <a class="internal" href="/es/XUL/toolbargrippy" title="es/XUL/toolbargrippy">toolbargrippy</a><br> + <a class="internal" href="/es/XUL/toolbaritem" title="es/XUL/toolbaritem">toolbaritem</a><br> + <a class="internal" href="/es/XUL/toolbarpalette" title="es/XUL/toolbarpalette">toolbarpalette</a><br> + <a class="internal" href="/es/XUL/toolbarseparator" title="es/XUL/toolbarseparator">toolbarseparator</a><br> + <a class="internal" href="/es/XUL/toolbarset" title="es/XUL/toolbarset">toolbarset</a><br> + <a class="internal" href="/es/XUL/toolbarspacer" title="es/XUL/toolbarspacer">toolbarspacer</a><br> + <a class="internal" href="/es/XUL/toolbarspring" title="es/XUL/toolbarspring">toolbarspring</a><br> + <a class="internal" href="/es/XUL/toolbox" title="es/XUL/toolbox">toolbox</a></p> + <p><u><strong>PESTAÑAS Y<br> + AGRUPAMIENTO</strong></u></p> + <p><a class="internal" href="/es/XUL/tabbox" title="es/XUL/tabbox">tabbox</a><br> + <a class="internal" href="/es/XUL/tabs" title="es/XUL/tabs">tabs</a><br> + <a class="internal" href="/es/XUL/tab" title="es/XUL/tab">tab</a><br> + <a class="internal" href="/es/XUL/tabpanels" title="es/XUL/tabpanels">tabpanels</a><br> + <a class="internal" href="/es/XUL/tabpanel" title="es/XUL/tabpanel">tabpanel</a><br> + <a class="internal" href="/es/XUL/groupbox" title="es/XUL/groupbox">groupbox</a><br> + <a class="internal" href="/es/XUL/caption" title="es/XUL/caption">caption</a><br> + <a class="internal" href="/es/XUL/separator" title="es/XUL/separator">separator</a><br> + <a class="internal" href="/es/XUL/spacer" title="es/XUL/spacer">spacer</a></p> + </td> + <td> + <p><u><strong>CONTROLES</strong></u></p> + <p><a class="internal" href="/es/XUL/button" title="es/XUL/button">button</a><br> + <a class="internal" href="/es/XUL/checkbox" title="es/XUL/checkbox">checkbox</a><br> + <a class="internal" href="/es/XUL/colorpicker" title="es/XUL/colorpicker">colorpicker</a><br> + <a class="internal" href="/es/XUL/datepicker" title="es/XUL/datepicker">datepicker</a><br> + <a class="internal" href="/es/XUL/menulist" title="es/XUL/menulist">menulist</a><br> + <a class="internal" href="/es/XUL/progressmeter" title="es/XUL/progressmeter">progressmeter</a><br> + <a class="internal" href="/es/XUL/radio" title="es/XUL/radio">radio</a><br> + <a class="internal" href="/es/XUL/radiogroup" title="es/XUL/radiogroup">radiogroup</a><br> + <a class="internal" href="/es/XUL/scale" title="es/XUL/scale">scale</a><br> + <a class="internal" href="/es/XUL/splitter" title="es/XUL/splitter">splitter</a><br> + <a class="internal" href="/es/XUL/textbox" title="es/XUL/textbox">textbox</a><br> + <a class="internal" href="/es/XUL/textbox_(Firefox_autocomplete)" title="es/XUL/textbox (Firefox autocomplete)">textbox (Firefox autocomplete)</a><br> + <a class="internal" href="/es/XUL/textbox_(Mozilla_autocomplete)" title="es/XUL/textbox (Mozilla autocomplete)">textbox (Mozilla autocomplete)</a><br> + <a class="internal" href="/es/XUL/timepicker" title="es/XUL/timepicker">timepicker</a></p> + <p><u><strong>TEXTO E<br> + IMAGENES</strong></u></p> + <p><a class="internal" href="/es/XUL/description" title="es/XUL/description">description</a><br> + <a class="internal" href="/es/XUL/label" title="es/XUL/label">label</a><br> + <a class="internal" href="/es/XUL/image" title="es/XUL/image">image</a></p> + <p><u><strong>LISTAS</strong></u></p> + <p><a class="internal" href="/es/XUL/listbox" title="es/XUL/listbox">listbox</a><br> + <a class="internal" href="/es/XUL/listitem" title="es/XUL/listitem">listitem</a><br> + <a class="internal" href="/es/XUL/listcell" title="es/XUL/listcell">listcell</a><br> + <a class="internal" href="/es/XUL/listcol" title="es/XUL/listcol">listcol</a><br> + <a class="internal" href="/es/XUL/listcols" title="es/XUL/listcols">listcols</a><br> + <a class="internal" href="/es/XUL/listhead" title="es/XUL/listhead">listhead</a><br> + <a class="internal" href="/es/XUL/listheader" title="es/XUL/listheader">listheader</a><br> + <a class="internal" href="/es/XUL/richlistbox" title="es/XUL/richlistbox">richlistbox</a><br> + <a class="internal" href="/es/XUL/richlistitem" title="es/XUL/richlistitem">richlistitem</a></p> + <p><u><strong>ARBOLES</strong></u></p> + <p><a class="internal" href="/es/XUL/tree" title="es/XUL/tree">tree</a><br> + <a class="internal" href="/es/XUL/treecell" title="es/XUL/treecell">treecell</a><br> + <a class="internal" href="/es/XUL/treechildren" title="es/XUL/treechildren">treechildren</a><br> + <a class="internal" href="/es/XUL/treecol" title="es/XUL/treecol">treecol</a><br> + <a class="internal" href="/es/XUL/treecols" title="es/XUL/treecols">treecols</a><br> + <a class="internal" href="/es/XUL/treeitem" title="es/XUL/treeitem">treeitem</a><br> + <a class="internal" href="/es/XUL/treerow" title="es/XUL/treerow">treerow</a><br> + <a class="internal" href="/es/XUL/treeseparator" title="es/XUL/treeseparator">treeseparator</a></p> + <p> </p> + </td> + <td> + <p><u><strong>DISPOSICION</strong></u></p> + <p><a class="internal" href="/es/XUL/box" title="es/XUL/box">box</a><br> + <a class="internal" href="/es/XUL/hbox" title="es/XUL/hbox">hbox</a><br> + <a class="internal" href="/es/XUL/vbox" title="es/XUL/vbox">vbox</a><br> + <a class="internal" href="/Es/XUL/Bbox" title="es/XUL/bbox">bbox</a><br> + <a class="internal" href="/es/XUL/deck" title="es/XUL/deck">deck</a><br> + <a class="internal" href="/es/XUL/stack" title="es/XUL/stack">stack</a><br> + <a class="internal" href="/es/XUL/grid" title="es/XUL/grid">grid</a><br> + <a class="internal" href="/es/XUL/columns" title="es/XUL/columns">columns</a><br> + <a class="internal" href="/es/XUL/column" title="es/XUL/column">column</a><br> + <a class="internal" href="/es/XUL/rows" title="es/XUL/rows">rows</a><br> + <a class="internal" href="/es/XUL/row" title="es/XUL/row">row</a><br> + <a class="internal" href="/es/XUL/scrollbox" title="es/XUL/scrollbox">scrollbox</a></p> + <p><u><strong>PLANTILLAS</strong></u></p> + <p><a class="internal" href="/es/XUL/action" title="es/XUL/action">action</a><br> + <a class="internal" href="/Es/XUL/Assign" title="es/XUL/assign">assign</a><br> + <a class="internal" href="/es/XUL/binding" title="es/XUL/binding">binding</a><br> + <a class="internal" href="/es/XUL/bindings" title="es/XUL/bindings">bindings</a><br> + <a class="internal" href="/es/XUL/conditions" title="es/XUL/conditions">conditions</a><br> + <a class="internal" href="/es/XUL/content" title="es/XUL/content">content</a><br> + <a class="internal" href="/es/XUL/member" title="es/XUL/member">member</a><br> + <a class="internal" href="/es/XUL/param" title="es/XUL/param">param</a><br> + <a class="internal" href="/es/XUL/query" title="es/XUL/query">query</a><br> + <a class="internal" href="/es/XUL/queryset" title="es/XUL/queryset">queryset</a><br> + <a class="internal" href="/es/XUL/rule" title="es/XUL/rule">rule</a><br> + <a class="internal" href="/es/XUL/template" title="es/XUL/template">template</a><br> + <a class="internal" href="/es/XUL/textnode" title="es/XUL/textnode">textnode</a><br> + <a class="internal" href="/es/XUL/triple" title="es/XUL/triple">triple</a><br> + <a class="internal" href="/es/XUL/where" title="es/XUL/where">where</a></p> + <p><u><strong>SCRIPTING</strong></u></p> + <p><a class="internal" href="/es/XUL/script" title="es/XUL/script">script</a><br> + <a class="internal" href="/es/XUL/commandset" title="es/XUL/commandset">commandset</a><br> + <a class="internal" href="/es/XUL/command" title="es/XUL/command">command</a><br> + <a class="internal" href="/es/XUL/broadcaster" title="es/XUL/broadcaster">broadcaster</a><br> + <a class="internal" href="/es/XUL/broadcasterset" title="es/XUL/broadcasterset">broadcasterset</a><br> + <a class="internal" href="/es/XUL/observes" title="es/XUL/observes">observes</a><br> + <a class="internal" href="/es/XUL/key" title="es/XUL/key">key</a><br> + <a class="internal" href="/es/XUL/keyset" title="es/XUL/keyset">keyset</a><br> + <a class="internal" href="/es/XUL/stringbundle" title="es/XUL/stringbundle">stringbundle</a><br> + <a class="internal" href="/es/XUL/stringbundleset" title="es/XUL/stringbundleset">stringbundleset</a></p> + <p><u><strong>ELEMENTOS<br> + DE AYUDA</strong></u></p> + <p><a class="internal" href="/es/XUL/scrollbar" title="es/XUL/scrollbar">arrowscrollbox</a><br> + <a href="/en/XUL/dropmarker" title="en/XUL/dropmarker">dropmarker</a><br> + <a class="internal" href="/es/XUL/grippy" title="es/XUL/grippy">grippy</a><br> + <a class="internal" href="/es/XUL/scrollbar" title="es/XUL/scrollbar">scrollbar</a><br> + <a class="internal" href="/es/XUL/scrollcorner" title="es/XUL/scrollcorner">scrollcorner</a><br> + <a class="internal" href="/es/XUL/spinbuttons" title="es/XUL/spinbuttons">spinbuttons</a></p> + </td> + </tr> + </tbody> +</table> +<h3 id="Other_XUL_lists" name="Other_XUL_lists">Otras listas de XUL</h3> +<ul> + <li><a class="internal" href="/Es/XUL/Attribute" title="es/XUL/Attribute">Todos los atributos</a></li> + <li><a class="internal" href="/Es/XUL/Property" title="es/XUL/Property">Todas las propiedades</a></li> + <li><a class="internal" href="/Es/XUL/Method" title="es/XUL/Method">Todos los métodos</a></li> + <li><a class="internal" href="/Es/XUL_element_attributes" title="es/XUL element attributes">Atributos definidos para todos los elementos de XUL</a></li> + <li><a class="internal" href="/Es/XUL/Style" title="es/XUL/Style">Clases de estilo</a></li> + <li><a class="internal" href="/Es/XUL/Events" title="es/XUL/Events">Gestión de eventos</a></li> + <li><a class="internal" href="/Es/XUL/Deprecated//Defunct_Markup" title="es/XUL/Deprecated//Defunct Markup">Obsoletos/Marcado extinto</a></li> +</ul> diff --git a/files/es/archive/mozilla/xul/events/index.html b/files/es/archive/mozilla/xul/events/index.html new file mode 100644 index 0000000000..1911016926 --- /dev/null +++ b/files/es/archive/mozilla/xul/events/index.html @@ -0,0 +1,460 @@ +--- +title: Eventos +slug: Archive/Mozilla/XUL/Events +translation_of: Archive/Mozilla/XUL/Events +--- +<p> </p> + +<p><a href="https://developer.mozilla.org/es/docs/XUL/Elementos" title="« Referencia de XUL">« Referencia de XUL</a></p> + +<p> </p> + +<p>The following tables describe the event handler that are valid for most XUL elements. The events listeners can be attached using <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener"> addEventListener</a> and removed using <a href="/en/DOM/element.removeEventListener" title="en/DOM/element.removeEventListener"> removeEventListener</a>.</p> + +<p>Some of the events can be attached using attributes as well. When attaching event listeners using attributes, be aware that only one listener can be attached at a time. Any previously attached listeners are disconnected. The attribute name is the event name with an 'on' prefix.</p> + +<h3 id="Inherited_DOM_events" name="Inherited_DOM_events">Inherited DOM events</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Event</th> + <th>Description</th> + </tr> + <tr> + <td> + <p>blur</p> + </td> + <td> + <p>The opposite of the focus event, the blur event is passed after an element loses the focus.<br> + <strong>attribute:</strong> onblur</p> + </td> + </tr> + <tr> + <td> + <p>change</p> + </td> + <td> + <p>This event is sent when the value of the textbox is changed. The event is not sent until the focus is moved to another element.<br> + <strong>attribute:</strong> onchange</p> + </td> + </tr> + <tr> + <td> + <p>click</p> + </td> + <td> + <p>This event is sent when a mouse button is pressed and released. You can determine which mouse button was clicked by retrieving the <code>button</code> property of the event object. This event is also sent when the user double-clicks with the mouse. The <code>detail</code> property specifies how many clicks occurred. You can also check for triple-clicks in a similar manner. You should not use this event in XUL to respond to user actions; the <code>command</code> event should be used instead.<br> + <strong>attribute:</strong> onclick</p> + </td> + </tr> + <tr> + <td> + <p>dblclick</p> + </td> + <td> + <p>This event is like the click event except it is only sent when the user double clicks with the mouse. This is an alternative to checking the detail property in the click event.<br> + <strong>attribute:</strong> ondblclick</p> + </td> + </tr> + <tr> + <td> + <p>DOMMouseScroll</p> + </td> + <td> + <p>This event is sent when the mouse wheel is moved, whether it results in content being scrolled or not.<br> + The target of this event is the element that was under the mouse pointer when the mouse wheel was scrolled, similar to the <code>click</code> event.</p> + </td> + </tr> + <tr> + <td> + <p>focus</p> + </td> + <td> + <p>The focus event is sent to an element when it receives the focus. Once an element has the focus, keyboard events are sent to it. The focus can be changed by clicking on an element or by pressing TAB to switch to the next element is sequence.<br> + <strong>attribute:</strong> onfocus</p> + </td> + </tr> + <tr> + <td> + <p>keydown</p> + </td> + <td> + <p>The keydown event is sent to an element that has the focus and a key is pressed but not released.<br> + <strong>attribute:</strong> onkeydown</p> + </td> + </tr> + <tr> + <td> + <p>keypress</p> + </td> + <td> + <p>The keypress event is sent to an element that has the focus and a key is pressed and released. When the user presses a key, the keydown event is first sent, followed by the keypress event and then the keyup event. In a textbox, a user normally can hold down a key to repeat a character In this case, multiple sets of key events are sent as if the user rapidly pressed the same key repeatedly.<br> + <strong>attribute:</strong> onkeypress</p> + </td> + </tr> + <tr> + <td> + <p>keyup</p> + </td> + <td> + <p>The keyup event is sent to an element that has the focus and a key is released.<br> + <strong>attribute:</strong> onkeyup</p> + </td> + </tr> + <tr> + <td> + <p>load</p> + </td> + <td> + <p>This event is sent to the window after it has been fully loaded. You should place this event handler on the window element. This event may also be used on the image element, or an element that accepts an image attribute, and will be fired when the image has finished loading. For images, this event does not bubble up the element tree, so it will not conflict with the window's load event.<br> + <strong>attribute:</strong> onload</p> + </td> + </tr> + <tr> + <td> + <p>mousedown</p> + </td> + <td> + <p>This event is sent when the mouse is pressed on an element but not released.<br> + <strong>attribute:</strong> onmousedown</p> + </td> + </tr> + <tr> + <td> + <p>mousemove</p> + </td> + <td> + <p>This event is sent repeatedly as the mouse is moved over an element.<br> + <strong>attribute:</strong> onmousemove</p> + </td> + </tr> + <tr> + <td> + <p>mouseout</p> + </td> + <td> + <p>This mouseout event is sent to an element when the user moves the mouse outside the element. This event is the reverse of mouseover.<br> + <strong>attribute:</strong> onmouseout</p> + </td> + </tr> + <tr> + <td> + <p>mouseover</p> + </td> + <td> + <p>This event is sent to an element when the mouse first moves over an element. You can use this event to provide feedback to the user.<br> + <strong>attribute:</strong> onmouseover</p> + </td> + </tr> + <tr> + <td> + <p>mouseup</p> + </td> + <td> + <p>This event is sent when the mouse is released on an element.<br> + <strong>attribute:</strong> onmouseup</p> + </td> + </tr> + <tr> + <td> + <p>select</p> + </td> + <td> + <p>This event is sent to a listbox or tree when an item is selected.<br> + <strong>attribute:</strong> onselect</p> + </td> + </tr> + <tr> + <td> + <p>unload</p> + </td> + <td> + <p>This event is sent to a window when the window has closed. This is done after the close event. You should place this event handler on the window element.<br> + <strong>attribute:</strong> onunload</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Mutation_DOM_events" name="Mutation_DOM_events">Mutation DOM events</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Event</th> + <th>Description</th> + </tr> + <tr> + <td> + <p>DOMAttrModified</p> + </td> + <td> + <p>This event is sent to an element when one of its attributes is modified. In the event handler, you can retrieve the attribute that was modified using the event's attrName property, and you can retrieve the old and new values of the attribute using the event's prevValue and newValue properties.</p> + </td> + </tr> + <tr> + <td> + <p>DOMNodeInserted</p> + </td> + <td> + <p>This event is sent when a node is added as a child of a element. If you capture this event at the document level, you can be notified of document changes.</p> + </td> + </tr> + <tr> + <td> + <p>DOMNodeRemoved</p> + </td> + <td> + <p>This event is sent when a node is removed from an element. If you capture this event at the document level, you can be notified of document changes.</p> + </td> + </tr> + </tbody> +</table> + +<p>It should be noted that the presence of any mutation event listeners in a document degrades the performance of subsequent DOM operations in that document. In simple tests that can mean that a DOM operation takes between 1.5 and 7 as long as it would without any mutation listener.</p> + +<h3 id="Common_XUL_events" name="Common_XUL_events">Common XUL events</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Event</th> + <th>Description</th> + </tr> + <tr> + <td> + <p>broadcast</p> + </td> + <td> + <p>The event handler should be placed on an observer. The broadcast event is sent when the attributes of the element (such as a broadcaster) being listened to are changed.<br> + <strong>attribute:</strong> onbroadcast</p> + </td> + </tr> + <tr> + <td> + <p>close</p> + </td> + <td> + <p>This event is sent when a request has been made to close the window when the user presses the close button. If you place an event handler on the window element, you can trap the window close. If you return false from the close handler, the window will not close. Return true to have it close normally. Note that this event is only fired when the user presses the close button on the titlebar; use the unload event to capture all attempts to unload the window.<br> + <strong>attribute:</strong> onclose</p> + </td> + </tr> + <tr> + <td> + <p>command</p> + </td> + <td> + <p>This event handler is called when an element is activated. How it is activated varies for each element and in many cases, there are several ways to activate an element. For example, a button can be activated by clicking on it with the mouse or by pressing ENTER while it has the focus. Menus can be activated by selecting them with the mouse or by pressing a shortcut key. You should always use the command event instead of click because it will be called in all of the needed cases.<br> + <strong>attribute:</strong> oncommand</p> + </td> + </tr> + <tr> + <td> + <p>commandupdate</p> + </td> + <td> + <p>This event occurs when a command update occurs on a <commandset> element. You would use this to update the disabled status of its commands.<br> + <strong>attribute:</strong> oncommandupdate</p> + </td> + </tr> + <tr> + <td> + <p>contextmenu</p> + </td> + <td> + <p>This event is sent to an element when the user requests to open the context menu for the element. The action to do this varies by platform, but it will typically be a right click. This handler is usually used to dynamically set the commands on a menu when the user requests to display it, or you can use popupshowing event. Returning false from this event handler prevents the popup from appearing.<br> + <strong>attribute:</strong> oncontextmenu</p> + </td> + </tr> + <tr> + <td> + <p>drag </p> + </td> + <td> + <p>The drag event is sent to the source node (the node that was dragged) several times a second while the drag is occurring.<br> + <strong>attribute:</strong> ondrag</p> + </td> + </tr> + <tr> + <td> + <p>dragdrop</p> + </td> + <td> + <p>This event is sent when the user releases the mouse button to drop an object being dragged. The element, if it accepts the drop, should respond in some manner such inserting the dragged object into itself.<br> + <strong>attribute:</strong> ondragdrop</p> + </td> + </tr> + <tr> + <td> + <p>dragend </p> + </td> + <td> + <p>The dragend event is sent to the source node (the node that was dragged) when the drag is finished.<br> + <strong>attribute:</strong> ondragend</p> + </td> + </tr> + <tr> + <td> + <p>dragenter</p> + </td> + <td> + <p>The dragenter event is sent when the mouse pointer first moves over an element during a drag. It is similar to the mouseover event but occurs while dragging.<br> + <strong>attribute:</strong> ondragenter</p> + </td> + </tr> + <tr> + <td> + <p>dragexit</p> + </td> + <td> + <p>This event is sent when the mouse pointer moves away from an element during a drag. It is also called after a drop on an element. It is similar to the mouseout event but occurs during a drag.<br> + <strong>attribute:</strong> ondragexit</p> + </td> + </tr> + <tr> + <td> + <p>draggesture</p> + </td> + <td> + <p>This event is sent when the user starts dragging the element, usually by holding down the mouse button and moving the mouse.<br> + <strong>attribute:</strong> ondraggesture</p> + </td> + </tr> + <tr> + <td> + <p>dragover</p> + </td> + <td> + <p>Related to the mousemove event, this event is sent while something is being dragged over an element. The handler should indicate whether the object being dragged can be dropped.<br> + <strong>attribute:</strong> ondragover</p> + </td> + </tr> + <tr> + <td> + <p>input</p> + </td> + <td> + <p>This event is sent when a user enters text in a textbox. This event is only called when the text displayed would change, thus it is not called when the user presses non-displayable keys.<br> + <strong>attribute:</strong> oninput</p> + </td> + </tr> + <tr> + <td> + <p>overflow</p> + </td> + <td> + <p>This event is only sent to a box or other layout element with a CSS overflow property set to a value other than 'visible'. When there is not enough space to display the contents of the element at full size, the overflow event will be fired. Depending on the value of the overflow property, scrollbars may have appeared. For example, if a box has a maximum size of 100 pixels, and only enough space for 80 pixels is available, the overflow event will be sent to the box. If the size changes, for example, by the user resizing the window, the underflow event will be fired when enough space becomes available.<br> + <strong>attribute:</strong> onoverflow</p> + </td> + </tr> + <tr> + <td> + <p>popuphidden</p> + </td> + <td> + <p>This event is sent to a popup after it has been hidden.<br> + <strong>attribute:</strong> onpopuphidden</p> + </td> + </tr> + <tr> + <td> + <p>popuphiding</p> + </td> + <td> + <p>This event is sent to a popup when it is about to be hidden.<br> + <strong>attribute:</strong> onpopuphiding</p> + </td> + </tr> + <tr> + <td> + <p>popupshowing</p> + </td> + <td> + <p>This event is sent to a popup just before it is popped open. This handler is usually used to dynamically set the contents when the user requests to display it. Returning false from this event handler prevents the popup from appearing.<br> + <strong>attribute:</strong> onpopupshowing</p> + </td> + </tr> + <tr> + <td> + <p>popupshown</p> + </td> + <td> + <p>This is event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened.<br> + <strong>attribute:</strong> onpopupshown</p> + </td> + </tr> + <tr> + <td> + <p>syncfrompreference</p> + </td> + <td> + <p>This event is sent when the element is being changed because a preference changed, or when an element is initialized from a preference. This event will only be sent to elements connected to a preference and in a <a href="/en/XUL/prefwindow" title="en/XUL/prefwindow"> prefwindow</a>. This is not a real event instead it is just a function call and must use the attribute syntax. The script may return a value to set the element to a specific value rather than the value of the preference. This event is usually used to adjust the preference value so that it is more suitable for display in the user interface.<br> + <strong>attribute:</strong> onsyncfrompreference</p> + </td> + </tr> + <tr> + <td> + <p>synctopreference</p> + </td> + <td> + <p>This event is sent when the element connected to a preference has changed. This event will only be sent to elements connected to a preference and in a <a href="/en/XUL/prefwindow" title="en/XUL/prefwindow"> prefwindow</a>. This is not a real event instead it is just a function call and must use the attribute syntax. The script may return a value to set the preference to a specific value rather than the value of the element.<br> + <strong>attribute:</strong> onsynctopreference</p> + </td> + </tr> + <tr> + <td> + <p>underflow</p> + </td> + <td> + <p>This event is sent to an element when there becomes enough space to display it at full size. This applies to boxes and other layout elements with a CSS overflow property other than 'visible'. The underflow event can be used to indicate that a scrolling mechanism is no longer necessary.<br> + <strong>attribute:</strong> onunderflow</p> + </td> + </tr> + <tr> + <td> + <p>DOMMenuItemActive</p> + </td> + <td> + <p>This event is sent when a menu or menuitem is hovered over, or highlighted. This event bubbles.</p> + </td> + </tr> + <tr> + <td> + <p>DOMMenuItemInactive</p> + </td> + <td> + <p>This event is sent when a menu or menuitem is no longer being hovered over, or highlighted. This event bubbles.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Accessibility_events" name="Accessibility_events">Accessibility events</h3> + +<p>These events are used to notify the accessibility system of changes to an element. You would not normally use these yourself.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Event</th> + <th>Description</th> + </tr> + <tr> + <td> + <p>CheckboxStateChange</p> + </td> + <td> + <p>This event is sent when a <a href="/en/XUL/checkbox" title="en/XUL/checkbox"> checkbox</a> is checked or unchecked, either by the user or a script. Normally, you would use the command event to listen to checkbox changes, however, the command event is only sent when the user modifies the value, while the CheckboxStateChange event is also sent when a script modifies the checked property of a checkbox. For user changes, the CheckboxStateChange event is sent before the command event. The CheckboxStateChange event does not bubble.</p> + </td> + </tr> + <tr> + <td> + <p>RadioStateChange</p> + </td> + <td> + <p>This event is sent when a <a href="/en/XUL/radio" title="en/XUL/radio"> radio</a> button is selected, either by the user or a script. Normally, you would use the command event to listen to radio button selection changes, however, the command event is only sent when the user changes the selected radio button, while the RadioStateChange event is also sent when a script modifies the selection. For user changes, the RadioStateChange event is sent before the command event. The RadioStateChange event bubbles so you can also attach the event handler to the enclosing <a href="/en/XUL/radiogroup" title="en/XUL/radiogroup"> radiogroup</a>.</p> + </td> + </tr> + </tbody> +</table> diff --git a/files/es/archive/mozilla/xul/guía_de_plantillas/index.html b/files/es/archive/mozilla/xul/guía_de_plantillas/index.html new file mode 100644 index 0000000000..6a22cc7d9b --- /dev/null +++ b/files/es/archive/mozilla/xul/guía_de_plantillas/index.html @@ -0,0 +1,6 @@ +--- +title: Guía de plantillas +slug: Archive/Mozilla/XUL/Guía_de_plantillas +translation_of: Archive/Mozilla/XUL/Template_Guide +--- +<p>This page was auto-generated because a user created a sub-page to this page.</p> diff --git a/files/es/archive/mozilla/xul/guía_de_plantillas/ordenar_resultados/index.html b/files/es/archive/mozilla/xul/guía_de_plantillas/ordenar_resultados/index.html new file mode 100644 index 0000000000..916878ae02 --- /dev/null +++ b/files/es/archive/mozilla/xul/guía_de_plantillas/ordenar_resultados/index.html @@ -0,0 +1,100 @@ +--- +title: Ordenar resultados +slug: Archive/Mozilla/XUL/Guía_de_plantillas/Ordenar_resultados +tags: + - Guía_de_plantillas_XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Template_Guide/Sorting_Results +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/XUL:Guía_de_plantillas:Modificaciones_RDF" style="float: left;">« Anterior</a><a href="/es/docs/XUL:Guía_de_plantillas:Atributos_adicionales_para_las_plantillas">Siguiente »</a></p> +</div> + +<p>The template content builder uses a separate component to insert generated nodes into the content tree. This is done when inserting the nodes when they are first created as well as when a new result is available. This additional component is called the sort service. It is responsible for determining where to insert nodes into the XUL document. Since the component is called the 'sort service' it is also used to sort the generated results. Since an RDF graph doesn't specify any order to results -- unless the items are in an RDF Seq -- the template builder will handle the results in any order. You may have noticed in the examples that results that are not in a Seq are not output in any particular order.</p> + +<p>The sort service may be used to order the results in some particular order, generally, ascending or descending based on the value of some predicate pointing out of the result node. The sort service also supports a third sort order, natural order, which is the default. It causes items to appear without any extra sorting in the order they are added. However, if the results are items in a Seq they will appear in the order listed in the Seq. For instance, the photos are listed in the same order in <a class="external" href="http://developer.mozilla.org/samples/xultemp/template-guide-ex19.xul">this example</a> as they appear in the Seq in the <a class="external" href="http://developer.mozilla.org/samples/xultemp/template-guide-photos4.rdf">datasource</a>.</p> + +<p>This method of sorting a Seq works best for simple rule conditions since it is obvious how the starting ref relates to the end member results (they are just the children), or for extended syntax rules that follow a similar pattern. For more complex rules, this natural sorting will not work, because the sort service assumes that the starting ref resource is the container and the end results are the children. In this case, the natural order of the results will just be the order that the template builder generates the results.</p> + +<p>For ascending or descending sorts, this doesn't matter, since it will ignore whether results are containers and just sort by a value, alphabetically or numerically depending on the type of data.</p> + +<p>The sort service only applies to content builders. The tree builder uses a different and much simpler means of sorting since there is no content to insert. It supports the same three types of sorting, natural, ascending or descending. In the latter two sort types, the tree builder sorts by the value in a column. For instance, if the photos were displayed in a two column tree showing the title and description, you could sort by either title or description. The user can change the sort column and direction by clicking the column headers, however, you can programmatically change the sort as well.</p> + +<h3 id="Sorting_Tree_Results">Sorting Tree Results</h3> + +<p>We'll examine sorting of trees first since trees are the most common element used with sorted items. Using a tree builder, you can sort the results in a tree by a column. To do this, place a sort attribute on a <treecol> element referring to the variable to sort by for that column.</p> + +<pre><treecol id="name" label="Name" sort="?name" flex="1"/> +<treecol id="date" label="Date" sort="?date" flex="1"/> +</pre> + +<p>In this example, the first column will be sorted by the ?name variable and the second column by the ?date variable. When the sort is ascending, the tree rows will be sorted in alphabetical order. When the sort is descending, the tree rows will be sorted in the reverse order. For natural sorting, the rows will be sorted according to the natural order in the RDF datasource. Only one column applies a sort at a time. If the tree is sorted by name, and the user clicks on the date column header, the sort will change to the date column.</p> + +<p>There are two additional attributes used for sorting, which you may set on a column to specify the initial sort. These attributes are modified when the user changes the sort. The sortDirection attribute may be used to specify the initial sort direction for a column. Only one column should have this attribute set, as a tree may only be sorted by one column at a time. The value should be either 'ascending', 'descending' or 'natural'. This last value is the default if the attribute is not specified. The sortActive attribute may be set to true or false and specifies which column the tree is sorted by. Only one column should have the sortActive attribute set to true at a time. The tree will change both attributes as necessary automatically when the column headers are clicked or the tree is sorted by other means.</p> + +<p>If you don't want to allow sorting by a certain column, you can leave out the sort attribute. Only specify this attribute on columns that you wish to allow the user to sort by.</p> + +<p>Here is a <a class="external" href="http://developer.mozilla.org/samples/xultemp/template-guide-ex41.xul">complete example</a> of sorting a tree.</p> + +<p>The sort attribute should be set to the variable that holds the values to sort by. Usually, this would be the same variable that is used to generate the label for the cells in that column, however this is not actually necessary. For instance, in the example the second column sorts by date, but if you were to use a different variable such as ?description, assuming a <binding> set it, the tree would sort by the value of the description variable for each row. In almost all situations however, you would normally sort using the same variable used for the label value. However, one situation where this is not desirable is if the displayed values would not generate the correct order as there is a lower representation that is more accurate. For example, the date 'May 15' would appear after 'August 24' when sorted purely alphabetically but before it when sorted chronologically.</p> + +<p>Another way to sort by dates is to use the the parseType="Date" construct in the RDF datasource. This marks a literal as being a date value rather than a string. The builder will recognize this and sort chronologically instead. This also has the advantage that the dates will be displayed according to the user's current locale (meaning that the date is formatted so as to be suitable for the user's language). Here is a sample of how to specify this in the RDF/XML datasource:</p> + +<pre><rdf:RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:r="http://www.xulplanet.com/rdf/" + xmlns:nc="http://home.netscape.com/NC-rdf#"> + <rdf:Description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"> + <r:date nc:parseType="Date">1125966767295<r:date> + </rdf:Description> +</rdf:RDF> +</pre> + +<p>You can also specify parseType="Integer" for numbers which will allow sorting numerically. By specifing different types for different values, you can sort alphabetically, numerically or by date.</p> + +<p>If you are using the simple rule syntax, there are no variables, so you need to specify the full predicate including the rdf: prefix in the sort attribute. For instance:</p> + +<pre><treecol id="name" label="Name" sort="rdf:http://purl.org/dc/elements/1.1/title" flex="1"/> +</pre> + +<p>Note that all of this discussion about sorting only applies to tree builders. For other elements or content trees, a different sorting mechanism must be used which will be discussed next.</p> + +<h3 id="Content_Sorting">Content Sorting</h3> + +<p>For content builders (templates that do not use flags="dont-build-content"), sorting is done using a different means. Instead of sorting on a variable generated during the template generation, sorting for content builders may only be performed using a triple pointing out of the member variable. There is no connection between the generated variables and the resource used for sorting, so it doesn't have to be one used in the template.</p> + +<p>You specify the resource used for sorting with the sortResource attribute on the root element, as follows:</p> + +<pre><hbox datasources="template-guide-photos5.rdf" + sortResource="http://purl.org/dc/elements/1.1/title" + sortDirection="ascending" + ref="http://www.xulplanet.com/rdf/myphotos"> + <template> + <vbox class="box-padded" uri="rdf:*"> + <image src="rdf:*"/> + <label value="rdf:http://purl.org/dc/elements/1.1/title"/> + </vbox> + </template> +</hbox> +</pre> + +<p>In <a class="external" href="http://developer.mozilla.org/samples/xultemp/template-guide-ex42.xul">this example</a>, the generated items will be sorted by title. The sortDirection attribute specifies the sort direction and may be set to "descending" for a reverse sort. The sortDirection attribute functions similarly to how the tree builder uses it. With a tree builder, each column has its own sort specified using the sort attribute, and the sortActive attribute is used to indicate the column that is currently sorted. For other content, there are no columns and only one sort is applicable, so the sortActive attribute is not necessary.</p> + +<p>When the template builder generates a result, the sort service uses the value of the sortResource predicate for the result to determine where in the content the generated output should be inserted. When the RDF datasource changes, and a new result is available, the sort service inserts the new content at the right location.</p> + +<p>Unlike with trees, you can sort using a secondary resource with the sortResource2 attribute which is used in the same manner as the sortResource attribute. If the values for the sortResource predicate are the same for two results, the sortResource2 predicate is used to further clarify the order. You can only have one secondary resource, that is, there is no sortResource3 attribute.</p> + +<p>To change the sorting for a template's generated contents, you can either change the sort related attributes and rebuild the template, or for listboxes and menus, you can call the sort service's sort method:</p> + +<pre>var listbox = document.getElementById("aListBox"); + +var sortService = Components.classes["@mozilla.org/xul/xul-sort-service;1"]. + getService(Components.interfaces.nsIXULSortService); +sortService.sort(listbox, "http://purl.org/dc/elements/1.1/title", "descending"); +</pre> + +<p>This code will sort a listbox by title in a descending order. The arguments to the sort method specify the root node (the listbox), the sort resource and the sort direction.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/XUL:Guía_de_plantillas:Modificaciones_RDF" style="float: left;">« Anterior</a><a href="/es/docs/XUL:Guía_de_plantillas:Atributos_adicionales_para_las_plantillas">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/index.html b/files/es/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..1189079118 --- /dev/null +++ b/files/es/archive/mozilla/xul/index.html @@ -0,0 +1,28 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - Todas_las_Categorías + - XUL +translation_of: Archive/Mozilla/XUL +--- +<p> </p> +<div class="callout-box"><strong><a href="/es/Tutorial_de_XUL" title="es/Tutorial_de_XUL">Empezando</a></strong><br> +Tutorial de introducción a XUL, documento original de XULPlanet.</div> +<div> +<p><strong>XUL</strong> es el <em>lenguaje <a href="/es/XML" title="es/XML">XML</a> para interfaces de usuario</em> de Mozilla. Te permite crear potentes aplicaciones multiplataforma que pueden ejecutarse con conexión a Internet o sin ella. Estas aplicaciones son fácilmente personalizables con texto alternativo, gráficos, y diseños por lo que pueden ser fácilmente instalados o traducidos para diversos mercados. Los desarrolladores web que estén familiarizados con HTML Dinámico (<a href="/es/DHTML" title="es/DHTML">DHTML</a>) pueden aprender XUL fácilmente y empezar a crear aplicaciones ya.</p> +</div> +<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentación"><a href="/Special:Tags?tag=XUL&language=es" title="Special:Tags?tag=XUL&language=es">Documentación</a></h4> <dl> <dt><a href="/es/XUL/Elementos" title="es/XUL/Elementos">Referencia XUL</a></dt> <dd><small>Vea también la documentación del MDC sobre <a href="/es/Sistema_de_preferencias" title="es/Sistema_de_preferencias">prefwindow</a>.</small></dd> </dl> <dl> <dt><a href="/es/Bestiario_XUL" title="es/Bestiario_XUL">Bestiario XUL</a></dt> <dd><small> Esta "XULNote" muestra algunos conceptos clave y términos en el entorno de desarrollo XUL.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.hevanet.com/acorbin/xul/top.xul">Xul Periodic Table <small>(en)</small></a></dt> <dd><small>Échale un vistazo a los elementos de una Interfaz XUL.</small></dd> </dl> <dl> <dt><a class="external" href="http://es.wikibooks.org/wiki/XUL/Introducci%C3%B3n">Wikilibro de XUL</a></dt> <dd><small> Wikilibro con una introducción al lenguaje XUL. </small></dd> </dl> <p><span><a href="/Special:Tags?tag=XUL&language=es" title="Special:Tags?tag=XUL&language=es">Ver Todos...</a></span></p> </td> <td> <h4 id="Comunidad">Comunidad</h4> <ul> <li>En los foros de Mozilla Hispano. <ul> <li><a class="external" href="http://www.mozilla-hispano.org/foro/viewforum.php?f=8">Desarrollo en XUL</a></li> </ul> </li> </ul> <ul> <li><a class="external" href="http://groups.google.com/group/dexul/">Lista sobre XUL en español</a></li> </ul> <ul> <li>En la comunidad Mozilla... en inglés.</li> </ul> <p></p><ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-tech-xul"> como lista de correo</a></li> + + + <li><a href="http://groups.google.com/group/mozilla.dev.tech.xul"> como grupo de noticias</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.tech.xul/feeds"> como RSS</a></li> +</ul> <span>* <a class="external" href="http://xulplanet.com/forum/" title="http://xulplanet.com/forum/">Foros de XULPlanet (en)</a></span><p></p> <p><span><a href="/es/XUL/Comunidad" title="es/XUL/Comunidad">Ver todas...</a></span></p> <h4 id="Herramientas">Herramientas</h4> <ul> <li><a class="external" href="http://starkravingfinkle.org/blog/xul-explorer/">XUL Explorer</a> (un sencillo IDE para XUL)</li> <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extensión para desarrolladores</a> (Editor XUL en tiempo real)</li> <li><a class="external" href="http://www.extensionsmirror.nl/index.php?showtopic=751">Barra lateral XULRef</a></li> <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> <li><a href="/es/DOM_Inspector" title="es/DOM_Inspector">DOM Inspector</a></li> <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, IDE para XUL/XBL</li> </ul> <p><span><a href="/Special:Tags?tag=XUL:Herramientas&language=es" title="Special:Tags?tag=XUL:Herramientas&language=es">Ver todas...</a></span></p> <h4 id="Temas_relacionados">Temas relacionados</h4> <dl> <dd><a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>, <a href="/es/XBL" title="es/XBL">XBL</a>, <a href="/es/CSS" title="es/CSS">CSS</a>, <a href="/es/RDF" title="es/RDF">RDF</a>, <a href="/es/Extensiones" title="es/Extensiones">Extensiones</a>, <a href="/es/XULRunner" title="es/XULRunner">XULRunner</a></dd> </dl> </td> </tr> </tbody> +</table> +<p><span>Categorías</span></p> +<p><span>Interwiki Language Links</span> <span>automatismos</span></p> +<p> </p> +<p> </p> +<p> </p> +<p></p> diff --git a/files/es/archive/mozilla/xul/method/index.html b/files/es/archive/mozilla/xul/method/index.html new file mode 100644 index 0000000000..101edc07d5 --- /dev/null +++ b/files/es/archive/mozilla/xul/method/index.html @@ -0,0 +1,174 @@ +--- +title: Métodos +slug: Archive/Mozilla/XUL/Method +translation_of: Archive/Mozilla/XUL/Method +--- +<p><span class="breadcrumbs XULRefMeth_breadcrumbs">« <a href="/es/docs/XUL/Elementos" title="/es/docs/XUL/Elementos">Referencia de XUL</a></span></p> + +<ul> + <li><a href="/es/XUL/Method/acceptDialog" title="es/XUL/Method/acceptDialog">acceptDialog</a></li> + <li><a href="/es/XUL/Method/addItemToSelection" title="es/XUL/Method/addItemToSelection">addItemToSelection</a></li> + <li><a href="/es/XUL/Method/addPane" title="es/XUL/Method/addPane">addPane</a></li> + <li><a href="/es/XUL/Method/addProgressListener" title="es/XUL/Method/addProgressListener">addProgressListener</a></li> + <li><a href="/es/XUL/Method/addSession" title="es/XUL/Method/addSession">addSession</a></li> + <li><a href="/es/XUL/Method/addTab" title="es/XUL/Method/addTab">addTab</a></li> + <li><a href="/es/XUL/Method/advance" title="es/XUL/Method/advance">advance</a></li> + <li><a href="/es/XUL/Method/advanceSelectedTab" title="es/XUL/Method/advanceSelectedTab">advanceSelectedTab</a></li> + <li><a href="/es/XUL/Method/appendCustomToolbar" title="es/XUL/Method/appendCustomToolbar">appendCustomToolbar</a></li> + <li><a href="/es/XUL/Method/appendGroup" title="es/XUL/Method/appendGroup">appendGroup</a></li> + <li><a href="/es/XUL/Method/appendItem" title="es/XUL/Method/appendItem">appendItem</a></li> + <li><a href="/es/XUL/Method/appendNotification" title="es/XUL/Method/appendNotification">appendNotification</a></li> + <li><a href="/es/XUL/Method/blur" title="es/XUL/Method/blur">blur</a></li> + <li><a href="/es/XUL/Method/cancel" title="es/XUL/Method/cancel">cancel</a></li> + <li><a href="/es/XUL/Method/cancelDialog" title="es/XUL/Method/cancelDialog">cancelDialog</a></li> + <li><a href="/es/XUL/Method/centerWindowOnScreen" title="es/XUL/Method/centerWindowOnScreen">centerWindowOnScreen</a></li> + <li><a href="/es/XUL/Method/checkAdjacentElement" title="es/XUL/Method/checkAdjacentElement">checkAdjacentElement</a></li> + <li><a href="/es/XUL/Method/clearResults" title="es/XUL/Method/clearResults">clearResults</a></li> + <li><a href="/es/XUL/Method/clearSelection" title="es/XUL/Method/clearSelection">clearSelection</a></li> + <li><a href="/es/XUL/Method/click" title="es/XUL/Method/click">click</a></li> + <li><a href="/es/XUL/Method/close" title="es/XUL/Method/close">close</a></li> + <li><a href="/es/XUL/Method/collapseToolbar" title="es/XUL/Method/collapseToolbar">collapseToolbar</a></li> + <li><a href="/es/XUL/Method/contains" title="es/XUL/Method/contains">contains</a></li> + <li><a href="/es/XUL/Method/decrease" title="es/XUL/Method/decrease">decrease</a></li> + <li><a href="/es/XUL/Method/decreasePage" title="es/XUL/Method/decreasePage">decreasePage</a></li> + <li><a href="/es/XUL/Method/doCommand" title="es/XUL/Method/doCommand">doCommand</a></li> + <li><a href="/es/XUL/Method/ensureElementIsVisible" title="es/XUL/Method/ensureElementIsVisible">ensureElementIsVisible</a></li> + <li><a href="/es/XUL/Method/ensureIndexIsVisible" title="es/XUL/Method/ensureIndexIsVisible">ensureIndexIsVisible</a></li> + <li><a href="/es/XUL/Method/ensureSelectedElementIsVisible" title="es/XUL/Method/ensureSelectedElementIsVisible">ensureSelectedElementIsVisible</a></li> + <li><a href="/es/XUL/Method/expandToolbar" title="es/XUL/Method/expandToolbar">expandToolbar</a></li> + <li><a href="/es/XUL/Method/extra1" title="es/XUL/Method/extra1">extra1</a></li> + <li><a href="/es/XUL/Method/extra2" title="es/XUL/Method/extra2">extra2</a></li> + <li><a href="/es/XUL/Method/focus" title="es/XUL/Method/focus">focus</a></li> + <li><a href="/es/XUL/Method/getBrowserAtIndex" title="es/XUL/Method/getBrowserAtIndex">getBrowserAtIndex</a></li> + <li><a href="/es/XUL/Method/getBrowserForDocument" title="es/XUL/Method/getBrowserForDocument">getBrowserForDocument</a></li> + <li><a href="/es/XUL/Method/getBrowserForTab" title="es/XUL/Method/getBrowserForTab">getBrowserForTab</a></li> + <li><a href="/es/XUL/Method/getBrowserIndexForDocument" title="es/XUL/Method/getBrowserIndexForDocument">getBrowserIndexForDocument</a></li> + <li><a href="/es/XUL/Method/getButton" title="es/XUL/Method/getButton">getButton</a></li> + <li><a href="/es/XUL/Method/getDefaultSession" title="es/XUL/Method/getDefaultSession">getDefaultSession</a></li> + <li><a href="/es/XUL/Method/getEditor" title="es/XUL/Method/getEditor">getEditor</a></li> + <li><a href="/es/XUL/Method/getElementsByAttribute" title="es/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></li> + <li><a href="/es/XUL/Method/getElementsByAttributeNS" title="es/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></li> + <li><a href="/es/XUL/Method/getFormattedString" title="es/XUL/Method/getFormattedString">getFormattedString</a></li> + <li><a href="/es/XUL/Method/getHTMLEditor" title="es/XUL/Method/getHTMLEditor">getHTMLEditor</a></li> + <li><a href="/es/XUL/Method/getIndexOfFirstVisibleRow" title="es/XUL/Method/getIndexOfFirstVisibleRow">getIndexOfFirstVisibleRow</a></li> + <li><a href="/es/XUL/Method/getIndexOfItem" title="es/XUL/Method/getIndexOfItem">getIndexOfItem</a></li> + <li><a href="/es/XUL/Method/getItemAtIndex" title="es/XUL/Method/getItemAtIndex">getItemAtIndex</a></li> + <li><a href="/es/XUL/Method/getNextItem" title="es/XUL/Method/getNextItem">getNextItem</a></li> + <li><a href="/es/XUL/Method/getNotificationBox" title="es/XUL/Method/getNotificationBox">getNotificationBox</a></li> + <li><a href="/es/XUL/Method/getNotificationWithValue" title="es/XUL/Method/getNotificationWithValue">getNotificationWithValue</a></li> + <li><a href="/es/XUL/Method/getNumberOfVisibleRows" title="es/XUL/Method/getNumberOfVisibleRows">getNumberOfVisibleRows</a></li> + <li><a href="/es/XUL/Method/getPageById" title="es/XUL/Method/getPageById">getPageById</a></li> + <li><a href="/es/XUL/Method/getPreviousItem" title="es/XUL/Method/getPreviousItem">getPreviousItem</a></li> + <li><a href="/es/XUL/Method/getResultAt" title="es/XUL/Method/getResultAt">getResultAt</a></li> + <li><a href="/es/XUL/Method/getResultCount" title="es/XUL/Method/getResultCount">getResultCount</a></li> + <li><a href="/es/XUL/Method/getResultValueAt" title="es/XUL/Method/getResultValueAt">getResultValueAt</a></li> + <li><a href="/es/XUL/Method/getRowCount" title="es/XUL/Method/getRowCount">getRowCount</a></li> + <li><a href="/es/XUL/Method/getSearchAt" title="es/XUL/Method/getSearchAt">getSearchAt</a></li> + <li><a href="/es/XUL/Method/getSelectedItem" title="es/XUL/Method/getSelectedItem">getSelectedItem</a></li> + <li><a href="/es/XUL/Method/getSession" title="es/XUL/Method/getSession">getSession</a></li> + <li><a href="/es/XUL/Method/getSessionByName" title="es/XUL/Method/getSessionByName">getSessionByName</a></li> + <li><a href="/es/XUL/Method/getSessionResultAt" title="es/XUL/Method/getSessionResultAt">getSessionResultAt</a></li> + <li><a href="/es/XUL/Method/getSessionStatusAt" title="es/XUL/Method/getSessionStatusAt">getSessionStatusAt</a></li> + <li><a href="/es/XUL/Method/getSessionValueAt" title="es/XUL/Method/getSessionValueAt">getSessionValueAt</a></li> + <li><a href="/es/XUL/Method/getString" title="es/XUL/Method/getString">getString</a></li> + <li><a href="/es/XUL/Method/goBack" title="es/XUL/Method/goBack">goBack</a></li> + <li><a href="/es/XUL/Method/goBackGroup" title="es/XUL/Method/goBackGroup">goBackGroup</a></li> + <li><a href="/es/XUL/Method/goDown" title="es/XUL/Method/goDown">goDown</a></li> + <li><a href="/es/XUL/Method/goForward" title="es/XUL/Method/goForward">goForward</a></li> + <li><a href="/es/XUL/Method/goForwardGroup" title="es/XUL/Method/goForwardGroup">goForwardGroup</a></li> + <li><a href="/es/XUL/Method/goHome" title="es/XUL/Method/goHome">goHome</a></li> + <li><a href="/es/XUL/Method/goTo" title="es/XUL/Method/goTo">goTo</a></li> + <li><a href="/es/XUL/Method/gotoIndex" title="es/XUL/Method/gotoIndex">gotoIndex</a></li> + <li><a href="/es/XUL/Method/goUp" title="es/XUL/Method/goUp">goUp</a></li> + <li><a href="/es/XUL/Method/hasUserValue" title="es/XUL/Method/hasUserValue">hasUserValue</a></li> + <li><a href="/es/XUL/Method/hidePopup" title="es/XUL/Method/hidePopup">hidePopup</a></li> + <li><a href="/es/XUL/Method/increase" title="es/XUL/Method/increase">increase</a></li> + <li><a href="/es/XUL/Method/increasePage" title="es/XUL/Method/increasePage">increasePage</a></li> + <li><a href="/es/XUL/Method/insertItem" title="es/XUL/Method/insertItem">insertItem</a></li> + <li><a href="/es/XUL/Method/insertItemAt" title="es/XUL/Method/insertItemAt">insertItemAt</a></li> + <li><a href="/es/XUL/Method/invertSelection" title="es/XUL/Method/invertSelection">invertSelection</a></li> + <li><a href="/es/XUL/Method/loadGroup" title="es/XUL/Method/loadGroup">loadGroup</a></li> + <li><a href="/es/XUL/Method/loadOneTab" title="es/XUL/Method/loadOneTab">loadOneTab</a></li> + <li><a href="/es/XUL/Method/loadTabs" title="es/XUL/Method/loadTabs">loadTabs</a></li> + <li><a href="/es/XUL/Method/loadURI" title="es/XUL/Method/loadURI">loadURI</a></li> + <li><a href="/es/XUL/Method/loadURIWithFlags" title="es/XUL/Method/loadURIWithFlags">loadURIWithFlags</a></li> + <li><a href="/es/XUL/Method/makeEditable" title="es/XUL/Method/makeEditable">makeEditable</a></li> + <li><a href="/es/XUL/Method/moveByOffset" title="es/XUL/Method/moveByOffset">moveByOffset</a></li> + <li><a href="/es/XUL/Method/moveTo" title="es/XUL/Method/moveTo">moveTo</a></li> + <li><a href="/es/XUL/Method/moveToAlertPosition" title="es/XUL/Method/moveToAlertPosition">moveToAlertPosition</a></li> + <li><a href="/es/XUL/Method/onSearchComplete" title="es/XUL/Method/onSearchComplete">onSearchComplete</a></li> + <li><a href="/es/XUL/Method/onTextEntered" title="es/XUL/Method/onTextEntered">onTextEntered</a></li> + <li><a href="/es/XUL/Method/onTextReverted" title="es/XUL/Method/onTextReverted">onTextReverted</a></li> + <li><a href="/es/XUL/Method/openPopup" title="es/XUL/Method/openPopup">openPopup</a></li> + <li><a href="/es/XUL/Method/openPopupAtScreen" title="es/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></li> + <li><a href="/es/XUL/Method/openSubDialog" title="es/XUL/Method/openSubDialog">openSubDialog</a></li> + <li><a href="/es/XUL/Method/openWindow" title="es/XUL/Method/openWindow">openWindow</a></li> + <li><a href="/es/XUL/Method/preferenceForElement" title="es/XUL/Method/preferenceForElement">preferenceForElement</a></li> + <li><a href="/es/XUL/Method/reload" title="es/XUL/Method/reload">reload</a></li> + <li><a href="/es/XUL/Method/reloadAllTabs" title="es/XUL/Method/reloadAllTabs">reloadAllTabs</a></li> + <li><a href="/es/XUL/Method/reloadTab" title="es/XUL/Method/reloadTab">reloadTab</a></li> + <li><a href="/es/XUL/Method/reloadWithFlags" title="es/XUL/Method/reloadWithFlags">reloadWithFlags</a></li> + <li><a href="/es/XUL/Method/removeAllItems" title="es/XUL/Method/removeAllItems">removeAllItems</a></li> + <li><a href="/es/XUL/Method/removeAllNotifications" title="es/XUL/Method/removeAllNotifications">removeAllNotifications</a></li> + <li><a href="/es/XUL/Method/removeAllTabsBut" title="es/XUL/Method/removeAllTabsBut">removeAllTabsBut</a></li> + <li><a href="/es/XUL/Method/removeCurrentNotification" title="es/XUL/Method/removeCurrentNotification">removeCurrentNotification</a></li> + <li><a href="/es/XUL/Method/removeCurrentTab" title="es/XUL/Method/removeCurrentTab">removeCurrentTab</a></li> + <li><a href="/es/XUL/Method/removeItemAt" title="es/XUL/Method/removeItemAt">removeItemAt</a></li> + <li><a href="/es/XUL/Method/removeItemFromSelection" title="es/XUL/Method/removeItemFromSelection">removeItemFromSelection</a></li> + <li><a href="/es/XUL/Method/removeNotification" title="es/XUL/Method/removeNotification">removeNotification</a></li> + <li><a href="/es/XUL/Method/removeProgressListener" title="es/XUL/Method/removeProgressListener">removeProgressListener</a></li> + <li><a href="/es/XUL/Method/removeSession" title="es/XUL/Method/removeSession">removeSession</a></li> + <li><a href="/es/XUL/Method/removeTab" title="es/XUL/Method/removeTab">removeTab</a></li> + <li><a href="/es/XUL/Method/removeTransientNotifications" title="es/XUL/Method/removeTransientNotifications">removeTransientNotifications</a></li> + <li><a href="/es/XUL/Method/replaceGroup" title="es/XUL/Method/replaceGroup">replaceGroup</a></li> + <li><a href="/es/XUL/Method/reset" title="es/XUL/Method/reset">reset</a></li> + <li><a href="/es/XUL/Method/rewind" title="es/XUL/Method/rewind">rewind</a></li> + <li><a href="/es/XUL/Method/scrollByIndex" title="es/XUL/Method/scrollByIndex">scrollByIndex</a></li> + <li><a href="/es/XUL/Method/scrollByPixels" title="es/XUL/Method/scrollByPixels">scrollByPixels</a></li> + <li><a href="/es/XUL/Method/scrollToIndex" title="es/XUL/Method/scrollToIndex">scrollToIndex</a></li> + <li><a href="/es/XUL/Method/select" title="es/XUL/Method/select">select</a></li> + <li><a href="/es/XUL/Method/selectAll" title="es/XUL/Method/selectAll">selectAll</a></li> + <li><a href="/es/XUL/Method/selectItem" title="es/XUL/Method/selectItem">selectItem</a></li> + <li><a href="/es/XUL/Method/selectItemRange" title="es/XUL/Method/selectItemRange">selectItemRange</a></li> + <li><a href="/es/XUL/Method/setSelectionRange" title="es/XUL/Method/setSelectionRange">setSelectionRange</a></li> + <li><a href="/es/XUL/Method/showPane" title="es/XUL/Method/showPane">showPane</a></li> + <li><a href="/es/XUL/Method/showPopup" title="es/XUL/Method/showPopup">showPopup</a></li> + <li><a href="/es/XUL/Method/sizeTo" title="es/XUL/Method/sizeTo">sizeTo</a></li> + <li><a href="/es/XUL/Method/startEditing" title="es/XUL/Method/startEditing">startEditing</a></li> + <li><a href="/es/XUL/Method/stop" title="es/XUL/Method/stop">stop</a></li> + <li><a href="/es/XUL/Method/stopEditing" title="es/XUL/Method/stopEditing">stopEditing</a></li> + <li><a href="/es/XUL/Method/syncSessions" title="es/XUL/Method/syncSessions">syncSessions</a></li> + <li><a href="/es/XUL/Method/timedSelect" title="es/XUL/Method/timedSelect">timedSelect</a></li> + <li><a href="/es/XUL/Method/toggleItemSelection" title="es/XUL/Method/toggleItemSelection">toggleItemSelection</a></li> +</ul> + +<h3 id="Related_DOM_element_methods" name="Related_DOM_element_methods">Related DOM element methods</h3> + +<ul> + <li><a href="/es/DOM/element.addEventListener" title="es/DOM/element.addEventListener">DOM:element.addEventListener</a></li> + <li><a href="/es/DOM/Node.appendChild" title="es/DOM/element.appendChild">DOM:element.appendChild</a></li> + <li><a href="/es/DOM/element.dispatchEvent" title="es/DOM/element.dispatchEvent">DOM:element.dispatchEvent</a></li> + <li><a href="/es/DOM/element.getAttribute" title="es/DOM/element.getAttribute">DOM:element.getAttribute</a></li> + <li><a href="/es/DOM/element.getAttributeNode" title="es/DOM/element.getAttributeNode">DOM:element.getAttributeNode</a></li> + <li><a href="/es/DOM/element.getAttributeNodeNS" title="es/DOM/element.getAttributeNodeNS">DOM:element.getAttributeNodeNS</a></li> + <li><a href="/es/DOM/element.getAttributeNS" title="es/DOM/element.getAttributeNS">DOM:element.getAttributeNS</a></li> + <li><a href="/es/DOM/element.getElementsByTagName" title="es/DOM/element.getElementsByTagName">DOM:element.getElementsByTagName</a></li> + <li><a href="/es/DOM/element.getElementsByTagNameNS" title="es/DOM/element.getElementsByTagNameNS">DOM:element.getElementsByTagNameNS</a></li> + <li><a href="/es/DOM/element.hasAttribute" title="es/DOM/element.hasAttribute">DOM:element.hasAttribute</a></li> + <li><a href="/es/DOM/element.hasAttributeNS" title="es/DOM/element.hasAttributeNS">DOM:element.hasAttributeNS</a></li> + <li><a href="/es/DOM/Node.hasAttributes" title="es/DOM/element.hasAttributes">DOM:element.hasAttributes</a></li> + <li><a href="/es/DOM/Node.hasChildNodes" title="es/DOM/element.hasChildNodes">DOM:element.hasChildNodes</a></li> + <li><a href="/es/DOM/Node.insertBefore" title="es/DOM/element.insertBefore">DOM:element.insertBefore</a></li> + <li><a href="/es/DOM/Node.isSupported" title="es/DOM/element.isSupported">DOM:element.isSupported</a></li> + <li><a href="/es/DOM/Node.normalize" title="es/DOM/element.normalize">DOM:element.normalize</a></li> + <li><a href="/es/DOM/element.removeAttribute" title="es/DOM/element.removeAttribute">DOM:element.removeAttribute</a></li> + <li><a href="/es/DOM/element.removeAttributeNode" title="es/DOM/element.removeAttributeNode">DOM:element.removeAttributeNode</a></li> + <li><a href="/es/DOM/element.removeAttributeNS" title="es/DOM/element.removeAttributeNS">DOM:element.removeAttributeNS</a></li> + <li><a href="/es/DOM/Node.removeChild" title="es/DOM/element.removeChild">DOM:element.removeChild</a></li> + <li><a href="/es/DOM/element.removeEventListener" title="es/DOM/element.removeEventListener">DOM:element.removeEventListener</a></li> + <li><a href="/es/DOM/Node.replaceChild" title="es/DOM/element.replaceChild">DOM:element.replaceChild</a></li> + <li><a href="/Es/DOM/Element.setAttribute" title="es/DOM/element.setAttribute">DOM:element.setAttribute</a></li> + <li><a href="/es/DOM/element.setAttributeNode" title="es/DOM/element.setAttributeNode">DOM:element.setAttributeNode</a></li> + <li><a href="/es/DOM/element.setAttributeNodeNS" title="es/DOM/element.setAttributeNodeNS">DOM:element.setAttributeNodeNS</a></li> + <li><a href="/es/DOM/element.setAttributeNS" title="es/DOM/element.setAttributeNS">DOM:element.setAttributeNS</a></li> +</ul> diff --git a/files/es/archive/mozilla/xul/property/align/index.html b/files/es/archive/mozilla/xul/property/align/index.html new file mode 100644 index 0000000000..d3fc019b3d --- /dev/null +++ b/files/es/archive/mozilla/xul/property/align/index.html @@ -0,0 +1,12 @@ +--- +title: Align +slug: Archive/Mozilla/XUL/Property/Align +translation_of: Archive/Mozilla/XUL/Property/align +--- +<div class="noinclude"><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/es/docs/XUL/Elementos" title="XUL/Elementos">Referencia de XUL</a></span></div> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/align">align</a></span></code></dt> + <dd>Tipo: <em>string</em></dd> + <dd>Gets and sets the value of the <code id="a-align"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> attribute.</dd> +</dl> diff --git a/files/es/archive/mozilla/xul/property/buttons/index.html b/files/es/archive/mozilla/xul/property/buttons/index.html new file mode 100644 index 0000000000..18c1b31651 --- /dev/null +++ b/files/es/archive/mozilla/xul/property/buttons/index.html @@ -0,0 +1,21 @@ +--- +title: buttons +slug: Archive/Mozilla/XUL/Property/Buttons +translation_of: Archive/Mozilla/XUL/Property/buttons +--- +<div class="noinclude"><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/es/docs/XUL/Elementos" title="XUL/Elementos">Referencia de XUL</a></span></div> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/es/docs/XUL/Property/buttons">buttons</a></span></code></dt> + <dd>Typo: <em>lista de los valores de abajo separados por comas</em></dd> + <dd>Una lista separada por comas de botones que aparecerán en el cuadro de diálogo. Los botones serán puestos en lugares adecuados para la plataforma del usuario y la gestión básica de eventos se ejecutará automáticamente. En la lista pueden utilizarse los siguientes valores:</dd> +</dl> + +<ul> + <li><code>accept</code>: El botón Aceptar, que aceptará los cambios cuando se presione. Este botón también será el botón predeterminado.</li> + <li><code>cancel</code>: El botón Cancelar que cancelará la operación.</li> + <li><code>help</code>: Un boton Ayuda para mostrar ayuda sobre el diálogo.</li> + <li><code>disclosure</code>: Un botón para mostrar más información. Este podría ser un botón o un triángulo.</li> + <li><code>extra1</code>: Un botón adicional opcional. Usted puede configurar su leyenda con el atributo<code> <code id="a-buttonlabelextra1"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></code></code>.</li> + <li><code>extra2</code>: Un segundo botón adicional opcional. Usted puede configurar su leyenda con el atributo <code><code id="a-buttonlabelextra2"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></code></code>.</li> +</ul> diff --git a/files/es/archive/mozilla/xul/property/index.html b/files/es/archive/mozilla/xul/property/index.html new file mode 100644 index 0000000000..1a7ae096bc --- /dev/null +++ b/files/es/archive/mozilla/xul/property/index.html @@ -0,0 +1,273 @@ +--- +title: Propiedades +slug: Archive/Mozilla/XUL/Property +translation_of: Archive/Mozilla/XUL/Property +--- +<p><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/es/docs/XUL/Elementos" title="XUL/Elementos">Referencia de XUL</a></span></p> + +<ul> + <li><a href="/es/XUL/Property/accessible" title="es/XUL/Property/accessible">accessible</a></li> + <li><a href="/es/XUL/Property/accessibleType" title="es/XUL/Property/accessibleType">accessibleType</a></li> + <li><a href="/es/XUL/Property/accessKey" title="es/XUL/Property/accessKey">accessKey</a></li> + <li><a href="/es/XUL/Property/align" title="es/XUL/Property/align">align</a></li> + <li><a href="/es/XUL/Property/allNotifications" title="es/XUL/Property/allNotifications">allNotifications</a></li> + <li><a href="/es/XUL/Property/allowEvents" title="es/XUL/Property/allowEvents">allowEvents</a></li> + <li><a href="/es/XUL/Property/alwaysOpenPopup" title="es/XUL/Property/alwaysOpenPopup">alwaysOpenPopup</a></li> + <li><a href="/es/XUL/Property/amIndicator" title="es/XUL/Property/amIndicator">amIndicator</a></li> + <li><a href="/es/XUL/Property/appLocale" title="es/XUL/Property/appLocale">appLocale</a></li> + <li><a href="/es/XUL/Property/autoCheck" title="es/XUL/Property/autoCheck">autoCheck</a></li> + <li><a href="/es/XUL/Property/autoFill" title="es/XUL/Property/autoFill">autoFill</a></li> + <li><a href="/es/XUL/Property/autoFillAfterMatch" title="es/XUL/Property/autoFillAfterMatch">autoFillAfterMatch</a></li> + <li><a href="/es/XUL/Property/boxObject" title="es/XUL/Property/boxObject">boxObject</a></li> + <li><a href="/es/XUL/Property/browsers" title="es/XUL/Property/browsers">browsers</a></li> + <li><a href="/es/XUL/Property/builder" title="es/XUL/Property/builder">builder</a></li> + <li><a href="/es/XUL/Property/builderView" title="es/XUL/Property/builderView">builderView</a></li> + <li><a href="/Es/XUL/Property/Buttons" title="es/XUL/Property/buttons">buttons</a></li> + <li><a href="/es/XUL/Property/canAdvance" title="es/XUL/Property/canAdvance">canAdvance</a></li> + <li><a href="/es/XUL/Property/canGoBack" title="es/XUL/Property/canGoBack">canGoBack</a></li> + <li><a href="/es/XUL/Property/canGoForward" title="es/XUL/Property/canGoForward">canGoForward</a></li> + <li><a href="/es/XUL/Property/canRewind" title="es/XUL/Property/canRewind">canRewind</a></li> + <li><a href="/es/XUL/Property/checked" title="es/XUL/Property/checked">checked</a></li> + <li><a href="/es/XUL/Property/checkState" title="es/XUL/Property/checkState">checkState</a></li> + <li><a href="/es/XUL/Property/child" title="es/XUL/Property/child">child</a></li> + <li><a href="/es/XUL/Property/children" title="es/XUL/Property/children">children</a></li> + <li><a href="/es/XUL/Property/className" title="es/XUL/Property/className">className</a></li> + <li><a href="/es/XUL/Property/clickSelectsAll" title="es/XUL/Property/clickSelectsAll">clickSelectsAll</a></li> + <li><a class="internal" href="/es/XUL/Property/clientHeight" title="es/XUL/Property/clientHeight">clientHeight</a> </li> + <li><a class="internal" href="/es/XUL/Property/clientWidth" title="es/XUL/Property/clientWidth">clientWidth</a> </li> + <li><a href="/es/XUL/Property/collapsed" title="es/XUL/Property/collapsed">collapsed</a></li> + <li><a href="/es/XUL/Property/color" title="es/XUL/Property/color">color</a></li> + <li><a href="/es/XUL/Property/columns" title="es/XUL/Property/columns">columns</a></li> + <li><a href="/es/XUL/Property/command" title="es/XUL/Property/command">command</a></li> + <li><a href="/es/XUL/Property/commandManager" title="es/XUL/Property/commandManager">commandManager</a></li> + <li><a href="/es/XUL/Property/completeDefaultIndex" title="es/XUL/Property/completeDefaultIndex">completeDefaultIndex</a></li> + <li><a href="/es/XUL/Property/container" title="es/XUL/Property/container">container</a></li> + <li><a href="/es/XUL/Property/contentDocument" title="es/XUL/Property/contentDocument">contentDocument</a></li> + <li><a href="/es/XUL/Property/contentPrincipal" title="es/XUL/Property/contentPrincipal">contentPrincipal</a></li> + <li><a href="/es/XUL/Property/contentTitle" title="es/XUL/Property/contentTitle">contentTitle</a></li> + <li><a href="/es/XUL/Property/contentView" title="es/XUL/Property/contentView">contentView</a></li> + <li><a href="/es/XUL/Property/contentViewerEdit" title="es/XUL/Property/contentViewerEdit">contentViewerEdit</a></li> + <li><a href="/es/XUL/Property/contentViewerFile" title="es/XUL/Property/contentViewerFile">contentViewerFile</a></li> + <li><a href="/es/XUL/Property/contentWindow" title="es/XUL/Property/contentWindow">contentWindow</a></li> + <li><a href="/es/XUL/Property/contextMenu" title="es/XUL/Property/contextMenu">contextMenu</a></li> + <li><a href="/es/XUL/Property/control" title="es/XUL/Property/control">control</a></li> + <li><a href="/es/XUL/Property/controller" title="es/XUL/Property/controller">controller</a></li> + <li><a href="/es/XUL/Property/controllers" title="es/XUL/Property/controllers">controllers</a></li> + <li><a href="/es/XUL/Property/crop" title="es/XUL/Property/crop">crop</a></li> + <li><a href="/es/XUL/Property/current" title="es/XUL/Property/current">current</a></li> + <li><a href="/es/XUL/Property/currentIndex" title="es/XUL/Property/currentIndex">currentIndex</a></li> + <li><a href="/es/XUL/Property/currentItem" title="es/XUL/Property/currentItem">currentItem</a></li> + <li><a href="/es/XUL/Property/currentNotification" title="es/XUL/Property/currentNotification">currentNotification</a></li> + <li><a href="/es/XUL/Property/currentPage" title="es/XUL/Property/currentPage">currentPage</a></li> + <li><a href="/es/XUL/Property/currentPane" title="es/XUL/Property/currentPane">currentPane</a></li> + <li><a href="/es/XUL/Property/currentSet" title="es/XUL/Property/currentSet">currentSet</a></li> + <li><a href="/es/XUL/Property/currentURI" title="es/XUL/Property/currentURI">currentURI</a></li> + <li><a href="/es/XUL/Property/customToolbarCount" title="es/XUL/Property/customToolbarCount">customToolbarCount</a></li> + <li><a href="/es/XUL/Property/database" title="es/XUL/Property/database">database</a></li> + <li><a href="/es/XUL/Property/datasources" title="es/XUL/Property/datasources">datasources</a></li> + <li><a href="/es/XUL/Property/date" title="es/XUL/Property/date">date</a></li> + <li><a href="/es/XUL/Property/dateLeadingZero" title="es/XUL/Property/dateLeadingZero">dateLeadingZero</a></li> + <li><a href="/es/XUL/Property/dateValue" title="es/XUL/Property/dateValue">dateValue</a></li> + <li><a href="/es/XUL/Property/decimalPlaces" title="es/XUL/Property/decimalPlaces">decimalPlaces</a></li> + <li><a href="/es/XUL/Property/decimalSymbol" title="es/XUL/Property/decimalSymbol">decimalSymbol</a></li> + <li><a href="/es/XUL/Property/defaultButton" title="es/XUL/Property/defaultButton">defaultButton</a></li> + <li><a href="/es/XUL/Property/defaultValue" title="es/XUL/Property/defaultValue">defaultValue</a></li> + <li><a href="/es/XUL/Property/description" title="es/XUL/Property/description">description</a></li> + <li><a href="/es/XUL/Property/dir" title="es/XUL/Property/dir">dir</a></li> + <li><a href="/es/XUL/Property/disableAutocomplete" title="es/XUL/Property/disableAutocomplete">disableAutocomplete</a></li> + <li><a href="/es/XUL/Property/disableAutocomplete" title="es/XUL/Property/disableAutocomplete">disableAutoComplete</a></li> + <li><a href="/es/XUL/Property/disableautoselect" title="es/XUL/Property/disableautoselect">disableautoselect</a></li> + <li><a href="/es/XUL/Property/disabled" title="es/XUL/Property/disabled">disabled</a></li> + <li><a href="/es/XUL/Property/disableKeyNavigation" title="es/XUL/Property/disableKeyNavigation">disableKeyNavigation</a></li> + <li><a href="/es/XUL/Property/dlgType" title="es/XUL/Property/dlgType">dlgType</a></li> + <li><a href="/es/XUL/Property/docShell" title="es/XUL/Property/docShell">docShell</a></li> + <li><a href="/es/XUL/Property/documentCharsetInfo" title="es/XUL/Property/documentCharsetInfo">documentCharsetInfo</a></li> + <li><a href="/es/XUL/Property/editable" title="es/XUL/Property/editable">editable</a></li> + <li><a href="/es/XUL/Property/editingColumn" title="es/XUL/Property/editingColumn">editingColumn</a></li> + <li><a href="/es/XUL/Property/editingRow" title="es/XUL/Property/editingRow">editingRow</a></li> + <li><a href="/es/XUL/Property/editingSession" title="es/XUL/Property/editingSession">editingSession</a></li> + <li><a href="/es/XUL/Property/editor" title="es/XUL/Property/editor">editor</a></li> + <li><a href="/es/XUL/Property/editortype" title="es/XUL/Property/editortype">editortype</a></li> + <li><a href="/es/XUL/Property/emptyText" title="es/XUL/Property/emptyText">emptyText</a></li> + <li><a href="/es/XUL/Property/enableColumnDrag" title="es/XUL/Property/enableColumnDrag">enableColumnDrag</a></li> + <li><a href="/es/XUL/Property/eventNode" title="es/XUL/Property/eventNode">eventNode</a></li> + <li><a href="/es/XUL/Property/firstOrdinalColumn" title="es/XUL/Property/firstOrdinalColumn">firstOrdinalColumn</a></li> + <li><a href="/es/XUL/Property/firstPermanentChild" title="es/XUL/Property/firstPermanentChild">firstPermanentChild</a></li> + <li><a href="/es/XUL/Property/flex" title="es/XUL/Property/flex">flex</a></li> + <li><a href="/es/XUL/Property/focused" title="es/XUL/Property/focused">focused</a></li> + <li><a href="/es/XUL/Property/focusedItem" title="es/XUL/Property/focusedItem">focusedItem</a></li> + <li><a href="/es/XUL/Property/forceComplete" title="es/XUL/Property/forceComplete">forceComplete</a></li> + <li><a href="/es/XUL/Property/group" title="es/XUL/Property/group">group</a></li> + <li><a href="/es/XUL/Property/handleCtrlPageUpDown" title="es/XUL/Property/handleCtrlPageUpDown">handleCtrlPageUpDown</a></li> + <li><a href="/es/XUL/Property/handleCtrlTab" title="es/XUL/Property/handleCtrlTab">handleCtrlTab</a></li> + <li><a href="/es/XUL/Property/height" title="es/XUL/Property/height">height</a></li> + <li><a href="/es/XUL/Property/hidden" title="es/XUL/Property/hidden">hidden</a></li> + <li><a href="/es/XUL/Property/hideSeconds" title="es/XUL/Property/hideSeconds">hideSeconds</a></li> + <li><a href="/es/XUL/Property/homePage" title="es/XUL/Property/homePage">homePage</a></li> + <li><a href="/es/XUL/Property/hour" title="es/XUL/Property/hour">hour</a></li> + <li><a href="/es/XUL/Property/hourLeadingZero" title="es/XUL/Property/hourLeadingZero">hourLeadingZero</a></li> + <li><a href="/es/XUL/Property/id" title="es/XUL/Property/id">id</a></li> + <li><a href="/es/XUL/Property/ignoreBlurWhileSearching" title="es/XUL/Property/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a></li> + <li><a href="/es/XUL/Property/image" title="es/XUL/Property/image">image</a></li> + <li><a href="/es/XUL/Property/increment" title="es/XUL/Property/increment">increment</a></li> + <li><a href="/es/XUL/Property/inputField" title="es/XUL/Property/inputField">inputField</a></li> + <li><a href="/es/XUL/Property/inverted" title="es/XUL/Property/inverted">inverted</a></li> + <li><a href="/es/XUL/Property/is24HourClock" title="es/XUL/Property/is24HourClock">is24HourClock</a></li> + <li><a href="/es/XUL/Property/isPM" title="es/XUL/Property/isPM">isPM</a></li> + <li><a href="/es/XUL/Property/isSearching" title="es/XUL/Property/isSearching">isSearching</a></li> + <li><a href="/es/XUL/Property/isWaiting" title="es/XUL/Property/isWaiting">isWaiting</a></li> + <li><a href="/es/XUL/Property/itemCount" title="es/XUL/Property/itemCount">itemCount</a></li> + <li><a href="/es/XUL/Property/label" title="es/XUL/Property/label">label</a></li> + <li><a href="/es/XUL/Property/labelElement" title="es/XUL/Property/labelElement">labelElement</a></li> + <li><a href="/es/XUL/Property/lastPermanentChild" title="es/XUL/Property/lastPermanentChild">lastPermanentChild</a></li> + <li><a href="/es/XUL/Property/lastSelected" title="es/XUL/Property/lastSelected">lastSelected</a></li> + <li><a href="/es/XUL/Property/left" title="es/XUL/Property/left">left</a></li> + <li><a href="/es/XUL/Property/linkedPanel" title="es/XUL/Property/linkedPanel">linkedPanel</a></li> + <li><a href="/es/XUL/Property/listBoxObject" title="es/XUL/Property/listBoxObject">listBoxObject</a></li> + <li><a href="/es/XUL/Property/locked" title="es/XUL/Property/locked">locked</a></li> + <li><a href="/es/XUL/Property/markupDocumentViewer" title="es/XUL/Property/markupDocumentViewer">markupDocumentViewer</a></li> + <li><a href="/es/XUL/Property/max" title="es/XUL/Property/max">max</a></li> + <li><a href="/es/XUL/Property/maxHeight" title="es/XUL/Property/maxHeight">maxHeight</a></li> + <li><a href="/es/XUL/Property/maxLength" title="es/XUL/Property/maxLength">maxLength</a></li> + <li><a href="/es/XUL/Property/maxRows" title="es/XUL/Property/maxRows">maxRows</a></li> + <li><a href="/es/XUL/Property/maxWidth" title="es/XUL/Property/maxWidth">maxWidth</a></li> + <li><a href="/es/XUL/Property/menu" title="es/XUL/Property/menu">menu</a></li> + <li><a href="/es/XUL/Property/menuBoxObject" title="es/XUL/Property/menuBoxObject">menuBoxObject</a></li> + <li><a href="/es/XUL/Property/menupopup" title="es/XUL/Property/menupopup">menupopup</a></li> + <li><a href="/es/XUL/Property/min" title="es/XUL/Property/min">min</a></li> + <li><a href="/es/XUL/Property/minHeight" title="es/XUL/Property/minHeight">minHeight</a></li> + <li><a href="/es/XUL/Property/minResultsForPopup" title="es/XUL/Property/minResultsForPopup">minResultsForPopup</a></li> + <li><a href="/es/XUL/Property/minWidth" title="es/XUL/Property/minWidth">minWidth</a></li> + <li><a href="/es/XUL/Property/minute" title="es/XUL/Property/minute">minute</a></li> + <li><a href="/es/XUL/Property/minuteLeadingZero" title="es/XUL/Property/minuteLeadingZero">minuteLeadingZero</a></li> + <li><a href="/es/XUL/Property/mode" title="es/XUL/Property/mode">mode</a></li> + <li><a href="/es/XUL/Property/month" title="es/XUL/Property/month">month</a></li> + <li><a href="/es/XUL/Property/monthLeadingZero" title="es/XUL/Property/monthLeadingZero">monthLeadingZero</a></li> + <li><a href="/es/XUL/Property/name" title="es/XUL/Property/name">name</a></li> + <li><a href="/es/XUL/Property/next" title="es/XUL/Property/next">next</a></li> + <li><a href="/es/XUL/Property/noMatch" title="es/XUL/Property/noMatch">noMatch</a></li> + <li><a href="/es/XUL/Property/notificationsHidden" title="es/XUL/Property/notificationsHidden">notificationsHidden</a></li> + <li><a href="/es/XUL/Property/object" title="es/XUL/Property/object">object</a></li> + <li><a href="/es/XUL/Property/observes" title="es/XUL/Property/observes">observes</a></li> + <li><a href="/es/XUL/Property/onFirstPage" title="es/XUL/Property/onFirstPage">onFirstPage</a></li> + <li><a href="/es/XUL/Property/onLastPage" title="es/XUL/Property/onLastPage">onLastPage</a></li> + <li><a href="/es/XUL/Property/open" title="es/XUL/Property/open">open</a></li> + <li><a href="/es/XUL/Property/ordinal" title="es/XUL/Property/ordinal">ordinal</a></li> + <li><a href="/es/XUL/Property/orient" title="es/XUL/Property/orient">orient</a></li> + <li><a href="/es/XUL/Property/pack" title="es/XUL/Property/pack">pack</a></li> + <li><a href="/es/XUL/Property/pageCount" title="es/XUL/Property/pageCount">pageCount</a></li> + <li><a href="/es/XUL/Property/pageid" title="es/XUL/Property/pageid">pageid</a></li> + <li><a href="/es/XUL/Property/pageIncrement" title="es/XUL/Property/pageIncrement">pageIncrement</a></li> + <li><a href="/es/XUL/Property/pageIndex" title="es/XUL/Property/pageIndex">pageIndex</a></li> + <li><a href="/es/XUL/Property/pageStep" title="es/XUL/Property/pageStep">pageStep</a></li> + <li><a href="/es/XUL/Property/parentContainer" title="es/XUL/Property/parentContainer">parentContainer</a></li> + <li><a href="/es/XUL/Property/palette" title="es/XUL/Property/palette">palette</a></li> + <li><a href="/es/XUL/Property/persist" title="es/XUL/Property/persist">persist</a></li> + <li><a href="/es/XUL/Property/persistence" title="es/XUL/Property/persistence">persistence</a></li> + <li><a href="/es/XUL/Property/pmIndicator" title="es/XUL/Property/pmIndicator">pmIndicator</a></li> + <li><a href="/es/XUL/Property/popup" title="es/XUL/Property/popup">popup</a></li> + <li><a href="/es/XUL/Property/popupBoxObject" title="es/XUL/Property/popupBoxObject">popupBoxObject</a></li> + <li><a href="/es/XUL/Property/popupOpen" title="es/XUL/Property/popupOpen">popupOpen</a></li> + <li><a href="/es/XUL/Property/position" title="es/XUL/Property/position">position</a></li> + <li><a href="/es/XUL/Property/predicate" title="es/XUL/Property/predicate">predicate</a></li> + <li><a href="/es/XUL/Property/preferenceElements" title="es/XUL/Property/preferenceElements">preferenceElements</a></li> + <li><a href="/es/XUL/Property/preferencePanes" title="es/XUL/Property/preferencePanes">preferencePanes</a></li> + <li><a href="/es/XUL/Property/preferences" title="es/XUL/Property/preferences">preferences</a></li> + <li><a href="/es/XUL/Property/priority" title="es/XUL/Property/priority">priority</a></li> + <li><a href="/es/XUL/Property/radioGroup" title="es/XUL/Property/radioGroup">radioGroup</a></li> + <li><a href="/es/XUL/Property/readOnly" title="es/XUL/Property/readOnly">readonly</a></li> + <li><a href="/es/XUL/Property/readOnly" title="es/XUL/Property/readOnly">readOnly</a></li> + <li><a href="/es/XUL/Property/ref" title="es/XUL/Property/ref">ref</a></li> + <li><a href="/es/XUL/Property/resource" title="es/XUL/Property/resource">resource</a></li> + <li><a href="/es/XUL/Property/resultsPopup" title="es/XUL/Property/resultsPopup">resultsPopup</a></li> + <li><a href="/es/XUL/Property/scrollBoxObject" title="es/XUL/Property/scrollBoxObject">scrollBoxObject</a></li> + <li><a href="/es/XUL/Property/scrollIncrement" title="es/XUL/Property/scrollIncrement">scrollIncrement</a></li> + <li><a class="internal" href="/es/XUL/Property/scrollHeight" title="es/XUL/Property/scrollHeight">scrollHeight</a> </li> + <li><a class="internal" href="/es/XUL/Property/scrollWidth" title="es/XUL/Property/scrollWidth">scrollWidth</a> </li> + <li><a href="/es/XUL/Property/searchCount" title="es/XUL/Property/searchCount">searchCount</a></li> + <li><a href="/es/XUL/Property/searchLabel" title="es/XUL/Property/searchLabel">searchLabel</a></li> + <li><a href="/es/XUL/Property/searchParam" title="es/XUL/Property/searchParam">searchParam</a></li> + <li><a href="/es/XUL/Property/searchSessions" title="es/XUL/Property/searchSessions">searchSessions</a></li> + <li><a href="/es/XUL/Property/second" title="es/XUL/Property/second">second</a></li> + <li><a href="/es/XUL/Property/secondLeadingZero" title="es/XUL/Property/secondLeadingZero">secondLeadingZero</a></li> + <li><a href="/es/XUL/Property/securityUI" title="es/XUL/Property/securityUI">securityUI</a></li> + <li><a href="/es/XUL/Property/selected" title="es/XUL/Property/selected">selected</a></li> + <li><a href="/es/XUL/Property/selectedBrowser" title="es/XUL/Property/selectedBrowser">selectedBrowser</a></li> + <li><a href="/es/XUL/Property/selectedCount" title="es/XUL/Property/selectedCount">selectedCount</a></li> + <li><a href="/es/XUL/Property/selectedIndex" title="es/XUL/Property/selectedIndex">selectedIndex</a></li> + <li><a href="/es/XUL/Property/selectedItem" title="es/XUL/Property/selectedItem">selectedItem</a></li> + <li><a href="/es/XUL/Property/selectedItems" title="es/XUL/Property/selectedItems">selectedItems</a></li> + <li><a href="/es/XUL/Property/selectedPanel" title="es/XUL/Property/selectedPanel">selectedPanel</a></li> + <li><a href="/es/XUL/Property/selectedTab" title="es/XUL/Property/selectedTab">selectedTab</a></li> + <li><a href="/es/XUL/Property/selectionEnd" title="es/XUL/Property/selectionEnd">selectionEnd</a></li> + <li><a href="/es/XUL/Property/selectionStart" title="es/XUL/Property/selectionStart">selectionStart</a></li> + <li><a href="/es/XUL/Property/selstyle" title="es/XUL/Property/selstyle">selstyle</a></li> + <li><a href="/es/XUL/Property/selType" title="es/XUL/Property/selType">selType</a></li> + <li><a href="/es/XUL/Property/sessionCount" title="es/XUL/Property/sessionCount">sessionCount</a></li> + <li><a href="/es/XUL/Property/sessionHistory" title="es/XUL/Property/sessionHistory">sessionHistory</a></li> + <li><a href="/es/XUL/Property/showCommentColumn" title="es/XUL/Property/showCommentColumn">showCommentColumn</a></li> + <li><a href="/es/XUL/Property/showPopup" title="es/XUL/Property/showPopup">showPopup</a></li> + <li><a href="/es/XUL/Property/size" title="es/XUL/Property/size">size</a></li> + <li><a href="/es/XUL/Property/smoothScroll" title="es/XUL/Property/smoothScroll">smoothScroll</a></li> + <li><a href="/es/XUL/Property/spinButtons" title="es/XUL/Property/spinButtons">spinButtons</a></li> + <li><a href="/es/XUL/Property/src" title="es/XUL/Property/src">src</a></li> + <li><a href="/es/XUL/Property/state" title="es/XUL/Property/state">state</a></li> + <li><a href="/es/XUL/Property/statusbar" title="es/XUL/Property/statusbar">statusbar</a></li> + <li><a href="/es/XUL/Property/statusText" title="es/XUL/Property/statusText">statusText</a></li> + <li><a href="/es/XUL/Property/stringBundle" title="es/XUL/Property/stringBundle">stringBundle</a></li> + <li><a href="/es/XUL/Property/strings" title="es/XUL/Property/strings">strings</a></li> + <li><a href="/es/XUL/Property/style" title="es/XUL/Property/style">style</a></li> + <li><a href="/es/XUL/Property/subject" title="es/XUL/Property/subject">subject</a></li> + <li><a href="/es/XUL/Property/suppressOnSelect" title="es/XUL/Property/suppressOnSelect">suppressOnSelect</a></li> + <li><a href="/es/XUL/Property/tabContainer" title="es/XUL/Property/tabContainer">tabContainer</a></li> + <li><a href="/es/XUL/Property/tabIndex" title="es/XUL/Property/tabIndex">tabIndex</a></li> + <li><a href="/es/XUL/Property/tabs" title="es/XUL/Property/tabs">tabs</a></li> + <li><a href="/es/XUL/Property/tabScrolling" title="es/XUL/Property/tabScrolling">tabScrolling</a></li> + <li><a href="/es/XUL/Property/tabpanels" title="es/XUL/Property/tabpanels">tabpanels</a></li> + <li><a href="/es/XUL/Property/tag" title="es/XUL/Property/tag">tag</a></li> + <li><a href="/es/XUL/Property/textLength" title="es/XUL/Property/textLength">textLength</a></li> + <li><a href="/es/XUL/Property/textValue" title="es/XUL/Property/textValue">textValue</a></li> + <li><a href="/es/XUL/Property/timeout" title="es/XUL/Property/timeout">timeout</a></li> + <li><a href="/es/XUL/Property/title" title="es/XUL/Property/title">title</a></li> + <li><a href="/es/XUL/Property/toolbarName" title="es/XUL/Property/toolbarName">toolbarName</a></li> + <li><a href="/es/XUL/Property/toolbarset" title="es/XUL/Property/toolbarset">toolbarset</a></li> + <li><a href="/es/XUL/Property/tooltip" title="es/XUL/Property/tooltip">tooltip</a></li> + <li><a href="/es/XUL/Property/tooltipText" title="es/XUL/Property/tooltipText">tooltipText</a></li> + <li><a href="/es/XUL/Property/top" title="es/XUL/Property/top">top</a></li> + <li><a href="/es/XUL/Property/treeBoxObject" title="es/XUL/Property/treeBoxObject">treeBoxObject</a></li> + <li><a href="/es/XUL/Property/type" title="es/XUL/Property/type">type</a></li> + <li><a href="/es/XUL/Property/uri" title="es/XUL/Property/uri">uri</a></li> + <li><a href="/es/XUL/Property/userAction" title="es/XUL/Property/userAction">userAction</a></li> + <li><a href="/es/XUL/Property/value" title="es/XUL/Property/value">value</a></li> + <li><a href="/es/XUL/Property/valueNumber" title="es/XUL/Property/valueNumber">valueNumber</a></li> + <li><a href="/es/XUL/Property/view" title="es/XUL/Property/view">view</a></li> + <li><a href="/es/XUL/Property/webBrowserFind" title="es/XUL/Property/webBrowserFind">webBrowsereFind</a></li> + <li><a href="/es/XUL/Property/webNavigation" title="es/XUL/Property/webNavigation">webNavigation</a></li> + <li><a href="/es/XUL/Property/webProgress" title="es/XUL/Property/webProgress">webProgress</a></li> + <li><a href="/es/XUL/Property/width" title="es/XUL/Property/width">width</a></li> + <li><a href="/es/XUL/Property/wizardPages" title="es/XUL/Property/wizardPages">wizardPages</a></li> + <li><a href="/es/XUL/Property/wrapAround" title="es/XUL/Property/wrapAround">wrapAround</a></li> + <li><a href="/es/XUL/Property/year" title="es/XUL/Property/year">year</a></li> + <li><a href="/es/XUL/Property/yearLeadingZero" title="es/XUL/Property/yearLeadingZero">yearLeadingZero</a></li> +</ul> + +<h3 id="Related_DOM_element_properties" name="Related_DOM_element_properties">Propiedades de elementos relacionadas con DOM</h3> + +<ul> + <li><a href="/Es/DOM/Node.attributes" title="es/DOM/element.attributes">DOM:element.attributes</a></li> + <li><a href="/Es/DOM/Node.childNodes" title="es/DOM/element.childNodes">DOM:element.childNodes</a></li> + <li><a href="/Es/DOM/Node.cloneNode" title="es/DOM/element.cloneNode">DOM:element.cloneNode</a></li> + <li><a href="/Es/DOM/Node.firstChild" title="es/DOM/element.firstChild">DOM:element.firstChild</a></li> + <li><a href="/Es/DOM/Node.lastChild" title="es/DOM/element.lastChild">DOM:element.lastChild</a></li> + <li><a href="/Es/DOM/Node.localName" title="es/DOM/element.localName">DOM:element.localName</a></li> + <li><a href="/Es/DOM/Node.namespaceURI" title="es/DOM/element.namespaceURI">DOM:element.namespaceURI</a></li> + <li><a href="/Es/DOM/Node.nextSibling" title="es/DOM/element.nextSibling">DOM:element.nextSibling</a></li> + <li><a href="/Es/DOM/Node.nodeName" title="es/DOM/element.nodeName">DOM:element.nodeName</a></li> + <li><a href="/Es/DOM/Node.nodeType" title="es/DOM/element.nodeType">DOM:element.nodeType</a></li> + <li><a href="/Es/DOM/Node.nodeValue" title="es/DOM/element.nodeValue">DOM:element.nodeValue</a></li> + <li><a href="/Es/DOM/Node.ownerDocument" title="es/DOM/element.ownerDocument">DOM:element.ownerDocument</a></li> + <li><a href="/Es/DOM/Node.parentNode" title="es/DOM/element.parentNode">DOM:element.parentNode</a></li> + <li><a href="/Es/DOM/Node.prefix" title="es/DOM/element.prefix">DOM:element.prefix</a></li> + <li><a href="/Es/DOM/Node.previousSibling" title="es/DOM/element.previousSibling">DOM:element.previousSibling</a></li> + <li><a href="/es/DOM/element.tagName" title="es/DOM/element.tagName">DOM:element.tagName</a></li> +</ul> diff --git a/files/es/archive/mozilla/xul/style/index.html b/files/es/archive/mozilla/xul/style/index.html new file mode 100644 index 0000000000..920b41ddce --- /dev/null +++ b/files/es/archive/mozilla/xul/style/index.html @@ -0,0 +1,31 @@ +--- +title: Clases de estilo +slug: Archive/Mozilla/XUL/Style +translation_of: Archive/Mozilla/XUL/Style +--- +<p><a href="/es/docs/XUL/Elementos" title="« Referencia de XUL">« Referencia de XUL</a></p> + +<ul> + <li><a href="/es/XUL/Style/alert-icon" title="es/XUL/Style/alert-icon">alert-icon</a></li> + <li><a href="/es/XUL/Style/chromeclass-toolbar" title="es/XUL/Style/chromeclass-toolbar">chromeclass-toolbar</a></li> + <li><a href="/es/XUL/Style/error-icon" title="es/XUL/Style/error-icon">error-icon</a></li> + <li><a href="/es/XUL/Style/groove" title="es/XUL/Style/groove">groove</a></li> + <li><a href="/es/XUL/Style/header" title="es/XUL/Style/header">header</a></li> + <li><a href="/es/XUL/Style/indent" title="es/XUL/Style/indent">indent</a></li> + <li><a href="/es/XUL/Style/listcell-iconic" title="es/XUL/Style/listcell-iconic">listcell-iconic</a></li> + <li><a href="/es/XUL/Style/listitem-iconic" title="es/XUL/Style/listitem-iconic">listitem-iconic</a></li> + <li><a href="/es/XUL/Style/menuitem-iconic" title="es/XUL/Style/menuitem-iconic">menuitem-iconic</a></li> + <li><a href="/es/XUL/Style/menuitem-non-iconic" title="es/XUL/Style/menuitem-non-iconic">menuitem-non-iconic</a></li> + <li><a href="/es/XUL/Style/message-icon" title="es/XUL/Style/message-icon">message-icon</a></li> + <li><a href="/es/XUL/Style/monospace" title="es/XUL/Style/monospace">monospace</a></li> + <li><a href="/es/XUL/Style/plain" title="es/XUL/Style/plain">plain</a></li> + <li><a href="/es/XUL/Style/question-icon" title="es/XUL/Style/question-icon">question-icon</a></li> + <li><a href="/es/XUL/Style/small-margin" title="es/XUL/Style/small-margin">small-margin</a></li> + <li><a href="/es/XUL/Style/statusbarpanel-iconic" title="es/XUL/Style/statusbarpanel-iconic">statusbarpanel-iconic</a></li> + <li><a href="/es/XUL/Style/statusbarpanel-iconic-text" title="es/XUL/Style/statusbarpanel-iconic-text">statusbarpanel-iconic-text</a></li> + <li><a href="/es/XUL/Style/statusbarpanel-menu-iconic" title="es/XUL/Style/statusbarpanel-menu-iconic">statusbarpanel-menu-iconic</a></li> + <li><a href="/es/XUL/Style/text-link" title="es/XUL/Style/text-link">text-link</a></li> + <li><a href="/es/XUL/Style/thin" title="es/XUL/Style/thin">thin</a></li> + <li><a href="/es/XUL/Style/tree-splitter" title="es/XUL/Style/tree-splitter">tree-splitter</a></li> + <li><a href="/es/XUL/Style/treecol-image" title="es/XUL/Style/treecol-image">treecol-image</a></li> +</ul> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/actualizar_comandos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/actualizar_comandos/index.html new file mode 100644 index 0000000000..dd76069198 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/actualizar_comandos/index.html @@ -0,0 +1,62 @@ +--- +title: Actualizar comandos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Actualizar_comandos +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Updating_Commands +--- +<p> </p> +<p>En esta sección veremos como actualizar comandos.</p> +<h3 id="Invocando_comandos" name="Invocando_comandos">Invocando comandos</h3> +<p>Si un comando tiene un atributo <code>oncommand</code>, podemos invocarlo simplemente usando el método doCommand del comando o de un elemento vinculado a él. Para otros comandos, necesitaremos usar un par de líneas de código. Necesitamos usar estos pasos adicionales cuando invocamos comandos implementados por un controlador. Además, tendremos que hacerlo cuando creemos nuestros comandos de menú, por ejemplo para implementar los comandos del menú editar en nuestra aplicación.</p> +<p>Afortunadamente, el código extra es bastante simple. Todo lo que necesitamos hacer es obtener el controlador y llamar al comando. Un forma sencilla de hacerlo es la siguiente:</p> +<pre>var controlador = document.commandDispatcher.getControllerForCommand("cmd_paste"); +if (controlador && controlador.isCommandEnabled("cmd_paste")) + controlador.doCommand(command); +} +</pre> +<p>El código mostrado arriba primero obtiene el controlador para comando ‘cmd_paste’ del despachador de comandos. Entonces comprueba que el comando esta habilitado y lo ejecuta usando el método doCommand. Hay que fijarse en que no hace falta adivinar que elemento o controlador usar, el despachador de comandos hace esa faena por nosotros. Tambíen podríamos ejecutar el método doCommand sin comprobar si el comando está habilitado o no, aunque mejor no hacerlo.</p> +<p>El código de arriba es lo suficientemente genérico como para crear una función que tome un parametro, comando, y lo ejecute. Esta función podría entonces ser reusada para todos los comandos. De hecho, esto es tan común que Mozilla incluye una librería que hace justo esto. Sí incluyes el guión ‘<a class="external" rel="freelink">chrome://global/content/globalOverlay.js</a>’ en un archivo XUL, puede llamar el método goDoCommand que ejecutará el comando que se le pase como parametro. El código para esa función son simplemente unas pocas líneas, así que podemos incluirla directamente en nuestro código si por alguna razón no queremos incluir la librería.</p> +<pre><script src="chrome://global/content/globalOverlay.js"/> + +<command id="cmd_paste" oncommand="goDoCommand('cmd_paste');/> +<button label="Pegar" command="cmd_paste"/> +</pre> +<p>Este ejemplo implementa un botón Pegar. Está vinculado con un comando que a su vez invoca ese mismo comando para que lo gestione el controlador por defecto. Este código es todo lo que se necesita para implementar la funcionalidad del comando pegar en nuestra aplicación. La única cosa que nos falta es asegurarnos de que el comando pegar, y por ende el botón, este habilitado y se actualize en el momento oportuno, lo que se describe a continuación.</p> +<h3 id="Actualizadores_de_comandos" name="Actualizadores_de_comandos">Actualizadores de comandos</h3> +<p>Un actualizador de comandos es una característica extra del elemento commandset, que nos permite actualizar el estado de uno o más comandos cuando ciertos eventos ocurren. Necesitamos pensar cuando un comando es válido y cuando no lo es. Además debemos considerar cuando debe cambiar el estado y cuando debén los comandos ser actualizados.</p> +<p>Por ejemplo, el comando pegar es válido cuando una caja de texto tiene el foco y hay algo en el portapapeles que pegar. El comando se habilitará cuando la caja de texto obtenga el foco o el contenido del portapales cambie. Un actualizador de comandos escuchará a estas situaciones y podrá ejecutar código que habilite o deshabilite comandos como sea necesario.</p> +<p>Un simple actualizador de comandos puede ser como el siguiente:</p> +<pre><commandset id="actualizaPegarElemento" + commandupdater="true" + events="focus" + oncommandupdate="goUpdateCommand('cmd_paste');"/> +</pre> +<p>Un actualizador de comandos es indicado cuando se usa el atributo commandupdater, el cual debe ser true. El atributo event se usa para definir los eventos a los cuales debe escuchar el actualizador. Podemos especificar varios eventos si los separamos con comas. En este ejemplo el actualizador de comandos escucha al evento ‘focus’. Esto hará que los comandos se actualizen con un elemento reciba el foco.</p> +<p>Cuando ocurre un evento de foco, el código en el atributo oncommandupdate es ejecutado. En el ejemplo, la función goupdateCommand es llamada, que es la función implementada en globalOverlay.js descrita anteriormente. Esto actualizara el comando y habilitará o deshabilitará los botones y menús necesarios. El código detrás de todo esto es bastante sencillo. Simplement coge el controlador adecuado, llama su método isCommandEnabled y el comando queda habilitado o deshabilitado. Si hay varios comandos a actualizar, llamaremos la función goUpdateCommand una vez para cada comando.</p> +<p>Cabe mencionar que el actualizador de comandos recibirá avisos sobre todos los eventos de foco en todos los elementos, incluso si otros gestores de eventos responden al evento. Esencialmente, un actualizador de comandos es como un gestor de eventos global.</p> +<p>Los actualizadores de comandos puede escuchar a los siguientes eventos, aunque es posible crear nuestros propios eventos.</p> +<pre class="eval"> * focus: ocurre cuando un elemento obtiene el foco + * select: ocurre cuando el texto seleccionado cambia + * undo: ocurre cuando el buffer de deshacer cambia + * clipboard: ocurre cuando los contenidos del portapapeles cambian +</pre> +<p>Los siguientes ejemplos demuestran como se usan los actualizadores de comandos en el navegador Mozilla para actualizar los comandos del menú editar. Las funciones usadas pueden ser encontradas en el fichero ‘<a class="external" rel="freelink">chrome://communicator/content/utilityOverlay.js</a>’.</p> +<pre><commandset id="globalEditMenuItems" + commandupdater="true" + events="focus" + oncommandupdate="goUpdateGlobalEditMenuItems()"/> +<commandset id="selectEditMenuItems" + commandupdater="true" + events="select" + oncommandupdate="goUpdateSelectEditMenuItems()"/> +<commandset id="undoEditMenuItems" + commandupdater="true" + events="undo" + oncommandupdate="goUpdateUndoEditMenuItems()"/> +<commandset id="clipboardEditMenuItems" + commandupdater="true" + events="clipboard" + oncommandupdate="goUpdatePasteMenuItems()"/> +</pre> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/archivos_manifest/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/archivos_manifest/index.html new file mode 100644 index 0000000000..e95455ea20 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/archivos_manifest/index.html @@ -0,0 +1,155 @@ +--- +title: Archivos Manifest +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Archivos_Manifest +tags: + - Todas_las_Categorías + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Manifest_Files +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:La_URL_chrome" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Creando_una_ventana">Siguiente »</a></p> +</div> + +<p><br> + En esta sección veremos como incluir ficheros XUL y chrome en un un paquete y crear un archivo <em>Manifest</em> para ellos.</p> + +<h3 id="Paquetes" name="Paquetes">Paquetes</h3> + +<p>Un paquete es un conjunto de ficheros XUL y scripts que definen la funcionalidad de una interfaz de usuario. Los paquetes se pueden instalar dentro de Mozilla y referenciar con una URL del chrome. Un paquete puede contener cualquier tipo de ficheros que pueden estar separados en distintos subdirectorios dentro del paquete. Un paquete puede estar contenido como un directorio o como un fichero JAR.</p> + +<h3 id="Archivos_Manifest" name="Archivos_Manifest">Archivos Manifest</h3> + +<p>Un archivo manifest describe un paquete y mapea su localización en disco a una URL. El archivo manifest en el directorio chrome se examinará al iniciarse la aplicación Mozilla para comprobar los paquetes instalados. Esto significa que todo lo que necesitamos hacer para instalar un nuevo paquete es añadir un nuevo archivo manifest en el directorio chrome de la aplicación o en el directorio chrome específico del usuario. Este último es el utilizado preferentemente, dado que es posible que no tengamos suficientes permisos para escribir en el directorio de la aplicación.</p> + +<p>Si únicamente intenta probar código XUL con privilegios en el navegador Firefox, puede hacerlo fácilmente utilizando un archivo manifest con sólo una linea:</p> + +<ol> + <li>Cree un nuevo directorio en algún lugar. Por ejemplo, en una maquina Windows, puede usar C:\testfiles</li> + <li>Cree un nuevo fichero <strong>ASCII</strong><sup>1</sup> llamado test.manifest en el directorio chrome. Realmente no importa cómo se llame el fichero, tan solo que tenga la extensión .manifest. <sub>(1. No funciona con UTF-8 com BOM.)</sub></li> + <li>Añada la linea siguiente en él:</li> +</ol> + +<pre class="eval"> content tests <a class="external" rel="freelink">file:///C:/testfiles/</a> +</pre> + +<p>La ruta al fichero deberá apuntar al directorio creado anteriormente. Si no está seguro de cual es la ruta, abra el directorio en el navegador y copie la URL de la barra de dirección.</p> + +<p>¡Ya está! Ahora, todo lo que necesita hacer es añadir algunos ficheros XUL dentro del nuevo directorio y será capaz de cargarlos escribiéndolos en una URL chrome de la forma <a class="external" rel="freelink">chrome://tests/content/</a><filename>. Por supuesto, necesitará reiniciar el navegador para que los cambios tengan efecto. Si el fichero no carga, asegúrese de que la ruta del fichero es correcta.</p> + +<p>La sintaxis básica de las lineas en un archivo manifest para contener paquetes es:</p> + +<p>'content <nombrepaquete> <rutaarchivo>'</p> + +<p>El primer campo 'content' indica un paquete contenido. Para los temas utilizamos 'skin', mientras que para la configuración regional utilizamos 'locale'. El <nombrepaquete> es en nuestro ejemplo de arriba 'tests', lo cual significa que el primer campo en la URL chrome es 'tests' como en <a class="external" rel="freelink">chrome://tests/content/sample.xul</a>. Si el nombre del paquete fuera 'browser', la URL chrome sería <a class="external" rel="freelink">chrome://browser/content/</a>. El campo final es la ruta donde se localiza el archivo. Esta puede ser una ruta de archivo local utilizando una URL de archivo, o un archivo JAR utilizando una URL jar, la cual describiremos a continuación. Puede especificar múltiples paquetes incluyendo otras lineas en el fichero manifest.</p> + +<p>El fichero browser.manifest usado por Firefox es algo parecido a esto:</p> + +<pre>content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes +content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes +overlay chrome://global/content/viewSource.xul chrome://browser/content/viewSourceOverlay.xul +overlay chrome://global/content/viewPartialSource.xul chrome://browser/content/viewSourceOverlay.xul +overlay chrome://browser/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul +</pre> + +<p>Aqui se estan listando dos paquetes, 'branding' y 'browser'. Además se están especificando tres recubrimeintos (overlays ), lo cual permite combinar contenidos de distintos paquetes. Las extensiones harán mayor uso de los recubrimientos (overlays), dado que ellas fusionan su UI con la del navegador.</p> + +<p>Las rutas de fichero para los paquetes branding y browser utilizan URLs jar dado que el contenido está empaquetado en un archivo. Un archivo JAR puede crearse con una utilidad ZIP. Para un archivo JAR localizado en el directorio chrome, la sintaxis es muy simple:</p> + +<p>jar:<filename.jar>!/<ruta_en_el_archivo></p> + +<p>Para el paquete browser, el archivo es browser.jar, situado junto al fichero manifest en el directorio chrome. La ruta 'content/browser' especifica la ruta donde se localizan los ficheros XUL dentro del archivo. No necesita especificar la ruta si no tiene directorio en el archivo. En este caso la hay, dado que los ficheros para el paquete branding se almacenan en diferentes rutas del mismo archivo.</p> + +<p>Para el paquete 'tests' creado, los archivos no se encuentran empaquetados por lo que utilizaremos una ruta directa. Ello facilita la labor del desarrollador puesto que no se precisa empaquetar todos los archivos cada vez que se realiza un cambio. Sin embargo, en el momento de la distribución del paquete o la extensión, es preferible hacerlo empaquetado para evitar la instalación de varios pequeños archivos.</p> + +<p>La parte <em>xpcnativewrappers=yes</em> del final del manifiesto es un señalador que puede usarse opcionalmente. En <em>javascript</em> es posible sobreescribir las funciones preconstruidas en el código. Si se especifica el señalador <em>xpcnativewrappers</em>, indicará que el <em>script</em> que se ejecuta en un contexto con privilegios no utiliza las versiones sobrecargadas sino las versiones originales. De otro modo, si la extensión intentara llamadas a las versiones modificadas pudiera no funcionar correctamente, o peor aún, crear problemas en la seguridad. Este señalador fue añadido para prevenir estos problemas y debería utlizarse siempre en nuevas extensiones, pero se ha respetado por compatibilidad de antiguas extensiones.</p> + +<h3 id="Temas_y_configuraci.C3.B3n_regional" name="Temas_y_configuraci.C3.B3n_regional">Temas y configuración regional</h3> + +<p>La estructura para los temas y la configuración regional es similar a la del paquete de contenido, excepto que es necesario especificar el paquete de contenido para el cual se está proporcionando dicho tema o configuración regional. Por ejemplo:</p> + +<pre>skin browser classic/1.0 jar:classic.jar!/skin/classic/browser/ +locale browser en-US jar:en-US.jar!/locale/browser/ +</pre> + +<p>A las líneas anteriores se les ha añadido un campo extra para indicar que tanto el tema y la configuración regional se aplican al navegador. El nombre del tema es 'classic/1.0'. Es este caso se usa un número de versión como parte del nombre del tema pero es opcional si vas a crear tu propio tema. Mozilla no utiliza el número de versión de manera especial ya que dicho número simplemente forma parte del nombre del tema. La configuración regional es 'en-US'. Sus URL chrome son mapeadas a <a class="external" rel="freelink">chrome://browser/skin</a> y <a class="external" rel="freelink">chrome://browser/locale</a>. Si estás creando tu propio tema o configuración regional para el navegador, todo lo que necesitas hacer es crear un fichero manifest con una de estas dos líneas en él, modificándolas para que se adapten al tema o a la configuración regional.</p> + +<h3 id="Nuestro_dialogo_de_ejemplo_para_buscar_archivos" name="Nuestro_dialogo_de_ejemplo_para_buscar_archivos">Nuestro dialogo de ejemplo para buscar archivos</h3> + +<p>Vamos a crear un fichero manifest para el cuadro de diálogo para buscar archivos que desarrollaremos. Puedes combinar los tres tipos anteriores en un único fichero si lo deseas. Esto se puede hacer cuando se crea una extensión con todas sus partes incluidas en un solo fichero. Lo haremos así para el cuadro de diálogo. Crea un fichero llamado findfile.manifest en el directorio chrome y añade lo siguiente a dicho fichero:</p> + +<pre>content findfile file:///findfile/content/ +skin findfile classic/1.0 file:///findfile/skin/ +locale findfile en-US file:///findfile/locale/ +</pre> + +<p>Crea los nuevos directorios listados anteriormente. No importa dónde, pero asegúrate de que la rutas de los ficheros en el fichero manifest apuntan a dichos directorios. Naturalmente, lo lógico sería usar los directorios apropiados para tu sistema. Si se va a distribuir el paquete, se necesitaría empaquetarlo en un fichero JAR y modificar estas rutas. En este caso, sólo vamos a crearlo para demostrar el uso del fichero manifest y para preparar los directorios para los ejemplo que veremos en las siguiente secciones.</p> + +<p>Nótese que el segundo campo de las líneas del tema y de la configuración regional especifica 'findfile'. Esto significa que el tema y la configuración regional modifican el paquete findfile especificado en la primera línea. Las tres rutas anteriores especifican subdirectorios para cada parte. Seguramente querrás crear estos subdirectorios para mantener los ficheros de cada parte separados.</p> + +<h3 id="Instalaci.C3.B3n_de_un_paquete" name="Instalaci.C3.B3n_de_un_paquete">Instalación de un paquete</h3> + +<p>Para instalar una aplicación, necesitarás crear un instalador para ella o incluirlo como parte de otra aplicación. El método usado depende de qué clase de aplicación estés creando. Para las extensiones, necesitarás crear un fichero de instalación llamado install.rdf, el cual describe lo que será instalado, el autor de la extensión y con qué versiones del navegador u otras aplicaciones es compatible. También se necesita una estructura de directorios específica ya que las extensiones están limitadas a donde los ficheros deben de ser instalados. Una extensión es empaquetada en un fichero XPI. XPI es la abreviatura de XPInstall y es usada por Mozilla para instalar componentes. Al igual que los ficheros JAR, un fichero XPI sólo es un fichero ZIP al que se le ha cambiado la extensión por lo que puedes crear y ver los ficheros XPI con cualquier herramienta ZIP.</p> + +<p>El administrador de extensiones de Firefox maneja automáticamente las extensiones instaladas empaquetadas en ficheros XPI. Se recomienda subir las extensiones al <a class="link-https" href="https://addons.mozilla.org/">sitio Add-ons de Mozilla</a>, donde los usuarios pueden localizarlas para instalarlas. Aunque pueden ser instaladas desde cualquier lugar, de modo predeterminado no se permiten instalaciones desde otros sitios.</p> + +<p>También es posible utilizar un script de instalación escrito en JavaScript para instalar ficheros. Esto permite copiar los ficheros a cualquier ubicación y realizar otras tareas de administración de ficheros. Sin embargo, las aplicaciones instaladas a través de script no serán listadas por el administrador de extensiones ni existe ningún método automatizado para desinstalarlas. Por esta razón, los scripts de instalación no se usan tan asiduamente.</p> + +<p>Las aplicaciones independientes pueden ser empaquetadas utilizando XULRunner. Esto crea un fichero ejecutable por separado para que la aplicación pueda ser distribuida independientemente del navegador.</p> + +<p>Para más información sobre la creación de extensiones, véase <a href="/es/Extensiones" title="es/Extensiones">Extensiones</a>. Para más información sobre XULRunner, véase <a href="/es/XULRunner" title="es/XULRunner">XULRunner</a>.</p> + +<h3 id="Aplicaciones_antiguas" name="Aplicaciones_antiguas">Aplicaciones antiguas</h3> + +<p>Si estás creando aplicaciones para las versiones antiguas de Mozilla, es decir, anteriores a Firefox 1.5 o a Mozilla 1.8, el proceso se vuelve un poco más complicado. A continuación se explica cómo configurar un paquete para las primeras versiones. Se puede obviar esta sección si lo que se van a crear son nuevas extensiones o aplicaciones XUL.</p> + +<div class="note"><strong>Nota</strong>: Este antiguo proceso también se aplica al nuevo SeaMonkey 1.0. El código base aún no ha adoptado el formao <em>"Manifest"</em>.</div> + +<pre class="eval"><?xml version="1.0"?> + +<RDF:RDF xmlns:RDF="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>" + xmlns:chrome="<span class="nowiki">http://www.mozilla.org/rdf/chrome#</span>"> + + <RDF:Seq about="urn:mozilla:package:root"> + <RDF:li resource="urn:mozilla:package:<span style="color: #ff0000;"><span class="highlightred">mi_aplicacion</span></span>"/> + </RDF:Seq> + + <RDF:Description about="urn:mozilla:package:<span style="color: #ff0000;"><span class="highlightred">mi_aplicacion</span></span>" + chrome:displayName="<span style="color: #00ccff;"><span class="highlightblue">titulo</span></span>" + chrome:author="<span style="color: #00ccff;"><span class="highlightblue">autor</span></span>" + chrome:name="<span style="color: #ff0000;"><span class="highlightred">mi_aplicacion</span></span>" + chrome:extension="true"/> + +</RDF:RDF> +</pre> + +<pre class="eval">content,install,url,<span class="highlightred"><a class="external" rel="freelink">file:///main/app/</a></span> +</pre> + +<ol> + <li>Crea un directorio cualquiera. La mayoría de la gente lo crearía como subdirectorio del directorio chrome de Mozilla aunque no es imprescindible. El directorio puede estar en cualquier lugar en disco. Pon los ficheros XUL en este directorio.</li> + <li>Crea un fichero llamado contents.rdf y ponlo en dicho directorio. Copia el texto mostrado a continuación en este fichero. Este fichero será usado para conocer el identificador de la aplicación, su nombre, autor, versión, etc...</li> + <li>Cambia las partes resaltadas del fichero anterior por tus datos. El texto en rojo '<span style="color: #ff0000;">mi_aplicacion</span>' debería corresponder al ID de la aplicación. Te lo puedes inventar pero usualmente el ID corresponde al nombre de la aplicación. Reemplaza el texto resaltado en <span style="color: #00ccff;">azul</span> con el título de la aplicación y el autor.</li> + <li>Si el campo 'chrome:extension' es true, la aplicación es una extensión de Mozilla Firefox Extension y será mostrada en la ventana de extensiones del navegador. Si es false, no aparecerá.</li> + <li>Guarda el fichero contents.rdf y asegúrate de que está en el directorio creado en el paso 1.</li> + <li>Abre el fichero <directorio_mozilla>/chrome/installed-chrome.txt, donde <directorio_mozilla> es el directorio deon está instalado Mozilla. Sal de Mozilla antes de hacer esto.</li> + <li>A continuación vas a registrar la nueva aplicación con Mozilla para que ésta sepa dónde encontrarla. Añade una línea al final de installed-chrome.txt apuntando al nuevo directorio creado en el paso 1. Cambia el texto resaltado a continuación por la ruta del directorio. Asegúrate de que la URL acaba con una barra (/) y que dejas una nueva línea al final de la línea. Si no estás seguro de qué URL es, abre el directorio creado en el paso 1 en Mozilla y copia la URL desde el campo de localización. Date cuenta de que la referencia debe ser siempre un directorio, no un fichero.</li> + <li>Borra el fichero <directorio_mozilla>/chrome/chrome.rdf.</li> + <li>Ejecuta Mozilla. Deberías ver cualquier fichero XUL ubicado en el directorio utilizando una URL de la forma <strong>chrome://<span class="highlightred">id_aplicacion</span>/content/fichero.xul</strong> donde fichero.xul es el nombre del fichero. El fichero XUL principal debería ser id_aplicacion.xul, el cual puede ser cargado usando la URL abreviada <strong>chrome://<span class="highlightred">id_aplicacion</span>/content/</strong>.</li> +</ol> + +<p>Si estás creando temas y/o configuraciones regionales, repite los pasos anteriores, exceptuando que el formato del fichero contents.rdf es ligeramente diferente. Mira el contenido de los ficheros contents.rdf en otras aplicaciones para más detalles.</p> + +<h3 id="Localizaci.C3.B3n_de_fallos" name="Localizaci.C3.B3n_de_fallos">Localización de fallos</h3> + +<p>Crear un paquete chrome puede resultar con frecuencia un arte y es difícil detectar errores. A continuación se muestran unos cuantos trucos en caso de que te atasques.</p> + +<ul> + <li>Abre el fichero <directorio_mozilla>/chrome/chrome.rdf. Ahí deberías encontrar referencias a tu ID de aplicación. Si no es el caso, algo ha ido mal durante el registro. Si está ahí, probablemente estés usando una URL chrome incorrecta cuando cargas el fichero.</li> + <li>Intenta borrar el fichero <directorio_mozilla>/chrome/chrome.rdf. Será regenerado. Elimina por completo también el directorio <directorio_mozilla>/chrome/overlayinfo/ si estás usando overlays.</li> + <li>Asegúrate de que la URL que añadiste en el fichero installed-chrome.txt acaba con una barra y que hay un retorno de carro después de ella.</li> + <li>En Windows, las URL del sistema de ficheros tienen de la forma <a class="external" rel="freelink">file:///C</a>|/files/app/, donde C es la letra de unidad.</li> + <li>Asegúrate de que el fichero contents.rdf está en el directorio correcto y de que está bien escrito. Abre el fichero contents.rdf en Mozilla para ver si lo analiza como un XML bien formado. Si no, verás un error sobre un fondo amarillo.</li> + <li>Si estás utilizando una compilación de depuración de Mozilla, cierta información será mostrada en el terminal cuando empiece a comprobar las aplicaciones chrome. Comprueba si tu aplicación aparece en este listado.</li> +</ul> + +<p>En la siguiente sección empezaremos a mirar el lenguaje XUL.</p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/atajos_de_teclado/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/atajos_de_teclado/index.html new file mode 100644 index 0000000000..39ab142d19 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/atajos_de_teclado/index.html @@ -0,0 +1,376 @@ +--- +title: Atajos de teclado +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Atajos_de_teclado +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Keyboard_Shortcuts +--- +<p>Puedes usar manejadores de evento de teclado para responder al teclado. Sin embargo, sería tedioso hacer eso para cada botón y elemento de menú.</p> + +<h3 id="Creaci.C3.B3n_de_un_atajo_de_teclado" name="Creaci.C3.B3n_de_un_atajo_de_teclado">Creación de un atajo de teclado</h3> + +<p>XUL provee métodos en los cuales puede definir atajos de teclado. Ya vimos en <a href="/es/Tutorial_de_XUL/Menús_de_Barras_Simples" title="es/Tutorial de XUL/Menús de Barras Simples">la sección de menús</a> que podemos definir un atributo llamado <code>accesskey</code> que específica la tecla que un usuario debe presionar para activar el menú o un elemento del mismo. En el ejemplo que está debajo, el menú Archivo puede ser seleccionado presionando 'Alt' y 'F' (o cualquier otra combinación de teclas para una plataforma específica). Una vez que el menú Archivo está abierto, el menú Cerrar puede ser seleccionado presionando la tecla C.</p> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul">Ver en funcionamiento</a></p> + +<pre><menubar id="sample-menubar"> + <menu id="file-menu" label="Archivo" accesskey="f"> + <menupopup id="file-popup"> + <menuitem id="close-command" label="Cerrar" accesskey="c"/> + </menupopup> + </menu> +</menubar> +</pre> + +<p>Tambié puede usar el atributo <code><a href="/Es/XUL/Atributos#accesskey" title="Es/XUL/Atributos#accesskey">accesskey</a></code> en botones. Cuando la tecla es presionada en este caso, el botón es seleccionado.</p> + +<p>Quizás quiera configurar atajos de teclado más generales. Por ejemplo, presionar Control+C para copiar texto al porta papeles. Aunque a veces atajos como estos no siempre son válidos, usualmente funcionarán cada vez que la ventana esté abierta. Usualmente, un atajo del teclado estará permitido en cualquier momento y puede ver ver si deberí estar haciendo algo con algún programa. Por ejemplo, copiar texto al portapapeles sólo debería funcionar cuando hay algún texto seleccionado.</p> + +<h4 id="El_elemento_.27tecla.27" name="El_elemento_.27tecla.27">El elemento 'key'</h4> + +<p>XUL provee de un elemento, <code><a href="/es/XUL/Elementos#key" title="es/XUL/Elementos#key">key</a></code>, que permite definir atajos de teclado para una ventana. Tiene atributos para especificar la tecla que debería ser presionada y qué teclas modificadoras (tales como Shift o Control) necesitan ser presionadas simultáneamente. A continuación se muestra un ejemplo:</p> + +<pre><keyset> + <key id="sample-key" modifiers="shift" key="R"/> +</keyset> +</pre> + +<p>En este ejemplo se define un atajo de teclado que es activado cuando el usuario presiona las teclas 'Shift' y 'R' simultáneamente. El atributo <code><a href="/Es/XUL/Atributos#key" title="Es/XUL/Atributos#key">key</a></code> (tiene el mismo nombre que el elemento) se emplea para indicar qué tecla debe apretarse, en este caso la 'R'. Se puede asignar cualquier caracter (de teclado) a este atributo para requerir que se apriete una tecla en particular. Los modificadores que deben apretarse se indican con el atributo <code><a href="/Es/XUL/Atributos#modifiers" title="Es/XUL/Atributos#modifiers">modifiers</a></code>. Se pueden establecer varios, (ej: <code>modifiers="control alt") </code>asignando como valor una lista separada con espacios de teclas de modificadoras; se listan a continuación:</p> + +<dl> + <dt>alt </dt> + <dd>El usuario debe pulsar la tecla Alt. En Macintosh, es la tecla Option.</dd> + <dt>control </dt> + <dd>El usuario debe pulsar la tecla Control.</dd> + <dt>meta </dt> + <dd>El usuario debe pulsar la tecla Meta. En Macintosh, es la tecla Command.</dd> + <dt>shift </dt> + <dd>El usuario debe pulsar la tecla Mayúsculas.</dd> + <dt>accel </dt> + <dd>El usuario debe pulsar la tecla especial acelerador. La tecla usada por los atajos de teclado en la plataforma del usuario. Habitualmente, éste debería ser el valor que utilizases.</dd> +</dl> + +<p>Tu teclado no tendrá necesariamente todas las teclas, en cuyo caso serán mapeadas a las teclas modificadoras que tengas.</p> + +<p>El elemento <code><a href="/es/XUL/Elementos#key" title="es/XUL/Elementos#key">key</a></code> debe colocarse dentro de un elemento <code><a href="/es/XUL/Elementos#keyset" title="es/XUL/Elementos#keyset">keyset</a></code>; en caso contrario no funcionará. Este elemento esta diseñado para contener un conjunto de elementos <code>key</code>, lo cual sirve para agrupar todas las definiciones de teclas en un solo sitio en cada archivo. Cualquier elemento <code>key</code> fuera de un <code>keyset </code>no funcionará.<br> + </p> + +<p>Cada plataforma generalmente utiliza una tecla diferente para los atajos de teclado. Por ejemplo, Windows usa la tecla Control y Macintosh usa la tecla Command. Sería conveniente definir elementos key por separado para cada plataforma. Afortunadamente, hay una solución. El modificador accel hace referencia a la tecla usada para atajos de teclado específica de cada plataforma. Funciona igual que otros modificadores, pero no será la misma en todas las plataformas.</p> + +<p><strong>Algunos ejemplos adicionales:</strong></p> + +<pre><keyset> + <key id="copy-key" modifiers="control" key="C"/> + <key id="explore-key" modifiers="control alt" key="E"/> + <key id="paste-key" modifiers="accel" key="V"/> +</keyset> +</pre> + +<h4 id="El_atributo_c.C3.B3digo_de_tecla_.28keycode.29" name="El_atributo_c.C3.B3digo_de_tecla_.28keycode.29">El atributo código de tecla (keycode)</h4> + +<p>El atributo <code><a href="/Es/XUL/Atributos#key" title="Es/XUL/Atributos#key">key</a></code> se utiliza para especificar la tecla que debe ser pulsada. Sin embargo, habrá casos en los que quieras referirte a teclas que no pueden ser especificadas con un caracter (como la tecla Enter o las teclas de función F1..F12). El atributo <code>key</code> sólo puede ser utilizado para caracteres imprimibles. Otro atributo, <a href="/Es/XUL/Atributos#keycode" title="Es/XUL/Atributos#keycode">keycode</a> puede ser utilizado para caracteres no imprimibles.</p> + +<p>El atributo <a href="/Es/XUL/Atributos#keycode" title="Es/XUL/Atributos#keycode">keycode</a> debería ser establecido a un código especial que represente la tecla que quieres. A continuación hay una lista de teclas. No todas las teclas están disponibles en todos los teclados.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td>VK_CANCEL</td> + <td>VK_BACK</td> + <td>VK_TAB</td> + <td>VK_CLEAR</td> + </tr> + <tr> + <td>VK_RETURN</td> + <td>VK_ENTER</td> + <td>VK_SHIFT</td> + <td>VK_CONTROL</td> + </tr> + <tr> + <td>VK_ALT</td> + <td>VK_PAUSE</td> + <td>VK_CAPS_LOCK</td> + <td>VK_ESCAPE</td> + </tr> + <tr> + <td>VK_SPACE</td> + <td>VK_PAGE_UP</td> + <td>VK_PAGE_DOWN</td> + <td>VK_END</td> + </tr> + <tr> + <td>VK_HOME</td> + <td>VK_LEFT</td> + <td>VK_UP</td> + <td>VK_RIGHT</td> + </tr> + <tr> + <td>VK_DOWN</td> + <td>VK_PRINTSCREEN</td> + <td>VK_INSERT</td> + <td>VK_DELETE</td> + </tr> + <tr> + <td>VK_0</td> + <td>VK_1</td> + <td>VK_2</td> + <td>VK_3</td> + </tr> + <tr> + <td>VK_4</td> + <td>VK_5</td> + <td>VK_6</td> + <td>VK_7</td> + </tr> + <tr> + <td>VK_8</td> + <td>VK_9</td> + <td>VK_SEMICOLON</td> + <td>VK_EQUALS</td> + </tr> + <tr> + <td>VK_A</td> + <td>VK_B</td> + <td>VK_C</td> + <td>VK_D</td> + </tr> + <tr> + <td>VK_E</td> + <td>VK_F</td> + <td>VK_G</td> + <td>VK_H</td> + </tr> + <tr> + <td>VK_I</td> + <td>VK_J</td> + <td>VK_K</td> + <td>VK_L</td> + </tr> + <tr> + <td>VK_M</td> + <td>VK_N</td> + <td>VK_O</td> + <td>VK_P</td> + </tr> + <tr> + <td>VK_Q</td> + <td>VK_R</td> + <td>VK_S</td> + <td>VK_T</td> + </tr> + <tr> + <td>VK_U</td> + <td>VK_V</td> + <td>VK_W</td> + <td>VK_X</td> + </tr> + <tr> + <td>VK_Y</td> + <td>VK_Z</td> + <td>VK_NUMPAD0</td> + <td>VK_NUMPAD1</td> + </tr> + <tr> + <td>VK_NUMPAD2</td> + <td>VK_NUMPAD3</td> + <td>VK_NUMPAD4</td> + <td>VK_NUMPAD5</td> + </tr> + <tr> + <td>VK_NUMPAD6</td> + <td>VK_NUMPAD7</td> + <td>VK_NUMPAD8</td> + <td>VK_NUMPAD9</td> + </tr> + <tr> + <td>VK_MULTIPLY</td> + <td>VK_ADD</td> + <td>VK_SEPARATOR</td> + <td>VK_SUBTRACT</td> + </tr> + <tr> + <td>VK_DECIMAL</td> + <td>VK_DIVIDE</td> + <td>VK_F1</td> + <td>VK_F2</td> + </tr> + <tr> + <td>VK_F3</td> + <td>VK_F4</td> + <td>VK_F5</td> + <td>VK_F6</td> + </tr> + <tr> + <td>VK_F7</td> + <td>VK_F8</td> + <td>VK_F9</td> + <td>VK_F10</td> + </tr> + <tr> + <td>VK_F11</td> + <td>VK_F12</td> + <td>VK_F13</td> + <td>VK_F14</td> + </tr> + <tr> + <td>VK_F15</td> + <td>VK_F16</td> + <td>VK_F17</td> + <td>VK_F18</td> + </tr> + <tr> + <td>VK_F19</td> + <td>VK_F20</td> + <td>VK_F21</td> + <td>VK_F22</td> + </tr> + <tr> + <td>VK_F23</td> + <td>VK_F24</td> + <td>VK_NUM_LOCK</td> + <td>VK_SCROLL_LOCK</td> + </tr> + <tr> + <td>VK_COMMA</td> + <td>VK_PERIOD</td> + <td>VK_SLASH</td> + <td>VK_BACK_QUOTE</td> + </tr> + <tr> + <td>VK_OPEN_BRACKET</td> + <td>VK_BACK_SLASH</td> + <td>VK_CLOSE_BRACKET</td> + <td>VK_QUOTE</td> + </tr> + <tr> + <td>VK_HELP</td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> + +<p>Por ejemplo, para crear un atajo con las teclas 'Alt y F5':</p> + +<pre><keyset> + <key id="test-key" modifiers="alt" keycode="VK_F5"/> +</keyset> +</pre> + +<p>El siguiente ejemplo muestra algunos atajos de teclado más:</p> + +<pre><keyset> + <key id="copy-key" modifiers="accel" key="C"/> + <key id="find-key" keycode="VK_F3"/> + <key id="switch-key" modifiers="control alt" key="1"/> +</keyset> +</pre> + +<p>La primera tecla es invocada cuando el usuario pulsa su atajo específico de la plataforma y C. El segundo es invocado cuando el usuario pulsa F3. El tercero es invocado al pulsar las teclas Control, Alt y 1 a la vez. Si quieres distinguir entre teclas de la parte principal del teclado y el teclado numérico, utiliza las teclas VK_NUMPAD (como VK_NUMPAD1).</p> + +<div class="note"> +<p>Consulta la <a class="external" href="http://www.mozilla.org/access/keyboard/">Mozilla Keyboard Planning FAQ and Cross Reference</a> para más información sobre selección atajos de teclado para usar en aplicaciones.</p> +</div> + +<h3 id="Usando_los_atajos_de_teclado" name="Usando_los_atajos_de_teclado">Usando los atajos de teclado</h3> + +<p>Ahora que sabemos cómo definir atajos de teclado, veremos cómo podemos usarlos. Hay dos formas. La primera es la más simple y sólo requiere que utilices el manejador de evento keypress en el elemento <code><a href="/es/XUL/Elementos#key" title="es/XUL/Elementos#key">key</a></code>. Cuando el usuario pulsa la tecla, el script será invocado. A continuación se muestra un ejemplo:</p> + +<pre class="eval"><keyset> + <key id="copy-key" modifiers="accel" key="C" oncommand="DoCopy();"/> +</keyset> +</pre> + +<p>La función <code>DoCopy</code> será llamada cuando el usuario presione las teclas especificadas en el elemento <code><a href="/es/XUL/Elementos#key" title="es/XUL/Elementos#key">key</a></code>, que en este ejemplo, son las teclas para copiar al portapapeles (como Control+C). Esto funcionará mientras la ventana esté abierta. La función <code>DoCopy</code> debería comprobar si hay texto seleccionado y en ese caso copiarlo al portapapeles. Nota que las cajas de texto tienen los atajos del portapapeles ya incluidos, por lo que no tienes que implementarlos por ti mismo.</p> + +<h4 id="Asignaci.C3.B3n_de_un_atajo_de_teclado_a_un_men.C3.BA" name="Asignaci.C3.B3n_de_un_atajo_de_teclado_a_un_men.C3.BA">Asignación de un atajo de teclado a un menú</h4> + +<p>Si estás asignando un atajo de teclado que ejecuta a un comando que ya existe en un menú, puedes asociar el elemento <code><a href="/es/XUL/Elementos#key" title="es/XUL/Elementos#key">key</a></code> directamente con el comando del menú. Para hacer esto, añade un atributo <code><a href="/Es/XUL/Atributos#key" title="Es/XUL/Atributos#key">key</a></code> al <code><a href="/es/XUL/Elementos#menuitem" title="es/XUL/Elementos#menuitem">menuitem</a></code>. Establece su valor al <code><a href="/Es/XUL/Atributos#id" title="Es/XUL/Atributos#id">id</a></code> de la tecla que quieras usar. El siguiente ejemplo muestra esto.</p> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul">Ver en funcionamiento</a></p> + +<div class="float-right"><img alt="Image:keyshort1.jpg" class="internal" src="/@api/deki/files/1147/=Keyshort1.jpg"></div> + +<pre class="eval"><keyset> + <key id="paste-key" modifiers="accel" key="V" + oncommand="alert('Paste invoked')"/> +</keyset> + +<menubar id="sample-menubar"> + <menu id="edit-menu" label="Edit" accesskey="e"> + <menupopup id="edit-popup"> + <menuitem id="paste-command" + accesskey="p" key="paste-key" + label="Paste" oncommand="alert('Paste invoked')"/> + </menupopup> + </menu> +</menubar> +</pre> + +<p>El atributo <code><a href="/Es/XUL/Atributos#key" title="Es/XUL/Atributos#key">key</a></code> del elemento menuitem, cuyo valor aquí es <code>paste-key</code> es igual al valor del atributo <code>id</code> de la tecla definida. Puedes usar esto para teclas adicionales así como para definir atajos de teclado para cualquier número de elementos.</p> + +<p>También verás que se ha añadido un texto junto a la opción "Paste" para indicar que el comando de menú puede ser invocado mediante Control + V. Esto se realiza automáticamente basándose en los modificadores del elemento <code>key</code>. Los atajos de teclado asociados a los menús funcionarán aunque el menú no esté abierto.</p> + +<p>Una característica adicional de las definiciones de teclas es que las puedes desactivar fácilmente. Par hacer esto, añade un atributo <code><a href="/Es/XUL/Atributos#disabled" title="Es/XUL/Atributos#disabled">disabled</a> al elemento <code>key</code> y establece su valor a <code>true</code>. Esto desactiva el atajo de teclado para que no pueda ser invocado. Es útil cambiar el atributo <code>disabled</code> utilizando un script.</p> + +<div class="highlight"> +<h4 id="Nuestro_ejemplo" name="Nuestro_ejemplo">Nuestro ejemplo</h4> + +<p>Vamos a añadir atajos de teclado al diálogo encontrar archivos. Añadiremos cuatro, para los comandos Cortar (Cut), Copiar (Copy) y Pegar (Paste) y otro para el comando Cerrar (Close) cuando el usuario pulse Escape.</p> + +<pre class="eval"><span class="highlightred"> <keyset> <key id="cut_cmd" modifiers="accel" key="X"/> <key id="copy_cmd" modifiers="accel" key="C"/> <key id="paste_cmd" modifiers="accel" key="V"/> <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/> </keyset> </span> + +<vbox flex="1"> + <toolbox> + <menubar id="findfiles-menubar"> + <menu id="file-menu" label="File" accesskey="f"> + <menupopup id="file-popup"> + <menuitem label="Open Search..." accesskey="o"/> + <menuitem label="Save Search..." accesskey="s"/> + <menuseparator/> + <menuitem label="Close" accesskey="c" <span class="highlightred">key="close_cmd"</span> + oncommand="window.close();"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edit" accesskey="e"> + <menupopup id="edit-popup"> + <menuitem label="Cut" accesskey="t" <span class="highlightred">key="cut_cmd"</span>/> + <menuitem label="Copy" accesskey="c" <span class="highlightred">key="copy_cmd"</span>/> + <menuitem label="Paste" accesskey="p" <span class="highlightred">key="paste_cmd"</span> disabled="true"/> + </menupopup> + </menu> + </menubar> + </toolbox> +</vbox> +</pre> + +<p>Ahora podemos usar esos atajos para activar los comandos. Por supuesto, los comandos del portapapeles no harán nada porque no hemos escrito esos scripts.</p> +</div> + +<h3 id="Los_eventos_de_tecla" name="Los_eventos_de_tecla">Los eventos de tecla</h3> + +<p>Hay tres eventos de teclado que pueden ser utilizados si las funcionalidades descritas antes no estuvieran disponibles. Estos eventos son:</p> + +<dl> + <dt>keypress </dt> + <dd>Llamado cuando una tecla es pulsada y despulsada mientras un elemento tiene el foco. Puedes usar esta tecla para comprobar los caracteres permitidos en un campo.</dd> + <dt>keydown </dt> + <dd>Llamado cuando una tecla es pulsada (aunque todavía no se haya despulsado) mientras un elemento tiene el foco.</dd> + <dt>keyup </dt> + <dd>Llamado cuando una tecla es despulsada mientras un elemento tiene el foco.</dd> +</dl> + +<p>Los eventos de tecla son sólo enviados al elemento que tiene el foco. Típicamente, esto incluye cajas de texto, botones, checkboxes y elementos así. Si no hay ningún elemento focalizado, el evento de la tecla será dirigido al propio documento XUL. En este caso, puedes añadir un escuchador de eventos (event listener) a la etiqueta <code><a href="/es/XUL/Elementos#window" title="es/XUL/Elementos#window">window</a></code>. Aunque normalmente, si quieres responder a teclas globalmente, utilizarás un atajo de teclado como se ha descrito antes.</p> + +<p>El <a href="/es/DOM/event" title="es/DOM/event">objeto evento</a> de tecla tiene dos propiedades que registran la tecla que ha sido pulsada. La propiedad <code><a href="/es/DOM/event.keyCode" title="es/DOM/event.keyCode">keyCode</a></code> registra el código de la tecla y puede ser comparada con una de las constantes de la anterior tabla de esta sección. La propiedad <code><a href="/es/DOM/event.charCode" title="es/DOM/event.charCode">charCode</a></code> es utilizada para caracteres imprimibles y registrará el código de caracter de la tecla que fue pulsada.</p> + +<div class="highlight"><strong>Nuestro ejemplo:</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-keyshort.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-keyshort.xul">Ver en funcionamiento</a></div> + +<p>Seguimos con poner un gestor de <a href="/es/Tutorial_de_XUL/Foco_y_Selección" title="es/Tutorial_de_XUL/Foco_y_Selección">foco y selección</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Más_gestores_de_eventos" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Foco_y_Selección">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_botones/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_botones/index.html new file mode 100644 index 0000000000..4181b632c6 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_botones/index.html @@ -0,0 +1,111 @@ +--- +title: Añadiendo botones +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_botones +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Buttons +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Creando_una_ventana" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Añadiendo_etiquetas_e_imagenes">Siguiente »</a></p> +</div> + +<p>En esta sección veremos cómo añadir botones sencillos a una ventana.</p> + +<h3 id="A.C3.B1adir_botones_a_una_ventana" name="A.C3.B1adir_botones_a_una_ventana">Añadir botones a una ventana</h3> + +<p>La ventana que hemos creado no contiene nada hasta ahora, así es que carece de interés. En esta sección vamos a añadir dos botones: Uno para buscar y otro para cancelar. También aprenderemos una forma fácil de ubicarlos dentro de la ventana.</p> + +<p>Al igual que HTML, XUL tiene una serie de etiquetas para crear elementos de interfaz de usuario. La más básica de todas es la etiqueta <code><code><a href="/es/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>, que sirve para crear un botón simple.</p> + +<p>Cada elemento<em>botón</em> tiene dos propiedades asociadas: <code>label</code> e <code>image</code>, mútuamente compatibles: Se puede tener un botón con imagen y/o con etiqueta. Los botones se usan generalmente para las opciones de<em>Aceptar</em> o<em>Cancelar</em> en los cuadros de diálogo, por ejemplo.</p> + +<h4 id="Sintaxis_de_los_botones" name="Sintaxis_de_los_botones">Sintaxis de los botones</h4> + +<p>La etiqueta <code><code><a href="/es/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> tiene la siguiente sintaxis:</p> + +<pre><button + id="identificador" + class="dialogo" + label="Aceptar" + image="imagenes/imagen.jpg" + disabled="true" + accesskey="t"/> +</pre> + +<p>Los atributos son todos opcionales, y se interpretan así:</p> + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt> + <dd>Un identificador<em>único</em> (dentro de la página actual) que represente de forma inequívoca al botón. Es muy útil para referirse al botón desde una hoja de estilos CSS o desde un script de código, por ejemplo. Es recomendable rellenar este atributo en<em>todas las etiquetas</em> que uno declare (si no figura explícitamente en cada etiqueta de esta guía es porque se da por sobreentendido).</dd> + <dt><code id="a-class"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code> </dt> + <dd>La clase-estilo del botón. Se usa de la misma manera que en HTML: Sirve para indicar el estilo que el navegador deberá aplicar al botón creado. En el ejemplo precedente se usa la clase <code>dialogo</code>, aunque por lo general uno no suele establecer una clase específica para un botón.</dd> + <dt><code id="a-label"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> </dt> + <dd>El texto que aparecerá dentro del botón. Por ejemplo:<em>Aceptar</em> or<em>Cancelar</em>. Si no se rellena, el botón aparece sin texto.</dd> + <dt><code id="a-image"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> </dt> + <dd>La URL de la imagen que aparecerá dentro del botón. Si no se rellena, el botón aparecerá sin imagen. Una forma alternativa de especificar esta imagen es desde una hoja de estilo CSS, mediante una propiedad <code><a href="es/CSS/list-style-image">list-style-image</a></code>.</dd> + <dt><code id="a-disabled"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt> + <dd>Indicador de deshabilitado: Si se rellena con valor <code>true</code>, el botón aparecera deshabilitado, lo que quiere decir que no responderá a la acción de pulsar sobre él (y el aspecto, usualmente, será con el texto en gris pálido). Si no se especifica este atributo, el botón está habilitado. También se puede cambiar el estado habilitado/deshabilitado mediante <a href="es/JavaScript">JavaScript</a>.</dd> + <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> </dt> + <dd>En este atributo debe ir una sóla letra que se usará como tecla de acceso directo para pulsar el botón. Esta letra debería pertenecer al valor del atributo <code>label</code>. El aspecto, usualmente, será un subrayado bajo la letra escogida en el botón. Su funcionamiento consiste en que cada vez que el usuario pulse la letra escogida (más un pulsador que pude variar en función de la plataforma; usualmente ALT), desde cualquier lugar de la ventana, el botón recibirá el foco.</dd> +</dl> + +<p>Atención: La etiqueta <code>button</code> en realidad soporta<em>más atributos</em> de los listados aquí, pero el resto se verán <a href="es/XUL_Tutorial/More_Button_Features">más adelante</a>.</p> + +<h4 id="Algunos_ejemplos_de_botones" name="Algunos_ejemplos_de_botones">Algunos ejemplos de botones</h4> + +<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul">Ver en funcionamiento</a></p> + +<div class="float-right"><img alt="Image:buttons1.png"></div> + +<pre><button label="Normal"/> +<button label="Disabled" disabled="true"/> +</pre> + +<p><br> + El ejemplo de arriba genera los botones mostrados en la imagen. El primer botón es un botón normal, el segundo está desabilitado.</p> + +<p>Empezaremos creando un simple botón "Buscar" para la función buscar fichero. El ejemplo siguiente nos muestra cómo hacer esto.</p> + +<p> </p> + +<pre><button id="find-button" label="Buscar"/> +</pre> + +<div class="note">FireFox no permite abrir ventanas "chrome" desde páginas web, asi que el links "Ver" en el tutorial abriran una ventana de normal de browser.debido a esto, los botones aparecerán ocupando todo el ancho de la ventana. Puedes colocar align="start" a la etiqueta window para que esto no ocurra.</div> + +<div class="highlight"> +<h5 id="El_ejemplo_findfile.xul" name="El_ejemplo_findfile.xul">El ejemplo findfile.xul</h5> + +<p>Coloquemos este código al archivo que habiamos creado en la sección anterior. El código debe ser colocado entre las etiquetas de <code><code><a href="/es/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code>. El código que debemos agregar esta aquí abajo en rojo.</p> + +<pre class="eval"><?xml version="1.0"?> +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<window + id="findfile-window" + title="Find Files" + orient="horizontal" + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + + <span class="highlightred"><button id="find-button" label="Find"/></span> + <span class="highlightred"><button id="cancel-button" label="Cancel"/></span> + +</window> +</pre> + +<div class="float-right"><img alt="Image:buttons2.png"></div> + +<p>Verás que tambien se agrego el botón Cancel. Le dimos a la ventana una orientación horizontal, de este modo, los botones se muestran uno al lado del otro. Si abres el fichero en Mozilla, obtendras algo como la imagen mostrada aquí.</p> +</div> + +<p> </p> + +<div class="note">Nota: No deberíamos poner el texto de <code>label</code> directamente en el fichero XUL. En lugar de eso, deberíamos usar <a href="es/XUL_Tutorial/Localization">entes así, el texto puede ser traducido facilmente.</a>.</div> + +<p>En la próxima sección descubriremos <a href="es/XUL_Tutorial/Adding_Labels_and_Images">cómo agregar etiquetas e imágenes a una ventana XUL</a>.</p> + +<p><small>Ver también <a href="es/XUL_Tutorial/More_Button_Features">more button fetaures</a></small></p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Creando_una_ventana" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Añadiendo_etiquetas_e_imagenes">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_elementos_html/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_elementos_html/index.html new file mode 100644 index 0000000000..c0330768d6 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_elementos_html/index.html @@ -0,0 +1,106 @@ +--- +title: Añadiendo elementos HTML +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_elementos_HTML +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_HTML_Elements +--- +<p> </p> +<p>Ahora que hemos añadido algunos botones, vamos a añadir algunos otros elementos.</p> +<h3 id="Adici.C3.B3n_de_Elementos_de_HTML_a_una_Ventana" name="Adici.C3.B3n_de_Elementos_de_HTML_a_una_Ventana">Adición de Elementos de HTML a una Ventana</h3> +<p>Además de todos los elementos XUL que están disponibles, usted también puede añadir elementos de HTML directamente dentro de un archivo XUL. Usted en realidad puede usar cualquier elemento de HTML en un archivo XUL, queriendo decir que programillas Javaneses y mesas pueden ser colocados en una ventana. Usted debería evitar usar elementos de HTML en archivos XUL si usted puede. Sin embargo, esta sección describirá como usarlos de todas maneras. Recuerde que XML es sensible a las mayusculas, entonces usted debera escribir tanto las etiquetas como los atributos en minúscula.</p> +<p>Para usar elementos de HTML en un archivo XUL, usted debe declarar que usted hace así la utilización del XHTML namespace. Este camino, Mozilla puede distinguir las etiquetas de HTML de los XUL. El atributo debajo debería para ser añadido a la etiqueta de <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_window.html">ventana</a></code> del archivo XUL, o al elemento de HTML exterior.</p> +<pre class="eval"> <span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span> +</pre> +<p>Esto es una declaración de HTML mucho como el que solíamos declarar XUL. Esto debe ser entrado exactamente como mostrado o esto no trabajará correctamente. Note que Mozilla en realidad no descarga este URL, pero esto realmente lo reconoce como ser HTML.</p> +<p>Aquí está un ejemplo como podría ser añadido a la ventana de archivo de hallazgo:</p> +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +<window + id="findfile-window" + title="Find Files" + orient="horizontal" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +</pre> +<p>Entonces, usted puede utilizar etiquetas HTML como lo haría normalmente. Teniendo en cuenta lo sieguiente:</p> +<ul> + <li>Debe añadir el prefijo html al principio de cada etiqueta, asumiendo que ha declarado el espacio de nombres HTML al comienzo.</li> + <li>Las etiquetas deben estar en minúsculas.</li> + <li>Todos los atributos deben ir entre comillas dobles.</li> + <li>Las etiquetas XML vacias, deben terminar con "/>". Esto se ve mejor en los siguientes ejemplos.</li> +</ul> +<p>Puede utilizar cualquier etiqueta HTML, aunque algunas como <code>head</code> y <code>body</code>, realmente no son utiles. A continuación se muestran algunos ejemplos.</p> +<pre><html:img src="banner.jpg"/> + +<html:input type="checkbox" value="true"/> + +<html:table> + <html:tr> + <html:td> + A simple table + </html:td> + </html:tr> +</html:table> +</pre> +<p>These examples will create an image from the file banner.jpg, a checkbox and a single-cell table. You should always use XUL features if they are available and you probably should not use tables for layout in XUL. (There are XUL elements for doing layout). Notice that the prefix html: was added to the front of each tag. This is so that Mozilla knows that this is an HTML tag and not a XUL one. If you left out the html: part, the browser would think that the elements were XUL elements and they would not display because img, input, table, and so on are not valid XUL tags.</p> +<p>In XUL, you can add labels with the <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_description.html">description</a></code> or <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_label.html">label</a></code> element. You should use these elements when you can. You can also add labels to controls either by using the HTML <code>label</code> element, or you can simply put the text inside another HTML block element (such as <code>p</code> or <code>div</code>) as in the example below.</p> +<h4 id="Example" name="Example">Example</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul">Ver en funcionamiento</a></p> +<pre><html:p> + Search for: + <html:input id="find-text"/> + <button id="okbutton" label="OK"/> +</html:p> +</pre> +<p>This code will cause the text 'Search for:' to be displayed, followed by an input element and an OK button. Notice that the XUL button can appear inside the HTML elements, as it does here. Plain text will only be displayed when placed inside an HTML element that would normally allow you to display text (such as a <code>p</code> tag). Text outside of one will not be displayed, unless the XUL element the text is inside allows this (the <code>description</code> element, for example). The examples below may help.</p> +<h3 id="Ejemplos_de_elementos_HTML" name="Ejemplos_de_elementos_HTML">Ejemplos de elementos HTML</h3> +<p>What follows are some examples of adding HTML elements to windows. In each case, the window and other common information has been left out for simplicity.</p> +<h4 id="Example_A_dialog_with_a_check_box" name="Example:_A_dialog_with_a_check_box">Example: A dialog with a check box</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul">Ver en funcionamiento</a></p> +<pre><html:p> + Click the box below to remember this decision. + <html:p> + <html:input id="rtd" type="checkbox"/> + <html:label for="rtd">Remember This Decision</html:label> + </html:p> +</html:p> +</pre> +<p>In this case, one <code>p</code> tag was used to place the text in and another was used to break apart the text into multiple lines.</p> +<p><img alt="Image:htmlelem-ex1.jpg"></p> +<h4 id="Example_Text_outside_of_HTML_blocks" name="Example:_Text_outside_of_HTML_blocks">Example: Text outside of HTML blocks</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul">Ver en funcionamiento</a></p> +<pre><html:div> + Would you like to save the following documents? + <html:hr/> +</html:div> +Expense Report 1 +What I Did Last Summer +<button id="yes" label="Yes"/> +<button id="no" label="No"/> +</pre> +<p><img alt="Image:htmlelem-ex2.jpg"></p> +<p>As can be seen in the image, the text inside the <code>div</code> tag was displayed but the other text (Expense Report 1 and What I Did Last Summer) was not. This is because there is no HTML or XUL element capable of displaying text enclosing it. To have this text appear, you would need to put it inside the <code>div</code> tag, or enclose the text in a <code>description</code> tag.</p> +<h4 id="Example_Invalid_HTML_elements" name="Example:_Invalid_HTML_elements">Example: Invalid HTML elements</h4> +<pre><html:po>Case 1</html:po> +<div>Case 2</div> +<html:description value="Case 3"/> +</pre> +<p>All three of the cases above will not display, each for a different reason.</p> +<dl> + <dt> + Case 1 </dt> + <dd> + <code>po</code> is not a valid HTML tag and Mozilla has no idea what to do with it.</dd> + <dt> + Case 2 </dt> + <dd> + <code>div</code> is valid but only in HTML. To get it to work, you will need to add the html: qualifier.</dd> + <dt> + Case 3 </dt> + <dd> + A <code>description</code> element is only valid in XUL and not in HTML. It should not have the html: qualifier.</dd> +</dl> +<p>Next, we'll learn how to adding spacing between elements. <span class="comment">Categorías</span></p> +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_etiquetas_e_imagenes/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_etiquetas_e_imagenes/index.html new file mode 100644 index 0000000000..2ab6c737b7 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_etiquetas_e_imagenes/index.html @@ -0,0 +1,54 @@ +--- +title: Añadiendo etiquetas e imagenes +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_etiquetas_e_imagenes +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Labels_and_Images +--- +<p>Esta sección describe un modo de añadir etiquetas e imágenes a una ventana. Además, veremos como incluir elementos en grupos.</p> +<h3 id="Elementos_de_Texto" name="Elementos_de_Texto">Elementos de Texto</h3> +<p>Usted no puede integrar el texto directamente en un archivo XUL sin etiquetas alrededor de ello y esperar que ello sea mostrado. El modo más básico de incluir el texto en una ventana es de usar el elemento de etiqueta. Muestran un ejemplo debajo:</p> +<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul">Ver en funcionamiento</a></p> +<pre><label value="This is some text"/> +</pre> +<p>El atributo de <code>valor</code> puede ser usado para especificar el texto que usted desea tener mostrado. El texto no se ajustará, de tal forma que el texto aparecerá sobre una sola línea. Esto es conveniente para las secciones cortas de texto.</p> +<p>Para el texto más largo, usted puede colocar el contenido dentro de etiquetas de <a class="external" href="http://www.xulplanet.com/references/elemref/ref_description.html">descripción</a> de apertura y cierre. A diferencia del texto especificado con el elemento de <a class="external" href="http://www.xulplanet.com/references/elemref/ref_label.html">etiqueta</a> y el atributo de <code>valor</code>, el texto hijo se ajustará en múltiples líneas si fuera necesario. Redimensione la ventana para ver lo ajustado. Como HTML, saltos de línea y espacios en blanco extras son colapsados en un solo espacio. Más adelante descubriremos como contraemos la anchura de elementos de modo que nosotros podamos ver la envoltura más fácilmente.</p> +<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul">Ver en funcionamiento</a></p> +<pre><description> + This longer section of text is displayed. +</description> +</pre> +<p>Internamente, tanto el elemento de <code>etiqueta</code> como el elemento de <code>descripción</code> son lo mismo, lo cual significa que las etiquetas pueden tener texto ajustado si usted coloca el texto dentro de la ´etiqueta´, y las descripciones pueden tener un atributo de <code>valor</code>. El elemento de etiqueta es querido para las etiquetas de mandos, como campos de texto. El elemento de <code>descripción</code> esta prometido a otro texto descriptivo como el texto informativo en el tope de un cuadro de diálogo. Por convención, usted debería seguir esta pauta.</p> +<p>Usted puede usar el atributo de <code>control</code> para fijar cual etiqueta de control esta asociada. Cuando el usuario pulsa la etiqueta, ése control será enfocado. Ponga el valor del atributo de <code>control</code> al id del elemento que será enfocado.</p> +<h4 id="Ejemplo_3" name="Ejemplo_3">Ejemplo</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul">Ver en funcionamiento</a></p> +<pre><label value="Click here:" control="open-button"/> +<button id="open-button" label="Open"/> +</pre> +<p><br> + En el ejemplo encima, pulsando la etiqueta hará que el botón sea enfocado.</p> +<h3 id="Im.C3.A1genes" name="Im.C3.A1genes">Imágenes</h3> +<p>Como HTML, XUL tiene un elemento para mostrar imágenes dentro de una ventana. Este elemento es adecuadamente llamado <a class="external" href="http://www.xulplanet.com/references/elemref/ref_image.html">image</a>. Note que el nombre de etiqueta es diferente que en HTML (image en vez de img). Usted puede usar el atributo de <code>src</code> para especificar el URL del archivo de imagen. El ejemplo debajo muestra esto:</p> +<pre><image src="images/banner.jpg"/> +</pre> +<p>Aunque usted pueda usar esta sintaxis, sería mejor usar una hoja de estilo para poner la URL de la imagen. En sesiones posteriores describiremos como usar hojas de estilo, pero un ejemplo se mostrá aqui para ampliar. Usted puede usar <code>lista-estilo-imagen</code> de la propiedad CSS para poner el URL para la imagen. Aquí están algunos ejemplos:</p> +<pre class="eval"><b>XUL:</b> + <image id="image1"/> + <image id="search"/> +</pre> +<pre class="eval"><b>Style Sheet:</b> + #image1 { + list-style-image: url("<a class="external" rel="freelink">chrome://findfile/skin/banner.jpg</a>"); + } + + #search { + list-style-image: url("<a class="external" rel="freelink">chrome://findfile/skin/images/search.jpg</a>"); + } +</pre> +<p>Estas imágenes vienen desde dentro del directorio chrome, en el skin para el paquete findfile. Puesto que estas imágenes varían por el piel, usted debe usualmente poner una imagen en el directorio skin.</p> +<p>En la próxima sesión, aprenderemos como añadir algunos controles a una ventana.</p> +<p><span class="comment">Categorías</span></p> +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_los_gestores_de_eventos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_los_gestores_de_eventos/index.html new file mode 100644 index 0000000000..41b1cce66c --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_los_gestores_de_eventos/index.html @@ -0,0 +1,133 @@ +--- +title: Añadiendo los gestores de eventos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_los_gestores_de_eventos +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers +--- +<p>The find files dialog so far looks quite good. We haven't cleaned it up much but we have created a simple user interface easily. Next, we will show how to add scripts to it.</p> + +<h3 id="Usando_scripts" name="Usando_scripts">Usando scripts</h3> + +<p>Para hacer funcional el diálogo de búsqueda de archivos, necesitaremos algunos scripts los cuales se ejecutarán cuando el usuario interactúe con el diálogo. Podríamos querer agregar un script para manejar el botón Buscar, el botón Cancelar y manejar cada comando del menú. Escribimos esto utilizando funciones <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a> muchas de la misma forma que en <a href="/es/HTML" title="es/HTML">HTML</a>.</p> + +<p>Puede utilizar el elemento <code><a href="/es/XUL/Elementos#script" title="es/XUL/Elementos#script">script</a></code> para incluir scripts en archivos XUL. Puede incluir el código script directamente en el archivo XUL entre la apertura y cierre de etiquetas <code>script</code> pero es mucho mejor incluir código en un archivo separado ya que de esta manera la ventana XUL cargará ligeramente más rápido. El atributo <code><a href="/Es/XUL/Atributos#src" title="Es/XUL/Atributos#src">src</a></code> es utilizado para enlazar un archivo script externo.</p> + +<div class="highlight"> +<h5 id="Nuestro_ejemplo" name="Nuestro_ejemplo">Nuestro ejemplo</h5> + +<p>Agreguemos un script al diálogo buscar archivo. Aunque no importe cómo sea llamado el archivo script, generalmente debería ser el mismo que el archivo XUL con una extensión <em>.js</em>. En este caso, findfile.js será utilizado. Agregue la línea debajo sólo <strong>después de la apertura de la etiqueta <code><a href="/es/XUL/Elementos#window" title="es/XUL/Elementos#window">window</a></code> y antes de cualquier otro elemento</strong>.</p> + +<pre class="eval"><span class="highlightred"><script src="findfile.js"/></span> +</pre> + +<div class="note">Nota: Al agregar el elemento <em>script</em> directamente bajo el elemento <em>window</em> su ámbito será el documento completo. Si se anida bajo otra etiqueta su ámbito se restringirá a los elementos anidados en ella, y no sera "visible" para otras zonas de documento.</div> + +<p>Crearemos el archivo script más tarde cuando conozcamos qué queremos poner en él. Definiremos algunas funciones en el archivo y podremos llamarlas desde un manejador de eventos.</p> +</div> + +<p>Puede incluir scripts múltiples en un archivo XUL utilizando múltiples etiquetas <code>script</code>, cada una apuntando a un script diferente. Puede utilizar URLs relativas o absolutas. Por ejemplo, puede utilizar URLs de la siguiente forma:</p> + +<pre class="eval"><script src="findfile.js"/> +<script src="<a class="external" rel="freelink">chrome://findfiles/content/help.js</a>"/> +<script src="<span class="nowiki">http://www.example.com/js/items.js</span>"/> +</pre> + +<p>Este tutorial no intenta describir cómo utilizar JavaScript ya que esto es un tópico extenso y hay variedades de otras fuentes que están disponibles para esto.</p> + +<div class="note">Por defecto la consola JavaScript sólo muestra errores desde contenido de red. Para mostrar errores en JavaScript chrome, es necesario cambiar la preferencia <code>javascript.options.showInConsole</code> a verdadero. Puede también cambiar la preferencia <code>javascript.options.strict</code> para la depuración. Estableciendo este valor a verdadero, la sintaxis propensa, pobremente escrita y no estándar causa errores lógicos que son guardados en la consola JavaScript.</div> + +<h3 id="Respuesta_a_eventos" name="Respuesta_a_eventos">Respuesta a eventos</h3> + +<p>El script contendrá código que responderá a varios eventos disparados por el usuario u otras situaciones. Hay más de treinta eventos diferentes que pueden ser manejados de formas distintas. Un evento típico es que el usuario presione un botón del ratón o presione una tecla. Cada elemento XUL tiene la habilidad de disparar varios eventos en diferentes situaciones. Algunos eventos son disparados solamente por determinados elementos.</p> + +<p>Cada evento tiene un nombre, por ejemplo, 'mousemove' es el nombre del evento que es disparado cuando el usuario mueve el ratón sobre un elemento de la Interfaz de Usuario. XUL utiliza el mismo mecanismo de evento definido en <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">eventos DOM</a>. Cuando una acción ocurre que debería disparar un evento, tal como que el usuario mueva el ratón, se crea un objeto evento correspondiente a tal tipo de evento. Las propiedades de dicho objeto se establecen de modo que ofrezca información asociada a la circunstancia en que se produjo, tal como: la posición del ratón, la(s) tecla(s) que fue(ron) presionada(s), el botón del ratón que se utilizó, etc.</p> + +<p>El evento es enviado luego en fases al XUL.</p> + +<ul> + <li>En la fase de captura, el evento primero es enviado a la ventana, luego al documento, seguido por cada ancestro del elemento XUL donde el evento ocurrió hacia abajo hasta que alcance el elemento.</li> + <li>En la fase objetivo, el evento es enviado hacia el elemento objetivo XUL.</li> + <li>En la fase burbujeante, el evento es enviado a cada elemento de más atrás hasta que alcance nuevamente la ventana.</li> +</ul> + +<p>Puede responder a un evento durante la captura completa de la fase burbujeante. Una vez que el evento ha finalizado de propagarse, cualquier acción por defecto ocurrirá, la cual está incluida en comportamiento del elemento.</p> + +<p>Por ejemplo, cuando el ratón sea movido sobre un botón que está dentro de un cuadro, un evento 'mousemove' es generado, y enviado primero a la ventana, seguido por el documento, y luego al cuadro. Eso completa la fase de captura. Luego, el evento 'mousemove' es enviado al botón. Finalmente, la fase burbujeante es esencialmente lo inverso a la fase de captura. Note que algunos eventos no hacen la fase burbujeante.</p> + +<p>Puede adjuntar oyentes a cada elemento a ser oído por los eventos durante cada paso de la propagación de eventos. Debido a la forma en que un evento simple es pasado a todos los ancestros, puede adjuntar un oyente a un elemento específico o a un elemento más grande en la jerarquía. Naturalmente, un evento adjunto a un elemento más grande recibirá la notificación de todos los elementos dentro de él, mientras que un evento adjunto a un botón sólo recibirá eventos preparados para ese botón. Esto es útil si hay varios elementos que querrían manejarse utilizando el mismo código o similar.</p> + +<p>El evento más común utilizado es el evento 'command'. El evento command es disparado cuando un usuario activa un elemento, por ejemplo presionando un botón, cambiando una casilla de verificación o seleccionando un ítem desde un menú. El evento command es un evento útil ya que automática maneja distintas formas de activar el elemento. Por ejemplo, el evento command ocurrirá sin importar si el usuario utiliza el ratón para seleccionar un botón o presionar la tecla Enter.</p> + +<p>Hay dos formas de adjuntar un evento oyente a un elemento. Primero, utilizando un atributo con script como su valor. Segundo, llamando a un método del evento addEventListener. El primero sólo puede manejar eventos burbujeantes pero tiende a ser más simple de escribir. El último puede manejar eventos en cualquier fase y puede también ser utilizado para adjuntar múltiples oyentes para un evento en un elemento. Utilizando la forma atributo es más común para la mayoría de eventos.</p> + +<h3 id="Attribute_Event_Listeners" name="Attribute_Event_Listeners">Atributos controladores de eventos</h3> + +<p>Para controlar eventos bajo la forma de atributos se debe asignar un atributo asociado con el evento a controlar en el elemento en en que se desea atraparlo: el atributo será el nombre del evento precedido del prefijo 'on' y se le asignará como valor un llamado a la función o script que se desea ejecutar cuando ocurra el evento. Por ejemplo, para el evento '<em>command</em>' el atributo correspondiente será '<em>oncommand</em>' y para '<em>mouseover</em>' será '<em>onmouseove</em>r'. El código de llamado a la función suele ser muy corto y generalmente llama a un procedimiento que ha sido definido en una etiqueta script o en un archivo separado. A continuación se ofrece un ejemplo de tratamiento de evento en respuesta a pulsar un botón:</p> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul">Ver en funcionamiento</a></p> + +<pre class="eval"><button label="OK" oncommand="alert('Se apretó el botón!');"/> +</pre> + +<p>Como el evento command permea las capas contenedoras (es burbujeante), también es posible ubicar el controlador de eventos en un elemento contenedor. En el ejemplo siguiente, el atributo controlador se establece en una caja y ésta atrapa eventos de los dos elementos que contiene.</p> + +<p><strong>Ejemplo 2</strong> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul">Ver en funcionamiento</a></p> + +<pre class="eval"><vbox oncommand="alert(event.target.tagName);"> + <button label="OK"/> + <checkbox label="Muestra las imágenes"/> +</vbox> +</pre> + +<p>En este ejemplo, el evento command se filtrará desde el elemento en que ocurra - button o checkbox - hasta el elemento vbox, donde es controlado. Si se hubiese colocado un segundo controlador de eventos (atributo <code>oncommand</code>) en el elemento button, su código sería invocado antes, seguido del manejador situado en el elemento vbox. Los controladores de eventos reciben, como argumento implícito, un objeto event al que se puede hacer referencia en código mediante la variable 'event'. Dicho objeto porta, en sus propiedades, la información que específicamente concierne al evento. Cuando varios elementos comparten un controlador de eventos (como en este ejemplo) es usual utilizar la propiedad 'target' del objeto event (<code>event.target</code>), que alberga una referencia al elemento en el que ocurrió. En el código de ejemplo se hace un llamado a la ventana de mensajes para que muestre el nombre de la etiqueta 'tagName' del elemento en que ocurra. La propiedad target resulta útil para controlar la permeabilidad de eventos burbujeantes, de modo que un conjunto de elementos, buttons por ejemplo, comparta y sea controlado mediante un único script.</p> + +<div class="note"><strong>Nota de traducción</strong>: Si se anida controladores de eventos, para un mismo evento, en varias capas; se debe tener cuidado de cancelarlo, una vez controlado en una capa, para evitar que se dispare nuevamente en los controladores situados en las capas contenedoras. A no ser que se desee realizar acciones en cascada.</div> + +<p>Se debe notar que la sintaxis para establecer los atibitos controladores es similar a la empleada para asignar eventos en documentos HTML. De hecho, HTML y XUL comparten el mismo mecanismo de definición de eventos. No obstante, <strong>hay una diferencia importante</strong>: mientras que en HTML se usa el evento 'click' (o el atributo <code>onclick</code>) para responder a acciones sobre los buttons, en XUL se debe usar el evento command en su lugar. XUL soporta el evento click, pero este sólo responde a acciones del ratón (mouse), no al uso del teclado. En consecuencia, se debe evitar el uso del evento click en XUL, a no ser que se tenga alguna razón para responder de modo exclusivo a acciones provocadas con el mouse (ratón). Adicionalmente, cuando se deshabilita un elemento, este no disparará eventos command; mientras que el evento click se produce con independencia de que el elemento en que se dispare esté o no habilitado.</p> + +<div class="highlight"> +<h5 id="Nuestro_ejemplo_2" name="Nuestro_ejemplo_2">Nuestro ejemplo</h5> + +<p>Un gestor command se puede agregar a los botones Buscar y Cancelar del diálogo de búsqueda de archivos. Presionar el botón Buscar debe iniciar la búsqueda. Como aún no vamos a implementar el proceso de búsqueda, dejaremos esta parte fuera por un rato. Presionar el botón Cancelar debe cerrar la ventana. El código de abajo muestra como hacer esto. Mientras estamos aquí, añadimos el mismo código al menuitem Cerrar.</p> + +<pre class="eval"><menuitem label="Cerrar" accesskey="c" <span class="highlightred">oncommand="window.close();"</span>/> +... + +<button id="cancel-button" label="Cancelar" + <span class="highlightred">oncommand="window.close();</span>"/> +</pre> + +<p>Aquí se añadieron dos gestores. El atributo <code>oncommand</code> fue añadido al menuitem Cerrar. Usando este gestor, el usuario podrá cerrar la ventana dando click al menuitem con el mouse o seleccionándolo con el teclado.El gestor <code>oncommand</code> también fue añadido al botón Cancelar.</p> +</div> + +<h3 id="DOM_Event_Listeners" name="DOM_Event_Listeners">Controladores de eventos asignados mediante métodos del DOM</h3> + +<p>Una segunda vía para asignar controladores de eventos a los elementos es usar su método addEventListener. Este camino permite agregarlos dinámicamente y escucharlos durante la fase de captura. A continuación se ilustra la sintaxis:</p> + +<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul">Ver en funcionamiento</a></p> + +<pre><button id="okbutton" label="OK"/> + +<script> +function buttonPressed(event){ + alert('Se apretó el botón!'); +} + +var button = document.getElementById("okbutton"); +button.addEventListener('command', buttonPressed, true); +</script> +</pre> + +<p>La función <code><a href="/es/DOM/document.getElementById" title="es/DOM/document.getElementById">getElementById()</a></code> devuelve el elemento cuyo Id sea pasado como parámetro; en este caso, el button <code>"okbutton"</code>. Luego se llama a la función <code><a href="/es/DOM/element.addEventListener" title="es/DOM/element.addEventListener">addEventListener()</a></code> de dicho elemento para agregarle un controlador de eventos: su primer argumento es el nombre del evento al que se va a responder, el segundo es el mombre de la función a llamar cuando el evento ocurra y finalmente, el último argumento debe ser <code>true</code> para controladores en la fase de captura. Si se desea permitir que el evento pase a otras fases se debe asignar el último argumenta como false. La función pasada como segundo argumento, debe a su vez, tener un argumento para pasar el objeto event, como se muestra en la declaración de la función <code>buttonPressed</code> arriba.</p> + +<div class="highlight">Nuestro ejemplo hasta aquí: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul">Ver en funcionamiento</a></div> + +<p>Seguimos con más detalles sobre <a href="/es/Tutorial_de_XUL/Más_gestores_de_eventos" title="es/Tutorial_de_XUL/Más_gestores_de_eventos">los eventos</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Menúes_con_desplazamiento" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Más_gestores_de_eventos">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_más_elementos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_más_elementos/index.html new file mode 100644 index 0000000000..5ac33e16d8 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/añadiendo_más_elementos/index.html @@ -0,0 +1,98 @@ +--- +title: Añadiendo más elementos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_más_elementos +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_More_Elements +--- +<p>Concluiremos la discusión de cajas adicionando algunas al diálogo de encontrar archivos.</p> + +<h3 id="A.C3.B1adiendo_elementos_al_ejemplo_de_encontrar_archivos" name="A.C3.B1adiendo_elementos_al_ejemplo_de_encontrar_archivos">Añadiendo elementos al ejemplo de encontrar archivos</h3> + +<p>Vamos a agregar ahora algunos elementos al diálogo de encontrar archivos. Primero, vamos a adicionar la capacidad de búsqueda por otra información, tal como el tamaño y la fecha del archivo.</p> + +<pre class="eval"><hbox> + <span class="highlightred"><menulist id="searchtype"> + <menupopup> + <menuitem label="Name"/> + <menuitem label="Size"/> + <menuitem label="Date Modified"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Is"/> + <menuitem label="Is Not"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/></span> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +</hbox> +</pre> + +<div class="float-right"><img alt="Image:boxfinal1.png"></div> + +<p>Dos <a href="es/Tutorial_de_XUL/Controles_de_listas#Listas_desplegables">cajas de listas desplegables</a> son añadidas al diálogo. Un <a href="es/Tutorial_de_XUL/Usando_espaciadores">espaciador</a> ha sido adicionado en medio de cada elemento para separarlos. Estos espaciadores han dado un ancho específico de 10 pixeles cada uno. Usted notará que si la ventana es redimensionada, la caja de texto crece pero los otros componentes no. Igualmente notará que la etiqueta fué removida.</p> + +<p>Si usted redimensiona la ventana verticalmente, el elemento no cambia su tamaño. Esto es debido a que está dentro de cajas horizontales. Lo mas apropiado sería que los botones de Encontrar y Cancelar permanecieran siempre al fondo de la ventana. Esto es fácil de hacer agregando un espaciador en medio de las dos cajas horizontales.</p> + +<pre class="eval"><span class="highlightred"><spacer style="height: 10px"/></span> +<hbox> + <menulist id="searchtype"> + <menupopup> + <menuitem label="Nombre"/> + <menuitem label="Medida"/> + <menuitem label="Fecha de modificación"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Es"/> + <menuitem label="No es"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +</hbox> + +<span class="highlightred"><spacer style="height: 10px" flex="1"/></span> + +<hbox> +</pre> + +<p>Ahora cuando el diálogo es redimensionado, los dos botones se moverán ya que estan siempre a lo largo del fondo del diálogo. El primer <a href="es/XUL/Elemento">espaciador</a> añade espacio extra en medio de la etiqueta del título y los elementos del criterio de búsqueda.</p> + +<p>Se vería mejor si hubiera un borde al rededor de los criterios de búsqueda. Hay dos formas de hacer esto. Podemos utilizar la propiedad CSS <code>border</code> de CSS o podemos utilizar el elemento <code><a href="es/XUL/Elemento">caja de grupo</a></code>. Este primer método puede requerir que coloquemos el estilo en la caja como tal. Sin embargo, vamos a utilizar el último método. Un <a href="es/Tutorial_de_XUL/Cajas_de_grupo">caja de grupo</a> tiene la ventaja de que dibuja una caja con un bonito estilo biselado, adecuado para el tema actual.</p> + +<p>Vamos a cambiar la caja dentro de un <code>groupbox</code>:</p> + +<p><span class="nowiki">Aquí inserta texto sin formato</span> <span class="highlightred"><groupbox orient="horizontal"></span></p> + +<pre class="eval"> <span class="highlightred"><span class="nowiki"><caption label="Search Criteria"/></span></span> + <menulist id="searchtype"> + . + . + . + <spacer style="width: 10px;"/> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +<span class="highlightred"></groupbox></span> +</pre> + +<div class="float-right"><img alt="Image:boxfinal2.png"></div> + +<p>Existen otros problemas cosméticos como tal. Podemos también tener que el groupbox crece de tal forma que se extiende verticalmente al final de la caja. También, podemos modificar algunos de los márgenes de tal forma que los elementos queden mejor posicionados.</p> + +<p>Veremos más ejemplos del modelo de caja y algunos de sus rasgos a medida que continuemos agregando elementos durante el tutorial.</p> + +<p>Ejemplo de encontrar archivos <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul">Ver en funcionamiento</a></p> + +<p>Seguido, veremos como <a href="es/Tutorial_de_XUL/Pilas_y_barajas">crear pilas</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Cajas_de_grupo" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Pilas_y_barajas">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/barra_de_herramientas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/barra_de_herramientas/index.html new file mode 100644 index 0000000000..722fd6fb36 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/barra_de_herramientas/index.html @@ -0,0 +1,60 @@ +--- +title: Barra de Herramientas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Barra_de_Herramientas +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Toolbars +--- +<p> </p> +<p>Una barra de herramientas normalmente se sitúa en la parte superior de la ventana y contiene un número de botones que realizan acciones cotidianas. XUL ofrece la posibilidad de crear barra de herramientas.</p> +<h3 id="A.C3.B1adiendo_una_barra_de_herramientas" name="A.C3.B1adiendo_una_barra_de_herramientas">Añadiendo una barra de herramientas</h3> +<p>Como otros elementos, las barras de herramientas de XUL son del tipo caja. Generalmente mostrará una fila de botones, pero cualquier otro elemento puede colocarse en una barra de herramientas. Por ejemplo, el navegador Mozilla contiene una caja de texto para mostrar e introducir las direcciones URL.</p> +<p>Las barras de herramientas pueden ser colocadas en cualquier parte de la ventana, ya sea horizontalmente o verticalmente. Por supuesto que normalmente no pondremos una caja de texto en una barra de herramientas vertical. En verdad, como las barras de herramientas no son más que cajas, pueden colocarse en cualquier sitio que deseémos, incluso en el centro de la ventana. Sin embargo, es típico que las barras de herramientas se sitúen en la parte superior de la venta, colocandose una debajo de otra si hubíera más de una, agrupandose en un elemento llamadao toolbox.</p> +<p>En la parte izquierda de una barra de herramientas se encuentra un pequeño notch que al hacer clic en él contraerá la barra de herramientas, de forma que solo el notch quede visible. Este notch se denomina grippy. Cuando tenemos varias barras de herramientas agrupadas dentro de un elemento toolbox, los grippes se colocarán en una misma fila. Esto compacta el espacio usado de manera eficiente. Para las barras de herramientas verticales, los grippies se sitúan en la parte superior. Un usuario puede contraer las barras de herramientas para obtener más espacio en la ventana principal.</p> +<p>He aquí un ejemplo de una simple barra de herramientas.</p> +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> +<pre><toolbox> + <toolbar id="nav-herramientas"> + <toolbarbutton label="Atrás" /> + <toolbarbutton label="Adelante" /> + </toolbar> +</toolbox> +</pre> +<p>Esto creará una barra de herramientas con dos botones, un botón Atrás y otro Adelante. La barra de tareas ha sido definida dentro de un elemento toolbox. Todo esto ha requerido cuatro nuevos elementos, que son descritos aquí:</p> +<pre class="eval"> * toolbox +</pre> +<p>Una caja que contiene barras de herramientas</p> +<pre class="eval"> * toolbar +</pre> +<p>Una barra de herramientas que contiene elementos como botones. Las barras de herramientas pueden minimizarse usando el grippy de su borde izquierdo o superior.</p> +<pre class="eval"> * toolbarbutton +</pre> +<p>Un botón para la barra de herramientas, el cual tiene las mismas características que un botón normal pero que normalmente se muestra de forma distinta.</p> +<pre class="eval"> * toolbargrippy +</pre> +<p>Este elemento crea el notch que puede usarse para contraer y expandir la barra de herramientas. No necesitamos definirla manualmente, ya que se añade automaticamente.</p> +<p>El elemento toolbar es el principal y responsable de crear la barra de herramientas. Dentro de él se colocan los elementos que debe mostrar la barra de herramientas, normalmente botones aunque puede ser cualquier otro elemento. La barra de herramientas debería tener un atributo id o el grippy no será capaz de contraer o expandir la barra de herramientas correctamente.</p> +<p>En el ejemplo anterior solo creamos una barra de herramientas. Podemos crear más simplemente añadiendo más elementos toolbar después del primero.</p> +<p>El elemento toolbox no es más que un contenedor para las barras de herramientas. En algunas aplicaciones, veremos varias barras de herramientas en la parte superior de la venta. Podemos ponerlas todas juntas dentro de un toolbox. Sin embargo no es obligatorio poner las barras de herramientas dentro de un toolbox.</p> +<p>Los grippies son creados usando otro elemento, toolbargrippy. No tiene sentido usarlo en ningún otro sitio que no sea una barra de herramientas, ya que esta especialmente diseñador para contraer y expandir barras de herramientas. Sin embargo si es posible aplicarle un estilo diferente. Incluso puedes ocultarlo si incluimos el atributo grippyhidden al elemento toolbar, poniendo su valor a true.</p> +<h3 id="Tres_barras_de_herramientas_agrupadas_en_un_toolbox" name="Tres_barras_de_herramientas_agrupadas_en_un_toolbox">Tres barras de herramientas agrupadas en un toolbox</h3> +<p>Las mismas barras pero con dos de ellas contraidas.</p> +<p><br> + Ahora añadiremos una barra de herramientas a nuestro dialogo. Realmente no lo necesitamos pero crearemos una de todas formas para demostrar su uso. Se definirán dos botones, los tipicos de Abrir y Guardar. En teoría deberían posibilitar que el usuario puediera guardar los resultados de una búsqueda y abrirlos posteriormente.</p> +<pre><vbox flex="1"> + <toolbox> + <toolbar id="findfiles-toolbar"> + <toolbarbutton id="abrirbusqueda" label="Abrir" /> + <toolbarbutton id="guardarbusqueda" label="Guardar" /> + </toolbar> + </toolbox> + + <tabbox> +</pre> +<p>Hemos añadido una barra de herramientas con dos botones. En la imagen, vemos que aparecen alineados horizontalmente en la parte superior. El grippy tambíen aparece en el borde izquierdo. Fijemonos en que hemos colocado la barra de herramientas en la caja vertical, justo encima del elemento tabbox. Lo hemos hecho así porque necesitamos la alineación vertical de la caja para que la barra de herramientas aparezca arriba del todo.</p> +<p><br> + Siguiente, veremos como añadir paneles de contenido.</p> +<p>NdT: el elemento ‘toolbargrippy’ no es soportado por Firefox, dada la popularidad de este navegador creo que habría que poner algun comentario al respecto. Ver la ref. de toolbargrippy</p> +<p><span class="comment">Categorías</span></p> +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/barras_de_desplazamiento/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/barras_de_desplazamiento/index.html new file mode 100644 index 0000000000..74325c678a --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/barras_de_desplazamiento/index.html @@ -0,0 +1,74 @@ +--- +title: Barras de desplazamiento +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Barras_de_desplazamiento +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - para_revisar +translation_of: Archive/Mozilla/XUL/Tutorial/Scroll_Bars +--- +<p>Ahora, aprenderemos a añadir barras de desplazamiento en una ventana.</p> + +<h3 id="A.C3.B1adiendo_barras_de_desplazamiento" name="A.C3.B1adiendo_barras_de_desplazamiento">Añadir barras de desplazamiento</h3> + +<p>Una barra de desplazamiento sirve para que un usuario pueda moverse en un documento grande. También puedes usarla cuando tienes que buscar un valor que está dentro de un cierto rango. Las barras de desplazamiento pueden crearse de varias formas. En XUL, puede crearse una usando la etiqueta <code><code><a href="/es/docs/Mozilla/Tech/XUL/scrollbar" title="scrollbar">scrollbar</a></code></code>. Algunos elementos, como cajas de texto, también añadirán barras de desplazamiento cuando el contenido de dentro es demasiado grande</p> + +<p>En esta sección, hablaremos de la creación de una barra de desplazamiento independiente. El usuario pondrá el valor ajustando la barra de desplazamiento. Probablemente no usarás esto a menudo. Una barra de desplazamiento está compuesta de varias partes: el deslizador, que es la parte principal de la barra de desplazamiento con la caja ajustable, y los dos botones de flecha. Una barra de desplazamiento crea todos estos elementos automáticamente.</p> + +<p><img alt="Imagen:BarraDesplazamiento.jpg" class="internal" src="/@api/deki/files/1107/=BarraDesplazamiento.jpg"></p> + +<p>La sintaxis de una barra de desplazamiento es la siguiente:</p> + +<pre><scrollbar + id="barrahori" + orient="horizontal" + curpos="50" + maxpos="400" + increment="2" + pageincrement="10"/> +</pre> + +<p>Los atributos son los siguientes:</p> + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> <code>id</code></dt> + <dd>El identificador único de la barra de desplazamiento</dd> +</dl> + +<dl> + <dt><code id="a-orient"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> <code>orient</code></dt> + <dd>Especifica la dirección de la barra de desplazamiento. Por defecto es <code>horizontal</code>, que crea una barra de desplazamiento que se extiende de izquierda a derecha. También puedes especificar <code>vertical</code> que crea una barra de desplazamiento que se extiende de arriba abajo.</dd> +</dl> + +<dl> + <dt><code id="a-curpos"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/curpos">curpos</a></code> <code>curpos</code></dt> + <dd>Indica la posición actual de la barra de desplazamiento (la caja que puedes deslizar hacia adelante y hacia atrás.) El rango de valores se extiende de 0 al valor de maxpos. Este valor no es necesario. El valor por defecto es 0.</dd> +</dl> + +<dl> + <dt><code id="a-maxpos"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/maxpos">maxpos</a></code> <code>maxpos</code></dt> + <dd>Indica la posición máxima de la barra de desplazamiento. Es un valor numérico. El valor por defecto es 100.</dd> +</dl> + +<dl> + <dt><code id="a-increment"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code> <code>increment</code></dt> + <dd>Este valor especifica cuánto cambia el valor de <code>curpos</code> cuando el usuario pulsa sobre una de las flechas de barra de desplazamiento. El valor por defecto es 1.</dd> +</dl> + +<dl> + <dt><code id="a-pageincrement"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/pageincrement">pageincrement</a></code> <code>pageincrement</code></dt> + <dd>Este valor especifica cuánto cambia el valor <code>curpos</code> cuando el usuario hace clic sobre las páginas con la barra de desplazamiento, que puede hacerse pulsando sobre la bandeja entre la caja y las flechas. El valor por defecto es 10.</dd> +</dl> + +<p>El ejemplo dado en la sintaxis anterior creará una barra de desplazamiento que puede extenderse de un valor de 0 a 100. El valor 100 podría ser el número de líneas en una lista, pero podría ser lo que quieras. El valor inicial en este ejemplo es 20. Al hacer clic sobre una de las flechas de barra de desplazamiento, el valor se cambiará por 1 encima de o abajo. Pero paginando por la barra de desplazamiento, el valor se cambiará por 10.</p> + +<p>Cuando el usuario haga clic sobre las flechas de la barra de desplazamiento, se moverá la cantidad especificada por el valor <code>increment</code>. El aumento del valor de este atributo hará que la barra de desplazamiento se mueva más lejos con cada clic. La posición más a la izquierda o superior de la barra de desplazamiento tiene el valor 0 y la posición más a la derecha o inferior de la barra de desplazamiento tiene el valor dado por <code>maxpos</code>.</p> + +<p>Ajustando los valores de la barra de desplazamiento, puedes tener el thumb posicionado donde quieras y el cambio cuando el usuario haga clic en las flechas tal y como desees.</p> + +<p>A continuación, aprenderemos a <a href="/es/Tutorial_de_XUL/Barra_de_Herramientas" title="es/Tutorial_de_XUL/Barra_de_Herramientas">crear barras de herramientas</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Divisores" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Barra_de_Herramientas">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/cajas_de_grupo/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/cajas_de_grupo/index.html new file mode 100644 index 0000000000..d3607f1260 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/cajas_de_grupo/index.html @@ -0,0 +1,61 @@ +--- +title: Cajas de grupo +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Cajas_de_grupo +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Groupboxes +--- +<p>Esta sección describe un método para incluir elementos dentro de grupos.</p> +<h3 id="Cajas_de_grupo" name="Cajas_de_grupo">Cajas de grupo</h3> +<p>HTML provee un elemento, <code>fieldset</code>, que puede ser usado para agrupar otros elementos. Generalmente un borde es trazado alrededor de los elementos para demostrar que están relacionados entre sí. Un ejemplo sería un grupo de casillas de verificación. XUL provee un elemento equivalente, <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_groupbox.html">groupbox</a></code> (caja de grupo), que se utiliza para propósitos similares.</p> +<p>Como su nombre implica, la <code>groupbox</code> es un tipo de caja, esto significa que los elementos dentro de ella se alinean de acuerdo a las reglas de las cajas. Hay dos diferencias entre las cajas de grupo y las cajas regulares:</p> +<ol> + <li>Un borde biselado es dibujado alrededor de la caja de grupo de manera predeterminada. Puede cambiarse este comportamiento corrigiendo el estilo CSS.</li> + <li>La caja de grupo permite un encabezado que es colocado a lo largo del borde superior.</li> +</ol> +<p>Como las cajas de grupo son un tipo de caja pueden utilizarse los mismos atributos, como <code>orient</code> y <code>flex</code>. Puede insertarse cualquier elemento dentro de la caja, pero normalmente estos elementos estarán relacionados de alguna manera.</p> +<p>La etiqueta en el borde superior puede ser creada utilizando el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_caption.html">caption</a></code>, esto funciona de manera similar al elemento HTML <code>legend</code>. Un simple elemento caption puesto como el primer hijo será suficiente.</p> +<p>El ejemplo siguiente muestra una simple caja de grupo:</p> +<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4> +<pre><groupbox> + <caption label="Respuesta"/> + <description value="Banana"/> + <description value="Mandarina"/> + <description value="Casilla telefónica"/> + <description value="Kiwi"/> +</groupbox> +</pre> +<p><img alt="Image:titledbox1.jpg"></p> +<p>Esto causará que se vean cuatro segmentos de texto rodeados por una caja con la etiqueta “Respuesta�?. Nótese que la caja de grupo posee orientación vertical por omisión, lo que es necesario para apilar los elementos en una sola columna.</p> +<p>También pueden agregarse elementos hijos dentro del elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_caption.html">caption</a></code> para crear un encabezado más complejo. Por ejemplo, el panel de preferencias para tipos de letra de Mozilla utiliza un menú desplegable como encabezado. A pesar de que se puede hacer uso de cualquier contenido, usualmente se usa una casilla de verificación o un menú desplegable.</p> +<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4> +<pre><groupbox flex="1"> + <caption> + <checkbox label="Habilitar copias de seguridad"/> + </caption> + <hbox> + <label control="dir" value="Directorio:"/> + <textbox id="dir" flex="1"/> + </hbox> + <checkbox label="Comprimir archivos almacenados"/> +</groupbox> +</pre> +<p>En este ejemplo se ha utilizado como encabezado una casilla de verificación. Podríamos usar un guión para habilitar o deshabilitar los contenidos de la caja de grupo cuando la casilla de verificación sea marcada y desmarcada. La caja de grupo contiene una caja horizontal con una etiqueta y una caja de texto. Tanto la caja de texto como la caja de grupo fueron hechas flexibles así la caja de texto se expandirá cuando la ventana se expanda. La casilla de verificación adicional aparece debajo de la caja de texto por la orientación vertical de la caja de grupo. En la siguiente sección añadiremos una caja de grupo a la ventana de diálogo “Buscar archivos�?.</p> +<h3 id="Grupos_radiales" name="Grupos_radiales">Grupos radiales</h3> +<p>Puede usarse el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_radiogroup.html">radiogroup</a></code> (grupo radial) para agrupar varios elementos radio (botón radial). El <code>radiogroup</code> es un tipo de caja. Puede agregarse cualquier elemento al mismo, y aparte de su manejo especial de botones <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_radio.html">radio</a></code> estos funcionan como cualquier otra caja.</p> +<p>Todos los botones radiales insertados en el grupo radial serán agrupados entre sí, aún si se encuentran dentro de cajas anidadas. Esto podría aprovecharse para agregar elementos extras dentro de la estructura, como en el siguiente ejemplo:</p> +<h4 id="Ejemplo_3" name="Ejemplo_3">Ejemplo</h4> +<pre><radiogroup> + <radio id="no" value="no" label="Sin número"/> + <radio id="aleatorio" value="aleatorio" label="Número aleatorio"/> + <hbox> + <radio id="especificado" value="especificado" label="Especifique un número:"/> + <textbox id="numeroespecifico"/> + </hbox> +</radiogroup> +</pre> +<p>Obsérvese que el elemento <code>radiogroup</code>no dibuja un borde a su alrededor, si se desearan bordes y encabezado deberá ser colocado dentro de una <code>groupbox</code> (caja de grupo).</p> +<p>A continuación utilizaremos lo aprendido hasta el momento y añadiremos algunos elementos adicionales a la ventana de diálogo “Buscar archivos�?.</p> +<p><span class="comment">Categorías</span></p> +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/características_adicionales_de_la_instalación/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/características_adicionales_de_la_instalación/index.html new file mode 100644 index 0000000000..12cde3c81f --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/características_adicionales_de_la_instalación/index.html @@ -0,0 +1,39 @@ +--- +title: Características adicionales de la instalación +slug: >- + Archive/Mozilla/XUL/Tutorial_de_XUL/Características_adicionales_de_la_instalación +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Additional_Install_Features +--- +<p> </p> +<p>Esta sección describe algo más específico sobre instaladores.</p> +<h3 id="Manipulaci.C3.B3n_De_Archivo_De_Instalaci.C3.B3n" name="Manipulaci.C3.B3n_De_Archivo_De_Instalaci.C3.B3n">Manipulación De Archivo De Instalación</h3> +<p>La sección anterior describió un instalador básico. Usted puede desear realizar un proceso más elaborado durante la instalación. Por ejemplo, usted puede desear instalar un paquete solamente cuando se cumplan ciertas condiciones, por ejemplo tener una librería particular instalada.</p> +<p>Además del objeto <code>Install</code>, un objeto <code>File</code> también está disponible para el script de instalación. Este objeto proporciona algunas funciones que se puedan utilizar para examinar y para modificar archivos en disco. Usted puede utilizarlo para mover, copiar o borrar archivos antes o después de que los archivos sean instalados. Por ejemplo, usted puede querer hacer primero una copia de respaldo de algunos archivos.</p> +<p>El código siguiente hará una copia del archivo "/bin/grep" y la pondrá en el directorio "/main".</p> +<pre>var binFolder=getFolder("file:///","bin"); +var grep=getFolder(binFolder,"grep"); + +var mainFolder=getFolder("file:///","main"); + +File.copy(grep,mainFolder); +</pre> +<p><br> + La primera línea recuperará una referencia al directorio /bin. El texto '<a class="external" rel="freelink">file:///</a>' es una secuencia especial que significa la raíz del sistema de archivos. De allí, conseguimos el archivo 'grep' que esta en el interior del directorio 'bin'. Si no existe este archivo, un error ocurrirá durante la instalación. Después, conseguimos la carpeta 'main', otra vez desde la raíz del sistema de archivos. Finalmente, ejecutamos la función File.copy que copia el archivo desde el fuente al destino.</p> +<p>También existen <a class="external" href="http://www.xulplanet.com/references/elemref/ref_File.html">Funciones</a> para mover, renombrar y ejecutar archivos. Así, usted puede mover los archivos que puedan estar en conflicto con su paquete.</p> +<h3 id="Manipulaci.C3.B3n_De_Errores" name="Manipulaci.C3.B3n_De_Errores">Manipulación De Errores</h3> +<p>Usted probablemente deseará manejar de mejor forma los errores. Esto ocurrirá si un archivo o un directorio no puede ser encontrado, hay poco espacio en disco o por otras razones.</p> +<p>Usted puede utilizar la función getLastError para determinar si ocurrió un error. Si retornó SUCCESS, no ocurrió ningún error. Si no, el número será un código de error que indica el tipo de error que ocurrió. Usted puede llamar esta función en cualquier punto durante el script de instalación para determinar si un error ocurrió durante la operación pasada.</p> +<p>Si ocurre un error, usted deseará probablemente abortar la instalación. Usted puede también exhibir un mensaje de error al usuario. Por ejemplo, usted puede ser que ponga esto como la sección pasada de su script:</p> +<pre>if (getLastError() == SUCCESS){ + performInstall(); +} +else { + cancelInstall(); +} +</pre> +<p>Los códigos de error que puede retornar getLastError se enumeran en el archivo fuente de Mozilla <code><a class="external" href="http://lxr.mozilla.org/mozilla/source/xpinstall/src/nsInstall.h">nsInstall.h</a></code>. Durante la instalación, se crea un archivo log que contiene las operaciones que se realizan. También mostrará cualquier error que ocurra. El archivo log se puede encontrar en el archivo 'install.log' en el directorio de instalación de Mozilla. Un bloque de texto será agregado a este archivo por cada instalación que ocurra.</p> +<p>La función logComment se puede utilizar para escribir una cadena de caracteres al archivo log. Tiene un parámetro, el texto a escribir.</p> +<p>El Tutorial XUL se acabo. :D</p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/características_de_una_ventana/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/características_de_una_ventana/index.html new file mode 100644 index 0000000000..57b8fff890 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/características_de_una_ventana/index.html @@ -0,0 +1,106 @@ +--- +title: Características de una ventana +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Características_de_una_ventana +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Features_of_a_Window +--- +<p>Ya hemos visto algunas de las características de las ventanas. En esta sección veremos algunas más.</p> + +<h3 id="Creando_otra_ventana" name="Creando_otra_ventana">Creando otra ventana</h3> + +<p>Puedes crear otra ventana para tu aplicación de la misma manera como lo harías para crear la primera. Solamente crea un segundo archivo XUL con el código de la ventana en él. Como en HTML, puedes usar la función <code><a href="es/DOM/window.open">window.open()</a></code> para abrir la segunda ventana. Esta función devolverá una referencia de la nueva ventana abierta. Puedes usar esta referencia para llamar funciones de la otra ventana.</p> + +<p>La función open toma tres argumentos. El primero es la url del archivo que quieres abrir. El segundo es un nombre interno para la nueva ventana. El tercero es una lista de indicadores. El flag ‘chrome’ es importante para abrir la ventana como un archivo chrome. Si no agregas el flag ‘chrome’, el archivo se abrirá como el contenido de una ventana del navegador.</p> + +<p>Por ejemplo:</p> + +<pre>var myWin = +window.open("chrome://findfile/content/findfile.xul","findfile","chrome"); +</pre> + +<h3 id="Especificando_el_ancho_y_alto" name="Especificando_el_ancho_y_alto">Especificando el ancho y alto</h3> + +<p>Deben haber notado que siempre que algunos elementos fueron agregados a una ventana, el ancho de la ventana se expande para hacer caber los nuevos elementos. En realidad la ventana es solo una caja (box) que es flexible y con orientación vertical por defecto. También puedes especificar el ancho y alto directamente en la etiqueta <code><a href="es/XUL/Elementos/window">window</a>. Esto causa que la ventana se muestre con un tamaño específico. Si no se especifica, el tamaño se determinará por los elementos que contiene. </code></p> + +<pre><window +id="findfile-window" +title="Find Files" +width="400" +height="450" + +xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +</pre> + +<p>En este ejemplo, la ventana se abrirá con un ancho de 400 píxeles y un alto de 450 píxeles. Incluso si no contiene suficientes elementos como para abarcar este tamaño, de todas maneras la ventana se abrirá con este tamaño y quedará espacio en blanco en el área no ocupada. Si contiene demasiados elementos, la ventana no será lo suficientemente grande como para contener los elementos. El usuario deberá ajustar el tamaño del dialogo. Cuando especificas el alto y ancho de una ventana debes tener cuidado para que la ventana no resulte demasiado chica o demasiado grande. Nota que debes especificar ambos, el ancho y alto. Si especificas solo uno, el otro se tomará como 0. Para que la ventana ajuste automáticamente su tamaño, no especifiques ni el ancho ni el alto. El ancho y alto especifican solo el tamaño inicial de la ventana. El usuario podrá cambiar el tamaño de la ventana, asumiendo que la ventana sea dimensionable (‘resizable’) (ver más abajo).</p> + +<h3 id="Otras_caracter.C3.ADsticas_de_las_ventanas" name="Otras_caracter.C3.ADsticas_de_las_ventanas">Otras características de las ventanas</h3> + +<p>Los indicadores de abajo se pueden pasar como parte del tercer argumento a la función window.open. Tu sistema operativo puede que no los soporte todos. También puedes usar cualquiera de los indicadores ya existentes, los cuales deberías encontrar en una referencia de JaveScript. Puedes desactivar alguna característica especificándolo con ‘no’, por ejemplo ‘dialog=no’.</p> + +<dl> + <dt>alwaysLowered </dt> + <dd>La ventana aparecerá siempre debajo de otras ventanas.</dd> +</dl> + +<dl> + <dt>alwaysRaised </dt> + <dd>La ventana aparecerá siempre arriba de otras ventanas.</dd> +</dl> + +<dl> + <dt>centerscreen </dt> + <dd>La ventana al abrirse se centrará.</dd> +</dl> + +<dl> + <dt>dependent </dt> + <dd>La ventana aparecerá siempre en relación a la ventana que la abrió. Si la ventana que abrió la nueva ventana se mueve, la nueva ventana se mueve junto a ella.</dd> +</dl> + +<dl> + <dt>dialog </dt> + <dd>La ventana es un dialogo, el cual puede aparecer diferentemente.</dd> +</dl> + +<dl> + <dt>modal </dt> + <dd>El dialogo es modal. No se podrá interactuar con la ventana que abrió el dialogo hasta que este se cierre.</dd> +</dl> + +<dl> + <dt>resizable </dt> + <dd>El usuario puede cambiar el tamaño de la ventana.</dd> +</dl> + +<h3 id="Depurando_una_ventana" name="Depurando_una_ventana">Depurando una ventana</h3> + +<p>Otra característica útil solo durante el desarrollo es activar el modo de depuración de una ventana. Para hacerlo, agrega un atributo debug con valor ‘true’ a la ventana. Esto hará que la ventana muestre los ‘box’ y los ‘spacers’ de forma que puedas ver lo que está ocurriendo. Este ejemplo muestra como usarlo.</p> + +<pre><window +id="findfile-window" +title="Find Files" +debug="true" +xmlns:html="http://www.w3.org/1999/xhtml" +xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +</pre> + +<p>La imagen de abajo muestra el efecto cuando se aplica a una ventana sencilla.</p> + +<p> </p> + +<ul> + <li><a class="external" href="http://xulplanet.com/tutorials/xultu/images/featwin1.jpg">Cajas azules indican cajas horizontales. </a></li> + <li><a class="external" href="http://xulplanet.com/tutorials/xultu/images/featwin1.jpg">Cajas rojas indican cajas verticales. Puedes ver la ventana es una caja vertical. </a></li> + <li><a class="external" href="http://xulplanet.com/tutorials/xultu/images/featwin1.jpg">Zigzags indican los elementos flexibles. En este caso, el espaciador es flexible entonces un zigzag aparece sobre él. </a></li> + <li><a class="external" href="http://xulplanet.com/tutorials/xultu/images/featwin1.jpg">Líneas indican donde están los elementos inflexibles, en este caso el texto, el ’input field’ y los botones. </a></li> + <li><a class="external" href="http://xulplanet.com/tutorials/xultu/images/featwin1.jpg">Los cuadrados blancos indican los márgenes de los elementos. </a></li> +</ul> + +<p><span class="external">En la imagen, puede que notes algunas cajas (boxes) adicionales. Esto es debido a que cada elemento XUL está hecho de un número de cajas (boxes), definidas con XBL. Las puedes ignorar. Puedes especificar el atributo debug en cualquier caja, no solo en la ventana (window). </span></p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Ejemplo_de_XBL" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Creando_Diálogos">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/comandos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/comandos/index.html new file mode 100644 index 0000000000..561baa97ec --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/comandos/index.html @@ -0,0 +1,171 @@ +--- +title: Comandos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Comandos +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Commands +--- +<p> </p> + +<p>Un comando es una operación o función que se puede invocar.</p> + +<h3 id="El_elemento_comando" name="El_elemento_comando">El elemento comando</h3> + +<p>El elemento <code><a href="/es/XUL/Elementos#command" title="es/XUL/Elementos#command">command</a></code> se usa para crear comandos los cuales pueden ser usados para llevar a cabo operaciones. Usted no necesitaría usar comandos, ya que usted puede invocar un script para manejar las cosas. Sin embargo, un comando tiene la ventaja de que puede ser deshabilitado automáticamente cuando se necesite y puede ser invocado externamente sin necesidad de saber de los detalles de su implementación. Los comandos son una manera adecuada de abstraer operaciones del código. Además los comandos son muy útiles para aplicaciones extensas.</p> + +<p>Para empezar, con el fin de implementar los comandos del menú portapapeles, cortar, copiar y pegar usted puede usar comandos. Si no usara comandos, usted necesitaría averiguar cual campo tiene el foco (focus), luego verificar para asegurarse que la operación es la adecuada para ese elemento. Además, los comandos del menú necesitarían ser habilitados y deshabilitados dependiendo de si el elemento enfocado haya seleccionado texto o no, y para las operaciones de pegar (paste), si hay algo adecuado en el portapapeles (clipboard) para pegar. Como puede ver, esto se vuelve complicado. Usando comandos, gran parte del trabajo es manejada para usted. Usted puede usar un comando para cualquier operación. Mozilla los usa para casi todos los comandos del menú. Ademas, campos de texto y otros accesorios tienen un número de comandos ya soportados y que usted puede invocar. Usted debería usarlos cuando la operación depende de cual elemento es enfocado.</p> + +<p>Un comando es identificado por su atributo <code><a href="/es/XUL/Atributos#id" title="es/XUL/Atributos#id">id</a></code>. Mozilla usa la convención de que el id del comando comience con '<code>cmd_</code>'. Usted probablemente querrá usar el mismo id si un comando está siendo usado, sin embargo para sus comandos propios, usted puede usar cualquier id de comando que desee. Para evitar conflictos, usted puede desear incluir el nombre de la aplicación en el id del comando. Una manera simple de usar comandos es como sigue:</p> + +<p> </p> + +<h4 id="Ejemplo_un_s.C3.B3lo_comando" name="Ejemplo:_un_s.C3.B3lo_comando">Ejemplo: un sólo comando</h4> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_1.xul">Ver en funcionamiento</a></p> + +<pre><command id="cmd_openhelp" oncommand="alert('Ayuda!');"/> +<button label="Ayuda" command="cmd_openhelp"/> +</pre> + +<p>En este ejemplo, en vez de colocar el atributo <code><a href="/Es/XUL/Atributos#oncommand" title="es/XUL/Atributos#oncommand">oncommand</a></code> en el <code><a href="/es/XUL/Elementos#button" title="es/XUL/Elementos#button">button</a></code>, simplemente lo colocamos sobre un elemento <code><a href="/es/XUL/Elementos#command" title="es/XUL/Elementos#command">command</a></code>. Los dos son entonces enlazados usando el atributo <code><a href="/Es/XUL/Atributos#command" title="es/XUL/Atributos#command">command</a></code> el cual tiene el valor del <code><a href="/Es/XUL/Atributos#id" title="es/XUL/Atributos#id">id</a></code> del comando. El resultado es que cuando el botón es presionado, el comando: '<code>cmd_openhelp</code>' es invocado.</p> + +<p><br> + Hay dos ventajas al usar ésta técnica:</p> + +<ul> + <li>Primero, que transfiere todas sus operaciones a comandos los cuales pueden ser agrupados juntos en una sección del archivo XUL. Esto significa que el código está todo junto y no esparcido por el código UI.</li> +</ul> + +<ul> + <li>La otra ventaja es que muchos botones u otros elementos UI pueden ser enlazados al mismo comando. Para empezar, usted puede tener un <a href="/es/Tutorial_de_XUL/Menús_de_Barras_Simples" title="es/Tutorial de XUL/Menús de Barras Simples">menu item</a>, un <a href="/es/Tutorial_de_XUL/Barra_de_Herramientas" title="es/Tutorial_de_XUL/Barra_de_Herramientas">botón de barra de herramientas</a> y un <a href="/es/Tutorial_de_XUL/Atajos_de_teclado" title="es/Tutorial_de_XUL/Atajos_de_teclado">atajo de teclado</a> todos para la misma operación. En vez de repetir el código tres veces, usted puede enlazar todos los tres al mismo comando. Normalmente, usted solo enlazará elementos que enviarían un evento de comando.</li> +</ul> + +<p>Adicionalmente:</p> + +<ul> + <li>Si usted coloca el atributo <code><a href="/Es/XUL/Atributos#disabled" title="es/XUL/Atributos#disabled">disabled</a></code> en el comando , el comando será deshabilitado y no será invocado.</li> + <li>Cualquier botón y objeto del menú enlazados a éste serán deshabilitados automáticamente.</li> + <li>Si usted rehabilita el comando, los botones se habilitan de nuevo.</li> +</ul> + +<h4 id="Ejemplo_toggling_command_disabled" name="Ejemplo:_toggling_command_disabled">Ejemplo: toggling <code>command</code> disabled</h4> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_2.xul">Ver en funcionamiento</a></p> + +<pre><command id="cmd_openhelp" oncommand="alert('Ayuda');"/> +<button label="Ayuda" command="cmd_openhelp"/> +<button label="Más ayuda" command="cmd_openhelp"/> + +<button label="Desactivado" + oncommand="document.getElementById('cmd_openhelp').setAttribute('disabled','true');"/> +<button label="Activado" + oncommand="document.getElementById('cmd_openhelp').removeAttribute('disabled');"/> +</pre> + +<p>En este ejemplo, ambos botones usan el mismo comando. Cuando un botón deshabilitar es presionado, el comando es deshabilitado al colocar su atributo <code><a href="/es/XUL/Atributos#disabled" title="es/XUL/Atributos#disabled">desactivado</a></code>, y ambos botones serán deshabilitados también.</p> + +<p>Es normal colocar un grupo de comandos dentro de un elemento</p> + +<p><code><a href="/es/XUL/Elementos#commandset" title="es/XUL/Elementos#commandset">commandset</a></code>, junto cerca del inicio del archivo XUL, tal como en el siguiente:</p> + +<pre><commandset> + <command id="cmd_open" oncommand="alert('Abrir!');"/> + <command id="cmd_help" oncommand="alert('Ayuda!');"/> +</commandset> +</pre> + +<p>Un comando es invocado cuando el usuario activa el botón u otro elemento agregado al comando. Usted puede también invocar un comando al llamar el método <code><a href="/es/XUL/M%C3%A9todos#doCommand" title="es/XUL/Métodos#doCommand">doCommand</a></code> cualquier elemento de l<code><a href="/es/XUL/Elementos#command" title="es/XUL/Elementos#command">comando</a></code> o un elemento agregado al comando tal como un botón.</p> + +<h3 id="Command_Dispatching" name="Command_Dispatching">Command Dispatching</h3> + +<p>Es posible usar comandos sin el elemento <code><a href="/es/XUL/Elementos#command" title="es/XUL/Elementos#command">comando</a></code> elements, o al menos, sin añadir un atributo <code><a href="/es/XUL/Atributos#oncommand" title="es/XUL/Atributos#oncommand">oncommand</a></code> al comando. In this case, the command will not invoke a script directly, but instead, find an element or function which will handle the command. This function may be separate from the XUL itself, and might be handled internally by a widget. In order to find something to handle the command, XUL uses an object called a command dispatcher. This object locates a handler for a command. A handler for a command is called a controller. So, essentially, when a command is invoked, the command dispatcher locates a controller which can handle the command. You can think of the <code><a href="/es/XUL/Elementos#command" title="es/XUL/Elementos#command">comando</a></code> element as a type of controller for the command.</p> + +<p>The command dispatcher locates a controller by looking at the currently focused element to see if it has a controller which can handle the command. XUL elements have a <code><a href="/es/XUL/Propiedades#controllers" title="es/XUL/Propiedades#controllers">controladores</a></code> property which is used to check. You can use the <code><a href="/es/XUL/Propiedades#controllers" title="es/XUL/Propiedades#controllers">controladores</a></code> property to add your own controllers. You might use this to have a listbox respond to cut, copy and paste operations, for instance. An example of this will be provided later. By default, only textboxes have a controller that does anything. The textbox controller handles clipboard operations, selection, undo and redo as well as some editing operations. Note that an element may have multiple controllers, which will all be checked.</p> + +<p>If the currently focused element does not have a suitable controller, the window is checked next. The window also has a <code><a href="/es/XUL/Propiedades#controllers" title="es/XUL/Propiedades#controllers">controladores</a></code> property which you can modify if desired. If the focus is inside a frame, each frame leading to the top-level window is checked as as well. This means that commands will work even if the focus is inside a frame. This works well for a browser, since editing commands invoked from the main menu will work inside the content area. Note that HTML also has a commands and controller system although you can't use it on unprivileged web pages, but you may use it from, for example, a browser extension. If the window doesn't provide a controller capable of handling the command, nothing will happen.</p> + +<p>You can get the command dispatcher using the document's <code>commandDispatcher</code> property, or you can retrieve it from the controllers list on an element or a window. The command dispatcher contains methods for retrieving controllers for commands and for retrieving and modifying the focus.</p> + +<h4 id="A.C3.B1adiendo_controladores" name="A.C3.B1adiendo_controladores">Añadiendo controladores</h4> + +<p>You can implement your own controllers to respond to commands. You could even override the default handling of a command with careful placement of the controller. A controller is expected to implement four methods, which are listed below:</p> + +<dl> + <dt>supportsCommand (command) </dt> + <dd>this method should return true if the controller supports a command. If you return false, the command is not handled and command dispatcher will look for another controller. A single controller may support multiple commands.</dd> + <dt>isCommandEnabled (command) </dt> + <dd>this method should return true if the command is enabled, or false if it is disabled. Corresponding buttons will be disabled automatically.</dd> + <dt>doCommand (command) </dt> + <dd>execute the command. This is where you would put the code to handle the command.</dd> + <dt>onEvent (event) </dt> + <dd>this method handles an event.</dd> +</dl> + +<h5 id="Ejemplo_implementaci.C3.B3n_del_controlador" name="Ejemplo:_implementaci.C3.B3n_del_controlador">Ejemplo: implementación del controlador</h5> + +<p>Let's assume that we want to implement a listbox that handles the delete command. When the user selects Delete from the menu, the listbox deletes the selected row. In this case, you just need to attach a controller to a listbox which will perform the action in its <code>doCommand</code> method.</p> + +<p>Try opening the example below (<a href="https://developer.mozilla.org/samples/xultu/examples/commands.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/commands.xul">Ver en funcionamiento</a>) in a browser window and selecting items from the list. You'll notice that the Delete command on the browser's Edit menu is enabled and that selecting it will delete a row. (See <a href="/Talk:es/XUL_Tutorial/Commands" title="Talk:es/XUL_Tutorial/Commands">Discussion</a> about opening this example). The example below isn't completely polished. Really, we should ensure that the selection and focus is adjusted appropriately after a deletion.</p> + +<pre><window id="controller-example" title="Ejemplo de controlador" onload="init();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script> +function init() +{ + var list = document.getElementById("laLista"); + + var listController = { + supportsCommand : function(cmd){ return (cmd == "cmd_delete"); }, + isCommandEnabled : function(cmd){ + if (cmd == "cmd_delete") return (list.selectedItem != null); + return false; + }, + doCommand : function(cmd){ + list.removeItemAt(list.selectedIndex); + }, + onEvent : function(evt){ } + }; + + list.controllers.appendController(listController); +} +</script> + +<listbox id="laLista"> + <listitem label="Ocean"/> + <listitem label="Desert"/> + <listitem label="Jungle"/> + <listitem label="Swamp"/> +</listbox> + +</window> +</pre> + +<p>The controller (listController) implements the four methods described above. The <code>supportsCommand</code> method returns true for the 'cmd_delete' command, which is the name of the command used when the Delete menu item is selected. For other commands, false should be returned since the controller does not handle any other commands. If you wanted to handle more commands, check for them here, since you will often use a single controller for multiple related commands.</p> + +<p>The <code>isCommandEnabled</code> method returns true if the command should be enabled. In this case, we check if there is a selected item in the listbox and return true if there is. If there is no selection, false is returned. If you delete all the rows in the example, the Delete command will become disabled. You may have to click the listbox to update the menu in this simple example. The <code>doCommand</code> method will be called when the Delete menu item is selected, and this will cause the selected row in the listbox to be deleted. Nothing needs to happen for the <code>onEvent</code> method, so no code is added for this method.</p> + +<h4 id="Override_Default_Controller" name="Override_Default_Controller">Override Default Controller</h4> + +<p>We attach this controller to the listbox by calling the <code>appendController</code> method of the listbox's <code><a href="/es/XUL/Propiedades#controllers" title="es/XUL/Propiedades#controllers">controladores</a></code>. The <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIControllers.html">el objeto controlador</a> has a number of methods that may be used to manipulate the controllers. For instance, there is also an <code>insertControllerAt</code> method which inserts a controller into an element before other ones. This might be useful to override commands. For example, the following example will disable pasting into a textbox.</p> + +<pre>var tboxController = { + supportsCommand : function(cmd){ return (cmd == "cmd_paste"); }, + isCommandEnabled : function(cmd){ return false; }, + doCommand : function(cmd){ }, + onEvent : function(evt){ } +}; + +document.getElementById("tbox").controllers.insertControllerAt(0,tboxController); +</pre> + +<p>In this example, we insert the controller at index 0, which means before any others. The new controller supports the 'cmd_paste' command and always indicates that the command is disabled. The default textbox controller never gets called because the command dispatcher found the controller above to handle the command first.</p> + +<p>Seguimos con la <a href="/es/Tutorial_de_XUL/Actualizar_comandos" title="es/Tutorial_de_XUL/Actualizar_comandos">actualización de comandos</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Foco_y_Selección" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Actualizar_comandos">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_entrada/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_entrada/index.html new file mode 100644 index 0000000000..30cfc30cbc --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_entrada/index.html @@ -0,0 +1,86 @@ +--- +title: Controles de entrada +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Controles_de_entrada +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Input_Controls +--- +<p>XUL tiene elementos que son similares a los controles de los formularios de HTML</p> +<h3 id="Campos_de_Entrada_de_Texto" name="Campos_de_Entrada_de_Texto">Campos de Entrada de Texto</h3> +<p>HTML tiene un elemento de entrada que puede ser usado para mandos de entrada de texto. XUL tiene un elemento similar, textbox, usado para campos de entrada de texto. Sin cualquier atributo, el elemento textbox crea una caja en la cual el usuario puede entrar en el texto. Textboxes aceptan muchos de los mismos atributos que mandos de entrada de HTML. Lo siguiente es algunos de ellos:</p> +<p><strong>id</strong></p> +<p>Un identificador único de modo que usted puede identificar el textbox.</p> +<p><strong>class</strong></p> +<p>La clase de estilo del textbox.</p> +<p><strong>value</strong></p> +<p>Si usted quiere que el textbox tenga un texto por defecto, suminístrelo del atributo de valor.</p> +<p><strong>disabled</strong></p> +<p>Si vale verdadero desactiva el componente.</p> +<p><strong>type</strong></p> +<p>Existen una serie de valores que cambian el comportamiento del textbox. Por ejemplo 'password' hace que lo escrito quede oculto y suele usarse para campos de contraseña.</p> +<p><strong>maxlength</strong></p> +<p>El número máximo de los carácteres a los cuales el textbox permite.</p> +<p>Note que mientras en HTML, varias clases diferentes de campos pueden ser creadas con el elemento de entrada, en XUL hay elementos separados para cada tipo. El ejemplo siguiente muestra algún textboxes:</p> +<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4> +<pre><label control="some-text" value="Enter some text"/> +<textbox id="some-text"/> +<label control="some-password" value="Enter a password"/> +<textbox id="some-password" type="password" maxlength="8"/> +</pre> +<p>Los ejemplos textbox encima crearán las entradas de texto que sólo pueden ser usadas para entrar en una línea de texto. HTML también tiene un elemento textarea para crear una entrada de texto más grande el área. En XUL, usted puede usar el elemento textbox por esta razón también - dos elementos separados no son necesarios. Si usted pone el atributo de multilínea a verdadero, el campo de entrada de texto mostrará filas de mutliple.</p> +<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul">Ver en funcionamiento</a></p> +<pre><textbox multiline="true" + value="Esto es un texto que podría ser ajustado en multiples líneas."/> +</pre> +<p>Similar al elemnento HTML <code>textarea</code>, puedes usar los tributos <code>rows</code> y <code>cols</code> para seleccionar el tamaño. Esto debería seleccionar el nñumero de filas y columnas de caracteres a mostrar.</p> +<div class="highlight"> + <p>Vamos a añadir un campo de entrada de busqueda para el dialogo buscar archivo. Usaremos el elemento <code>textbox</code>.</p> + <pre class="eval"><span class="highlightred"><label value="Buscar por:" control="find-text"/></span> +<span class="highlightred"><textbox id="find-text"/></span> + +<button id="find-button" label="Find"/> +</pre> + <p>Añade estas líneas antes de los botones que creamos en la última sección. Si abres esta ventana, verás algo parecido a lo que se muestra en la imagen siguiente.</p> + <p><img alt="Image:inputs1.jpg"></p> + <p>Nota que la etiqueta y el campo de entrada de texto ahora aparecen en la ventana. La caja de etxto es completamente funcional y puedes teclear dentro y seleccionar texto. Nota que el atributo de control tiene que estar siendo usado con la caja de texto seleccionada cuando la etiqueta se pulsa.</p> +</div> +<h3 id="Cajas_de_Chekeo_y_Botones_de_Radio" name="Cajas_de_Chekeo_y_Botones_de_Radio">Cajas de Chekeo y Botones de Radio</h3> +<p>Dos elementos adicionales son usados para crear las cajas de chekeo y los botones de radio. Son variaciones de botones. Las cajas de checkeo se usan para opciones que pueden ser habilitadas o desabilitadas. Los Botones de Radio pueden usarse para propositos similares cuando dentro de un grupo de elementos solo podemos seleccionar uno.</p> +<p>La mayoría de los atributos de las cajas de checkeo y los botones de radio coinciden con los de los botones. El ejemplo siguiente muestra algunas cajas de checkeo y botones de radio simples.</p> +<pre><checkbox id="case-sensitive" checked="true" label="Case sensitive"/> +<radio id="orange" label="Orange"/> +<radio id="violet" selected="true" label="Violet"/> +<radio id="yellow" label="Yellow"/> +</pre> +<p>La primera línea crea una caja de checkeo simple. Cuando el usuario hace click en la aja de checkeo, esta cambia entre checkeada y no checkeada. El atributo <code>checked</code> puede usarse para indicar el estado por defecto. Puedes seleccionarlo como <code>true</code> o <code>false</code>. El atributo etiqueta puede usarse para asignar una etiqueta que aparezca despues de la caja de chekeo. Para los botones de radio, deberías usar el atributo <code>selected</code> en lugar del atributo <code>checked</code>. Seleccionalo a <code>true</code> para tener un botón de radio seleccionado por defecto, o dejalo para otros botones de radio.</p> +<p>Para que un grupo de botones de radio trabajen junto, necesitas usar el elemento <a class="external" href="http://www.xulplanet.com/references/elemref/ref_radiogroup.html">radiogroup</a>. Solo uno de los botones de radio en un grupo de botones de radio puede estar seleccionado. Pulsando en uno desactivaras el resto de los botones de radio en el mismo grupo. El siguiente ejemplo demuestra esto.</p> +<h4 id="Ejemplo_3" name="Ejemplo_3">Ejemplo</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul">Ver en funcionamiento</a></p> +<pre><radiogroup> + <radio id="orange" label="Orange"/> + <radio id="violet" selected="true" label="Violet"/> + <radio id="yellow" label="Yellow"/> +</radiogroup> +</pre> +<p>Como los botones, la cajas de checkeo y los botones de radio estan hechos de una etiqueta y una imagen, donde la imagen cambia entre checkeado y no checkeado cuando se pulsa. Las cajas de checkeo tienen la muchos de los atributos de los botones:</p> +<dl> + <dt> + label </dt> + <dd> + La etiqueta de las cajas de checkeo o botones de radio.</dd> + <dt> + disabled </dt> + <dd> + Seleecciona entre <code>true</code> or <code>false</code> para habilitar o deshabilitar una caja de checkeo o botón de radio.</dd> + <dt> + accesskey </dt> + <dd> + Las teclas de acceso rápido pueden usarse para seleccionar el elemento. La letra especificada es normalmente subrallada en la etiqueta.</dd> +</dl> +<h3 id="Llevando_el_ejemplo_Burcar_Archivos_m.C3.A1s_lejos" name="Llevando_el_ejemplo_Burcar_Archivos_m.C3.A1s_lejos">Llevando el ejemplo Burcar Archivos más lejos</h3> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul">Ver en funcionamiento</a></p> +<p>En la siguiente sección, veremos algunos elementos para crear cajas de listas.</p> +<p><span class="comment">Categorías</span></p> +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_listas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_listas/index.html new file mode 100644 index 0000000000..53a621b470 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_listas/index.html @@ -0,0 +1,171 @@ +--- +title: Controles de listas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Controles_de_listas +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/List_Controls +--- +<p>XUL tiene una cantidad de tipos de elementos para la cración de cajas de listas.</p> + +<h3 id="Cajas_de_listas" name="Cajas_de_listas">Cajas de listas</h3> + +<p>Una caja de listas de usa para mostrar un número de elementos en una lista. El usuario puede seleccionar un elemento de la lista.</p> + +<p>XUL provee dos tipos de elementos para crear listas, un elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listbox.html">listbox</a></code> para crear cajas de listas de multiples filas, y un elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menulist.html">menulist</a></code> para crear listas desplegables. Trabajan de forma muy similar al elemento de HTML <code>select</code>, el cual permite embas funciones, pero los elementos XUL tienes caracteristicas adicionales.</p> + +<p>La caja de listas más simple usa el elemento <code>listbox</code> para su propia caja, y el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listitem.html">listitem</a></code> para cada elemento. Por ejemplo, esta lista tendrá cuatro filas, una por cada elemento.</p> + +<p><strong>Ejemplo 1</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul">Ver en funcionamiento</a></p> + +<pre><listbox> + <listitem label="Butter Pecan"/> + <listitem label="Chocolate Chip"/> + <listitem label="Raspberry Ripple"/> + <listitem label="Squash Swirl"/> +</listbox> +</pre> + +<p><img alt="Image:lists1.jpg"></p> + +<p>Similar al elemento HTML <code>option</code>, Puedes asignar un valor para cada elemento usando el atributo <code>value</code>. Puedes entonces usar el valor en un script. La caja de listas tendrá por defecto el tamaño de las filas de la lista, pero puedes controlar el tamaño con el atributo rows. Seleccionando el número de <code>rows</code> a mostrar en la caja de lista. Una barra de desplazamiento aparecerá para mostrar al usuario las filas adicionales.</p> + +<p>El siguiente ejemplo demuestra estas características adicionales:</p> + +<p><strong>Ejemplo 2</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul">Ver en funcionamiento</a></p> + +<pre><listbox rows="3"> + <listitem label="Butter Pecan" value="bpecan"/> + <listitem label="Chocolate Chip" value="chocchip"/> + <listitem label="Raspberry Ripple" value="raspripple"/> + <listitem label="Squash Swirl" value="squash"/> +</listbox> +</pre> + +<p>El ejemplo fue cambiado para mostrar sólo 3 filas a la vez. Los valores se han añadido a los elementos de la lista. Las cajas de listas tienen algunas características adicionales, las cuales se describirán más adelante.</p> + +<h3 id="Cajas_de_lista_multi-columna" name="Cajas_de_lista_multi-columna">Cajas de lista multi-columna</h3> + +<p>Las cajas de listas tambien soportan multiples columnas. Cada celda puede tener un contenido arbitrario dentro, aunque generalmente sólo se usa texto. Cuando el usuario selecciona un elemento de la lista, la fila entera se selecciona. No tendrás una sola celda seleccionada.</p> + +<p>Se usan dos campos para especificar las columnas en la caja de listas. El elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listcols.html">listcols</a></code> se usa para mantener la información de la columna, cada una de las cuales se especifica usando un elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listcol.html">listcol</a></code> . Necesitas un elemento <code>listcol</code> para cada columna en la caja de listas.</p> + +<p>Las cajas de lista no poseen un equivalente al elemento rows de las grillas. De hecho, hay un equivalente, pero es creado y puesto en la caja de lista automáticamente. También está oculto para que no se sepa que está allí.</p> + +<p>El elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listcell.html">listcell</a></code> (celda de lista) puede ser utilizado para cada celda en una fila. Si se quiere tener tres columnas, se necesita adicionar tres elementos <code>listcell</code> dentro de cada <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_listitem.html">listitem</a></code>. Para especificar el texto contenido en una celda debe colocarse dentro del elemento un atributo <code>label</code>. Para el simple caso donde hay una sola columna, también puede ponerse los atributos <code>label</code> directamente en los elementos <code>listitem </code> (ítem de lista) correspondientes y no utilizar elementos <code>listcell</code>, como se muestra en el siguente ejemplo.</p> + +<p>(Cuando el usuario selecciona un item, toda la fila es seleccionada. No es posible seleccionar una celda individualmente.)</p> + +<p>El siguiente ejemplo es de una caja de lista con dos columnas y tres filas:</p> + +<p><strong>Ejemplo 3</strong></p> + +<pre class="eval"><listbox> + <listcols> + <listcol flex="1"/> + <listcol flex="2"/> + </listcols> + <listitem> + <listcell label="Jorge"/> + <listcell label="Pintor de casas"/> + </listitem> + <listitem> + <listcell label="María Elena"/> + <listcell label="Fabricante de velas"/> + </listitem> + <listitem> + <listcell label="Rogelio"/> + <listcell label="Matón"/> + </listitem> +</listbox> +</pre> + +<p>Esta caja de lista posee dos columnas, siendo la segunda el doble de flexible que la primera. Si se reduce el tamaño horizontalmente, las etiquetas en las celdas se recortarán automáticamente. Como con otros elementos, puede utilizarse el atributo crop en las celdas o en los ítems para controlar el recorte.</p> + +<h3 id="Filas_de_encabezado" name="Filas_de_encabezado">Filas de encabezado</h3> + +<p>Las cajas de lista también permiten la utilización de una fila especial, la fila encabezado. Es muy parecida a una fila regular excepto que se la muestra de manera distinta. Puede ser aprovechada para crear encabezados en las columnas. Se utilizan dos elementos.</p> + +<p>El elemento cabeza de lista (<code>listhead</code>) se usa para las filas de encabezado, al igual que el elemento <code>listitem</code> se utiliza para filas comunes. Sin embargo la fila de encabezado no es una fila normal, por lo que si se usara un guión para obtener la primer fila en una caja de lista, la fila de encabezado no sería tenida en cuenta.</p> + +<p>El elemento <code>listheader</code> (encabezado de lista) indica cada celda en la fila de encabezado. Para indicar el texto dentro de la celda de encabezado se utiliza el atributo <code>label</code></p> + +<p>Este sería el ejemplo anterior pero con una fila de encabezado:</p> + +<p><strong>Ejemplo 4</strong></p> + +<pre class="eval"><listbox> + <listhead> + <listheader label="Nombre"/> + <listheader label="Ocupación"/> + </listhead> + <listcols> + <listcol flex="1"/> + <listcol flex="2"/> + </listcols> + <listitem> + <listcell label="Jorge"/> + <listcell label="Pintor de casas"/> + </listitem> + <listitem> + <listcell label="María Elena"/> + <listcell label="Fabricante de velas"/> + </listitem> + <listitem> + <listcell label="Rogelio"/> + <listcell label="Matón"/> + </listitem> +</listbox> +</pre> + +<p>En este ejemplo, el atributo <code><a href="es/XUL/Atributo#flex">flex</a></code> se usa para hacer la columna flexible. Este atributo será descrito en una sección posterior, pero aqui permite que la columna rellene todo el espacio horizontal disponible. Puedes redimensionar la ventana para ver que la columna se estrecha cuando la ventana lo hace. Si cortas el tamaño horizontalmente, las etiquetas de las celdas se cortarán automáticamente usando una elipsis. Puedes usar el atributo <code><a href="es/XUL/Atributo#crop">crop</a></code> en las celdas o elementos seleccionados con el valor <code>none</code> para deshablitar la elipsis.</p> + +<h3 id="Listas_desplegables" name="Listas_desplegables">Listas desplegables</h3> + +<p>Las listas desplegables se crean en HTML usando el elemento <code>select</code> . El usuario puede ver una sola elección en una caja de texto y hacer click en la flecha o algo similar como un botón pegado a la caja de texto para realizar una selección diferente. Las otras opciones aparecerán en una ventana emergente. XUL tiene un elemento <code>[[XUL:Elemento#menulista|lista de menú}}</code> que puede usarse para este proposito. Consiste en una caja de texto con un btón adjunto. El nombre se eligió porque muestra un menu emergente con las opciones en el.</p> + +<p>Se necesitan tres elementos para describir una lista desplegable. El primero es el elemento <code>menulist</code> , que crea la caja de texto con el botón adjunto. El segundo, <code><a href="es/XUL/Elemento#menupopup">menupopup</a></code>, crea la ventana de menu emergente que aparecerá cuando el botón sea pulsado. El tercero, <code><a href="es/XUL/Elemento#menuitem">menuitem</a></code>, crea cada opción individual.</p> + +<p>Su sintaxis se describe mejor con el siguiente ejemplo:</p> + +<p><strong>Ejemplo 5</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul">Ver en funcionamiento</a></p> + +<div class="float-right"><img alt="Image:inputs2.png"></div> + +<pre><menulist label="Bus"> + <menupopup> + <menuitem label="Coche"/> + <menuitem label="Taxi"/> + <menuitem label="Bus" selected="true"/> + <menuitem label="Tren"/> + </menupopup> +</menulist> +</pre> + +<p>Esta lista de menu contiene cuatro opciones, una por cada elemento <code><a href="es/XUL/Elemento#menuitem">menuitem</a></code> . Para mostrar las opciones, haz click en el botón de flecha en la lista de menu. Cuando se seleccione uno, este aparecerá como la opción en la lista de menu. El atributo <code><a href="es/XUL/Atributo#selected">selected</a></code> se usa para indicar el valor que tendrá la selección por defecto.</p> + +<h4 id="Lista_de_men.C3.BA_editable" name="Lista_de_men.C3.BA_editable">Lista de menú editable</h4> + +<p>Por defecto, solo puedes seleccionar opciones de la lista. No puedes introducir tu propio texto tecleandolo dentro. Una variante del menulist permite editar el texto dentro del campo. Por ejemplo, el campo URL en el navegador tiene una lista desplegable para seleccionar URLs tecleadas anteriormente, pero puedes teclaearla tu mismo.</p> + +<p>Para clear un menulist editable, añada el atributo <code><a href="es/XUL/Atributo#editable">editable</a></code> como sigue: <strong>Ejemplo 6</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul">Ver en funcionamiento</a></p> + +<pre><menulist editable="true"> + <menupopup> + <menuitem label="www.mozilla.org"/> + <menuitem label="www.xulplanet.com"/> + <menuitem label="www.dmoz.org"/> + </menupopup> +</menulist> +</pre> + +<p>El campo URL creado aqui tiene tres opciones predefinidas que el usuario puede seleccionar o puede introducir una propia escribiendo en el campo. El texto que el usuario introduzca no se añadirá como nueva opción. Porque el atributo <code>label</code> no se usa en este ejemplo, el valor por defecto será en blanco.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Controles_de_entrada" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Medidores_de_Progreso">Siguiente »</a></p> +</div> + +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_asistente/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_asistente/index.html new file mode 100644 index 0000000000..e448d38424 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_asistente/index.html @@ -0,0 +1,138 @@ +--- +title: Crear un asistente +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Creando_un_asistente +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - para_revisar +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Wizard +--- +<p>Muchas aplicaciones usan un asistente para ayudar al usuario a realizar tareas complicadas. XUL proporciona una forma de crear fácilmente un asistente.</p> + +<h3 id="El_asistente" name="El_asistente">El asistente</h3> + +<p>Un asistente es un tipo especial de diálogo que contiene una serie de páginas. Los botones de navegación entre páginas aparecen en la parte inferior del diálogo. Los asistentes se utilizan habitualmente para ayudar al usuario en la realización de tareas complejas. Cada página contiene una única cuestión o varias preguntas relacionadas. Después de la última página, se lleva a cabo la operación.</p> + +<p>XUL proporciona un elemento <code><a href="/es/XUL/Elementos/wizard" title="es/XUL/Elementos/wizard">wizard</a></code> que permite crear asistentes. Los atributos colocados en el asistente se usan para controlar la navegación de éste. Al crear un asistente se usa la etiqueta <code><a href="/es/XUL/Elementos/wizard" title="es/XUL/Elementos/wizard">wizard</a></code> en lugar de la etiqueta <code><a href="/es/XUL/Elementos/window" title="es/XUL/Elementos/window">window</a></code>.</p> + +<p>El contenido del elemento <code><a href="/es/XUL/Elementos/wizard" title="es/XUL/Elementos/wizard">wizard</a></code> incluye el contenido de cada página del asistente. Las páginas del asistente se crean mediante el elemento <code> </code><code><a href="/es/XUL/Elementos/wizardpage" title="es/XUL/Elementos/wizardpage">wizardpage</a></code>. Puedes colocar cualquier contenido que desees dentro de cada <code><a href="/es/XUL/Elementos/wizardpage" title="es/XUL/Elementos/wizardpage">wizardpage</a></code>.</p> + +<div class="note">Ten en cuenta que actualmente los asistentes solo funcionan adecuadamente desde URLs chrome.</div> + +<p>El asistente consta de varias secciones y, por supuesto, el diseño del asistente puede variar según el sistema operativo de cada plataforma. El asistente se mostrará generalmente con el aspecto de la plataforma del usuario. El aspecto típico incluirá un título en la parte superior, un grupo de botones de navegación en la parte inferior y el contenido de la página en medio de ambos.</p> + +<p>El título a lo largo de la parte superior se crea usando el atributo <code><a href="/es/XUL/Atributos/title" title="es/XUL/Atributos/title">title</a></code>, muy parecido al que podría usarse para una ventana normal. Los botones de navegación son creados automáticamente. </p> + +<h4 id="Un_ejemplo_de_asistente" name="Un_ejemplo_de_asistente">Un ejemplo de asistente</h4> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_wizard_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_wizard_1.xul">Ver en funcionamiento</a></p> + +<pre><?xml version="1.0"?> + +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<wizard id="example-window" title="Select a Dog Wizard" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <wizardpage> + <description> + Esta asistente le ayudará a seleccionar el tipo de perro que más le conviene." + </description> + <label value="¿Por qué quiere un perro?"/> + <menulist> + <menupopup> + <menuitem label="Para que la gente se vaya"/> + <menuitem label="Para que asuste a un gato"/> + <menuitem label="Necesito un buen amigo"/> + </menupopup> + </menulist> + </wizardpage> + + <wizardpage description="Detalles del perro"> + <label value="Proporcione detalles adicionales sobre el perro que le gustaría:"/> + <radiogroup> + <caption label="Tamaño"/> + <radio value="small" label="Pequeño"/> + <radio value="large" label="Grande"/> + </radiogroup> + <radiogroup> + <caption label="Género"/> + <radio value="male" label="Macho"/> + <radio value="female" label="Hembra"/> + </radiogroup> + </wizardpage> + +</wizard> +</pre> + +<div class="float-right"> +<div class="float-right"><img alt="Image:wizard1.jpg" class="internal" src="/@api/deki/files/970/=Wizard1.jpg"></div> +</div> + +<p>El asistente tiene dos páginas, una que tiene un menú desplegable y la otra botones redondos. El asistente será formateado automáticamente, con un título en la parte de arriba y botones en la parte de abajo. El usuario puede navegar entre las páginas con los botones de 'Anterior' (<em>Back</em>) y 'Posterior' (<em>Next</em>). Estos botones se activan y desactivan ellos mismos cuando es necesario. En la última página, además de estos anteriores, aparecerá el botón de Terminar/Finalizar. Todo esto es automático, no hay que hacer nada para manipular las páginas.</p> + +<p>El atributo <code><a href="/es/XUL/Atributos/description" title="es/XUL/Atributos/description">description</a></code> puede ser opcionalmente colocado en un elemento <code><a href="/es/XUL/Elementos/wizardpage" title="es/XUL/Elementos/wizardpage">wizardpage</a></code> a fin de proporcionar un subtítulo para esa página. En el ejemplo anterior, está puesto en la segunda página, pero no en la primera.</p> + +<h3 id="Gesti.C3.B3n_de_los_cambios" name="Gesti.C3.B3n_de_los_cambios">Gestión de los cambios en las página</h3> + +<p>Generalmente, desearás que se haga algo una vez se presione el botón Finalizar. Se puede definir un atributo <code>onwizardfinish</code>, dentro del elemento <code><a href="/es/XUL/Elementos/wizard" title="es/XUL/Elementos/wizard">wizard</a></code> para que sea así. Colócalo en un script que realice cualquier tarea que desees y que después devuelva 'true'. Este script se puede usar para guardar la información que incluye el usuario durante el asistente. Por ejemplo:</p> + +<pre><wizard id="example-window" title="Select a Dog Wizard" + onwizardfinish="return saveDogInfo();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +</pre> + +<p>Cuando el usuario haga clic sobre el botón Finalizar, es llamada la función <code>saveDogInfo()</code>, la cual se definirá en un archivo de script para guardar la información que se ha incluido. Si la función devuelve 'true', el asistente se cierra. Si devuelve 'false', entonces el asistente no se cerrará, lo que suele ocurrir, por ejemplo, si la función <code>saveDogInfo()</code> encuentra una entrada que no es válida.</p> + +<p>Existen otros atributos relacionados <code><a href="/es/XUL/Atributos/onwizardback" title="es/XUL/Atributos/onwizardback">onwizardback</a></code>, <code><a href="/es/XUL/Atributos/onwizardnext" title="es/XUL/Atributos/onwizardnext">onwizardnext</a></code> y <code><a href="/es/XUL/Atributos/onwizardcancel" title="es/XUL/Atributos/onwizardcancel">onwizardcancel</a></code>, que son llamados cuando los botones Volver, Siguiente y Cancelar son presionados respectivamente. Estas funciones son llamadas sin considerar qué página se está mostrando actualmente.</p> + +<p>Para llamar un código diferente dependiendo de qué página se encuentra el usuario, se utilizan los atributos <code><a href="/es/XUL/Atributos/onpagerewound" title="es/XUL/Atributos/onpagerewound">onpagerewound</a></code> o <code><a href="/es/XUL/Atributos/onpageadvanced" title="es/XUL/Atributos/onpageadvanced">onpageadvanced</a></code> en un elemento <code><a href="/es/XUL/Elementos/wizardpage" title="es/XUL/Elementos/wizardpage">wizardpage</a></code>. Funcionan de manera parecida a las otras funciones con la excepción que se puede usar código diferente en cada página. Esto te permite validar la información incluida en cada página antes de que continúe el usuario.</p> + +<p>Un tercer método consiste en usar los atributos <code><a href="/es/XUL/Atributos/onpagehide" title="es/XUL/Atributos/onpagehide">onpagehide</a></code> y <code><a href="/es/XUL/Atributos/onpageshow" title="es/XUL/Atributos/onpageshow">onpageshow</a></code> en el elemento <code><a href="/es/XUL/Elementos/wizardpage" title="es/XUL/Elementos/wizardpage">wizardpage</a></code>. Estos se llamarán cuando la página se oculte o se muestre, independientemente de qué botón se pulse (excepto cuando se presiona Cancel: tienes que usar <code><a href="/es/XUL/Atributos/onwizardcancel" title="es/XUL/Atributos/onwizardcancel">onwizardcancel</a></code> para comprobarlo).</p> + +<p>Estos tres métodos deberían proporcionar suficiente flexibilidad para gestionar la navegación tanto como necesites. La siguiente tabla es un resumen de las funciones de los atributos que se llaman cuando el usuario pulsa Siguiente ('Next'), en el orden en que son comprobados. En el momento en que uno devuelva false, se cancelará la navegación.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Atributo</th> + <th>Etiqueta</th> + <th>Llamada</th> + </tr> + <tr> + <td>pagehide</td> + <td>wizardpage</td> + <td>Llamada a la página que el usuario esta dejando.</td> + </tr> + <tr> + <td>pageadvanced</td> + <td>wizardpage</td> + <td>Llamada a la página que el usuario esta dejando.</td> + </tr> + <tr> + <td>wizardnext</td> + <td>wizard</td> + <td>Llamado en el asitente.</td> + </tr> + <tr> + <td>pageshow</td> + <td>wizardpage</td> + <td>Llamada a la página que el usuario esta entrando.</td> + </tr> + </tbody> +</table> + +<p>Un proceso similar ocurre para el botón Volver.</p> + +<div class="note">Siempre que trates de usar una función en el evento anterior, como con pageadvanced, deberías usar +<p><code>return funcName()</code> en lugar de solo la llamada <code>funcName()</code>o no funcionará como se espera, por ejemplo</p> + +<pre class="eval"> <wizardpage pageadvanced='return funcName()'></wizardpage></code> +</pre> +</div> + +<p><br> + </p><div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Diálogos_Abrir_y_Guardar" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Más_asistentes">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_instalador/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_instalador/index.html new file mode 100644 index 0000000000..031f186435 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_instalador/index.html @@ -0,0 +1,95 @@ +--- +title: Creando un instalador +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Creando_un_instalador +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_an_Installer +--- +<p> </p> + +<p>Esta sección describe como empaquetar una aplicación de XUL en un instalador.</p> + +<h3 id="Paquetes_de_XPInstall" name="Paquetes_de_XPInstall">Paquetes de XPInstall</h3> + +<p>Mozilla proporciona un mecanismo que se puede utilizar para empaquetar ventanas de XUL, scripts, skins y otros archivos en un solo instalador. Usted puede colocar este instalador en alguna parte para que los usuarios la puedan descargar. Un script simple puede ser usado para tener descargado el paquete e instalarlo. Este mecanismo se llama <a href="es/XPInstall">XPInstall</a> (plataforma cruzada de instalación).</p> + +<p>Los instaladores de XPInstall se empaquetan en archivos JAR. Dentro del archivo JAR, usted puede agregar todos los archivos que usted desea haber instalado. Además, los instaladores deben contener un script de instalación (un archivo llamado install.js) que se pueda utilizar para escribir el proceso de la instalación. Este script tiene acceso a varias funciones de instalación que se pueden utilizar para instalar archivos y componentes.</p> + +<p>Los instaladores del archivo JAR tienen típicamente la extensión .xpi (se pronuncia zippy) para distinguirlos de otros archivos. Los instaladores serán utilizados generalmente para instalar los componentes de Mozilla tales como skins nuevos, plugins y nuevos paquetes.Texto de Código</p> + +<p>Hay varios pasos implicados en abrir un instalador e instalar los componentes. Éstos se describen gradualmente abajo.</p> + +<ol> + <li>Crea una pagina web desde la cual el usuario pueda descargar el software que se instalará. Esta página contendrá un ‘disparador de la instalación’ que es una pequeña parte del script que abre la instalación.</li> + <li>Se le presenta al usuario un diálogo indicando que el paquete está siendo instalado. Es posible que el ‘disparador de la instalación’ abra múltiples instaladores. En este caso, serán presentados en una lista. El usuario puede elegir continuar o cancelar.</li> + <li>Si el usuario elige continuar, se descargará el instalador del archivo XPI. Una barra de progreso se exhibe al usuario durante este proceso.</li> + <li>El archivo install.js es extraído del archivo de la instalación y se ejecutara. Este script abrirá las funciones del instalador que indicarán qué partes del archivo deben ser instalados.</li> + <li>Una vez que el script esté completo, el nuevo paquete ya habrá sido instalado. Si los paquetes múltiples están siendo instalados, sus scripts funcionarán en secuencia.</li> +</ol> + +<h3 id="Disparadores_.28triggers.29_de_instalaci.C3.B3n" name="Disparadores_.28triggers.29_de_instalaci.C3.B3n">Disparadores (triggers) de instalación</h3> + +<p>Según lo indicado arriba, el proceso de la instalación es empezado por un ‘disparador de instalación’. Esto implica el uso del objeto global especial InstallTrigger. Este contiene varios métodos que se pueden utilizar para comenzar una instalación. Usted puede utilizar este objeto en el contenido local o remoto, significando que es conveniente para una descarga directa del sitio web.</p> + +<p>Vamos a crear un ejemplo de un disparador de instalación. Esto involucra el uso de la función InstallTrigger.install. Esta función tiene dos parámetros, el primero es una lista de los paquetes a instalar, y el segundo es una función de rellamada que será usada cuando la instalación se complete. Aquí está un ejemplo:</p> + +<pre>function doneFn ( name , result ){ + alert("The package " + name + " was installed with a result of " + result);} + +var xpi = new Object(); +xpi["Calendar"] = "calendar.xpi"; +InstallTrigger.install(xpi,doneFn); +</pre> + +<p>Primero, definimos una función de rellamada doneFn que será ejecutada cuando la instalación se complete. Usted puede nombrar la función como prefiera. Esta función tiene dos parámetros. El primero es el nombre del paquete que acaba de ser instalado. Esto es importante si usted está instalando múltiples componentes. El segundo es un código de resultado. Si el resultado es 0, la instalación terminó con éxito. Si el resultado no es cero, quiere decir que hubo un error y el valor es el código del error. La función doneFn solo mostrará un mensaje de alerta al usuario.</p> + +<p>Después, creamos un vector xpi que contendrá el nombre (calendario) y URL (calendar.xpi) del instalador. Usted puede agregar una línea similar para cada paquete que desee instalar. Finalmente, ejecutamos la función de instalación.</p> + +<p>Cuando esta sección del script se ejecute, el archivo calendar.xpi será instalado.</p> + +<div class="highlight"> +<p>Vamos intentar esto con el diálogo de búsqueda de archivos.</p> + +<pre>function doneFn ( name , result ){ + if (result) alert("An error occured: " + result); +} + +var xpi = new Object(); +xpi["Find Files"] = "findfile.xpi"; +InstallTrigger.install(xpi,doneFn); +</pre> +</div> + +<h3 id="El_archivo_de_XPI" name="El_archivo_de_XPI">El archivo de XPI</h3> + +<p>Se requiere que el archivo XPI contenga un archivo llamado install.js que es un archivo <a href="es/JavaScript">JavaScript</a> que se ejecuta durante la instalación. Los archivos restantes son los archivos que se instalarán. Estos archivos típicamente están colocados dentro de un directorio dentro del archivo pero no es obligatorio. Los archivos cromo (chrome), deben estar estructurados como el directorio chrome.</p> + +<p>A menudo, los únicos archivos colocados en un archivo XPI serán el script de instalación (install.js) y un archivo JAR. Este archivo JAR contiene todos los archivos usados por la aplicación. Los componentes proporcionados con Mozilla se almacenan de esta manera.</p> + +<p>Debido a que el archivo XPI es un archivo tipo ZIP, usted puede crear y agregar archivos usando una aplicación que manipule estos archivos.</p> + +<p>Para el diálogo de búsqueda de archivos, crearemos una estructura en el archivo como el siguiente:</p> + +<div class="highlight"> +<pre>install.js +findfile + content + contents.rdf + findfile.xul + findfile.js + skin + contents.rdf + findfile.css + locale + contents.rdf + findfile.dtd +</pre> +</div> + +<p>Se ha agregado un directorio para cada parte del paquete, del contenido, del skin y del ‘locale’. Los archivos contents.rdf también se han agregado porque serán necesarios para registrar los archivos 'chrome'.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Presentación_dinámica" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Instalando_Scripts">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/creando_una_ventana/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_una_ventana/index.html new file mode 100644 index 0000000000..d751c77611 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_una_ventana/index.html @@ -0,0 +1,105 @@ +--- +title: Creando una ventana +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Creando_una_ventana +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Archivos_Manifest" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Añadiendo_botones">Siguiente »</a></p> +</div> + +<h3 id="Creando_un_archivo_XUL" name="Creando_un_archivo_XUL">Creando un archivo XUL</h3> + +<p>Un archivo XUL puede tener cualquier nombre, pero debería tener una extensión .xul. El archivo XUL más simple tiene la siguiente estructura:</p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window + id="findfile-window" + title="Find Files" + orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +<!-- Otros elementos irán aquí --> +</window> +</pre> + +<p>Esta ventana no hará nada, ya que no contiene ningún elemento UI (Interfaz de Usuario), éstos serán añadidos en la siguiente sección. A continuación veremos línea por línea el código de arriba:</p> + +<ol> + <li><strong><?xml version="1.0"?></strong><br> + Esta línea simplemente define que éste es un archivo XML, normalmente deberíamos añadir esta línea al inicio de cada fichero xul, al igual que pondríamos la etiqueta HTML al principio de un archivo HTML.</li> + <li><strong><?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?></strong><br> + Esta línea se usa para especificar la hoja de estilos a utilizar por el archivo, y es la sintaxis que los ficheros XML utilizan para importar hojas de estilo. En este caso, nosotros importaremos los estilos ubicados en el apartado global de un paquete de temas. No especificaremos ningún fichero así Mozilla determinará que ficheros del directorio utilizar. En este caso, el todo-importante fichero global.css es seleccionado. Este fichero contiene todas las declaraciones por defecto para todos los elementos XUL. Como XML no sabe cuantos elementos debe visualizar, el fichero lo indica. Generalmente, deberemos poner esta línea en la parte superior de cada archivo XUL. También podemos importar otra hoja de estilos utilizando una sintaxis parecida. Normalmente importamos la hoja de estilo global desde dentro de nuestro archivo de estilos.</li> + <li><strong><window</strong><br> + Esta línea declara que estamos describiendo una <a href="es/XUL/Elementos">window</a>. Cada ventana de la interfaz de usuario es descrita en un fichero por separado. Esta etiqueta es parecida a la etiqueta BODY en HTML que engloba todo el contenido. Los atributos de la ventana serán colocados aquí, en este caso hay cuatro. En el ejemplo cada atributo es colocado en una línea distinta pero esto no debe ser hacer necesariamente.</li> + <li><strong>id="findfile-window"</strong><br> + El atributo <code><a href="es/XUL/Atributos">id</a></code> es usado como un identificador, de esta manera la ventana puede ser llamada desde scripts. Usualmente colocarás el atributo <code>id</code> a todos los elementos. El nombre lo eliges tú.</li> + <li><strong>title="Find Files"</strong><br> + Este atributo muestra el texto que aparecerá en la barra de títulos cuando se muestre la ventana. En el ejemplo aparecerá "Find Files".</li> + <li><strong>orient="horizontal"</strong><br> + Este atributo indica el orden de los ítems dentro de la ventana. El valor <code>horizontal</code> indica que los ítems serán colocados a través de la ventana. También puedes usar el valor <code> vertical</code> que ordenará los ítems en una columna. Este es el valor por defecto, asi que tal vez desees no utilizar este atributo si deseas mostrar los datos en columnas.</li> + <li><strong>xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"></strong><br> + Esta línea declara el nombre para XUL, que deberías colocar dentro de la etiqueta window para indicar que todo eso es XUL. Esta dirección no será descargada, Mozilla la reconocerá internamente.</li> + <li><strong><span class="nowiki"><!-- Otros elementos van aquí --></span></strong><br> + Escribe en este bloque otros elementos (botones, menúes, y otros componentes de interfaz) que aparecen en la ventana. Pondremos algo de eso en el siguiente tomo de la sección..</li> + <li><strong></window></strong><br> + Finalmente, debemos cerrar la etiqueta al final del fichero.</li> +</ol> + +<h3 id="Abriendo_una_ventana" name="Abriendo_una_ventana">Abriendo una ventana</h3> + +<p>Al fin de abrir una ventana XUL, varios métodos son aplicables. Si se está solo en el estado del desarrollo, se puede escribir la URL (empezando con chrome:, file: o cualquier otro tipo de URL) en la barra de dirección de Mozilla. También se puede hacer doble clic sobre el archivo en la pantalla 'Abrir archivo', suponiendo que los archivos XUL están asociados a Mozilla. La ventana XUL aparecerá en la ventana del navegador en lugar de en una nueva ventana, pero suele ser suficiente durante los principios del desarrollo.</p> + +<p>El camino correcto, naturalmente, es de abrir la ventana utilizando a JavaScript. No es necesaria una sintaxis nueva se puede usar la función <a href="es/DOM/window.open">window.open()</a> igual que para los documentos <a href="es/HTML">HTML</a>. Aún así, una opción adicional, llamada 'chrome' es necesaria para indicar al navegador que el documento a abrir es <a href="es/DOM/window.open">chrome</a>. Ésta se abrirá sin barra de herramientas, ni menúes o cualquier otra cosa de las que suele tener de normal un navegador. La sintaxis se describe a continuación:</p> + +<pre>window.open(url,windowname,flags); + +donde el argumento 'flags' contiene "chrome" como en este ejemplo: + +window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300"); +</pre> + +<div class="highlight"> +<h5 id="Nuestro_ejemplo_de_b.C3.BAsqueda" name="Nuestro_ejemplo_de_b.C3.BAsqueda">Nuestro ejemplo de búsqueda</h5> + +<p>Empezaremos por crear el archivo básico para el dialogo de búsqueda. Lo llamaremos 'findfile.xul' y lo pondremos en el directorio especificado en el archivo 'findfile.manifest' (el cual hemos creado en la sección anterior). Ponerle la plantilla mostrada arriba de esta página y guardarlo.</p> +</div> + +<p>Podemos usar el parámetro en línea de comando '-chrome' para especificar que archivo XUL tendrá que abrir Mozilla al empezar. Si no se ha especificado, la ventana por defecto será abierta (habitualmente la ventana del navegador). Por ejemplo, podríamos abrir el dialogo de búsqueda con una de las siguientes órdenes:</p> + +<pre>mozilla -chrome chrome://findfile/content/findfile.xul + +mozilla -chrome resource:/chrome/findfile/content/findfile.xul +</pre> + +<p>Si utilizamos esta orden en línea (suponiendo que se pueda hacer en nuestra plataforma), el dialogo de búsqueda de archivo será abierto por defecto en lugar de la ventana de Mozilla. Pero como no hemos puesto ningún elemento gráfico, no la veremos. Colocaremos algunos elementos en la sección siguiente.</p> + +<p>Para ver aún así el efecto, lo siguiente abrirá la ventana de marcadores:</p> + +<pre class="eval"><span class="highlightred">Para Mozilla</span> +mozilla -chrome <a class="external" rel="freelink">chrome://communicator/content/bookma...rksManager.xul</a> + +<span class="highlightred">Para Firefox</span> +firefox -chrome <a class="external" rel="freelink">chrome://browser/content/bookmarks/b...rksManager.xul</a> +</pre> + +<p>El argumento '-chrome' no da al archivo ningún privilegio adicional. En su lugar, causa que el archivo especificado se abra como una ventana en el nivel superior sin ningun atributo del browser chrome, como el campo de direcciones o menus. Solo las URLs chrome tienen privilegios adicionales.</p> + +<div class="note">Para escribir y ver inmediatamente los resultados en Mozilla, puede probar con <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">este editor XUL</a>.</div> + +<h3 id="Problemas" name="Problemas">Problemas</h3> + +<ul> + <li>Si la ventana XUL no se muestra en el escritorio pero tiene un icono en la barra de tareas, revisaremos la declaración 'xml-stylesheet'. Nos aseguraremos de haber incluido correctamente la hoja de estilo:</li> +</ul> + +<pre class="eval"> <?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +</pre> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Archivos_Manifest" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Añadiendo_botones">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_de_vistas_de_un_árbol/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_de_vistas_de_un_árbol/index.html new file mode 100644 index 0000000000..060dd9e5f9 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_de_vistas_de_un_árbol/index.html @@ -0,0 +1,108 @@ +--- +title: Detalles de Vistas de un árbol +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Detalles_de_Vistas_de_un_árbol +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_View_Details +--- +<p> </p> +<p>Además del contenido estático y RDF, los árboles pueden obtener su contenido de una vista personalizada.</p> +<h3 id="Creando_una_vista_detallada_o_personalizada" name="Creando_una_vista_detallada_o_personalizada">Creando una vista detallada o personalizada</h3> +<p>Hasta ahora hemos visto dos formas de definir el contenido de un árbol. Podemos poner filas y celdas estáticas dentro de un árbol o usar una fuente de datos RDF. El primer método funciona bíen siempre y cuando solo se traten de unos pocos datos. Usar una fuente de datos es adecuado cuando hay una disponible, ya sea una proporcionada con Mozilla o una creada por nosotros mismos. En algunos casos, podemos querer guardar datos en algún otro formato o realizar operaciones en ellos. XUL provee un tercer método, el cual requiere la creación de una vista personalizada con un guión.</p> +<p>Este método puede ser usado para contener datos para cientos o miles de filas, que el árbol puede mostrar instantaneamente. Para ello implementamos un árbol como hasta ahora pero dejamos el elemento treechildren vacio. El siguiente ejemplo muestra como hacerlo:</p> +<pre><tree id="miArbol" flex="1"> + <treecols> + <treecol id="colNombre" label="Nombre" flex="1"/> + <treecol id="colFecha" label="Fecha" flex="1"/> + </treecols> + <treechildren/> +</tree> +</pre> +<p>Para asignar datos y que sean mostrados en el árbol, debemos crear un objecto guión que será usado para indicar que valor toma cada celda, el número total de filas y alguna otra información adicional. El objeto de guión estará asignado al árbol. El árbol llamará a los métodos del objeto para obtener la información que necesita mostrar.</p> +<p>El objeto guión, llamado vista de árbol, soporta más o menos treinta métodos que puedes implementar para suministrar información acerca de los contenidos del árbol y su apariencia, pero solo tendremos que implementar una pequeña parte de ellos. Algunos métodos que deberemos implementar son:</p> +<pre class="eval"> * rowCount +</pre> +<p>Esta propiedad deberá contener el número de líneas que queremos mostrar en el árbol.</p> +<pre class="eval"> * getCellText( fila, columna ) +</pre> +<p>Este método devuelve el contenido de una celda, especificada mediante los paramentros ‘fila’ y ‘columna’. Será llamada para mostrar los datos de cada celda. Las filas pasadas como paramentro es un número contando desde 0. Las columnas en cambio son los valores del atributo id definido en las columnas del árbol.</p> +<pre class="eval"> * setTree( arbol ) +</pre> +<p>Este método es llamado una sola vez para vincular el elemento árbol con la vista. Esto nos permite utilizar la misma vista con distintos árboles.</p> +<p>Aquí mostramos un ejemplo de como definir el objeto, el cual puede tener el nombre que deseemos.</p> +<pre>var vistaArbol = { + rowCount : 10000, + getCellText : function(fila, columna) { + if (columna=="colNombre") return "Fila "+row; + else return "18 de Febrero"; + }, + setTree: function(arbol){ this.treebox=arbol; }, + isContainer: function(fila){ return false; }, + isSeparator: function(fila){ return false; }, + isSorted: function(fila){ return false; }, + getLevel: function(fila){ return 0; }, + getImageSrc: function(fila,columna){ return null; }, + getRowProperties: function(fila,props){}, + getCellProperties: function(fila,columna,props){}, + getColumnProperties: function(idColumna,columna,props){} +}; +</pre> +<p>Las funciones de este ejemplo que no han sido descritas anteriormente, no necesitan realizar ninguna acción, pero si deben estar declaradas, ya que el árbol las llamará para intentar conseguir información adicional.</p> +<p>Este ejemplo puede usarse para mostrar un arbol con 10.000 filas. El contenido de las celdas en la primera columna contendrán el texto ‘Fila X’, donde X es el número de fila. En la segunda columna todas las celdas contendrán el texto con la fecha ‘18 de Febrero’. La condición if de la función getCellText() compara el parametro columna con el texto ‘colNombre’. Este texto corresponde al id de la primera columna en la definición del árbol del ejemplo anterior. Por supuesto que este ejemplo es muy simple, en realidad deberíamos tener datos mucho más complejos en cada celda.</p> +<p>El último paso es asociar el objeto vista con el árbol. El árbol tiene una propiedad llamada view, la cual puede ser asignada al objeto vista declarado anteriormente. Podremos asignarle un valor a esta propiedad en cualquier momento para poner o cambiar una vista.</p> +<pre>function ponerVista() { + document.getElementById('miArbol').view = vistaArbol; +} +</pre> +<p>A continuación se incluye el ejemplo completo. Un guión incrustado ha sido usado aquí para simplificar el ejemplo. No obstante, normalmente pondremos los guiones en ficheros separados.</p> +<p>Ejemplo 7.6.1</p> +<pre><?xml version="1.0"?> + +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window title="Ejemplo de árbol" id="ventana-arbol" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + onload="ponerVista();"> + +<script> +var vistaArbol = { + rowCount : 10000, + getCellText : function(fila, columna) { + if (columna=="colNombre") return "Fila "+row; + else return "18 de Febrero"; + }, + setTree: function(arbol){ this.treebox=arbol; }, + isContainer: function(fila){ return false; }, + isSeparator: function(fila){ return false; }, + isSorted: function(fila){ return false; }, + getLevel: function(fila){ return 0; }, + getImageSrc: function(fila,columna){ return null; }, + getRowProperties: function(fila,props){}, + getCellProperties: function(fila,columna,props){}, + getColumnProperties: function(idColumna,columna,props){} +}; + +function ponerVista() { + document.getElementById('miArbol').view = vistaArbol; +} +</script> + +<tree id="miArbol" flex="1"> + <treecols> + <treecol id="colNombre" label="Nombre" flex="1"/> + <treecol id="colFecha" label="Fecha" flex="1"/> + </treecols> + <treechildren/> +</tree> + +</window> +</pre> +<p>En la imagen, podemos ver dos columnas, cada una con datos generados por la función getCellText(). La función ponerVista() ha sido llamada en el gestor de eventos onload de la ventana. Tambíen hubieramos podido definir la vista más tarde si hubieramos querido. Podemos cambiar la vista en cualquier momento.</p> +<p>Cabe especial mención que la función getCellText solo es llamada cuando es necesario para mostrar los contenidos. En el ejemplo anterior de 10.000 filas, getCellText solo es llamada para las celdas que se están mostrando actualmente. Cuando el usuario se desplaze por el árbol se irá llamando para las celdas que se pongan a la vista. Esto hace que el árbol sea mucho más eficiente.</p> +<p>Tambíen podemos usar el objeto vista para árboles sin una vista personalizada. Por ejemplo, árboles construidos desde datos RDF tendrán un objeto vista que cogerá información de la fuente de datos RDF. Podemos usar el objeto vista para obtener información acerca de los datos mostrados por el árbol.</p> +<p>El interfaz nsiTreeView (inglés) lista todas la propiedades y métodos que podemos implementar para las vistas de árbol.</p> +<p>Siguiente, descubriremos como usar los comandos.</p> +<p>NdT. según un comentario del tutorial del 5/3/05, el parametro Columna de la función getCellText() ya no es un string en las últimas versiones, sino un nsITreeColumn, el cual podemos obtener a través de columns.getNamedColumn(string)</p> +<p><span class="comment">Categorías</span></p> +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_del_modelo_de_caja/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_del_modelo_de_caja/index.html new file mode 100644 index 0000000000..d97360678c --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_del_modelo_de_caja/index.html @@ -0,0 +1,89 @@ +--- +title: Detalles del modelo de caja +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Detalles_del_modelo_de_caja +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Box_Model_Details +--- +<p> </p> +<p>Hemos visto gran cantidad de características del modelo de caja. Aquí descubriremos unos cuantos detalles más con algunos ejemplos.</p> +<h3 id="M.C3.A1s_detalles_del_esquema" name="M.C3.A1s_detalles_del_esquema">Más detalles del esquema</h3> +<p>Las propiedades de estilo como min-width y max-height pueden ser aplicadas a cualquier elemento. Las hemos añadido a botones y cajas de texto, también podemos añadirlas a espaciadores o cajas. Además, el atributo flex puede ser aplicado a cualquier elemento.</p> +<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4> +<pre><hbox flex="1"> + <button label="Izquierda" style="min-width: 100px;" flex="1"/> + <spacer flex="1"/> + <button label="Derecha" style="min-width: 100px;" flex="1"/> +</hbox> +</pre> +<p>En el ejemplo anterior, los tres elementos se redimensionarán solos porque todos ellos son flexibles. Los dos botones indican un ancho mínimo de 100 píxeles, su tamaño nunca será inferior al indicado pero podrán crecer a mayor altura. Aquí la ventana debería aparecer con unos 200 píxeles de ancho, eso es suficiente para los dos botones. Ya que estos tres elementos son flexibles, pero no requieren un mayor lugar, la flexibilidad no agregará espacio extra.</p> +<p><a href="/@api/deki/files/557/=Boxdet1.png" title="Image:boxdet1.jpg"><img alt="Image:boxdet1.jpg" class="internal default" src="/@api/deki/files/557/=Boxdet1.png"></a></p> +<p>Como se muestra en la imagen anterior, hay dos botones que se expandirán verticalmente hasta acomodarse a su contenedor, que en éste caso es un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_hbox.html">hbox</a></code>. El atributo <code>align</code> controla este comportamiento en una caja horizontal. También puede prevenirse esta expansión insertando una altura máxima en los elementos o, mejor aún, en la misma caja. Si una caja posee una altura máxima, los elementos dentro de la misma serán ceñidos a ella. Sin embargo, el problema con esto es que se deberá conocer de antemano qué tan grande será el elemento. Lo siguiente muestra el ejemplo anterior con un atributo <code>align</code> establecido.</p> +<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4> +<pre><hbox flex="1" align="top"> + <button label="Izquierda" style="min-width: 100px;" flex="1"/> + <spacer flex="1"/> + <button label="Derecha" style="min-width: 100px;" flex="1"/> +</hbox> +</pre> +<p>Para lograr esquemas complicados, generalmente se necesitará añadir cajas anidadas, especificar tamaños mínimos y máximos en algunos elementos, y convertir a ciertos elementos en flexibles. La mejor internase es la que puede ser exhibida en varios tamaños sin problemas. El modelo de caja podría ser difícil de entender sin antes realizar varias cosas por uno mismo.</p> +<p>A continuación una reseña de ambos tipos de cajas:</p> +<p><strong>Cajas horizontales</strong></p> +<ol> + <li>Sitúan sus elementos uno después del otro horizontalmente.</li> + <li>Los elementos flexibles se flexionan horizontalmente.</li> + <li>El empaque controla la colocación horizontal de los elementos hijos.</li> + <li>La alineación regula cómo la fila de elementos es alineada verticalmente.</li> +</ol> +<p><strong>Cajas verticales</strong></p> +<ol> + <li>Ponen sus elementos verticalmente en una columna.</li> + <li>Los elementos flexibles se flexionan verticalmente.</li> + <li>El empaque controla la ubicación vertical de los elementos hijos.</li> + <li>La alineación regula cómo se alinea horizontalmente la columna de elementos hijos.</li> +</ol> +<p>Pueden ponerse cajas en cualquier parte de un archivo XUL, incluso dentro de un elemento HTML como una tabla; sin embargo, el esquema estará parcialmente controlado por el elemento HTML. Esto quiere decir que el <code>flex</code> podría no funcionar exactamente como se desee. Recuerde que la flexibilidad solo tiene significado para elementos que se encuentran directamente dentro de una caja o de algún elemento que sea un tipo de caja.</p> +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> +<h4 id="1._Utilizaci.C3.B3n_de_espaciadores" name="1._Utilizaci.C3.B3n_de_espaciadores">1. Utilización de espaciadores</h4> +<pre><hbox> + <button label="Uno"/> + <spacer style="width: 5px"/> + <button label="Dos"/> +</hbox> +</pre> +<p>Aquí se utiliza un espaciador como separador entre dos botones, fijándole explícitamente un ancho de 5 píxeles. También podrían establecerse márgenes (usando la propiedad CSS <code>margin</code>).</p> +<p>Here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels. You could also set margins (using the CSS margin property).</p> +<h4 id="2._Centrado_de_botones" name="2._Centrado_de_botones">2. Centrado de botones</h4> +<pre><hbox pack="center" align="center" flex="1"> + <button label="¡Mírame!"/> + <button label="¡Presióname!"/> +</hbox> +</pre> +<p>Este ejemplo contiene una caja horizontal flexible con dos botones en ella. La caja posee el atributo <code>pack</code> que se utiliza para centrar los botones horizontalmente. El atributo align alinea los botones verticalmente. El resultado es que los botones estarán centrados en la caja en ambas direcciones. Este ejemplo también funcionará con una caja vertical, aunque el segundo botón estará debajo del primero en lugar de a su lado.</p> +<h4 id="3._Una_ventana_de_di.C3.A1logo_.E2.80.9CBuscar_texto.EF.BF.BD.3F" name="3._Una_ventana_de_di.C3.A1logo_.E2.80.9CBuscar_texto.EF.BF.BD.3F">3. Una ventana de diálogo “Buscar texto�?</h4> +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window id="buscartexto" title="Buscar Texto" orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <vbox flex="3"> + <label control="t1" value="Texto a buscar:"/> + <textbox id="t1" style="min-width: 100px;" flex="1"/> + </vbox> + + <vbox style="min-width: 150px;" flex="1" align="start"> + <checkbox id="c1" label="Ignorar mayúsculas/minúsculas"/> + <spacer flex="1" style="max-height: 30px;"/> + <button label="Buscar"/> + </vbox> + +</window> +</pre> +<p>Aquí son creadas dos cajas verticales, una para la caja de texto y la otra para la casilla de verificación y el botón. La caja izquierda posee una flexibilidad que es tres veces mayor que la caja derecha así siempre recibirá el triple de espacio extra cuando se incremente el tamaño de la ventana. A la caja derecha se le impone un ancho mínimo de 150 píxeles.</p> +<p>La caja de texto es flexible así podrá redimensionarse cuando la ventana lo haga, también se le ha impuesto un ancho mínimo de 100 píxeles. La casilla de verificación aparece a la derecha junto con su etiqueta. Justo debajo de esta caja hay un espaciador, el mismo crecerá y se reducirá pero sin exceder los 30 píxeles. El resultado es que la casilla de verificación y el botón de búsqueda estarán separados uno del otro por un espacio nunca mayor a 30 píxeles.</p> +<p>La segunda caja posee un valor de alineación <code>start</code>, esto causa que los elementos hijos sean alineados en el borde izquierdo. Si esto fuera especificado, el valor por omisión sería <code>stretch</code>, lo que haría que los elementos se estiren horizontalmente. Como no queremos que el botón de búsqueda cambie su tamaño necesitamos especificar una alineación. <img alt="Image:boxdet-ex3.jpg"></p> +<p>A continuación aprenderemos sobre un tipo da caja más especializado, la caja de grupo.</p> +<p><span class="comment">Categorías</span></p> +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/divisores/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/divisores/index.html new file mode 100644 index 0000000000..729af7c557 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/divisores/index.html @@ -0,0 +1,136 @@ +--- +title: Divisores +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Divisores +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Splitters +--- +<p>Ahora podemos ver como añadir divisores/separadores a una ventana.</p> + +<h3 id="Divisi.C3.B3n_de_una_caja" name="Divisi.C3.B3n_de_una_caja">División de una caja</h3> + +<p>Hay momentos en los cuales se necesita tener dos secciones en la ventana donde el usuario pueda dimensionar las partes. Un ejemplo es la ventana del navegador de Mozilla, donde se puede cambiar el tamaño del panel lateral desplazando la línea de intersección de los cuadros. También se puede esconder, picando la cruz del panel.</p> + +<h4 id="El_elemento_separador" name="El_elemento_separador">El elemento separador</h4> + +<p>Ésta funcionalidad es cumplida utilizando un elemento llamado un <code><a href="es/XUL/splitter">splitter</a></code>. Este elemento crea una barra fina entre los dos cuadros, lo cual permite dimensionar estos. Se puede poner un separador donde se quiera o necesite para permitir dimensionar los elementos situados antes o después de él en una misma caja.</p> + +<p>Cuando un separador se coloca en una caja horizontal, permite dimensionar horizontalmente. Si se coloca en una caja vertical, permite dimensionar verticalmente.</p> + +<p>La sintaxis de un separador es la siguiente:</p> + +<pre><splitter + id="identifier" + state="open" + collapse="before" + resizebefore="closest" + resizeafter="closest"> +</pre> + +<p>Los atributos son los que siguientes:</p> + +<dl> + <dt><a href="es/XUL/Atributos/id">id</a></dt> + <dd>El identificador único de este separador.</dd> +</dl> + +<dl> + <dt><a href="es/XUL/Atributos/state">state</a></dt> + <dd>Indica el estado del separador. Se pone en <code>open</code>, que es la opción por defecto, si se quiere que el panel dimensionable esté inicialmente abierto o en <code>collapsed</code> para que uno de los paneles sea completamente reducido y que el otro ocupe (colapse) todo el espacio.</dd> +</dl> + +<dl> + <dt><a href="es/XUL/Atributos/collapse">collapse</a></dt> + <dd>Indica de que lado el panel debe reducirse cuando el separador es agarrado o iniciado en estado de colapse. Se definirá en <code>before</code> para designar elemento anterior al separador y en <code>after</code> para el elemento posterior. Poniéndolo en <code>none</code>, lo cual es la opción por defecto, el separador al ser agarrado no reducirá los paneles.</dd> +</dl> + +<dl> + <dt><a href="es/XUL/Atributos/resizebefore">resizebefore</a></dt> + <dd>Cuando un separador es desplazado, los elementos a su izquierda (o encima) cambian de dimensiones. Éste atributo indica cual de los elementos puede dimensionarse. Para que el elemento inmediatamente a la izquierda del separador sea dimensionado, se definirá en <code>closest</code> (el valor por defecto) y en <code>farthest</code> para que sea el elemento más lejos a la izquierda (el primer elemento en la caja) el que sea dimensionado.</dd> +</dl> + +<dl> + <dt><a href="es/XUL/Atributos/resizeafter">resizeafter</a></dt> + <dd>Cuando un separador es desplazado, los elementos a su derecha (o debajo) cambian de dimensiones. Éste atributo indica cual de los elementos puede dimensionarse. Para que el elemento inmediatamente a su derecha sea dimensionado, se definirá en <code>closest</code> (el valor por defecto) y en <code>farthest</code> para que sea el elemento más lejos a derecha (el último elemento en la caja) el que sea dimensionado. Éste atributo también se puede definir en <code>grow</code>, en este caso los elementos a su derecha no cambiarán de tamaño al mover el separador, pero si la caja entera.</dd> +</dl> + +<p>Si se pone el atributo <code><a href="es/XUL/Atributos/collapse">collapse</a></code>, se añadirá también el elemento <code><a href="es/XUL/grippy">grippy</a></code> dentro del <code>splitter</code> para permitir que el usuario pueda utilizar el separador.</p> + +<h4 id="Ejemplo_con_separador" name="Ejemplo_con_separador">Ejemplo con separador</h4> + +<p>Aquí un ejemplo que puede ayudar:</p> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul">Ver en funcionamiento</a></p> + +<pre><vbox flex="1"> + <iframe id="content-1" width="60" height="20" src="w1.html"/> + <splitter collapse="before" resizeafter="farthest"> + <grippy/> + </splitter> + <iframe id="content-2" width="60" height="20" src="w2.html"/> + <iframe id="content-3" width="60" height="20" src="w3.html"/> + <iframe id="content-4" width="60" height="20" src="w4.html"/> +</vbox> +</pre> + +<div class="float-right"><img alt="Image:splitter-ex1.jpg"></div> + +<p>Aquí, cuatro marcos han sido creados y un separador colocado entre el primero y el segundo. El atributo de <code><a href="es/XUL/Atributos/collapse">colapso</a></code> se ha definido en el valor <code>before</code>, para que si el separador es agarrado, el primer cuadro desaparezca y que el divisor y los marcos restantes se desplacen a la izquierda. El punto del cursor para mover el separador es centrado en relación a él-mismo.</p> + +<p>Al separador se le ha dado un valor <code><a href="es/XUL/Atributos/resizeafter">resizeafter</a></code> de <code>farthest</code>. Ésto hace que cuando el separador es movido, el elemento más lejos a su derecha cambiará de tamaño, en este caso el cuadro 4.</p> + +<p>A value has not been specified for <code><a href="es/XUL/Atributos/resizebefore">resizebefore</a></code> so it will default to a value of <code>closest</code>. In this case, there is only one frame before the splitter, so frame 1 will change size.</p> + +<p>Frames 2 and 3 will only change size if you drag the splitter far enough to the right that frame 4 has reached its minimum size.</p> + +<div class="float-right"><img alt="Image:splitter-ex2.jpg"></div> + +<p>This image shows the 4 panels with the splitter in a collapsed state.</p> + +<div class="float-right"><img alt="Image:splitter-ex3.jpg"></div> + +<p>This image shows the 4 panels with the splitter resized to the right. Notice how the middle two panels have not changed size. Only panel 1 and panel 4 have changed size. You can just see part of the fourth panel. If you continue to drag the splitter to the right, the other two panels will shrink.</p> + +<p>You can use the style properties such as <code>min-width</code>, <code>max-height</code> on the iframes to specify minimum or maximum widths or heights in the box. If you do, the splitter will detect this and not allow the user to drag the splitter past the minimum and maximum sizes.</p> + +<p>For example, if you specified a minimum width of 30 pixels on panel 4 above, it would not shrink below that size. The other two panels would have to shrink. If you set the minimum width of panel 1 to 50 pixels, you would only be able to drag the splitter 10 pixels to the left (as it starts at 60 pixels wide). You can still collapse the splitter however.</p> + +<p>You can also place more than one splitter in a box if you want, in which case you could collapse different parts of it. Similarly, you do not have to collapse just iframes. Any element can be collapsed.</p> + +<h3 id="Nuestro_ejemplo_de_b.C3.BAsqueda" name="Nuestro_ejemplo_de_b.C3.BAsqueda">Nuestro ejemplo de búsqueda</h3> + +<div class="highlight"> +<p>Let's see what the find file dialog looks like with a splitter in it. One possibility would be to add the results of the search in the dialog. We'll add an area in-between the search criteria and the buttons along the bottom. A splitter will allow you to collapse, or hide, the search results.</p> + +<pre class="eval"></tabbox> + + <span class="highlightred"><iframe src="results.html"/> + <splitter resizeafter="grow"/></span> + + <hbox> +</pre> + +<p>Here, a splitter and an iframe have been added to the dialog. We don't need the <code><a href="es/XUL/spacer">spacer</a></code> after the <code><a href="es/XUL/tabbox">tabbox</a></code> any more so we can remove it. The content of the frame is contained in a file called 'results.html'. Create this file and put whatever you want in it for now. The iframe will be replaced <a href="es/Tutorial_de_XUL/%c3%81rboles">más tarde</a> with a results list when we know how to create it. For now, it serves to demonstrate the splitter.</p> + +<p>The splitter has been set to a <code>collapse</code> value of <code>before</code> meaning that the element just before the splitter will collapse. Here, it is the iframe. As the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up.</p> + +<p>The <code>resizeafter</code> attribute has been set to <code>grow</code> so that the elements after the splitter push themselves down when the splitter is dragged down. This results in the content of the frame growing to any size. It should be noted that the window does not resize itself automatically. You'll also notice that this is a horizontal splitter because it has been placed in a vertical box.</p> + +<p>Estado normal:</p> + +<p><img alt="Image:splitter1.png"></p> + +<p>Estado colapsado:</p> + +<p><img alt="Image:splitter2.png"></p> + +<p><strong>Nuestro ejemplo</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul">Ver en funcionamiento</a></p> +</div> + +<p><br> + </p><div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Paneles_de_contenidos" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Barras_de_desplazamiento">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/diálogos_abrir_y_guardar/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/diálogos_abrir_y_guardar/index.html new file mode 100644 index 0000000000..ee9354c54b --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/diálogos_abrir_y_guardar/index.html @@ -0,0 +1,85 @@ +--- +title: Diálogos Abrir y Guardar +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Diálogos_Abrir_y_Guardar +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Open_and_Save_Dialogs +--- +<p>Un tipo común de diálogo es aquello donde el usuario puede elegir un archivo para abrirlo o guardarlo.</p> + +<h3 id="Selectores_de_archivos" name="Selectores_de_archivos">Selectores de archivos</h3> + +<p>Un selector de archivos es un diálogo que permite al usuario seleccionar un archivo. Generalmente se utiliza para las órdenes de menú: Abrir y Guardar, pero se pueden utilizar en cualquier lugar en que el usuario necesita elegir un archivo. Para implementar el selector de archivos se utiliza la interfaz <a href="es/NsIFilePicker">nsIFilePicker</a> de <a href="es/XPCOM">XPCOM</a>.</p> + +<p>Se puede usar el selector de archivos de un modo de los tres siguientes:</p> + +<ul> + <li>Abrir: se le pide al usuario que seleccione un archivo.</li> + <li>Seleccionar carpeta/directorio: se le pide al usuario que seleccione una carpeta.</li> + <li>Guardar: se le pide al usuario que seleccione un nombre para guardar el archivo.</li> +</ul> + +<p>La apariencia del diálogo será distinta en cada tipo y variará en cada plataforma. Cuando el usuario ha seleccionado un archivo o una carpeta, lo puede leer o escribir en él.</p> + +<p>La interfaz del selector de archivo nsIFilePicker es la encargada de mostrar el diálogo en uno de los tres modos. Usando la interfaz se puede configurar una serie de características del diálogo. Cuando se cierra el diálogo, se pueden usar las funciones de la interfaz para obtener el archivo que fue seleccionado.</p> + +<h4 id="Creando_un_selector_de_archivo" name="Creando_un_selector_de_archivo">Creando un selector de archivo</h4> + +<p>Para empezar, debes crear un componente selector de archivos e iniciarlo.</p> + +<pre>var nsIFilePicker = Components.interfaces.nsIFilePicker; +var fp = Components.classes["@mozilla.org/filepicker;1"] + .createInstance(nsIFilePicker); +fp.init(window, "Select a File", nsIFilePicker.modeOpen); +</pre> + +<p>Primero, se crea un nuevo objeto selector de archivos y es almacenado en la variable ‘fp’. La función ‘init’ se usa para iniciar el selector de archivos. Esta función toma tres argumentos, la ventana que está abriendo el diálogo, el título del diálogo y el modo. Aquí el modo es <code>modeOpen</code> (modoAbrir) el cual es usado para un diálogo Abrir. También se puede usar <code>modeGetFolder</code> (modoObtenerCarpeta) y <code>modeSave</code> (modoGuardar) para los otros dos modos. Estos modos son constantes de la interfaz <code>nsIFilePicker</code>.</p> + +<h4 id="Directorio_y_filtros_por_defecto" name="Directorio_y_filtros_por_defecto">Directorio y filtros por defecto</h4> + +<p>Hay dos características del diálogo que se pueden configurar antes de que se muestre.</p> + +<ul> + <li>La primera es el directorio por defecto que se muestra cuando el diálogo es abierto.</li> + <li>La segunda es un filtro que indica la lista de archivos que se muestran en el diálogo. Este se puede usar, por ejemplo, para ocultar todos los archivos menos los archivos HTML.</li> +</ul> + +<p>Se puede configurar el directorio por defecto con la propiedad <code>displayDirectory</code> del objeto selector de archivos. El directorio debe ser un objeto <code><a href="es/NsILocalFile">nsILocalFile</a></code>. Si no asignas ningún valor, un directorio por defecto será escogido automáticamente. Para agregar filtros, se llama la función <code>apeendFilters()</code> para configurar los tipos de archivos que se desea mostrar.</p> + +<pre>fp.appendFilters(nsIFilePicker.filterHTML | nsIFilePicker.filterImages); +fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll); +</pre> + +<p>El primer ejemplo agrega filtros para archivos HTML e imágenes. Al usuario se le permitirá seleccionar sólo esos tipos de archivos. La forma de realizar esto depende de la plataforma. En algunas plataformas, cada filtro será separado y el usuario podrá seleccionar entre archivos HTML e imágenes. El segundo ejemplo agrega filtros para archivos de texto y para todos los archivos. Luego el usuario tiene la opción de elegir entre mostrar solo los archivos de texto o todos los archivos.</p> + +<p>También se puede usar <code>filterXML</code> y <code>filterXUL</code> para filtrar archivos XML y XUL. Si se desea crear un filtro en particular se puede utilizar la función <code>appendFilter()</code> de la siguiente manera:</p> + +<pre>fp.appendFilter("Audio Files","*.wav; *.mp3"); +</pre> + +<p>Esta línea agregará un filtro para archivos WAV y MP3. El primer argumento es el título del tipo de archivos y el segundo es una lista de máscaras de archivos separadas por punto y coma. Se puede agregar más o menos máscaras como sea necesario. También se puede llamar la función appendFilters tantas veces como sea necesario para agregar filtros adicionales. El orden en que se agregan determina su prioridad. Generalmente, el primero que se agrega es seleccionado por defecto.</p> + +<h4 id="Conseguir_el_archivo_seleccionado" name="Conseguir_el_archivo_seleccionado">Conseguir el archivo seleccionado</h4> + +<p>Finalmente, se puede mostrar el diálogo llamando la función ‘show’. No toma ningún parámetro pero devuelve un código de estado que indica que eligió el usuario. Note que la función no devuelve hasta que el usuario haya seleccionado un archivo. La función devuelve una de las tres siguientes constantes:</p> + +<ul> + <li><strong>returnOK</strong>: el usuario seleccionó un archivo y presionó Aceptar. El archivo seleccionado será almacenado en la propiedad ‘file’ del selector de archivos.</li> + <li><strong>returnCancel</strong>: el usuario presionó Cancelar.</li> + <li><strong>returnReplace</strong>: en el modo guardar (save), este valor de retorno indica que el usuario ha seleccionado un archivo para reemplazarlo. (returnOK será devuelto cuando el usuario haya ingresado un nombre nuevo para el archivo).</li> +</ul> + +<p>Se debería revisar el valor retornado para luego recuperar el objeto del archivo desde el selector de archivos usando la propiedad <code>file</code>.</p> + +<pre>var res = fp.show(); +if (res == nsIFilePicker.returnOK){ + var thefile = fp.file; + // --- do something with the file here --- +} +</pre> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Creando_Diálogos" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Creando_un_asistente">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/el_modelo_de_caja/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/el_modelo_de_caja/index.html new file mode 100644 index 0000000000..4ed1b2660f --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/el_modelo_de_caja/index.html @@ -0,0 +1,192 @@ +--- +title: El modelo de caja +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/El_modelo_de_caja +translation_of: Archive/Mozilla/XUL/Tutorial/The_Box_Model +--- +<p>{{ PreviousNext("Escuela_XUL/Agregar_eventos_y_comandos", "Escuela_XUL/Agregar_ventanas_y_dialogos") }}</p> + +<p>In order to master XUL, you'll need to have a fairly good understanding of its <a href="/en/XUL_Tutorial/The_Box_Model" title="en/XUL Tutorial/The Box Model">Box Model</a>. This is the system that determines how all elements are laid out visually in a XUL document. It is important to know how it works in order to make interfaces that are easy to localize, skin and use in different types of operating systems, screen sizes and resolutions.</p> + +<p>The XUL box model is a significant improvement over the HTML layout model, which is mostly vertical. With XUL you can define vertically oriented as well as horizontally oriented interfaces, providing greater flexibility in interface design.</p> + +<p>Any XUL interface can be broken down into the following basic components:</p> + +<ul> + <li>Boxes</li> + <li>Text</li> + <li>Images</li> + <li>Alignment and flexibility</li> + <li>Widths and heights</li> + <li>Margins and paddings</li> +</ul> + +<p>Menus, toolbar buttons, and even the most complex elements in XUL are composed of these simple ingredients. Complex elements are created from simpler ones through XBL, which will be covered later on. Once you grasp this simple idea, you'll be able to use the DOM Inspector and CSS to mold XUL elements and layouts with great precision and flexibility.</p> + +<p>Most of the examples shown in the rest of this section were generated using the <a href="/samples/xultu/examples/aligner.xul" title="samples/xultu/examples/aligner.xul">XUL Box Alignment Example</a>. We recommend you play around with it for a while to get an idea of how the basic parts of the box model work.</p> + +<h2 id="Boxes">Boxes</h2> + +<p>A XUL box is very similar to an HTML <em>div</em>. It's an invisible rectangular container with no styling at all (<em>divs</em> may have some default styling, though). Their behavior is similar. However, one of the fundamental differences between XUL and HTML is the fact that XUL boxes can be vertically oriented (like <em>divs</em>) or horizontally oriented (unlike <em>divs</em>).</p> + +<p>There are 3 basic box elements in XUL: <a href="/en/XUL/hbox" title="en/XUL/hbox">hbox</a>, <a href="/en/XUL/vbox" title="en/XUL/vbox">vbox</a> and <a href="/en/XUL/box" title="en/XUL/box">box</a>. An <em>hbox</em> is oriented horizontally by default, meaning that its child nodes are displayed next to each other from left to right. A <em>vbox</em> is oriented vertically by default, its child nodes displayed one below the other from top to bottom. A <em>box</em> is a generic version that you can orient as you please, but its default is horizontal orientation, so it's pretty much equivalent to an <em>hbox</em> and it is seldom used.</p> + +<p>Here's a very simple example of an <em>hbox</em> with 3 child buttons:</p> + +<pre><hbox> + <button label="Cat" /> + <button label="Parrot" /> + <button label="Porcupine" /> +</hbox> +</pre> + +<p>This is how it looks on Mac OS (the black border was added for illustrative purposes, boxes don't have borders by default):</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4199/=box1.png" style="height: 64px; width: 303px;"></p> + +<p>If you use a <em>vbox</em> instead, it looks like this:</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4200/=box2.png" style="height: 132px; width: 121px;"></p> + +<p>The orientation of boxes (and most XUL elements) can be controlled using the <a href="/en/XUL/Attribute/orient" title="en/XUL/Attribute/orient">orient</a> attribute or the <a href="/en/CSS/box-orient" title="en/CSS/-moz-box-orient">-moz-box-orient</a> CSS property. With these you can make an <em>hbox</em> have vertical orientation and viceversa, although that isn't very useful. The CSS property may be useful on some occasions, but using the orient attribute is not recommended because it mixes content and presentation.</p> + +<h2 id="Flexibility"> Flexibility</h2> + +<p>An HTML <em>div</em> is as big as its contents unless you override its dimensions using CSS. This is similarly the case for XUL, except there are two flexibility directions to consider. An <em>hbox</em> is as big as its contents horizontally, but it will occupy all the available space vertically. You can make an <em>hbox</em> flexible horizontally with the CSS property <a href="/en/CSS/box-flex" title="en/CSS/-moz-box-flex">-moz-box-flex</a> or the <a href="/en/XUL/Attribute/flex" title="en/XUL/Attribute/flex">flex</a> attribute. The same applies to a <em>vbox</em>, but in the other direction.</p> + +<p>Unlike most style attributes, the <em>flex</em> attribute is considered acceptable to use in XUL code. This is because this attribute is used much too often, and it would require a great deal of CSS code to avoid using it. At any rate, it can always be overriden using CSS, so your extension won't lose skinability because of it.</p> + +<p>Flexibility is defined as a numeric value. The default value for most elements is 0, which means that the element will not stretch in the direction of its orientation, and its size in that dimension will be determined by its contents and padding. If you want an element to be flexible, you should set its flexibility to 1. This makes the element stretch to occupy as much available space there is in the direction of its orientation. If we add flexibility to the hbox in our first example, we get the following result:</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4201/=hboxflex.png" style="height: 64px; width: 585px;"></p> + +<p>The box flexes to cover the available horizontal space. The buttons maintain their size.</p> + +<p>If we also add flexibility to the "Cat" button, this is what we get:</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4202/=catflex.png" style="height: 64px; width: 585px;"></p> + +<p>Now the flexible button is taking the available inner space, moving the other two buttons all the way to the end of the box.</p> + +<p>What would happen if we also add flexibility to the "Parrot" button?</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4203/=catparrotflex.png" style="height: 64px; width: 585px;"></p> + +<p>Since both buttons have a flexibility of 1, the available space is distributed evenly among the two. Note that this is not always the case. If one of the buttons has a very long label that restricts its minimum size, then it could be the label determining its size, while the other button would flex taking the rest of the room.</p> + +<p>Now, if you want a different size distribution in flexible elements, you can use flexibility values higher than 1.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4204/=morecatflex.png" style="height: 64px; width: 585px;"></p> + +<p>In this case, the "Cat" button has a <em>flex</em> value of 3, while the "Parrot" button still has a <em>flex</em> value of 1. The "Cat" button is now larger in a 3 to 1 proportion. Note that, again, this can depend on the contents of the elements, in this case, the labels and paddings in the buttons. If the label of the "Parrot" button was something much longer, the size ratio would not be kept.</p> + +<p>You can have even more control over the size of flexible elements using the <a href="/en/XUL/Attribute/minwidth" title="en/XUL/Attribute/minwidth">minwidth</a>, <a href="/en/XUL/Attribute/maxwidth" title="en/XUL/Attribute/maxwidth">maxwidth</a>, <a href="/en/XUL/Attribute/minheight" title="en/XUL/Attribute/minHeight">minheight</a> and <a href="/en/XUL/Attribute/maxheight" title="en/XUL/Attribute/maxheight">maxheight</a> attributes, or their CSS counterparts: <a href="/en/CSS/min-width" title="en/CSS/min-width">min-width</a>, <a href="/en/CSS/max-width" title="en/CSS/max-width">max-width</a>, <a href="/en/CSS/min-height" title="en/CSS/min-height">min-height</a> and <a href="/en/CSS/max-height" title="en/CSS/max-height">max-height</a>. The latter are recommended to keep style code in the skin section of the chrome. As their names should make clear, you can control the flexibility boundaries of elements, thus preventing them from growing or shrinking too much.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">All CSS properties involving lengths should be handled with caution. We recommended that you use proportional units (em, %) instead of absolute units (px) whenever possible. Using the former allows the UI to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations. A common exception to this rule is when your CSS is directly related to images, where you'll usually handle measurements in pixels (px).</div> +</div> +</div> + +<p>Also, just like in HTML, you can control the dimensions of inflexible elements using the <a href="/en/CSS/width" title="en/CSS/width">width</a> and <a href="/en/CSS/height" title="en/CSS/height">height</a> CSS properties and attributes. These attributes won't have any effect on flexible elements.</p> + +<h3 id="Margins_paddings_and_spacers">Margins, paddings and spacers</h3> + +<p>Margins and paddings are frequently used in both HTML and XUL to define spacing between elements and inside of elements. The <a href="/en/CSS/margin" title="en/CSS/margin">margin</a> determines the space between an element and the elements surrounding it, while the <a href="/en/CSS/padding" title="en/CSS/padding">padding</a> determines the space between the borders of a container element and its child nodes, kind of like an inner margin.</p> + +<p>Sometimes you also need to define flexible spaces between elements. In this case you should use a <a href="/en/XUL/spacer" title="en/XUL/spacer">spacer</a> element with a <em>flex</em> value. A <em>spacer</em> element is completely invisible and doesn't do more than take space. You should only use it when you need flexible space. If you need fix-sized space it's best to use margins and paddings and avoid adding unnecessary nodes to your XUL document.</p> + +<h2 id="Alignment">Alignment</h2> + +<p>XUL, unlike HTML, provides an easy way to align elements both horizontally and vertically. You can either use the <a href="/en/XUL/Attribute/align" title="en/XUL/Attribute/align">align</a> and <a href="/en/XUL/Attribute/pack" title="en/XUL/Attribute/pack">pack</a> attributes, or the <a href="/en/CSS/box-align" title="en/CSS/-moz-box-align">-moz-box-align</a> and <a href="/en/CSS/box-pack" title="en/CSS/-moz-box-pack">-moz-box-pack</a> CSS properties. Packing determines the positioning of the child elements in the direction of the container's orientation. Alignment determines the positioning in the other direction. So, in a flexed <em>hbox</em>, having <em>center</em> alignment and <em>end</em> packing results in this:</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4205/=alignment.png" style="height: 204px; width: 427px;"></p> + +<p>One important thing to notice is that aligment and flexibility can't be mixed in some cases. If you add flexibility to one of the buttons, the packing will no longer be useful, but the alignment still makes a difference. It also wouldn't make sense to use flexibility or packing in the <em>hbox</em> if it didn't have any available horizontal space; the container element needs to either be flexible itself, or have a fixed width larger than its contents.</p> + +<h2 id="Text">Text</h2> + +<p>There are 2 XUL elements that are typically used for displaying text: <a href="/en/XUL/label" title="en/XUL/label">label</a> and <a href="/en/XUL/description" title="en/XUL/description">description</a>. Their behavior is nearly identical, but they are meant to be used in different situations.</p> + +<p>The <em>label</em> element should be used mainly for text in XUL forms, such as the ones you see in the Firefox Options / Preferences window. Here's a typical usage of the <em>label</em> element:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><label control=<span class="code-quote">"xulschoolhello-greeting-textbox"</span> + value=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.typeGreeting.label;"</span> /> +<textbox id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-greeting-textbox"</span> /></pre> +</div> +</div> + +<p>The label says something like "Type a greeting message", and the textbox next to it allows the user to type the message. The <a href="/en/XUL/Attribute/control" title="en/XUL/Attribute/control">control</a> attribute links the label to the textbox. If the user clicks on the label, the textbox will be focused. Also, if the user has a screen reader, the label will be read when the focus is placed on the textbox.</p> + +<p>The <em>description</em> element is used for the rest of the cases, where the text is only meant as additional information and is not related to input elements.</p> + +<p>Handling text in XUL may seem simple, but it's actually quite a tricky subject. You always have to keep in mind that localized strings may be significantly longer in other languages, specially much longer than English strings. You should avoid using long blocks text, and also avoid designing your UI so that everything fits just right around text. You should always keep in mind that the text can be much longer, and your UI should adapt to it.</p> + +<p>Labels should generally be short, and they should always be displayed in a single line. Descriptions may be longer, and in general you should plan it so that they can wrap into multiple lines. In order to have wrapping descriptions, you need to set the text as a child node instead of using the <em>value</em> attribute:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><description>&<span class="code-quote">xulschoolhello</span>.description.label;</description></pre> +</div> +</div> + +<p>Even then, the text will extend as much as it can in a single line, so you need to add some CSS limits in order to make it wrap inside a XUL dialog or window. You can use the CSS property <em>width</em> to restrict the width of the <em>description</em> so that it wraps as you need it to.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">Never cut text lines into separate locale strings in order to bypass wrapping difficulties. This makes localization much harder, or even impossible in some cases.</div> +</div> +</div> + +<p>There are other more complicated text wrapping cases where a <em>description</em> won't be good enough. For instance, <a href="/en/XUL_Tutorial/Templates" title="en/XUL Tutorial/Templates">templates</a> don't allow you to set the internal text in a <em>description</em> element in a way that it wraps properly. One way to work around this is using a <a href="/en/XUL/textbox" title="en/XUL/textbox">textbox</a> element instead. <a class="external" href="http://xulsolutions.blogspot.com/2006/07/how-to-handle-text-and-keep-your.html">This blog post</a> is a good guide on the subject, and you should keep it in mind if you need to do some advanced text handling.</p> + +<p>Another way to handle excessive text length is to use the <a href="/en/XUL/Attribute/crop" title="en/XUL/Attribute/crop">crop</a> attribute. If the line of text is longer than its container will allow, the text will be cut, showing "..." in the place where it was cut. You can choose where to cut the text, but cropping at the end is the most common practice. Similarly as with wrapping, cropping will only occur is there is no room for the text to grow, so you'll need to restrict the width using CSS.</p> + +<h3 id="Text_links">Text links</h3> + +<p>XUL makes it very easy for you to create a <em>label</em> that is also a link. All you need is to set the <a href="/en/XUL/Style/text-link" title="en/XUL/Style/text-link">text-link</a> class to the label, and add an <em>onclick</em> handler (<em>oncommand</em> won't work for this). The label is displayed with the expected link style so that users can easily recognize it as a link.</p> + +<p>A trickier case is when you need only part of a label to be clickable, just like in HTML. Since labels can't handle rich text, workarounds have to implemented using Javascript. One possibility is to use special markup in a locale property so that the link can be easily recognized:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><span class="code-quote">xulschoolhello</span>.linkedText.label = Go to <a>our site</a> <span class="code-keyword">for</span> more information</pre> +</div> +</div> + +<p>The syntax is similar to HTML because it's easier to read this way, but string bundles won't do anything special with it. You'll have to break the string using <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/Core JavaScript 1.5 Reference/Global Objects/RegExp">regular expressions</a> and generate 3 different labels, one with the <em>text-link</em> class. You'll also need to do some CSS work on the labels so that the inner spacing in the text looks right.</p> + +<p>Another option is to take it up a notch and really use HTML.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><span class="code-quote">xulschoolhello</span>.linkedText.label = Go to <html:a onclick=<span class="code-quote">"%S"</span>>our site</html:a> <span class="code-keyword">for</span> more information</pre> +</div> +</div> + +<p>To include HTML in a XUL document, you need to add the namespace for it in the document root:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><overlay id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-browser-overlay"</span> + xmlns=<span class="code-quote">"http:<span class="code-comment">//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"</span> + xmlns:html=<span class="code-quote">"http://www.w3.org/1999/xhtml"</span>></span></pre> +</div> +</div> + +<p>Then you can have an <em>html:p</em> (paragraph) element where you insert the result of parsing the property string. You can easily parse XML using the <a href="/en/DOM/DOMParser" title="en/DOMParser">DOMParser</a> object.</p> + +<div class="note">Since XUL documents are strict XML, you can only use strict XHTML in XUL, and not the more loosely-formatted forms of HTML.</div> + +<h2 id="Exercise">Exercise</h2> + +<p>Use the DOM Inspector extension to look into the Firefox chrome. Select toolbar buttons, menu items, textboxes, etc. and look into the Box Model, CSS Style Rules and Computed Style views. Look into the computed width and height values, and how the paddings and margins affect the dimensions of XUL nodes.</p> + +<p>Modify the Hello World extension so that it changes the appearance of Firefox drastically using only CSS. Play with changing the dimensions and appearance of buttons, changing the background color of the toolbars and status bars, font styles, sizes, etc. Note that this is not really what you would expect from an extension, it's more like a theme. However, it's very interesting and useful to see how you can manipulate the appearance of Firefox so easily.</p> + +<p>If you're not familiar with CSS, you should read this <a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started Guide</a> and other online resources before continuing with this tutorial.</p> + +<p>{{ PreviousNext("Escuela_XUL/Agregar_eventos_y_comandos", "Escuela_XUL/Agregar_ventanas_y_dialogos") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/emisores_y_receptores/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/emisores_y_receptores/index.html new file mode 100644 index 0000000000..dc19a9e359 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/emisores_y_receptores/index.html @@ -0,0 +1,118 @@ +--- +title: Emisores y receptores +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Emisores_y_receptores +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Broadcasters_and_Observers +--- +<p>There may be times when you want several elements to respond to events or changes of state easily. To do this, we can use broadcasters.</p> + +<h3 id="Command_Attribute_Forwarding" name="Command_Attribute_Forwarding">Command Attribute Forwarding</h3> + +<p>We've already seen that elements such as buttons can be hooked up to commands. In addition, if you place the <code><a href="es/XUL/Atributos#disabled">desactivado</a></code> attribute on the <code><a href="es/XUL/Elementos#command">comando</a></code> element, any elements hooked up to it will also become disabled automatically. This is useful way to simplify the amount of code you need to write. The technique also works for other attributes as well. For instance, if you place a <code><a href="es/XUL/Atributos#label">label</a></code> attribute on a <code><a href="es/XUL/Elementos#command">comando</a></code> element, any buttons attached to the command will share the same label.</p> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_1.xul">Ver en funcionamiento</a></p> + +<pre><command id="mi_comando" label="Abrir"/> + +<button command="mi_comando"/> +<checkbox label="Abrir en una ventan nueva" command="mi_comando"/> +</pre> + +<p>In this example, the button does not have a <code><a href="es/XUL/Atributos#label">label</a></code> attribute, however it is attached to a command that does. The button will share the label with the command. The checkbox already has a label, however, it will be overridden by the command's label. The result is that both the button and the checkbox will have the same label 'Open'.</p> + +<p>If you were to modify the command's <code><a href="es/XUL/Atributos#label">label</a></code> attribute, the label on the button and checkbox will adjust accordingly. We saw something like this in a previous section where the <code><a href="es/XUL/Atributos#disabled">desactivado</a></code> attribute was adjusted once and propagated to other elements.</p> + +<p>This attribute forwarding is quite useful for a number of purposes. For instance, let's say that we want the Back action in a browser to be disabled. We would need to disable the Back command on the menu, the Back button on the toolbar, the keyboard shortcut (Alt+Left for example) and any Back commands on popup menus. Although we could write a script to do this, it is quite tedious. It also has the disadvantage that we would need to know all of the places where a Back action could be. If someone added a new Back button using an extension, it wouldn't be handled. It is convenient to simply disable the Back action and have all the elements that issue the Back action disable themselves. We can use the attribute forwarding of commands to accomplish this.</p> + +<h3 id="El_emisor" name="El_emisor">El emisor</h3> + +<p>There is a similar element called a <code><a href="es/XUL/Elementos#broadcaster">emisor</a></code>. Broadcasters support attribute forwarding in the same way that commands do. They work the same as commands except that a command is used for actions, while a broadcaster is instead used for holding state information. For example, a <code><a href="es/XUL/Elementos#command">comando</a></code> would be used for an action such as Back, Cut or Delete. A <code><a href="es/XUL/Elementos#broadcaster">emisor</a></code> would be used to hold, for instance, a flag to indicate whether the user was online or not. In the former case, menu items and toolbar buttons would need to be disabled when there was no page to go back to, or no text to cut or delete. In the latter case, various UI elements might need to update when the user switches from offline mode to online mode.</p> + +<p>The simplest broadcaster is shown below. You should always use an <code><a href="es/XUL/Atributos#id">id</a></code> attribute so that it can be referred to by other elements.</p> + +<pre><broadcasterset> + <broadcaster id="isOffline" label="Offline"/> +</broadcasterset> +</pre> + +<p>Any elements that are watching the broadcaster will be modified automatically whenever the broadcaster has its <code><a href="es/XUL/Atributos#label">label</a></code> attribute changed. This results in these elements having a new label. Like other non-displayed elements, the <code><a href="es/XUL/Elementos#broadcasterset">broadcasterset</a></code> element serves as a placeholder for broadcasters. You should declare all your broadcasters inside a <code><a href="es/XUL/Elementos#broadcasterset">broadcasterset</a></code> element so that they are all kept together.</p> + +<h3 id="Making_elements_observers" name="Making_elements_observers">Making elements observers</h3> + +<p>Elements that are watching the broadcaster are called observers because they observe the state of the broadcaster. To make an element an observer, add an <code><a href="es/XUL/Atributos#observes">observes</a></code> attribute to it. This is analogous to using the <code><a href="es/XUL/Atributos#command">comando</a></code> attribute when attaching an element to a <code><a href="es/XUL/Elementos#command">comando</a></code> element. For example, to make a button an observer of the broadcaster above:</p> + +<pre><button id="offline_button" observes="isOffline"/> +</pre> + +<p>The <code>observes</code> attribute has been placed on the button and its value has been set to the value of the <code>id</code> on the broadcaster to observe. Here the button will observe the broadcaster which has the id <code>isOffline</code>, which is the one defined earlier. If the value of the <code>label</code> attribute on the broadcaster changes, the observers will update the values of their <code><a href="es/XUL/Atributos#label">label</a></code> attributes also.</p> + +<p>We could continue with additional elements. As many elements as you want can observe a single broadcaster. You can also have only one if you wanted to but that would accomplish very little since the main reason for using broadcasters is to have attributes forwarded to multiple places. You should only use broadcasters when you need multiple elements that observe an attribute. Below, some additional observers are defined:</p> + +<pre><broadcaster id="offline_command" label="Offline" accesskey="f"/> + +<keyset> + <key id="goonline_key" observes="offline_command" modifiers="accel" key="O"/> +</keyset> +<menuitem id="offline_menuitem" observes="offline_command"/> +<toolbarbutton id="offline_toolbarbutton" observes="offline_command"/> +</pre> + +<p>In this example, both the <code><a href="es/XUL/Atributos#label">label</a></code> and the <code><a href="es/XUL/Atributos#accesskey">accesskey</a></code> will be forwarded from the broadcaster to the key, menu item and the toolbar button. The key won't use any of the received attributes for anything, but it will be disabled when the broadcaster is disabled.</p> + +<p>You can use a broadcaster to observe any attribute that you wish. The observers will grab all the values of any attributes from the broadcasters whenever they change. Whenever the value of any of the attributes on the broadcaster changes, the observers are all notified and they update their own attributes to match. Attributes of the observers that the broadcaster doesn't have itself are not modified. The only attributes that are not updated are the <code><a href="es/XUL/Atributos#id">id</a></code> and <code><a href="es/XUL/Atributos#persist">persist</a></code> attributes; these attributes are never shared. You can also use your own custom attributes if you wish.</p> + +<p>Broadcasters aren't used frequently as commands can generally handle most uses. One thing to point out is that there really is no difference between the <code><a href="es/XUL/Elementos#command">comando</a></code> element and the <code><a href="es/XUL/Elementos#broadcaster">emisor</a></code> element. They both do the same thing. The difference is more semantic. Use commands for actions and use broadcasters for state. In fact, any element can act as broadcaster, as long as you observe it using the <code><a href="es/XUL/Atributos#observes">observes</a></code> attribute.</p> + +<h3 id="El_observador" name="El_observador">El observador</h3> + +<p>There is also a way to be more specific about which attribute of the broadcaster to observe. This involves an <code><a href="es/XUL/Elementos#observes">observes</a></code> element. Like its attribute counterpart, it allows you to define an element to be an observer. The <code><a href="es/XUL/Elementos#observes">observes</a></code> element should be placed as a child of the element that is to be the observer. An example is shown below:</p> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_2.xul">Ver en funcionamiento</a></p> + +<pre><broadcasterset> + <broadcaster id="isOffline" label="Offline" accesskey="f"/> +</broadcasterset> + +<button id="offline_button"> + <observes element="isOffline" attribute="label"/> +</button> +</pre> + +<p>Two attributes have been added to the <code><a href="es/XUL/Elementos#observes">observes</a></code> element. The first, <code><a href="es/XUL/Atributos#element">elemento</a></code>, specifies the id of the broadcaster to observe. The second, <code><a href="es/XUL/Atributos#attribute">atributo</a></code>, specifies the attribute to observe. The result here is that the button will receive its label from the broadcaster, and when the label is changed, the label on the button is changed. The <code><a href="es/XUL/Elementos#observes">observes</a></code> element does not change but instead the element it is inside changes, which in this case is a <code><a href="es/XUL/Elementos#button">botón</a></code>. Notice that the <code><a href="es/XUL/Atributos#accesskey">accesskey</a></code> is not forwarded to the button, since it is not being obseved. If you wanted it to be, another <code><a href="es/XUL/Elementos#observes">observes</a></code> element would need to be added. If you don't use any <code><a href="es/XUL/Elementos#observes">observes</a></code> elements, and instead use the <code><a href="es/XUL/Atributos#observes">observes</a></code> attribute directly on the button, all attributes will be observed.</p> + +<h4 id="El_evento_emisor" name="El_evento_emisor">El evento emisor</h4> + +<p>There is an additional event handler that we can place on the <code><a href="es/XUL/Elementos#observes">observes</a></code> element which is <code>onbroadcast</code>. The event is called whenever the observer notices a change to the attributes of the broadcaster that it is watching. An example is shown below.</p> + +<p><strong>Example 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_3.xul">Ver en funcionamiento</a></p> + +<pre><broadcasterset> + <broadcaster id="colorChanger" style="color: black"/> +</broadcasterset> + +<button label="Test"> + <observes element="colorChanger" attribute="style" onbroadcast="alert('Color changed');"/> +</button> + +<button label="Observer" + oncommand="document.getElementById('colorChanger').setAttribute('style','color: red');" +/> +</pre> + +<p>Two buttons have been created, one labeled Test and the other labeled Observer. If you click on the Test button, nothing special happens. However, if you click on the Observer button, two things happen. First, the button changes to have red text and, second, an alert box appears with the message 'Color changed'.</p> + +<p>What happens is the <code><a href="es/XUL/Atributos#oncommand">oncommand</a></code> handler on the second button is called when the user presses on it. The script here gets a reference to the broadcaster and changes the style of it to have a <code>color</code> that is red. The broadcaster is not affected by the style change because it doesn't display on the screen. However, the first button has an observer which notices the change in style. The <code><a href="es/XUL/Atributos#element">elemento</a></code> and the <code><a href="es/XUL/Atributos#attribute">atributo</a></code> on the <code><a href="es/XUL/Elementos#observes">observes</a></code> tag detect the style change. The style is applied to the first button automatically.</p> + +<p>Next, because the broadcast occured, the event handler <code>onbroadcast</code> is called. This results in an alert message appearing. Note that the broadcast only occurs if the attributes on the <code><a href="es/XUL/Elementos#broadcaster">emisor</a></code> element are changed. Changing the style of the buttons directly will not cause the broadcast to occur so the alert box will not appear.</p> + +<p>If you tried duplicating the code for the first <code><a href="es/XUL/Elementos#button">botón</a></code> several times, you would end up with a series of alert boxes appearing, one for each button. This is because each button is an observer and will be notified when the style changes.</p> + +<p>Seguimos con el uso del <a href="es/Tutorial_de_XUL/Modelo_de_objeto_de_documento">DOM</a> con elementos XUL.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Actualizar_comandos" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Modelo_de_objeto_de_documento">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/estructura_xul/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/estructura_xul/index.html new file mode 100644 index 0000000000..0859e26e37 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/estructura_xul/index.html @@ -0,0 +1,159 @@ +--- +title: Estructura XUL +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Estructura_XUL +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure +--- +<p>{{ PreviousNext("Tutorial de XUL:Introducción", "Tutorial de XUL:La URL chrome") }}</p> + +<p> </p> + +<p>Comenzaremos viendo cómo se procesa XUL por parte de Mozilla.</p> + +<h3 id="C.C3.B3mo_se_procesa_XUL" name="C.C3.B3mo_se_procesa_XUL">Cómo se procesa XUL</h3> + +<p>En Mozilla, XUL se procesa en forma similar al procesamiento de <a href="es/HTML">HTML</a> y otros tipos de contenido. Cuando el usuario escribe la URL de una página HTML en el campo de dirección del navegador, éste busca el sitio web y descarga su contenido. El motor de presentación de Mozilla toma el contenido en el formato HTML y lo transforma en un árbol de documento. Este árbol se convierte en un conjunto de objetos que pueden mostrarse en la pantalla. Los estilos <a href="es/CSS">CSS</a>, imágenes y otras tecnologías son usados para controlar la presentación. El procesamiento de XUL es muy similar.</p> + +<p>De hecho, en Mozilla, todos los tipos de documento, sin importar si son HTML, XUL o aún <a href="es/SVG">SVG</a> son procesados por el mismo código. Esto significa que las mismas propiedades CSS pueden usarse para definir el estilo tanto del HTML como de XUL, y muchas de las características pueden compartirse entre ambos. Sin embargo, hay características que son específicas del HTML como son los formularios, y otras que son específicas de XUL como son los <strong>overlays</strong> (revestimientos). Ya que XUL y HTML se procesan de la misma forma, se pueden cargar desde el sistema de archivos local del usuario, desde una página web, desde una extensión del navegador o desde una aplicación <a href="es/XULRunner">XULRunner</a>.</p> + +<p>El contenido de fuentes remotas, como por ejemplo: <span class="nowiki">http://localhost/~username/</span>, sin importar si es HTML, XUL o cualquier otro tipo de documento, está limitado en la clase de operaciones que pueden realizar, por razones de seguridad. Por este motivo, Mozilla proporciona un método para instalar contenido en forma local y registrar los archivos instalados para que formen parte del sistema chrome. Esto permite usar una URL especial llamada la URL <code><a class="external" rel="freelink">chrome://</a></code>. Al acceder a un archivo usando la URL chrome, éstos reciben privilegios para acceder a archivos locales, preferencias, marcadores de página y ejecutar otras operaciones privilegiadas. Obviamente, las páginas web no obtienen estos privilegios, a menos que estén firmadas con un certificado digital y el usuario dé el permiso para ejecutar estas operaciones.</p> + +<p>Este registro en el paquete chrome es la forma en la que las extensiones de Firefox pueden añadir características al navegador. Las extensiones son pequeños paquetes con archivos XUL, Javascript, hojas de estilo e imágenes empaquetados en un sólo archivo. Este archivo puede crearse usando una utilidad ZIP. Cuando el usuario descarga la extensión, ésta es instalada en su máquina. La extensión se ensambla en el navegador usando una característica especial de XUL llamada overlay (revestimiento), la cual permite que se combinen el XUL de la extensión y el XUL del navegador. Para el usuario, puede parecer que la extensión ha modificado al navegador, pero en realidad el código está separado y la extensión se puede desinstalar fácilmente.</p> + +<p>Por supuesto, no es necesario que los paquetes registrados usen revestimientos. Si no los usan, no se puede acceder a ellos desde la interfaz del navegador, pero sí por medio de la URL chrome, si se sabe cuál es.</p> + +<p>Las aplicaciones XUL autónomas (que no necesitan el navegador) pueden incluir código XUL de la misma forma, pero este código se incluirá como parte de la instalación, en lugar de tener que instalarse de forma separada como una extensión. Sin embargo, este código XUL debe ser registrado en el sistema chrome de tal forma que las aplicaciones puedan mostrar la UI.</p> + +<p>Vale la pena anotar que el navegador Mozilla realmente es un conjunto de paquetes que contienen archivos XUL, JavaScript y hojas de estilo. Estos paquetes son accesibles usando una URL chrome, tienen privilegios ampliados y trabajan como cualquier otro paquete. Por supuesto, el navegador es más grande y más sofisticado que la mayoría de las extensiones. Firefox, Thunderbird y muchos otros componentes también están escritos en XUL y se puede acceder a ellos usando la URL chrome. Se puede examinar estos paquetes mirando el directorio chrome donde Firefox o cualquier otra aplicación XUL esté instalada.</p> + +<p>La URL chrome siempre comienza por '<a class="external" rel="freelink">chrome://</a>'. De la misma forma que la URL <code><span class="nowiki">'http://'</span></code> se refiere a sitios web remotos accesibles por medio de HTTP y la URL <code>'<a class="external" rel="freelink">file://</a>'</code> siempre se refiere a archivos locales, la URL <code>'<a class="external" rel="freelink">chrome://</a>'</code> se refiere a los paquetes y extensiones instalados. En la próxima sección veremos con detalles la sintaxis de la URL chrome. Es importante anotar que si se accede a un contenido a través de una URL chrome, éste gana los privilegios ampliados que se han mencionado anteriormente y que otras clases de URL no tienen. Por ejemplo, una URL HTTP no tiene ningún privilegio especial, y ocurrirá un error si la página web intenta leer un archivo local. Sin embargo, un archivo cargado por medio de una URL chrome podrá leer archivos sin restricciones.</p> + +<p>Esta diferenciación es importante. Significa que hay ciertas cosas que el contenido de las páginas web no puede hacer, tales como leer los marcadores de página del usuario. Esta diferenciación no está basada en la clase de contenido a ser mostrado, sólo en el tipo de URL empleada. Tanto el HTML como el XUL colocados en un sitio web no tienen permisos adicionales, sin embargo si el HTML o el XUL son cargados por medio de una URL chrome tendrán permisos ampliados.</p> + +<p>Si Ud. va a usar XUL en un sitio web, debe colocar el archivo XUL en el sitio web tal como lo haría con un archivo HTML, y luego cargar su URL en el navegador (<span class="nowiki">http://localhost/xul.php</span>). Debe asegurarse que el servidor web esté configurado para enviar los archivos XUL con el tipo de contenido de <strong>application/vnd.mozilla.xul+xml</strong> (con PHP sería: <code>header('content-type: application/vnd.mozilla.xul+xml');</code>). Este tipo de contenido permite a Mozilla diferenciar entre HTML y XUL. Mozilla no usa la extensión del archivo, a menos que esté leyendo archivos del disco local, pero se debería usar la extensión .xul para todos los archivos XUL. Es posible abrir archivos XUL desde el navegador o el gestor de archivos.</p> + +<div class="note">Recuerde que los archivos XUL remotos tienen restricciones significativas sobre lo que pueden hacer.</div> + +<h4 id="Tipos_de_documentos_HTML_XML_XUL_CSS" name="Tipos_de_documentos:_HTML_XML_XUL_CSS">Tipos de documentos: HTML XML XUL CSS</h4> + +<p>Mozilla emplea una clase totalmente diferente de objeto de documento (<a href="es/DOM">DOM</a>) para el HTML y el XUL, aunque compartan mucha funcionalidad. En Mozilla existen tres tipos principales de documentos: HTML, XML y XUL. Naturalmente, el documento HTML se usa para los documentos HTML, el documento XUL se utiliza en los documentos XUL y el documento XML se emplea para otros tipos de documentos XML. Ya que el formato XUL también es XML, el documento XUL es una subclase del documento XML que es más genérico. Existen diferencias sutiles de funcionalidad. Por ejemplo, mientras los controles de un formulario en HTML es accesible por medio de la propiedad <code>document.forms</code>, en los documentos XUL no está disponible ya que XUL no tiene formularios en el mismo sentido que HTML. De otro lado, características específicas de XUL como los revestimientos y las plantillas sólo están disponibles en los documentos XUL.</p> + +<p>La distinción entre documentos es importante. Es posible usar muchas características de XUL en documentos HTML o XML ya que no son específicas al tipo de documento, sin embargo, otras características requieren un tipo de documento específico. Por ejemplo, se pueden usar los tipos de disposición de XUL en otros documentos ya que no dependen del tipo de documento XUL para funcionar.</p> + +<p>Para resumir los puntos expuestos anteriormente:</p> + +<ul> + <li>Mozilla muestra el <a href="es/HTML">HTML</a> y el <a href="es/XUL">XUL</a> con el mismo motor de resultado y emplea <a href="es/CSS">CSS</a> para especificar su presentación.</li> + <li>XUL puede cargarse desde un sitio remoto, desde el sistema de archivos local o ser instalado como un paquete y ser accesible con una URL chrome. Esto es lo que hacen las extensiones del navegador.</li> + <li>Las URL chrome sirven para acceder a los paquetes instalados y abrirlos con privilegios ampliados.</li> + <li>HTML, XML y XUL cada uno representa un diferente tipo de documento. Algunas características se pueden usar en cualquier tipo de documento, mientras que otras son específicas de un tipo de documento.</li> +</ul> + +<p>En las próximas secciones describiremos la estructura básica de un paquete chrome que será instalado dentro de Mozilla. Sin embargo, si desea comenzar a construir una aplicación simple, puede saltar a <a href="es/Tutorial_de_XUL/Creando_una_ventana">creando una ventana</a> y volver más tarde.</p> + +<h3 id="Organizaci.C3.B3n_del_paquete" name="Organizaci.C3.B3n_del_paquete">Organización del paquete</h3> + +<p>Mozilla está organizado de tal forma que te permite tener tantos componentes pre-instalados como quieras. Cada extensión es, además, un componente con un chrome URL distinto. Además tendrá un componente para cada tema o configuración regional instalado. Cada uno de estos componentes o paquetes, está compuesto de un conjunto de ficheros que describen la interfaz de usuario para cada uno. Por ejemplo, el componente de mensajería tendrá descripciones de la ventana de listado de mensajes de correo, la ventana de composición y los cuadros de la libreta de direcciones.</p> + +<p>Los paquetes que vienen con Mozilla están localizados en la carpeta chrome, que puedes encontrar en el directorio donde instalaste Mozilla. La carpeta chrome es donde encontrarás todos estos archivos que describen la interfaz de usuario para el navegador Mozilla, el cliente de correo y para otras aplicaciones. Habitualmente pondrás todos los archivos XUL para una aplicación en esta carpeta, excepto para las extensiones, que serán instaladas en la carpeta de extensiones de un usuario concreto. El simple hecho de copiar un archivo XUL a la carpeta 'chrome' no proporcionará al archivo ningún permiso extra ni será accesible a través de chrome URL. Para conseguir estos privilegios extras, tendrás que crear un archivo manifest y ponerlo en la carpeta chrome. Este archivo es fácil de crear, y habitualmente sólo contiene un par de líneas de código. Se usa para enlazar un chrome URL a un archivo o ruta de una carpeta del disco donde están los archivos XUL. Detalles de cómo crear este archivo serán vistos <a href="es/Tutorial_de_XUL/Archivos_Manifest">en la siguiente sección</a>.</p> + +<p>La única forma de acceder a contenido a través de una URL chrome es crear un paquete como se describe en las siguientes secciones. Esta carpeta se denomina 'chrome' porque parece ser un nombre conveniente para el directorio donde se mantienen los paquetes chrome que se incluyen con Mozilla.</p> + +<p>Para agrandar la confusión, hay otros dos sitios donde la palabra chrome puede aparecer. El primero es el argumento <code>'-chrome'</code>, y el segundo el modificador <code>chrome</code> para la función <code><a href="es/DOM/window.open">window.open()</a></code>. La llamada de estas características no otorga privilegio alguno. Son usadas para abrir una nueva ventana arriba del todo sin el menú o la barra de herramientas del navegador. Habitualmente se usará esta característica en aplicaciones XUL donde no se quiera que aparezca las diferentes barras del navegador alrededor de los cuadros de diálogo.</p> + +<p>Los archivos para un paquete son normalmente unidos en un simple archivo JAR. Un archivo JAR debe ser creado y examinado usando una aplicación ZIP. Por ejemplo, puedes abrir un archivo JAR en la carpeta chrome de Mozilla para ver la estructura básica de un paquete. Aunque es normal unir los archivos en un archivo JAR, los paquetes pueden ser accesibles de forma expandida en un directorio. No es habitual distribuir un paquete de esta forma, pero es práctico durante su desarrollo, ya que puedes editar el archivo directamente para después recargarlo sin tener que volver a empaquetar o reinstalar los archivos.</p> + +<p>Por defecto, las aplicaciones Mozilla analizan los archivos XUL y los scripts, y guardan una versión pre-compilada en la memoria para mejorar el resto de la sesión. Esto mejora la ejecución. Sin embargo, por culpa de esto, el archivo XUL no será recargado aún cuando el archivo fuente haya cambiado. Para desactivar este mecanismo, es necesario cambiar las preferencia <code>nglayout.debug.disable_xul_cache</code>. En Firefox, ésta preferencia se puede añadir a las preferencias del usuario poniendo "about:config" en la barra de dirección y cambiar ese valor por verdadero (<code>true</code>). O manualmente editando el archivo de preferencias user.js y añadiéndole la siguiente línea:</p> + +<pre class="eval">pref("nglayout.debug.disable_xul_cache", true); +</pre> + +<p><br> + Habitualmente hay tres partes distintas en un paquete chrome, aunque son opcionales. Cada parte está almacenada en una carpeta distinta. Estas tres partes son el contenido, la piel (skin) y la configuración regional, explicados más abajo. Un paquete particular debe proporcionar una o más pieles (skins) y locales, pero un usuario puede reemplazarlos con los suyos propios. Además, el paquete debe incluir varias aplicaciones distintas cada una accesible a través de diferentes chrome URLs. El sistema de paquetes es suficientemente flexible por lo que puedes incluir todas las partes que necesites y permitir que otras partes, como el texto para diferentes idiomas, sean descargadas de forma separada.</p> + +<p>Los tres tipos de paquetes chrome son:</p> + +<ul> + <li><strong>Contenido</strong> - ventanas y scripts.<br> + Las declaraciones de las ventanas y los elementos de la interfaz de usuario contenidos con ellos. Se almacenan en archivos XUL, que tienen extension <code>.xul</code>. Un paquete de contenido puede tener múltiples archivos XUL, pero la ventana principal debe tener el mismo nombre de archivo que el nombre del paquete. Por ejemplo, el paquete 'editor' tendrá un archivo que se llamará <code>editor.xul</code>. Los scripts están situados en archivos separados junto a los archivos XUL.</li> + <li><strong>Aspecto (skin)</strong> - Hojas de estilo, imágenes y otros archivos específicos al tema.<br> + Las hojas de estilo describen detalles de la apariencia de una ventana. Se almacenan de forma separada a los archivos XUL para facilitar modificar el aspecto (skin o tema) de una aplicación. Algunas imágenes usadas también se almacenan aquí.</li> + <li><strong>Configuración regional</strong> - Archivos locales específicos.<br> + Todo el texto que se muestra en una ventana se almacena de forma separada. De esta forma, un usuario puede tener un conjunto para su propio idioma.</li> +</ul> + +<h3 id="Paquetes_de_contenido" name="Paquetes_de_contenido">Paquetes de contenido</h3> + +<p>El nombre de un archivo JAR debe describir lo que contiene, pero no se puede asegurar el contenido si no se mira a dentro. Vamos a usar el paquete del navegador incluido con Firefox como ejemplo. Si extraemos los archivos de <code>browser.jar</code>, nos encontraremos con una jerarquía de directorios similar a la que se muestra a continuación:</p> + +<pre>content + browser + browser.xul + browser.js + -- otros ficheros XUL y JS van aquí -- + bookmarks + -- los archivos de marcadores, aquí -- + preferences + -- los archivos de preferencias, aquí -- +. +. +. +</pre> + +<p><span class="comment">el ejemplo original <pre> content browser browser.xul browser.js -- other browser XUL and JS files goes here -- bookmarks -- bookmarks files go here -- preferences -- preferences files go here -- . . . </pre></span></p> + +<p>Ésto es fácilmente reconocible como un paquete de contenido, ya que el directorio superior se llama <code>content</code>. Para aspectos(skins) esta carpeta normalmente será denominada skin y para configuración regional se le llamará locale. Este esquema de nombres no es necesario pero es una práctica habitual para hacer más claras las partes de un paquete. Algunos paquetes deben incluir una sección de contenidos, una piel (skin) y un locale. En este caso, encontraremos un sub-directorio para cada tipo. Por ejemplo, Chatzilla está distribuido de esta forma.</p> + +<p>La carpeta content/browser contiene un número de archivos con extensiones .xul y .js. Los archivos XUL son los que tienen la extensión .xul. Los archivos con extensiones .js son archivos JavaScript que contienen los scripts que se encargan de la funcionalidad de una ventana. Muchos archivos XUL tienen un archivo script asociado con ellos, y muchos deben tener más de uno.</p> + +<p>En el listado superior, dos archivos han sido vistos. De hecho hay otros, pero para simplificar no serán vistos. El archivo browser.xul es el archivo XUL que describe la ventana principal del navegador. La ventana principal para un paquete de contenido debe tener el mismo nombre que el paquete con una extensión .xul. En este caso, el nombre del paquete es "browser", por eso esperaremos encontrarnos con browser.xul. Algunos de los otros archivos XUL describen ventanas distintas. Por ejemplo, el archivo pageInfo.xul describe el cuadro de información de la página.</p> + +<p>Muchos paquetes incluirán un archivo contents.rdf que describe el paquete, su autor y el revestimiento que usa. Sin embargo, este archivo está obsoleto y ha sido reemplazado con un mecanismo más simple. Este nuevo método es el archivo manifest mencionado anteriormente, y encontraremos estos archivos con la extensión .manifest en el directorio chrome. Por ejemplo, browser.manifest describe el paquete del navegador.</p> + +<p>Varias subcarpetas, como son marcadores y preferencias (bookmarks y preferences), describen secciones adicionales del navegador. Están ubicadas en diferentes carpetas sólo para mantener los archivos más organizados.</p> + +<h3 id="Aspectos_.28skins.29_o_Temas" name="Aspectos_.28skins.29_o_Temas">Aspectos (skins) o Temas</h3> + +<p>Al código subyacente de Mozilla se le llama aspectos (skins), aunque a la interfaz de usuario se la llama temas, pero ambos se refieren a la misma cosa. El archivo classic.jar describe el tema por defecto que viene con Firefox. La estructura es similar a los paquetes de contenido. Por ejemplo, examinando classic.jar:</p> + +<pre>skin + classic + browser + -- browser skin files go here -- + global + contents.rdf + -- global skin files go here --. +. +. +</pre> + +<p>Nuevamente, esta estructura de carpetas no es necesaria y es usada por comodidad. Realmente puedes colocar todos los archivos en una carpeta arriba del todo y no usar subcarpetas. Sin embargo, para aplicaciones mayores, las subcarpetas son usadas para separar los diferentes componentes. En el ejemplo anterior, una carpeta es para los archivos del tema para el navegador y otra para los archivos del tema global. La carpeta global contiene archivos de la piel (skin) que son comunes a todos los paquetes. Estos archivos se aplicarán a todos los componentes y serán incluídos para tus aplicaciones autónomas. La parte global define el aspecto de todos los chismes comunes XUL, mientras que las otras carpetas contienen archivos que son específicos de estas aplicaciones. Firefox incluye tanto los archivos del tema global como los del navegador en un archivo, pero ambos pueden ser incluídos por separado.</p> + +<p>Una piel (skin) se compone de archivos CSS y de un número de imágenes usadas para definir el aspecto y la interfaz. El archivo browser.css es usado por browser.xul y contiene estilos que definen el aspecto de varias partes de la interfaz del navegador. Nuevamente, nótese como el archivo browser.css tiene el mismo nombre que el paquete. Cambiando los archivos CSS, puedes ajustar el aspecto de una ventana sin cambiar su función. De esta forma puedes crear un nuevo tema. La parte XUL continúa igual pero la parte de la piel (el skin) cambia independientemente.</p> + +<h3 id="Configuraci.C3.B3n_regional" name="Configuraci.C3.B3n_regional">Configuración regional</h3> + +<p>El archivo en-US.jar describe la información del idioma para cada componente, en este caso para US English. Como las pieles (skins), cada idioma contendrá archivos que especifican texto usado por el paquete pero para un idioma concreto. La estructura para la configuración regional es similar a las otras, por eso no será explicada aquí.</p> + +<p>El texto de idioma es almacenado en dos tipos de archivos: archivos DTD y archivos de propiedades. Los archivos DTD tienen una extensión .dtd y contienen declaraciones de identidad, una para cada cadena de texto usada en una ventana. Por ejemplo, el archivo browser.dtd contiene declaraciones de identidad para cada comando del menú. Además, los atajos de teclado para cada comando también están definidos, ya que pueden ser diferentes en cada idioma. Los archivos DTD son usados por los archivos XUL por eso, en general, tendrás uno por cada archivo XUL. La parte de configuración regional también contiene archivos de propiedades, que son similares, pero son usados por archivos script. El archivo browser.properties contiene algunas cadenas de idioma.</p> + +<p>Esta estructura nos permite traducir Mozilla o un componente a un idioma distinto sólo añadiendo una nueva configuración regional para ese idioma. No tienes que cambiar la parte de XUL. Además, otra persona puede proporcionar un paquete separado que aplica una piel (skin) o configuración regional a tu parte de contenido, proporcionando soporte de esta manera a un nuevo tema o idioma sin tener que modificar el paquete original.</p> + +<h3 id="Otros_paquetes" name="Otros_paquetes">Otros paquetes</h3> + +<p>Hay un paquete especial llamado toolkit (o global). Vimos anteriormente el directorio global para skins (pieles). El archivo toolkit.jar contiene el contenido correspondiente para ello. Contiene algunos diálogos globales y definiciones. Además, define la apariencia por defecto y la funcionalidad de varios chismes XUL comunes como son los cuadros de texto y los botones. Los archivos localizados en la parte global de un paquete skin contienen la apariencia por defecto para todos los elementos de la interfaz XUL. El paquete toolkit es usado por todas las aplicaciones XUL.</p> + +<h3 id="A.C3.B1adiendo_un_paquete" name="A.C3.B1adiendo_un_paquete">Añadiendo un paquete</h3> + +<p>Mozilla coloca los paquetes incluidos con la instalación en la carpeta chrome. Sin embargo, no es necesario colocarlos aquí. Si tienes otro paquete instalado, puede ser colocado en cualquier parte del disco, siempre que un archivo manifest apunte a él. Es una práctica frecuente colocar los paquetes en la carpeta chrome simplemente por ser conveniente, sin embargo sólo funcionarán correctamente desde otro directorio o desde algún lugar de tu red local. No puedes almacenarlos en un lugar remoto, a no ser que el sitio remoto sea montado a través del sistema de ficheros local.</p> + +<p>Hay dos carpetas chrome usadas para las aplicaciones XUL, una está instalada en el mismo sitio donde las aplicaciones están instaladas, y la otra es parte del perfil del usuario. La primera permite a los paquetes ser compartidos por todos los usuarios, mientras que la segunda permite la creación de paquetes sólo por un usuario o grupo específico. Las extensiones, cuando son instaladas en una carpeta de extensiones diferente, son también normalmente específicas del usuario. Cualquier archivo manifest situado en cualquier carpeta chrome será examinado para ver que los paquetes instalados.</p> + +<p>En la siguiente sección, veremos como referirse a un paquete chrome usando la URL chrome.</p> + +<p>{{ PreviousNext("Tutorial de XUL:Introducción", "Tutorial de XUL:La URL chrome") }}</p> + +<p><span class="comment">Interwiki Language Links</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/foco_y_selección/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/foco_y_selección/index.html new file mode 100644 index 0000000000..89f2b7bfdd --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/foco_y_selección/index.html @@ -0,0 +1,179 @@ +--- +title: Foco y Selección +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Foco_y_Selección +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Focus_and_Selection +--- +<p>Esta sección describe como gestionar el foco y la selección de los elementos.</p> + +<h3 id="Elementos_con_foco" name="Elementos_con_foco">Elementos con foco</h3> + +<p>El elemento con foco se refiere al elemento que actualmente recibe los eventos de entrada. Si hay tres campos de texto en una ventana, el que tiene el foco es en el que el usuario puede introducir texto. Sólo un elemento por ventana puede tener el foco en un momento dado.</p> + +<p>El usuario puede cambiar el foco haciendo clic en un elemento o usando la tecla TAB. Cuando la tecla TAB es presionada, el foco pasa al siguiente elemento. Para ir al elemento anterior puede pulsarse Mayúsculas + Tab.</p> + +<h4 id="Reordenaci.C3.B3n_del_orden_de_tabulaci.C3.B3n" name="Reordenaci.C3.B3n_del_orden_de_tabulaci.C3.B3n">Reordenación del orden de tabulación</h4> + +<p>Puedes cambiar el orden en que los elementos reciben el foco cuando el usuario presiona TAB si especificas un valor para el atributo tabindex en cada elemento. El valor de este atributo debe ser un número. Cuando el usuario presiona la tecla TAB, el foco cambiará al elemento con el tabindex inmediatamente superior al elemento actual. Esto significa que puedes ordenar los elementos si les asignas índices en forma secuencial. Normalmente, sin embargo, no especificarás un valor para el atributo tabindex. Si no lo especificas, presionar la tecla TAB pondrá el foco en el siguiente elemento marcado en el código. Sólo necesitas especificarlo si deseas usar un orden distinto. Aquí hay un ejemplo:</p> + +<p><strong>Ejemplo 1:</strong> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul">Ver en funcionamiento</a></p> + +<pre class="eval"><button label="Botón 1" tabindex="2"/> +<button label="Botón 2" tabindex="1"/> +<button label="Botón 3" tabindex="3"/> +</pre> + +<h4 id="El_evento_enfoque" name="El_evento_enfoque">El evento enfoque</h4> + +<p>El evento onfocus (enfoque) se usa para responder cuando un elemento recibe el foco. El evento onblur (desenfocado) se usa para responder cuando el foco se retira de un elemento. Ambos eventos funcionan igual que sus equivalentes en HTML. Puedes usar estos gestores para iluminar un elemento o mostrar un texto de ayuda en la barra de estado. El siguiente ejemplo puede ser usado para aplicar una función a la gestión del evento de enfoque.</p> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul">Ver en funcionamiento</a></p> + +<pre class="eval"><script> +function displayFocus() +{ + var elem=document.getElementById('sbar'); + elem.setAttribute('value','Introduce tu número de teléfono.'); +} +</script> + +<textbox id="tbox1"/> +<textbox id="tbox2" onfocus="displayFocus();"/> +<description id="sbar" value=""/> +</pre> + +<p>El evento onfocus, cuando ocurra, llamará a la función displayFocus(). Esta función cambiará el valor de la etiqueta. Podemos extender este ejemplo para eliminar ese texto cuando el elemento pierde el foco. Generalmente, usarás los eventos de enfoque y desenfocado para actualizar partes de la interfaz cuando el usuario seleccione elementos. Por ejemplo, calculando un total cuando usuario introduzca valores en otros campos, o usando los eventos de foco para validar ciertos valores. No muestres diálogos de alerta durante los eventos de foco ya que generalmente esto incomodará o distraerá al usuario y por ello se considera un diseño de interfaz bastante pobre.</p> + +<p>También puedes añadir gestores de eventos dinámicamente usando la función del DOM addEventListener. Puedes usarla para cualquier tipo de elemento. Toma tres parametros, el tipo de evento, la función a ejecutar cuando ocurre el evento y un booleano indicando si debe ser capturado o no.</p> + +<h4 id="Obtenci.C3.B3n_del_elemento_actualmente_enfocado" name="Obtenci.C3.B3n_del_elemento_actualmente_enfocado">Obtención del elemento actualmente enfocado</h4> + +<p>El elemento enfocado actualmente se registra en un objeto llamado despachador de comandos (command dispatcher), del cual sólo hay una instancia en cada ventana. El despachador de comandos es responsable de mantener controlado el elemento que tiene el foco cuando el usuario usa el interfaz. El despachador de comandos también tiene otras tareas, que serán discutidas en un próxima sección sobre los comandos. Por ahora, miraremos algunas de las características relacionadas con la focalización.</p> + +<p>Puedes obtener el despachador de comandos de la ventana usando la propiedad commandDispatcher del documento. Desde ahí, puedes saber el elemento enfocado actualmente con el atributo focusedElement del despachador. El siguiente ejemplo ilustra cómo hacerlo.</p> + +<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul">Ver en funcionamiento</a></p> + +<pre class="eval"><window id="focus-example" title="Ejemplo de Foco" + onload="init();" + xmlns="<a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"> + + <script> + function init() + { + addEventListener("focus",setFocusedElement,true); + } + + function setFocusedElement() + { + var focused = document.commandDispatcher.focusedElement; + document.getElementById("focused").value = focused.tagName; + } + </script> + + <hbox> + <label control="username" value="Nombre de usuario:"/> + <textbox id="username"/> + </hbox> + + <button label="Hola"/> + <checkbox label="Recuerda esta decisión"/> + <label id="focused" value="-Sin Foco-"/> + +</window> +</pre> + +<p>En este ejemplo, el gestor de eventos del foco se adjunta a la ventana. Queremos usar un gestor de eventos capturador, así que debemos usar el método addEventListener. Este registrará un gestor de eventos capturador con la ventana, que se encargará de llamar al método setFocusedElement(). Este método coge el elemento que contiene el foco actualmente del despachador de comandos y pone el valor de la etiqueta con el nombre del elemento. Cuando el foco cambia de elemento, la etiqueta mostrará el nombre del elemento que contiene el foco. Algunas cosas que cabe mencionar son las siguientes:</p> + +<ul> + <li>Primero, cuando la caja de texto tiene el foco, el nombre del elemento es ‘html:input’, no ‘textbox’ como cabría esperar. Esto es así porque las cajas de texto en XUL están implementadas usando el control input de HTML, así que el evento de foco es recibido por ese elemento.</li> + <li>Segundo, haciendo clic en la etiqueta de la caja de texto cambia el foco a la caja de texto. Esto sucede porque el elemento etiqueta tiene un atributo control apuntando al id de la caja de texto.</li> + <li>Finalmente, la otra etiqueta que muestra el nombre del elemento, no tiene un atributo control, así que hacer clic sobre ella no tiene ningún efecto para el cambio de foco. Sólo los elementos focalizables pueden obtener el foco.</li> +</ul> + +<h4 id="Hacer_una_etiqueta_enfocable" name="Hacer_una_etiqueta_enfocable">Hacer una etiqueta enfocable</h4> + +<p>Si tuvieras que crear un elemento personalizado, tendrías que definir si este nuevo elemento puede obtener el foco o no. Para ello, puedes usar una propiedad de estilo especial : -moz-user-focus. Esta propiedad controla si un elemento puede ser focalizable. Por ejemplo, podrías crear una etiqueta focalizable como en el siguiente ejemplo.</p> + +<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul">Ver en funcionamiento</a></p> + +<pre class="eval"><label id="focused" style="-moz-user-focus: normal;" + onkeypress="alert('Etiqueta Focalizada');" value="Focalizame"/> +</pre> + +<p>La propiedad de estilo está puesta como normal. También puedes ponerla como ignore para que el elemento no sea focalizable. Esta propiedad no debe ser usada para deshabilitar un elemento, para ello puedes usar el atributo disabled ya que se diseñó específicamente para ello. Una vez la etiqueta del ejemplo obtiene el foco, puede responder a pulsaciones del teclado. Naturalmente, la etiqueta no da ninguna indicación de estar focalizada, ya que normalmente no debería poder obtener el foco.</p> + +<h4 id="Cambio_del_foco" name="Cambio_del_foco">Cambio del foco</h4> + +<p>Hay distintas formas de cambiar el elemento actualmente enfocado. La más simple es llamando al método focus del elemento XUL que deseas tener enfocado. El método blur sería usado para desfocalizar un elemento. El siguiente ejemplo muestra su uso.</p> + +<p><strong>Ejemplo 5</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul">Ver en funcionamiento</a></p> + +<pre class="eval"><textbox id="addr"/> + +<button label="Foco" oncommand="document.getElementById('addr').focus()"/> +</pre> + +<p>Opcionalmente puedes usar los métodos advanceFocus y rewindFocus del despachador de comandos. Estos métodos mueven el foco al siguiente o anterior elemento respectivamente. Esto es lo que pasa cuando se presiona TAB o Mayúsculas+TAB.</p> + +<p>Para las cajas de texto, un atributo especial focused se añade cuando el elemento tiene el foco. Puedes comprobar la presencia del atributo para determinar si el elemento está enfocado, ya sea mediante un guión o desde una hoja de estilos. Tendrá el valor true si la caja de texto tiene el foco y si no lo tuviera el atributo ni siquiera estará presente.</p> + +<h4 id="Comportamientos_espec.C3.ADficos_de_plataforma" name="Comportamientos_espec.C3.ADficos_de_plataforma">Comportamientos específicos de plataforma</h4> + +<dl> + <dt>Max OS X</dt> + <dd>Hay una preferencia llamada "Acceso Total al Teclado" (Full Keyboard Access, FKA). Nota que XUL es fiel a esto. Esto quiere decir que cuando la preferencia FKA está<em>off</em>, sólo las cajas de texto y las listas/árboles son enfocables con el teclado, así como de tu teclado utilizando el método focus.</dd> +</dl> + +<h3 id="Manejo_de_cambios_de_texto" name="Manejo_de_cambios_de_texto">Manejo de cambios de texto</h3> + +<p>Hay dos eventos que pueden ser utilizados cuando el usuario cambia el valor de una caja de texto. Naturalmente, estos eventos sólo serán enviados a la caja de texto que tiene el foco.</p> + +<ul> + <li>El evento input es disparado siempre que el texto del campo es modificado. El valor nuevo será diferente del viejo. Puedes querer utilizar este evento en lugar de usar eventos de tecla, ya que algunas teclas como Mayúsculas no cambian el valor. Además, el evento input no se disparará si se pulsa una tecla de letra cuando ya no caben más letras en la caja de texto.</li> + <li>El evento change es similar en que se dispara sólo cuando el campo cambia. Sin embargo sólo se dispara una vez la caja de texto pierde el foco, es decir, una vez por cada conjunto de cambios.</li> +</ul> + +<h3 id="Selecci.C3.B3n_de_texto" name="Selecci.C3.B3n_de_texto">Selección de texto</h3> + +<p>Cuando trabajamos con cajas de texto, seguramente deseemos obtener el texto seleccionado en lugar de todo el texto. También es posible que necesitemos cambiar la selección actual.</p> + +<p>Las cajas de texto en XUL soportan una forma de obtener y modificar la selección. La forma más sencilla es seleccionar todo el texto de la caja. Esto involucra usar el método select de la caja de texto.</p> + +<pre class="eval">tbox.select(); +</pre> + +<p>Sin embargo, podrías querer seleccionar tan sólo una parte del texto. Para hacerlo puedes usar la función setSelectionRange. Toma dos parametros, el primero es la posición del caracter inicial y el segundo es la posición del caracter inmediatamente posterior al fin de la selección. Los valores comienzan en 0, así que la posición del primer caracter es 0, la del segundo 1 …</p> + +<pre class="eval">tbox.setSelectionRange(4,8); +</pre> + +<p>Este ejemplo seleccionará el quinto, sexto, séptimo y octavo caracteres. Si tan sólo hubiera seis caracteres, sólo el quinto y el sexto serían seleccionados, sin provocar ningún error.</p> + +<p>Si usas el mismo valor para ambos parametros, el inicio y fin de la selección cambia a la misma posición. Esto equivale a cambiar la posición del cursor dentro de la caja de texto. Por ejemplo, la siguiente línea puede usarse para mover el cursor al inicio del texto.</p> + +<pre class="eval">tbox.setSelectionRange(0,0); +</pre> + +<p>Puedes obtener la selección actual usando las propiedades <code>selectionStart</code> y <code>selectionEnd</code>. Estas propiedades contienen los valores de inicio y final de la selección actual respectivamente. Si ambas contienen el mismo valor, significa que no hay ningún texto seleccionado, y los valores serán la posición actual del cursor. Una vez que tienes la posición inicial y final puedes extraer la subcadena del texto completo.</p> + +<p>Puedes obtener y modificar el contenido de una caja de texto usando la propiedad value.</p> + +<p>Otra propiedad de las cajas de texto bastante útil es <code>textLength</code>, la cual nos dirá el número de caracteres del campo.</p> + +<h3 id="Selecci.C3.B3n_de_otros_elementos" name="Selecci.C3.B3n_de_otros_elementos">Selección de otros elementos</h3> + +<p>Muchos otros elementos proporcionan métodos para obtener los elementos seleccionados dentro de ellos. Listas, menús y cajas de pestañas tienen la propiedad selectedIndex que podemos usar para obtener el índice del elemento actualmente seleccionado.</p> + +<p>Si asignas un valor a la propiedad selectedIndex puedes cambiar el elemento seleccionado.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Atajos_de_teclado" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Comandos">Siguiente »</a></p> +</div> + +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/herencia_de_atributos_xbl_en_firefox_1.5_y_2.0/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/herencia_de_atributos_xbl_en_firefox_1.5_y_2.0/index.html new file mode 100644 index 0000000000..930be87618 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/herencia_de_atributos_xbl_en_firefox_1.5_y_2.0/index.html @@ -0,0 +1,44 @@ +--- +title: Herencia de atributos xbl en Firefox 1.5 y 2.0. +slug: >- + Archive/Mozilla/XUL/Tutorial_de_XUL/Herencia_de_atributos_xbl_en_Firefox_1.5_y_2.0. +tags: + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/XBL_Attribute_Inheritance +--- +<p> </p> + +<h3 id="Herencia_de_atributos_xbl_en_Firefox_1.5_y_2.0." name="Herencia_de_atributos_xbl_en_Firefox_1.5_y_2.0."><strong>Herencia de atributos xbl en Firefox 1.5 y 2.0.</strong></h3> + +<p>He visto por internet que muchas personas están teniendo problemas con <strong>xbl:inherits</strong> en firefox 1.5 y 2.0 en cualquier plataforma, igual que yo, así que pues me di un tiempo después del trabajo para solucionear el problema, tienes que escribir los xmlns como en mi ejemplo.</p> + +<p> </p> + +<pre class="eval"><?xml version="1.0"?> +<bindings xmlns="<a class="external" href="http://www.mozilla.org/xbl" rel="freelink">http://www.mozilla.org/xbl</a>" xmlns:xbl="<a class="external" href="http://www.mozilla.org/xbl" rel="freelink">http://www.mozilla.org/xbl</a>" xmlns:xul="<a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"> +<binding id="zona"> + <content> + <xul:deck xbl:inherits="selectedIndex" flex="1"> + <xul:stack> + <xul:image src="green1.jpg" /> + <xul:hbox pack="center"> + <xul:vbox pack="center"> + <xul:image style="height: 80px; width: 80px;" src="yinyan-m.jpg" /> + </xul:vbox> + </xul:hbox> + </xul:stack> + <xul:stack> + <xul:image src="green1.jpg"/> + <xul:vbox pack="center"> + <xul:image src="set.jpg"/> + </xul:vbox> + </xul:stack> + </xul:deck> + </content> +</binding> +</bindings> +</pre> + +<p>Este archivo se guarda con la extensión .xml por ejemplo miarchivo.xml, de esta manera la herencia de atributos de la forma xbl:inherits funciona incluso con atributos definidos en un namespace. RECUERDEN PONER ATENCIÓN A LOS NAMESPACES <strong>xmlns</strong>.</p> + +<p> </p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/index.html new file mode 100644 index 0000000000..6dbfec687b --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/index.html @@ -0,0 +1,123 @@ +--- +title: Tutorial de XUL +slug: Archive/Mozilla/XUL/Tutorial_de_XUL +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial +--- +<p> +</p><p><br> +</p> +<div class="note"> +<p>Este tutorial de XUL fue creado por <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a>. Él nos dio su permiso para que lo usáramos como parte de MDC. +</p> +</div> +<p>Este tutorial describe <a href="es/XUL">XUL</a>, el lenguaje de usuario XML. Este lenguaje fue creado para la aplicación Mozilla y es usado para dibujar su interface. +</p> +<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n"> Introducción </h3> +<ul><li><a href="es/Tutorial_de_XUL/Introducci%c3%b3n">Introducción</a> +</li><li><a href="es/Tutorial_de_XUL/Estructura_XUL">Estructura XUL</a> +</li><li><a href="es/Tutorial_de_XUL/La_URL_chrome">La URL chrome</a> +</li><li><a href="es/Tutorial_de_XUL/Archivos_Manifest">Archivos manifest</a> +</li></ul> +<h3 id="Elementos_simples" name="Elementos_simples"> Elementos simples </h3> +<ul><li><a href="es/Tutorial_de_XUL/Creando_una_ventana">Creando una ventana</a> +</li><li><a href="es/Tutorial_de_XUL/A%c3%b1adiendo_botones">Añadiendo botones</a> +</li><li><a href="es/Tutorial_de_XUL/A%c3%b1adiendo_etiquetas_e_imagenes">Añadiendo etiquetas e imágenes</a> +</li><li><a href="es/Tutorial_de_XUL/Controles_de_entrada">Controles de entrada</a> +</li><li><a href="es/Tutorial_de_XUL/Controles_de_listas">Controles de listas</a> +</li><li><a href="es/Tutorial_de_XUL/Medidores_de_Progreso">Medidores de progreso</a> +</li><li><a href="es/Tutorial_de_XUL/A%c3%b1adiendo_elementos_HTML">Añadiendo elementos HTML</a> +</li><li><a href="es/Tutorial_de_XUL/Usando_espaciadores">Usando espaciadores</a> +</li><li><a href="es/Tutorial_de_XUL/M%c3%a1s_caracter%c3%adsticas_de_los_botones">Más características de los botones</a> +</li></ul> +<h3 id="El_modelo_de_caja" name="El_modelo_de_caja"> El modelo de caja </h3> +<ul><li><a href="es/Tutorial_de_XUL/El_modelo_de_caja">El modelo de caja</a> +</li><li><a href="es/Tutorial_de_XUL/Posicionamiento_de_elementos_de_la_ventana">Posicionamiento de elementos de la ventana</a> +</li><li><a href="es/Tutorial_de_XUL/Detalles_del_modelo_de_caja">Detalles del modelo de caja</a> +</li><li><a href="es/Tutorial_de_XUL/Cajas_de_grupo">Cajas de grupo</a> +</li><li><a href="es/Tutorial_de_XUL/A%c3%b1adiendo_m%c3%a1s_elementos">Añadiendo más elementos</a> +</li></ul> +<h3 id="M.C3.A1s_elementos_de_dise.C3.B1o" name="M.C3.A1s_elementos_de_dise.C3.B1o"> Más elementos de diseño </h3> +<ul><li><a href="es/Tutorial_de_XUL/Apilado_y_plataforma">Apilado y plataforma <small>(stacks and decks)</small></a> +</li><li><a href="es/Tutorial_de_XUL/Indicadores_de_progreso">Indicadores de progreso</a> +</li><li><a href="es/Tutorial_de_XUL/Contenedores_de_pesta%c3%b1as">Contenedores de pestañas</a> +</li><li><a href="es/Tutorial_de_XUL/Rejillas">Cuadrículas</a> +</li><li><a href="es/Tutorial_de_XUL/Paneles_de_contenidos">Paneles de contenidos</a> +</li><li><a href="es/Tutorial_de_XUL/Divisores">Divisores</a> +</li><li><a href="es/Tutorial_de_XUL/Barras_de_desplazamiento">Barras de desplazamiento</a> +</li></ul> +<h3 id="Barra_de_herramientas_y_men.C3.BAes" name="Barra_de_herramientas_y_men.C3.BAes">Barra de herramientas y menús</h3> +<ul> <li><a href="/es/Tutorial_de_XUL/Barra_de_Herramientas" title="es/Tutorial_de_XUL/Barra_de_Herramientas">Barra de herramientas</a></li> <li><a href="/es/Tutorial_de_XUL/Menús_de_Barras_Simples" title="es/Tutorial de XUL/Menús de Barras Simples">Menús de barras simples</a></li> <li><a href="/es/Tutorial_de_XUL/Más_funciones_de_menú" title="es/Tutorial_de_XUL/Más_funciones_de_menú">Más funciones de menú</a></li> <li><a href="/es/Tutorial_de_XUL/Menús_emergentes" title="es/Tutorial de XUL/Menús emergentes">Menús emergentes</a></li> <li><a href="/es/Tutorial_de_XUL/Menús_con_desplazamiento" title="es/Tutorial de XUL/Menús con desplazamiento">Menús con desplazamiento</a></li> +</ul><h3 id="Eventos_y_scripts" name="Eventos_y_scripts"> Eventos y scripts </h3> +<ul><li><a href="es/Tutorial_de_XUL/A%c3%b1adiendo_los_gestores_de_eventos">Añadiendo los gestores de eventos</a> +</li><li><a href="es/Tutorial_de_XUL/M%c3%a1s_gestores_de_eventos">Más gestores de eventos</a> +</li><li><a href="es/Tutorial_de_XUL/Atajos_de_teclado">Atajos de teclado</a> +</li><li><a href="es/Tutorial_de_XUL/Foco_y_Selecci%c3%b3n">Foco y selección</a> +</li><li><a href="es/Tutorial_de_XUL/Comandos">Comandos</a> +</li><li><a href="es/Tutorial_de_XUL/Actualizar_comandos">Actualizar comandos</a> +</li><li><a href="es/Tutorial_de_XUL/Emisores_y_receptores">Emisores y receptores</a> +</li></ul> +<h3 id="Modelo_de_objeto_de_documento" name="Modelo_de_objeto_de_documento"> Modelo de objeto de documento </h3> +<ul><li> <a href="es/Tutorial_de_XUL/Modelo_de_objeto_de_documento">Modelo de objeto de documento</a> +</li><li> <a href="es/Tutorial_de_XUL/Modificando_una_interfaz_XUL">Modificando una interfaz XUL</a> +</li><li> <a href="es/Tutorial_de_XUL/Manipulando_listas">Manipulando listas</a> +</li><li> <a href="es/Tutorial_de_XUL/Objectos_de_caja">Objectos de caja</a> +</li><li> <a href="es/Tutorial_de_XUL/Interfaces_XPCOM">Interfaces XPCOM</a> +</li><li> <a href="es/Tutorial_de_XUL/Ejemplos_XPCOM">Ejemplos XPCOM</a> +</li></ul> +<h3 id=".C3.81rboles" name=".C3.81rboles"> Árboles </h3> +<ul><li> <a href="es/Tutorial_de_XUL/%c3%81rboles">Árboles</a> +</li><li> <a href="es/Tutorial_de_XUL/M%c3%a1s_caracter%c3%adsticas_de_los_%c3%a1rboles">Más características de los árboles</a> +</li><li> <a href="es/Tutorial_de_XUL/Selecci%c3%b3n_en_un_%c3%a1rbol">Selección en un árbol</a> +</li><li> <a href="es/Tutorial_de_XUL/Detalles_de_Vistas_de_un_%c3%a1rbol">Detalles de vistas de un árbol</a> +</li><li> <a href="es/Tutorial_de_XUL/Objeto_de_caja_de_%c3%a1rbol">Objeto de caja de árbol</a> +</li></ul> +<h3 id="Plantillas_y_RDF" name="Plantillas_y_RDF"> Plantillas y RDF </h3> +<ul><li> <a href="es/Tutorial_de_XUL/Introducci%c3%b3n_a_RDF">Introducción a RDF</a> +</li><li> <a href="es/Tutorial_de_XUL/Plantillas">Plantillas</a> +</li><li> <a href="es/Tutorial_de_XUL/%c3%81rboles_y_plantillas">Árboles y plantillas</a> +</li><li> <a href="es/Tutorial_de_XUL/Fuentes_de_datos_RDF">Fuentes de datos RDF</a> +</li><li> <a href="es/Tutorial_de_XUL/Reglas_avanzadas">Reglas avanzadas</a> +</li><li> <a href="es/Tutorial_de_XUL/Datos_persistentes">Datos persistentes</a> +</li></ul> +<h3 id="Aspectos.2Ftemas_y_configuraci.C3.B3n" name="Aspectos.2Ftemas_y_configuraci.C3.B3n"> Aspectos/temas y configuración </h3> +<ul><li> <a href="es/Tutorial_de_XUL/A%c3%b1adiendo_hojas_de_estilo">Añadiendo hojas de estilo</a> +</li><li> <a href="es/Tutorial_de_XUL/Estilizando_un_%c3%a1rbol">Estilizando un árbol</a> +</li><li> <a href="es/Tutorial_de_XUL/Modificando_el_aspecto_por_defecto">Modificando el aspecto/tema por defecto</a> +</li><li> <a href="es/Tutorial_de_XUL/Creando_un_aspecto">Creando un aspecto/tema</a> +</li><li> <a href="es/Tutorial_de_XUL/Localizaci%c3%b3n">Localización</a> +</li><li> <a href="es/Tutorial_de_XUL/Archivos_de_propiedad">Archivos de propiedad</a> +</li></ul> +<h3 id="Vinculaciones" name="Vinculaciones"> Vinculaciones </h3> +<ul><li> <a href="es/Tutorial_de_XUL/Introducci%c3%b3n_al_XBL">Introducción al XBL</a> +</li><li> <a href="es/Tutorial_de_XUL/Contenido_an%c3%b3nimo">Contenido anónimo</a> +</li><li> <a href="es/Tutorial_de_XUL/Herencia_de_atributos_XBL">Herencia de atributos XBL</a> +</li><li> <a href="es/Tutorial_de_XUL/A%c3%b1adiendo_propiedades">Añadiendo propiedades</a> +</li><li> <a href="es/Tutorial_de_XUL/A%c3%b1adiendo_m%c3%a9todos">Añadiendo métodos</a> +</li><li> <a href="es/Tutorial_de_XUL/A%c3%b1adiendo_gestores_de_eventos">Añadiendo gestores de eventos</a> +</li><li> <a href="es/Tutorial_de_XUL/Herencia_en_XBL">Herencia en XBL</a> +</li><li> <a href="es/Tutorial_de_XUL/Ejemplo_de_XBL">Ejemplo de XBL</a> +</li></ul> +<h3 id="Tipos_de_ventanas_especializadas" name="Tipos_de_ventanas_especializadas"> Tipos de ventanas especializadas </h3> +<ul><li> <a href="es/Tutorial_de_XUL/Caracter%c3%adsticas_de_una_ventana">Características de una ventana</a> +</li><li> <a href="es/Tutorial_de_XUL/Creando_Di%c3%a1logos">Creando diálogos</a> +</li><li> <a href="es/Tutorial_de_XUL/Di%c3%a1logos_Abrir_y_Guardar">Diálogos abrir y guardar</a> +</li><li> <a href="es/Tutorial_de_XUL/Creando_un_asistente">Creando un asistente</a> +</li><li> <a href="es/Tutorial_de_XUL/M%c3%a1s_asistentes">Más asistentes</a> +</li><li> <a href="es/Tutorial_de_XUL/Presentaci%c3%b3n">Presentación</a> +</li><li> <a href="es/Tutorial_de_XUL/Presentaci%c3%b3n_din%c3%a1mica">Presentación dinámica</a> +</li></ul> +<h3 id="Instalaci.C3.B3n" name="Instalaci.C3.B3n"> Instalación </h3> +<ul><li> <a href="es/Tutorial_de_XUL/Creando_un_instalador">Creando un instalador</a> +</li><li> <a href="es/Tutorial_de_XUL/Instalando_Scripts">Instalando scripts</a> +</li><li> <a href="es/Tutorial_de_XUL/Caracter%c3%adsticas_adicionales_de_la_instalaci%c3%b3n">Características adicionales de la instalación</a> +</li></ul> +<div class="originaldocinfo"> +<h3 id="Informaci.C3.B3n_original_del_documento" name="Informaci.C3.B3n_original_del_documento">Información original del documento</h3> +<ul> <li>Autor: <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a></li> <li>Última modificación: 3 de Junio de 2005</li> <li>Copyright: © 1999-2005 XULPlanet.com</li> +</ul></div> +<div class="noinclude"> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/instalando_scripts/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/instalando_scripts/index.html new file mode 100644 index 0000000000..80db82b861 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/instalando_scripts/index.html @@ -0,0 +1,80 @@ +--- +title: Instalando Scripts +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Instalando_Scripts +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Install_Scripts +--- +<p> </p> +<p>Esta sección describe el script de instalación.</p> +<h3 id="Creando_un_script_de_instalaci.C3.B3n" name="Creando_un_script_de_instalaci.C3.B3n">Creando un script de instalación</h3> +<p>Usted deseará generalmente alguna forma de control sobre el proceso de instalacion. Por ejemplo, usted puede desear comprobar versiones de archivos e instalar solamente archivos actualizados, o quizás usted desea aplicar parches a los archivos existentes. El script de instalación es lo suficiente flexible para permitirle desinstalar archivos. Por esta razón, los instaladores incluyen un script de instalación para manejar el proceso de la instalación.</p> +<p>El script de instalación se debe llamar install.js y se debe colocar en el nivel superior del archivo del instalador. El script contendrá código Javascript que ejecutará varias funciones de instalación.</p> +<p>En un documento HTML, o un documento XUL, el objeto <code>window</code> es el objeto global de la raíz. Eso significa que usted puede llamar los métodos del objeto <code>window</code> sin usar el calificador antes de la llamada, lo que significa que window.open(…) se puede escribir simplemente open(…). En un script de instalación, no hay ventana asociada, sin embargo el objeto global será un objeto <code>Install</code> que contiene varias funciones para personalizar el proceso de instalación. Algunas de las funciones del objeto <code>Install</code> serán descritas abajo.</p> +<p>El script de instalación debe seguir los siguientes pasos:</p> +<ol> + <li>Inicie la instalación especificando qué paquete y versión está siendo instalada.</li> + <li>Utilice las funciones de instalación para indicar qué archivos y directorios necesitan ser instalados. Usted puede también fijar los archivos que se moverán y serán suprimidos.</li> + <li>Comience el proceso de instalar los archivos necesarios.</li> +</ol> +<p>Es importante observar que durante el paso dos, usted indica solamente qué archivos deben ser instalados y que suceda cualquier otra operación que usted desee. Ningún archivo se copia hasta el paso tres. Debido a esto, usted puede especificar fácilmente un número de archivos que se instalarán, viene a través de una cierta clase de error, y aborta el proceso entero sin la modificación del sistema del usuario.</p> +<h3 id="El_Registro_de_Componentes" name="El_Registro_de_Componentes">El Registro de Componentes</h3> +<p>Mozilla mantiene un archivo que es un registro de todos los componentes que están instalados actualmente. Los componentes incluyen los nuevos paquetes de chrome, skins y extensiones. Cuando un nuevo componente es instalado, el registro se actualiza. El registro almacena los archivos y la información de versión de los componentes instalados. De esa forma, es más fácil comprobar si una versión de su componente está presente y actualizarlo solamente en caso de necesidad.</p> +<p>Los componentes del registro trabajan como el registro de Windows. Consiste en una jerarquía de llaves y de valores. Usted no necesita saber mucho sobre eso para crear aplicaciones XUL a menos que usted esté creando sus propios componentes XPCOM.</p> +<p>Lo qué usted necesita saber para una instalación es que el registro almacena un sistema de información sobre su aplicación, tal como la lista del archivo y las versiones. Toda esta información se almacena en una llave (y dentro de subkeys) que usted proporciona en la escritura de la instalación (en el paso 1 mencionado arriba).</p> +<p>Esta llave esta estructurada como un directorio de la trayectoria de la forma siguiente:</p> +<pre>/Author/Package Nombre +</pre> +<p>Substituya la palabra Author por su nombre y substituya el nombre del paquete por el nombre del paquete que usted está instalando. Por ejemplo:</p> +<pre>/Xulplanet/Find Files + +/Netscape/Personal Security Manager +</pre> +<p>El primer ejemplo es el que utilizaremos para el diálogo de búsqueda de archivos. El segundo es la llave usada para el Personal Security Manager.</p> +<h3 id="Iniciar_la_Instalaci.C3.B3n" name="Iniciar_la_Instalaci.C3.B3n">Iniciar la Instalación</h3> +<p>El objeto <code>Install</code> tiene una función, initInstall, que se puede utilizar para iniciar la instalación. Debe ser ejecutada al principio de su script de instalación. La sintaxis de esta función es como sigue:</p> +<p>initInstall( packageName , regPackage , version );</p> +<p><b>Ejemplo:</b></p> +<p>initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");</p> +<p>El primer parámetro es el nombre del paquete en forma legible. El segundo parámtro es la llave del registro usada para guardar la información del paquete según lo descrito antes. El tercer parámetro es la versión del paquete que esta siendo instalado.</p> +<p>Después, necesitamos definir el directorio donde serán instalados los archivos. Hay dos maneras de hacer esto. El método simple asigna un directorio de la instalación e instala todos los archivos en él. El segundo método permite que usted asigne una destinación basándose en el archivo-por-archivo (o directorio). El primer método se describe abajo.</p> +<p>La función setPackageFolder asigna un directorio de la instalación. Para el diálogo de búsqueda de archivos, instalaremos los archivos en el directorio chrome. (realmente podría ponerlos dondequiera.) El setPackageFolder toma una discusión, el directorio donde sera instalado. Para una máxima portabilidad, usted no puede especificar una cadena de caracteres para el directorio. En lugar de eso, usted especifica un identificador de un directorio conocido y abre subdirectorios de él. Así, si sus aplicaciones necesitan instalar algunas bibliotecas de sistema, usted no necesitará saber el nombre de esos directorios.</p> +<p>Los identificadores de directorio se enumeran en <a class="external" href="http://www.xulplanet.com/references/elemref/ref_Install.html#prop_getFolder">XULPlanet reference</a>. Para el directorio chrome, el identificador del directorio es 'Chrome'. La función getFolder se puede utilizar para conseguir uno de estos directorios especiales. Esta función tiene dos parámetros, el primero es el identificador y el segundo es un subdirectorio. Por ejemplo:</p> +<pre>findDir = getFolder("Chrome","findfile"); +setPackageFolder(findDir); +</pre> +<p>Aquí, conseguimos la carpeta findfile en la carpeta chrome y la pasamos directamente a la función del setPackageFolder. La segunda discusión al getFolder es el subdirectorio en el cual vamos a instalar, que no tiene que existir. Usted puede dejar esta discusión enteramente afuea si usted no necesita uno.</p> +<h3 id="Especificar_los_archivos_a_instalar" name="Especificar_los_archivos_a_instalar">Especificar los archivos a instalar</h3> +<p>Después, usted necesita especificar qué archivos deben ser instalados. Esto implica el uso de dos funciones, addDirectory y addFile. La función addDirectory le dice al instalador que un directorio del archivo XPI (y de todo su contenido) debe ser instalado a un lugar particular. El addFile es similar pero para un solo archivo.</p> +<p>Las funciones addDirectory y addFile tienen varias formas. Las más simples solo tienen una discusión, el directorio del instalador para instalar al directorio asignado de la instalación.</p> +<p>addDirectory ( dir ); addFile ( dir );</p> +<p><b>Ejemplo:</b></p> +<p>addDirectory("findfile");</p> +<p>El ejemplo anterior especificará que el directorio findfile del archivo del instalador debe ser instalado. Podemos llamar estas funciones múltiples veces para instalar otros archivos.</p> +<p>Después, desearemos colocar los archivos de busqeuda en el sistema del chrome para poderlo utilizar con un cromo URL. Esto se puede hacer con la función registerChrome. Toma dos discusiones, el primero es el tipo de chrome a colocarse (contenido, skin o ‘locale’). El segundo es el directorio que contiene el archivo de contents.rdf para colocarse. Porque el diálogo de los archivos de busqueda tiene contenido, un archivo skin y un archivo ‘locale’, el registerChrome necesitará ser abierto tres veces.</p> +<pre>registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content")); +registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin")); +registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale")); +</pre> +<p>La bandera de DELAYED_CHROME se utiliza para indicar que el cromo debe ser instalado la próxima vez Mozilla está funcionado.</p> +<h3 id="Terminar_la_Instalaci.C3.B3n" name="Terminar_la_Instalaci.C3.B3n">Terminar la Instalación</h3> +<p>Las funciones addDirectory y addFile no copian ningun archivo. Indican solamente qué archivos deben ser instalados. Semejantemente, el registerChrome indica solamente que el chrome debe ser colocado. Para terminar el proceso y para comenzar a copiar archivos, abra la función performInstall. No toma ninguna discusión.</p> +<p>el script final para instalar el componente de búsqueda de archivos se muestra abajo:</p> +<div class="highlight"> + <h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4> + <pre>initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0"); + +findDir = getFolder("Chrome","findfile"); +setPackageFolder(findDir); + +addDirectory("findfile"); + +registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content")); +registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin")); +registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale")); + +performInstall(); +</pre> +</div> +<p>A continuación veremos algunas funciones adicionales de instalación</p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/interfaces_xpcom/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/interfaces_xpcom/index.html new file mode 100644 index 0000000000..5965efa462 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/interfaces_xpcom/index.html @@ -0,0 +1,132 @@ +--- +title: Interfaces XPCOM +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Interfaces_XPCOM +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Interfaces +--- +<p> </p> +<p>En esta sección, vamos a echar un pequeño vistazo a XPCOM (Cross-platform Component Object Model o Modelo de Objeto de Componentes Multiplataforma), el sistema de objetos que utiliza Mozilla.</p> +<h3 id="Llamando_a_Objetos_Nativos" name="Llamando_a_Objetos_Nativos">Llamando a Objetos Nativos</h3> +<p>Usando XUL podemos construir una interfaz de usuario compleja. Podemos asociarle scripts que modificarán la interfaz y ejecutarán tareas. Pero hay bastantes cosas que no podemos hacer directamente con JavaScript. Por ejemplo, si quisieramos crear una aplicación de correo, necesitaríamos escribir scripts que se conectaran con los servidores de correo para obtener el correo y mandarlo. Pero JavaScript no puede hacer esta clase de cosas.</p> +<p>La única forma de llevar a cabo estas tareas sería escribiendo código nativo. También necesitaríamos una forma de que nuestros scripts pudieran comunicarse con el código nativo de forma sencilla. Mozilla nos proporciona todo esto con XPCOM (Modelo de Objeto de Componentes Multiplataforma).</p> +<h3 id="Acerca_de_XPCOM" name="Acerca_de_XPCOM">Acerca de XPCOM</h3> +<p>Mozilla está construido mediante una colección de componentes, cada uno de ellos responsable de ejecutar una cierta tarea. Por ejemplo, hay un componente para cada menú, botón y elemento. Estos componentes se construyen a partir de un conjunto de definiciones llamadas interfaces.</p> +<p>Una interfaz en Mozilla es una definición de un conjunto de funcionalidades que pueden ser implementadas mediante componentes. Los componentes son los encargados de implementar el código que ejecuta las distintas tareas en Mozilla. Cada componente implementa la funcionalidad tal como está descrita en la interfaz. Un único componente puede implementar múltiples interfaces. Y varios componentes pueden implementar la misma interfaz.</p> +<p>Tomemos el ejemplo de un supuesto componente archivo. Se necesitaría crear una interfaz que describiera las propiedades y funciones que pueden realizarse sobre los archivos. Un archivo necesitaría propiedades para almacenar su nombre, la fecha de modificación y su tamaño. Entre las funciones del archivo podríamos incluir movernos por el archivo, copiarlo o borrarlo.</p> +<p>La interfaz Archivo solo describe las características de un archivo, no las implementa. La implementación de la interfaz Archivo es tarea del componente. El componente tendrá código que será capaz de obtener el nombre del archivo, la fecha y su tamaño. Además, tendrá código que permita copiarlo y renombrarlo.</p> +<p>Mientras implemente la interfaz correctamente, no nos preocupa cómo hace todas estas cosas. Evidentemente, necesitaremos diferentes implementaciones, una para cada plataforma. Las versiones de un componente archivo en Windows y Macintosh serán bastante diferentes. De todas formas, ambas implementarán la misma interfaz. Por lo tanto, podemos utilizar un componente accediendo a las funciones que conocemos de la interfaz.</p> +<p>En Mozilla, el nombre de las interfaces viene precedido de ‘nsI’ de forma que sean facilmente reconocibles. Por ejemplo, nsIAddressBook es la interfaz que se utiliza para interaccionar con una libreta de direcciones (address book), nsISound se utiliza para reproducir sonidos y nsILocalFile se utiliza para manejo de archivos.</p> +<p>Los componentes XPCOM suelen implementarse con código nativo, lo que significa que normalmente pueden hacer cosas que JavaScript no puede por sí mismo. Existe una forma sencilla de llamar a este código nativo, que veremos dentro de poco. Podemos ejecutar cualquiera de las funciones proporcionadas por el componente tal como se describe en las interfaces que implementa. Por ejemplo, una vez que tenemos un componente, podemos comprobar si implementa nsISound, y, si es el caso, podemos reproducir sonidos a través de él.</p> +<p>El proceso de llamar a XPCOM desde un script se realiza a través de XPConnect, una capa que traduce los objetos de script en objetos nativos.</p> +<h3 id="Creando_Objetos_XPCOM" name="Creando_Objetos_XPCOM">Creando Objetos XPCOM</h3> +<p>Hay tres pasos a seguir a la hora de llamar a un componente XPCOM.</p> +<ol> + <li>Obtener el componente</li> + <li>Obtener la parte del componente que implementa la interfaz que queremos utilizar.</li> + <li>Llamar a la función que necesitamos</li> +</ol> +<p>Una vez que se han llevado a cabo los dos primeros pasos, podemos repetir el último paso tantas veces como sea necesario. Digamos que queremos renombrar un archivo. Para eso podemos utilizar la interfaz nsILocalFile. El primer paso es obtener un componente archivo. Después, hacemos una petición al componente y obtenemos la porción que implementa la interfaz nsILocalFile. Por último, llamamos a las funciones proporcionadas por la interfaz. Esta interfaz se utiliza para representar un único archivo.</p> +<p>Hemos visto que las interfaces siempre se nombran comenzando con ‘nsI’. Los componentes, por otra parte, se referencian utilizando una sintaxis URI. Mozilla almacena una lista de todos los componentes disponibles en su propio registro. Un usuario puede instalar nuevos componentes si lo desea. Todo esto funciona de forma muy parecida a los plug-ins.</p> +<p>Mozilla proporciona un componente archivo, es decir, un componente que implementa nsILocalFile. Este componente puede ser referenciado para ser utilizado usando la URI ‘@mozilla.org/file/local;1’. Para especificar un determinado componente se utiliza la forma componente: URI. Se puede referenciar otros componentes de forma similar.</p> +<p>Se puede utiliar esta URI para obtener el componente. Para obtener un componente podemos utilizar un código JavaScript similar al siguiente:</p> +<pre>var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance(); +</pre> +<p>Se obtiene el componente archivo y éste se almacena en la variable unArchivo.</p> +<p>La palabra clave <code>Components</code> del ejemplo anterior hace referencia a un objeto general que proporciona algunas funciones relacionadas con componentes. En este caso, obtenemos la clase de un componente a partir de la propiedad <code>classes</code>. La propiedad <code>classes</code> es un vector de todos los componentes disponibles. Para obtener un componente diferente, simplemente tendrías que reemplazar la URI de este componente por la del componente que quieras utilizar. Por último, se crea una instancia con la función <code>createInstance</code>.</p> +<p>Deberías comprobar el valor de retorno de <code>createInstance</code> para asegurarte de que no sea null, lo que indicaría que el componente no existe.</p> +<p>Llegados a este punto tenemos solo una referencia al componente archivo en sí. Para poder llamar a sus funciones necesitamos obtener una de sus interfaces, en este caso nsILocalFile. Necesitamos añadir una segunda línea de código:</p> +<pre>var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (unArchivo) unArchivo.QueryInterface(Components.interfaces.nsILocalFile); +</pre> +<p><code>QueryInterface</code> es una función proporcionada por todos los componentes que puede ser utilizada para obtener una interfaz específica de ese componente. Esta función toma un solo parámetro, la interfaz que queremos obtener. La propiedad <code>interfaces</code> del objeto <code>Components</code> contiene una lista de todas las interfaces disponibles. En este caso, utilizamos la interfaz nsILocalFile y la pasamos como parámetro a <code>QueryInterface</code>. El resultado es que unArchivo será una referencia a la parte del componente que implementa la interfaz nsILocalFile.</p> +<p>Las dos líneas de JavaScript anteriores pueden ser utilizadas para obtener cualquier interfaz de un componente. Simplemente reemplaza el nombre del componente con el nombre del componente que quieras utilizar y sustituye también el nombre de la interfaz. Por supuesto, también puedes utilizar cualquier nombre de variable. Por ejemplo, para obtener una interfaz sonido, puedes hacer lo siguiente:</p> +<pre>var sonido = Components.classes["@mozilla.org/sound;1"].createInstance(); +if (sonido) sonido.QueryInterface(Components.interfaces.nsISound); +</pre> +<p>Las interfaces XPCOM pueden heredar de otras interfaces. Las interfaces que heredan de otras tienen sus propias funciones y las funciones de todas las interfaces de las que heredan. Todas las interfaces heredan de una interfaz raíz llamada nsISupports. En esta interfaz se define la función <code>QueryInterface</code>, que ya hemos visto. Dado que todos los componentes implementan la interfaz nsISupports, la función <code>QueryInterface</code> está disponible en todos los componentes.</p> +<p>Varios componentes distintos pueden implementar la misma interfaz. Normalmente, suelen ser subclases de la original pero no es necesario. Cualquier componente puede implementar la funcionalidad de nsILocalFile. Además, un componente puede implementar varias interfaces. Por esto es por lo que se necesitan dos pasos a la hora de obtener una interfaz con la que llamar a las funciones.</p> +<p>De todas formas, existe un atajo que podemos utilizar dado que estas dos líneas se utilizan tan amenudo:</p> +<pre>var aLocalFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile); +</pre> +<p>Esto tiene el mismo efecto que las dos líneas anteriores pero en una sola línea de código, lo cual elimina la necesidad de crear la instancia y pedir una interfaz en dos pasos distintos.</p> +<p>Si llamas a <code>QueryInterface</code> sobre un objeto y la interfaz pedida no está soportada por el objeto, se lanza una excepción. Si no estas seguro de si un componente soporta una determinada interfaz, puedes utilizar el operador instanceof para comprobarlo:</p> +<pre>var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (unArchivo instanceof Components.interfaces.nsILocalFile){ + // hacer algo +} +</pre> +<p>El operador instanceof devuelve verdadero si unArchivo implementa la interfaz nsILocalFile. Esto tiene el efecto secundario de llamar a <code>QueryInterface</code>, de forma que unArchivo será un nsILocalFile después.</p> +<h3 id="Llamando_a_las_Funciones_de_una_Interfaz" name="Llamando_a_las_Funciones_de_una_Interfaz">Llamando a las Funciones de una Interfaz</h3> +<p>Ahora que tenemos un objeto que referencia un componente con la interfaz nsILocalFile, podemos llamar a las funciones de nsILocalFile a través de él. La tabla siguiente muestra alguna de las propiedades y métodos de la interfaz nsILocalFile.</p> +<p>Propiedad / método Descripción</p> +<dl> + <dt> + initWithPath </dt> + <dd> + Este método se utiliza para inicializar la ruta y el nombre de archivo para nsILocalFile. El primer parámetro debería ser la ruta del archivo, como ‘/usr/local/mozilla’</dd> + <dt> + leafName </dt> + <dd> + El nombre de archivo sin la parte del directorio</dd> + <dt> + fileSize </dt> + <dd> + El tamaño del directorio</dd> + <dt> + isDirectory() </dt> + <dd> + Devuelve verdadero si nsILocalFile representa un directorio</dd> + <dt> + delete(recursivo) </dt> + <dd> + Borra un archivo. Si el parámetro recursivo es true, también permite borrar un directorio y todos sus archivos y subdirectorios.</dd> + <dt> + copyTo(directorio,nuevonombre) </dt> + <dd> + Copia un archivo a otro directorio, puede usarse también para renombrar el archivo. El parámetro directorio debería ser un nsILocalFile que sirva como apuntador del directorio donde se quiere copiar el archivo.</dd> + <dt> + moveTo(directorio,nuevonombre) </dt> + <dd> + Permite mover un archivo a otro directorio, o renombrar el archivo. El parámetro directorio debería ser un nsILocalFile apuntando al directorio al que se quiere mover el archivo.</dd> +</dl> +<p>Para borrar un archivo primero tenemos que asignarlo al nsILocalFile. Podemos llamar al método <code>initWithPath</code> para indicar el archivo al que nos referimos. Simplemente asigna la ruta del archivo a su propiedad. Después, llamamos a la función <code>delete</code>. Esta función toma un parámetro que indica si debe borrar de forma recursiva. El siguiente código sirve como demostración de estos dos pasos:</p> +<pre>var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (unArchivo instanceof Components.interfaces.nsILocalFile){ + unArchivo.initWithPath("/mozilla/archivoprueba.txt"); + unArchivo.delete(false); +} +</pre> +<p>Este código obtiene el archivo de /mozilla/testfile.txt y lo borra. Prueba este ejemplo añadiendo este código a un manejador de evento. Deberías cambiar el nombre de archivo a un archivo existente en tu sistema de archivos y que quieras borrar.</p> +<p>En la tabla de funciones anterior, verás dos funciones <code>copyTo</code> y <code>moveTo</code>. Estas dos funciones puede ser utilizadas para copiar archivos y mover archivos respectivamente. Ten en cuenta que estos no toman una cadena de caracteres como parámetro indicando el directorio al que copiar o mover el archivo, si no un nsILocalFile. Esto significa que tendrás que obtener dos componentes archivo. El siguiente ejemplo muestra como copiar un archivo.</p> +<pre>function copiarArchivo(archivofuente,dirdestino) +{ + // obtenemos un componente para el archivo a copiar + var unArchivo = Components.classes["@mozilla.org/file/local;1"] + .createInstance(Components.interfaces.nsILocalFile); + if (!unArchivo) return false; + + // obtenemos un componente para el directorio donde queremos copiar + var unDirectorio = Components.classes["@mozilla.org/file/local;1"] + .createInstance(Components.interfaces.nsILocalFile); + if (!unDirectorio) return false; + + // asignamos las URLs a los componentes archivo + unArchivo.initWithPath(archivofuente); + unDirectorio.initWithPath(dirdestino); + + // finalmente, copiamos el archivo, sin renombrarlo + unArchivo.copyTo(unDirectorio,null); +} + +copyFile("/mozilla/archivoprueba.txt","/etc"); +</pre> +<h3 id="Servicios_XPCOM" name="Servicios_XPCOM">Servicios XPCOM</h3> +<p>Existen algunos componentes XPCOM especiales llamados servicios. No tienes que crear instancias de ellos porque solo puede existir uno. Los servicios proporcionan funciones de carácter general que pueden obtener o establecer el valor de información global o ejecutar operaciones en otros objetos. En lugar de llamar a createInstance, llamamos a getService para obtener una referencia al componente del servicio. A parte de eso, los servicios no son demasiado diferentes de los demás componentes.</p> +<p>Uno de los servicios que proporciona Mozilla es un servicio de marcadores. Este permite añadir marcadores a la lista de marcadores del usuario. A continuación podemos ver un ejemplo:</p> +<pre>var marcadores = Components.classes["@mozilla.org/browser/bookmarks-service;1"].getService(); +marcadores.QueryInterface(Components.interfaces.nsIBookmarksService); +marcadores.addBookmarkImmediately("http://www.mozilla.org","Mozilla",0,null); +</pre> +<p>Primero obtenemos el componente “@mozilla.org/browser/bookmarks-service;1�? y su servicio se coloca en una variable marcadores. Utilizamos QueryInterface para obtener la interfaz nsIBookmarksService. La función addBookmarkImmediately proporcionada por esta interfaz puede utilizarse para añadir marcadores. Los dos primeros parámetros de la función son la URL y el título del marcador. El tercer parámetro es el tipo del marcador que valdrá 0 normalmente, y el último parámetro es la codificación de caractéres del documento que estamos añadiendo a marcadores, que puede ser null.</p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/introducción/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/introducción/index.html new file mode 100644 index 0000000000..9c010ca596 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/introducción/index.html @@ -0,0 +1,75 @@ +--- +title: Introducción +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Introducción +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Estructura_XUL">Siguiente »</a></p> +</div> + +<p>Este tutorial te guiará durante el aprendizaje de XUL (XML Lenguaje de Interfaz de Usuario) el cual es un lenguaje múltiplataforma para describir la interfaz de usuario de las aplicaciones.</p> + +<p>Este tutorial te mostrará la creación de una sencilla interfaz de usuario de un buscador de archivos, muy parecida a la suministrada por la aplicación de Macintosh Sherlock o el cuadro de diálogo de búsqueda de archivos en Windows. Observa que solo se creará la interfaz de usuario y su funcionalidad será limitada. No se implementará la búsqueda de archivos propiamente dicha. Se mostrará una linea azul en la parte izquierda del párrafo donde se modificará el diálogo de búsqueda.</p> + +<h3 id=".C2.BFQu.C3.A9_es_XUL_y_porque_fue_creado.3F" name=".C2.BFQu.C3.A9_es_XUL_y_porque_fue_creado.3F">¿Qué es XUL y porque fue creado?</h3> + +<p>XUL (se pronuncia “sul? y rima con “cool?) fue creado para facilitar y acelerar el desarrollo del navegador Mozilla. Es un lenguaje XML, por lo tanto todas las características del XML están también en XUL.</p> + +<p>La mayoría de las aplicaciones necesitan ser desarrolladas usando características de una plataforma específica, convirtiendo el desarrollo de aplicaciones múltiplataformas en una tarea costosa y que consume mucho tiempo. Esto podrá no importarle a algunas personas, pero el usuario podría querer usar la aplicación en otros dispositivos, como equipos de bolsillo.</p> + +<p>En el pasado se desarrollaron muchas soluciones multiplataforma. Por ejemplo, Java tiene como un punto fuerte de venta la soportabilidad. XUL es un lenguaje diseñado específicamente para construir interfaces soportables.</p> + +<p>Desarrollar una aplicación toma mucho tiempo incluso si es sólo para una plataforma. El tiempo requerido para compilar y depurar también puede ser muy largo. Con XUL, una interfaz puede ser implementada y modificada de forma fácil y rápida.</p> + +<p>XUL tiene todas las ventajas de otros lenguajes XML. Por ejemplo, XHTML u otros lenguajes XML como MathML o SVG se pueden usar junto a él. Además, el texto que se muestra con XUL es fácilmente localizable, lo que significa que puede ser traducido a otros idiomas con poco esfuerzo. Se pueden aplicar hojas de estilo para modificar la apariencia de la interfaz de usuario (muy parecido a las funcionalidades de aspectos o temas presentes en Winamp o algunos gestores de ventanas).</p> + +<h3 id=".C2.BFQue_tipo_de_interfaz_se_puede_hacer_con_XUL.3F" name=".C2.BFQue_tipo_de_interfaz_se_puede_hacer_con_XUL.3F">¿Que tipo de interfaz se puede hacer con XUL?</h3> + +<p>XUL proporciona la habilidad de crear la mayoría de los elementos encontrados en las interfaces gráficas modernas. Es tan general que este puede ser aplicado a las necesidades específicas de ciertos dispositivos y tan poderoso que los desarrolladores pueden crear sofisticadas interfaces con éste.</p> + +<p>Algunos elementos que pueden ser creados son:</p> + +<ul> + <li>Controles de entrada tales como cuadros de texto y cajas de chequeo</li> + <li>Barra de herramientas con botones u otros contenidos</li> + <li>Menús en barras de menú o menú emergente</li> + <li>Pestañas de diálogo</li> + <li>Árbol de información jerárquica o tabulada</li> + <li>Teclas de accesos directo</li> +</ul> + +<p>El contenido mostrado puede ser creado desde el contenido de un archivo XUL o con datos de una fuente de datos. En Mozilla, tales fuentes de datos son utilizadas para los mensajes de una cuenta de correo, los marca-páginas y los resultados de búsqueda. El contenido de los menúes, árboles y otros elementos pueden ser llenados con estos datos, o con sus propios datos suministrados en un archivo RDF (Resource Description Framework).</p> + +<p>Existen varios casos en los cuales aplicaciones XUL son creadas:</p> + +<ul> + <li><strong>extensión de Firefox</strong>: una extensión suma funcionalidades al navegador mismo, a menudo barra de herramientas suplementaria, menúes contextuales o una interfaz de personalización del navegador. Para conseguir eso una funcionalidad XUL llamada<em>overlay</em> es usada. Permite hacer fusionar una interfaz existente como el navegador Firefox con una interfaz de usuario de la extensión. Unas extensiones pueden igualmente ser aplicadas a otros productos de Mozilla tal como Thunderbird.</li> + <li><strong>aplicación XULRunner autónoma</strong>: XULRunner es una versión empaquetada de una plataforma Mozilla permitiendo crear aplicaciones XUL autónomas. No se necesita ningún navegador para arrancar éstas aplicaciones ya que contienen sus propios archivos ejecutables.</li> + <li><strong>paquete de XUL</strong>: a medio camino entre las dos otras se encuentran aplicaciones creadas de la misma manera que una extensión pero funcionando como una aplicación independiente en una ventana separada. Estos paquetes se emplean cuando no se desea una imponente aplicación completa XULRunner pero tampoco implica la instalación de un navegador Mozilla.</li> + <li><strong>aplicación XUL remota</strong>: se puede también colocar solamente código XUL en un servidor web y abrirlo con un navegador, como cualquier página web. Sin embargo este método es limitado, por razones de seguridad sobre que acciones se permiten, como la apertura de otras ventanas.</li> +</ul> + +<p>Los tres primeros tipos necesitan cada uno su instalación en la máquina del usuario. Por lo cual, estos tipos de aplicaciones no tienen restricciones de seguridad, pueden acceder a los archivos locales y leer y escribir las preferencias, por ejemplo. El contenido XUL es normalmente cargado desde un paquete instalado dentro de Mozilla. Los archivos XUL, "scripts" asociados e imágenes de una aplicación podrán ser empaquetados dentro de un simple archivo, descargados e instalados por el usuario. Mozilla proporciona una manera de tener estos paquetes instalados y registrados sin tener que escribir un montón de códigos complejos. Además, estos paquetes pueden incorporarse al navegador u otras aplicaciones para adicionarles características; esta es la forma en que trabajan las extensiones de Firefox.</p> + +<p>También es posible abrir directamente archivos XUL desde el sistema de archivos o desde un sitio web remoto, sin embargo ellos estarán restringidos en el tipo de operaciones que puedan hacer, y algunas características de XUL no trabajarán. En cambio, si Ud. quiere cargar el contenido XUL desde un sitio remoto, el servidor web debe estar configurado para enviar archivos XUL con contenidos de tipo '<code>application/vnd.mozilla.xul+xml</code>'. El XUL es usualmente almacenado en archivos con una extensión .xul. Ud. puede abrir un archivo XUL con Mozilla tal como abre otros archivos, usando el comando Abrir Archivo desde el menú de Archivo o escribiendo la URL en la barra de dirección.</p> + +<h3 id=".C2.BFQue_necesita_conocer_para_utilizar_este_tutorial.3F" name=".C2.BFQue_necesita_conocer_para_utilizar_este_tutorial.3F">¿Que necesita conocer para utilizar este tutorial?</h3> + +<p>Debe tener conocimentos de HTML (HyperText Markup Language) y por lo menos, conocimientos básicos de XML y CSS (Cascading Style Sheets). Aquí se exponen algunas reglas que debe tener en mente:</p> + +<ul> + <li>Los elementos en XUL y sus atributos deben introducirse en minúsculas, ya que XML distingue entre mayúsculas/minúsculas (a diferencia de HTML).</li> + <li>Los valores de los atributos en XUL, deben colocarse entre comillas, aunque sean números.</li> + <li>Los archivos XUL por lo general se dividen en cuatro ficheros, uno para la disposición de los elementos, otro para la definición del estilo, otro para declarar las entidades (usadas en las localizaciones) y otro para los "script". Además se pueden tener archivos para las imágenes o para datos específicos de una plataforma.</li> +</ul> + +<p>XUL está soportado en Mozilla y otros navegadores basados en el motor Gecko, tales como Netscape 6 o posteriores y Mozilla Firefox. Debido a los diversos cambios que ha tenido la sintaxis de XUL en el tiempo, tener la última versión de su navegador permitirá que los ejemplos trabajen adecuadamente. La mayoría de los ejemplos deben funcionar en Mozilla 1.0 o posteriores. XUL es bastante similar en Firefox y los otros navegadores, aunque tiene algunas diferencias específicas como el soporte de barras de herramientas personalizables.</p> + +<p>Este tutorial intenta cubrir gran parte de la funcionalidad de XUL, no obstante, no trata todas las características. Una vez se haya familiarizado con el lenguaje XUL puede utilizar <a href="es/XUL/Elementos">la referencia de elementos del lenguaje XUL</a> (<a class="external" href="http://www.xulplanet.com/references/elemref/">en</a>) para encontrar otras características soportadas por elementos específicos del lenguaje.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Estructura_XUL">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/introducción_a_rdf/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/introducción_a_rdf/index.html new file mode 100644 index 0000000000..8315441b4c --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/introducción_a_rdf/index.html @@ -0,0 +1,136 @@ +--- +title: Introducción a RDF +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Introducción_a_RDF +tags: + - RDF + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_RDF +--- +<p>En ésta sección, miraremos el Marco de Descripción de Recursos (RDF) <small>(Resource Description Framework)</small>.</p> + +<h3 id="Marco_de_descripci.C3.B3n_de_recursos" name="Marco_de_descripci.C3.B3n_de_recursos">Marco de descripción de recursos</h3> + +<p>Podemos usar <a href="es/Tutorial_de_XUL/%c3%81rboles">los elementos del árbol</a> para mostrar un conjunto de datos, tales como bookmarks o mensajes de email. Sin embargo, Sería inconveniente hacerlo así ingresando los archivos diretamente en el archivo <a href="es/XUL">XUL</a>. Eso haría muy difícil modificar los (marcadores) bookmarks si ellos estuviesen directamente en el archivo XUL. La forma de solucionar ésto es usando un recurso de datos RDF.</p> + +<p><a href="es/RDF">RDF</a> (Marco de Descripción de Recursos) Es un formato que puede ser usado para almacenar recursos tales como marcadores o bookmarks y correos. Alternativamente, datos en otros formatos pueden ser usados y códigos de escritura que leerán el archivo y crearán datos RDF de ellos. Así es como Mozilla funciona, cuando él lee los datos tal como marcadores o bookmarks, el historial o los correos, Mozilla provee datos de recurso para este dato común para que pueda facilmente usarlos.</p> + +<p>Puedes usar cualquiera de los datos de recurso RDF proveidos para poblar árboles con datos a or you can point to an RDF file stored in XML which contains the data. This makes it very convenient to display trees with lots of rows in them. RDF can also populate other XUL elements as well such as listboxes and menus. We'll see this in the next section.</p> + +<p>A very brief overview of RDF will be provided here. For a more detailed guide to RDF, ver <a class="external" href="http://www.xulplanet.com/tutorials/mozsdk/rdfstart.php">Introducción al modelo RDF</a>, en XULPlanet. It is recommended that you read this guide if you are new to RDF.</p> + +<p>Para más información sobre RDF, ver la <a class="external" href="http://www.w3.org/TR/rdf-primer/">especificación RDF</a>.</p> + +<h4 id="RDF.2FXML" name="RDF.2FXML">RDF/XML</h4> + +<p>RDF consta de un modelo, el cual es una representación gráfica de datos. RDF/XML es un lenguaje XML que puede ser usado para representar un dato RDF. Ello contiene un conjunto de elementos bastante simples. El ejemplo de abajo muestra una simple plantilla RDF</p> + +<pre><?xml version="1.0"?> +<RDF:RDF + xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> + ... +</RDF:RDF> +</pre> + +<p>Ésto tiene similitudes con el encabezador de XUL. En vez de <code><a href="es/XUL/Elementos/window">window</a></code> element, el elemento <code>RDF</code> es usado. puedes ver el namespace (espacio de nombre) para RDF fue declarado así para que los elementos RDF sean reconocidos apropiadamente. Dentro del elemento <code>RDF</code>, podrás colocar el dato. para ver algún ejemplo de archivos RDF/XML, Mira aquellas proveidas por Mozilla. Ellos tienen la extensión rdf.</p> + +<h4 id="Base_de_datos_RDF" name="Base_de_datos_RDF">Base de datos RDF</h4> + +<p>Tomemos el ejemplo de una lista de marcadores generados desde RDF.Una lista de marcadores contiene un conjunto de registros,Cada uno con un conjunto asociado a ello, tal como una URL, Un título de marcador y un fecha de visita.</p> + +<p>Piensa en el marcador como una base de datos, el cual es almacenado en una grande tabla con numerosos campos. En el caso de RDF o como sea, Las listas pueden ser jerarquizadas también. Esto es necesario para nosotros podamos tener carpetas o categorías de los marcadores. cada uno de los campos en la base de datos RDF es un recurso, cada uno con su nombre asociado a ello. El nombre es descrito por un URI.</p> + +<p>Por ejemplo, una selección de campos en la lista de marcadores de Mozilla es descrito por los URIs below:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Nombre</td> + <td><span class="nowiki">http://home.netscape.com/NC-rdf#Nombre</span></td> + <td>Bookmark name</td> + </tr> + <tr> + <td>URL</td> + <td><span class="nowiki">http://home.netscape.com/NC-rdf#URL</span></td> + <td>URL to link to</td> + </tr> + <tr> + <td>Descripción</td> + <td><span class="nowiki">http://home.netscape.com/NC-rdf#Descripción</span></td> + <td>Bookmark description</td> + </tr> + <tr> + <td>Fecha última visita</td> + <td><span class="nowiki">http://home.netscape.com/WEB-rdf#FechaÚltimaVisita</span></td> + <td>La fecha en la cual se visitó por última vez</td> + </tr> + </tbody> +</table> + +<p>These are generated by taking a namespace name and appending the field name. In the next section, we'll look at how we can use these to fill in the field values automatically. Note that the last visited date has a slightly different namespace than the other three.</p> + +<h4 id="Ejemplo_de_archivo_RDF.2FXML" name="Ejemplo_de_archivo_RDF.2FXML">Ejemplo de archivo RDF/XML</h4> + +<p>Below, a sample RDF/XML file is shown, listing a table with three records and three fields.</p> + +<pre><RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#"> + + <RDF:Seq about="http://www.some-fictitious-zoo.com/all-animals"> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/lion"> + <ANIMALS:name>León</ANIMALS:name> + <ANIMALS:species>Panthera leo</ANIMALS:species> + <ANIMALS:class>Mamífero</ANIMALS:class> + </RDF:Description> + </RDF:li> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/arachnids/tarantula"> + <ANIMALS:name>Tarántula</ANIMALS:name> + <ANIMALS:species>Avicularia avicularia</ANIMALS:species> + <ANIMALS:class>Araña</ANIMALS:class> + </RDF:Description> + </RDF:li> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/hippopotamus"> + <ANIMALS:name>Hipopótamo</ANIMALS:name> + <ANIMALS:species>Hippopotamus amphibius</ANIMALS:species> + <ANIMALS:class>Mamífero</ANIMALS:class> + </RDF:Description> + </RDF:li> + </RDF:Seq> +</RDF:RDF> +</pre> + +<p>Here, three records have been described, one for each animal. Each <code>RDF:Description</code> tag describes a single record. Within each record, three fields are described, <code>name</code>, <code>species</code> and <code>class</code>. It isn't necessary for all records to have the same fields but it makes more sense to have them all the same.</p> + +<p>Each of three fields have been given a namespace of <code>ANIMALS</code>, the URL of which has been declared on the <code>RDF</code> tag. The name was selected because it has meaning in this case, but we could have selected something else. The namespace feature is useful because the <code>class</code> field might conflict with that used for styles.</p> + +<p>The <code>Seq</code> and <code>li</code> elements are used to specify that the records are in a list. This is much like how HTML lists are declared. The <code>Seq</code> element is used to indicate that the elements are ordered, or in sequence. Instead of the <code>Seq</code> element, you can also use <code>Bag</code> to indicate unordered data, and <code>Alt</code> to indicate data where each record specifies alternative values (such as mirror URLs).</p> + +<p>The resources can be referred to in a XUL file by combining the namespace URL followed by the field name. In the example above, the following URIs are generated which can be used to refer to the specific fields:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Nombre</td> + <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#name</span></td> + </tr> + <tr> + <td>Especies</td> + <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#species</span></td> + </tr> + <tr> + <td>Clase</td> + <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#class</span></td> + </tr> + </tbody> +</table> + +<p>Next, we'll see how we can use RDF to populate XUL elements.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Objeto_de_caja_de_árbol" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Plantillas">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/la_url_chrome/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/la_url_chrome/index.html new file mode 100644 index 0000000000..d62ed39007 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/la_url_chrome/index.html @@ -0,0 +1,59 @@ +--- +title: La URL chrome +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/La_URL_chrome +translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Introducción" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Archivos_Manifest">Siguiente »</a></p> +</div> + +<p><br> + La siguiente sección describe cómo referirse a los documentos XUL y otros archivos chrome.</p> + +<h3 id="La_URL_Chrome" name="La_URL_Chrome">La URL Chrome</h3> + +<p>Los archivos XUL pueden accederse con una URL HTTP común, igual que los archivos HTML. Sin embargo, se puede hacer referencia a los paquetes que se instalan dentro del sistema chrome de Mozilla con un URL chrome especial. Los paquetes incluidos con Mozilla ya se encuentran instalados, pero tu puedes registrar los tuyos.</p> + +<p>Los paquetes instalados tienen la ventaja de que no tienen restricciones de seguridad establecidas, que es necesario para muchas aplicaciones. Otra ventaja sobre otro tipo de URL es que maneja automáticamente múltiples temas e idiomas. Por ejemplo, una URL chrome permite referirse a un archivo del tema como una imagen, sin necesidad de saber cuál es el tema que el usuario está usando. Siempre y cuando los nombres de los archivos sean iguales en cada tema, te puedes referir a ellos usando una URL chrome. Mozilla se encargará de determinar dónde se encuentran los archivos para retornar los datos correctos. Esto significa que realmente no importa dónde se encuentre instalado el paquete para poder acceder a el. Las URL chrome son independientes de donde se encuentren instalados fisicamente los archivos. Esto hace más fácil escribir aplicaciones que tienen muchos archivos ya que no tienes que preocuparte por el detalle de dónde se encuentran localizados.</p> + +<p>La sintaxis básica de una URL chrome es la siguiente</p> + +<pre>chrome://<nombre del paquete>/<parte>/<archivo.xul> +</pre> + +<p>El texto <nombre del paquete> es el nombre del paquete, como lo puede ser<em>messenger</em> (IM) o el editor HTML. La <parte> es normalmente 'content', 'skin' o 'locale', depende la parte que quieras. <archivo.xul> es simplemente el nombre del archivo.</p> + +<p><strong>Ejemplo</strong>: <a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a></p> + +<p>El ejemplo se refiere a la ventana messenger. Puedes apuntar a un archivo que es parte del skin reemplazando 'content' con 'skin' y cambiando el nombre del archivo. Similarmente puedes apuntar a un archivo que es parte de locale usando 'locale' en lugar de 'content'.</p> + +<p>Cuando abres una URL chrome, Mozilla echa un vistazo a través de su lista de paquetes instalados e intenta localizar el archivo JAR o el directorio que concuerde con el nombre del paquete y la parte. El mapeado entre las URL chrome y los archivos JAR se especifica en el archivo de manifiesto almacenado en el directorio chrome. Si reubicases el archivo<em>messenger.jar</em> en algun otro lugar al original y actualizases el archivo de manifiesto adecuadamente, todo continuaría funcionando correctamente ya que está restringido a su lugar de instalación. Usando URLs chrome podemos permitirle detalles como este a Mozilla. Análogamente, si el usuario cambia su tema, la parte 'skin' de la URL chrome se redirecciona a una colección de archivos diferente, sin que se tengan que hacer cambios en el XUL y en los scripts.</p> + +<p>Aquí hay otros ejemplos. Fíjate como ninguna de las URLs de tema o locale establecen especificamente algun directorio.</p> + +<pre>chrome://messenger/content/messenger.xul +chrome://messenger/content/attach.js +chrome://messenger/skin/icons/folder-inbox.gif +chrome://messenger/locale/messenger.dtd +</pre> + +<p>Para referirse a algun subdirectorio, solo es necesario agregarlo al final de la URL chrome. Las siguientes URLs se refieren a la ventana de favoritos (bookmarks), presta atención que en ambas se refieren al mismo archivo, pero varía de paquete ya que uno es para la Suite de Mozilla y la otra se usa en Firefox</p> + +<pre>chrome://communicator/content/bookmarks/bookmarksManager.xul (Mozilla) +chrome://browser/content/bookmarks/bookmarksManager.xul (Firefox) +</pre> + +<p>Puedes usar las URLs chrome en cualquier lugar donde se usan las URLs comunes. Incluso puedes escribirlas directamente en la barra de dirección (URL) de la ventana del navegador de Mozilla. Si escribes una de las URL de arriba en la barra de direccion, verás una ventana que aparece donde normalmente iría una pagina web y que en su mayoría es tan funcional como si fuera una ventana separada. Algunas ventanas de dialogo pueden no funcionar correctamente si precisan de argumentos que debe asignar la ventana que la abre.</p> + +<p>En ocaciones verás URLs chrome sin el nombre de un archivo especificado, por ejemplo:</p> + +<pre>chrome://browser/content/ +</pre> + +<p>En este caso, solo el nombre del paquete y la parte son especificados. Este tipo de referencia selecciona automáticamente un archivo apropiado del directorio correspondiente. Para contenido, se selecciona un archivo con el mismo nombre del paquete y con la extension xul. En el ejemplo de arriba, el archivo browser.xul es el que se selecciona. Para messenger, el arhivo seleccionado sería messenger.xul. Cuando creas tus propias aplicaciones, deberías crear un archivo con la ventana principal usando el mismo nombre de tu aplicación, así podrás referirte a ella de una manera más práctica y corta. Esta es una práctica común para que los usuarios solo necesiten saber el nombre del paquete para ejecutar la aplicación. Por supuesto, para una extensión que modifica la interfaz del navegador, el usuario no necesitar saber la URL ya que la extensión se presenta ella misma en la interfaz gráfica.</p> + +<p>Para una piel (skin), el archivo <nombre_del_paquete>.css se selecciona; para una configuración regional, el archivo <nombre_del_paquete>.dtd es seleccionado.</p> + +<p>Recuerda, chrome URL no está relacionado con su ubicación en el disco. Las dos primeras piezas de chrome URL son el nombre del paquete y la parte (ya sea contenido, piel (skin), o locale). A pesar de que es común colocar los archivos de contenido en un directorio llamado 'content', esto está fuero de convenio alguno, y estos archivos deben ser colocados en una estructura distinta.</p> + +<p>En la siguiente sección veremos como crear archivos .manifest y paquetes.</p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/manipulando_listas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/manipulando_listas/index.html new file mode 100644 index 0000000000..90a38d41c6 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/manipulando_listas/index.html @@ -0,0 +1,168 @@ +--- +title: Manipulando listas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Manipulando_listas +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Manipulating_Lists +--- +<p>The XUL listbox provides a number of specialized methods.</p> + +<h3 id="Manipulaci.C3.B3n_de_una_lista" name="Manipulaci.C3.B3n_de_una_lista">Manipulación de una lista</h3> + +<p>The <code><a href="es/XUL/Elementos/listbox">listbox</a></code> element provides numerous methods to retrieve and manipulate its items. Although <a href="es/Tutorial_de_XUL/Controles_de_listas">listboxes</a> may be manipulated using the standard <a href="es/DOM">DOM</a> functions as well, it is recommended that the specialized listbox functions be used instead when possible. These functions are bit simpler and will do the right thing.</p> + +<p>The <code><a href="es/XUL/M%c3%a9todos/appendItem">appendItem()</a></code> function is used to append a new item to the end a list. Similar to the <a href="es/DOM/element#element.appendChild">DOM appendChild()</a> function except that it takes a string label, and you do not have to worry about where to add it in the list structure. Here is an example:</p> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_1.xul">Ver en funcionamiento</a></p> + +<pre><script> +function addItem(){ + document.getElementById('thelist').appendItem("Thursday", "thu"); +} +</script> + +<listbox id="thelist"/> + +<button label="Add" oncommand="addItem();"/> +</pre> + +<p>The <code><a href="es/XUL/M%c3%a9todos/appendItem">appendItem()</a></code> takes two arguments, the <code>label</code>, in this case 'Thursday', and a <code>value</code> 'thu'. The two arguments correspond to the <code><a href="es/XUL/Atributos/label">label</a></code> attribute and the <code><a href="es/XUL/Atributos/value">value</a></code> attribute on the <code><a href="es/XUL/Elementos/listitem">listitem</a></code> element. The value is used only as an extra optional value associated with an item which you might wish to use in a script.</p> + +<p>Similarly, there is also an <code><a href="es/XUL/M%c3%a9todos/insertItemAt">insertItemAt()</a></code> and a <code><a href="es/XUL/M%c3%a9todos/removeItemAt">removeItemAt()</a></code> function which inserts a new item and removes an existing item respectively. The syntax is as follows:</p> + +<pre>list.insertItemAt(3, "Miércoles", "mié"); +list.removeItemAt(3); +</pre> + +<p>The <code><a href="es/XUL/M%c3%a9todos/insertItemAt">insertItemAt()</a></code> function takes an additional argument, the position to insert the new item. The new item is inserted at this index, so, in the example, the new item will be added at position 3 while the item previously at that position will now be at position 4. Remember that the first item is 0. The <code><a href="es/XUL/M%c3%a9todos/removeItemAt">removeItemAt()</a></code> function will remove the item at a specific index.</p> + +<p>These three methods are also available for several other XUL elements and work in the same manner. In fact, these methods are part of the <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULSelectControlElement.html">nsIDOMXULSelectControlElement</a> interface so any XUL elements which implement this interface have these methods. This includes the <code><a href="es/XUL/Elementos/menulist">menulist</a></code>, <code><a href="es/XUL/Elementos/radiogroup">radiogroup</a></code> and <code><a href="es/XUL/Elementos/tabs">tabs</a></code> elements. For example, to add a new item to a <a href="es/Tutorial_de_XUL/Men%c3%baes_de_barras_simples">menulist</a>, you can use the same syntax as for a <a href="es/Tutorial_de_XUL/Controles_de_listas">listbox</a>. The right kind of element will be appended in each situation.</p> + +<h3 id="Lista_de_selecci.C3.B3n" name="Lista_de_selecci.C3.B3n">Lista de selección</h3> + +<p>The <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULMultiSelectControlElement.html">nsIDOMXULMultiSelectControlElement</a> interface provides two additonal properties, <code><a href="es/XUL/Propiedades/selectedIndex">selectedIndex</a></code> and <code><a href="es/XUL/Propiedades/selectedItem">selectedItem</a></code>. The former returns the index of the selected item while the latter returns the selected element. For instance the selectedItem of a menulist will be the <code><a href="es/XUL/Elementos/menuitem">menuitem</a></code> that is selected. If no item is selected, <code><a href="es/XUL/Propiedades/selectedIndex">selectedIndex</a></code> will return -1, while <code><a href="es/XUL/Propiedades/selectedItem">selectedItem</a></code> will return null.</p> + +<h4 id="Obteniendo_el_.C3.ADtem_seleccionado" name="Obteniendo_el_.C3.ADtem_seleccionado">Obteniendo el ítem seleccionado</h4> + +<p>These two properties are commonly inspected during a select event, as in the following example:</p> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_2.xul">Ver en funcionamiento</a></p> + +<pre><listbox id="thelist" onselect="alert(this.selectedItem.label);"> + <listitem label="Corto"/> + <listitem label="Medio"/> + <listitem label="Largo"/> +</listbox> +</pre> + +<p>The select event is fired for a <a href="es/XUL/Elementos/listbox">listbox</a> when an item in the list is selected. The select handler here displays an alert containing the label of the selected item in the list. Since the select event fired we can assume that an item is selected. In other cases, you may wish to check to ensure that selectedItem is not null before continuing.</p> + +<p>The select event is also fired when a radio button in a <code><a href="es/XUL/Elementos/radiogroup">radiogroup</a></code> is selected and when a tab is selected in a <code><a href="es/XUL/Elementos/tabs">tabs</a></code> element. However, <code><a href="es/XUL/menulist">menulists</a></code> do not fire the select event; instead you can listen to the command event to handle when an item is selected.</p> + +<p>For the <code><a href="es/XUL/Elementos/tabs">tabs</a></code> element, it is often more convenient to use functions of the <code><a href="es/XUL/Elementos/tabbox">tabbox</a></code> element instead. It also has a <code><a href="es/XUL/Propiedades/selectedIndex">selectedIndex</a></code> function which will return the index of the selected tab. However, to get the selected item, use the tabbox's <code><a href="es/XUL/Propiedades/selectedTab">selectedTab</a></code> property instead. Or, use the <code><a href="es/XUL/Propiedades/selectedPanel">selectedPanel</a></code> property to get the selected panel, that is, return the content associated with the <a href="es/XUL/Elementos/tab">tab</a>.</p> + +<h4 id="Cambiando_la_selecci.C3.B3n" name="Cambiando_la_selecci.C3.B3n">Cambiando la selección</h4> + +<p>All of the selection related properties described above may also be assigned a new value to change the selection. In the next example, the <code><a href="es/XUL/Propiedades/selectedIndex">selectedIndex</a></code> property of a <code><a href="es/XUL/Elementos/radiogroup">radiogroup</a></code> element is changed based on the value entered in a textbox. This code isn't foolproof though; for example it doesn't check if the value entered is out of range. You will want to make sure that you add this kind of error checking.</p> + +<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_3.xul">Ver en funcionamiento</a></p> + +<pre><script> +function doSelect(){ + var val = document.getElementById('number').value; + val = Number(val); + if (val != null) + document.getElementById('level').selectedIndex = val - 1; +} +</script> + +<hbox align="center"> + <label value="Escriba un número del 1 a 3:"/> + <textbox id="number"/> + <button label="Seleccionar" oncommand="doSelect();"/> +</hbox> + +<radiogroup id="level"> + <radio label="Excelente"/> + <radio label="Bueno"/> + <radio label="Pobre"/> +</radiogroup> +</pre> + +<p>Listboxes also support multiple selection and the functions of the <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULMultiSelectControlElement.html">nsIDOMXULMultiSelectControlElement</a> interface. This interface provides a number of functions specifically for handling multiple selection. For example the <code><a href="es/XUL/Propiedades/selectedItems">selectedItems</a></code> property holds a list of the items that are selected, while the <a href="es/XUL/Propiedades/selectedCount">selectedCount</a> property holds the number of items selected. Typically, you will use these properties to iterate over the list and perform some operation for each item. Be careful when iterating over the selected items; if you modify the items in the list while iterating, the list will change and the selection properties may return different values. This is one reason why it is useful to manipulate the list by the item rather than by index.</p> + +<h4 id="Deleting_selected_items" name="Deleting_selected_items">Deleting selected items</h4> + +<p>The following example shows a method of deleting the selected items properly:</p> + +<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_4.xul">Ver en funcionamiento</a></p> + +<pre><script> +function deleteSelection(){ + var list = document.getElementById('thelist'); + var count = list.selectedCount; + while (count--){ + var item = list.selectedItems[0]; + list.removeItemAt(list.getIndexOfItem(item)); + } +} +</script> + +<button label="Delete" oncommand="deleteSelection();"/> + +<listbox id="thelist" seltype="multiple"> + <listitem label="Cheddar"/> + <listitem label="Cheshire"/> + <listitem label="Edam"/> + <listitem label="Gouda"/> + <listitem label="Havartie"/> +</listbox> +</pre> + +<p>Inside the while loop we</p> + +<ul> + <li>first get the selecteItem at index 0. The first selected item is always retrieved as the size of the array will decrease as the items are removed.</li> + <li>Next, we remove the item using the <code><a href="es/XUL/M%c3%a9todos#removeItemAt">removeItemAt()</a></code> function. Since this function requires an index</li> + <li>we can convert between an item and an index using the <code><a href="es/XUL/M%c3%a9todos#getIndexOfItem">getIndexOfItem()</a></code> function. There is also a corresponding <code><a href="es/XUL/M%c3%a9todos#getItemAtIndex">getItemAtIndex()</a></code> function to do the reverse.</li> +</ul> + +<p>The <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULMultiSelectControlElement.html">nsIDOMXULMultiSelectControlElement</a> interface also provides methods for modifying the selected items. For instance, the <code><a href="es/XUL/M%c3%a9todos/addItemToSelection">addItemToSelection()</a></code> function adds a new item to the set of selected items, without clearing the existing selection. The <code><a href="es/XUL/M%c3%a9todos#removeItemFromSelection">removeItemFromSelection()</a></code> function removes a single item from the selection.</p> + +<h3 id="Lista_desplegable" name="Lista_desplegable">Lista desplegable</h3> + +<p>If there are more rows in the <code><a href="es/XUL/Elementos/listbox">listbox</a></code> than can be displayed, a scroll bar will appear to allow the user to scroll the list. The scroll position may be adjusted using a couple of listbox methods.</p> + +<p>The <code><a href="es/XUL/M%c3%a9todos/scrollToIndex">scrollToIndex()</a></code> method scrolls to a given row. This listbox will scroll such that the row will be the top row visible, unless the row is near the end of the list of items. The <code><a href="es/XUL/M%c3%a9todos/ensureIndexIsVisible">ensureIndexIsVisible()</a></code> method is similar in that it also scrolls to show a row, but this method does not scroll if the item is already visible. Thus, the former function is used to scroll to a specific row while the latter is used just to make sure that a row is visible. There is also an <code><a href="es/XUL/M%c3%a9todos/ensureIndexIsVisible">ensureIndexIsVisible()</a></code> that takes an item as an argument instead of an index. Compare the effect of both functions at different scroll positions in this example:</p> + +<p><strong>Ejemplo 5</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_5.xul">Ver en funcionamiento</a></p> + +<pre><button label="scrollToIndex" + oncommand="document.getElementById('thelist').scrollToIndex(4);"/> +<button label="ensureIndexIsVisible" + oncommand="document.getElementById('thelist').ensureIndexIsVisible(4);"/> + +<listbox id="thelist" rows="5"> + <listitem label="1"/> + <listitem label="2"/> + <listitem label="3"/> + <listitem label="4"/> + <listitem label="5"/> + <listitem label="6"/> + <listitem label="7"/> + <listitem label="8"/> + <listitem label="9"/> + <listitem label="10"/> + <listitem label="11"/> + <listitem label="12"/> +</listbox> +</pre> + +<p>Seguimos con los <a href="es/Tutorial_de_XUL/Objectos_de_caja">objetos de caja de XUL</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Modificando_una_interfaz_XUL" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Objetos_de_caja">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/medidores_de_progreso/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/medidores_de_progreso/index.html new file mode 100644 index 0000000000..687e1fbcc3 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/medidores_de_progreso/index.html @@ -0,0 +1,41 @@ +--- +title: Medidores de Progreso +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Medidores_de_Progreso +tags: + - Tutorial_de_XUL + - XUL +--- +<p>En esta seccion veremos como crear medidores progreso (o indicador de progreso).</p> +<h3 id="A.C3.B1adiendo_un_indicador_de_progreso" name="A.C3.B1adiendo_un_indicador_de_progreso">Añadiendo un indicador de progreso</h3> +<p>Un indicador de progreso es una barra que indica la cantidad de trabajo realizado para completar una acción. Son tipicamente usados cuando se han de descargar ficheros o cuando realizamos una larga operación. XUL tiene indicadores de progreso, habiendo dos tipos de ellos: determinados e indeterminados.</p> +<p>Los indicadores de progreso determinados se usan cuando conocemos la cantidad de trabajo necesaria para llevar a cabo una operación. El indicador de progreso se irá llenando y una vez lleno completamente, la operación deberá haber terminado. Este puede usarse para dialogos de descarga de ficheros, ya que conocemos el tamaño del fichero.</p> +<p>Los indicadores indeterminados se usan cuando no sabemos cuanto trabajo puede llevar una operación.</p> +<p>Indicador de progreso determinado : <img alt="Image:prog-det.png" class=" internal" src="/@api/deki/files/814/=Prog-det.png"></p> +<p>Indicador de progreso indeterminado : <img alt="Image:prog-udet.png" class=" internal" src="/@api/deki/files/815/=Prog-udet.png"></p> +<p>Los indicadores de progreso tienen la siguiente sintaxis:</p> +<pre><progressmeter + id="identificador" + mode="determined" + value="0%"/> +</pre> +<p>Los atributos son como sigue:</p> +<dl> <dt>id </dt> <dd>El identificador para el indicador de progreso</dd> <dt>mode </dt> <dd>El tipo de indicador de progreso. Si es determined, será un indicador de progreso determinado y se irá llenando conforme se realize la tarea. Sí es undetermined será un indicador de progreso indeterminado, donde no conocemos cuando finalizará la operación. El valor por defecto, si no definimos este atributo, es determined.</dd> +</dl> +<dl> <dt>value </dt> <dd>El valor actual del indicador de progreso. Solo deberíamos usar cuando el indicador de progreso es del tipo determinado. El valor debe ser un porcentaje desde 0% a 100%. Este atributo puede ser cambiado desde un script conforme vaya completandose la tarea.</dd> +</dl> +<div class="highlight"> +<p>Incluyamos un indicador de progreso a nuestro dialogo de encontrar ficheros. Deberíamos poner un indicador indeterminado, ya que no sabemos cuantos ficheros tendremos que comprobar en nuestra búsqueda o cuanto tardaremos en hacerlo. Sin embargo, pondremos uno determinado por ahora para ver como funciona. El indicador de progreso normalmente solo aparecerá cuando la búsqueda se está llevando a cabo. Más tarde crearemos un script para mostrarlo y ocultarlo.</p> +<p> </p> +<pre class="eval"><hbox> + + <span class="highlightred"><progressmeter value="50%" style="margin: 4px;"/></span> +</pre> +<pre class="eval"> <spacer flex="1" /> +</hbox> +</pre> +<p><img alt="Image:progress1.png" class=" internal" src="/@api/deki/files/816/=Progress1.png"></p> +<p>El atributo lo hemos puesto como 50% para poder ver el indicador inicialmente. Tambíen le hemos asignado un margen de 4 pixels para separarlo de los márgenes de la ventana. Tal como indicamos anteriormente, solo queremos ver el indicador de progreso cuando se esté realizando la búsqueda. Un script lo ocultará y mostrará cuando sea necesario.</p> +</div> +<p>En la proxima seccion, aprenderemos como adicionar elementos a una ventana usando HTML.</p> +<p><span class="comment">Categorías</span></p> +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/menús_con_desplazamiento/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_con_desplazamiento/index.html new file mode 100644 index 0000000000..c5fb82fb1c --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_con_desplazamiento/index.html @@ -0,0 +1,56 @@ +--- +title: Menús con desplazamiento +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Menús_con_desplazamiento +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - para_revisar +--- +<p>Esta sección describe los menús con desplazamiento y cómo usar el mecanismo con otros elementos.</p> + +<h3 id="Creaci.C3.B3n_de_un_men.C3.BA_largo" name="Creaci.C3.B3n_de_un_men.C3.BA_largo">Crear un menú grande</h3> + +<p>Te preguntarás qué sucede si creas un menú con muchas opciones en él, de tal forma que no todos los ítems aparezcan en la pantalla a la vez. Mozilla <img alt="scrolling-menu.jpg" class="internal rwrap" src="/@api/deki/files/4819/=scrolling-menu.jpg" style="float: right;">proveerá un mecanismo de despliegue que te permitirá moverte a través de los ítems.</p> + +<div class="float-right"><img alt="Image:menuscroll1.png" class="internal" src="/@api/deki/files/761/=Menuscroll1.png"></div> + +<p>Si el espacio disponible es demasiado pequeño, aparecerán flechas al final de cada menú. Si mueves el ratón sobre las flechas, el menú se desplegará hacia abajo o hacia arriba. Si el espacio disponible es lo suficientemente grande, las flechas no aparecerán. Observa que el comportamiento exacto de este mecanismo dependerá del tema actual.</p> + +<p>Este comportamiento es automático. No tienes que hacer nada para obtener menús desplegables. Se aplicará a menús en barras de menú, en emergentes o listas de menús. Se implementa usando un elemento <code><a href="/es/XUL/Elementos#arrowscrollbox" title="es/XUL/Elementos#arrowscrollbox">arrowscrollbox</a></code>. Este elemento puede usarse para crear cajas desplegables con flechas.</p> + +<p>El elemento <code><a href="/es/XUL/Elementos#arrowscrollbox" title="es/XUL/Elementos#arrowscrollbox">arrowscrollbox</a></code> puede usarse en cualquier lugar donde se pueda usar una caja normal. No tienes que usarlo en menús. Siempre es un caja vertical y puede contener cualquier elemento en su interior. Puedes usarlo para implementar una lista cuando no deseas hacer un menú desplegable.</p> + +<h4 id="Ejemplo_-_desplazamiento_de_una_lista_de_botones" name="Ejemplo_-_desplazamiento_de_una_lista_de_botones">Ejemplo - lista de botones con desplazamiento</h4> + +<p>El siguiente ejemplo muestra cómo crear una lista desplegable de botones (tendrás que redefinir el tamaño de la ventana para ver los botones de flechas):</p> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul">Ver en funcionamiento</a></p> + +<pre><arrowscrollbox orient="vertical" flex="1"> + <button label="Rojo"/> + <button label="Azul"/> + <button label="Verde"/> + <button label="Amarillo"/> + <button label="Naranja"/> + <button label="Plata"/> + <button label="Lavenda"/> + <button label="Oro"/> + <button label="Turquesa"/> + <button label="Melocotón"/> + <button label="Marrón"/> + <button label="Negro"/> +</arrowscrollbox> +</pre> + +<p>Si pruebas este ejemplo, primero abrirá a tamaño total. Sin embargo, si encoges el alto de la ventana, las flechas de despliegue aparecerán. Al volver a hacer la ventana más grande, las flechas desaparecerán.</p> + +<p>Puedes establecer una altura máxima usando la propiedad CSS <code>max-height</code> en el <code>arrowscrollbox</code> para limitar el tamaño de la caja de despliegue y así hacer que las flechas aparezcan todo el tiempo.</p> + +<p>El <code>arrowscrollbox</code> es principalmente útil en menús y emergentes.</p> + +<p>A continuación veremos cómo añadir <a href="/es/Tutorial_de_XUL/Añadiendo_los_gestores_de_eventos" title="es/Tutorial_de_XUL/Añadiendo_los_gestores_de_eventos">gestores de eventos a elementos XUL</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Menús_emergentes" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Añadiendo_los_gestores_de_eventos">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/menús_de_barras_simples/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_de_barras_simples/index.html new file mode 100644 index 0000000000..30f475f63b --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_de_barras_simples/index.html @@ -0,0 +1,168 @@ +--- +title: Barras de menús simples +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Menús_de_Barras_Simples +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - Tutoriales + - XUL + - para_revisar +translation_of: Archive/Mozilla/XUL/Tutorial/Simple_Menu_Bars +--- +<p>En esta sección veremos cómo crear una barra de menús.</p> +<h3 id="Creando_un_Men.C3.BA" name="Creando_un_Men.C3.BA">Crear un menú</h3> +<p>XUL tiene varias formas de crear un menú. La más simple es agregar una barra de menús con una fila de menús en ella como tienen muchas aplicaciones. También se pueden crear menús emergentes. Las características de menús en XUL consisten en una cantidad de elementos diferentes que permiten la creación de barras de menú o menús emergentes. Los elementos u opciones en dichos menús pueden ser personalizados sin mucha dificultad. Vimos ya una <a href="/es/Tutorial_de_XUL/Controles_de_listas" title="es/Tutorial de XUL/Controles de listas">parte de cómo construir un menú </a>usando <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menulist.html">menulist</a></code>. En esta sección ampliaremos el tema.</p> +<p>Las barras de menús son creadas, generalmente, de manera muy similar a las barras de herramientas o <code><a href="../../../../en/XUL/toolbar" rel="custom nofollow">toolbar</a></code>. Una barra de menús puede ser ubicada de manera opcional dentro de una <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_toolbox.html">toolbox</a></code> (caja de herramientas) y el menú funcionará como cualquier otra barra de herramientas. XUL, sin embargo, tiene ciertos elementos de menú especiales que proporcionará funciones características de los menús clásicos.</p> +<p>Hay 5 elementos asociados con la creación de una barra de menús y sus menús, que se explican brevemente a continuación pero en los que se profundizará más adelante:</p> +<dl> + <dt> + <a href="../../../../en/XUL/menubar" rel="custom nofollow">menubar</a></dt> + <dd> + </dd> + <dd> + El contenedor de una fila de menús.</dd> +</dl> +<p><strong><span style="font-family: Georgia;"><a href="../../../../en/XUL/menu" rel="custom nofollow">menu</a></span></strong></p> +<dl> +</dl> +<dl> + <dd> + A pesar del nombre, es sólo el título del menú en la barra (menubar). Este elemento puede aparecer, también, de forma separada.</dd> +</dl> +<dl> + <dt> + <a href="../../../../en/XUL/menupopup" rel="custom nofollow">menupopup</a></dt> + <dd> + </dd> + <dd> + La ventana emergente que aparecerá cuando se haga clic en el título del menú. Esta caja contendrá una lista de comandos.</dd> +</dl> +<dl> + <dt> + <a href="../../../../en/XUL/menuitem" rel="custom nofollow">menuitem</a></dt> + <dd> + </dd> + <dd> + Un comando en un menú. Aparece dentro de <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menupopup.html">menupopup</a></code>.</dd> +</dl> +<dl> + <dt> + <a href="../../../../en/XUL/menuseparator" rel="custom nofollow">menuseparator</a></dt> + <dd> + </dd> + <dd> + Una barra de separación en un menú. Aparece dentro de <code>menupopup</code>.</dd> +</dl> +<p>Ahora ya se pueden personalizar los menús dentro de una barra de menús para poder contener lo que queramos en cualquier plataforma excepto Macintosh. Esto es debido a que Macintosh posee su menú especial propio en la parte superior de la pantalla y es controlado por el sistema. Si bien se pueden crear menús personalizados, cualquier regla de estilo especial o elementos que no sean menús pueden ser omitidos. Esto se debe tener muy presente al crear menús.</p> +<h5 id="Ejemplo_de_una_barra_de_menús_simple"><strong>Ejemplo de una barra de menús simple</strong></h5> +<p><strong>Ejemplo</strong>:</p> +<div class="float-right"> + <img align="right" alt="simple_mnubar.jpg" class="internal rwrap" src="/@api/deki/files/4813/=simple_mnubar.jpg"></div> +<pre><toolbox flex="1"> + <menubar id="ejemplo-barra-de-menus"> + <menu id="menu-archivo" label="Archivo"> + <menupopup id="archivo-emergente"> + <menuitem label="Nuevo"/> + <menuitem label="Abrir"/> + <menuitem label="Guardar"/> + <menuseparator/> + <menuitem label="Salir"/> + </menupopup> + </menu> + <menu id="menu-editar" label="Editar"> + <menupopup id="editar-emergente"> + <menuitem label="Deshacer"/> + <menuitem label="Rehacer"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<p>Aquí, una barra de menús sencilla es creada utilizando el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menubar.html">menubar</a></code>. Éste crea una fila en donde se ubicarán los menús. Dos menús: Archivo y Editar se crearon en ella. Los elementos <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menu.html">menu</a></code> crean el título en la parte superior del menú, el que aparece en la barra de menús. Los menús emergentes se crean utilizando el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menupopup.html">menupopup</a></code>. Aparecerán cuando el usuario haga clic en el menú padre. El tamaño de dicho menú emergente dependerá de lo que contenga, siempre siendo suficientemente amplio como para que entren todos los comandos creados utilizando el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menuitem.html">menuitem</a></code>. Cada uno representa un comando individual dentro del menú emergente.</p> +<p>También se pueden crear separadores dentro de los menús utilizando el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_menuseparator.html">menuseparator</a></code>. Se utiliza para separar grupos de menuitems.</p> +<h4 id="menubar_element" name="menubar_element">Elemento<code> menubar</code></h4> +<p><code><code><a href="../../../../en/XUL/menubar" rel="custom nofollow">menubar</a></code></code> es una caja que contiene menús. Nótese que fue ubicada en una <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_toolbox.html">toolbox</a></code> flexible. menubar no tiene atributos especiales sino que es un tipo de caja. Esto significa que se podría crear un menubar vertical con sólo configurar el atributo <code> <code><span id="a-orient"><a href="../../../../en/XUL/Attribute/orient" rel="custom nofollow">orient</a></span></code></code> a vertical.</p> +<h4 id="Elemento_menu">Elemento <span><code>menu</code></span></h4> +<p>El elemento <code><code><a href="../../../../en/XUL/menu" rel="custom nofollow">menu</a></code></code> funciona de manera muy similar al elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_button.html">button</a></code>. Acepta algunos atributos idénticos y otros adicionales:</p> +<dl> + <dt> + <a href="../../../../en/XUL/Attribute/id" rel="custom nofollow">id</a></dt> + <dd> + </dd> + <dd> + El identificador único del título del menú.</dd> +</dl> +<p><strong><span style="font-family: Georgia;"><a href="../../../../en/XUL/Attribute/label" rel="custom nofollow">label</a></span></strong></p> +<dl> +</dl> +<dl> + <dd> + El texto que va a aparecer en el menú (Archivo y Editar en el ejemplo anterior).</dd> +</dl> +<dl> + <dt> + <a href="../../../../en/XUL/Attribute/disabled" rel="custom nofollow">disabled</a></dt> + <dd> + </dd> + <dd> + Es un atributo booleano que determina si el menú está deshabilitado o no. Aunque se puede, rara vez se necesita deshabilitar un menú completo. Este atributo puede ser configurado como <code>true</code> o <code>false</code>, siendo este último valor aquél por defecto.</dd> +</dl> +<dl> + <dt> + <a href="../../../../en/XUL/Attribute/accesskey" rel="custom nofollow">accesskey</a></dt> + <dd> + </dd> + <dd> + La tecla que el usuario puede presionar para activar el menú. Por lo general, ésta es la letra que aparece subrayada en el título del menú. Mozilla se fijará en el atributo label y le agregará el subrayado al carácter especificado aquí. Por esta razón es que se debe especificar un carácter que aparece en dicho título de ser posible (la tecla de acceso aún funcionará si no aparece).</dd> +</dl> +<div class="float-right"> + <img alt="Image:menubar-ex2.jpg" class="internal" src="/@api/deki/files/755/=Menubar-ex2.jpg"></div> +<div class="float-right"> + El elemento <code>menu </code>normalmente se ubica en un menubar, aunque no necesariamente. Sin embargo, le aportará un aspecto diferente. La imagen muestra lo que el aspecto que tendría el ejemplo anterior sin la barra de menús.</div> +<h4 id="Elemento_menupopup">Elemento <code>menupopup</code></h4> +<div class="float-right"> + El elemento <code>menupopup</code> genera el menú emergente que contiene los comandos. Es un tipo de caja que, por defecto, se orienta verticalmente. Se puede cambiar a horizontal si se desea que se ubiquen en una fila los <code>menuitem</code>. Normalmente sólo elementos <code>menuitem</code> y/o <code>menuseparator</code> se ubicarán en un <code>menupopup</code>; pero se puede ubicar cualquier elemento dentro de un menupopup, aunque será ignorado en una Macintosh.</div> +<h4 id="Elemento_menuitem">Elemento <code>menuitem</code></h4> +<p>El elemento <code>menuitem</code> es muy similar al elemento <code>menu</code> y tiene algunos de los mismos atributos:</p> +<dl> + <dt> + <a href="../../../../en/XUL/Attribute/id" rel="custom nofollow">id</a></dt> + <dd> + </dd> + <dd> + El identificador único del título del menú.</dd> +</dl> +<dl> + <dt> + <a href="../../../../en/XUL/Attribute/label" rel="custom nofollow">label</a></dt> + <dd> + </dd> + <dd> + El texto que va a aparecer en el menú.</dd> +</dl> +<dl> + <dt> + <a href="../../../../en/XUL/Attribute/disabled" rel="custom nofollow">disabled</a></dt> + <dd> + </dd> + <dd> + Es un atributo booleano que determina si el menú está deshabilitado o no. Este atributo puede ser configurado como <code>true</code> o <code>false</code>, siendo este último valor aquél por defecto.</dd> +</dl> +<dl> + <dt> + <a href="../../../../en/XUL/Attribute/accesskey" rel="custom nofollow">accesskey</a></dt> + <dd> + </dd> + <dd> + La tecla que el usuario puede presionar para activar el menú. Por lo general, ésta es la letra que aparece subrayada en el título del menú. Mozilla se fijará en el atributo <code><code><span id="a-label"><a href="../../../../en/XUL/Attribute/label" rel="custom nofollow">label</a></span></code></code> y le agregará el subrayado al carácter especificado aquí. Por esta razón es que se debe especificar un carácter que aparece en dicho título de ser posible.</dd> +</dl> +<dl> + <dt> + <a href="../../../../en/XUL/Attribute/acceltext" rel="custom nofollow">acceltext</a></dt> + <dd> + </dd> + <dd> + Especifica la tecla de acceso rápido que aparece junto al texto del menú. Sin embargo, no asocia dichas teclas al <code><a href="../../../../en/XUL/menuitem" rel="custom nofollow">menuitem</a></code>. Se profundizará en esto <a href="/es/Tutorial_de_XUL/Atajos_de_teclado" title="es/Tutorial de XUL/Atajos de teclado">más adelante.</a></dd> +</dl> +<h4 id="Elemento_menuseparator">Elemento <span><code>menuseparator</code></span></h4> +<p>El elemento<code> <code><a href="../../../../en/XUL/menuseparator" rel="custom nofollow">menuseparator</a></code></code> no posee atributos especiales. Simplemente crea una barra horizontal (o vertical) entre los elementos menuitems vecinos.</p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/menús_emergentes/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_emergentes/index.html new file mode 100644 index 0000000000..c44daf0dcd --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/menús_emergentes/index.html @@ -0,0 +1,228 @@ +--- +title: Menús emergentes +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Menús_emergentes +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - para_revisar +--- +<p>En la última sección vimos cómo crear un menú en una barra de menú. XUL tiene además la capacidad de crear menús emergentes. Los menús emergentes normalmente se muestran cuando el usuario presiona el botón derecho del ratón.</p> + +<h3 id="Creaci.C3.B3n_de_un_men.C3.BA_emergente" name="Creaci.C3.B3n_de_un_men.C3.BA_emergente">Crear un menú emergente (menú popup)</h3> + +<p>XUL tiene tres tipos diferentes de elementos emergentes, los cuales se describen a continuación. La principal diferencia entre ellos es la manera en la que aparecen.</p> + +<ul> + <li> + <dl> + <dt>Menús emergentes simples (Plain Popups)</dt> + </dl> + </li> +</ul> + +<dl> + <dd>El menú emergente simple es una ventana emergente que aparece al presionar el botón izquierdo del ratón sobre un elemento. Son como los menús que aparecen en las barras de menú, excepto que pueden ponerse en cualquier lugar y se les puede poner cualquier contenido. Un buen ejemplo es el menú con despliegue hacia abajo que aparece cuando haces clic sobre la pequeña flecha hacia abajo que sigue a los botones adelante y atrás en una ventana del explorador.</dd> +</dl> + +<ul> + <li> + <dl> + <dt>Menús emergentes de contexto (Context Popups)</dt> + </dl> + </li> +</ul> + +<dl> + <dd>El menú emergente de contexto es una ventana emergente que aparece cuando el usuario presiona el botón de menú contextual, el cual es usualmente el botón derecho del ratón. La forma exacta en que un menú contextual es abierto varía en cada plataforma. En Macintosh, por ejemplo, el usuario puede bien presionar la tecla Control y hacer clic con el ratón o mantener presionado el botón del ratón por un momento. Además, es posible abrir un menú contextual sin usar el ratón, por ejemplo presionando la tecla Menú en un teclado.</dd> +</dl> + +<ul> + <li> + <dl> + <dt>Ventanas emergentes de información (Tooltips)</dt> + </dl> + </li> +</ul> + +<dl> + <dd>Una ventana emergente de información aparecerá cuando el usuario pasa el ratón sobre un elemento. Este tipo de emergentes puede usarse para proporcionar una descripción de un botón con mayor detalle del que puede ofrecer el botón mismo.</dd> +</dl> + +<p>Los tres tipos de elementos emergentes difieren en la forma en que son invocados por el usuario. El tipo de elemento emergente es determinado por el elemento que lo invoca.</p> + +<h4 id="Declaraci.C3.B3n_del_contenido_del_men.C3.BA" name="Declaraci.C3.B3n_del_contenido_del_men.C3.BA">Declarar el contenido de un emergente</h4> + +<p>Un elemento emergente se describe usando el elemento <code><a href="/es/XUL/Elementos#menupopup" title="es/XUL/Elementos#menupopup">menupopup</a></code>. No tiene atributos especiales y es un tipo de caja. Cuando es invocado, aparecerá una ventana conteniendo lo que sea que hayas puesto dentro del elemento <code><a href="/es/XUL/Elementos#menupopup" title="es/XUL/Elementos#menupopup">menupopup</a></code>. Sin embargo, deberías poner siempre un atributo <code><a href="/Es/XUL/Atributos#id" title="Es/XUL/Atributos#id">id</a></code> en el menupopup ya que sirve para asociar el elemento emergente con un elemento. Veremos lo que esto significa pronto. Pero primero, un ejemplo:</p> + +<pre><popupset> + <menupopup id="clipmenu"> + <menuitem label="Cortar"/> + <menuitem label="Copiar"/> + <menuitem label="Pegar"/> + </menupopup> +</popupset> +</pre> + +<p>Como puede verse aquí, se ha creado un menú emergente simple con tres órdenes. El elemento <code><a href="/es/XUL/Elementos#menupopup" title="es/XUL/Elementos#menupopup">menupopup</a></code> contiene los tres elementos del menú <code> <code><a href="../../../../en/XUL/menuitem" rel="custom nofollow">menuitem</a></code></code> . Además, como observarás, el <code><a href="/Es/XUL/Atributos#id" title="Es/XUL/Atributos#id">id</a></code> se ha puesto en el elemento <code>menupopup</code>.</p> + +<p>El elemento <code><a href="/es/XUL/Elementos#popupset" title="es/XUL/Elementos#popupset">popupset</a></code> contiene toda la declaración del menú emergente. Este es un contenedor genérico de emergentes y es opcional. Este no aparece en pantalla sino que se usa como un apartado en donde puedes declarar todos tus emergentes. Como su mismo nombre implica (<code><a href="/es/XUL/Elementos#popupset" title="es/XUL/Elementos#popupset">popupset</a></code>), puedes poner múltiples declaraciones de elementos emergentes dentro de éste. Solamente tienes que añadir, detrás del primer elemento <code><a href="/es/XUL/Elementos#popupset" title="es/XUL/Elementos#popupset">popupset</a></code>, todos los que quieras adicionalmente. Puedes tener más de un <code><a href="/es/XUL/Elementos#popupset" title="es/XUL/Elementos#popupset">popupset</a></code> en un archivo, pero lo normal es que tengas únicamente uno.</p> + +<h4 id="Asociaci.C3.B3n_de_un_men.C3.BA_emergente_con_un_elemento" name="Asociaci.C3.B3n_de_un_men.C3.BA_emergente_con_un_elemento">Asociar un emergente con un elemento</h4> + +<p>Ahora que hemos creado el elemento emergente, es hora de hacer que se muestre. Para hacerlo necesitamos asociar el emergente con un elemento en donde debería aparecer. Hacemos esto porque queremos que el emergente aparezca únicamente cuando el usuario haga clic en una determinada área de la ventana. Habitualmente será un botón o una caja concretos.</p> + +<p>Para asociar el emergente con un elemento agrega un atributo de entre tres posibles al elemento. El atributo que agregues dependerá del tipo de emergente que quieras crear. Para un menú emergente simple, agrega un atributo <code><a href="../../../../en/XUL/Attribute/popup" rel="internal">popup</a></code> al elemento. Para un menú emergente de contexto, agrega un atributo <code><a href="../../../../en/XUL/Attribute/context" rel="internal">context</a></code>. Por último, para un emergente de información, agrega un atributo <code><a href="../../../../en/XUL/Attribute/tooltip" rel="internal">tooltip</a></code>.</p> + +<p>El valor del atributo debe ser el <code><a href="/Es/XUL/Atributos#id" title="Es/XUL/Atributos#id">id</a></code> del <code>menupopup</code> que quieras que aparezca. Este es el porqué de poner un <code><u><span style="color: #3366ff;">id</span></u></code> en el emergente. De esa manera es fácil tener múltiples menús emergentes en un archivo.</p> + +<p>En el ejemplo de arriba, queremos hacer que el emergente sea un menú contextual. Eso significa que necesitamos usar el atributo <code><a href="/Es/XUL/Atributos#context" title="Es/XUL/Atributos#context">context</a></code> y agregarlo al elemento con el cual queremos tener asociado el emergente. El ejemplo de abajo muestra cómo debemos hacer esto:</p> + +<p><span id="Ejemplo_1"><a id="Ejemplo_1"></a><strong>Ejemplo 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul">Ver en funcionamiento</a></p> + +<div class="float-right"><img alt="Image:popups-ex1.png" class="internal" src="/@api/deki/files/813/=Popups-ex1.png"></div> + +<pre><popupset> + <menupopup id="clipmenu"> + <menuitem label="Cortar"/> + <menuitem label="Copiar"/> + <menuitem label="Pegar"/> + </menupopup> +</popupset> + +<box context="clipmenu"> + <label value="Haz clic con el botón derecho para ver el menú"/> +</box> +</pre> + +<p>Aquí, el menú emergente ha sido asociado con una caja. Cada vez que hagas clic contextual (clic con el botón derecho) en cualquier lugar de la caja, aparecerá el menú emergente. El emergente también aparecerá aun si haces clic sobre los descendientes de la caja, así que también funcionará si haces clic en el elemento <code><a href="/es/XUL/Elementos#label" title="es/XUL/Elementos#label">label</a></code>. El atributo <code><a href="/Es/XUL/Atributos#context" title="Es/XUL/Atributos#context">context</a></code> se ha usado para asociar la caja con un menú emergente con el mismo id. En este caso, aparecerá el menú emergente <code>clipmenu</code>. De esta forma, puedes tener varios emergentes y asociar cada uno con diferentes elementos.</p> + +<p>Podrías asociar múltiples emergentes con el mismo elemento poniendo más atributos de diferente tipo en un elemento. Podrías además asociar el mismo emergente con múltiples elementos, lo cual es una ventaja de esta sintaxis. Los emergentes solamente pueden asociarse a elementos XUL; no pueden asociarse con elementos HTML.</p> + +<h3 id="Herramientas_de_ayuda" name="Herramientas_de_ayuda">Informativos (Tooltips)</h3> + +<p>Aquí veremos una forma simple de crear emergentes de información. Hay dos maneras de crearlos. La manera más simple, que es la más común, es agregar un atributo <code><a href="/Es/XUL/Atributos#tooltiptext" title="Es/XUL/Atributos#tooltiptext">tooltiptext</a></code> a un elemento para el que quieres asignar un emergente de información.</p> + +<p>El segundo método es usar un elemento <code><a href="/es/XUL/Elementos#tooltip" title="es/XUL/Elementos#tooltip">tooltip</a></code> que tenga el contenido de un emergente de información. Esto requiere que tengas un bloque de contenido separado para cada emergente de información o que tengas un script que establezca el contenido. Sin embargo, esto te permite usar cualquier contenido además de texto en el emergente de información.</p> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul">Ver en funcionamiento</a></p> + +<pre><button label="Guardar" tooltiptext="Haz clic aquí para guardar tu trabajo"/> + +<popupset> + <tooltip id="moretip" orient="vertical" style="background-color: #33DD00;"> + <description value="Ver más información"/> + <description value="¿De verdad?" style="color: red;"/> + </tooltip> +</popupset> + +<button label="Más" tooltip="moretip"/> +</pre> + +<p>Estos dos botones tienen un emergente de información cada uno. El primero usa el estilo por defecto. El segundo usa un estilo personalizado que tiene un fondo de diferente color y estilos aplicados al texto. El emergente ha sido asociado al botón Más usando el atributo <code><a href="/Es/XUL/Atributos#tooltip" title="Es/XUL/Atributos#tooltip">tooltip</a></code>, el cual ha sido establecido al correspondiente <code><a href="/Es/XUL/Atributos#id" title="Es/XUL/Atributos#id">id</a></code> del elemento <code><a href="/es/XUL/Elementos#tooltip" title="es/XUL/Elementos#tooltip">tooltip</a></code>. Observa que el elemento <code>tooltip</code> sigue estando ubicado dentro de un elemento <code><a href="/es/XUL/Elementos#popupset" title="es/XUL/Elementos#popupset">popupset</a></code>, como los otros tipos de emergentes.</p> + +<h3 id="Definir_donde_aparecer.C3.A1_el_men.C3.BA_emergente" name="Definir_donde_aparecer.C3.A1_el_men.C3.BA_emergente">Alineación del emergente</h3> + +<p>Por defecto, las ventanas emergentes y de contexto aparecerán donde esté el puntero del ratón. Los emergentes de información se ubicarán ligeramente por debajo del elemento de tal forma que el puntero del ratón no los oculte. Hay casos sin embargo, en los que vas a querer indicar con mayor detalle dónde debe aparecer el emergente. Por ejemplo, el menú emergente que aparece cuando haces clic en el botón Atrás en un explorador debería aparecer por debajo del botón Atrás y no donde está el puntero del ratón.</p> + +<p>Para cambiar la posición del emergente, puedes usar un atributo adicional, <code><a href="/Es/XUL/Atributos#position" title="Es/XUL/Atributos#position">position</a></code>, en el <code><a href="/es/XUL/Elementos#menupopup" title="es/XUL/Elementos#menupopup">menupopup</a></code>. Puedes incluso agregarlo al elemento <code><a href="/es/XUL/Elementos#menupopup" title="es/XUL/Elementos#menupopup">menupopup</a></code>. Este atributo se usa para indicar el lugar del emergente relativo al elemento que lo invoca. Puede establecerse en distintos valores, que se describen brevemente a continuación:</p> + +<dl> + <dt>after_start</dt> + <dd>El emergente aparece debajo del elemento con los bordes izquierdos de éste y la ventana emergente alineados. Si la ventana emergente es más grande que el elemento, se extiende hacia la derecha. Este es el valor usado para los menús colgantes asociados con los botones Atrás y Adelante de los exploradores.</dd> +</dl> + +<dl> + <dt>after_end</dt> + <dd>El emergente aparece debajo del elemento con los bordes derechos de éste y la ventana emergente alineados.</dd> +</dl> + +<dl> + <dt>before_start</dt> + <dd>El emergente aparece arriba del elemento con los bordes izquierdos de éste y la ventana emergente alineados.</dd> +</dl> + +<dl> + <dt>before_end</dt> + <dd>El emergente aparece arriba del elemento con los bordes derechos de éste y la ventana emergente alineados.</dd> +</dl> + +<dl> + <dt>end_after</dt> + <dd>El emergente aparece a la derecha del elemento con los bordes inferiores de éste y la ventana emergente alineados.</dd> +</dl> + +<dl> + <dt>end_before</dt> + <dd>El emergente aparece a la derecha del elemento con los bordes superiores de éste y la ventana emergente alineados.</dd> +</dl> + +<dl> + <dt>start_after</dt> + <dd>El emergente aparece a la izquierda del elemento con los bordes inferiores de éste y la ventana emergente alineados.</dd> +</dl> + +<dl> + <dt>start_before</dt> + <dd>El emergente aparece a la izquierda del elemento con los bordes superiores de éste y la ventana emergente alineados.</dd> +</dl> + +<dl> + <dt>overlap</dt> + <dd>El emergente aparece encima del elemento.</dd> +</dl> + +<dl> + <dt>at_pointer</dt> + <dd>El emergente aparece en la posición del puntero del ratón.</dd> +</dl> + +<dl> + <dt>after_pointer</dt> + <dd>El emergente aparece en la misma posición horizontal del puntero del ratón pero debajo del elemento. Así es como aparecen los emergentes de información.</dd> +</dl> + +<p>Al agregar el atributo <code>position</code> al elemento emergente, puedes especificar con precisión dónde aparece el emergente. No puedes especificar la posición exacta de un píxel. El atributo <code>position</code> puede usarse con los tres tipos de emergentes, aunque probablemente no cambiarás el valor de un emergente de información. El ejemplo de abajo demuestra cómo crear un botón Atrás con un menú emergente:</p> + +<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul">Ver en funcionamiento</a></p> + +<pre><popupset> + <menupopup id="backpopup" position="after_start"> + <menuitem label="Página 1"/> + <menuitem label="Página 2"/> + </menupopup> +</popupset> + +<button label="Hazme aparecer" popup="backpopup"/> +</pre> + +<h3 id="Ejemplo_de_archivo_de_b.C3.BAsqueda" name="Ejemplo_de_archivo_de_b.C3.BAsqueda">Nuestro ejemplo con un buscador de archivos</h3> + +<p>Agreguemos un menú emergente simple al dialogo de búsqueda de archivos. Por simplicidad, solo repetiremos los contenidos del menú Editar. Hagamos que el emergente aparezca cuando se haga clic sobre la primera pestaña del panel:</p> + +<pre class="eval"><span class="highlightred"><popupset> + <menupopup id="editpopup"> + <menuitem label="Cortar" accesskey="t"/> + <menuitem label="Copiar" accesskey="c"/> + <menuitem label="Pegar" accesskey="p" disabled="true"/> + </menupopup> +</popupset></span> + +<vbox flex="1"> +. +. +. + +<span class="highlightred"><tabpanel id="searchpanel" orient="vertical" context="editpopup"></span> +</pre> + +<p>Aquí se ha agregado un emergente simple similar al del menú Editar. Si haces clic derecho (Control-clic en Macintosh) en cualquier lugar del primer panel, aparecerá el emergente. Sin embargo, el emergente no aparecerá si haces clic en otro lugar. Observa que la caja de texto tiene su propio contenido para el menú emergente, el cual prevalecerá sobre el especificado por nosotros.</p> + +<p>Otro ejemplo : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul">Ver en funcionamiento</a></p> + +<p><br> + A continuación seguiremos con la <a href="/es/Tutorial_de_XUL/Menús_con_desplazamiento" title="es/Tutorial de XUL/Menús con desplazamiento">creación de menús con desplazamiento</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Más_funciones_de_menú" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Menús_con_desplazamiento">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/modelo_de_objeto_de_documento/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/modelo_de_objeto_de_documento/index.html new file mode 100644 index 0000000000..231555c72a --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/modelo_de_objeto_de_documento/index.html @@ -0,0 +1,230 @@ +--- +title: Modelo de objeto de documento +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Modelo_de_objeto_de_documento +tags: + - DOM + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Document_Object_Model +--- +<p> </p> + +<p>El modelo de objeto de documento (DOM) can be used with XUL elements to get information about them or modify them.</p> + +<h3 id="Introducci.C3.B3n_al_.27DOM.27" name="Introducci.C3.B3n_al_.27DOM.27">Introducción al 'DOM'</h3> + +<p>El <a href="es/DOM">modelo de objeto de documento</a> (DOM) es usado para almacenar el árbol de los nodos XUL. Cuando un archivo XUL es cargado, las etiquetas son analizadas y convertidas en un documento con estructura jerárquica de nodos, uno por cada etiqueta y bloque te texto. La estructura DOM puede ser examinada y modificada usando varios métodos con esta finalidad. Los elementos XUL específicos también proporcionan funciones adicionales que pueden ser usadas.</p> + +<p>Cada archivo XUL que es cargado tendrá su propio documento visualizado en una ventana o marco. A pesar que hay solo un documento asociado con una ventana en cada momento, se puede carga documentos adicionales usando varios métodos.</p> + +<p>En Mozilla, el <a href="es/DOM">DOM</a> puede ser accedido y manipulado utilizando <a href="es/JavaScript">JavaScript</a>. Los diversos objetos DOM tienen funciones las cuales pueden ser llamadas por script. Sin embargo, es importante advertir que la DOM es un API que es accesible por JavaScript. JavaScript por sí mismo , es exactamente un lenguaje de scripting que permite el acceso a dichos objetos porque Mozilla dispone esos objetos para su uso.</p> + +<p>En <a href="es/JavaScript">JavaScript</a>, siempre hay un único objeto global que está siempre disponible. Se puede hacer referencia a sus propiedades y métodos. Por ejemplo, si un objeto global tiene como propiedad 'name', se puede cambiar el nombre (name) con el código 'name = 7', sin haber especificado objeto alguno. En el contexto de un browser, la es ventana es un objeto global y asimismo es cierto para XUL. Naturalmente, este objeto global sera diferente para cada ventana. Cada marco tendrá también un objeto ventana separado.</p> + +<p>La ventana es a menudo referida usando la <a href="es/DOM/window#window.window">propiedad de window</a>, a pesar de que es optativo. En ocasiones, esto se hace simplemente para clarificar el alcance del método al que hace referencia. Por ejemplo, en el siguiente fragmento de código, las dos líneas son equivalentes.</p> + +<pre>window.open("test.xul","_new"); +open("test.xul","_new"); +</pre> + +<p>Cuando se declara una función o una variable en el nivel más alto de un script, es decir desde otra función, se está de hecho declarando una propiedad del objeto global. En XUL, cada función declarada será definida como propiedad del objeteo window. Por ejemplo, en el siguiente código se visualizará el texto 'Message' en una <a href="es/DOM/window#window.alert">alerta</a> doble.</p> + +<pre>function getText(){ + return "Message"; +} + +alert(getText()); +alert(window.getText()); +</pre> + +<p>De esta manera, si se desea acceder a variables o llamar a funciones declaradas en un script usado por otra ventana, solo se necesita acceder usando el objeto <code><a href="es/DOM/window">window</a></code> de la otra ventana. Por ejemplo, si se combina los dos últimos ejemplos en un único archivo, podríamos querer llamar a la función getText() desde la otra ventana (por ejemplo la ventana 'test.xul'). Para hacerlo, se puede utilizar lo siguiente:</p> + +<pre>alert(window.opener.getText()); +</pre> + +<p>Cada ventana tiene un <code><a href="es/DOM/window#window.opener">opener</a></code> property que mantiene a dicho objeto ventana abierto. En este ejemplo, se recupera el opener window y llamamos a la función getText() declarada en el script. Observar que se ha explicitado la propiedad con el identificador 'window' para clarificarlo.</p> + +<p>El método de la apertura de la ventana (window's <code><a href="es/DOM/window#window.open">open()</a></code>)también devuelve una referencia a la nueva ventana, por lo que puede llamar a funciones de la nueva ventana desde el <code><a href="es/DOM/window#window.opener">opener</a></code>. Es importante advertir, que sin embargo, el método <code><a href="es/DOM/window#window.open">open()</a></code> lo devuelve antes de que la ventana haya sido complemetamente cargada, por lo que no estarán disponibles todavía funciones.</p> + +<p>EL objeto ventana no está definido por ninguna especificación DOM, pero Mozilla en ocasiones lo considera parte del <a>DOM Level 0</a>, un nombre es usado por varios desarrolladores para referirse a este tipo de funciones antes que se hubieran añadido especificaciones. El documento actual visualizado en una ventana puede ser recuperado usando la propiedad del <code><a href="es/DOM/window#window.document">documento</a></code> de la ventana. Desde que esto es uno de los más propiedades referenciadas de una ventana, la propiedad <code><a href="es/DOM/window#window.document">documento</a></code> property es utilizado sin la partícula 'window.' .</p> + +<p>Mozilla provee varios objetos documento diferentes dependiendo del tipo de documento. Hay tres documentos principales <a class="external" href="http://www.xulplanet.com/references/objref/HTMLDocument.html">HTMLDocument</a>, <a class="external" href="http://www.xulplanet.com/references/objref/XMLDocument.html">XMLDocument</a>, y <a class="external" href="http://www.xulplanet.com/references/objref/XULDocument.html">XULDocument</a>, para documentos <a href="es/HTML">HTML</a>, <a href="es/XML">XML</a> y <a href="es/XUL">XUL</a> respectivamente. Obviamente, esto es uno de los últimos tipos de documento usados por XUL. Los tres tipos de documentos son muy parecidos, de hecho comparten la misma implementación básica. Sun embargo, hay algunas funciones especificadads para cada tipo de documento.</p> + +<h3 id="Recuperaci.C3.B3n_de_elementos" name="Recuperaci.C3.B3n_de_elementos">Recuperación de elementos</h3> + +<p>El método más común para recuperar un elemento en un documento es dar al elemento un atributo con el <code><a href="es/DOM/element#element.id">id</a></code> y el uso del documento <code><a href="es/DOM/document#document.getElementById">getElementById()</a></code>. Hemos añadido el atributo id a una serie de elementos a encontrar el archivo de diálogo. Por ejemplo, podríamos obtener el estado de una casilla de verificación mediante el código que aparece a continuación:</p> + +<pre>var state = document.getElementById('casecheck').checked; +</pre> + +<p>El valor <code>casecheck</code> corresponde al <code>id</code> del <a href="es/Tutorial_de_XUL/Controles_de_entrada#Casillas_de_selecci.C3.B3n_y_botones">checkbox</a> (que es case sensitive: distingue entre mayúsculas y minúsculas) . Una vez que tenemos una indicación de si está marcada o no, podemos utilizar el estado para llevar a cabo la búsqueda. Podríamos hacer algo similar para las otras casillas de verificación, o cualquier otro elemento que tiene un id. Se necesita para obtener el texto en el campo de entrada, por ejemplo.</p> + +<div class="highlight"> +<h4 id="Nuestro_ejemplo" name="Nuestro_ejemplo">Nuestro ejemplo</h4> + +<p>No tiene sentido tener la <a href="es/Tutorial_de_XUL/Indicadores_de_progreso">barra de progreso</a> y el <a href="es/Tutorial_de_XUL/%c3%81rboles">árbol de dato</a> de pruebas desplegado cuando el dialogo de búsqueda de archivos se visualiza primero. Estos se agregaron a fin de que pudiéramos verlos. Dejémoslo fuera y aparecerá sólo cuando se presione el botón Buscar. En primer lugar, tenemos que hacerlos inicialmente invisible. El atributo <code><a href="es/XUL/Atributos#hidden">hidden</a></code>, se utiliza para controlar si un elemento es visible o no.</p> + +<p>Vamos a cambiar la medida del progreso a fin de que esté inicialmente oculta. Además, vamos a añadir un atributo <code><a href="es/XUL/Atributos#id">id</a></code> de manera que podemos referirnos a ella en una secuencia de comandos para mostrar y ocultar. Si bien estamos en ello, también vamos a ocultar los <a href="es/Tutorial_de_XUL/Divisores">divisores</a> y el árbol de resultados que solo se necesitarán después de que la búsqueda se haya realizado.</p> + +<pre class="eval"><tree <span class="highlightred">id="results" hidden="true"</span> flex="1"> + . + . + . +<splitter <span class="highlightred">id="splitbar"</span> resizeafter="grow" <span class="highlightred">hidden="true"</span>/> + +<hbox> + + <progressmeter <span class="highlightred">id="progmeter"</span> value="50%" + style="margin: 4px;" <span class="highlightred">hidden="true"</span>/> +</pre> + +<p>Hemos agregado el atributo <code><a href="es/XUL/Atributos#hidden">hidden</a></code> y fijado el valor <code>true</code>. Esto hace que el elemento se oculte cuando aparece por primera vez.</p> + +<p>A continuación, vamos a añadir una función que se llama cuando el botón Buscar se presiona. Vamos a poner el scripts en un archivo separado llamado findfile.js. En la <a href="es/Tutorial_de_XUL/A%c3%b1adiendo_los_gestores_de_eventos">sección anterior</a>, añadimos el elemento <code><a href="es/XUL/Elementos#script">script</a></code> en el archivo XUL. Si no lo ha hecho, hagalo ahora, como se indica a continuación. Un controlador <code><a href="es/XUL/Atributos#oncommand">oncommand</a></code> también se añadirá al botón Buscar.</p> + +<pre class="eval"><script src="findfile.js"/> + . + . + . +<button id="find-button" label="Find" + <span class="highlightred">oncommand="doFind();"</span>/> +</pre> + +<p>Ahora, crearemos otro archivo llamado findfile.js en el mismo directorio que findfile.xul. Vamos a añadir la función doFind() en este archivo. La etiqueta script permite código que pueda figurar directamente dentro de ella. Sin embargo, por diversas razones, entre ellas un mejor rendimiento, siempre se deben poner scripts en archivos separados, con excepción de breves fragmentos que pueden ponerse directamente en el controlador de eventos.</p> + +<pre class="eval">function doFind(){ + var meter = document.getElementById('progmeter'); + meter.hidden = false; +} +</pre> + +<p>Esta función primero obtiene una referencia del medidor de progreso utilizando su identificador, <code>progmeter</code>. La segunda línea del cuerpo de la función cambia el estado oculto de modo que el elemento es visible de nuevo.</p> + +<p>Por último, vamos a tener un cuadro de alerta pop-up que muestra lo que será buscado. Por supuesto, no queremos que esté en la versión final, pero vamos a añadirlo para asegurarnos que algo pasará.</p> + +<pre class="eval">function doFind(){ + var meter=document.getElementById('progmeter'); + meter.hidden = false; + <span class="highlightred">var searchtext=document.getElementById('find-text').value; + alert("Searching for \"" + searchtext + "\"");</span> +} +</pre> + +<p>Ahora, con ese cuadro de alerta ahí, sabemos lo que debería suceder cuando haga clic en el botón Buscar. Podríamos añadir código adicional para obtener la selección de los cuadros desplegables.</p> +</div> + +<h3 id="XUL_Element_DOM" name="XUL_Element_DOM">XUL Element DOM</h3> + +<p>Every XUL element has a set of attributes, a set of properties and a set of children.</p> + +<ul> + <li>The attributes are declared in the source, for example, flex="1", is a <code><a href="es/XUL/Atributos#flex">flex</a></code> attribute set to the value <code>1</code>.</li> + <li>Properties are available in JavaScript using the dot syntax. For example, element.hidden refers to the hidden property of an element.</li> + <li>The children are the child tags of the element and will be nested inside the element in the source.</li> +</ul> + +<p>It is possible to manipulate the attributes, properties and children of an element dynamically using DOM methods.</p> + +<p>It is important to note that attributes and properties are separate things. Just because there is an attribute with a given name does not mean that there is a corresponding property with the same name. However, it will often be the case that such a property will exist. For example, to get the flex of an element, you can use the flex property. In this case, the underlying code just returns the value of the attribute. For other properties, XUL will perform more complex calculations.</p> + +<p>You can manipulate the attributes of an element using any of the following methods:</p> + +<dl> + <dt><a href="es/DOM/element#element.getAttribute">getAttribute</a> ( nombre )</dt> + <dd>Return the value of the attribute with the given name.</dd> + <dt><a href="es/DOM/element#element.hasAttribute">hasAttribute</a> ( nombre )</dt> + <dd>Return true if the attribute with the given name has a value.</dd> + <dt><a href="es/DOM/element#element.setAttribute">setAttribute</a> ( nombre , valor )</dt> + <dd>Set the value of the attribute with the given name to the given value.</dd> + <dt><a href="es/DOM/element#element.removeAttribute">removeAttribute</a> ( nombre )</dt> + <dd>Remove the attribute with the given name.</dd> +</dl> + +<p>These functions allow you to get and change the value of an attribute at any time. For example, to use the value of the flex attribute, you might use code like the following:</p> + +<pre> var box = document.getElementById('somebox'); + var flex = box.getAttribute("flex"); + + var box2 = document.getElementById('anotherbox'); + box2.setAttribute("flex", "2"); +</pre> + +<p>However, the <code><a href="es/XUL/Atributos#flex">flex</a></code> attribute has a <a href="es/XUL/Propiedades#flex">corresponding script property</a> which can be used instead. It isn't any more efficient, but it does mean slightly less typing. The following example accomplishes the same as above using the flex property instead.</p> + +<pre> var box = document.getElementById('somebox'); + var flex = box.flex; + + var box2 = document.getElementById('anotherbox'); + box2.flex = 2; +</pre> + +<p>Once you have a reference to an element, you can call the properties of that element. For example, to get the <code><a href="es/XUL/Propiedades#hidden">hidden</a></code> property for an element, you can use the syntax <code><em>element</em>.hidden</code> where 'element' is a reference to the element. You might note that most of the properties listed in the reference correlate to common attributes on elements. There are differences, of course, for example, while <strong><font color="green">getAttribute("hidden") will return the string 'true'</font></strong> for a hidden element, whereas the hidden <strong><font color="green">property returns a boolean true value</font></strong>. In this case, the type conversion is done for you so the property is more convenient.</p> + +<p>As with each document, there is a different element object for XUL elements as for <a href="es/HTML">HTML</a> and <a href="es/XML">XML</a> elements. Every XUL element implements the <a class="external" href="http://www.xulplanet.com/references/objref/XULElement.html">XULElement</a> interface. A XUL element is any element declared with the XUL namespace. So, XUL elements will have that interface even if added to other XML documents, and non-XUL elements will not have that interface. The XULElement interface has a number of properties and methods specific to XUL elements, many inherited from the generic DOM Element interface.</p> + +<p>A namespace is a URI which specifies the kind of element. Here are some examples:</p> + +<pre><button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> +<button xmlns="http://www.w3.org/1999/xhtml"/> +<html:button xmlns:html="http://www.w3.org/1999/xhtml"/> +<html:button xmlns:html="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> +</pre> + +<p>Namespaces are specified using the <code>xmlns</code> attribute.</p> + +<ul> + <li>The first button is a XUL element as it has been placed in the XUL namespace.</li> + <li>The second element is an XHTML element as it has been given the XHTML namespace.</li> + <li>In the third example, the prefix 'html' is mapped to the namespace <span class="nowiki">'http://www.w3.org/1999/xhtml'</span>. You can also use the prefix syntax with a colon to use a specific namespace . This is used when you are using several namespaces in a document and you need to be more precise with which namespace is meant. This causes an XHTML button to be created for this case.</li> + <li>The fourth button is a little confusing, but might clarify that it is the URI that is important and not the prefix. The fourth example is a XUL button, not an HTML button, despite what the prefix might say.</li> +</ul> + +<p>This is an important distinction. In fact, the actual text used for the prefix is irrelevant when determining what kind of element is used.</p> + +<p>The DOM provides a number of namespace related functions similar to the non-namespace ones. For example, the <code><a href="es/DOM/element#element.getAttributeNS">getAttributeNS()</a></code> function is similar to the the <code><a href="es/DOM/element#element.getAttribute">getAttribute()</a></code> function except an additional argument may be supplied to specify an attribute in a specific namespace.</p> + +<p>Many XUL elements have their own properties that are unique to that element. Refer to the <a href="es/XUL/Referencias">elemento reference</a> for a full guide to the attributes and properties available for an element.</p> + +<h3 id="Navegaci.C3.B3n_en_el_DOM" name="Navegaci.C3.B3n_en_el_DOM">Navegación en el DOM</h3> + +<p>The DOM is a tree structure with a single root node with children. You can get a reference to the root node using the document's <code><a href="es/DOM/document#document.documentElement">documentElement</a></code> property. The root node is always an element, but this is not the case for other nodes in the tree. An element corresponds to a tag is the XUL source, but you may also find text nodes, comment nodes and a few other types in a document tree. In the case of XUL, the root element will be the <code><a href="es/XUL/Elementos">window</a></code> tag in the XUL document. Each node in the tree may have children and those children may have child nodes of their own. Since the DOM is a tree structure, you can navigate through the tree using a variety of properties. Some common properties are listed below:</p> + +<dl> + <dt><a href="es/DOM/element#element.firstChild">firstChild</a> </dt> + <dd>reference to the first child node of an element</dd> + <dt><a href="es/DOM/element#element.lastChild">lastChild</a></dt> + <dd>reference to the last child node of an element</dd> + <dt><a href="es/DOM/element#element.childNodes">childNodes</a></dt> + <dd>holds a list of the children of an element</dd> + <dt><a href="es/DOM/element#element.parentNode">parentNode</a></dt> + <dd>reference to the parent of an node</dd> + <dt><a href="es/DOM/element#element.nextSibling">nextSibling</a></dt> + <dd>reference to the next sibling in sequence</dd> + <dt><a href="es/DOM/element#element.previousSibling">previousSibling</a></dt> + <dd>reference to the previous sibling in sequence</dd> +</dl> + +<p>These properties allow you to navigate through a document is various ways. For example, you might get the first child of an element using the <code><a href="es/DOM/element#element.firstChild">firstChild</a></code> property and then navigate through the children using the <code><a href="es/DOM/element#element.nextSibling">nextSibling</a></code> property. Or, you might accomplish the same thing by iterating through the items in the <code><a href="es/DOM/element#element.childNodes">childNodes</a></code> list. In Mozilla, the latter method is more efficient.</p> + +<p>The following example shows how to iterate over the children of the root node:</p> + +<pre>var childNodes = document.documentElement.childNodes; +for (var i = 0; i < childNodes.length; i++) { + var child = childNodes[i]; + // do something with child +} +</pre> + +<p>The <code><a href="es/DOM/element#element.childNodes">childNodes</a></code> variable will hold the children of the document root element. We then use a for loop to iterate over the children, accessing each item using an array-like notation.</p> + +<div class="highlight">Nuestro ejemplo: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-dom.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-dom.xul">Ver en funcionamiento</a></div> + +<p><small>See also: <a href="es/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a> and the <a href="es/Referencia_de_JavaScript_1.5">referencia de JavaScript</a></small></p> + +<p>Seguimos con la <a href="es/Tutorial_de_XUL/Modificando_una_interfaz_XUL">modificación del DOM</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Emisores_y_receptores" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Modificando_una_interfaz_XUL">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/modificando_una_interfaz_xul/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/modificando_una_interfaz_xul/index.html new file mode 100644 index 0000000000..2b7fc14bf2 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/modificando_una_interfaz_xul/index.html @@ -0,0 +1,157 @@ +--- +title: Modificando una interfaz XUL +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Modificando_una_interfaz_XUL +tags: + - DOM + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_a_XUL_Interface +--- +<p>El DOM proporciona funciones variadas para modificar el documento.</p> + +<h3 id="Creaci.C3.B3n_de_nuevos_elementos" name="Creaci.C3.B3n_de_nuevos_elementos">Creación de nuevos elementos</h3> + +<p>You can create new elements using the <code><a href="es/DOM/document#document.createElement">createElement()</a></code> function of the document. It takes one argument, the tag name of the element to create. You can then set attributes of the element using the <code><a href="es/DOM/element#element.setAttribute">setAttribute()</a></code> function and append it to the XUL document using the <code><a href="es/DOM/element#element.appendChild">appendChild()</a></code> function. For example, the following will add a button to a XUL window: <strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_1.xul">Ver en funcionamiento</a></p> + +<pre><script> +function addButton(){ + var aBox = document.getElementById("aBox"); + var button = document.createElement("button"); + button.setAttribute("label","A new Button"); + aBox.appendChild(button); +} +</script> + +<box id="aBox" width="200"> + <button label="Añade" oncommand="addButton();"/> +</box> +</pre> + +<ul> + <li>This script first gets a reference to the box with <code><a href="es/DOM/document#document.getElementById">getElementById()</a></code>, which is the container to add a new button to.</li> + <li>The <code><a href="es/DOM/document#document.createElement">createElement()</a></code> function creates a new button.</li> + <li>We assign the label 'A new Button' to the button using the <code><a href="es/DOM/element#element.setAttribute">setAttribute()</a></code> function.</li> + <li>The <code><a href="es/DOM/element#element.appendChild">appendChild()</a></code> function of the box is called to add the button to it.</li> +</ul> + +<p>The <code><a href="es/DOM/document#document.createElement">createElement()</a></code> function will create the default type of element for the document. For XUL documents, this generally means that a XUL element will be created. For an HTML document, an HTML element will be created, so it will have the features and functions of an HTML element instead. The <code><a href="es/DOM/document#document.createElementNS">createElementNS()</a></code> function may be used to create elements in a different namespace.</p> + +<p>The <code><a href="es/DOM/element#element.appendChild">appendChild()</a></code> function is used to add an element as a child of another element. Three related functions are the <code><a href="es/DOM/element#element.insertBefore">insertBefore()</a></code>, <code><a href="es/DOM/element#element.replaceChild">replaceChild()</a></code> and <code><a href="es/DOM/element#element.removeChild">removeChild</a></code> functions. The syntax of these functions is as follows:</p> + +<pre>parent.appendChild(child); +parent.insertBefore(child, referenceChild); +parent.replaceChild(newChild, oldChild); +parent.removeChild(child); +</pre> + +<p>It should be fairly straightforward from the function names what these functions do.</p> + +<ul> + <li>The <code><a href="es/DOM/element#element.insertBefore">insertBefore()</a></code> function inserts a new child node before an existing one. This is used to insert into the middle of a set of children instead of at the end like <code><a href="es/DOM/element#element.appendChild">appendChild()</a></code> does.</li> + <li>The <code><a href="es/DOM/element#element.replaceChild">replaceChild()</a></code> function removes an existing child and adds a new one in its place at the same position.</li> + <li>Finally the <code><a href="es/DOM/element#element.removeChild">removeChild()</a></code> function removes a node.</li> +</ul> + +<p>Note that for all these functions, the reference child or child to remove must already exist or an error occurs.</p> + +<p>It is often the case that you want to remove an existing element and add it somewhere else. If so, you can just add the element without removing it first. Since a node may only be in one place at a time, the insertion call will always remove the node from its existing location first. This is a convenient way to move nodes around in the document.</p> + +<h4 id="Copying_Nodes" name="Copying_Nodes">Copying Nodes</h4> + +<p>To copy nodes however, you may call the <code><a href="es/DOM/element#element.cloneNode">cloneNode()</a></code> function. This function makes a copy of an existing node so that you can add it somewhere else. The original node will stay where it is. It takes one boolean argument which indicates whether to copy all of the node's children or not. If false, only the node is copied, such that the copy won't have any children. If true, all of the children are copied as well. This is done recursively, so for large tree structures make sure that this is desired before passing true to the <code><a href="es/DOM/element#element.cloneNode">cloneNode()</a></code> function. Here is an example:</p> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_2.xul">Ver en funcionamiento</a></p> + +<pre><hbox height="400"> + <button label="Copy" + oncommand="this.parentNode.appendChild(this.nextSibling.cloneNode(true));"/> + + <vbox> + <button label="First"/> + <button label="Second"/> + </vbox> +</hbox> +</pre> + +<p>When the Copy button is pressed..</p> + +<ul> + <li>we retrieve the <code><a href="es/DOM/element#element.nextSibling">nextSibling</a></code> of the <code><a href="es/XUL/Elementos#button">botón</a></code>, which will be the <code><a href="es/XUL/Elementos#vbox">vbox</a></code> element.</li> + <li>a copy of this element is made using the <code><a href="es/DOM/element#element.cloneNode">cloneNode()</a></code> function</li> + <li>and the copy is appended using <code><a href="es/DOM/element#element.appendChild">appendChild()</a></code>.</li> +</ul> + +<p>Note that some elements, such as <code><a href="es/XUL/Elementos#listbox">listbox</a></code> and <code><a href="es/XUL/Elementos#menulist">menulist</a></code> provide some additional specialized modification functions which you should use instead when you can. Ésto se describe en la <a href="es/Tutorial_de_XUL/Manipulando_listas">próxima sección</a>.</p> + +<h3 id="Manipulaci.C3.B3n_de_elementos_b.C3.A1sicos" name="Manipulaci.C3.B3n_de_elementos_b.C3.A1sicos">Manipulación de elementos básicos</h3> + +<p>The main XUL elements such as buttons, checkboxes and radio buttons may be manipulated using a number of script properties. The properties available are listed in the <a href="es/XUL/Referencia">referencia al element</a> as those available are different for each element. Common properties that you will manipulate include the <code><a href="es/XUL/Propiedades#label">label</a></code>, <code><a href="es/XUL/Propiedades#value">value</a></code>, <code><a href="es/XUL/Propiedades#checked">checked</a></code> and <code><a href="es/XUL/Propiedades#disabled">disabled</a></code> properties. They set or clear the corresponding attribute as necessary.</p> + +<h4 id="Ejemplos_de_propiedades_label_y_value" name="Ejemplos_de_propiedades_label_y_value">Ejemplos de propiedades <code>label</code> y <code>value</code></h4> + +<p>Here is a simple example which changes the label on a button:</p> + +<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_3.xul">Ver en funcionamiento</a></p> + +<pre><button label="Hola" oncommand="this.label = 'Adiós';"/> +</pre> + +<p>Cuando el botón es apretado, el <a href="es/XUL/Propiedades#label">label</a> es cambiado. This technique will work for a variety of different elements that have labels. For a textbox, you can do something similar for the <code><a href="es/XUL/Propiedades#value">value</a></code> property.</p> + +<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_4.xul">Ver en funcionamiento</a></p> + +<pre><button label="Añade" oncommand="this.nextSibling.value += '1';"/> +<textbox/> +</pre> + +<p>This example adds a '1' to the textbox each time the button is pressed. The <code><a href="es/DOM/element#element.nextSibling">nextSibling</a></code> property navigates from the button (this) to the next element, the textbox. The '+=' operator is used to add to the current value so a 1 will be added onto the end of the existing text. Note that you can still enter text into the textbox. You can also retrieve the current label or value using these properties, as in the following example:</p> + +<p><strong>Ejemplo 5</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_5.xul">Ver en funcionamiento</a></p> + +<pre><button label="Hola" oncommand="alert(this.label);"/> +</pre> + +<h4 id="Toggling_a_checkbox" name="Toggling_a_checkbox">Toggling a checkbox</h4> + +<p>Checkboxes have a <code><a href="es/XUL/Propiedades#checked">checked</a></code> property which may be used to check or uncheck the <code><a href="es/XUL/Elementos#checkbox">checkbox</a></code>. It should be easy to determine how this is used. In this next example, we reverse the state of the <code><a href="es/XUL/Propiedades#checked">checked</a></code> property whenever the button is pressed. Note that while the <code><a href="es/XUL/Propiedades#label">label</a></code> and <code><a href="es/XUL/Propiedades#value">value</a></code> properties are strings, the <code><a href="es/XUL/Propiedades#checked">checked</a></code> property is a boolean property which will be set either true or false.</p> + +<p><strong>Ejemplo 6</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_6.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_6.xul">Ver en funcionamiento</a></p> + +<pre><button label="Change" oncommand="this.nextSibling.checked = !this.nextSibling.checked;"/> +<checkbox label="Check for messages"/> +</pre> + +<p>Radio buttons may be selected as well using properties, however since only one in a group may be selected at a time, the others must all be unchecked when one is checked. You don't have to do this manually of course. The radiogroup's <code><a href="es/XUL/Propiedades#selectedIndex">selectedIndex</a></code> property may be used to do this. The <code><a href="es/XUL/Propiedades#selectedIndex">selectedIndex</a></code> property may be used to retrieve the<em>index</em> of the selected radio button in the group and well as change it.</p> + +<h4 id="Cambio_de_un_elemento_desactivado_o_activado" name="Cambio_de_un_elemento_desactivado_o_activado">Cambio de un elemento desactivado o activado</h4> + +<p>It is common to disable particular fields that don't apply in a given situation. For example, in a preferences dialog, one might have the choice of several possibilities, but one choice allows additional customization. Here is an example of how to create this type of interface.</p> + +<p><strong>Ejemplo 7</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_7.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_7.xul">Ver en funcionamiento</a></p> + +<pre><script> +function updateState(){ + var name = document.getElementById("name"); + var sindex = document.getElementById("group").selectedIndex; + name.disabled = sindex == 0; +} +</script> + +<radiogroup id="group" onselect="updateState();"> + <radio label="Random name" selected="true"/> + <hbox> + <radio label="Specify a name:"/> + <textbox id="name" value="Jim" disabled="true"/> + </hbox> +</radiogroup> +</pre> + +<p>In this example a function updateState() is called whenever a select event is fired on the radio group. This will happen whenever a radio button is selected. This function will retrieve the currently selected <code><a href="es/XUL/Elementos#radio">radio</a></code> element using the <code><a href="es/XUL/Propiedades#selectedIndex">selectedIndex</a></code> property. Note that even though one of the radio buttons is inside an <code><a href="es/XUL/Elementos#hbox">hbox</a></code>, it is still part of the radio group. If the first radio button is selected (index of 0), the textbox is enabled by setting its <code><a href="es/XUL/Propiedades#disabled">disabled</a></code> property to true. If the second radio button is selected, the textbox is enabled.</p> + +<p>La sección siguiente proporciona más detalles sobre la <a href="es/Tutorial_de_XUL/Manipulando_listas">manipulación de listas</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Modelo_de_objeto_de_documento" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Manipulando_listas">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/más_asistentes/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/más_asistentes/index.html new file mode 100644 index 0000000000..0ba0eb84c5 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/más_asistentes/index.html @@ -0,0 +1,88 @@ +--- +title: Más asistentes +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_asistentes +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/More_Wizards +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Creando_un_asistente" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Presentación">Siguiente »</a></p> +</div> + +<p> </p> + +<h3 id="Navegaci.C3.B3n_m.C3.A1s_compleja_del_asistente" name="Navegaci.C3.B3n_m.C3.A1s_compleja_del_asistente">Navegación más compleja del asistente</h3> + +<p>Normalmente, un asistente muestra cada <code><a href="es/XUL/Elementos/wizardpage">wizardpage</a></code> en el orden en el cual se han puesto en el archivo XUL. En algunos casos sin embargo, se necesita tener diferentes páginas que aparecerán en el asistente en función de lo que seleccionó el usuario en páginas anteriores.</p> + +<p>En este caso, el atributo <code>pageid</code> se coloca en cada una de las páginas. Ésto tiene que ser definido en un identificador para cada página. Después, para navegar a una página, se usará uno de estos dos métodos:</p> + +<ol> + <li>Set the <code>next</code> attribute on each page to the page ID of the next page to go to. You can change these attributes as needed to navigate to different pages.</li> + <li>Call the wizard's <code>goTo()</code> method. It takes one argument, the page ID of a page to go to. You might call this method in the <code>onpageadvanced</code> or <code>onwizardnext</code> handlers. Remember to return false in this case, because you have already changed the page yourself. Note that the <code>goTo()</code> method, because it causes a page change, will fire the events again, so you'll have to make sure you handle that case.</li> +</ol> + +<p>For example, here are a set of wizard pages (the inner content has been omitted):</p> + +<pre><wizardpage pageid="type" next="font"> +<wizardpage pageid="font" next="done"> +<wizardpage pageid="color" next="done"> +<wizardpage pageid="done"> +</pre> + +<ul> + <li>The wizard always starts at the first page, which in this case has the page ID <code>type</code>. The next page is the one with the page ID <code>font</code>, so the wizard will navigate to that page next.</li> + <li>On the page with the page ID <code>font</code>, we can see that the next page is <code>done</code>, so that page will be displayed afterwards.</li> + <li>The page with the page ID <code>done</code> has no <code>next</code> attribute, so this will be the last page.</li> +</ul> + +<p>A script will adjust the <code>next</code> attributes as necessary to go to the page with the page ID <code>color</code> when needed.</p> + +<h3 id="Funciones_de_asistente" name="Funciones_de_asistente">Funciones de asistente</h3> + +<p>The wizard works much like a <a href="es/Tutorial_de_XUL/Contenedores_de_pesta%c3%b1as">etiquetas</a>, except that the tabs are not displayed and the user navigates between pages by using the buttons along the bottom. Because all of the pages are part of the same file, all of the values of the fields on all pages will be remembered. Thus, you do not have to load and save information between pages.</p> + +<p>However, you may want to do some validation of each field on each page. For this, use the handlers described in the previous section. If a field is invalid, you might display an alert. In some cases, it would be more convenient to disable the Next button until valid input has been entered.</p> + +<p>The wizard has a property <code>canAdvance</code>, which can be set to true to indicate that the Next button should be enabled. If set to false, the Next button is disabled. You can change the property when invalid or valid data has been entered.</p> + +<p>In the following example, the user must enter a secret code into a textbox on the first page of the wizard. The function checkCode() is called whenever the first page is shown as indicated by the <code>onpageshow</code> attribute. It is also called whenever a key is pressed in the textbox, to determine whether the Next button should be enabled again.</p> + +<h4 id="Ejemplo_de_asistente" name="Ejemplo_de_asistente">Ejemplo de asistente</h4> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_advwiz_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advwiz_1.xul">Ver en funcionamiento</a></p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<wizard id="theWizard" title="Asistente de código secreto" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script> +function checkCode(){ + document.getElementById('theWizard').canAdvance = (document.getElementById('secretCode').value == "cabbage"); +} +</script> + + <wizardpage onpageshow="checkCode(); return true;"> + <label value="Escriba el código secreto:"/> + <textbox id="secretCode" onkeyup="checkCode();"/> + </wizardpage> + + <wizardpage> + <label value="Ésto es el código secreto correcto."/> + </wizardpage> + +</wizard> +</pre> + +<p>There is also a corresponding <code>canRewind</code> property that you can use to enable or disable the Back button. Both properties are adjusted automatically as you switch pages. Thus, the Back button will be disabled on the first page so you don't have to set it yourself.</p> + +<p>Another useful property of the wizard is <code>currentPage</code>, which holds a reference to the currently displayed <code>wizardpage</code>. You can also modify the current page by changing this property. If you do change it, the various page change events will still be fired.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Creando_un_asistente" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Presentación">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_botones/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_botones/index.html new file mode 100644 index 0000000000..fdf8c15409 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_botones/index.html @@ -0,0 +1,102 @@ +--- +title: Más características de los botones +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_características_de_los_botones +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/More_Button_Features +--- +<p>En esta sección, veremos algunas características adicionales de los botones.</p> + +<h3 id="A.C3.B1adiendo_una_imagen" name="A.C3.B1adiendo_una_imagen">Añadiendo una imagen</h3> + +<p>Usted puede agregar una imagen a un botón especificando una URL en el atributo <code><a href="es/XUL/Atributos#image">imagen</a></code>. La imagen se carga desde la URL, la cual puede ser relativa o absoluta, entonces la imagen se muestra sobre el botón.</p> + +<p>El botón de arriba tendrá <code><a href="es/XUL/Atributos#label">label</a></code> y <code><a href="es/XUL/Atributos#image">imagen</a></code> 'happy.png'. La imagen aparecerá a la izquierda de la etiqueta. Usted puede cambiar la posición usando otros dos atributos. Esto se explicará en un momento.</p> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul">Ver en funcionamiento</a></p> + +<pre><button label="Ayuda" image="happy.png"/> +</pre> + +<h4 id="Bot.C3.B3n_con_imagen_CSS" name="Bot.C3.B3n_con_imagen_CSS">Botón con imagen CSS</h4> + +<p>Another way to specify the image is by using the CSS <a href="es/Css/xref">list-style-image</a> style property on the button. This is designed to allow the 'skin' (in this case, the appearance of the image) to be changed without changing the XUL file. An example is shown below.</p> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul">Ver en funcionamiento</a></p> + +<pre><button id="find-button" + label="Busca" style="list-style-image: url('happy.png')"/> +</pre> + +<p>In this case, the image 'happy.png' is displayed on the button. The <code><a href="es/XUL/Atributos#style">estilo</a></code> attribute functions similar to its HTML counterpart. In general, it can be used on all XUL elements. Note that you really should put the style declarations in a separate style sheet.</p> + +<h3 id="Posicionando_las_im.C3.A1genes" name="Posicionando_las_im.C3.A1genes">Posicionando las imágenes</h3> + +<p>By default, the image on a button will appear to the left of the text label. There are two attributes that can be used to control this position.</p> + +<p>The <code><a href="es/XUL/Atributos#dir">dirección</a></code> attribute controls the direction of the image and text. By setting this attribute to the value <code>reverse</code>, the image will be placed on the right side of the text. By using the value <code>normal</code>, or leaving the attribute out entirely, the image will be placed on the left side of the text.</p> + +<p>The <code><a href="es/XUL/Atributos#orient">orientación</a></code> attribute can be used to place the image above or below the text. The default value is <code>horizontal</code> which is used to place the image on the left or right. You can also use the value <code>vertical</code> to place the image above or below. In this case, the dir attribute controls the placement above or below. The same values are used, where <code>normal</code> means place the image above the text, and <code>reverse</code> means place the image below the text.</p> + +<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul">Ver en funcionamiento</a></p> + +<div class="float-right"><img alt="Image:advbtns1.png"></div> + +<pre><button label="Left" image="happy.png"/> +<button label="Right" image="happy.png" dir="reverse"/> +<button label="Above" image="happy.png" orient="vertical"/> +<button label="Below" image="happy.png" orient="vertical" dir="reverse"/> +</pre> + +<p> </p> + +<p>The example here shows all four types of alignment of buttons. Note that the two attributes are not specified when the default value can be used.</p> + +<h3 id="Botones_con_contenido_extra" name="Botones_con_contenido_extra">Botones con contenido extra</h3> + +<p>Buttons may have arbitrary markup contained inside them, and it will be rendered inside the button. You probably wouldn't use this very often, but you might use it when creating custom elements.</p> + +<p>For example, the following will create a button where two of the words are red:</p> + +<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul">Ver en funcionamiento</a></p> + +<pre><button> + <description value="This is a"/> + <description value="rather strange" style="color: red;"/> + <description value="button"/> +</button> +</pre> + +<p>Any XUL element may be placed inside the <code><a href="es/XUL/Elementos#button">botón</a></code>. HTML elements will be ignored, so you need to wrap them inside a <code><a href="es/XUL/Elementos#description">descripción</a></code> element. If you specify the <code><a href="es/XUL/Atributos#label">label</a></code> attribute on the button, it will override any content placed inside the button.</p> + +<h4 id="Bot.C3.B3n_con_men.C3.BA_emergente" name="Bot.C3.B3n_con_men.C3.BA_emergente">Botón con menú emergente</h4> + +<p>You can place a <code><a href="es/XUL/Elementos#menupopup">menupopup</a></code> inside the button to cause a menu to drop down when the button is pressed, much like the <code><a href="es/XUL/Elementos#menulist">menulist</a></code>. However, in this case you must set the <code><a href="es/XUL/Atributos#button.type">type</a></code> attribute to the value <code>menu</code>.</p> + +<p><strong>Ejemplo 5</strong>:</p> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul">Ver en funcionamiento</a></p> + +<div class="float-right"><img alt="Image:advbtns2.png"></div> + +<pre><button type="menu" label="Device"> + <menupopup> + <menuitem label="Impresora"/> + <menuitem label="Ratón"/> + <menuitem label="Teclado"/> + </menupopup> +</button> +</pre> + +<p>In this example, the user may click the button to pop up a menu containing three items. Note that selecting one of these menu items doesn't change the label on the button, unlike a <code><a href="es/XUL/Elementos#menulist">menulist</a></code>. This type of button is intended to be used like a menu, with scripts attached to each item to perform a task. We'll see more on menus later.</p> + +<p>You can also set the <code><a href="es/XUL/Atributos#button.type">type</a></code> attribute to the value <code>menu-button</code>. This also creates a button with a menu, but the appearance will be different. The image to the right shows the difference. The left one is a 'menu' and the second one is a 'menu-button'. It has an arrow indicating the presence of a menu. For the 'menu', the user may click anywhere on the button to show the menu. For the 'menu-button', the user must click the arrow to show the menu.</p> + +<p>Seguimos con como <a href="es/Tutorial_de_XUL/El_modelo_de_caja">los elementos XUL son colocados en una ventana</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Usando_espaciadores" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:El_modelo_de_caja">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_árboles/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_árboles/index.html new file mode 100644 index 0000000000..e8eb95ca57 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/más_características_de_los_árboles/index.html @@ -0,0 +1,132 @@ +--- +title: Más características de los árboles +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_características_de_los_árboles +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/More_Tree_Features +--- +<p>Aquí veremos más características de los árboles.</p> + +<h3 id=".C3.81rboles_jer.C3.A1rquicos" name=".C3.81rboles_jer.C3.A1rquicos">Árboles jerárquicos</h3> + +<p>El elemento <code><a href="es/XUL/Elementos/tree">tree</a></code> también puede utilizarse para crear listas jerárquicas, similares a las encontradas en un administrador de archivos o a una lista de marcadores de un navegador. Para lograr esto deben realizarse dos cosas:</p> + +<p>Primero debe marcarse como contenedor al elemento <code><a href="es/XUL/Elementos/tree">treeitem</a></code> que contenga hijos, esto se consigue agregándole el atributo <code><a href="es/XUL/Atributos/container">container</a></code> (contenedor) de la siguiente manera:</p> + +<pre><treeitem container="true"/> +</pre> + +<p>Esto permite al usuario hacer doble-clic sobre el árbol para expandir y contraer las filas internas. Puede hacerse que las filas hijas sean visibles desde un principio simplemente agregando el atributo <code><a href="es/XUL/Atributos/open">open</a></code> (abierto). Cuando el usuario expanda o contraiga el árbol, éste atributo cambiará para reflejar el estado actual.</p> + +<p>El segundo cambio a realizar es colocar el atributo <code><a href="es/XUL/Atributos/primary">primary</a></code> (primario) en la primer columna. Esto provocará la aparición de un pequeño triángulo o un signo “+�? delante de las celdas en esa columna. Esto indicará que esas celdas pueden expandirse, además las filas hijas tendrán sangrado. Note que el usuario no puede ocultar la primer columna.</p> + +<p>Cada hijo puede especificarse poniendo un elemento <code>treechildren</code> dentro de <code>treeitem</code>, si se coloca dentro de <code>treerow</code> no funcionará.</p> + +<p>Puede repetirse este proceso para crear árboles profundamente anidados. En esencia, un elemento <code>treeitem</code> puede contener ya sea filas simples -declaradas con el elemento <code>treerow</code>- o una colección de filas que se declaran con el elemento <code>treechildren</code>.</p> + +<p>El siguiente es un ejemplo sencillo:</p> + +<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_1.xul">Ver en funcionamiento</a></p> + +<pre><tree flex="1"> + <treecols> + <treecol id="nombre" label="Nombre" primary="true" flex="3"/> + <treecol id="apellido" label="Apellido" flex="7"/> + </treecols> + + <treechildren> + <treeitem container="true" open="true"> + <treerow> + <treecell label="Tipos"/> + </treerow> + + <treechildren> + <treeitem> + <treerow> + <treecell label="Pepe"/> + <treecell label="Carpintero"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Lito"/> + <treecell label="Albañil"/> + </treerow> + </treeitem> + </treechildren> + </treeitem> + </treechildren> +</tree> +</pre> + +<p><img alt="Image:advtrees1.jpg"></p> + +<p>Esto ha creado un árbol jerárquico. Como puede verse en la imagen, un pequeño símbolo “+�? o “-�? apareció junto a la primer fila, indicando que contiene filas hijas. El usuario puede abrir o cerrar la lista hacienda doble-clic en esa fila. Note como la fila Tipos necesita solamente una columna y es un ítem de posición para sus hijos.</p> + +<p>El elemento <code><a href="es/XUL/Elementos/treeitem">treeitem</a></code> externo contiene un elemento <code><a href="es/XUL/Elementos/treerow">treerow</a></code> y un elemento <code><a href="es/XUL/Elementos/treechildren">treechildren</a></code>, el primero crea los datos para la fila madre y el último contiene las filas hijas.</p> + +<p>También pueden anidarse filas profundamente. Debe recordarse que hay que utilizar el atributo <code><a href="es/XUL/Atributos/container">container</a></code> en las filas que contienen filas hijas. La simple presencia de filas hijas no es suficiente indicación ya que puede haber un contenedor que no contenga hijos pero aún debe ser tratado como contenedor. Por ejemplo, un directorio sin archivos dentro debe ser tratado como contenedor aunque esté vacío.</p> + +<h3 id="M.C3.A1s_sobre_las_columnas_del_.C3.A1rbol" name="M.C3.A1s_sobre_las_columnas_del_.C3.A1rbol">Más sobre las columnas del árbol</h3> + +<p>Un atributo adicional que puede colocarse al árbol es <code><a href="es/XUL/Atributos/enableColumnDrag">enableColumnDrag</a></code> (habilitar arrastre de columna, note las iniciales en mayúscula). Si se encuentra habilitado el usuario podrá arrastrar los encabezados de columna para reconfigurar el orden de las mismas,</p> + +<p>El usuario también querrá cambiar el ancho de las columnas, esto se logra poniendo un elemento <code><a href="es/XUL/Elementos/splitter">splitter</a></code> (divisor) entre cada elemento <code><a href="es/XUL/Elementos/treecol">treecol</a></code>. Aparecerá una pequeña muesca entre cada encabezado de columna, la cual podrá ser arrastrada por el usuario para cambiar el ancho de la columna. Para esconder la muesca puede fijarse en 0 el atributo CSS max-width del divisor, a pesar de lo cual el ancho de la columna seguirá siendo modificable. La hoja de estilos globales proporciona una clase <code>tree-splitter</code>, la cual realiza esto.</p> + +<p>Puede establecerse el ancho mínimo y máximo de una columna utilizando las propiedades de estilo <code><a href="es/XUL/Atributos/minwidth">minwidth</a></code> y <code><a href="es/XUL/Atributos/maxwidth">maxwidth</a></code> en el encabezado de la columna.</p> + +<p>La columna puede estar oculta de manera predeterminada si se coloca un atributo <code><a href="es/XUL/Atributos/hidden">hidden</a></code> (oculto) con el valor true. El usuario podrá escoger si ve la columna seleccionándola en el menú desplegable que se encuentra al final de la fila encabezado.</p> + +<p>Como con todos los elementos, puede utilizarse el atributo <code><a href="es/XUL/Atributos/persist">persist</a></code> (persistir) para almacenar el estado de las columnas entre sesiones. Esto es, una vez que el usuario se decide por una disposición de columnas de su agrado, esta será automáticamente almacenada para la próxima vez. Será necesario guardar un cierto número de atributos como se indica en el siguiente ejemplo:</p> + +<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_2.xul">Ver en funcionamiento</a></p> + +<pre><tree enableColumnDrag="true" flex="1"> + <treecols> + <treecol id="corredor" label="Corredor" flex="2" persist="width ordinal hidden"/> + <splitter class="tree-splitter"/> + <treecol id="ciudad" label="Ciudad de origen" flex="2" persist="width ordinal hidden"/> + <splitter class="tree-splitter"/> + <treecol id="horainicio" label="Hora de inicio" flex="1" persist="width ordinal hidden"/> + <splitter class="tree-splitter"/> + <treecol id="horafin" label="Hora de finalización" flex="1" persist="width ordinal hidden"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="Joshua Granville"/> + <treecell label="Vancouver"/> + <treecell label="7:06:00"/> + <treecell label="9:10:26"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Robert Valhalla"/> + <treecell label="Seattle"/> + <treecell label="7:08:00"/> + <treecell label="9:15:51"/> + </treerow> + </treeitem> + </treechildren> +</tree> +</pre> + +<p>En este caso deberán marcarse como persistentes tres atributos de las columnas:</p> + +<ul> + <li>el atributo <code><a href="es/XUL/Atributos/width">width</a></code> para guardar el ancho de las mismas,</li> + <li>el atributo <code><a href="es/XUL/Atributos/ordinal">ordinal</a></code> que contiene la posición de la columna,</li> + <li>el atributo <code><a href="es/XUL/Atributos/hidden">hidden</a></code> que indica si la columna es visible o no.</li> +</ul> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Árboles" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Selección_en_un_árbol">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/más_funciones_de_menú/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/más_funciones_de_menú/index.html new file mode 100644 index 0000000000..2c90a3fdd9 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/más_funciones_de_menú/index.html @@ -0,0 +1,128 @@ +--- +title: Más funciones de menú +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_funciones_de_menú +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - para_revisar +translation_of: Archive/Mozilla/XUL/Tutorial/More_Menu_Features +--- +<p>En esta sección, veremos cómo crear submenús y menús con marcas de verificación o <em>checks</em>.</p> + +<h3 id="Creando_submen.C3.BAes" name="Creando_submen.C3.BAes">Crear submenús</h3> + +<p>Puedes crear submenús dentro de otros menús (menús jerarquizados ) usando los elementos existentes. Recuerda que puedes poner cualquier elemento dentro de un <code>menupopup</code>. Ya hemos visto cómo colocar <code>menuitem</code>s y <code>menuseparator</code>s en <code>menupopup</code>s. Sin embargo , puedes crear submenús simplemente colocando el elemento de <code><a href="/es/XUL/Elementos" title="es/XUL/Elementos">menu</a></code> dentro del elemento del <code><a href="/es/XUL/Elementos" title="es/XUL/Elementos">menupopup</a></code> . Esto funciona porque el elemento del menú es válido aún cuando no esté colocado directamente en la barra de menú. El ejemplo de abajo crea un submenú simple dentro del menú de <strong>File</strong>.</p> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul">Ver en funcionamiento</a></p> + +<div class="float-right"><img alt="nested-menu.jpg" class="default internal" src="/@api/deki/files/4817/=nested-menu.jpg"></div> + +<pre><toolbox flex="1"> + <menubar id="sample-menubar"> + <menu id="file-menu" label="Archivo"> + <menupopup id="file-popup"> + <menu id="new-menu" label="Nuevo"> + <menupopup id="new-popup"> + <menuitem label="Ventana"/> + <menuitem label="Mensage"/> + </menupopup> + </menu> + <menuitem label="Abrir"/> + <menuitem label="Guardar"/> + <menuseparator/> + <menuitem label="Salir"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> + +<h3 id="Adici.C3.B3n_de_un_men.C3.BA_al_archivo_de_b.C3.BAsqueda_del_ejemplo" name="Adici.C3.B3n_de_un_men.C3.BA_al_archivo_de_b.C3.BAsqueda_del_ejemplo">Adición de un menú a nuestro ejemplo con el Buscador de archivos</h3> + +<p>Agreguemos un menú al dialogo de búsqueda de archivos. Agregaremos solo unos pocos comandos simples a un menú <strong>File</strong> y un menú <strong>Edit</strong>. Este es similar al ejemplo de arriba.</p> + +<pre class="eval"><toolbox> + + <span class="highlightred"><menubar id="findfiles-menubar"> + <menu id="file-menu" label="Archivo" accesskey="f"> + <menupopup id="file-popup"> + <menuitem label="Abrir la búsqueda..." accesskey="o"/> + <menuitem label="Guardar la búsqueda..." accesskey="s"/> + <menuseparator/> + <menuitem label="Cerrar" accesskey="c"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Editar" accesskey="e"> + <menupopup id="edit-popup"> + <menuitem label="Cortar" accesskey="t"/> + <menuitem label="Copiar" accesskey="c"/> + <menuitem label="Pegar" accesskey="p" disabled="true"/> + </menupopup> + </menu> + </menubar></span> + +<toolbar id="findfiles-toolbar> +</pre> + +<div class="float-right"><img alt="fnd-dlg-sample.jpg" class="default internal" src="/@api/deki/files/4818/=fnd-dlg-sample.jpg"></div> + +<p>Aquí hemos agregado dos menús con varios comandos en ellos. Observa cómo la barra de menús fue agregada dentro de la caja. Los tres puntos después de Open y Save son la forma habitual en la que se indica al usuario que se abrirá un dialogo cuando seleccione el comando. Se han agregado claves de acceso para cada menú y elemento de menú. Verás en la imagen que esta letra ha sido subrayada en la etiqueta del menú. Además, el comando Pegar (Paste) ha sido deshabilitado. Asumiremos que no hay nada que pegar.</p> + +<p> <strong>Ejemplo de Encontrar archivos </strong> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul">Ver en funcionamiento</a></p> + +<h3 id="A.C3.B1adiendo_casillas_seleccionadas_en_los_men.C3.BAes" name="A.C3.B1adiendo_casillas_seleccionadas_en_los_men.C3.BAes">Añadir marcas de verificación (checkmarks) a los menús</h3> + +<p>Muchas aplicaciones tienen elementos de menú que tienen marcas de verificación <em><em>o</em> </em><em>checks</em>. Por ejemplo, una característica que este activada tiene una marca de verificación o <em>check</em> al lado del comando y una característica que está deshabilitada no lo tiene. Cuando el usuario selecciona el menú, cambia el estado de la marca o <em>check</em> (habilitado/deshabilitado). Puedes además agregar botones redondos en los elementos del menú.</p> + +<p>Las marcas de verificación o <em>checks </em>se crean de manera similar a los elementos <code><a href="../../../../en/XUL/checkbox" rel="custom nofollow">checkbox</a></code> y <code><a href="../../../../en/XUL/radio" rel="custom nofollow">radio</a></code> . Esto implica el uso de dos atributos: <code><a href="/Es/XUL/Atributos#button.type" title="Es/XUL/Atributos#button.type">type</a></code> para indicar el tipo de marca o <em>check</em> y <code><a href="/Es/XUL/Atributos#menuitem.name" title="Es/XUL/Atributos#menuitem.name">name</a></code> para agrupar comandos. El ejemplo de abajo crea un menú con una marca de verificación.</p> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul">Ver en funcionamiento</a></p> + +<pre><toolbox> + <menubar id="options-menubar"> + <menu id="options_menu" label="Opciones"> + <menupopup> + <menuitem id="backups" label="Hacer copias de seguridad" type="checkbox"/> + <menuitem id="backups" label="Enviar un email al administrador" type="checkbox" checked="true"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> + +<p>El atributo <code><a href="/es/XUL/Atributo#button.type" title="es/XUL/Atributo#button.type">type</a></code> se ha agregado con el fin poder marcar o desmarcar un elemento del menú. Al establecer su valor a <code>checkbox</code> , el elemento del menú puede marcarse o desmarcarse seleccionando dicho elemento.</p> + +<h4 id="Men.C3.BA_con_botones_de_selecci.C3.B3n" name="Men.C3.BA_con_botones_de_selecci.C3.B3n">Menú con botones circulares</h4> + +<p>Además de las marcas estándares, puedes crear <em>checks</em> con estilo circular cambiando el valor de <code><a href="/Es/XUL/Atributos#button.type" title="Es/XUL/Atributos#button.type">type</a></code> a el valor de <code>radio</code>. Un botón circular si usa si se desea agrupar varios elementos del menús pero se puede seleccionar solo uno a la vez. Un ejemplo puede ser a menú de Fuente (font) donde únicamente puede seleccionarse una fuente a la vez. Cuando se selecciona otro elemento, el seleccionado previamente queda deshabilitado.</p> + +<p>Con el fin de agrupar un conjunto de elementos del menú, tienes que poner un atributo <code><a href="/Es/XUL/Atributos#menuitem.name" title="Es/XUL/Atributos#menuitem.name">name</a></code> a cada uno. Establece el valor para la misma cadena. El ejemplo siguiente lo muestra:</p> + +<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul">Ver en funcionamiento</a></p> + +<pre><toolbox> + <menubar id="planets-menubar"> + <menu id="planet-menu" label="Planetas"> + <menupopup> + <menuitem id="júpiter" label="Júpiter" type="radio" name="ringed"/> + <menuitem id="saturno" label="Saturno" type="radio" name="ringed" checked="true"/> + <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/> + <menuseparator/> + <menuitem id="tierra" label="Tierra" type="radio" name="inhabited" checked="true"/> + <menuitem id="luna" label="Luna" type="radio" name="inhabited"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> + +<p>Si pruebas a hacer este ejemplo, encontrarás que de los tres primeros elementos del menú, solamente se puede seleccionar uno. Se agrupan juntos porque todos tienen el mismo nombre. El último elemento del menú es Earth, aunque es un botón circular, no es parte de este grupo porque tiene un nombre diferente.</p> + +<p>Desde luego, los elementos agrupados deben estar dentro del mismo menú. No se deben ubicar cerca unos de otros en el menú, además no tiene mucho sentido que lo estén.</p> + +<p>Seguimos con la <a href="/es/Tutorial_de_XUL/Menús_emergentes" title="es/Tutorial_de_XUL/Menúes_emergentes">creación de menús emergentes</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Menús_de_Barras_Simples" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Menús_emergentes">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/más_gestores_de_eventos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/más_gestores_de_eventos/index.html new file mode 100644 index 0000000000..d181cbea94 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/más_gestores_de_eventos/index.html @@ -0,0 +1,168 @@ +--- +title: Más gestores de eventos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_gestores_de_eventos +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/More_Event_Handlers +--- +<p>In this section, the event object is examined and additional events are described.</p> + +<h3 id="El_objeto_de_evento" name="El_objeto_de_evento">El objeto de evento</h3> + +<p>Each event handler has a single argument which holds an <a href="es/DOM/event">event</a> object. In the attribute form of event listener, this event is an implied argument to the script code which can be refered to using the name 'event'. In the <code><a href="es/DOM/element.addEventListener">addEventListener</a></code> form, the first argument to the listener function will be the event object. The event object has a number of properties which can be examined during an event. The full list can be found in the <a class="external" href="http://xulplanet.com/references/objref/Event.html">referencia al objeto en planeta XUL</a>.</p> + +<p>We already saw the event's <code><a href="es/DOM/event.target">target</a></code> property in the last section. It holds a reference to the element where the event occured. A similar property <code><a href="es/DOM/event.currentTarget">currentTarget</a></code> holds the element that is currently having its event listeners handled. In the example below, <code><a href="es/DOM/event.currentTarget">currentTarget</a></code> is always the vbox, whereas <code><a href="es/DOM/event.target">target</a></code> would be the specific element, either the button or checkbox, that was activated. <strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul">Ver en funcionamiento</a></p> + +<pre><vbox oncommand="alert(event.currentTarget.tagName);"> + <button label="OK"/> + <checkbox label="Show images"/> +</vbox> +</pre> + +<h4 id="La_evento_de_parada_de_propagaci.C3.B3n" name="La_evento_de_parada_de_propagaci.C3.B3n">La evento de parada de propagación</h4> + +<p>Once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing. Depending on how you attach the event listener to an element, there are different ways of doing this.</p> + +<p>Recall that the capturing phase occurs before the bubbling phase, so any capturing listeners will trigger before any bubbling listeners. If a capturing event stops the event propagation, none of the later capturing listeners, nor any of the bubbling listeners will ever receive notification about the events. To stop event propagation, call the event object's <code><a href="es/DOM/event.stopPropagation">stopPropagation</a></code> method, as in the following example.</p> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul">Ver en funcionamiento</a></p> + +<pre><hbox id="outerbox"> + <button id="okbutton" label="OK"/> +</hbox> + +<script> +function buttonPressed(event){ + alert('Button was pressed!'); +} + +function boxPressed(event){ + alert('Box was pressed!'); + event.stopPropagation(); +} + +var button = document.getElementById("okbutton"); +button.addEventListener('command',buttonPressed,true); + +var outerbox = document.getElementById("outerbox"); +outerbox.addEventListener('command',boxPressed,true); +</script> +</pre> + +<p>Here, an event listener has been added to the button and another event listener has been added to the box. The <code><a href="es/DOM/event.stopPropagation">stopPropagation</a></code> method has been called in the box's listener, so the button's listener never gets called. If this call was removed, both listeners would be called and both alerts would appear.</p> + +<h4 id="Prevent_Default_Action" name="Prevent_Default_Action">Prevent Default Action</h4> + +<p>If no event handlers have been registered for an event, then after completing the capturing and bubbling phases, the element will handle the event in a default way. What will happen depends on the event and the type of element. For example, the 'popupshowing' event is sent to a popup just before it is displayed. The default action is to display the popup. If the default action is prevented, the popup will not be displayed. The default action can be prevented with the event object's <code><a href="es/DOM/event.preventDefault">preventDefault</a></code> method, as in the example below.</p> + +<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul">Ver en funcionamiento</a></p> + +<pre><button label="Tipos" type="menu"> + <menupopup onpopupshowing="event.preventDefault();"> + <menuitem label="Vidrio"/> + <menuitem label="Plástico"/> + </menupopup> +</button> +</pre> + +<p>Alternatively, for attribute event listeners, you can just return false from the code. Note that preventing the default action is not the same as stopping event propagation with the <code><a href="es/DOM/event.stopPropagation">stopPropagation</a></code> method. Even if the default action has been prevented, the event will still continue to propagate. Similarly, calling the <code><a href="es/DOM/event.stopPropagation">stopPropagation</a></code> method won't prevent the default action. You must call both methods to stop both from occuring.</p> + +<p>Note that once propagation or the default action has been prevented, neither may be re-enabled again for that event.</p> + +<p>The following sections list some of the events that may be used. A full list is provided in the <a class="external" href="http://www.xulplanet.com/references/elemref/ref_EventHandlers.html">referencia al gestor de evento en planeta XUL</a>.</p> + +<h3 id="Eventos_del_rat.C3.B3n" name="Eventos_del_rat.C3.B3n">Eventos del ratón</h3> + +<p>There are several events which can be used to handle mouse specific actions, which are described briefly below:</p> + +<dl> + <dt>click</dt> + <dd>Called when the mouse is pressed and released on an element.</dd> +</dl> + +<dl> + <dt>dblclick</dt> + <dd>Called when the a mouse button is double clicked.</dd> +</dl> + +<dl> + <dt>mousedown</dt> + <dd>Called when a mouse button is pressed down on an element. The event handler will be called as soon as a mouse button is pressed, even if it hasn't been released yet.</dd> +</dl> + +<dl> + <dt>mouseup</dt> + <dd>Called when a mouse button is released on an element.</dd> +</dl> + +<dl> + <dt>mouseover</dt> + <dd>Called when the mouse pointer is moved onto an element. You could use this to highlight the element, however CSS provides a way to do this automatically so you shouldn't do it with an event. You might, however, want to display some help text on a status bar.</dd> +</dl> + +<dl> + <dt>mousemove</dt> + <dd>Called when the mouse pointer is moved while over an element. The event may be called many times as the user moves the mouse so you should avoid performing lengthy tasks frorm this handler.</dd> +</dl> + +<dl> + <dt>mouseout</dt> + <dd>Called when the mouse pointer is moved off of an element. You might then unhighlight the element or remove status text.</dd> +</dl> + +<p>There are also a set of drag related events, which occur when the user holds down a mouse button and drags the mouse around. Those events are described in <a href="es/Drag_and_Drop">Drag and Drop</a>.</p> + +<h4 id="Propiedades_del_bot.C3.B3n_del_rat.C3.B3n" name="Propiedades_del_bot.C3.B3n_del_rat.C3.B3n">Propiedades del botón del ratón</h4> + +<p>When a mouse button event occurs, a number of additional properties are available to determine which mouse buttons were pressed and the location of the mouse pointer. The event's <code><a href="es/DOM/event.button">button</a></code> property can be used to determine which button was pressed, where possible values are 0 for the left button, 1 for the right button and 2 for the middle button. If you've configured your mouse differently, these values may be different.</p> + +<p>The <code><a href="es/DOM/event.detail">detail</a></code> property holds the number of times the button has been clicked quickly in sequence. This allows you to check for single, double or triple clicks. Of course, if you just want to check for double clicks, you can also use the dblclick event instead. The click event will be fired once for the first click, again for the second click, and again for the third click, but the dblclick event will only be fired once for a double click.</p> + +<p>The <code><a href="es/DOM/event.button">button</a></code> and <code><a href="es/DOM/event.detail">detail</a></code> properties only apply to the mouse button related events, not mouse movement events. For the mousemove event, for example, both properties will be set to 0.</p> + +<h4 id="Propiedades_de_la_posici.C3.B3n_del_rat.C3.B3n" name="Propiedades_de_la_posici.C3.B3n_del_rat.C3.B3n">Propiedades de la posición del ratón</h4> + +<p>However, all mouse events will be supplied with properties that hold the coordinates of the mouse position where the event occured. There are two sets of coordinates. The first is the <code><a href="es/DOM/event.screenX">screenX</a></code> and <code><a href="es/DOM/event.screenY">screenY</a></code> properties and are relative to the top left corner of the screen. The second set, <code><a href="es/DOM/event.clientX">clientX</a></code> and <code><a href="es/DOM/event.clientY">clientY</a></code>, are relative to the top left corner of the document. Here is an example which displays the current mouse coordinates:</p> + +<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul">Ver en funcionamiento</a></p> + +<pre><script> + +function updateMouseCoordinates(event){ + var text = "X:" + event.clientX + " Y:" + event.clientY; + document.getElementById("xy").value = text; +} +</script> + +<label id="xy"/> +<hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/> +</pre> + +<p>In this example, the size of the box has been set explicity so the effect is easier to see. The event handler gets the <code><a href="es/DOM/event.clientX">clientX</a></code> and <code><a href="es/DOM/event.clientY">clientY</a></code> properties and creates a string from them. This string is then assigned to the value property of the label. Note that the event argument must be passed to the <code>updateMouseCoordinates</code> function. If you move the mouse quickly across the border of the box, you might notice that the coordinates don't generally stop right at 400. This is because the mousemove events occur at intervals depdending on the speed at which the mouse moves and the mouse is usually moved some distance past the border by the time the next event fires. Obviously, it would be much too inefficient to send a mousemove event for every pixel the mouse is moved.</p> + +<h4 id="Element_Relative_Coordinates" name="Element_Relative_Coordinates">Element Relative Coordinates</h4> + +<p>You will often want to get the coordinates of an event relative to the element where the element occured rather than the entire window. You can do this by subtracting the element's position from the event position, as in the following code.</p> + +<pre>var element = event.target; +var elementX = event.clientX - element.boxObject.x; +var elementY = event.clientY - element.boxObject.y; +</pre> + +<p>XUL elements have a box object that can be retrieved using the <code><a href="es/XUL/Propiedades#boxObject">boxObject</a></code> property. We'll learn more about the box object in <a href="es/Tutorial_de_XUL/Objetos_de_caja">una sección más adelante</a>, but it holds information pertaining to how the element is displayed, including the x and y position of the element. In this example code, these coordinates are subtracted from the event coordinates to get the event position relative to the element.</p> + +<h3 id="Load_Events" name="Load_Events">Load Events</h3> + +<p>The load event is sent to the document (la etiqueta de la <code><a href="es/XUL/Elementos#window">ventana - <code>window</a></code></code>) once the XUL file has finished loading and just before the content is displayed. This event is commonly used to initialize fields and perform other tasks that need to be done before the user can use the window. You should use a load event to do these kinds of things as opposed to adding script at the top level outside a function. This is because the XUL elements may not have loaded or fully initialized yet, so some things may not work as expected. To use a load event, place an <code><a href="es/XUL/Atributos#onload">onload</a></code> attribute on the <code><a href="es/XUL/Elementos#window">window</a></code> tag. Call code within the load handler which will initialize the interface as necessary.</p> + +<p>There is also an unload event which is called once the window has closed, or in a browser context, when the page is switched to another URL. You can use this event to save any changed information, for example.</p> + +<p><br> + Next, we'll find out how to add <a href="es/Tutorial_de_XUL/Atajos_de_teclado">atajos de teclado</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Añadiendo_los_gestores_de_eventos" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Atajos_de_teclado">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/objeto_de_caja_de_árbol/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/objeto_de_caja_de_árbol/index.html new file mode 100644 index 0000000000..d6eaf7a8d9 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/objeto_de_caja_de_árbol/index.html @@ -0,0 +1,190 @@ +--- +title: Objeto de caja de árbol +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Objeto_de_caja_de_árbol +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Box_Objects +--- +<p> </p> + +<p>Ésta sección describe el objeto caja del árbol usada para gestionar como un árbol es mostrado.</p> + +<h3 id="Sobre_el_objeto_caja_del_.C3.A1rbol" name="Sobre_el_objeto_caja_del_.C3.A1rbol">Sobre el objeto caja del árbol</h3> + +<p>Box objects were described in an <a href="es/Tutorial_de_XUL/Objetos_de_caja">sección</a>. The tree box object is a specialized box object used specifically for trees. The tree box implements the <a class="external" href="http://www.xulplanet.com/references/objref/TreeBoxObject.html">TreeBoxObject</a> interface.</p> + +<h4 id="Redibujando_el_.C3.A1rbol" name="Redibujando_el_.C3.A1rbol">Redibujando el árbol</h4> + +<p>We already saw the <code>rowCountChanged()</code> function of the tree box object in the previous section. It is used to indicate that one or more rows have been added to the tree or removed from the tree. The tree will redraw the affected area. You don't need to call the <code>rowCountChanged()</code> function when a row has simply changed in some way, for example if a cell's label changes. In this case, there are other drawing functions that can be used. The simplest is to call <code>invalidateRow()</code> which will redraw a specific row in the tree. The tree will call the view to get the updated data and update the contents of the tree on screen.</p> + +<p>Other redrawing functions are</p> + +<ul> + <li><code>invalidateCell()</code> to redraw only a single cell</li> + <li><code>invalidateColumn()</code> to redraw a column</li> + <li><code>invalidateRange()</code> to redraw a range of rows</li> + <li><code>invalidate()</code> to redraw the entire tree.</li> +</ul> + +<p>Note that redrawing does not occur until the calling script ends since Mozilla does not redraw in the background.</p> + +<h4 id="Desplegando_el_.C3.A1rbol" name="Desplegando_el_.C3.A1rbol">Desplegando el árbol</h4> + +<p>You can also scroll the tree using four different methods, similar to those available for <a href="es/Tutorial_de_XUL/Manipulando_listas#Lista_desplegable">listboxes</a>. The <code>scrollToRow()</code> function may be used to scroll to a particular row. Here is a simple example.</p> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_1.xul">Ver en funcionamiento</a></p> + +<pre><script> +function doScroll(){ + var value = document.getElementById("tbox").value; + var tree = document.getElementById("thetree"); + + var boxobject = tree.boxObject; + boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject); + boxobject.scrollToRow(value); +} +</script> + +<tree id="thetree" rows="4"> + <treecols> + <treecol id="row" label="Row" primary="true" flex="1"/> + </treecols> + <treechildren> + <treeitem label="Row 0"/> + <treeitem label="Row 1"/> + <treeitem label="Row 2"/> + <treeitem label="Row 3"/> + <treeitem label="Row 4"/> + <treeitem label="Row 5"/> + <treeitem label="Row 6"/> + <treeitem label="Row 7"/> + <treeitem label="Row 8"/> + <treeitem label="Row 9"/> + </treechildren> +</tree> + +<hbox align="center"> + <label value="Scroll to row:"/> + <textbox id="tbox"/> + <button label="Scroll" oncommand="doScroll();"/> +</hbox> +</pre> + +<p>Note that we use the rows attribute on the <code><a href="es/XUL/Elementos/tree">tree</a></code> to specify that only four rows are displayed at a time. This makes it easier to see how the example works. Also, notice that the first row is 0.</p> + +<p>The <code>doScroll()</code> function gets the box object and calls the <code>scrollToRow()</code> function with an argument set to the value of the textbox. You might notice that the tree box object can be retieved in the same way as other box objects using the <a class="external" href="http://www.xulplanet.com/references/objref/BoxObject.html">boxObject</a> property, however we need to call <code>QueryInterface()</code> to cast the box object to the more specific tree box object. The functions of the more general box object are also available to trees.</p> + +<p>Additional scroll methods include the <code>scrollByLines()</code>, <code>scrollByPages()</code> and <code>ensureRowIsVisible()</code> functions.</p> + +<p>The <code>scrollByLines()</code> scrolls up or down by a certain number of rows. Use a positive number to go down and a negative number to go up. The <code>scrollByPages()</code> function scrolls by a number of pages and is called automatically when the user presses the page up or page down keys while the tree is focused. A page is equal to the number of visible rows. For example if the tree shows 10 rows at a time, a page will be equivalent to 10 rows. This is a convenient method since when the user resizes a flexible tree, the page size will grow and shrink, so you don't need to calculate the page size manually. This isn't too hard to calculate manually anyway since the tree box object also provides a <code>getPageLength()</code> function which returns the number of rows in a page. In the scrolling example above, <code>getPageLength()</code> would return four.</p> + +<div class="note"> +<p>Note that in Firefox 1.0 and Mozilla 1.7 and earlier, the <code>getPageLength()</code> function is called <code>getPageCount()</code> instead. The name was changed to <code>getPageLength()</code> since it was confusing before since it doesn't return the number of pages, but the size of each page. You could determine the number of pages by dividing the total number of rows by the page length.</p> +</div> + +<p>The <code>ensureRowIsVisible()</code> function will scroll to a row just as <code>scrollToRow()</code> does, but does not scroll if the row is already visible.</p> + +<h3 id="Coordenadas_de_celda" name="Coordenadas_de_celda">Coordenadas de celda</h3> + +<p>Some of the most interesting functions of the tree box object are several functions which may be used to get the parts of the tree at specific coordinates and vice versa.</p> + +<ul> + <li>The <code>getCellAt()</code> function may be used to get the cell at specific pixel location</li> + <li>The <code>getRowAt()</code> function may be used to get a row at a specific location. The <code>getRowAt()</code> function takes two arguments, the x and y coordinates to use.</li> +</ul> + +<pre>tree.boxObject.getRowAt( 50, 100 ); +</pre> + +<p>This example will return the index of the row with a horizontal position of 50 and a vertical position of 100. Naturally, it doesn't really matter what the value of the x coordinate is since rows always take up the entire horizontal space of the tree.</p> + +<div class="note">One important thing to note is that the coordinates are measured from the upper left corner of the containing document, not the edge of the tree itself.</div> + +<p>This makes it easy to pass event coordinates directly to these functions, as in the following example of the <code>getCellAt()</code> function.</p> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_2.xul">Ver en funcionamiento</a></p> + +<pre><script> +function updateFields(event){ + var row = {}, column = {}, part = {}; + var tree = document.getElementById("thetree"); + + var boxobject = tree.boxObject; + boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject); + boxobject.getCellAt(event.clientX, event.clientY, row, column, part); + + if (column.value && typeof column.value != "string") + column.value = column.value.id; + + document.getElementById("row").value = row.value; + document.getElementById("column").value = column.value; + document.getElementById("part").value = part.value; +} +</script> + +<tree id="thetree" flex="1" onmousemove="updateFields(event);"> + <treecols> + <treecol id="utensil" label="Utensil" primary="true" flex="1"/> + <treecol id="count" label="Count" flex="1"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell label="Fork"/> + <treecell label="5"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Knife"/> + <treecell label="2"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Spoon"/> + <treecell label="8"/> + </treerow> + </treeitem> + </treechildren> +</tree> + +<label value="Row:"/> +<label id="row"/> +<label value="Column:"/> +<label id="column"/> +<label value="Child Type:"/> +<label id="part"/> +</pre> + +<p>The <code>getCellAt()</code> function takes five arguments, the coordinates to look up and three out parameters. An out parameter is used since the function needs to return more that one value. You will see a number of interfaces that use out parameters in the <a class="external" href="http://www.xulplanet.com/references/objref/">XULPlanet object reference</a>. These are indicated by the word 'out' before the argument. For these, you will need to supply an empty object and the function will fill in the 'value' property with the necessary value.</p> + +<p>The three out parameters will be filled in with the row, the column and a child type. The row is the index of the row the mouse is over, since we call it with the event coordinates of a <code>mousemove</code> event. If the coordinate is not over a row, the row value will be set to -1. The column is a column object in Mozilla 1.8 and later. In earlier versions, columns are identified with a string, the id of the column. In later versions, a separate column object exists, which can be queried for column data.</p> + +<p>The following line is used so that the example above will work in all versions.</p> + +<pre>if (column.value && typeof column.value != "string") + column.value = column.value.id; +</pre> + +<p>If the column is a string, we are running on Mozilla 1.7 or earlier, but for later versions we get the column id from the column object. If you are writing code for multiple versions, you should check for this as above.</p> + +<p>The last argument to <code>getCellAt()</code> is the child type which is filled in with a string depending on what part of the cell the coordinate is at. If you move the mouse around in the previous example, you might notice the label change between 'text' and 'cell'. The value 'text' indicates the area where the text would be drawn and the value 'cell' indicates the area around the text, for example, the margin on the left side where the open and close twisties are normally drawn. If there was a twisty, however, the value would be 'twisty' instead. This is convenient since you could determine whether the user clicked on a twisty instead of another part of the row. In fact, this is what the underlying tree code does when the user double clicks the twisty. The final value that may be returned is 'image' if there is an image in the tree cell and the coordinate corresponds to a location where the image is. Of course, in many cases you may not care what part of the cell the coordinate is on and just want the row and column.</p> + +<p>To go in reverse and get the cell at a specific coordinate, use the <code>getCoordsForCellItem()</code> function. It takes seven arguments, as described below.</p> + +<pre>var x = {}, y = {}, width = {}, height = {}; +if (typeof tree.columns != "undefined") column = tree.columns[column]; +tree.boxObject.getCoordsForCellItem( row, column, part, x, y, width, height ); +</pre> + +<p>The row, column, and part arguments are similar to those returned from the <code>getCellAt()</code> function. Again, the column should be either a string or a column object depending on which version you are using. The cell part type may be used to get the coordinates of either the text, the entire cell, the twisty or the image in the cell. The same values as the <code>getCellAt()</code> function are used. The <code>getCoordsForCellItem()</code> function returns the x and y coordinates in addition to the width and height, all as out parameters.</p> + +<p>Next, we'll look at RDF which can be used to automatically populate trees and other elements.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Detalles_de_Vistas_de_un_árbol" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Introducción_a_RDF">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/paneles_de_contenidos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/paneles_de_contenidos/index.html new file mode 100644 index 0000000000..3be2bfc904 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/paneles_de_contenidos/index.html @@ -0,0 +1,48 @@ +--- +title: Paneles de contenidos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Paneles_de_contenidos +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Content_Panels +--- +<p> </p> +<p>En esta sección veremos como crear paneles capaces de mostrar páginas HTML o XUL.</p> +<h3 id="A.C3.B1adiendo_marcos" name="A.C3.B1adiendo_marcos">Añadiendo marcos</h3> +<p>Hay veces en que queremos tener parte de un documento cargado desde una página separada. Como por ejemplo en los dialogos guiados paso a paso, en los que pasamos secuencialmente de una pantalla a otra, preguntando una serie de preguntas. Cada vez que el usuario hace clic en el boton ‘siguiente’, la siguiente pantalla se muestra.</p> +<p>Se podrían crear estos dialogos guiados abriendo una ventana para cada pantalla, sin embargo hay almenos tres problemas con esta aproximación. Primero, cada ventana podría aparecer en un sitio diferente (aunque hay formas de evitarlo). Segundo, algunos elementos como los botones ‘atrás’ y ‘siguiente’ son siempre iguales durante todas las pantallas, por lo que sería mucho mejor si solo el área de contenidos fuera la que cambiara. Tercero, sería dificil coordinar los scripts si se ejecutarán en diferentes ventanas.</p> +<p>Cabe destacar que XUL nos ofrece el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_wizard.html">wizard</a></code>, que podemos usar para crear dialogos guiados. Este elementos se explicará más adelante.</p> +<p>Otra aproximación es usar marcos de contenido, el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_iframe.html">iframe</a></code> en XUL, el cual funciona practicamente igual que el elemento del mismo nombre en HTML. Crea un documento separado dentro de la ventana. Tiene la ventaja de que puede colocarse en cualquier parte de la ventana y de que su contenido puede guardarse en un fichero separado. Podemos decidir que fichero queremos que se muestre usando el atributo <code>src</code>. Este fichero puede ser de cualquier tipo, aunque normalmente usaremos ficheros HTML o XUL. Podemos cambiar los contenidos de un <code>iframe</code>, sin afectar a la ventana principal, usando un script.</p> +<p>En la ventana del navegador Mozilla, el área donde se muestra la página web se crea usando un <code>iframe</code>. Cuando el usuario introduce una dirección o hace clic en un enlace del documento, el atributo src del iframe es cambiado.</p> +<p>El siguiente ejemplo muestra el uso de los marcos de contenido:</p> +<h4 id="Ejemplo_Usando_iframe" name="Ejemplo:_Usando_iframe">Ejemplo: Usando <code>iframe</code></h4> +<pre><toolbox> + <toolbar id="nav-toolbar"> + <toolbarbutton label="Atrás"/> + <toolbarbutton label="Siguiente"/> + <textbox id="urlfield"/> + </toolbar> +</toolbox> + +<iframe id="contenidos" src="http://www.mozilla.org" flex="1"/> +</pre> +<p>Este ejemplo presenta el interfaz para un navegador web muy simple. Hay dos elementos principales, un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_toolbox.html">toolbox</a></code> (contenedor para barras de herramientas) y un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_iframe.html">iframe</a></code> (marco de contenidos). Los botones Atrás y Siguiente, así como la caja de texto para la dirección se han incluido en una barra de herramientas. Las páginas web aparecerían dentro del elemento <code>iframe</code>, en este caso la página de la fundación Mozilla sería la que aparecería por defecto.</p> +<p>Este ejemplo no es completamente funcional. Posteriormente, necesitaremos adicionar un script el cual cambia el atributo en el tiempo deseado, por ejemplo cuando el usuario presiona la tecla Enter.</p> +<h3 id="Browsers" name="Browsers">Browsers</h3> +<p>There is a second type of content panel, using the <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_browser.html">browser</a></code> tag. You would use this when you want to create a frame that displays content like a browser. Actually, the iframe can do this too, but the browser has a variety of additional features. For example, the browser maintains a page history for use with Back and Forward buttons. The <code>browser</code> can also load pages with referers and other flags. Essentially, the <code>browser</code> tag should be used when you want to create a browser-like interface, but the <code>iframe</code> may be used when you just need a simple panel.</p> +<p>A similar element, <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_tabbrowser.html">tabbrowser</a></code>, provides the functionality of <code>browser</code> but also provides a tab bar for switching between multiple pages. This is the widget used by the Mozilla browser for its tabbed browsing interface. The <code>tabbrowser</code> element is actually implemened as a <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_tabbox.html">tabbox</a></code> containing a set of <code>browser</code> elements. Both types of browser offer similar control over pages that are displayed.</p> +<p>Here is an example browser:</p> +<h4 id="Example" name="Example">Example</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul">Ver en funcionamiento</a></p> +<pre><browser src="http://www.mozilla.org" flex="1"/> +</pre> +<p>As with the iframe, you can specify the url in a browser using the <code>src</code> attribute. For a <code>tabbrowser</code>, you cannot set the url directly like this, as it doesn't display just one url. Instead, you must use a script and call the <code>loadURI</code> function.</p> +<p>There are three classes of browser, depending on the kind of content that you want to display inside. The type may be specified using the <code>type</code> attribute. The first type is the default and is used if you don't specify a type. In this case, the content loaded inside the browser is treated as if it was part of the same application and has access to the outer window. That means that when a script loaded inside the browser tries to get the topmost window, it will get the outer XUL window.</p> +<p>This would be suitable for a child XUL panel that is part of your application, but this isn't what you want for a browser that loads a web page. Instead, you would want to restrict the web page to only getting access to the web page content. You might note that a Mozilla browser window has XUL content for the toolbars and statusbar and so forth with a <code>tabbrowser</code> forming the main area. This inner area displays a web page, but the web page cannot access the XUL around it. This is because it uses the second type of browser, specified by setting the <code>type</code> attribute to the value <code>content</code>. This prevents the content from traversing up to the XUL window. An example:</p> +<pre><browser src="http://www.mozilla.org" type="content" flex="1"/> +</pre> +<p>It is important that you set the <code>type</code> attribute correctly if you are going to be displaying remote web sites inside the <code>browser</code> element. The <code>tabbrowser</code> sets the content type automatically on all tabbed browsers that it creates. So you don't have to set this explicitly for tabbed browsers.</p> +<p>The third type is used when your window contains multiple browser elements, for example if you have a sidebar displaying some extra content. Set the <code>type</code> attribute on the main <code>browser</code> element to <code>content-primary</code> to indicate that its content will be the primary content inside the window. This acts just like the <code>content</code> value except that the content inside is accessible using the XUL window's 'content' property. This makes it easy to access the content of the main browser using a script. The <code>tabbrowser</code> automatically sets the <code>type</code> attribute of whichever browser is currently visible to <code>content-primary</code>, which means that you will always be able to access the currently visible content in this way.</p> +<p>Next, we'll look at how to create a splitter.</p> +<p><span class="comment">Categorías</span></p> +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/plantillas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/plantillas/index.html new file mode 100644 index 0000000000..96b7e38150 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/plantillas/index.html @@ -0,0 +1,191 @@ +--- +title: Plantillas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Plantillas +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Templates +--- +<p>En esta sección descubriremos cómo poblar elementos con datos.</p> + +<h3 id="Poblando_elementos" name="Poblando_elementos">Poblando elementos</h3> + +<p>XUL provee un método con el cual creamos elementos a partir de datos proporcionados por RDF, ya sea desde un archivo RDF o desde un origen de datos interno. Mozilla suministra muchas fuentes de datos, como ser marcadores, histórico y mensajes de correo. En la <a href="es/Tutorial_de_XUL/Fuentes_de_datos_RDF">próxima sección</a> se ofrecerán más detalles sobre esto.</p> + +<p>Normalmente los elementos tales como treeitem y menuitem serán poblados con datos. Sin embargo, si se desea pueden usarse otros elementos, aunque éstos son mas útiles en casos especiales. A pesar de ello comenzaremos con estos otros elementos ya que los árboles y los menús requieren mas código.</p> + +<p>Para permitir la creación de elementos basados en datos RDF se necesitará proporcionar una plantilla simple, la cual será duplicada por cada elemento creado. Esencialmente, se provee únicamente el primer elemento y los restantes son construidos sobre la base de éste.</p> + +<p>La plantilla es creada empleando el elemento <code><a href="es/XUL/Elementos/template">template</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_template.html">en</a>), dentro del mismo pueden ubicarse los elementos que se desee utilizar para cada elemento a construir. El elemento <code>template</code> debe ser colocado dentro del contenedor que contendrá los elementos construidos. Por ejemplo, si se utiliza un árbol debe colocarse el elemento <code>template</code> dentro de un elemento <code><a href="es/XUL/Elementos/tree">tree</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_tree.html">en</a>).</p> + +<h4 id="Ejemplo_de_plantilla_simple" name="Ejemplo_de_plantilla_simple">Ejemplo de plantilla simple</h4> + +<p>Tomemos un simple ejemplo donde queremos crear un botón por cada marcador de primer nivel. Mozilla ofrece una fuente de datos de marcadores por lo que ésta puede emplearse para adquirir los datos. Este ejemplo únicamente obtendrá los marcadores de primer nivel (o carpetas de marcadores) por lo que crearemos botones. Para los marcadores hijos deberemos usar un elemento que muestre datos de manera jerárquica, como un árbol o un menú.</p> + +<div class="note"> +<p>Tanto este ejemplo como cualquier otro que haga referencia a fuentes de datos RDF internas únicamente funcionará si se lo carga desde una URL chrome, ya que por razones de seguridad Mozilla no permite el acceso a ellas desde otras procedencias.</p> +</div> + +<p>Para ver este ejemplo se necesitará crear un paquete chrome y cargar el archivo desde allí, (se puede hacer fácilmente mirando en <a href="es/Tutorial_de_XUL/Archivos_Manifest">archivos de manifiesto</a>) entonces se podrá ingresar la URL chrome en la barra de direcciones del navegador.</p> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_1.xul">Ver en funcionamiento</a></p> + +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </template> +</vbox> +</pre> + +<p><img alt="Image:templates1.jpg"></p> + +<p>Aquí se ha creado una caja vertical que contiene una columna de botones, uno por cada marcador de primer nivel. Puede verse que la plantilla contiene un solo <code><a href="es/XUL/Elementos/button">botón</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_button.html">en</a>), éste es utilizado como base para todos los botones que serán creados. En la imagen se observa que se creó un conjunto de botones, uno por cada marcador.</p> + +<p>Intente añadir un nuevo marcador en el navegador manteniendo la ventana de ejemplo abierta. Notará que los botones del ejemplo son inmediatamente actualizados, puede ser necesario enfocar la ventana para que se produzca este cambio.</p> + +<h4 id="Contenedor_y_fuentes_de_dato" name="Contenedor_y_fuentes_de_dato">Contenedor y fuentes de dato</h4> + +<p>La plantilla es colocada dentro de la caja vertical, la caja posee dos atributos especiales que le permiten ser utilizada para plantillas, los cuales se emplean para especificar el origen de los datos. El primer atributo de la caja es <code>datasources</code>, el cual se usa para declarar la fuente de datos RDF que proveerá los datos para crear los elementos, en éste caso <code>rdf:bookmarks</code>. Se habrá adivinado que esto significa que se utilizará la fuente de datos de marcadores, esta fuente es proveída por Mozilla. Para utilizar un origen de datos propio, en el atributo <code>datasources</code> debe especificarse la URL de un archivo RDF, tal como se indica en el siguiente ejemplo:</p> + +<pre><box datasources="chrome://zoo/contenidos/animales.rdf" + ref="http://www.algun-zoo-ficticio.com/todos-los-animales"> +</pre> + +<p>Incluso pueden especificarse múltiples fuentes de datos al mismo tiempo separándolas con un espacio en el valor del atributo. Esto puede aprovecharse para mostrar datos desde varios orígenes.</p> + +<p>El atributo <code>ref</code> indica la parte de la fuente de datos desde donde se quiere obtener los datos. En el ejemplo de los marcadores, el valor <code>NC:BookmarksRoot</code> es utilizado para indicar la raíz de la jerarquía de marcadores. Otros valores posibles dependerán del origen de datos utilizado, si se utiliza un archivo RDF propio como origen de datos, el valor corresponderá al valor de un atributo <code>about</code> en un elemento <code>Bag</code> RDF, un elemento <code>Seq</code> o un elemento <code>Alt</code>.</p> + +<h4 id="Dentro_de_la_plantilla" name="Dentro_de_la_plantilla">Dentro de la plantilla</h4> + +<p>Al añadir estos dos atributos a la caja de arriba se permitirá la generación de elementos utilizando la plantilla. Sin embargo, los elementos dentro de la plantilla necesitan ser declarados de otra forma. En el ejemplo anterior puede observarse que el botón posee un atributo <code>uri</code> y un valor inusual para el atributo <code>label</code>.</p> + +<p>El valor de un atributo dentro de la plantilla que comience con 'rdf:' indica que el valor debe ser obtenido de la fuente de datos, éste es el caso del atributo <code>label</code> en el ejemplo anterior. El resto del valor hace referencia a la propiedad name en la fuente de datos. Esto se construye tomando la URL del área de denominación utilizada por la fuente de datos y agregando la propiedad name. Si no puede comprender esto intente volver a leer la última parte de la <a href="es/Tutorial_de_XUL/Introducci%c3%b3n_a_RDF">sección anterior</a>, la cual explica cómo se pueden referenciar los recursos en RDF. Aquí usamos únicamente el nombre del marcador pero hay muchos otros campos disponibles.</p> + +<p>La etiqueta de los botones es fijada a esta URI especial ya que queremos que las etiquetas en los botones contengan los nombres de los marcadores. Podríamos haber puesto una URI en cualquiera de los atributos del botón, o de cualquier otro elemento. Los valores de estos atributos son reemplazados con datos alimentados por la fuente de datos la cual es, en éste caso, la de marcadores. Por ello terminamos con las etiquetas de los botones conteniendo los nombres de los marcadores.</p> + +<p>El siguiente ejemplo muestra cómo podríamos establecer otros atributos de un botón empleando una fuente de datos. Naturalmente, esto asume que la fuente de datos provee los recursos apropiados. Si un recurso en particular no puede ser encontrado el valor del atributo será una cadena de texto vacía.</p> + +<pre><button class="rdf:http://www.ejemplo.com/rdf#clase" + uri="rdf:*" + label="rdf:http://www.ejemplo.com/rdf#name"/> + crop="rdf:http://www.ejemplo.com/rdf#crop"/> +</pre> + +<p>Como puede verse, es posible generar listas de elementos dinámicamente con los atributos proporcionados por un origen de datos diferente. El atributo uri es empleado para especificar el elemento a partir del cual se iniciará la generación de contenido. El primer contenido se generará una vez mientras que el contenido en el interior será generado para cada recurso. Veremos más de esto al crear <a href="es/Tutorial_de_XUL/%c3%81rboles_y_plantillas">plantillas para árboles</a>.</p> + +<h4 id="M.C3.A1s_ejemplos" name="M.C3.A1s_ejemplos">Más ejemplos</h4> + +<p>Al agregar estas características en el contenedor dentro del cual se encuentra la plantilla, que es en este caso una caja, y a los elementos dentro de la plantilla, podremos generar listas de contenido interesantes a partir de datos externos. Claro que podemos poner más de un elemento dentro de una plantilla y añadir las referencias RDF especiales a los atributos en cualquiera de estos elementos. El siguiente ejemplo lo demuestra.</p> + +<p><strong>Ejemplo 2</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_2.xul">Ver en funcionamiento</a></p> + +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + <vbox uri="rdf:*"> + <button label="rdf:http://home.netscape.com/NC-rdf#Name"/> + <label value="rdf:http://home.netscape.com/NC-rdf#URL"/> + </vbox> + </template> +</vbox> +</pre> + +<p>Esto crea una caja vertical con un botón y una etiqueta por cada marcador. El botón tendrá el nombre del marcador y la etiqueta su URL.</p> + +<p>Los elementos que son creados no son funcionalmente diferentes a aquellos insertados directamente en el archivo XUL. Para cada elemento creado a través de una plantilla se añadirá el atributo id, el cual tendrá un valor que identifica el recurso. Esto puede emplearse para identificar el recurso creado.</p> + +<p>También es posible especificar en el mismo atributo múltiples valores de recurso separándolos con un espacio, igual que en ejemplo debajo y en <a class="external" href="http://www.xulplanet.com/tutorials/xultu/templateex.html">más acerca de la sintaxis de recursos</a> (XULPlanet).</p> + +<p><strong>Ejemplo 3</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_3.xul">Ver en funcionamiento</a></p> + +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" + flex="1"> + <template> + <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name rdf:http://home.netscape.com/NC-rdf#URL"/> + </template> +</vbox> +</pre> + +<h3 id="C.C3.B3mo_son_construidas_las_plantillas" name="C.C3.B3mo_son_construidas_las_plantillas">Cómo son construidas las plantillas</h3> + +<p>Cuando un elemento posee el atributo <code>datasources</code> se está indicando que se espera que el elemento sea construido a partir de una plantilla. Note que el rótulo <code>template</code> no es el que determina si el contenido se construirá, es el atributo <code>datasources</code>. Si este atributo está presente, un objeto llamado Builder (constructor) se añadirá al elemento. Este objeto es el responsable de construir el contenido a partir de la plantilla. En JavaScript puede accederse al objeto constructor mediante la propiedad <code>builder</code>, aunque normalmente esto será necesario solo si se desea que el constructor regenere el contenido en situaciones donde esto no se haga automáticamente.</p> + +<p>Existen dos tipos diferentes de constructores. El primero es un constructor de contenidos y se utiliza en la mayoría de los casos, y el otro es un constructor de árboles que se usa únicamente para árboles.</p> + +<p>El constructor de contenidos toma el contenido dentro del elemento template y lo duplica por cada fila. Por ejemplo, si en el ejemplo anterior el usuario tenía diez marcadores, diez elementos <code><a href="es/XUL/Elementos/label">label</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_label.html">en</a>) serán creados y añadidos al elemento <code><a href="es/XUL/Elementos/vbox">vbox</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_vbox.html">en</a>). Si se utilizaran funciones DOM para recorrer el árbol, podrán encontrarse estos elementos y ver sus propiedades. Los elementos serán visibles pero no la plantilla, aunque aún existe en el documento árbol. Además, la <code>id</code> de cada una de las etiquetas se establecerá con el recurso RDF para esa fila.</p> + +<p>Este constructor siempre comienza en el lugar donde se ha especificado uri=“rdf:*�?. Si el atributo <code>uri</code> en un elemento posterior al elemento árbol, los elementos fuera se crearán una sola vez. En el siguiente ejemplo se creará una caja horizontal (<code><a href="es/XUL/Elementos/hbox">hbox</a></code>), la cual será llenada con una etiqueta por cada ítem.</p> + +<pre><template> + <hbox> + <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name"/> + </hbox> +</template> +</pre> + +<p>Si hubiera otros contenidos dentro del elemento con el atributo <code>datasources</code> pero fuera de la plantilla, ésos contenidos también aparecerán. Así puede mezclarse contenidos estáticos y contenidos dinámicos de una plantilla.</p> + +<h4 id="Constructor_de_.C3.A1rbol" name="Constructor_de_.C3.A1rbol">Constructor de árbol</h4> + +<p>El constructor de árboles, por otro lado, no genera los elementos DOM para las filas. En cambio, obtendrá la información directamente de la fuente de datos RDF cuando la necesite. Ya que usualmente se espera que los árboles muestren miles de filas de datos, este método es mucho más eficiente. Crear un elemento por cada celda sería muy costoso. Sin embargo, el trueque es que los árboles únicamente pueden mostrar texto y, como no se crean elementos, no podrán utilizarse propiedades CSS para diseñar celdas de árboles.</p> + +<p>El constructor de árboles se utiliza solamente con árboles. Los otros elementos utilizan el constructor de contenido. Esto no causa problema alguno, ya que no se prevé que otros elementos -como los menús- contengan demasiados ítems. También es posible utilizar el constructor de contenido con los árboles, y por cada fila se crearán un elemento <code><a href="es/XUL/Elementos/treeitem">treeitem</a></code> y sus elementos relacionados.</p> + +<h3 id="Reglas.2C_l.C3.ADneas_o_delineaci.C3.B3n" name="Reglas.2C_l.C3.ADneas_o_delineaci.C3.B3n">Reglas, líneas o delineación</h3> + +<p>En la imagen del anterior ejemplo se habrá notado que el tercer botón es simplemente un botón con un guión adentro, éste es un separador en la lista de marcadores. De la manera en que la venimos usando, la fuente de datos RDF de marcadores suministra los separadores como si fueran comunes marcadores. Lo que realmente querríamos lograr es mostrar un pequeño espacio en lugar de un botón para los separadores, esto significa que queremos crear dos tipos diferentes de contenido, uno para los marcadores regulares y otro para los separadores.</p> + +<p>Podemos hacer esto empleando el elemento <code><a href="es/XUL/Elementos/rule">rule</a></code> (<a class="external" href="http://www.xulplanet.com/references/elemref/ref_rule.html">en</a>). Definimos una regla/línea por cada variación en los elementos que queremos crear. En nuestro caso, necesitaremos un delineación para los marcadores y otro para los separadores. Los atributos puestos en el elemento <code>rule</code> determinan cuales reglas se aplican a qué recurso RDF.</p> + +<p>Al buscarse qué delineación aplican a los datos, cada regla es revisada en secuencia buscando coincidencias. Esto significa que el orden en que se definen las delineación es importante, ya que los primeros tendrán precedencia sobre los posteriores.</p> + +<p>El siguiente ejemplo demuestra el ejemplo anterior con dos reglas:</p> + +<p><strong>Ejemplo 4</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_4.xul">Ver en funcionamiento</a></p> + +<pre><window id="ventana-ejemplo + title="Lista de marcadores" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + + <rule rdf:type="http://home.netscape.com/NC-rdf#BookmarkSeparator"> + <spacer uri="rdf:*" height="16"/> + </rule> + + <rule> + <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </rule> + + </template> + </vbox> + +</window> +</pre> + +<p><img alt="Image:templates2.jpg"></p> + +<p>Al utilizar dos delineaciones hemos permitido que el contenido de la plantilla sea generado selectivamente. En la primer regla se seleccionan separadores de marcadores, como puede observarse en el atributo <code>rdf:type</code>. La segunda delineación no posee atributos, por lo que todos los datos corresponden.</p> + +<p>Todos los atributos puestos en el rótulo tag se usan como criterio de correspondencia. En este caso, la fuente de datos <code>bookmarks</code> provee una propiedad <code>rdf:type</code> para distinguir separadores. Este atributo es fijado en un valor especial para los separadores en la fuente de datos RDF de marcadores, así es como podemos distinguirlos de los marcadores que no son separadores. Una técnica similar puede ser utilizada para cualquier atributo que pudiera existir en un elemento RDF <code>Description</code>.</p> + +<p>El valor URL específico dado al primer lineamiento en el ejemplo de arriba se utiliza para separadores. Esto significa que los separadores seguirán la regla uno y generarán un elemento <code><a href="es/XUL/Elementos/spacer">spacer</a></code>, el que mostrará un hueco de 16 píxeles. Los elementos que no sean separadores no coincidirán con la regla uno y caerán en la regla dos, la cual no posee atributos por lo que cualquier dato coincide. Esto es, por supuesto, lo que queremos que le suceda al resto de la información.</p> + +<p>Se habrá notado también que como quisimos obtener un atributo del área de denominación RDF (<code>rdf:type</code>) tuvimos que añadir una declaración del área de denominación al rótulo <code><a href="es/XUL/Elementos/window">window</a></code>. Si no hubiéramos hecho esto el atributo (type) se habría buscado en el área de denominación XUL, y como éste atributo no existe en ella la regla no tendría correspondencias. Si se utilizan atributos en un área de denominación propia se deberá añadir una declaración a la misma para corresponderlos.</p> + +<p>Debería adivinarse qué sucedería si se eliminara la segunda delineación. Como resultado se vería un solo espacio y ningún marcador ya que los mismos no coincidirían con ninguna de las reglas.</p> + +<p>Puesto de manera simple, una delineación corresponde si todos los atributos puestos en el elemento <code>rule</code> coinciden los atributos correspondientes en el recurso RDF. En el caso de un archivo RDF, los recursos serían los elementos <code>Description</code>.</p> + +<p>Sin embargo hay pequeñas excepciones. No puede haber correspondencias basadas en los atributos id, <code>rdf:property</code> o <code>rdf:instanceOf</code>, aunque ya que pueden utilizarse atributos propios de áreas de denominación propias esto no debe importar mucho.</p> + +<p>Note que una plantilla sin reglas en ella, como en el primer ejemplo, en realidad es funcionalmente un equivalente a una plantilla con un solo lineamiento sin atributos en él.</p> + +<p>A continuación veremos cómo utilizar plantillas con los árboles.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Introducción_a_RDF" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Árboles_y_plantillas">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/posicionamiento_de_elementos_de_la_ventana/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/posicionamiento_de_elementos_de_la_ventana/index.html new file mode 100644 index 0000000000..8777a6f90c --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/posicionamiento_de_elementos_de_la_ventana/index.html @@ -0,0 +1,229 @@ +--- +title: Posicionamiento de elementos de la ventana +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Posicionamiento_de_elementos_de_la_ventana +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning +--- +<p>Aquí veremos cómo controlar la posición y tamaño de un elemento.</p> +<h3 id="Posicionamiento_de_elementos_de_la_caja" name="Posicionamiento_de_elementos_de_la_caja">Posicionamiento de elementos de la caja</h3> +<p>Hasta ahora sabemos cómo posicionar vertical u horizontalmente los elementos en el interior de una caja. A menudo necesitaremos mayor control sobre la posición y tamaño de los elementos dentro de la caja, para esto primero necesitamos echar un vistazo a cómo trabaja una caja.</p> +<p>La posición de un elemento es determinada por el estilo de esquema de su contenedor. Por ejemplo, la posición de un botón en una caja horizontal es a la derecha del botón anterior, si es que hay alguno. El tamaño de un elemento es determinado por dos factores, el tamaño que el elemento necesita poseer y el tamaño que uno especifique. El tamaño que un elemento requiere es determinado por el tipo de elemento. Por ejemplo, el ancho de un botón es determinado por la cantidad de texto en el botón.</p> +<p>Un elemento será generalmente tan amplio como éste necesite para soportar su contenido, y no mayor. Algunos elementos, como las cajas de texto, tienen un tamaño predeterminado. Una caja será suficientemente amplia como para contener los elementos dentro de ella. Una caja horizontal con tres botones en ella será tan ancha como los tres botones, más un pequeño espacio de relleno.</p> +<p>En la imagen de abajo, a los primeros dos botones se les ha dado un tamaño adecuado como para contener su texto. El tercer botón es mayor porque tiene más contenido. El ancho de la caja que contiene los botones es el ancho total de los botones más el espacio entre ellos. El alto de los botones es de un tamaño apropiado para contener el texto.</p> +<p><img alt="posicionamiento_img01.jpg" class="internal default" src="/@api/deki/files/4787/=posicionamiento_img01.jpg"></p> +<p>Podría necesitarse tener mayor control sobre el tamaño de un elemento en una ventana. Hay para ello un número de características que permiten controlar el tamaño de un elemento. La forma rápida es simplemente agregar a un elemento los atributos width (ancho) y height (alto), muy parecido a lo que puede hacerse en un rótulo HTML img. Un ejemplo se demuestra abajo:</p> +<h4 id="Ejemplo_atributos_height_y_width" name="Ejemplo:_atributos_height_y_width">Ejemplo: atributos height y width</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul">Ver en funcionamiento</a></p> +<pre><button label="Aceptar" width="100" height="40"/> +</pre> +<p>Sin embargo, no se recomienda hacer esto, ya que no es muy portable y podría no adaptarse a algunos temas. Una mejor forma es utilizar propiedades de estilo, que funcionan de manera similar a las hojas de estilo en HTML. Pueden utilizarse las siguientes propiedades CSS:</p> +<dl> + <dt> + width </dt> + <dd> + Esto especifica el ancho del elemento.</dd> + <dt> + height </dt> + <dd> + Especifica el alto del elemento.</dd> +</dl> +<p>Fijando cualquiera de estas propiedades, el elemento será creado con ese ancho y/o largo. Si se especifica solo una propiedad de tamaño, la otra se calculará de acuerdo a lo requerido. El tamaño de estas propiedades de estilo deben especificarse como un número seguido de una unidad de medida.</p> +<p>Los tamaños son bastante fáciles de calcular para elementos no flexibles. Estos simplemente obedecen sus anchos y altos especificados, y si el tamaño no fuera especificado, el tamaño predeterminado del elemento será lo suficientemente amplio como para acomodar su contenido. Para elementos flexibles, el cálculo es ligeramente más difícil.</p> +<p>Elementos flexibles son aquellos que poseen el atributo flex establecido en un valor mayor que 0. Debe recordarse que los elementos flexibles aumentan y disminuyen su tamaño para acomodarse al espacio disponible. Su tamaño predeterminado aún se calcula igual que el de los elementos no flexibles. El siguiente ejemplo lo demuestra:</p> +<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul">Ver en funcionamiento</a></p> +<pre><window orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<hbox> + <button label="Sí" flex="1"/> + <button label="No"/> + <button label="Realmente no sé si uno u otro."/> +</hbox> + +</window> +</pre> +<p>La ventana aparecerá inicialmente como la imagen anterior. Los primeros dos botones serán dimensionados a un adecuado ancho predeterminado y el tercer botón será mayor porque tiene una etiqueta más larga. El primer botón fue hecho flexible y los tres elementos han sido puestos dentro de una caja. El ancho de la caja se fijará al ancho total inicial de los tres botones (en la imagen cerca de 430 píxeles).</p> +<p>Si se incrementa el ancho de la ventana, los elementos son comprobados para ver si son flexibles y así rellenar el espacio en blanco que aparecerá. El botón es el único elemento flexible, pero no aumentará su ancho porque la caja dentro de la que encuentra no es flexible. Un elemento no flexible nunca cambia su tamaño aún cuando haya espacio disponible, por lo que el botón no podrá crecer. Esto es, el botón no se hará más ancho.</p> +<p>La solución es también hacer flexible a la caja. Entonces, cuando se haga más ancha la ventana, habrá espacio extra disponible, por lo que la caja crecerá para ocupar el espacio extra. Como la caja es mayor, también se creará espacio extra dentro de ella, y el botón flexible que contiene crecerá para ajustarse al espacio disponible. Este proceso se repetirá por cada caja anidada existente.</p> +<h3 id="Estableciendo_tama.C3.B1os_m.C3.ADnimos_y_m.C3.A1ximos" name="Estableciendo_tama.C3.B1os_m.C3.ADnimos_y_m.C3.A1ximos">Estableciendo tamaños mínimos y máximos</h3> +<p>Puede ser necesario permitir que un elemento sea flexible, pero restringir su tamaño para que no pueda superar cierta dimensión; o puede necesitarse especificar un tamaño mínimo. Esto puede establecerse utilizando cuatro atributos.</p> +<dl> + <dt> + minwidth </dt> + <dd> + Especifica el ancho mínimo del elemento.</dd> + <dt> + minheight </dt> + <dd> + Especifica la altura mínima del elemento.</dd> + <dt> + maxwidth </dt> + <dd> + Especifica el ancho máximo del elemento.</dd> + <dt> + maxheight </dt> + <dd> + Especifica la altura máxima del elemento.</dd> +</dl> +<p>Estos valores se miden siempre en píxeles. También pueden utilizarse las correspondientes propiedades CSS, <code>min-width</code>, <code>min-height</code>, <code>max-width</code> y <code>max-height</code>.</p> +<p>Estas propiedades son aprovechables únicamente por elementos flexibles. Especificando una altura máxima, por ejemplo, un botón flexible podrá crecer solamente hasta esa altura. Aún podrá redimensionarse la ventana más allá de ese punto pero el botón dejará de crecer. Asimismo, la caja en la que se encuentre el botón podrá continuar agrandándose, a menos que también se le fije una altura máxima.</p> +<p>Si dos botones son igualmente flexibles, normalmente ambos compartirán el espacio extra. Si un botón tiene un ancho máximo, el segundo continuará creciendo y ocupará todo el espacio restante.</p> +<p>Si una caja posee un ancho o alto máximos, los hijos no podrán crecer más allá de ese tamaño máximo. Si una caja tiene un ancho o alto mínimos, los hijos no podrán achicarse menos que ese tamaño mínimo. Aquí hay algunos ejemplos del establecimiento de anchos y altos:</p> +<pre><button label="1" style="width: 100px;"/> +<button label="2" style="width: 100em; height: 10px;"/> +<button label="3" flex="1" style="min-width: 50px;"/> +<button label="4" flex="1" style="min-height: 2ex; max-height: 100px"/> +<textbox flex="1" style="max-width: 10em;"/> +<description style="max-width: 50px">Este es un aburrido pero simple texto desplegable.</description> +</pre> +<dl> + <dt> + Ejemplo 1 </dt> + <dd> + el primer botón será mostrado con un ancho de 100 píxeles (px significa píxeles). Debe agregarse la unidad de medida o el ancho será ignorado.</dd> + <dt> + Ejemplo 2 </dt> + <dd> + el segundo botón se mostrará con un alto de diez píxeles y un ancho de 100 ems (un em es la medida de un carácter en el tipo de letra utilizado).</dd> + <dt> + Ejemplo 3 </dt> + <dd> + el tercer botón es flexible, por lo que crecerá basado en el tamaño de la caja en la que se encuentre. Sin embargo, el botón nunca se reducirá a menos de 50 píxeles. Otros componentes flexibles como los espaciadores absorberán el espacio remanente, rompiendo el cociente flex.</dd> + <dt> + Ejemplo 4 </dt> + <dd> + el cuarto botón es flexible y nunca tendrá una altura que sea menor a 2 ex (un ex es normalmente la altura de la letra x en el tipo de letra utilizado) o mayor que 100 píxeles.</dd> + <dt> + Ejemplo 5 </dt> + <dd> + la entrada de texto es flexible pero nunca crecerá más de 10 ems. A menudo se querrá utilizar ems al especificar tamaños de elementos con texto en ellos. Esta unidad de medida es útil para cajas de texto, así el tipo de letra podrá cambiar y las cajas de texto siempre poseerán un tamaño adecuado, aún si el tipo de letra es muy grande.</dd> + <dt> + Ejemplo 6 </dt> + <dd> + el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_description.html">description</a></code> está restringido a poseer un ancho máximo de 50 píxeles. El texto contenido se desplegará hasta la siguiente línea, luego de cincuenta píxeles.</dd> +</dl> +<div class="highlight"> + <p>Agreguemos alguno de estos estilos a la ventana de diálogo "buscar archivos". Lo haremos de tal manera que la caja de texto se redimensione para ocupar toda la ventana.</p> + <p><textbox id="find-text" flex="1" style="min-width: 15em;"/></p> + <p>Aquí, la entrada de texto se ha hecho flexible, de esta manera crecerá si el usuario cambia el tamaño de la ventana. Esto es útil si el usuario desea ingresar una cadena de texto muy larga. También, un ancho mínimo de 15 ems fue fijado para que la caja de texto siempre muestre al menos 15 caracteres. Si el usuario achica el tamaño de la ventana, la entrada de texto no se reducirá pasados los 15 ems. Se dibujará como si se extendiera sobrepasando el borde de la ventana. Nótese en la imagen de abajo que la entrada de texto a crecido para extenderse por el tamaño total de la ventana.</p> +</div> +<h3 id="Empaque_de_cajas" name="Empaque_de_cajas">Empaque de cajas</h3> +<p>Digamos que se tiene una caja con dos elementos hijos, de los cuales ninguno es flexible, pero la caja sí lo es. Por ejemplo:</p> +<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul">Ver en funcionamiento</a></p> +<pre><box flex="1"> + <button label="Alegre"/> + <button label="Triste"/> +</box> +</pre> +<p>Si se redimensiona la ventana, la caja se expandirá para adaptarse al tamaño de la ventana. Los botones no son flexibles, por lo que sus longitudes no cambiarán. El resultado es espacio extra que aparecerá en el lado derecho de la ventana, dentro de la caja. Puede desearse, sin embargo, que el espacio extra aparezca del lado izquierdo, así los botones se mantendrán alineados a la derecha en la ventana.</p> +<p>Esto puede lograrse colocando un espaciador dentro de la caja, pero se volverá confuso cuando haya que realizarlo muchas veces. Una mejor solución es utilizar en la caja un atributo adicional: pack (empaquetar). Este atributo indica cómo empaquetar los elementos hijos dentro de la caja. Para cajas orientadas horizontalmente, controla el posicionamiento horizontal de los hijos. En cajas verticales, controla el posicionamiento vertical. Pueden utilizarse los siguientes valores:</p> +<dl> + <dt> + start </dt> + <dd> + Posiciona los elementos en el extremo izquierdo para cajas horizontales y en el extremo superior para cajas verticales. Este es el valor predeterminado.</dd> + <dt> + center </dt> + <dd> + Centra los elementos hijos en la caja.</dd> + <dt> + end </dt> + <dd> + Posiciona los elementos al extremo derecho en cajas horizontales y al extremo inferior en cajas verticales.</dd> +</dl> +<p>El atributo <code>pack</code> se aplica a la caja contenedora de los elementos a ser empaquetados, no a los elementos en sí mismos.</p> +<p>Podemos cambiar el ejemplo anterior para centrar los elementos, de esta manera:</p> +<h4 id="Ejemplo_3" name="Ejemplo_3">Ejemplo</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul">Ver en funcionamiento</a></p> +<pre><box flex="1" pack="center"> + <button label="Alegre"/> + <button label="Triste"/> +</box> +</pre> +<p>Ahora, cuando la ventana sea redimensionada, los botones se centrarán horizontalmente. Compare este comportamiento con el del ejemplo anterior.</p> +<h3 id="Alineaci.C3.B3n_de_cajas" name="Alineaci.C3.B3n_de_cajas">Alineación de cajas</h3> +<p>Si la ventana en el ejemplo Alegre/Triste se redimensiona horizontalmente, el ancho de la caja crecerá. Si no obstante se redimensiona la caja verticalmente, notará que la altura de los botones aumenta. Esto sucede porque la flexibilidad en la otra dirección se asume predeterminadamente.</p> +<p>Puede regularse este comportamiento con el atributo <code>align</code> (alineación). Para cajas horizontales, éste controla verticalmente la posición de los hijos. En cajas verticales, controla la posición horizontal de los hijos. Los valores posibles son similares a los de <code>pack</code>..</p> +<dl> + <dt> + start </dt> + <dd> + Alinea los elementos a lo largo del extremo superior para cajas horizontales y a lo largo del borde izquierdo para cajas verticales.</dd> + <dt> + center </dt> + <dd> + Centra los elementos hijos en la caja.</dd> + <dt> + end </dt> + <dd> + Alinea los elementos a lo largo del extremo inferior en cajas horizontales y a lo largo del borde derecho en cajas verticales.</dd> + <dt> + baseline </dt> + <dd> + Alinea los elementos para que el texto quede alineado. Esto es útil en cajas horizontales únicamente.</dd> + <dt> + stretch </dt> + <dd> + Este valor, el predeterminado, causa que los elementos crezcan hasta ocupar el tamaño de la caja, muy parecido a un elemento flexible, pero en la dirección opuesta.</dd> +</dl> +<p>Similar al atributo <code>pack</code>., el atributo <code>align</code> es aplicable únicamente a la caja cuyos elementos deben ser alineados, no a los elementos en sí.</p> +<p>Por ejemplo, la primera caja de abajo tendrá a sus hijos expandidos, porque ése es el valor predeterminado. La segunda caja posee un atributo <code>align</code>, por lo que sus hijos se ubicarán centrados.</p> +<h4 id="Ejemplo_4" name="Ejemplo_4">Ejemplo</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul">Ver en funcionamiento</a></p> +<pre><?xml version="1.0" encoding="UTF-8"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window id="sino" title="Pregunta" orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <hbox> + <button label="Sí"/> + <button label="No"/> + </hbox> + <hbox align="center"> + <button label="Tal vez"/> + <button label="Quizás"/> + </hbox> + +</window> +</pre> +<p><img alt="Image:boxstyle2-b.jpg"></p> +<p>También pueden utilizarse las propiedades de estilo <code>-moz-box-pack</code> y <code>-moz-box-align</code> en lugar de especificar estos atributos.</p> +<div class="note"> + El ejemplo "Alineador de cajas" podría resultar útil para probar las distintas propiedades de la caja..</div> +<h3 id="Recorte_de_texto_y_botones" name="Recorte_de_texto_y_botones">Recorte de texto y botones</h3> +<p>Podría llegar a crearse un elemento button que contuviera una etiqueta cuyo ancho sea mayor que el ancho máximo del botón. Por supuesto, una solución sería incrementar el tamaño del botón; sin embargo, los botones (y otros elementos con una etiqueta) tienen un atributo especial llamado <code>crop</code> (recortar) que permite especificar cómo el texto será recortado si este es demasiado largo.</p> +<p>Si el texto es recortado, puntos suspensivos (…) aparecerán en el botón de donde el texto fue recortado. Existen cuatro valores posibles:</p> +<dl> + <dt> + left </dt> + <dd> + El texto es recortado por su lado izquierdo.</dd> + <dt> + right </dt> + <dd> + El texto es recortado por su lado derecho.</dd> + <dt> + center </dt> + <dd> + El texto es recortado en ambos extremos.</dd> + <dt> + none </dt> + <dd> + El texto no será recortado, este es el valor predeterminado.</dd> +</dl> +<p>En realidad, este atributo es útil únicamente cuando una ventana de diálogo es diseñada para ser utilizable en cualquier tamaño. El atributo <code>crop</code> también puede ser usado con el elemento <code>description</code> y otros elementos que utilicen el atributo <code>label</code> para etiquetas. Lo siguiente muestra este atributo en uso:</p> +<h4 id="Ejemplo_5" name="Ejemplo_5">Ejemplo</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul">Ver en funcionamiento</a></p> +<pre><button label="¡Presióname por favor!" crop="right" flex="1"/> +</pre> +<p><img alt="Image:boxstyle2.jpg"></p> +<p>Nótese como al texto en el botón se le recortará su lado derecho luego de que la ventana sea achicada.</p> +<h3 id="Ejemplo_.22Buscar_archivos.22_hasta_ahora" name="Ejemplo_.22Buscar_archivos.22_hasta_ahora">Ejemplo "Buscar archivos" hasta ahora</h3> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul">Ver en funcionamiento</a></p> +<p>(Siguiente) A continuación, un resumen y algunos detalles adicionales del modelo de caja.</p> +<p>Ejemplos: 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.2.6</p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/rejillas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/rejillas/index.html new file mode 100644 index 0000000000..13b7abab12 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/rejillas/index.html @@ -0,0 +1,141 @@ +--- +title: Rejillas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Rejillas +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Grids +--- +<p> </p> +<p>XUL posee un conjunto de elementos para crear rejilla tabulares.</p> +<h3 id="Dise.C3.B1o_tabular_en_XUL" name="Dise.C3.B1o_tabular_en_XUL">Diseño tabular en XUL</h3> +<p>Típicamente las páginas HTML utilizan tablas para diseñar o exhibir una rejillas de datos, XUL posee un conjunto de elementos para realizar este tipo de cosas. El elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_grid.html">grid</a></code> (rejilla) se utiliza para declarar una rejilla de datos, y posee algunas similitudes con el rótulo HTML <code>table</code>.</p> +<p>Una rejilla (<code>grid</code>) contiene elementos que son alineados en filas al igual que tablas. Dentro de la rejillaa se declaran dos cosas: las columnas y las filas que serán utilizadas. Tal como con las tablas HTML, dentro de las filas se inserta el contenido como ser etiquetas y botones. No se puede agregar contenido dentro de las columnas, pero pueden utilizarse para especificar el tamaño y apariencia de las mismas en la rejilla. Alternativamente, puede colocarse contenido dentro de las columnas y utilizarse las filas para especificar la apariencia. Primero veremos el método de organizar elementos por fila.</p> +<p>Para declarar un conjunto de filas se utiliza el rótulo <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_rows.html">rows</a></code> (filas), el cual debe ser un elemento hijo del <code>grid</code>. Dentro de él añadiremos elementos <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_row.html">row</a></code> (fila), utilizados para especificar cada fila. Dentro de cada elemento row se agregará el contenido que se desee tener en esa fila.</p> +<p>Análogamente, las columnas se declaran con el elemento <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_columns.html">columns</a></code> (columnas), que debe ser insertado como un elemento hijo de <code>grid</code> (la rejilla). Dentro de éste irán los elementos <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_column.html">column</a></code> (columna), uno por cada columna que se necesite en la rejilla. Esto debe ser fácil de entender con un ejemplo.</p> +<h4 id="Ejemplo" name="Ejemplo">Ejemplo</h4> +<pre><grid flex="1"> + <columns> + <column flex="2"/> + <column flex="1"/> + </columns> + + <rows> + <row> + <button label="Conejo"/> + <button label="Elefante"/> + </row> + <row> + <button label="Koala"/> + <button label="Gorila"/> + </row> + </rows> +</grid> +</pre> +<p><img alt="Image:grids1.jpg"></p> +<p>A una rejilla se le han añadido dos filas y dos columnas, cada columna es declarada con el rótulo <code>column</code> y se la ha dado el atributo <code>flex</code>. Cada fila contiene dos elementos, ambos botones. El primer hijo de cada elemento <code>row</code> es puesto en la primer columna de la rejilla y el segundo hijo se coloca en la segunda columna. Nótese que no se necesita un elemento para declarar una celda, o sea que no hay un equivalente al elemento <code>td</code>de HTML. En lugar de esto, los contenidos de cada celda se ponen directamente en los elementos <code>row</code>.</p> +<p>Obviamente, además de un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_button.html">button</a></code> (botón) puede agregarse cualquier tipo de elemento. Si se necesita que una celda en particular contenga múltiples elementos puede utilizarse un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_hbox.html">hbox</a></code> (caja anidada) u otro elemento de caja. La <code>hbox</code> es un solo elemento pero dentro de ella pueden colocarse todos los elementos que se quiera. Por ejemplo:</p> +<h4 id="Ejemplo_2" name="Ejemplo_2">Ejemplo</h4> +<pre><grid flex="1"> + <columns> + <column/> + <column flex="1"/> + </columns> + + <rows> + <row> + <label control="titulodoc" value="Título del documento:"/> + <textbox id="titulodoc" flex="1"/> + </row> + <row> + <label control="rutadoc" value="Ubicación:"/> + <box flex="1"> + <textbox id="rutadoc" flex="1"/> + <button label="Revisar..."/> + </box> + </row> + </rows> +</grid> +</pre> +<p><img alt="Image:grids2.jpg"></p> +<p>Note en la imagen de abajo cómo en la primer columna de elementos que contienen las etiquetas hay un solo elemento en cada fila. La segunda fila de la segunda columna contiene una caja, que a su vez contiene dos elementos, una <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_textbox.html">textbox</a></code> (caja de texto )y un <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_button.html">button</a></code> (botón). Dentro de una celda podrían insertarse cajas anidadas adicionales o incluso otra rejilla.</p> +<p>Si se redimensiona la ventana del ejemplo anterior se verá que las cajas de texto cambian su tamaño, pero los demás elementos no. Esto es porque se añadieron atributos code>flex</code> a las cajas de texto y a la segunda columna. La primer columna no necesita ser flexible porque las etiquetas no requieren cambiar de tamaño.</p> +<p>El ancho inicial de una columna es determinado por el elemento más grande en esa columna. Similarmente, la altura de una fila se determina por el tamaño de sus elementos. Para definir los tamaños pueden utilizarse las propiedades CSS <code>minwidth</code> y <code>maxwidth</code>, entre otras.</p> +<p>También pueden colocarse los elementos dentro de las <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_column.html">column</a></code> en lugar de las filas. Si se hace esto, las filas serán declaradas únicamente para especificar cuántas filas existen.</p> +<h4 id="Ejemplo_3" name="Ejemplo_3">Ejemplo</h4> +<pre><grid> + <rows> + <row/> + <row/> + <row/> + </rows> + + <columns> + <column> + <label control="primero" value="Primer Nombre:"/> + <label control="segundo" value="Segundo Nombre:"/> + <label control="apellido" value="Apellido:"/> + </column> + <column> + <textbox id="primero"/> + <textbox id="segundo"/> + <textbox id="apellido"/> + </column> + </columns> + +</grid> +</pre> +<p>Esta rejilla posee tres filas y dos columnas, los elementos <code>row</code> son solamente marcadores de posición para especificar cuántas hay. Puede añadirse el atributo <code>flex</code> a alguna fila para volverla flexible. El contenido es puesto dentro de cada <code>column</code>, el primer elemento dentro de cada elemento column es ubicado en la primer fila, el segundo en la segunda fila y el tercero en la tercer fila.</p> +<p>Si se agrega contenido tanto en filas como en columnas, un contenido se superpondrá con el otro, aunque ambos se alinearán correctamente en la rejilla. Esto crea un efecto muy parecido a una rejilla de elementos <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_stack.html">stack</a></code> (pila).</p> +<p>El orden de los elementos en la <code>grid</code> determina cuál se presentará encima y cuál será ubicado debajo. Si el elemento <code>rows</code> es puesto después del elemento columns, el contenido de las <code>rows</code> será mostrado por encima del contenido de las <code>columns</code>; si se ubica primero el elemento columns, su contenido se verá primero. Análogamente, los eventos como presiones en las teclas del ratón o del teclado se enviarán únicamente al grupo que se encuentre encima. Esta es la razón por la cual en el ejemplo anterior las columnas fueron declaradas después que las filas. Si las columnas se hubieran puesto primero, las filas recibirían los eventos y no podría escribirse en los campos correspondientes.</p> +<p>Una de las principales ventajas que tienen las rejilla sobre las cajas anidadas es que pueden crearse celdas que son flexibles tanto horizontal como verticalmente. Esto puede lograrse fijando el atributo <code>flex</code> tanto en el elemento row como en el elemento column correspondientes. El siguiente ejemplo lo demuestra:</p> +<h4 id="Ejemplo_4" name="Ejemplo_4">Ejemplo</h4> +<pre><grid flex="1"> + <columns> + <column flex="5"/> + <column/> + <column/> + </columns> + <rows> + <row flex="10"> + <button label="Cereza"/> + <button label="Limón"/> + <button label="Uva"/> + </row> + <row flex="1"> + <button label="Frutilla"/> + <button label="Frambuesa"/> + <button label="Durazno"/> + </row> + </rows> +</grid> +</pre> +<p>La primer columna y ambas filas fueron hechas flexibles, esto produce que cada celda de la primer columna sea flexible horizontalmente. Además, cada celda será flexible verticalmente porque ambas filas son flexibles, pero la primer fila es bastante más. La celda en la primer fila y columna (el botón "Cereza"?) será flexible horizontalmente por un factor de 5 y verticalmente por un factor de 10. La siguiente celda (Limón) sólo será flexible verticalmente. El atributo flex también fue añadido al elemento grid por lo que la rejilla completa será flexible, de lo contrario crecería en una sola dirección.</p> +<p>The flex attribute has also been added to the <code>grid</code> element so that the entire grid is flexible, otherwise it would only grow in one direction.</p> +<h3 id="Column_Spanning" name="Column_Spanning">Column Spanning</h3> +<p>There is no means of making a cell span a particular number of multiple columns or rows (See <a> Discussion</a> for a way of achieving the same effect). However, it is possible to make a row or column that spans the entire width or height of the grid. To do this, just add an element inside the <code>rows</code> element that isn't inside a <code>row</code> element. You can use a box type for example, and put other elements inside it if you want to use several elements. Here is a simple example:</p> +<h4 id="Example" name="Example">Example</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul">Ver en funcionamiento</a></p> +<pre><grid> + <columns> + <column flex="1"/> + <column flex="1"/> + </columns> + + <rows> + <row> + <label value="Northwest"/> + <label value="Northeast"/> + </row> + <button label="Equator"/> + <row> + <label value="Southwest"/> + <label value="Southeast"/> + </row> + </rows> +</grid> +</pre> +<p>The button will stretch to fit the entire width of the grid as it is not inside a grid row. You can use a similar technique to add an element in-between two columns. It would stretch to fit the height of the grid. You could also do both if that is desired.</p> +<p>(Siguiente) A continuación veremos características adicionales de las cajas de lista.</p> +<p><span class="comment">Categorías</span></p> +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/selección_en_un_árbol/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/selección_en_un_árbol/index.html new file mode 100644 index 0000000000..e9d0cbe0a0 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/selección_en_un_árbol/index.html @@ -0,0 +1,94 @@ +--- +title: Selección en un árbol +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Selección_en_un_árbol +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Selection +--- +<p>Esta sección describe como obtener y definir los elementos seleccionados en un arbol.</p> + +<h3 id="Obteniendo_los_elementos_seleccionados" name="Obteniendo_los_elementos_seleccionados">Obteniendo los elementos seleccionados</h3> + +<p>Cada elemento en un árbol (que corresponde al elemento <code><a href="es/XUL/Elementos/treeitem">treeitem</a></code> -<code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_treeitem.html">en)</a></code>- si se usa la vista del contenido del árbol ) puede ser seleccionado individualmente. Si añades el atributo <code><a href="es/XUL/Atributos/seltype">seltype</a></code> a un árbol y tiene el valor múltiple, el usuario puede seleccionar diversos elementos del árbol al mismo tiempo. La selección no tiene porque ser continua. El árbol provee un número de funciones que nos ayudan a determinar que elementos están seleccionados.</p> + +<h4 id="Gesti.C3.B3n_del_evento_de_selecci.C3.B3n" name="Gesti.C3.B3n_del_evento_de_selecci.C3.B3n">Gestión del evento de selección</h4> + +<p>Primero veamos como podemos determinar si un elemento esta seleccionado. El gestor de eventos <code><a href="es/XUL/Atributos/tree.onselect">onselect()</a></code> puede incluirse en el elemento <code><a href="es/XUL/Elementos/tree">tree</a></code> -(<code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_tree.html">en)</a></code>)-. Cuando el usuario selecciona un elemento del árbol, el gestor de eventos es llamado. El usuario puede también cambiar la selección usando las teclas del cursor. Si el usuario mantiene pulsadas las teclas del cursor para rápidamente desplazarse por los elementos, el gestor de eventos no es llamado hasta que el usuario deja de presionarlas. Esto ofrece una mayor rapidez y también implica que los elementos se mostrarán como seleccionados aunque nunca se llame al evento select para ellos.</p> + +<p>La sintaxis para el gestor de eventos <code>onselect</code> es la siguiente.</p> + +<pre><tree id="treeset" onselect="alert('Has seleccionado algo!');"> +</pre> + +<h4 id=".C3.8Dndices_del_.C3.A1rbol" name=".C3.8Dndices_del_.C3.A1rbol">Índices del árbol</h4> + +<p>El árbol expone la propiedad <code><a href="es/XUL/Propiedades/currentIndex">currentIndex</a></code> que podemos usar para obtener el elemento actualmente seleccionado, siendo el índice del primero 0. Puedes cambiar el elemento seleccionado si le asignas un nuevo valor a esta propiedad.</p> + +<p>Los elementos hijos son incluidos en el contador justo después de sus padres. Esto significa que si hay tres elementos en la raíz y cada uno tiene 2 hijos, habrá un total de nueve elementos. El primer elemento (índice 0) será el primer elemento raíz, el siguiente (índice 1) será el primer hijo, el segundo hijo estará en el índice 2 y el segundo elemento raíz en el índice 3 y así sucesivamente.</p> + +<p><img alt="Image:seltree1.jpg"></p> + +<p>En la imagen vemos ocho filas, de las cuales dos están seleccionadas. La primera fila seleccionada tiene el índice 4 y la segunda el índice 7. Las filas que no se muestran no se incluyen en el contador de índices.</p> + +<h4 id="Selecci.C3.B3n_m.C3.BAltiple" name="Selecci.C3.B3n_m.C3.BAltiple">Selección múltiple</h4> + +<p>Para los árboles que permiten selecciones múltiples, obtener la lista de filas seleccionadas es algo más complicado. El elemento árbol tiene la propiedad <code>view</code>, la cual tiene la propiedad <code>selection</code> que a su vez contiene propiedades y métodos relacionados con la selección actual del árbol. Puedes usar esos métodos para obtener un conjunto de elementos seleccionados o modificar la selección.</p> + +<p>Ya que los elementos seleccionados en un árbol no tienen porque estar contiguos, puedes obtener distintos grupos de elementos seleccionados que sí lo están, usando las funciones <code>getRangeCount()</code> y <code>getRangeAt()</code>. La primera devuelve el número de rangos de selecciones que hay actualmente. Si solo hay un valor seleccionado, este valor será 1. Deberás utilizar un bucle para recorrer el número de rangos, llamando <code>getRangeAt()</code> en cada uno para obtener los índices del comienzo y fin del rango.</p> + +<p>La función <code>getRangeAt()</code> toma tres parámetros.</p> + +<ul> + <li>El primero es el índice del rango.</li> + <li>El segundo es un objeto que será rellenado por la función con el índice del primer elemento seleccionado.</li> + <li>El tercero es un objeto que será rellenado con el índice del último elemento seleccionado.</li> +</ul> + +<h5 id="Ejemplo_con_getRangeAt" name="Ejemplo_con_getRangeAt">Ejemplo con <code>getRangeAt</code></h5> + +<pre>var start = new Object(); +var end = new Object(); +var numRanges = tree.view.selection.getRangeCount(); + +for (var t=0; t<numRanges; t++){ + tree.view.selection.getRangeAt(t,start,end); + for (var v=start.value; v<=end.value; v++){ + alert("El elemento "+v+" está seleccionado."); + } +} +</pre> + +<p>Hemos creado dos objetos llamados ‘start’ y ‘end’. Después hemos recorrido los rangos, el número de los cuales nos lo ha proporcionado la función <code>getRangeCount()</code>. Llamamos a la función <code>getRangeAt()</code> pasándole el índice del rango y los objetos ‘start’ y ‘end’. Estos objetos son devueltos con la propiedad 'value' rellenada. Así que si el primer rango es desde el tercer elemento hasta el séptimo, ‘start.value’ será 2 (recuerda que los índices cuentan desde 0) y ‘end.value’ será 6. Un dialogo de alerta se mostrará para cada índice seleccionado.</p> + +<p>If you just want to find out if a specific row is selected, use can use the <code>isSelected()</code> function. It takes a row index as an argument and returns true if that row is selected.</p> + +<pre>alert(tree.view.selection.isSelected(3)); +</pre> + +<h3 id="Modificando_la_selecci.C3.B3n_del_.C3.A1rbol" name="Modificando_la_selecci.C3.B3n_del_.C3.A1rbol">Modificando la selección del árbol</h3> + +<p>The selection object has a number of functions which may be used to change the selection. The simplest function is the <code><a href="es/XUL/M%c3%a9todos/select">select()</a></code> function, which deselects any rows that are currently selected and selects one specific row. For example, the following code will select the row at index 5:</p> + +<pre>tree.view.selection.select(5); +</pre> + +<p>Note that you should not just change the tree's <code><a href="es/XUL/Propiedades/currentIndex">currentIndex</a></code> property to change the selection. Instead, you should use the selection's select function as in the example above. You can select all rows with the <code><a href="es/XUL/M%c3%a9todos/selectAll">selectAll()</a></code> function. Note that rows nested inside containers that are not open will not be selected. Naturally, this will only have any effect for trees that use multiple selection. There is also a <code><a href="es/XUL/M%c3%a9todos/clearSelection">clearSelection()</a></code> function to clear the selection, and an <code><a href="es/XUL/M%c3%a9todos/invertSelection">invertSelection</a></code> function to reverse the selection, that is, deselect all selected rows and select all unselected rows.</p> + +<p>To select specific rows, use the <code>rangedSelect()</code> function which selects all rows in between two indices. Here is an example which selects rows between index 2 and 7. Note that rows 2 and 7 will also be selected.</p> + +<pre>tree.view.selection.rangedSelect(2,7,true); +</pre> + +<p>The last argument indicates whether to add to the current selection or not. If true, the range will be added to the existing selection. If false, all existing selected rows will be deselected first. Finally, the <code>clearRange()</code> function may be used to deselect a range of rows, leaving rows outside the range unaffected.</p> + +<pre>tree.view.selection.clearRange(2,7); +</pre> + +<p>Seguimos con como crear los <a href="es/Tutorial_de_XUL/Detalles_de_Vistas_de_un_%c3%a1rbol">detalles de vistas de un árbol</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Más_características_de_los_árboles" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Detalles_de_Vistas_de_un_árbol">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/usando_espaciadores/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/usando_espaciadores/index.html new file mode 100644 index 0000000000..37bd1c2052 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/usando_espaciadores/index.html @@ -0,0 +1,103 @@ +--- +title: Usando espaciadores +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Usando_espaciadores +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Using_Spacers +--- +<p>En esta sección, averiguaremos como añadir algún espaciado en medio los elementos que hemos creado.</p> +<h3 id="Adici.C3.B3n_de_Espaciadores" name="Adici.C3.B3n_de_Espaciadores">Adición de Espaciadores</h3> +<p>Uno de los problemas con interfaces de usuario que se desarrollan es que cada usuario tiene una demostración diferente. Algunos usuarios pueden tener demostraciones más grandes con resoluciones más altas y los otros pueden tener resoluciones inferiores. Además, plataformas diferentes pueden tener exigencias especiales sobre el interfaz de usuario. Añadiendo el apoyo a múltiples lenguas, el texto para una lengua puede requerir más espacio(cuarto) que el otro.</p> +<p>Los usos que tienen que apoyar múltiples plataformas y lenguas por lo general tienen sus ventanas presentadas con mucho espacio para tener esto en cuenta. Algunas plataformas y juegos de herramientas de interfaz de usuario proporcionan los componentes con capacidad para autoajustar sus dimensiones y establecer su nueva posición por sí mismos para adaptarse a las necesidades del usuario. (por ejemplo: Java usa a administradores de disposición.)</p> +<p>XUL dota a los elementos con capacidad para ajustar la posición y redimensionarse automáticamente. Como hemos visto, en el ejemplo, la ventana de archivos del buscador ha cambiado su tamaño de modo que los elementos quepan correctamente dentro de ella. Cada vez agregamos algo, la ventana ha crecido.</p> +<p>XUL usa un sistema de disposición (capas) llamado <strong>'Modelo de Cajas' </strong>que permite dividir las ventanas en conjuntos de 'cajas', anidables, para albergar los elementos. Hablaremos más de esto en la siguiente sección. Las cajas pueden ser ubicadas y redimensionadas asignando valores a sus propiedades directamente o mediante hojas de estilo. Por ahora, basta saber que el elemento de <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_window.html">ventana</a></code> es un tipo de caja.</p> +<p>Antes de entrar en el detalle sobre las cajas, introduciremos otro elemento XUL que es útil para controlar la disposición, el <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_spacer.html">espaciador</a></code>. Un espaciador es muy simple y sólo requiere un atributo, que será explicado en un momento. El espaciador más simple se parece a lo siguiente:</p> +<pre class="eval"><spacer flex= "1" /> +</pre> +<p>Un espaciador es usado para insertar un espacio vacío entre dos grupos de elementos que se encuentran dentro de un mismo contenedor (ventana o caja). Su función es crecer o encogerse cuando el usuario redimensiona la ventana, de modo que los elementos situados a su derecha, o debajo, sean empujados hacia los bordes (derecho o inferior, según sea el caso) y se mantenjan 'justificados'. Esto equivale a forzar a un grupo de elementos a mantenerse pegados al borde (derecho o inferior) de su contenedor (ventana) con independencia del tamaño adoptado por el mismo. Como veremos, es posible usar espaciadores para crear variados efectos de disposición.</p> +<p>En la sintaxis, mostrada arriba, el espaciador tiene un atributo llamado <code>flex</code>. Se usa para establecer la flexibilidad del espaciador. En el caso mostrado, el espaciador tiene un <code>flex </code>de 1. Este valor hace que el elemento espaciador sea elástico; y al insertarlo directamente dentro de una ventana, crecerá hasta copar el espacio disponible dentro de la misma (se descuenta el empleado por otros elementos). Si la ventana cambia su tamaño, el espaciador se ajustará para mentener copado el espacio disponible dentro de la misma. En breve añadiremos un espaciador a nuestro diálogo de búsqueda. Pero antes demos un vistazo a la ventana de diálogo cuando es redimensionada (para comparar, luego, con el efecto logrado al usar el espaciador).</p> +<div class="highlight"> + <p> <img alt="find-dlg-nospacer.jpg" class="internal default" src="/@api/deki/files/4784/=find-dlg-nospacer.jpg"></p> + <p>Como se puede observar, todos los elementos han mantenido sus posiciones al cambiar el tamaño de la ventana; a pesar de que el espacio ofrecido por la misma para alijarlos el más grande. Veamos lo que ocurre al insertar un espaciador entre la caja de texto (textbox) y el botón buscar (Find).</p> + <p><img alt="find-dlg-wthspacer.jpg" class="internal default" src="/@api/deki/files/4785/=find-dlg-wthspacer.jpg"></p> + <p>Al agregar el espaciador y redimensinar la ventana, podemos ver que se expande para copar el vacío y los botones son empujados hacia la derecha. El código para insertar el espaciador en el ejemplo es el siguiente: (insértelo inmediatamente antes del botón buscar - 'find-button')</p> + <pre class="eval"><span class="highlightred"><spacer flex="1"/></span> + +<button id="find-button" label="Find"/> +</pre> +</div> +<h3 id="More_About_Flexibility" name="More_About_Flexibility">Más acerca de la Flexibilidad</h3> +<p>XUL dispone los elementos en una ventana calculando dimensiones (ancho y alto) adecuadas para los elementos que contiene y luego agrega espacio, si hace falta, dónde sean flexibles. Salvo, aquellos elementos cuyas dimensiones hayan sido especificadas esplícitamente. El tamaño por defecto de un elemento es determinado por su contenido. Nótese, por ejemplo, que los botones 'find', 'cancel' tiene dimensiones ligeramente distintas de modo que ofrecen suficiente espacio para el texto en su interior. Si se crea un botón con una etiqueta muy larga su tamaño por defecto será el necesario para poder mostrar la etiqueta completa. Otros elementos, tales como las cajas de texto 'textbox' tienen un tamaño por defecto ajustado a su propósito.</p> +<p>El atributo <code>flex</code> se emplea para establecer si un elemento puede autoajustar sus dimensiones para copar la 'caja' que lo contiene. (en este caso, la ventana). El atributo <code>flex </code>no sólo aplica para los espaciadores; puede ser establecido para cualquier elemento. Por ejemplo, podríamos querer que se reajustase el botón buscar (find-button) en lugar de empujarlo, sin necesidad de que se autoajuste el espaciador.</p> +<p><img alt="find-dlg-flexbttn.jpg" class="internal default" src="/@api/deki/files/4786/=find-dlg-flexbttn.jpg"></p> +<p>Como se puede ver en la imagen, el establecer el atributo <code>flex </code>en el botón buscar, éste último se reajusta cuando la ventana lo hace. Un espaciador, en realidad, no es nada especial. Puede ser considerado como un botón oculto: opera sobre el espacio pero sin dibujarse en la pantalla.</p> +<p>Si se observa con cuidado la imagen arriba, se puede notar que no sólo creció el tamaño del votón buscar (find); también aparece un espacio vacío entre él y la etiqueta de texto. Desde luego, es consecuencia de que allí se encuentra el espaciador que ubicamos más arriba. El también se ha reajustado en tamaño. Una observación atenta evidenciará que el espacio disponible fue dividido entre los dos elementos que tienen establecido el atributo flex: el espaciador y el botón buscar. Cada uno de ellos recibió la mitad del espacio libre, disponible, para ajustar su tamaño.</p> +<h4 id="Proporcionalidad_de_la_flexibilidad_(del_atributo_flex)">Proporcionalidad de la flexibilidad (del atributo flex)</h4> +<p>La razón por la que observamos el efecto anotado es la siguiente: tanto el espaciador como el botón tienen establecido su su atributo <code>flex </code>a 1. (<code>flex="1"</code>); ésto hace que se repartan de modo equivalente el espacio disponible. Pero, tambien es posible lograr un reparto del espacio sujeto a otras condiciones de proporcionalidad:</p> +<p>¿Qué pasaría en caso de desear que un elemento tome dos veces más espacio libre que otro? ¿Cómo lograrlo? - Se puede usar números mayores que 1 como varores del atributo <code>flex</code>. Los valores de este atributo establecen una razón de proporcionalidad. Determinan cuántas partes del espacio disponible serán entragadas a cada uno de los elementos que lo tengan establecido. Si un elemento tiene su <code>flex </code>en 1 y otro tiene un <code>flex </code>de 2, el espacio libre será dividido en tres partes y se entregará 1 al primero y 2 al segundo; de modo que la razón de crecimiento, entre ellos, será 1:2; el segundo crecerá dos veces más que el primero.</p> +<p>The <code>flex</code> attribute isn't used to specify an actual size. Instead, it specifies how empty space it divided among the children of a container box. We'll look at boxes in the next section. Once the default sizes of the children of a box are determined, the flexibility values are used to divide up the remaining empty space in the box. For example, if a box is 200 pixels wide and contains two flexible buttons, the first 50 pixels and the other 90 pixels, there will be 60 pixels of space left over. If both buttons have a flex value of 1, the space will be divided evenly with 30 extra pixels of width going to each button. If the second button's flexibility was increased to 2, the first button would receive 20 pixels of the extra space and the second button would receive 40 pixels of extra space instead.</p> +<p>The <code>flex</code> attribute can be placed on any element, however it only has any meaning when placed on an element directly inside a XUL box. This means that even though you can place a <code>flex</code> on an HTML element, it will have no effect if that element is inside a non-box element.</p> +<p>Let's look at some examples:</p> +<pre class="eval">Example 1: + <button label="Find" flex="1"/> + <button label="Cancel" flex="1"/> + +Example 2: + <button label="Find" flex="1"/> + <button label="Cancel" flex="10"/> + +Example 3: + <button label="Find" flex="2"/> + <button label="Replace"/> + <button label="Cancel" flex="4"/> + +Example 4: + <button label="Find" flex="2"/> + <button label="Replace" flex="2"/> + <button label="Cancel" flex="3"/> + +Example 5: + <html:div> + <button label="Find" flex="2"/> + <button label="Replace" flex="2"/> + </html:div> + +Example 6: + <button label="Find" flex="145"/> + <button label="Replace" flex="145"/> +</pre> +<dl> + <dt> + Example 1 </dt> + <dd> + in this case the flexibility is divided up evenly between both buttons. Both buttons will change size evenly.</dd> + <dt> + Example 2 </dt> + <dd> + here, both buttons will grow, but the Find button will grow ten times as much as the Cancel button, because it has a flex value that is 10 times the flex value of the Find button. Available space will be divided into one part for the Find button and 10 parts for the Cancel button.</dd> + <dt> + Example 3 </dt> + <dd> + only two of the buttons are marked as flexible here. The Replace button will never change size but the other two will. The Cancel button will always resize twice as large as the Find button because its flex value is twice as large.</dd> + <dt> + Example 4 </dt> + <dd> + in this case, all three buttons are flexible. Both the Find and Replace buttons will be the same size but the Cancel button will be somewhat larger (50% larger to be exact).</dd> + <dt> + Example 5 </dt> + <dd> + here, the two buttons are placed inside a <code>div</code> element. Flexibility is meaningless here as the buttons are not directly in a box. The effect would be the same if the <code>flex</code> attributes were left out.</dd> + <dt> + Example 6 </dt> + <dd> + because the flex values are the same on both buttons, their will flex equally. This would work just as well with flex values of one instead of 145. There's no difference in this case. It is recommended that you use lower numbers for readability.</dd> +</dl> +<p>Note that other factors such as the button labels and button minimum sizes will affect the actual sizes of the buttons. For instance, a button won't shrink less than the space needed to fit its label.</p> +<p>Specifying a flex value of 0 has the same effect as leaving the <code>flex</code> attribute out entirely. It means that the element is not flexible at all. You may also sometimes see a flex value specified as a percentage. This has no special meaning and is treated as if the percent sign was not there.</p> +<p>You may have noticed that when you resize the find file dialog vertically, the buttons resize themselves to fit the height of the window. This is because all of the buttons have an implied vertical flex given to them by the window. In the next section we'll learn how to change this.</p> +<h3 id="Find_files_example_so_far" name="Find_files_example_so_far">Find files example so far</h3> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul">Ver en funcionamiento</a></p> +<p>Next, we'll learn some additional features of buttons.</p> +<p><span class="comment">Categorías</span></p> +<p><span class="comment">links interwikis</span></p> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/árboles/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/árboles/index.html new file mode 100644 index 0000000000..509017990e --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/árboles/index.html @@ -0,0 +1,194 @@ +--- +title: Árboles +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Árboles +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Trees +--- +<p>XUL provides a way to create tabular or hierarchical lists using a tree.</p> + +<h3 id="El_.C3.A1rbol" name="El_.C3.A1rbol">El árbol</h3> + +<p>One of the more complex elements in XUL is the <a href="/es/XUL/tree" title="es/XUL/tree">árbol</a>. A tree may be used to display rows of text in columns. It can be used with rows either in a flat list or arranged into a hierarchy. A tree also allows the user to rearrange, resize and hide individual columns. Some examples of trees include the list of messages in a mail application, or the Bookmarks window in Mozilla.</p> + +<p>In some ways, a tree has some similarities with the <code><a href="/es/XUL/listbox" title="es/XUL/listbox">listbox</a></code>. Both can be used to create tables of data with multiple rows and columns, and both may contain column headers. The tree also supports nested rows, whereas the listbox does not. However, listboxes may contain any type of content, whereas trees may only contain text and images. (Using advanced features, progress meters or checkboxes also can be added to the tree)</p> + +<p>A tree consists of two parts, the set of columns, and the tree body.</p> + +<ul> + <li>The set of columns is defined by a number of <code><a href="/es/XUL/treecol" title="es/XUL/treecol">treecol</a></code> elements, one for each column. Each column will appear as a header at the top of the tree.</li> + <li>The second part, the tree body, contains the data to appear in the tree and is created with a <code><a href="/es/XUL/treechildren" title="es/XUL/treechildren">treechildren</a></code> tag.</li> +</ul> + +<p>The tree is unique in that the body of the tree consists only of a single widget which draws all of the data in the tree. This contrasts with the listbox, where individual <code><a href="/es/XUL/listitem" title="es/XUL/listitem">listitem</a></code> and <code><a href="/es/XUL/listcell" title="es/XUL/listcell">listcell</a></code> tags are used to specify the rows in the listbox. In a tree, all of the data to be displayed is supplied by a separate object, called a tree view. When it comes time to display a cell, the tree widget will call out to this tree view to determine what to display, which in turn will be drawn by the tree. The tree is smart enough to only ask for information from the view for those rows that need to be displayed. This allows the view to be optimized such that it only needs to load the data for displayed content. For instance, a tree might have thousands of rows, yet most of them will be scrolled off the border of the tree, hidden from view. This means that the tree is scalable to any number of rows without any performance problems. Of course, this is independant of the performance of the view object itself.</p> + +<p>A tree view is an object which implements the <a href="/es/NsITreeView" title="es/NsITreeView">nsITreeView</a> interface. This interface contains thirty properties and functions which you may implement. These functions will be called by the tree as necessary to retrieve data and state about the tree. For instance, the <code>getCellText()</code> function will be called to get the label for a particular cell in the tree.</p> + +<p>An advantage of using a tree view is that it allows the view to store the data in a manner which is more suitable for the data, or to load the data on demand as rows are displayed. This allows more flexibility when using trees.</p> + +<p>Naturally, having to implement a tree view with thirty or so properties and methods for every tree can be very cumbersome, especially for simple trees. Fortunately, XUL provides a couple of built-in view implementations which do most of the hard work for you. For most trees, especially when you first start to use trees, you will use one of these built-in types. However, you can create a view entirely from scratch if necessary. If you do, you might store the data in an <a href="/en/A_re-introduction_to_JavaScript#Arrays">array</a> or JavaScript data structure, or load the data from an XML file.</p> + +<p>Since the entire body of the tree is a single widget, you can't change the style of individual rows or cells in the normal way. This is because there are no elements that display the individual cells, like there is with the <a href="/es/Tutorial_de_XUL/Controles_de_listas#Cajas_de_lista_multi-columna" title="es/Tutorial_de_XUL/Controles_de_listas#Cajas_de_lista_multi-columna">caja de lista</a>. Instead, all drawing is done by the tree body using data supplied by the view. This is an important point and many XUL developers have trouble understanding this aspect. To modify the appearance of a tree cell, the view must instead associate a set of keywords for a row and cell. A special CSS syntax is used which styles components of the tree body with those keywords. In a sense, it is somewhat like using CSS classes. La estilización de un árbol es discutida con más detalles en una <a href="/es/Tutorial_de_XUL/Estilizando_un_árbol" title="es/Tutorial_de_XUL/Estilizando_un_árbol">sección posterior</a>.</p> + +<h3 id="Elementos_del_.C3.A1rbol" name="Elementos_del_.C3.A1rbol">Elementos del árbol</h3> + +<p>Trees can be created with the <code><a href="/es/XUL/Elementos/tree" title="es/XUL/Elementos/tree">tree</a></code> element, which is described in the following sections. There are also two elements used to define the columns to be displayed in the tree.</p> + +<dl> + <dt><a href="/es/XUL/Elementos/tree" title="es/XUL/Elementos/tree">tree</a></dt> + <dd>This is the outer element of a tree.</dd> +</dl> + +<dl> + <dt><a href="/es/XUL/Elementos/treecols" title="es/XUL/Elementos/treecols">treecols</a></dt> + <dd>This element is a placeholder for a set of <code><a href="/es/XUL/Elementos/treecol" title="es/XUL/Elementos/treecol">treecol</a></code> elements.</dd> +</dl> + +<dl> + <dt><a href="/es/XUL/Elementos/treecol" title="es/XUL/Elementos/treecol">treecol</a></dt> + <dd>This is used to declare a column of the tree. By using this element, you can specify additional information about how the data in the columns are sorted and if the user can resize the columns. You should always place an <code><a href="/es/XUL/Atributos/id" title="es/XUL/Atributos/id">id</a></code> attribute on a column, as Mozilla uses the ids to identify the columns when rearranging and hiding them. This is no longer required in Mozilla 1.8 and later, but it is still a good idea to use ids on columns.</dd> +</dl> + +<dl> + <dt><a href="/es/XUL/Elementos/treechildren" title="es/XUL/Elementos/treechildren">treechildren</a></dt> + <dd>This contains the main body of the tree where the individual rows of data will be displayed.</dd> +</dl> + +<h5 id="Ejemplo_de_.C3.A1rbol_con_dos_columnas" name="Ejemplo_de_.C3.A1rbol_con_dos_columnas">Ejemplo de árbol con dos columnas</h5> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul">Ver en funcionamiento</a></p> + +<pre><tree flex="1"> + + <treecols> + <treecol id="nameColumn" label="Nombre" flex="1"/> + <treecol id="addressColumn" label="Dirección" flex="2"/> + </treecols> + + <treechildren/> + +</tree> +</pre> + +<p>First, the entire table is surrounded with a <code><a href="/es/XUL/Elementos/tree" title="es/XUL/Elementos/tree">tree</a></code> element. This declares an element that is used as a table or tree. As with HTML tables, the data in a tree is always organized into rows. The columns are specified using the <code><a href="/es/XUL/Elementos/treecols" title="es/XUL/Elementos/treecols">treecols</a></code> tag.</p> + +<p>You may place as many columns as you wish in a tree. As with <a href="/es/Tutorial_de_XUL/Controles_de_listas" title="es/Tutorial_de_XUL/Controles_de_listas">listboxes</a>, a header row will appear with column labels. A drop-down menu will appear in the upper-right corner of the tree, which the user may use to show and hide individual columns. Each column is created with a <code><a href="/es/XUL/Elementos/treecol" title="es/XUL/Elementos/treecol">treecol</a></code> element. You can set the header label using the <code>label</code> attribute. You may also want to make the columns flexible if your tree is flexible, so that the columns stretch as the tree does. In this example, the second column will be approximately twice as wide as the first column. All of the columns should be placed directly inside a <code><a href="/es/XUL/Elementos/treecols" title="es/XUL/Elementos/treecols">treecols</a></code> element.</p> + +<p>In this case we haven't specified a view to supply the tree's data, so we'll only see column headers and an empty tree body. You may have to resize the window to see anything since there isn't any data to display. Since the tree has been marked as flexible, the body will stretch to fit the available space. Making a tree flexible is quite commonly done, as it is often the case that the data in the tree is the most significant information displayed, so it makes sense to make the tree grow to fit. However, you may specify a specific number of rows to appear in a tree by setting the <code><a href="/es/XUL/Atributos/rows" title="es/XUL/Atributos/rows">rows</a></code> attribute on the <code><a href="/es/XUL/Elementos/tree" title="es/XUL/Elementos/tree">tree</a></code> element. This attribute specifies how many rows are displayed in the user interface, not how many rows of data there are. The total number of rows is supplied by the tree view. If there are more rows of data in the tree, a scrollbar will appear to allow the user to see the rest of them. If you don't specify the <code><a href="/es/XUL/Atributos/rows" title="es/XUL/Atributos/rows">rows</a></code> attribute, the default value is 0, which means that none of the rows will appear. In this case, you would make the tree flexible. If your tree is flexible, it doesn't need a <code><a href="/es/XUL/Atributos/rows" title="es/XUL/Atributos/rows">rows</a></code> attribute since it will grow to fit the available space.</p> + +<h3 id="Vista_del_contenido_del_.C3.A1rbol" name="Vista_del_contenido_del_.C3.A1rbol">Vista del contenido del árbol</h3> + +<p>Having said that the data to be displayed in a tree comes from a view and not from XUL tags, there happens to be a built-in tree view which gets its data from XUL tags. This may be a bit confusing, but essentially, one of the built-in tree views uses a set of tags which can be used to specify information about the data in the tree. The following tags are used:</p> + +<dl> + <dt><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></dt> + <dd>This contains a single parent row and all its descendants. This element also serves as the item which can be selected by the user. The treeitem tag would go around the entire row so that it is selectable as a whole.</dd> +</dl> + +<dl> + <dt><a href="/es/XUL/Elementos/treerow" title="es/XUL/Elementos/treerow">treerow</a></dt> + <dd>A single row in the tree, which should be placed inside a <code><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></code> tag.</dd> +</dl> + +<dl> + <dt><a href="/es/XUL/Elementos/treecell" title="es/XUL/Elementos/treecell">treecell</a></dt> + <dd>A single cell in a tree. This element would go inside a treerow element.</dd> +</dl> + +<p>Conveniently, these tags may be placed directly inside the <code><a href="/es/XUL/Elementos/treechildren" title="es/XUL/Elementos/treechildren">treechildren</a></code> tag, nested in the order above. The tags define the data to be displayed in the tree body. In this case, the tree uses the built-in tree view, called a content tree view, which uses the labels and values specified on these elements as the data for the tree. When the tree needs to display a row, the tree asks the content tree view for a cell's label by calling the view's getCellText function, which in turn gets the data from the label of the appropriate <code><a href="/es/XUL/Elementos/treecell" title="es/XUL/Elementos/treecell">treecell</a></code>.</p> + +<p>However, the three elements listed above are not displayed directly. They are used only as the source for the data for the view. Thus, only a handful of attributes apply to the <code><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></code> and related elements. For instance, you cannot change the appearance of the tree rows using the <code><a href="/es/XUL/Atributos/style" title="es/XUL/Atributos/style">style</a></code> attribute or with other CSS properties and the box related features such as flexibility and orientation cannot be used.</p> + +<p>In fact, apart from some tree specific attributes, the only attributes that will have any effect will be the <code><a href="/es/XUL/Atributos/label" title="es/XUL/Atributos/label">label</a></code> attribute to set a text label for a cell and the <code><a href="/es/XUL/Atributos/src" title="es/XUL/Atributos/src">src</a></code> attribute to set an image. However, there are special ways of styling the tree and setting other features which we will see in later sections.</p> + +<p>Also, events do not get sent to <code><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></code> element and their children; instead they get sent to the <code><a href="/es/XUL/Elementos/treechildren" title="es/XUL/Elementos/treechildren">treechildren</a></code> element.</p> + +<p>That the treeitems are unlike other XUL elements is a common source of confusion for XUL developers. Essentially, the tree content view is a view where the data for the cells is supplied from tags placed inside the tree. Naturally, if you are using a different kind of view, the data will be supplied from another source, and there won't be any <code><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></code> elements at all.</p> + +<p>Let's start by looking at how to create a simple tree with multiple columns using the tree content view. This could be used to create a list of mail messages. There might be multiple columns, such as the sender and the subject.</p> + +<h4 id="Ejemplo_de_.C3.A1rbol_con_treechildren" name="Ejemplo_de_.C3.A1rbol_con_treechildren">Ejemplo de árbol con <code>treechildren</code></h4> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul">Ver en funcionamiento</a></p> + +<div class="float-right"><img alt="Image:trees1.png"></div> + +<pre><tree flex="1"> + + <treecols> + <treecol id="sender" label="Sender" flex="1"/> + <treecol id="subject" label="Subject" flex="2"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="joe@somewhere.com"/> + <treecell label="Top secret plans"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="mel@whereever.com"/> + <treecell label="Let's do lunch"/> + </treerow> + </treeitem> + </treechildren> + +</tree> +</pre> + +<p>As can be seen in the image, the tree has been created with two rows of data.</p> + +<p>This tree has two columns, the second of which will take up more space than the first. You will usually make the columns flexible. You can also supply widths with the <code><a href="/es/XUL/Atributos/width" title="es/XUL/Atributos/width">width</a></code> attribute. You should include the same number of <code><a href="/es/XUL/Elementos/treecol" title="es/XUL/Elementos/treecol">treecol</a></code> elements as there are columns in the tree. Otherwise strange things might happen.</p> + +<p>The header row is created automatically. The button in the upper right corner can be used to hide and show the columns. You can place a <code><a href="/es/XUL/Atributos/hidecolumnpicker" title="es/XUL/Atributos/hidecolumnpicker">hidecolumnpicker</a></code> attribute on the tree and set it to <code>true</code> if you would like to hide this button. If this button is hidden, the user will not be able to hide columns.</p> + +<p>Make sure that you set an <code><a href="/es/XUL/Atributos/id" title="es/XUL/Atributos/id">id</a></code> attribute on each column or the hiding and showing of columns will not work in all versions of Mozilla.</p> + +<p>The <code>treechildren</code> element surrounds all of the rows. Inside the body are individual rows, which may in turn contain other rows. For a simpler tree, each row is created with the <code><a href="/es/XUL/Elementos/treeitem" title="es/XUL/Elementos/treeitem">treeitem</a></code> and <code><a href="/es/XUL/Elementos/treerow" title="es/XUL/Elementos/treerow">treerow</a></code> elements. The <code>treerow</code> element surrounds all of the cells in a single row, while a <code>treeitem</code> element would surround a row and all of its children. Trees with nested rows are described in the next section.</p> + +<p>Inside the rows, you will put individual tree cells. These are created using the <code><a href="/es/XUL/Elementos/treecell" title="es/XUL/Elementos/treecell">treecell</a></code> element. You can set the text for the cell using the <code>label</code> attribute. The first <code><a href="/es/XUL/Elementos/treecell" title="es/XUL/Elementos/treecell">treecell</a></code> in a row determines the content that will appear in the first column, the second <code><a href="/es/XUL/Elementos/treecell" title="es/XUL/Elementos/treecell">treecell</a></code> determines the content that will appear in the second column, and so on.</p> + +<p>The user can select the treeitems by clicking on them with the mouse, or by highlighting them with the keyboard. The user can select multiple items by holding down the Shift or Control keys and clicking additional rows. To disable multiple selection, place a <code><a href="/es/XUL/Atributos/seltype" title="es/XUL/Atributos/seltype">seltype</a></code> attribute on the tree, set to the value <code>single</code>. With this, the user may only select a single row at a time.</p> + +<div class="highlight"> +<h4 id="Add_a_tree_to_out_find_files_example" name="Add_a_tree_to_out_find_files_example">Add a tree to out find files example</h4> + +<p>Let's add a tree to the find files window where the results of the search would be displayed. The tree will use a content tree view. The following code should be added in place of the <a href="/es/Tutorial_de_XUL/Paneles_de_contenidos#Ejemplo:_Usando_iframe" title="es/Tutorial_de_XUL/Paneles_de_contenidos#Ejemplo:_Usando_iframe">iframe</a>.</p> + +<pre class="eval"><span class="highlightred"><tree flex="1"> + <treecols> + <treecol id="name" label="Filename" flex="1"/> + <treecol id="location" label="Location" flex="2"/> + <treecol id="size" label="Size" flex="1"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="mozilla"/> + <treecell label="/usr/local"/> + <treecell label="2520 bytes"/> + </treerow> + </treeitem> + </treechildren> +</tree></span> + +<splitter collapse="before" resizeafter="grow"/> +</pre> + +<p>We've added a tree with three columns for the filename, the location and the file size. The second column will appear twice as wide due to the larger flexibility. A single row has been added to demonstrate what the table would look like with a row. In a real implementation, the rows would be added by a script as the search was performed, or a custom view would be created to hold the data.</p> + +<p>Ejemplo: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul">Ver en funcionamiento</a></p> +</div> + +<p><br> + Seguimos con como crear <a href="/es/Tutorial_de_XUL/Más_características_de_los_árboles" title="es/Tutorial_de_XUL/Más_características_de_los_árboles">árboles más avanzados</a>.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Ejemplos_XPCOM" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Más_características_de_los_árboles">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/árboles_y_plantillas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/árboles_y_plantillas/index.html new file mode 100644 index 0000000000..7c5277063b --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/árboles_y_plantillas/index.html @@ -0,0 +1,138 @@ +--- +title: Árboles y plantillas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Árboles_y_plantillas +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Trees_and_Templates +--- +<p>Lo siguiente describe como usar una plantilla con un árbol.</p> + +<h3 id="A.C3.B1adiendo_fuentes_de_datos_a_.C3.A1rboles" name="A.C3.B1adiendo_fuentes_de_datos_a_.C3.A1rboles">Añadiendo fuentes de datos a árboles</h3> + +<p>When using a tree, you will often use a template to build its content, to handle a large amount of hierarchial data. Using a template with a tree uses very much the same syntax as with other elements. You need to add a <code><a href="es/XUL/Atributos/datasources">datasources</a></code> and a <code><a href="es/XUL/Atributos/ref">ref</a></code> attribute to the <code><a href="es/XUL/Elementos/tree">tree</a></code> element, which specify the datasource and root node to display. Multiple rules can be used to indicate different content for different types of data.</p> + +<p>El ejemplo siguiente usa el historial de fuentes de datos:</p> + +<pre><tree datasources="rdf:history" ref="NC:HistoryByDate" + flags="dont-build-content"> +</pre> + +<p>As described in the previous section, the tree may use a tree builder for template generation instead of the normal content builder. This means that elements will not be created for every row in the tree, making it more efficient. The <code>[[XUL:Atributos:flgs|flags</code> attribute set to the value <code>dont-build-content</code>, as used in the example above, indicates that the tree builder should be used. If you leave the attribute out, the content builder will be used. You can see the difference by using Mozilla's DOM Inspector on a tree with and without the flag.</p> + +<p>If you do use a content builder instead, note that the content won't generally get built until it is needed. With hierarchical trees, the children don't get generated until the parent nodes have been opened by the user.</p> + +<p>In the template, there will be one <code><a href="es/XUL/Elementos/treecell">treecell</a></code> for each column in the tree. The cells should have a <code><a href="es/XUL/Atributos/label">label</a></code> attribute to set the label for the cell. This would normally be set to an RDF property so that the label is pulled from the datasource.</p> + +<h4 id="Plantilla_constructora_de_.C3.A1rbol" name="Plantilla_constructora_de_.C3.A1rbol">Plantilla constructora de árbol</h4> + +<p>The following example demonstrates a template-built tree, in this case for the file system.</p> + +<p><strong>Ejemplo 1</strong>: <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treetempl_1.xul.txt">Código</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treetempl_1.xul">Ver en funcionamiento</a></p> + +<pre><tree id="my-tree" flex="1" + datasources="rdf:files" ref="file:///" flags="dont-build-content"> + <treecols> + <treecol id="Name" label="Name" primary="true" flex="1"/> + <splitter/> + <treecol id="Date" label="Date" flex="1"/> + </treecols> + + <template> + <rule> + <treechildren> + <treeitem uri="rdf:*"> + <treerow> + <treecell label="rdf:http://home.netscape.com/NC-rdf#Name"/> + <treecell label="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/> + </treerow> + </treeitem> + </treechildren> + </rule> + </template> +</tree> +</pre> + +<p>Aquí, un árbol es creado con dos columnas, para el nombre y la fecha de un archivo. The tree should display a list of the files in the root directory. Only one rule is used, but you may add others if needed. Like with other templates, the uri attribute on an element indicates where to start generating content. The two cells grab the name and date from the datasource and place the values in the cell labels.</p> + +<p>This example shows why the uri attribute becomes useful. Notice how it has been placed on the treeitem in the example, even though it is not a direct descendant of the rule element. We need to put this attribute on only those elements that we want repeated for each resource. Because we don't want multiple <code><a href="es/XUL/Elementos/treechildren">treechildren</a></code> elements, we don't put it there. Instead we put the <code><a href="es/XUL/Atributos/uri">uri</a></code> attributes on the <code><a href="es/XUL/Elementos/treeitem">treeitem</a></code> elements. Effectively, the elements outside (or above) the element with the <code><a href="es/XUL/Atributos/uri">uri</a></code> attribute are not duplicated whereas the element with the <code><a href="es/XUL/Atributos/uri">uri</a></code> attribute and the elements inside it are duplicated for each resource.</p> + +<p>As the tree builder is used and not the content builder, the structure of the elements in the above example must be as shown, with the <code><a href="es/XUL/Elementos/treechildren">treechildren</a></code> element inside the rule. Although the tree builder doesn't build these elements, it does require this structure in order to determine what to generate correctly.</p> + +<div class="float-right"><img alt="Image:rdfoutl1.jpg"></div> + +<p>Note in the image that additional child elements below the top-level elements have been added automatically. XUL knows how to add child elements when the templates or rules contain tree elements or menu elements. It will generate tree elements as nested as necessary based on the available RDF data.</p> + +<p>An interesting part of RDF datasources is that the resource values are only determined when the data is needed. This means that values that are deeper in the resource hierarchy are not determined until the user navigates to that node in the tree. This becomes useful for certain datasources where the data is determined dynamically.</p> + +<h3 id="Ordenando_las_columnas" name="Ordenando_las_columnas">Ordenando las columnas</h3> + +<p>If you try the previous example, you might note that the list of files is not sorted. Trees which generate their data from a datasource have the optional ability to sort their data. You can sort either ascending or descending on any column. The user may change the sort column and direction by clicking the column headers. This sorting feature is not available for trees with static content, although you can write a script to sort the data.</p> + +<p>Sorting involves three attributes, which should be placed on the columns. The first attribute, sort, should be set to an RDF property that is used as the sort key. Usually, this would be the same as that used in the label of the cell in that column. If you set this on a column, the data will be sorted in that column. The user can change the sort direction by clicking the column header. If you do not set the sort attribute on a column, the data cannot be sorted by that column.</p> + +<p>El atributo <code>sortDirection</code> (note la mezcla) es usado para definir el orden por defecto de la columna. Tres valores son posibles:</p> + +<dl> + <dt>ascending</dt> + <dd>los datos aparecerán en orden ascendente (por ejemplo: de la A a la Z.</dd> + <dt>descending</dt> + <dd>los datos aparecerán en orden descendente (Z-A).</dd> + <dt>natural</dt> + <dd>los datos aparecerán en el mismo orden en el cual están guardados en la fuente de datos RDF.</dd> +</dl> + +<p>The final attribute, <code>sortActive</code> should be set to <code>true</code> for one column, the one that you would like to be sorted by default.</p> + +<p>Although the sorting will function correctly with only those attributes, you may also use the style class <code>sortDirectionIndicator</code> on a column that can be sorted. This will cause a small triangle to appear on the column header that indicates the direction of the sort. If you don't do this, the user may still sort the columns but will have no indication as to which column is currently sorted.</p> + +<p>The following example changes the columns in the earlier example to incorporate the extra features:</p> + +<pre><treecols> + <treecol id="Name" label="Name" flex="1" primary="true" + class="sortDirectionIndicator" sortActive="true" + sortDirection="ascending" + sort="rdf:http://home.netscape.com/NC-rdf#Name"/> + <splitter/> + <treecol id="Date" label="Date" flex="1" class="sortDirectionIndicator" + sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/> +</treecols> +</pre> + +<h3 id="Persistencia_del_estado_de_la_columna" name="Persistencia_del_estado_de_la_columna">Persistencia del estado de la columna</h3> + +<p>One additional thing you might want to do is persist which column is currently sorted, so that it is remembered between sessions. To do this, we use the <code><a href="es/XUL/Atributos/persist">persist</a></code> attribute on each <code><a href="es/XUL/Elementos/treecol">treecol</a></code> element. There are five attributes of columns that need to be persisted, to save the column width, the column order, whether the column is visible, which column is currently sorted and the sort direction. The following example shows a sample column:</p> + +<pre><treecol id="Date" label="Date" flex="1" + class="sortDirectionIndicator" + persist="width ordinal hidden sortActive sortDirection" + sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/> +</pre> + +<p>Más detalles sobre el atributo More details about the <code><a href="es/XUL/Atributos/persist">persist</a></code> son descritos en <a href="es/Tutorial_de_XUL/Datos_persistentes">la sección próxima</a>.</p> + +<h3 id="Reglas_adicionales" name="Reglas_adicionales">Reglas adicionales</h3> + +<p>There are two additional attributes that can be added to the <code>rule</code> element that allow it to match in certain special circumstances. Both are boolean attributes.</p> + +<dl> + <dt>iscontainer</dt> + <dd>If this attribute is set to <code>true</code>, then the rule will match all resources that have children. For example, we could use this rule to match bookmark folders. This is convenient as the RDF datasource does not need to include any special attributes to indicate this.</dd> +</dl> + +<dl> + <dt>isempty</dt> + <dd>If this attribute is set to <code>true</code>, then the rule will match all resources that have no children.</dd> +</dl> + +<p>A resource might be a container and be an empty one as well. However, this is different from a resource that is not a container. For example, a bookmark folder is a container but it might or might not have children. However a single bookmark or separator is not a container.</p> + +<p>You can combine these two elements with other attribute matches for more specific rules.</p> + +<p>Seguimos con las fuentes de datos proporcionadas por Mozilla.</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/es/docs/Tutorial_de_XUL:Plantillas" style="float: left;">« Anterior</a><a href="/es/docs/Tutorial_de_XUL:Fuentes_de_datos_RDF">Siguiente »</a></p> +</div> diff --git a/files/es/archive/mozilla/xul/xul_reference/index.html b/files/es/archive/mozilla/xul/xul_reference/index.html new file mode 100644 index 0000000000..9e3468106c --- /dev/null +++ b/files/es/archive/mozilla/xul/xul_reference/index.html @@ -0,0 +1,318 @@ +--- +title: XUL Reference +slug: Archive/Mozilla/XUL/XUL_Reference +translation_of: Archive/Mozilla/XUL/XUL_Reference +--- +<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th colspan="3">Todos los elementos XUL (ordenados alfabéticamente)</th> + </tr> + <tr> + <td> + <p><a href="/es/docs/XUL/action" title="es/XUL/action">action</a><br> + <a href="/es/docs/XUL/Arrowscrollbox" title="Es/XUL/Arrowscrollbox">arrowscrollbox</a><br> + <a href="/es/docs/XUL/Assign" title="es/XUL/Assign">assign</a><br> + <a href="/es/docs/XUL/Bbox" title="es/XUL/bbox">bbox</a><br> + <a href="/es/docs/XUL/binding" title="es/XUL/binding">binding</a><br> + <a href="/es/docs/XUL/bindings" title="es/XUL/bindings">bindings</a><br> + <a href="/es/docs/XUL/box" title="es/XUL/box">box</a><br> + <a href="/es/docs/XUL/broadcaster" title="es/XUL/broadcaster">broadcaster</a><br> + <a href="/es/docs/XUL/broadcasterset" title="es/XUL/broadcasterset">broadcasterset</a><br> + <a href="/es/docs/XUL/button" title="es/XUL/button">button</a><br> + <a href="/es/docs/XUL/browser" title="es/XUL/browser">browser</a><br> + <a href="/es/docs/XUL/checkbox" title="es/XUL/checkbox">checkbox</a><br> + <a href="/es/docs/XUL/caption" title="es/XUL/caption">caption</a><br> + <a href="/es/docs/XUL/colorpicker" title="es/XUL/colorpicker">colorpicker</a><br> + <a href="/es/docs/XUL/column" title="es/XUL/column">column</a><br> + <a href="/es/docs/XUL/columns" title="es/XUL/columns">columns</a><br> + <a href="/es/docs/XUL/commandset" title="es/XUL/commandset">commandset</a><br> + <a href="/es/docs/XUL/command" title="es/XUL/command">command</a><br> + <a href="/es/docs/XUL/conditions" title="es/XUL/conditions">conditions</a><br> + <a href="/es/docs/XUL/content" title="es/XUL/content">content</a><br> + <a href="/es/docs/XUL/datepicker" title="es/XUL/datepicker">datepicker</a><br> + <a href="/es/docs/XUL/deck" title="es/XUL/deck">deck</a><br> + <a href="/es/docs/XUL/description" title="es/XUL/description">description</a><br> + <a href="/es/docs/XUL/Dialog" title="es/XUL/dialog">dialog</a><br> + <a href="/es/docs/XUL/dialogheader" title="es/XUL/dialogheader">dialogheader</a><br> + <a href="/es/docs/XUL/dropmarker" title="es/XUL/dropmarker">dropmarker</a><br> + <a href="/es/docs/XUL/editor" title="es/XUL/editor">editor</a><br> + <a href="/es/docs/XUL/grid" title="es/XUL/grid">grid</a><br> + <a href="/es/docs/XUL/grippy" title="es/XUL/grippy">grippy</a><br> + <a href="/es/docs/XUL/groupbox" title="es/XUL/groupbox">groupbox</a><br> + <a href="/es/docs/XUL/hbox" title="es/XUL/hbox">hbox</a><br> + <a href="/es/docs/XUL/iframe" title="es/XUL/iframe">iframe</a><br> + <a href="/es/docs/XUL/image" title="es/XUL/image">image</a><br> + <a href="/es/docs/XUL/key" title="es/XUL/key">key</a><br> + <a href="/es/docs/XUL/keyset" title="es/XUL/keyset">keyset</a><br> + <a href="/es/docs/XUL/label" title="es/XUL/label">label</a><br> + <a href="/es/docs/XUL/listbox" title="es/XUL/listbox">listbox</a><br> + <a href="/es/docs/XUL/listcell" title="es/XUL/listcell">listcell</a><br> + <a href="/es/docs/XUL/listcol" title="es/XUL/listcol">listcol</a><br> + <a href="/es/docs/XUL/listcols" title="es/XUL/listcols">listcols</a><br> + <a href="/es/docs/XUL/listhead" title="es/XUL/listhead">listhead</a><br> + <a href="/es/docs/XUL/listheader" title="es/XUL/listheader">listheader</a><br> + <a href="/es/docs/XUL/listitem" title="es/XUL/listitem">listitem</a></p> + </td> + <td> + <p><a href="/es/docs/XUL/member" title="es/XUL/member">member</a><br> + <a href="/es/docs/XUL/menu" title="es/XUL/menu">menu</a><br> + <a href="/es/docs/XUL/menubar" title="es/XUL/menubar">menubar</a><br> + <a href="/es/docs/XUL/menuitem" title="es/XUL/menuitem">menuitem</a><br> + <a href="/es/docs/XUL/menulist" title="es/XUL/menulist">menulist</a><br> + <a href="/es/docs/XUL/menupopup" title="es/XUL/menupopup">menupopup</a><br> + <a href="/es/docs/XUL/menuseparator" title="es/XUL/menuseparator">menuseparator</a><br> + <a href="/es/docs/XUL/notification" title="es/XUL/notification">notification</a><br> + <a href="/es/docs/XUL/notificationbox" title="es/XUL/notificationbox">notificationbox</a><br> + <a href="/es/docs/XUL/observes" title="es/XUL/observes">observes</a><br> + <a href="/es/docs/XUL/overlay" title="es/XUL/overlay">overlay</a><br> + <a href="/es/docs/XUL/page" title="es/XUL/page">page</a><br> + <a href="/es/docs/XUL/panel" title="es/XUL/panel">panel</a><br> + <a href="/es/docs/XUL/param" title="es/XUL/param">param</a><br> + <a href="/es/docs/XUL/popupset" title="es/XUL/popupset">popupset</a><br> + <a href="/es/docs/XUL/preference" title="es/XUL/preference">preference</a><br> + <a href="/es/docs/XUL/preferences" title="es/XUL/preferences">preferences</a><br> + <a href="/es/docs/XUL/prefpane" title="es/XUL/prefpane">prefpane</a><br> + <a href="/es/docs/XUL/prefwindow" title="es/XUL/prefwindow">prefwindow</a><br> + <a href="/es/docs/XUL/progressmeter" title="es/XUL/progressmeter">progressmeter</a><br> + <a href="/es/docs/XUL/query" title="es/XUL/query">query</a><br> + <a href="/es/docs/XUL/queryset" title="es/XUL/queryset">queryset</a><br> + <a href="/es/docs/XUL/radio" title="es/XUL/radio">radio</a><br> + <a href="/es/docs/XUL/radiogroup" title="es/XUL/radiogroup">radiogroup</a><br> + <a href="/es/docs/XUL/resizer" title="es/XUL/resizer">resizer</a><br> + <a href="/es/docs/XUL/richlistbox" title="es/XUL/richlistbox">richlistbox</a><br> + <a href="/es/docs/XUL/richlistitem" title="es/XUL/richlistitem">richlistitem</a><br> + <a href="/es/docs/XUL/row" title="es/XUL/row">row</a><br> + <a href="/es/docs/XUL/rows" title="es/XUL/rows">rows</a><br> + <a href="/es/docs/XUL/rule" title="es/XUL/rule">rule</a><br> + <a href="/es/docs/XUL/scale" title="es/XUL/scale">scale</a><br> + <a href="/es/docs/XUL/script" title="es/XUL/script">script</a><br> + <a href="/es/docs/XUL/scrollbar" title="es/XUL/scrollbar">scrollbar</a><br> + <a href="/es/docs/XUL/scrollbox" title="es/XUL/scrollbox">scrollbox</a><br> + <a href="/es/docs/XUL/scrollcorner" title="es/XUL/scrollcorner">scrollcorner</a><br> + <a href="/es/docs/XUL/separator" title="es/XUL/separator">separator</a><br> + <a href="/es/docs/XUL/spacer" title="es/XUL/spacer">spacer</a><br> + <a href="/es/docs/XUL/spinbuttons" title="es/XUL/spinbuttons">spinbuttons</a><br> + <a href="/es/docs/XUL/splitter" title="es/XUL/splitter">splitter</a><br> + <a href="/es/docs/XUL/stack" title="es/XUL/stack">stack</a><br> + <a href="/es/docs/XUL/Statusbar" title="es/XUL/statusbar">statusbar</a></p> + </td> + <td> + <p><a href="/es/docs/XUL/statusbarpanel" title="es/XUL/statusbarpanel">statusbarpanel</a><br> + <a href="/es/docs/XUL/stringbundle" title="es/XUL/stringbundle">stringbundle</a><br> + <a href="/es/docs/XUL/stringbundleset" title="es/XUL/stringbundleset">stringbundleset</a><br> + <a href="/es/docs/XUL/tab" title="es/XUL/tab">tab</a><br> + <a href="/es/docs/XUL/tabbrowser" title="es/XUL/tabbrowser">tabbrowser</a> (Firefox-a partir de<br> + Firefox 3/Gecko 1.9)<br> + <a href="/es/docs/XUL/tabbox" title="es/XUL/tabbox">tabbox</a><br> + <a href="/es/docs/XUL/tabpanel" title="es/XUL/tabpanel">tabpanel</a><br> + <a href="/es/docs/XUL/tabpanels" title="es/XUL/tabpanels">tabpanels</a><br> + <a href="/es/docs/XUL/tabs" title="es/XUL/tabs">tabs</a><br> + <a href="/es/docs/XUL/template" title="es/XUL/template">template</a><br> + <a href="/es/docs/XUL/textnode" title="es/XUL/textnode">textnode</a><br> + <a href="/es/docs/XUL/textbox" title="es/XUL/textbox">textbox</a><br> + <a href="/es/docs/XUL/textbox_(Firefox_autocomplete)" title="es/XUL/textbox (Firefox autocomplete)">textbox (Firefox autocomplete)</a><br> + <a href="/es/docs/XUL/textbox_(Mozilla_autocomplete)" title="es/XUL/textbox (Mozilla autocomplete)">textbox (Mozilla autocomplete)</a><br> + <a href="/es/docs/XUL/timepicker" title="es/XUL/timepicker">timepicker</a><br> + <a href="/es/docs/XUL/titlebar" title="es/XUL/titlebar">titlebar</a><br> + <a href="/es/docs/XUL/toolbar" title="es/XUL/toolbar">toolbar</a><br> + <a href="/es/docs/XUL/toolbarbutton" title="es/XUL/toolbarbutton">toolbarbutton</a><br> + <a href="/es/docs/XUL/toolbargrippy" title="es/XUL/toolbargrippy">toolbargrippy</a><br> + <a href="/es/docs/XUL/toolbaritem" title="es/XUL/toolbaritem">toolbaritem</a><br> + <a href="/es/docs/XUL/toolbarpalette" title="es/XUL/toolbarpalette">toolbarpalette</a><br> + <a href="/es/docs/XUL/toolbarseparator" title="es/XUL/toolbarseparator">toolbarseparator</a><br> + <a href="/es/docs/XUL/toolbarset" title="es/XUL/toolbarset">toolbarset</a><br> + <a href="/es/docs/XUL/toolbarspacer" title="es/XUL/toolbarspacer">toolbarspacer</a><br> + <a href="/es/docs/XUL/toolbarspring" title="es/XUL/toolbarspring">toolbarspring</a><br> + <a href="/es/docs/XUL/toolbox" title="es/XUL/toolbox">toolbox</a><br> + <a href="/es/docs/XUL/tooltip" title="es/XUL/tooltip">tooltip</a><br> + <a href="/es/docs/XUL/tree" title="es/XUL/tree">tree</a><br> + <a href="/es/docs/XUL/treecell" title="es/XUL/treecell">treecell</a><br> + <a href="/es/docs/XUL/treechildren" title="es/XUL/treechildren">treechildren</a><br> + <a href="/es/docs/XUL/treecol" title="es/XUL/treecol">treecol</a><br> + <a href="/es/docs/XUL/treecols" title="es/XUL/treecols">treecols</a><br> + <a href="/es/docs/XUL/treeitem" title="es/XUL/treeitem">treeitem</a><br> + <a href="/es/docs/XUL/treerow" title="es/XUL/treerow">treerow</a><br> + <a href="/es/docs/XUL/treeseparator" title="es/XUL/treeseparator">treeseparator</a><br> + <a href="/es/docs/XUL/triple" title="es/XUL/triple">triple</a><br> + <a href="/es/docs/XUL/vbox" title="es/XUL/vbox">vbox</a><br> + <a href="/es/docs/XUL/where" title="es/XUL/where">where</a><br> + <a href="/es/docs/XUL/window" title="es/XUL/window">window</a><br> + <a href="/es/docs/XUL/wizard" title="es/XUL/wizard">wizard</a><br> + <a href="/es/docs/XUL/wizardpage" title="es/XUL/wizardpage">wizardpage</a></p> + </td> + </tr> + </tbody> +</table> +<h1 id="Referencia_de_XUL">Referencia de XUL</h1> +<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th colspan="3">Elementos XUL por categoría</th> + </tr> + <tr> + <td> + <p><u><strong>VENTANAS</strong></u></p> + <p><a href="/en-US/docs/XUL/dialog" title="XUL/dialog">dialog</a><br> + <a href="/en-US/docs/XUL/overlay" title="XUL/overlay">overlay</a><br> + <a href="/en-US/docs/XUL/page" title="XUL/page">page</a><br> + <a href="/en-US/docs/XUL/window" title="XUL/window">window</a><br> + <a href="/en-US/docs/XUL/wizard" title="XUL/wizard">wizard</a><br> + <a href="/en-US/docs/XUL/wizardpage" title="XUL/wizardpage">wizardpage</a><br> + <a href="/en-US/docs/XUL/preference" title="XUL/preference">preference</a><br> + <a href="/en-US/docs/XUL/preferences" title="XUL/preferences">preferences</a><br> + <a href="/en-US/docs/XUL/prefpane" title="XUL/prefpane">prefpane</a><br> + <a href="/en-US/docs/XUL/prefwindow" title="XUL/prefwindow">prefwindow</a></p> + <p><u><strong>ESTRUCTURA<br> + DE VENTANAS</strong></u></p> + <p><a href="/en-US/docs/XUL/browser" title="XUL/browser">browser</a><br> + <a href="/en-US/docs/XUL/tabbrowser" title="XUL/tabbrowser">tabbrowser</a><br> + <a href="/en-US/docs/XUL/editor" title="XUL/editor">editor</a><br> + <a href="/en-US/docs/XUL/iframe" title="XUL/iframe">iframe</a><br> + <a href="/en-US/docs/XUL/titlebar" title="XUL/titlebar">titlebar</a><br> + <a href="/en-US/docs/XUL/resizer" title="XUL/resizer">resizer</a><br> + <a href="/en-US/docs/XUL/statusbar" title="XUL/statusbar">statusbar</a><br> + <a href="/en-US/docs/XUL/statusbarpanel" title="XUL/statusbarpanel">statusbarpanel</a><br> + <a href="/en-US/docs/XUL/dialogheader" title="XUL/dialogheader">dialogheader</a><br> + <a href="/en-US/docs/XUL/notification" title="XUL/notification">notification</a><br> + <a href="/en-US/docs/XUL/notificationbox" title="XUL/notificationbox">notificationbox</a></p> + <p><u><strong>MENUS Y VENTANAS<br> + EMERGENTES</strong></u></p> + <p><a href="/en-US/docs/XUL/menubar" title="XUL/menubar">menubar</a><br> + <a href="/en-US/docs/XUL/menu" title="XUL/menu">menu</a><br> + <a href="/en-US/docs/XUL/menuitem" title="XUL/menuitem">menuitem</a><br> + <a href="/en-US/docs/XUL/menuseparator" title="XUL/menuseparator">menuseparator</a><br> + <a href="/en-US/docs/XUL/menupopup" title="XUL/menupopup">menupopup</a><br> + <a href="/en-US/docs/XUL/panel" title="XUL/panel">panel</a><br> + <a href="/en-US/docs/XUL/tooltip" title="XUL/tooltip">tooltip</a><br> + <a href="/en-US/docs/XUL/popupset" title="XUL/popupset">popupset</a></p> + <p><u><strong>BARRAS DE<br> + HERRAMIENTAS</strong></u></p> + <p><a href="/en-US/docs/XUL/toolbar" title="XUL/toolbar">toolbar</a><br> + <a href="/en-US/docs/XUL/toolbarbutton" title="XUL/toolbarbutton">toolbarbutton</a><br> + <a href="/en-US/docs/XUL/toolbargrippy" title="XUL/toolbargrippy">toolbargrippy</a><br> + <a href="/en-US/docs/XUL/toolbaritem" title="XUL/toolbaritem">toolbaritem</a><br> + <a href="/en-US/docs/XUL/toolbarpalette" title="XUL/toolbarpalette">toolbarpalette</a><br> + <a href="/en-US/docs/XUL/toolbarseparator" title="XUL/toolbarseparator">toolbarseparator</a><br> + <a href="/en-US/docs/XUL/toolbarset" title="XUL/toolbarset">toolbarset</a><br> + <a href="/en-US/docs/XUL/toolbarspacer" title="XUL/toolbarspacer">toolbarspacer</a><br> + <a href="/en-US/docs/XUL/toolbarspring" title="XUL/toolbarspring">toolbarspring</a><br> + <a href="/en-US/docs/XUL/toolbox" title="XUL/toolbox">toolbox</a></p> + <p><u><strong>PESTAÑAS Y<br> + AGRUPAMIENTO</strong></u></p> + <p><a href="/en-US/docs/XUL/tabbox" title="XUL/tabbox">tabbox</a><br> + <a href="/en-US/docs/XUL/tabs" title="XUL/tabs">tabs</a><br> + <a href="/en-US/docs/XUL/tab" title="XUL/tab">tab</a><br> + <a href="/en-US/docs/XUL/tabpanels" title="XUL/tabpanels">tabpanels</a><br> + <a href="/en-US/docs/XUL/tabpanel" title="XUL/tabpanel">tabpanel</a><br> + <a href="/en-US/docs/XUL/groupbox" title="XUL/groupbox">groupbox</a><br> + <a href="/en-US/docs/XUL/caption" title="XUL/caption">caption</a><br> + <a href="/en-US/docs/XUL/separator" title="XUL/separator">separator</a><br> + <a href="/en-US/docs/XUL/spacer" title="XUL/spacer">spacer</a></p> + </td> + <td> + <p><u><strong>CONTROLES</strong></u></p> + <p><a href="/en-US/docs/XUL/button" title="XUL/button">button</a><br> + <a href="/en-US/docs/XUL/checkbox" title="XUL/checkbox">checkbox</a><br> + <a href="/en-US/docs/XUL/colorpicker" title="XUL/colorpicker">colorpicker</a><br> + <a href="/en-US/docs/XUL/datepicker" title="XUL/datepicker">datepicker</a><br> + <a href="/en-US/docs/XUL/menulist" title="XUL/menulist">menulist</a><br> + <a href="/en-US/docs/XUL/progressmeter" title="XUL/progressmeter">progressmeter</a><br> + <a href="/en-US/docs/XUL/radio" title="XUL/radio">radio</a><br> + <a href="/en-US/docs/XUL/radiogroup" title="XUL/radiogroup">radiogroup</a><br> + <a href="/en-US/docs/XUL/scale" title="XUL/scale">scale</a><br> + <a href="/en-US/docs/XUL/splitter" title="XUL/splitter">splitter</a><br> + <a href="/en-US/docs/XUL/textbox" title="XUL/textbox">textbox</a><br> + <a href="/en-US/docs/XUL/Textbox_(Toolkit_autocomplete)" title="XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a><br> + <a href="/en-US/docs/XUL/Textbox_(XPFE_autocomplete)" title="XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a><br> + <a href="/en-US/docs/XUL/timepicker" title="XUL/timepicker">timepicker</a></p> + <p><u><strong>TEXTO E<br> + IMAGENES</strong></u></p> + <p><a href="/en-US/docs/XUL/description" title="XUL/description">description</a><br> + <a href="/en-US/docs/XUL/label" title="XUL/label">label</a><br> + <a href="/en-US/docs/XUL/image" title="XUL/image">image</a></p> + <p><u><strong>LISTAS</strong></u></p> + <p><a href="/en-US/docs/XUL/listbox" title="XUL/listbox">listbox</a><br> + <a href="/en-US/docs/XUL/listitem" title="XUL/listitem">listitem</a><br> + <a href="/en-US/docs/XUL/listcell" title="XUL/listcell">listcell</a><br> + <a href="/en-US/docs/XUL/listcol" title="XUL/listcol">listcol</a><br> + <a href="/en-US/docs/XUL/listcols" title="XUL/listcols">listcols</a><br> + <a href="/en-US/docs/XUL/listhead" title="XUL/listhead">listhead</a><br> + <a href="/en-US/docs/XUL/listheader" title="XUL/listheader">listheader</a><br> + <a href="/en-US/docs/XUL/richlistbox" title="XUL/richlistbox">richlistbox</a><br> + <a href="/en-US/docs/XUL/richlistitem" title="XUL/richlistitem">richlistitem</a></p> + <p><u><strong>ARBOLES</strong></u></p> + <p><a href="/en-US/docs/XUL/tree" title="XUL/tree">tree</a><br> + <a href="/en-US/docs/XUL/treecell" title="XUL/treecell">treecell</a><br> + <a href="/en-US/docs/XUL/treechildren" title="XUL/treechildren">treechildren</a><br> + <a href="/en-US/docs/XUL/treecol" title="XUL/treecol">treecol</a><br> + <a href="/en-US/docs/XUL/treecols" title="XUL/treecols">treecols</a><br> + <a href="/en-US/docs/XUL/treeitem" title="XUL/treeitem">treeitem</a><br> + <a href="/en-US/docs/XUL/treerow" title="XUL/treerow">treerow</a><br> + <a href="/en-US/docs/XUL/treeseparator" title="XUL/treeseparator">treeseparator</a></p> + </td> + <td> + <p><u><strong>DISPOSICION</strong></u></p> + <p><a href="/en-US/docs/XUL/box" title="XUL/box">box</a><br> + <a href="/en-US/docs/XUL/hbox" title="XUL/hbox">hbox</a><br> + <a href="/en-US/docs/XUL/vbox" title="XUL/vbox">vbox</a><br> + <a href="/en-US/docs/XUL/bbox" title="XUL/bbox">bbox</a><br> + <a href="/en-US/docs/XUL/deck" title="XUL/deck">deck</a><br> + <a href="/en-US/docs/XUL/stack" title="XUL/stack">stack</a><br> + <a href="/en-US/docs/XUL/grid" title="XUL/grid">grid</a><br> + <a href="/en-US/docs/XUL/columns" title="XUL/columns">columns</a><br> + <a href="/en-US/docs/XUL/column" title="XUL/column">column</a><br> + <a href="/en-US/docs/XUL/rows" title="XUL/rows">rows</a><br> + <a href="/en-US/docs/XUL/row" title="XUL/row">row</a><br> + <a href="/en-US/docs/XUL/scrollbox" title="XUL/scrollbox">scrollbox</a></p> + <p><u><strong>PLANTILLAS</strong></u></p> + <p><a href="/en-US/docs/XUL/action" title="XUL/action">action</a><br> + <a href="/en-US/docs/XUL/assign" title="XUL/assign">assign</a><br> + <a href="/en-US/docs/XUL/binding" title="XUL/binding">binding</a><br> + <a href="/en-US/docs/XUL/bindings" title="XUL/bindings">bindings</a><br> + <a href="/en-US/docs/XUL/conditions" title="XUL/conditions">conditions</a><br> + <a href="/en-US/docs/XUL/content" title="XUL/content">content</a><br> + <a href="/en-US/docs/XUL/member" title="XUL/member">member</a><br> + <a href="/en-US/docs/XUL/param" title="XUL/param">param</a><br> + <a href="/en-US/docs/XUL/query" title="XUL/query">query</a><br> + <a href="/en-US/docs/XUL/queryset" title="XUL/queryset">queryset</a><br> + <a href="/en-US/docs/XUL/rule" title="XUL/rule">rule</a><br> + <a href="/en-US/docs/XUL/template" title="XUL/template">template</a><br> + <a href="/en-US/docs/XUL/textnode" title="XUL/textnode">textnode</a><br> + <a href="/en-US/docs/XUL/triple" title="XUL/triple">triple</a><br> + <a href="/en-US/docs/XUL/where" title="XUL/where">where</a></p> + <p><u><strong>SCRIPTING</strong></u></p> + <p><a href="/en-US/docs/XUL/script" title="XUL/script">script</a><br> + <a href="/en-US/docs/XUL/commandset" title="XUL/commandset">commandset</a><br> + <a href="/en-US/docs/XUL/command" title="XUL/command">command</a><br> + <a href="/en-US/docs/XUL/broadcaster" title="XUL/broadcaster">broadcaster</a><br> + <a href="/en-US/docs/XUL/broadcasterset" title="XUL/broadcasterset">broadcasterset</a><br> + <a href="/en-US/docs/XUL/observes" title="XUL/observes">observes</a><br> + <a href="/en-US/docs/XUL/key" title="XUL/key">key</a><br> + <a href="/en-US/docs/XUL/keyset" title="XUL/keyset">keyset</a><br> + <a href="/en-US/docs/XUL/stringbundle" title="XUL/stringbundle">stringbundle</a><br> + <a href="/en-US/docs/XUL/stringbundleset" title="XUL/stringbundleset">stringbundleset</a></p> + <p><u><strong>ELEMENTOS<br> + DE AYUDA</strong></u></p> + <p><a href="/en-US/docs/XUL/scrollbar" title="XUL/scrollbar">arrowscrollbox</a><br> + <a href="/en-US/docs/XUL/dropmarker" title="XUL/dropmarker">dropmarker</a><br> + <a href="/en-US/docs/XUL/grippy" title="XUL/grippy">grippy</a><br> + <a href="/en-US/docs/XUL/scrollbar" title="XUL/scrollbar">scrollbar</a><br> + <a href="/en-US/docs/XUL/scrollcorner" title="XUL/scrollcorner">scrollcorner</a><br> + <a href="/en-US/docs/XUL/spinbuttons" title="XUL/spinbuttons">spinbuttons</a></p> + </td> + </tr> + </tbody> +</table> +<h3 id="Other_XUL_lists" name="Other_XUL_lists">Otras listas de XUL</h3> +<ul> + <li><a href="/en-US/docs/XUL/Attribute" title="XUL/Attribute">Todos los atributos</a></li> + <li><a href="/en-US/docs/XUL/Property" title="XUL/Property">Todas las propiedades</a></li> + <li><a href="/en-US/docs/XUL/Method" title="XUL/Method">Todos los métodos</a></li> + <li><a href="/en-US/docs/XUL_element_attributes" title="XUL_element_attributes">Atributos definidos para todos los elementos de XUL</a></li> + <li><a href="/en-US/docs/XUL/Style" title="XUL/Style">Clases de estilo</a></li> + <li><a href="/en-US/docs/XUL/Events" title="XUL/Events">Manipuladores de eventos</a></li> + <li><a href="/en-US/docs/XUL/Deprecated//Defunct_Markup" title="XUL/Deprecated//Defunct_Markup">Obsoletos/Marcado extinto</a></li> +</ul> diff --git a/files/es/archive/mozilla/xul/xul_reference/xul_element_attributes/index.html b/files/es/archive/mozilla/xul/xul_reference/xul_element_attributes/index.html new file mode 100644 index 0000000000..38b3c37f9a --- /dev/null +++ b/files/es/archive/mozilla/xul/xul_reference/xul_element_attributes/index.html @@ -0,0 +1,551 @@ +--- +title: Atributos de los elementos XUL +slug: Archive/Mozilla/XUL/XUL_Reference/XUL_element_attributes +translation_of: Archive/Mozilla/XUL/XUL_Reference/XUL_element_attributes +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/es/docs/XUL/Elementos">Referencia de XUL</a></span> Los siguientes atributos son comunes a todos los elementos XUL:</div> + +<div id="a-align"> + +<dl> + <dt> + <code id="a-align"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></dt> + <dd> + Type: <em>one of the values below</em></dd> + <dd> + The align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. + <ul> + <li>For boxes that have horizontal orientation, it specifies how its children will be aligned vertically.</li> + <li>For boxes that have vertical orientation, it specifies how its children will be aligned horizontally.</li> + </ul> + </dd> + <dd> + <dl> + <dt> + <code>start</code></dt> + <dd> + Child elements are aligned starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.</dd> + <dt> + <code>center</code></dt> + <dd> + Extra space is split equally along each side of the child elements, resulting in the children being placed in the center of the box.</dd> + <dt> + <code>end</code></dt> + <dd> + Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.</dd> + <dt> + <code>baseline</code></dt> + <dd> + This value applies to horizontally oriented boxes only. It causes the child elements to be aligned so that their text labels are lined up.</dd> + <dt> + <code>stretch</code></dt> + <dd> + <em>This is the default value.</em> The child elements are stretched to fit the size of the box. For a horizontal box, the children are stretched to be the height of the box. For a vertical box, the children are stretched to be the width of the box. If the size of the box changes, the children stretch to fit. Use the flex attribute to create elements that stretch in the opposite direction.</dd> + <dt> + <code>left</code> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></dt> + <dd> + The elements are aligned on their left edges.</dd> + <dt> + <code>center</code> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></dt> + <dd> + The elements are centered horizontally.</dd> + <dt> + <code>right</code> <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></dt> + <dd> + The elements are aligned on their right edges.</dd> + </dl> + </dd> + <dd> + The <a href="/en-US/docs/XUL/Attribute/pack" title="XUL/Attribute/pack">pack</a> attribute is related to the alignment but is used to specify the position in the opposite direction. You can also specify the value of align using the style property <a href="/en-US/docs/Web/CSS/-moz-box-align" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-box-align</code></a>.</dd> +</dl> +</div> <div id="a-allowevents"> + +<dl> + <dt><code id="a-allowevents"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If true, events are passed to children of the element. Otherwise, events are passed to the element only.</dd> +</dl> + + + + +</div> <div id="a-allownegativeassertions"> + + +<dl> + <dt><code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Valid on any element that has a <code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> attribute. When multiple datasources are used, one may override an assertion from another. This attribute, if <code>true</code>, which is the default, allows a datasource to negate an earlier assertion.</dd> +</dl> +</div> <div id="a-class"> + + +<dl> + <dt><code id="a-class"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The style class of the element. Multiple classes may be specified by separating them with spaces.</dd> +</dl> +</div> <div id="a-coalesceduplicatearcs"> + + +<dl> + <dt><code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Valid on any element that has a <code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> attribute. When multiple datasources are used, one may override an assertion from another. This attribute, if <code>true</code>, which is the default, allows a datasource to negate an earlier assertion.</dd> +</dl> +</div> <div id="a-collapsed"> + + +<dl> + <dt><code id="a-collapsed"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If <code>true</code>, then the element is collapsed and does not appear. It is equivalent to setting the CSS <a href="/en-US/docs/CSS/visibility" title="/en-US/docs/CSS/visibility">visibility</a> property to <code>collapse</code>.</dd> +</dl> + + +</div> <div id="a-container"> + + +<dl> + <dt><code id="a-container"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Set to true if the element is to act as a container which can have child elements. This would be used for folders. This will be set by the template builder as needed.</dd> +</dl> +</div> <div id="a-containment"> + + +<dl> + <dt><code id="a-containment"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code></dt> + <dd>Type: <em>URI</em></dd> + <dd>This attribute specifies RDF properties (an RDF predicate) that indicate that a resource is a container. When generating content from a template this is used to determine which resources from the datasource are containers and thus can have child nodes and which ones are not containers.</dd> + <dd>This attribute should be placed on the same element that the <code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> and the <code id="a-ref"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code> attribute is on. It may be set to a space-separated list of RDF properties or resources.</dd> +</dl> +</div> <div id="a-context"> + + +<dl> + <dt><code id="a-context"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Should be set to the value of the id of the popup element that should appear when the user context-clicks on the element. A context-click varies on each platform. Usually it will be a right click. You can use the special value '_child' to indicate the first <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> child of the element.</dd> +</dl> +</div> <div id="a-contextmenu"> + + +<dl> + <dt><code id="a-contextmenu"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Alternate name for the <code id="a-context"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code> attribute, but also has a corresponding script property <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/contextMenu">contextMenu</a></span></code>.</dd> +</dl> +</div> <div id="a-datasources"> + + +<dl> + <dt><code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code></dt> + <dd>Type: <em>space separated list of datasource URIs</em></dd> + <dd>A space-separated list of datasources that an element's template will use for content generation. These can be either internal datasources such as rdf:bookmarks or a URL. The datasources attribute may be placed on most elements, although it will usually be found on trees and menu related elements. The element should have a <code><a href="/en-US/docs/Mozilla/Tech/XUL/template" title="template">template</a></code> element as a child.</dd> + <dd>For RDF templates, the specified datasources are combined into a single composite datasource which holds the data from all of the datasources. This composite datasource is accesssible via a script through the database property.</dd> + <dd>For XML datasources, only one source is used, either the URL of an XML file or an anchor reference to another element within the same document. For instance, the reference '#data' refers to an element with the id 'data'.</dd> + <dd>If you plan on adding a datasource to an element but don't want one to be added right away, set this attribute to 'rdf:null'. This will make the element so that its contents can be generated from a datasource. Otherwise, you cannot add one later.</dd> + <dd>When the XUL document is contained on a remote web site, the datasources may only be loaded from the same domain as the document.</dd> +</dl> +</div> <div id="a-dir"> + + +<dl> + <dt><code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>The direction in which the child elements of the element are placed. + <dl> + <dt><code>normal</code></dt> + <dd>For scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) For other elements, the elements are placed left to right or top to bottom in the order they appear in the XUL code.</dd> + <dt><code>reverse</code></dt> + <dd>For scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). For other elements, they are placed right to left or bottom to top. This is reverse of the order in which they appear in the XUL code.</dd> + </dl> + </dd> +</dl> + + +</div> <div id="a-empty"> + + +<dl> + <dt><code id="a-empty"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Set to true if the element is a container that contains no children. This will be set by the template builder as needed.</dd> +</dl> +</div> <div id="a-equalsize"> + + +<dl> + <dt><code id="a-equalsize"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>This attribute can be used to make the children of the element equal in size. + <dl> + <dt><code>always</code></dt> + <dd>For a horizontally oriented element, this will make all of its children have the width of the widest child. For a vertically oriented element, this will make its children all have the height of the tallest child.</dd> + <dt><code>never</code></dt> + <dd>All of the children are displayed at the size required by the content or as specified by the <code id="a-width"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> and <code id="a-height"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code> attributes or the CSS <a href="/en-US/docs/Web/CSS/width" title="The width CSS property sets an element's width. By default it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area."><code>width</code></a> and <a href="/en-US/docs/Web/CSS/height" title="The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area."><code>height</code></a> properties.</dd> + </dl> + </dd> +</dl> +</div> <div id="a-flags"> + + +<dl> + <dt><code id="a-flags"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code></dt> + <dd>Type: <em>space-separated list of the values below</em></dd> + <dd>A set of flags used for miscellaneous purposes. Two flags are defined, which may be the value of this attribute. + <ul> + <li><code>dont-test-empty</code>: For template generated content, the builder will not check that a container is empty.</li> + <li><code>dont-build-content</code>: This flag may be used on a tree to indicate that content elements should not be generated. This results in a performance enhancement, but you will not be able to use the DOM functions to retrieve the tree rows.</li> + </ul> + </dd> +</dl> +</div> <div id="a-flex"> + + +<dl> + <dt><code id="a-flex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>Indicates the flexibility of the element, which indicates how an element's container distributes remaining empty space among its children. Flexible elements grow and shrink to fit their given space. Elements with larger flex values will be made larger than elements with lower flex values, at the ratio determined by the two elements. The actual value is not relevant unless there are other flexible elements within the same container. Once the default sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elements, according to their flex ratios. Specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely.</dd> +</dl> +</div> <div id="a-height"> + + +<dl> + <dt><code id="a-height"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>The preferred height of the element in pixels. The actual displayed height may be different if the element or its contents have a minimum or maximum height. The CSS height property may also be used.</dd> +</dl> +</div> <div id="a-hidden"> + + +<dl> + <dt><code id="a-hidden"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If set to true, the element is not displayed. This is similar to setting the CSS display property to 'none'.</dd> +</dl> + + +</div> <div id="a-id"> + + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt> + <dd>Type: <em>unique id</em></dd> + <dd>A unique identifier so that you can identify the element with. You can use this as a parameter to <code><a href="/en-US/docs/DOM/document.getElementById" title="/en-US/docs/DOM/document.getElementById">getElementById()</a></code> and other DOM functions and to reference the element in style sheets.</dd> +</dl> + + +</div> <div id="a-insertafter"> + + +<dl> + <dt><code id="a-insertafter"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>When an element is in an <code><a href="/en-US/docs/Mozilla/Tech/XUL/overlay" title="overlay">overlay</a></code>, the insertafter attribute specifies the <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of the element in the base window that the element should appear after. This attribute overrides the <code id="a-insertbefore"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code> attribute. This value may be a comma-separated list of ids, which are scanned and the first one found in the window is used.</dd> +</dl> +</div> <div id="a-insertbefore"> + + +<dl> + <dt><code id="a-insertbefore"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>When an element is in an <code><a href="/en-US/docs/Mozilla/Tech/XUL/overlay" title="overlay">overlay</a></code>, the insertbefore attribute specifies the <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of the element in the base window that the element should appear before. This value may be a comma-separated list of ids, which are scanned and the first one found in the window is used.</dd> +</dl> +</div> <div id="a-left"> + + +<dl> + <dt><code id="a-left"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>For elements placed directly within a <code><a href="/en-US/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code>, specifies the pixel position of the left edge of the element relative to the left edge of the stack.</dd> +</dl> +</div> <div id="a-maxheight"> + + +<dl> + <dt><code id="a-maxheight"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>The maximum height of the element. This corresponds to the max-height CSS property.</dd> +</dl> +</div> <div id="a-maxwidth"> + + +<dl> + <dt><code id="a-maxwidth"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>The maximum width of the element. This corresponds to the max-width CSS property.</dd> +</dl> +</div> <div id="a-menu"> + + +<dl> + <dt><code id="a-menu"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Alternate name for the <code><code id="a-popup"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code></code> attribute, but also has a corresponding script property 'menu'.</dd> +</dl> +</div> <div id="a-minheight"> + + +<dl> + <dt><code id="a-minheight"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>The minimum height of the element. This corresponds to the min-height CSS property.</dd> +</dl> +</div> <div id="a-minwidth"> + + +<dl> + <dt><code id="a-minwidth"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>The minimum width of the element. This corresponds to the min-width CSS property.</dd> +</dl> +</div> <div id="a-mousethrough"> + + +<dl> + <dt><code id="a-mousethrough"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Determines whether mouse events are passed to the element or not. If this attribute is not specified, the value is inherited from the parent of the element. If no ancestor has the mousethrough attribute set, the default value is <code>never</code>. + <dl> + <dt><code>always</code></dt> + <dd>Mouse events are transparent to the element. This means that the element will not receive any mouse events due to either clicking or movement. Child elements may override this if they specify mousethrough="never".</dd> + <dt><code>never</code></dt> + <dd>Mouse events are passed to the element as normal.</dd> + </dl> + </dd> +</dl> + + +</div> <div id="a-observes"> + + +<dl> + <dt><code id="a-observes"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Set to an id of a <code><a href="/en-US/docs/Mozilla/Tech/XUL/broadcaster" title="broadcaster">broadcaster</a></code> element that is being observed by the element. If an attribute changes in the broadcaster it is also changed in the observer.</dd> +</dl> +</div> <div id="a-ordinal"> + + +<dl> + <dt><code id="a-ordinal"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>An integer which specifies the position of the element within its parent. By default, elements appear in the order they appear in the XUL code. The ordinal attribute can be used to change the order. Note the default ordinal for elements is 1. You can retrieve the displayed order by using the properties of the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/boxObject">boxObject</a></span></code> of the container.</dd> +</dl> +</div> <div id="a-orient"> + + +<dl> + <dt><code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Used to specify whether the children of the element are oriented horizontally or vertically. The default value depends on the element. You can also use the <a href="/en-US/docs/Web/CSS/-moz-box-orient" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-box-orient</code></a> style property. + <dl> + <dt><code>horizontal</code></dt> + <dd>Child elements of the element are placed next to each other in a row in the order that they appear in the XUL source.</dd> + <dt><code>vertical</code></dt> + <dd>Child elements of the element are placed under each other in a column in the order that they appear in the XUL source.</dd> + </dl> + </dd> +</dl> + + +</div> <div id="a-pack"> + + +<dl> + <dt><code id="a-pack"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>The pack attribute specifies where child elements of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/box" title="box">box</a></code> are placed when the box is larger that the size of the children. For boxes with horizontal orientation, it is used to indicate the position of children horizontally. For boxes with vertical orientation, it is used to indicate the position of children vertically. The <code id="a-align"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> attribute is used to specify the position in the opposite direction. You can also specify the value of pack using the style property <a href="/en-US/docs/Web/CSS/-moz-box-pack" title="The -moz-box-pack and -webkit-box-pack CSS properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box. See Flexbox for more about the properties of flexbox elements."><code>-moz-box-pack</code></a>. + <dl> + <dt><code>start</code></dt> + <dd>Child elements are placed starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.</dd> + <dt><code>center</code></dt> + <dd>Extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box.</dd> + <dt><code>end</code></dt> + <dd>Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.</dd> + </dl> + </dd> +</dl> + + +</div> <div id="a-persist"> + + +<dl> + <dt><code id="a-persist"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code></dt> + <dd>Type: <em>space-separated list of attribute names</em></dd> + <dd>A space-separated list of attributes that are maintained when the window is closed. When the window is re-opened, the values of persistent attributes are restored. In Mozilla, persistent attributes are stored in the per-profile file <code>xulstore.json</code>. Persistence can also be stored using the <code>document.persist</code> function. In order for persistence to work, the element must also have an <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>. Persistence will not remember the <em>absence</em> of an attribute, so for boolean attributes like <code id="a-checked"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> where absence means <code>false</code>, you will need to explicitly set the attribute to false before the window closes (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=15232">bug 15232</a>).</dd> +</dl> +</div> <div id="a-popup"> + + +<dl> + <dt><code id="a-popup"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Should be set to the value of the <code><code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> of the <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/popup" title="popup">popup</a></code></code> element that should appear when the user clicks on the element.</dd> +</dl> + + +</div> <div id="a-position"> + + +<dl> + <dt><code id="a-position"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>When an element is in an <code><a href="/en-US/docs/Mozilla/Tech/XUL/overlay" title="overlay">overlay</a></code>, the position is an index where the child is inserted. The position is one-based, so use a value of 1 to place the element at the beginning. This attribute is ignored if either an <code id="a-insertbefore"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code> or <code id="a-insertafter"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code> attribute matches an element.</dd> +</dl> +</div> <div id="a-preference-editable"> + + +<dl> + <dt><code id="a-preference-editable"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code></dt> + <dd><strong><span class="highlightgreen">Mozilla 1.8</span></strong></dd> + <dd>Type: <em>boolean</em></dd> + <dd>If <code>true</code>, the element may be used as one that modifies a preference in a <code><a href="/en-US/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>. The <code id="a-preference"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/preference">preference</a></code> attribute may be used to connect to a <code><a href="/en-US/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code> element. This is useful for custom elements implemented in XBL. The element should fire <code>change</code>, <code>command</code>, or <code>input</code> event when the value is changed so that the preference will update accordingly.<br> + <br> + See the <a href="/en/Preferences_System/New_attributes" title="en/Preferences System/New attributes">pref system documentation</a> for more information.</dd> +</dl> +</div> <div id="a-querytype"> + + +<dl> + <dt><code id="a-querytype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Indicates the type of datasource used in a template. Firefox 3 provides 3 built-in datasources: 'rdf', default, 'xml' and 'storage'. Extensions may provide support for additional datasources.</dd> +</dl> +</div> <div id="a-ref"> + + +<dl> + <dt><code id="a-ref"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></dt> + <dd>Type: <em>URI</em></dd> + <dd>For template-generated elements, this attribute is used to specify the root RDF node where content generation begins. This will correspond to the value of an about attribute on an RDF container. This attribute should be placed alongside the datasources attribute.</dd> +</dl> +</div> <div id="a-removeelement"> + + +<dl> + <dt><code id="a-removeelement"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>When placed on an element in an <code><a href="/en-US/docs/Mozilla/Tech/XUL/overlay" title="overlay">overlay</a></code>, it indicates that the element in the base file should be removed from the window.</dd> +</dl> +</div> <div id="a-sortDirection"> + + +<dl> + <dt><code id="a-sortDirection"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Set this attribute to set the direction that template-generated content is sorted. Use the <code id="a-sortResource"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code> attribute to specify the sort key. + <dl> + <dt><code>ascending</code></dt> + <dd>The data is sorted in ascending order.</dd> + <dt><code>descending</code></dt> + <dd>The data is sorted in descending order.</dd> + <dt><code>natural</code></dt> + <dd>The data is sorted in natural order, which means the order that it is stored in.</dd> + </dl> + </dd> +</dl> +</div> <div id="a-sortResource"> + + +<dl> + <dt><code id="a-sortResource"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code></dt> + <dd>Type: <em>URI</em></dd> + <dd>For template-generated content, this specifies the sort key, if you would like the content to be sorted. The key should be the full URI of the RDF resource to sort by, for example '<code><span class="nowiki">http://home.netscape.com/NC-rdf#Name</span></code>'. Place this attribute on the same element as the <code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> attribute. Use <code id="a-sortResource2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code> to specify a secondary sort key.</dd> +</dl> +</div> <div id="a-sortResource2"> + + +<dl> + <dt><code id="a-sortResource2"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code></dt> + <dd>Type: <em>URI</em></dd> + <dd>The value of this attribute is the URI of an RDF predicate that serves as a secondary key for sorted content.</dd> +</dl> +</div> <div id="a-statustext"> + + +<dl> + <dt><code id="a-statustext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Used to set the text that appears on the status bar when the user moves the mouse over the element. Mozilla doesn't adjust the status bar automatically however. This attribute serves only as a place to keep the text. In Firefox, this text is automatically placed in the <code><code><a href="/en-US/docs/Mozilla/Tech/XUL/statusbar" title="statusbar">statusbar</a></code></code> for menuitems on the menu bar.</dd> +</dl> + + +</div> <div id="a-style"> + + +<dl> + <dt><code id="a-style"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></dt> + <dd>Type: <em>CSS inline style</em></dd> + <dd>CSS style rules to be applied to the element. Syntax is as in the HTML style attribute. It is preferred to put style rules in style sheets.</dd> +</dl> +</div> <div id="a-template"> + + +<dl> + <dt><code id="a-template"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>For template generated elements, this attribute may optionally be placed on the root node (the element with the <code id="a-datasources"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code> attribute) to refer to a template that exists elsewhere in the XUL code. This template attribute should be set to the <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/template" title="template">template</a></code> element. This might be used to share a single template between multiple trees or menus. If this attribute is not specified, there should be a template element directly inside the node.</dd> +</dl> +</div> <div id="a-tooltip"> + + +<dl> + <dt><code id="a-tooltip"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Should be set to the value of the <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code> or <code><a href="/en-US/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> element that should be used as a tooltip window when the mouse hovers over the element for a moment. The tooltip will automatically disappear when the mouse is moved. If this attribute is set to '_child', the first <code><a href="/en-US/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code> child element inside the element is used.</dd> +</dl> +</div> <div id="a-tooltiptext"> + + +<dl> + <dt><code id="a-tooltiptext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Used to set the text which appears in the tooltip when the user moves the mouse over the element. This can be used instead of setting the tooltip to a popup for the common case where it contains only text. The tooltip is displayed in a default tooltip which displays only a label, however the default tooltip may be changed by setting the default attribute on a <code><a href="/en-US/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code> element.</dd> +</dl> +</div> <div id="a-top"> + + +<dl> + <dt><code id="a-top"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>For elements placed directly within a <code><a href="/en-US/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code>, specifies the pixel position of the top edge of the element relative to the top edge of the stack.</dd> +</dl> +</div> <div id="a-uri"> + + +<dl> + <dt><code id="a-uri"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>For template-generated content, the attribute should be placed on the element where content generation should begin. Thus, it should be placed on an element that is a descendant of a template. The value should be set to <code>rdf:*</code>.</dd> +</dl> + +<dl> + <dd>Elements that appear inside the element with the attribute will be repeated for each node in the RDF datasource. Elements outside will appear only once.</dd> +</dl> +</div> <div id="a-wait-cursor"> + + +<dl> + <dt> + <code id="a-wait-cursor"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + Set this attribute to true to have the cursor switch to a waiting cursor while the mouse is hovering over the element. Usually, you would only use this on the <code><a href="/en-US/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> element or other top-level elements. In order to revert to the normal cursor state call the method <code>removeAttribute("wait-cursor")</code> when the process effectively has ended otherwise the wait cursor might never disappear.</dd> +</dl> + +</div> <div id="a-width"> + + +<dl> + <dt><code id="a-width"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></dt> + <dd>Type: <em>string</em> (representing an integer)</dd> + <dd>The preferred width of the element. The value should not include a unit as all values are in pixels. The actual displayed width may be different if the element or its contents have a minimum or maximum width, or the size is adjusted by the flexibility or alignment of its parent. The CSS width property may also be used.</dd> +</dl> + + +</div> |