Añadiendo elementos HTML

Ahora que hemos añadido algunos botones, vamos a añadir algunos otros elementos.

Adición de Elementos de HTML a una Ventana

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.

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 ventana del archivo XUL, o al elemento de HTML exterior.

 xmlns:html="https://www.w3.org/1999/xhtml"

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.

Aquí está un ejemplo como podría ser añadido a la ventana de archivo de hallazgo:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="findfile-window"
    title="Find Files"
    orient="horizontal"
    xmlns:html="https://www.w3.org/1999/xhtml"
    xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

Entonces, usted puede utilizar etiquetas HTML como lo haría normalmente. Teniendo en cuenta lo sieguiente:

• Debe añadir el prefijo html al principio de cada etiqueta, asumiendo que ha declarado el espacio de nombres HTML al comienzo.
• Las etiquetas deben estar en minúsculas.
• Todos los atributos deben ir entre comillas dobles.
• Las etiquetas XML vacias, deben terminar con "/>". Esto se ve mejor en los siguientes ejemplos.

Puede utilizar cualquier etiqueta HTML, aunque algunas como head y body, realmente no son utiles. A continuación se muestran algunos ejemplos.

<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>

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.

In XUL, you can add labels with the description or label element. You should use these elements when you can. You can also add labels to controls either by using the HTML label element, or you can simply put the text inside another HTML block element (such as p or div) as in the example below.

Example

Código Ver en funcionamiento

<html:p>
  Search for:
  <html:input id="find-text"/>
  <button id="okbutton" label="OK"/>
</html: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 p tag). Text outside of one will not be displayed, unless the XUL element the text is inside allows this (the description element, for example). The examples below may help.

Ejemplos de elementos HTML

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.

Example: A dialog with a check box

Código Ver en funcionamiento

<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>

In this case, one p tag was used to place the text in and another was used to break apart the text into multiple lines.

Example: Text outside of HTML blocks

Código Ver en funcionamiento

<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"/>

As can be seen in the image, the text inside the div 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 div tag, or enclose the text in a description tag.

Example: Invalid HTML elements

<html:po>Case 1</html:po>
<div>Case 2</div>
<html:description value="Case 3"/>

All three of the cases above will not display, each for a different reason.

Case 1 

po is not a valid HTML tag and Mozilla has no idea what to do with it.

Case 2 

div is valid but only in HTML. To get it to work, you will need to add the html: qualifier.

Case 3 

A description element is only valid in XUL and not in HTML. It should not have the html: qualifier.

Next, we'll learn how to adding spacing between elements. Categorías

links interwikis