From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../archive/mozilla/xul/comunidade/index.html | 6 + files/pt-pt/archive/mozilla/xul/image/index.html | 154 ++++++++++++++ files/pt-pt/archive/mozilla/xul/index.html | 83 ++++++++ .../archive/mozilla/xul/namespaces/index.html | 153 ++++++++++++++ .../archive/mozilla/xul/outros_recursos/index.html | 6 + files/pt-pt/archive/mozilla/xul/scale/index.html | 235 +++++++++++++++++++++ .../adicionar_etiquetas_e_imagens/index.html | 102 +++++++++ .../tutorial/ficheiros_de_propriedade/index.html | 115 ++++++++++ .../pt-pt/archive/mozilla/xul/tutorial/index.html | 142 +++++++++++++ .../modificar_o_tema_predefinido/index.html | 70 ++++++ .../mozilla/xul/tutorial/xbl_bindings/index.html | 215 +++++++++++++++++++ 11 files changed, 1281 insertions(+) create mode 100644 files/pt-pt/archive/mozilla/xul/comunidade/index.html create mode 100644 files/pt-pt/archive/mozilla/xul/image/index.html create mode 100644 files/pt-pt/archive/mozilla/xul/index.html create mode 100644 files/pt-pt/archive/mozilla/xul/namespaces/index.html create mode 100644 files/pt-pt/archive/mozilla/xul/outros_recursos/index.html create mode 100644 files/pt-pt/archive/mozilla/xul/scale/index.html create mode 100644 files/pt-pt/archive/mozilla/xul/tutorial/adicionar_etiquetas_e_imagens/index.html create mode 100644 files/pt-pt/archive/mozilla/xul/tutorial/ficheiros_de_propriedade/index.html create mode 100644 files/pt-pt/archive/mozilla/xul/tutorial/index.html create mode 100644 files/pt-pt/archive/mozilla/xul/tutorial/modificar_o_tema_predefinido/index.html create mode 100644 files/pt-pt/archive/mozilla/xul/tutorial/xbl_bindings/index.html (limited to 'files/pt-pt/archive/mozilla/xul') diff --git a/files/pt-pt/archive/mozilla/xul/comunidade/index.html b/files/pt-pt/archive/mozilla/xul/comunidade/index.html new file mode 100644 index 0000000000..a2712cc2a1 --- /dev/null +++ b/files/pt-pt/archive/mozilla/xul/comunidade/index.html @@ -0,0 +1,6 @@ +--- +title: Comunidade +slug: Archive/Mozilla/XUL/Comunidade +--- +

+

diff --git a/files/pt-pt/archive/mozilla/xul/image/index.html b/files/pt-pt/archive/mozilla/xul/image/index.html new file mode 100644 index 0000000000..5316e18ebd --- /dev/null +++ b/files/pt-pt/archive/mozilla/xul/image/index.html @@ -0,0 +1,154 @@ +--- +title: image +slug: Archive/Mozilla/XUL/image +tags: + - Elementos XUL + - Referência XUL +translation_of: Archive/Mozilla/XUL/image +--- +
+ « XUL Reference home [ + Examples | + Attributes | + Properties | + Methods | + Related ] +
+ +

Resumo

+ +

Um elemento que exibe uma imagem, bem como o elemento img de HTML. O atributo src pode ser utilziado para especificar o URL da imagem.

+ +

Está disponível mais informação no Tutorial de XUL.

+ +
+
+

Nota: Prior to Gecko 8.0, images did not shrink down with the same ratio in both directions when specifying maximum sizes using maxheight or maxwidth. The new behavior aligns more with the HTML <img> element and shrinks both the width and height down proportionally.

+
+
+ +
+
Atributos
+
onerror, onload, src, validate
+
+ +
+
Propriedades
+
accessibleType, src
+
+ +
+
Classes de estilo
+
alert-icon, error-icon, message-icon, question-icon
+
+ +

Exemplos

+ +
Image:Firefoxlogo2.png
+ +
<image src='Firefoxlogo.png' width='135' height='130'/>
+
+ +

Atributos

+ +

+ + +
+
onerror
+
Type: script code
+
This event is sent to an image element when an error occurs loading the image.
+
+
+ + +
+
image.onload
+
Type: script code
+
This event handler will be called on the image element when the image has finished loading. This applies whether the image is applied via the src attribute or the list-style-image style property. If you change the image, the event will fire again when the new image loads. This event will not bubble up the element tree.
+
+
+ +
+
+ src
+
+ Type: URI
+
+ The URI of the content to appear in the element.
+
+ + +
+ + +
+
validate
+
Type: one of the values below
+
This attribute indicates whether to load the image from the cache or not. This would be useful if the images are stored remotely or you plan on swapping the image frequently. The following values are accepted, or leave out the attribute entirely for default handling:
+
+
+
always
+
The image is always checked to see whether it should be reloaded.
+
never
+
The image will be loaded from the cache if possible.
+
+
+
+
+ +

Propriedades

+ +
+
+
+ accessibleType
+
+ Type: integer
+
+ A value indicating the type of accessibility object for the element.
+
+
+ +
+
src
+
Type: URL
+
Gets and sets the value of the src attribute.
+
+

Inherited Properties
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+ +

Métodos

+ + +

Inherited Methods
addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData
+ +

Classes de estilo

+ +
+
+ alert-icon
+
+ Class that adds an alert icon. This typically looks like an exclamation mark. This and the other icon classes may be used by image elements or other elements which can have an image.
+
+
error-icon
+
Class that adds an error icon. This will typically be a red "X" icon.
+
+
message-icon
+
Class that adds a message box icon.
+
+
question-icon
+
Class that adds a question icon, which usually looks like a question mark.
+
+ +

Relacionado

+ +

See also the image and icon attributes.

+ +

Interfaces

+ + + +
diff --git a/files/pt-pt/archive/mozilla/xul/index.html b/files/pt-pt/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..3485d951c8 --- /dev/null +++ b/files/pt-pt/archive/mozilla/xul/index.html @@ -0,0 +1,83 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - Todas_as_Categorias + - XUL +translation_of: Archive/Mozilla/XUL +--- +

 

+ +
Tutorial XUL + +

Um tutorial introdutório ao XUL, originário do XULPlanet.

+
+ +
+

A XML User Interface Language (XUL) (em português "linguagem XML de interface de usuário") é a linguagem de interface de usuário da Mozilla baseada na XML que permite construir aplicações multi-plataformas ricas em características que podem rodar ligadas ou desligadas da internet. Essas aplicações são facilmente personalizadas com texto, gráficos e disposições alternativas, fazendo com que possam ser marcadas e localizadas para vários mercados. Desenvolvedores Web que já estejam familiarizados com DHTML irão aprender XUL rapidamente e vão logo poder criar aplicações.

+
+ + + + + + + + +
+

Documentação

+ +
+
Referência XUL
+
Veja também a documentação MDC em prefwindow.
+
+ +
+
Controles XUL
+
Uma rápida lista de todos os controles XUL disponíveis.
+
+ +
+
Visão Geral do XUL
+
Descreve as características chave e os componentes do XUL.
+
+ +
+
Guia modelo do XUL
+
Um guia detalhado sobre modelos XUL, que é um meio de gerar conteúdo de um código de dados.
+
+ +
+
Sobreposições XUL
+
Um artigo sobre sobreposições XUL. Sobreposições são usadas para descrever conteúdo extra para a UI. Ele proporciona um poderoso mecanismo para extender e customizar aplicações XUL existentes.
+
+ +

Veja todos...

+ 		+

Comunidade

+ +

{{ DiscussionList("dev-tech-xul", "mozilla.dev.tech.xul") }}

+ + + +

Ferramentas

+ + + +

Veja todas...

+ +

Tópicos relacionados

+ +

JavaScript, CSS, RDF, XBL, Extensões, XULRunner

+ +

Categorias

+ +

Interwiki Language Links

+ +

 

+
diff --git a/files/pt-pt/archive/mozilla/xul/namespaces/index.html b/files/pt-pt/archive/mozilla/xul/namespaces/index.html new file mode 100644 index 0000000000..53bc371053 --- /dev/null +++ b/files/pt-pt/archive/mozilla/xul/namespaces/index.html @@ -0,0 +1,153 @@ +--- +title: Espaços de nomes +slug: Archive/Mozilla/XUL/Namespaces +tags: + - Extensões + - Extras +translation_of: Archive/Mozilla/XUL/Namespaces +--- +

 

+ +

Em adição a este documento, consulte Namespaces Crash Course.

+ +

Espaços de nomes XML fornecem uma maneira para distinguir nomes duplicados de elementos e atributos. Os nomes de elementos e atributos duplicados podem ocorrer quando um documento XML contém elementos e atributos de dois ou mais esquemas XML diferentes (ou DTDs). para citar Wikipédia: "Em geral, um espaço de nome é um recipiente abstrato que fornece contexto para os itens... este contém e permite a desambiguação de itens com o mesmo nome."

+ +

If you are familiar with C++ namespaces, Java packages, perl packages, or Python module importing, you are already familiar with the namespace concept.

+ +

An XML namespace is identified by an unique name (called a URI, not a URL, even though it can look like a URL). An URI is any string, although most people choose a URL-based URI because URLs are an easy way to hope for uniqueness. Although there's nothing preventing someone else from using the namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul, it's fairly unlikely anyone would choose that accidentally. Even if they did accidentally choose it, they may not define the same elements as XUL anyway (e.g., <textbox/>) in their schema/DTD.

+ +

Any element type or attribute name in an XML namespace can be uniquely identified by its XML namespace and its "local name". Together, these two items define a qualified name, or QName.

+ +

For example, <xul:textbox/> uses a namespace named "xul" and a local name "textbox". This distinguishes it from, for example, <foobar:textbox/> which might occur in the same document. The xul and foobar namespaces must be defined at the top of the XML document in which they are used, like so:

+ +
 <foobar:some-element
+     xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+     xmlns:foobar="the-foobar-namespace">
+   <xul:textbox id="foo" value="bar"/>
+   <foobar:textbox favorite-food="pancakes"/>
+ </foobar:some-element>
+
+ +

Notice I've mixed two <textboxes/> in the same document. The only way to distinguish that they have different meanings is with namespaces.

+ +

There's only one other thing to know: "default namespace". Every XML element has a "default namespace", and this is used with XUL elements all the time. In XUL documents, you'll usually see this:

+ +
 <window
+     id="foo"
+     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+   ...
+   ...
+ </window>
+
+ +

and in XHTML documents, you'll see this:

+ +
 <html xmlns="http://www.w3.org/1999/xhtml">
+   ...
+   ...
+ </html>
+
+ +

There is a very subtle difference here than before. Before I wrote xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" but here the :xul piece is omitted. This signifies to the XML parser that http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul is the default namespace for the element and its descendant elements (unless further overridden by a default namespace on a descendant element), and that any element without a namespace (i.e., no prefix and colon) belongs to the default namespace. That's why we can write the shorthand <textbox/> instead of <xul:textbox/> in XUL (although the latter is just as correct when not using http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul as the default namespace) -- the XUL namespace is defined as the default on the topmost element. In other words, a default namespace permits a kind of short-hand to be used for all descendants of an element.

+ +

Here's a question: what namespace contains the element foo in the XML document below?

+ +
  <foo/>
+
+ +

The answer is that it's in no namespace, or alternately, it's in the namespace denoted by the empty string:

+ +
  <foo xmlns=""/>
+
+ +

This second example is semantically equivalent to the first.

+ +

Now, a second question: what namespaces are the bar, baz, and quux attributes in?

+ +
  <foo bar="value">
+    <element xmlns="namespace!" baz="value">
+      <element quux="value"/>
+    </element>
+  </foo>
+
+ +

bar is obviously not in a namespace. What about baz and quux? The answer is that they aren't in a namespace either. In fact no unprefixed attribute is ever in a namespace, primarily because XML originally didn't have namespaces, and all XML from that time had to stay in no namespace. This is a source of perennial confusion for XML namespaces.

+ +
+ + + + + +
diff --git a/files/pt-pt/archive/mozilla/xul/outros_recursos/index.html b/files/pt-pt/archive/mozilla/xul/outros_recursos/index.html new file mode 100644 index 0000000000..fba234096d --- /dev/null +++ b/files/pt-pt/archive/mozilla/xul/outros_recursos/index.html @@ -0,0 +1,6 @@ +--- +title: Outros recursos +slug: Archive/Mozilla/XUL/Outros_recursos +--- +

+

diff --git a/files/pt-pt/archive/mozilla/xul/scale/index.html b/files/pt-pt/archive/mozilla/xul/scale/index.html new file mode 100644 index 0000000000..fab8882332 --- /dev/null +++ b/files/pt-pt/archive/mozilla/xul/scale/index.html @@ -0,0 +1,235 @@ +--- +title: scale +slug: Archive/Mozilla/XUL/scale +tags: + - PrecisaDeConteúdo +--- +

+ + « XUL Reference home [ + Examples | + Attributes | + Properties | + Methods | + Related ] + +

Uma escala permite ao usuário selecionar um valor de uma faixa. Uma barra exibida horizontalmente ou verticalmente permite ao usuário selecionar um valor arrastando um ponteiro na barra. +

Use o atributo de orientação para especificar a orientação da escala. O valor padrão é <tt>horizontal</tt>, que exibe uma escala horizontal. Valores pequenos são para a esquerda e valores maiores para a direita. Configure o atributo orient para <tt>vertical</tt> para usar uma escala vertical. +

O usuário pode usar as teclas de flecha para incrementar ou decrementar o valor em uma unidade, ou as teclas de "page up" e "page down" para incrementar ou decrementar uma página, como especificado pelo atributo pageincrement. As teclas "home" e "end" configuram o valor da escala para os valores mínimo e máximo, respectivamente. +

+
Atributos +
disabled, increment, max, min, pageincrement, tabindex, value +
+
Propriedades +
disabled, max, min, increment, pageIncrement, tabIndex, value,
+
Métodos +
decrease, decreasePage, increase, increasePage, +
+

Examples

+

Escala horizontal: +

+
<scale min="1" max="10"/>
+
+

Image:Controlguide-scale.png +

Escala vertical: +

+
<scale min="1" max="10" orient="vertical"/>
+
+

Atributos

+

+

+ + +
+
disabled
+
Type: boolean
+
Indicates whether the element is disabled or not. If this attribute is set, the element is disabled. Disabled elements are usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. In the case of form elements, it will not be submitted. Do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. + +
The disabled attribute is allowed only for form controls. Using it with an anchor tag (an <a> link) will have no effect.
+ +
+ The element will, however, still respond to mouse events. To enable the element, leave this attribute out entirely.
+
+
Visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.
+
+ + +
+
+ +
+
+ increment
+
+ Type: integer
+
+ The amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). The default value is 1.
+
+
+
+ +
+
+ min
+
+ Type: integer
+
+ The minimum value the control's value may take. The default value is 0.
+
+

 

+
+
+ +
+
+ Type: integer
+
+ The maximum value that the scale or number box may be set to. The default value is 100 for scales and Infinity for number boxes.
+
+ +

 

+
+
+ + +
+
pageincrement
+
Type: integer
+
The amount by which the value of the curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when the page up or page down keys are pressed. The default value is 10.
+
+
+
+ + +
+
tabindex
+
Type: integer
+
The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.
+
+
+
+ + +
+
value
+
Type: string
+
The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use. Be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) Use another attribute like "value2" or "data-myAtt" (as in the HTML5 draft), as XUL does not require validation (less future-proof); 2) Use setAttributeNS() to put custom attributes in a non-XUL namespace (serializable and future-proof); 3) Use setUserData() (future-proof and clean, but not easily serializable). For user editable menulist elements, the contents, as visible to the user, are read and set using the Menulist.value syntax. For those elements, setAttribute("value", myValue) and getAttribute("value") do not access or affect the contents displayed to the user.
+
+ + + +

 

+
+ +

Propriedades

+

+

+
+
+ disabled
+
+ Type: boolean
+
+ Gets and sets the value of the disabled attribute.
+
+
+
+
+
+ increment
+
+ Type: integer
+
+ Gets and sets the value of the increment attribute.
+
+
+
+
+ min
+
+ Type: integer
+
+ Gets and sets the value of the min attribute.
+
+
+
+
+ max
+
+ Type: integer
+
+ Gets and sets the value of the max attribute.
+
+
+
+
+ pageIncrement
+
+ Type: integer
+
+ Gets and sets the value of the pageincrement attribute.
+
+
+
+
+ tabIndex
+
+ Type: integer
+
+ Gets and sets the value of the tabindex attribute.
+
+
+
+
+ value
+
+ Type: string
+
+ Gets and sets the value of the value attribute. For textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the Textbox.value and Menulist.value syntax.
+
+ +

 

+ +

Métodos

+ +

Inherited Methods
addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData
+
+
+ decrease()
+
+ Return type: no return value
+
+ Decreases the value of the scale or number box by the increment.
+
+
+
+ decreasePage()
+
+ Return type: no return value
+
+ Decreases the value of the scale by the pageincrement.
+
+
+
+ increase()
+
+ Return type: no return value
+
+ Increases the value of the scale or number box by the increment.
+
+
+
+ increasePage()
+
+ Return type: no return value
+
+ Increases the value of the scale by the page increment.
+
+ +

Relacionado

+
Interfaces +
nsIDOMXULControlElement +
+

Categorias +

Interwiki Language Links +

diff --git a/files/pt-pt/archive/mozilla/xul/tutorial/adicionar_etiquetas_e_imagens/index.html b/files/pt-pt/archive/mozilla/xul/tutorial/adicionar_etiquetas_e_imagens/index.html new file mode 100644 index 0000000000..7f6d53c292 --- /dev/null +++ b/files/pt-pt/archive/mozilla/xul/tutorial/adicionar_etiquetas_e_imagens/index.html @@ -0,0 +1,102 @@ +--- +title: Adicionar Etiquetas e Imagens +slug: Archive/Mozilla/XUL/Tutorial/Adicionar_Etiquetas_e_Imagens +tags: + - Tutoriais + - Tutorial de XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Labels_and_Images +--- +
+

« AnteriorPróxima »

+
+ +

Esta secção descreve uma maneira para adicionar etiquetas e imagens a uma janela. Além disso, nós consideramos em como incluir os elementos em grupos.

+ +

Elementos de Texto

+ +

You cannot embed text directly into a XUL file without tags around it and expect it to be displayed. You can use two XUL elements for this purpose.

+ +

Elemento Etiqueta

+ +

The most basic way to include text in a window is to use the label element. It should be used when you want to place a descriptive label beside a control, such as a button. An example is shown below:

+ +

Example 1 : Source View

+ +
<label value="This is some text"/>
+
+ +

The value attribute can be used to specify the text that you wish to have displayed. The text will not wrap, so the text will all be displayed on a single line. This syntax is the most common of labels.

+ +

If the text needs to wrap, you can place the text content inside opening and closing tags as in the following example:

+ +

Example 2 :

+ +
<label>This is some longer text that will wrap onto several lines.</label>
+
+ +

As with HTML, line breaks and extra whitespace are collapsed into a single space. Later, we'll find out how to constrain the width of elements so that we can see the wrapping more easily.

+ +
Atributo de Controle
+ +

You can use the control attribute to set which control the label is associated with. When the user clicks on an associated label, that control will be focused. This association is also important for accessibility, so that screen readers read aloud the label for the control as the user tabs to it. Set the value of the control attribute to the id of the element to be focused.

+ +

Example 3 : Source View

+ +
<label value="Click here:" control="open-button"/>
+<button id="open-button" label="Open"/>
+
+ +

In the example above, clicking the label will cause the button to be focused.

+ +

Elemento Descrição

+ +

For descriptive text not associated with any particular control, you can use the description tag. This element is useful for informative text at the top of a dialog or a group of controls for example. As with the label element, you can either use the value attribute for a single line of text or place text or XHTML content inside opening and closing description tags for longer blocks of text. It is more common to use the attribute syntax for labels, and the text content syntax for descriptions.

+ +

Example 4 : Source View

+ +
<description>
+  This longer section of text is displayed.
+</description>
+
+ +

You can set the text via script using the textContent property, as in the following example:

+ +
<description id="text" width="200"/>
+
+document.getElementById('text').textContent = "Some lengthy word wrapped text goes here.";
+
+ +

Internally, both the label element and the description elements are the same. The label element is intended for labels of controls, such as text fields. The control attribute is only supported for labels. The description element is intended for other descriptive text such as informative text at the top of a dialog box.

+ +

Imagens

+ +

XUL has an element to display images within a window. This element is appropriately named image. Note that the tag name is different than HTML (image instead of img). You can use the src attribute to specify the URL of the image file. The example below shows this:

+ +
<image src="images/banner.jpg"/>
+
+ +

Although you can use this syntax, it would be better in order to support different themes to use a style sheet to set the image URL. A later section will describe how to use style sheets, but an example will be shown here for completeness. You can use the list-style-image CSS property to set the URL for the image. Here are some examples:

+ +
XUL:
+ <image id="image1"/>
+ <image id="search"/>
+
+ +
Style Sheet:
+ #image1 {
+   list-style-image: url("chrome://findfile/skin/banner.jpg");
+ }
+
+ #search {
+   list-style-image: url("http://example.com/images/search.png");
+ }
+
+ +

These images come from within the chrome directory, in the skin for the findfile package. Because images vary by theme, you would usually place images in the skin directory.

+ +

In the next section, we will learn how to add some input controls to a window.

+ +
+

« AnteriorPróxima »

+
diff --git a/files/pt-pt/archive/mozilla/xul/tutorial/ficheiros_de_propriedade/index.html b/files/pt-pt/archive/mozilla/xul/tutorial/ficheiros_de_propriedade/index.html new file mode 100644 index 0000000000..44657ee360 --- /dev/null +++ b/files/pt-pt/archive/mozilla/xul/tutorial/ficheiros_de_propriedade/index.html @@ -0,0 +1,115 @@ +--- +title: Ficheiros de Propriedade +slug: Archive/Mozilla/XUL/Tutorial/Ficheiros_de_propriedade +tags: + - Internacionalização + - Localização + - Tutoriais + - Tutorial de XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Property_Files +--- +

 

+ +

{{ PreviousNext("XUL Tutorial:Localization", "XUL Tutorial:Introduction to XBL") }}

+ +

Num script, não pode ser utilizadas as entities. Em vez disso, são utilizados 'ficheiros de Propriedade'.

+ +

Properties

+ +

DTD files are suitable when you have text in a XUL file. However, a script does not get parsed for entities. In addition, you may wish to display a message which is generated from a script, if, for example, you do not know the exact text to be displayed. For this purpose, property files can be used.

+ +

A property file contains a set of strings. You will find property files alongside the DTD files with a .properties extension. Properties in the file are declared with the syntax name=value. An example is shown below:

+ +
notFoundAlert=No files were found matching the criteria.
+deleteAlert=Click OK to have all your files deleted.
+resultMessage=%2$S files found in the %1$S directory.
+
+ +

Here, the property file contains three properties. These would be read by a script and displayed to the user.

+ +

A property file can also include comments. A line that begins with a hash sign ('#') is treated as a comment:

+ +
# This is a comment
+welcomeMessage=Hello, world!
+# This is another comment
+goodbyeMessage=Come back soon!
+
+ +

Stringbundles

+ +

You could write the code to read properties yourself, however XUL provides the {{ XULElem("stringbundle") }} element which does this for you. The element has a number of functions which can be used to get strings from the property file and get other locale information. This element reads in the contents of a property file and builds a list of properties for you. You can then look up a particular property by name.

+ +
<stringbundleset id="stringbundleset">
+<stringbundle id="strings" src="strings.properties"/>
+</stringbundleset>
+
+ +

Including this element will read the properties from the file 'strings.properties' in the same directory as the XUL file. Use a chrome URL to read a file from the locale:

+ +
<stringbundleset id="stringbundleset">
+<stringbundle id="strings" src="chrome://myplugin/locale/strings.properties"/>
+</stringbundleset>
+
+ +

Like other non-displayed elements, you should declare all your stringbundles inside a {{ XULElem("stringbundleset") }} element so that they are all kept together.

+ +

Getting a String from the Bundle

+ +

This {{ XULElem("stringbundle") }} element has a number of properties. The first is getString which can be used in a script to read a string from the bundle.

+ +
var strbundle = document.getElementById("strings");
+var nofilesfound=strbundle.getString("notFoundAlert");
+
+alert(nofilesfound);
+
+ + + +

Text Formatting

+ +

The next method is getFormattedString(). This method also gets a string with the given key name from the bundle. In addition, each occurrence of formatting code (e.g. %S) is replaced by each successive element in the supplied array.

+ +
var dir = "/usr/local/document";
+var count = 10;
+
+var strbundle = document.getElementById("strings");
+var result = strbundle.getFormattedString("resultMessage", [ dir, count ]);
+
+alert(result);
+
+ +

This example will display following message in an alert box.

+ +
10 files found in the /usr/local/document directory.
+
+ +

You will notice the formatting codes %1$S and %2$S is used, and replaced different order in the array. Formatting code %n$S is specify the position of corresponding parameter directly. Although the word order is not the same in all the languages, by using getFormattedString() the specification of the order can be put out the property files.

+ +

In case you need to format a string that already contains the percentage character in it (to get something like "50% Off" returned), escape the percentage character with another percentage character, like this:

+ +
my.percentage.string = %S%% Off
+
+ +

Not escaping the percentage character will generate an incorrect string that strips the space character between the percentage character and the next word of the string ("50%Off").

+ +

Non-ASCII Characters, UTF-8 and escaping

+ +

Gecko 1.8.x (or later) supports property files encoded in UTF-8. You can and should write non-ASCII characters directly without escape sequences, and save the file as UTF-8 without BOM. Double-check the save options of your text editor, because many don't do this by default. See Localizing extension descriptions for more details.

+ +

In some cases, it may be useful or needed to use escape sequences to express some characters. Property files support escape sequences of the form: \uXXXX , where XXXX is a Unicode character code. For example, to put a space at the beginning or end of a string (which would normally be stripped by the properties file parser), use \u0020 .

+ +


+ In the next section, we will look at XBL, which can be used to define the behavior of an element.

+ +

{{ PreviousNext("XUL Tutorial:Localization", "XUL Tutorial:Introduction to XBL") }}

+ +

Consulte Também

+ + diff --git a/files/pt-pt/archive/mozilla/xul/tutorial/index.html b/files/pt-pt/archive/mozilla/xul/tutorial/index.html new file mode 100644 index 0000000000..8071ee6794 --- /dev/null +++ b/files/pt-pt/archive/mozilla/xul/tutorial/index.html @@ -0,0 +1,142 @@ +--- +title: XUL Tutorial +slug: Archive/Mozilla/XUL/Tutorial +tags: + - NeedsTranslation + - TopicStub + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial +--- +

This tutorial describes XUL, the XML User-interface Language. This language was created for the Mozilla application and is used to describe its user interface.

+

Introduction

+ +

Simple Elements

+ +

The Box Model

+ +

More Layout Elements

+ +

Toolbars and Menus

+ +

Events and Scripts

+ +

Document Object Model

+ +

Trees

+ +

RDF and Templates

+ +

Skins and Locales

+ +

Bindings

+ +

Specialized Window Types

+ +

Installation

+ +
+

This XUL tutorial was originally created by Neil Deakin. He has graciously given us permission to use it as part of the MDN.

+
+
+

Original Document Information

+ +
+

 

diff --git a/files/pt-pt/archive/mozilla/xul/tutorial/modificar_o_tema_predefinido/index.html b/files/pt-pt/archive/mozilla/xul/tutorial/modificar_o_tema_predefinido/index.html new file mode 100644 index 0000000000..9c403175a6 --- /dev/null +++ b/files/pt-pt/archive/mozilla/xul/tutorial/modificar_o_tema_predefinido/index.html @@ -0,0 +1,70 @@ +--- +title: Modificar o Tema Predefinido +slug: Archive/Mozilla/XUL/Tutorial/Modificar_o_tema_predefinido +tags: + - Firefox + - Intermediário + - Personalização + - Tutoriais + - Tutorial XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_the_Default_Skin +--- +

{{ PreviousNext("XUL Tutorial:Styling a Tree", "XUL Tutorial:Creating a Skin") }}

+ +
+

Esta documentação não foi atualizada para o Firefox Quantum. Support for the userChrome.css file and any of its elements described below are not guaranteed in future versions of Firefox. Using it may lead to hard-to-diagnose bugs or crashes. Use at your own risk!

+
+ +

Esta secção descreve como modificar o tema de uma janela.

+ +

O Essencial do Tema

+ +

A skin is a set of style sheets, images and behaviors that are applied to a XUL file. By applying a different skin, you can change the look of a window without changing its functionality. Firefox provides a skin by default, and you may download others. The XUL for any skins is the same, however the style sheets and images used are different.

+ +

For a simple personalized look to a Firefox window, you can easily change the style sheets associated with it. Larger changes can be done by creating an entirely new skin. Firefox has a Theme Manager for changing the default skin. (Although the underlying code for Mozilla calls them skins and the user interface calls them themes, they're both referring to the same thing).

+ +

A skin is described using CSS, allowing you to define the colors, borders and images used to draw elements. The file classic.jar contains the skin definitions. The global directory within this archive contains the main style definitions for how to display the various XUL elements. By changing these files, you can change the look of the XUL applications.

+ +

Personalizar com userChrome.css

+ +

If you place a file called 'userChrome.css' in a directory called 'chrome' inside your user profile directory, you can override settings without changing the archives themselves. This directory should be created when you create a profile and some examples placed there. The file 'userContent.css' customizes Web pages, whereas 'userChrome.css' customizes chrome files.

+ +

For example, by adding the following to the end of the file, you can change all {{ XULElem("menubar") }} elements to have a red background.

+ +
menubar {
+  background-color: red;
+}
+
+ +

If you open any Firefox window after making this change, the menu bars will be red. Because this change was made to the user style sheet, it affects all windows. This means that the browser menu bar, the bookmarks menu bar and even the find files menu bar will be red.

+ +

Pacotes de Temas

+ +

To have the change affect only one window, change the style sheet associated with that XUL file. For example, to add a red border around the menu commands in the bookmarks manager window, add the following to bookmarksManager.css in the classic.jar or your favorite skin archive.

+ +
menuitem {
+  border: 1px solid red;
+}
+
+ +

If you look in one of the skin archives, you will notice that each contain a number of style sheets and a number of images. The style sheets refer to the images. You should avoid putting references to images directly in XUL files if you want your content to be skinnable. This is because a particular skin's design might not use images and it may need some more complex design. By referring to the images with CSS, they are easy to remove. It also removes the reliance on specific image filenames.

+ +

You can assign images to a button, checkbox and other elements by using the list-style-image property as in the following:

+ +
checkbox {
+  list-style-image: url("chrome://findfile/skin/images/check-off.jpg");
+}
+
+checkbox[checked="true"] {
+  list-style-image: url("chrome://findfile/skin/images/check-on.jpg");
+}
+
+ +

This code changes the image associated with a checkbox. The first style sets the image for a normal checkbox and the second style sets the image for a checked checkbox. The modifier 'checked=true' makes the style only apply to elements which have their checked attributes set to true.

+ +

See also : creating a skin for Firefox and CSS getting started

+ +

Na secção seguinte, nós iremos abordar a criação de um novo tema

+ +

{{ PreviousNext("XUL Tutorial:Styling a Tree", "XUL Tutorial:Creating a Skin") }}

diff --git a/files/pt-pt/archive/mozilla/xul/tutorial/xbl_bindings/index.html b/files/pt-pt/archive/mozilla/xul/tutorial/xbl_bindings/index.html new file mode 100644 index 0000000000..9b5dd8f99f --- /dev/null +++ b/files/pt-pt/archive/mozilla/xul/tutorial/xbl_bindings/index.html @@ -0,0 +1,215 @@ +--- +title: XBL bindings +slug: Archive/Mozilla/XUL/Tutorial/XBL_bindings +tags: + - 'CSS:Como_começar' +translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets +--- +

{{ PreviousNext("CSS:Como começar:JavaScript", "CSS:Como começar:Interfaces de usuário XUL") }}

+ +

Esta página ilustra como o você pode usar as CSS no Mozilla para melhorar a estrutura de aplicações complexas, fazendo o código e recursos mais facilmente reutilizáveis.

+ +

Você aplica esta técnica em uma simples demonstração.

+ +

Informação: XBL bindings

+ +

A estrutura proporcionada pela linguagem de marcação e as CSS não é ideal para aplicações complexas onde partes precisam ser autônomas e reutilizáveis. Você pode colocar folhas de estilo em arquivos separados, e pode também colocar os scripts em arquivos separados. Mas você precisa ligar estes arquivos no documento como um todo.

+ +

Outra limitação estrutural concerne ao conteúdo. Você pode usar as CSS para proporcionar conteúdo para elementos selecionados, mas o conteúdo é limitado a textos e imagens, e seu posicionamento é limitado em antes ou depois do elemento selecionado.

+ +

Mozilla proporciona um mecanismo que supera estas limitações: XBL (XML Bindings Language). Você pode usar o XBL para ligar elementos selecionados ao próprio:

+ + + +

Evitando ligar tudo no nível do documento, você pode fazer as partes autônomas que são fáceis de manter e reutilizar.

+ + + + + + + + +
Mais detalhes
Para mais informação sobre XBL bindings, veja a página XBL neste wiki.
+ +

Ação: Uma demonstração XBL

+ +

Crie um novo documento HTML, doc6.html. Copie e cole o conteúdo daqui:

+ +
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Como Começar Mozilla CSS - Demonstração XBL </TITLE>
+<LINK rel="stylesheet" type="text/css" href="style6.css">
+</HEAD>
+
+<BODY>
+<H1>Demonstração XBL</H1>
+<DIV id="square">Clique Aqui</DIV>
+</BODY>
+
+</HTML>
+
+
+ +

Crie um novo arquivo CSS, style6.css. Esta folha de estilo contém o documento de estilo. Copie e cole o conteúdo daqui:

+ +
+
/*** Demonstração XBL ***/
+#square {
+  -moz-binding: url("square.xbl#square");
+  }
+
+
+ +

Crie um novo arquivo de texto, square.xbl. Este arquivo contém o XBL binding. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:

+ +
+
<?xml version="1.0"?>
+<!DOCTYPE bindings>
+<bindings xmlns="http://www.mozilla.org/xbl"
+             xmlns:html="http://www.w3.org/1999/xhtml">
+
+<binding id="square">
+
+  <resources>
+    <stylesheet src="bind6.css"/>
+    </resources>
+
+  <content>
+    <html:div anonid="square"/>
+    <html:button anonid="button" type="button">
+      <children/>
+      </html:button>
+    </content>
+
+  <implementation>
+
+    <field name="square"><![CDATA[
+      document.getAnonymousElementByAttribute(this, "anonid", "square")
+      ]]></field>
+
+    <field name="button"><![CDATA[
+      document.getAnonymousElementByAttribute(this, "anonid", "button")
+      ]]></field>
+
+    <method name="doDemo">
+      <body><![CDATA[
+        this.square.style.backgroundColor = "#cf4"
+        this.square.style.marginLeft = "20em"
+        this.button.setAttribute("disabled", "true")
+        setTimeout(this.clearDemo, 2000, this)
+        ]]></body>
+      </method>
+
+    <method name="clearDemo">
+      <parameter name="me"/>
+      <body><![CDATA[
+        me.square.style.backgroundColor = "transparent"
+        me.square.style.marginLeft = "0"
+        me.button.removeAttribute("disabled")
+        ]]></body>
+      </method>
+
+    </implementation>
+
+  <handlers>
+    <handler event="click" button="0"><![CDATA[
+     if (event.originalTarget == this.button) this.doDemo()
+     ]]></handler>
+    </handlers>
+
+  </binding>
+
+</bindings>
+
+
+ +

Crie um novo arquivo CSS, bind6.css. Esta folha de estilo separada contém o estilo para o binding. Copie e cole o conteúdo daqui:

+ +
+
/*** Demonstração XBL ***/
+[anonid="square"] {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  }
+
+[anonid="button"] {
+  margin-top: 1em;
+  padding: .5em 2em;
+  }
+
+
+ +

Abra o documento no seu navegador e pressione o botão.

+ +

O wiki não suporta JavaScript nas páginas, então não é possível demonstrar aqui. Deve parecer como isto, antes e depois de você pressionar o botão:

+ + + + + + + + +
+ + + + + + +
+

Demonstração XBL

+
+ 		+ + + + + + +
+

Demonstração XBL

+
+
+ +

Notas sobre esta demonstração:

+ + + + + + + + + + +
Desafios
Mude o arquivo XBL de modo que o quadrado dobre a largura ao mudar de cor, em vez de saltar para a direita. +

Use a ferramenta DOM Inspector para inspecionar o documento, reavaliando o conteúdo adicionado.

+
+ +

O que vem depois?

+ +

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

+ +

Nesta demonstração, o quadrado e o botão foram widgets independentes que funcionam com um documento HTML. Mozilla tem uma linguagem de marcação especializada para criação de interfaces de usuários. A próxima página demostra isto: Interfaces de usuário XUL

+ +

{{ PreviousNext("CSS:Como começar:JavaScript", "CSS:Como começar:Interfaces de usuário XUL") }}

+ +

Categorias

+ +

Interwiki Language Links

-- cgit v1.2.3-54-g00ecf