mozilla

Revision 276467 of XUL_Tutorial/Introducció

  • Revision slug: XUL_Tutorial/Introducció
  • Revision title: Introducció
  • Revision id: 276467
  • Created:
  • Creator: RpJ
  • Is current revision? No
  • Comment page created, 1164 words added

Revision Content

{{ Next("XUL Tutorial:XUL Structure") }}

Aquest tutorial és una guia per aprendre XUL ( Llenguatge d'Interfície d'Usuari XML ) el qual és un llenguatge multiplataforma per descriure interfícies d'usuari per aplicacions.

Aquest tutorial demostrarà la creació d'una simple interfície per cercar fitxers, semblant a la provinguda al programa Sherlock del Macintosh en el diàleg cerca fitxer en Windows. Cal tenir en compte que només crearem la interfície amb una funcionalitat limitada i la cerca de fitxers no serà implementada. Una línia blava apareixerà a la dreta del paràgraf quan el diàleg de cerca s'estigui modificant. Pots seguir endavant directament a través d'aquestes seccions.

Què és XUL i perquè ha sigut creat?

XUL (pronunciat "zool" i que rima amb "cool" ) s'ha creat per fer el desenvolupament del navegador de Mozilla més fàcil i ràpid. És un llenguatge basat en XML amb el que totes les característiques i funcions d'XML són a XUL.

La gran majoria d'aplicacions s'han de desenvolupar fent servir característiques d'una plataforma en concret fent la construcció de programari multiplataforma molt difícil i llarga. En el passat però ja s'han desenvolupat sol·lucions multiplataforma. Java, per exemple te la portabilitat com a principal característica. XUL és un altre llenguatge d'aques tipus que ha sigut dissenyat específicament per construir interfícies d'usuari portables. Cal molt de temps per construir una aplicació encara que sigui per una sola plataforma. El temps requerit per compilar i depurar pot ser molt llarga. Amb XUL, l'interfície pot ser implementada i modificada fàcilment i ràpidament. 

XUL te tots els avantatges dels llenguatges basats en XML. Per exemple XHTML o altres llenguatges XML com MathML o SVG es poden inserir al mig. També, el texte que s'utilitza amb XUL és fàcilment localitzable, que vol dir que es pot traduïr a altres idiomes amb poc esforç.

What kinds of user-interfaces can be made with XUL?

XUL provides the ability to create most elements found in modern graphical interfaces. Some elements that can be created are:

  • Input controls such as textboxes and checkboxes
  • Toolbars with buttons or other content
  • Menus on a menu bar or pop up menus
  • Tabbed dialogs
  • Trees for hierarchical or tabular information
  • Keyboard shortcuts

The displayed content can be created from the contents of a XUL file or with data from a datasource. In Mozilla, such datasources include a user's mailbox, their bookmarks and search results. The contents of menus, trees and other elements can be populated with this data, or with your own data supplied in an RDF file.

There are several ways you can use XUL:

  • Firefox extension -- an extension adds functionality to the browser itself, often in the form of extra toolbars, context menus, or customizations to the browser's user interface. This is done using a feature of XUL called an overlay, which allows the UI provided from one source, in this case, the Firefox browser, to be merged together with the UI from the extension. Extensions may also be applied to other Mozilla based products such as Thunderbird.
  • Standalone XULRunner application -- XULRunner is a packaged version of the Mozilla platform which allows you to create standalone XUL applications. A browser isn't required to run these applications, as they have their own executable file.
  • XUL package -- in between the other two are applications which are created in the same way as an extension, but they act like a separate application in a separate window. This is used when you don't want to have the larger size of a complete XULRunner application, but don't mind requiring a Mozilla browser to be installed to be able to run the application.
  • Remote XUL application -- you can also just place XUL code on a web server and open it in a browser, as you would any other web page. This method is limited however, as there are security concerns that will limit the kinds of things you will be able to do, such as opening other windows.

The first three types all require an installation to be performed on the user's machine. However, these types of applications do not have security restrictions placed on them, so they may access local files and read and write preferences, for example. For extensions, the XUL files and associated scripts and images used by an application would be packaged into a single file and downloaded and installed by the user. Mozilla applications such as Firefox provide an extension manager which allows packages to be installed without having to write a lot of complex code.

It is also possible to open XUL files directly from the file system or from a remote web site; however they will be restricted in the kinds of operations they can do, and some aspects of XUL will not work. However, if you do want to load XUL content from a remote site, the Web server must be set up to send XUL files with the content type "application/vnd.mozilla.xul+xml". XUL is usually stored in files with a .xul extension. You can open a XUL file with Mozilla as you would any other file, using the Open File command from the File menu or typing the URL into the address bar.

What do I need to know to use this tutorial?

You should have an understanding of HTML and at least a basic understanding of XML and CSS. Here are some guidelines to keep in mind:

  • XUL elements and attributes should all be entered in lowercase as XML is case-sensitive (unlike HTML).
  • Attribute values in XUL must be placed inside quotes, even if they are numbers.
  • XUL files are usually split into four files, one each for the layout and elements, for style declarations, for entity declarations (used for localization) and for scripts. In addition, you may have extra files for images or for platform specific data.

XUL is supported in Mozilla and browsers that are also based upon on the Gecko engine, such as Netscape 6 or later and Mozilla Firefox. Due to various changes in XUL syntax over time, you will want to get the latest version for the examples to work properly. Most examples should work in Mozilla 1.0 or later. XUL is fairly similar in Firefox and to other browsers, although it has some specific differences such as support for customizable toolbars.

This tutorial attempts to cover much of XUL's functionality, however, not all features are discussed. Once you are familiar with XUL, you can use the XUL Reference to find out about other features supported by specific elements.

{{ Next("XUL Tutorial:XUL Structure") }}

{{ languages( { "de": "de/XUL_Tutorial/Einfuehrung", "es": "es/Tutorial_de_XUL/Introducci\u00f3n", "fr": "fr/Tutoriel_XUL/Introduction", "ja": "ja/XUL_Tutorial/Introduction", "pl": "pl/Kurs_XUL/Wprowadzenie", "zh-cn": "cn/XUL_\u6559\u7a0b/\u5f15\u8a00", "ru": "ru/\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e_\u043f\u043e_XUL/\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435" } ) }}

Revision Source

<p>{{ Next("XUL Tutorial:XUL Structure") }}</p>
<p>Aquest tutorial és una guia per aprendre XUL ( Llenguatge d'Interfície d'Usuari XML ) el qual és un llenguatge multiplataforma per descriure interfícies d'usuari per aplicacions.</p>
<p>Aquest tutorial demostrarà la creació d'una simple interfície per cercar fitxers, semblant a la provinguda al programa Sherlock del Macintosh en el diàleg cerca fitxer en Windows. Cal tenir en compte que només crearem la interfície amb una funcionalitat limitada i la cerca de fitxers no serà implementada. Una línia blava apareixerà a la dreta del paràgraf quan el diàleg de cerca s'estigui modificant. Pots seguir endavant directament a través d'aquestes seccions.</p>
<h3 name="What_is_XUL_and_why_was_it_created.3F">Què és XUL i perquè ha sigut creat?</h3>
<p>XUL (pronunciat "zool" i que rima amb "cool" ) s'ha creat per fer el desenvolupament del navegador de Mozilla més fàcil i ràpid. És un llenguatge basat en XML amb el que totes les característiques i funcions d'XML són a XUL.</p>
<p>La gran majoria d'aplicacions s'han de desenvolupar fent servir característiques d'una plataforma en concret fent la construcció de programari multiplataforma molt difícil i llarga. En el passat però ja s'han desenvolupat sol·lucions multiplataforma. Java, per exemple te la portabilitat com a principal característica. XUL és un altre llenguatge d'aques tipus que ha sigut dissenyat específicament per construir interfícies d'usuari portables. Cal molt de temps per construir una aplicació encara que sigui per una sola plataforma. El temps requerit per compilar i depurar pot ser molt llarga. Amb XUL, l'interfície pot ser implementada i modificada fàcilment i ràpidament.  </p>
<p>XUL te tots els avantatges dels llenguatges basats en XML. Per exemple XHTML o altres llenguatges XML com MathML o SVG es poden inserir al mig. També, el texte que s'utilitza amb XUL és fàcilment localitzable, que vol dir que es pot traduïr a altres idiomes amb poc esforç.</p>
<h3 name="What_kinds_of_user-interfaces_can_be_made_with_XUL.3F">What kinds of user-interfaces can be made with XUL?</h3>
<p>XUL provides the ability to create most elements found in modern graphical interfaces. Some elements that can be created are:</p>
<ul> <li>Input controls such as textboxes and checkboxes</li> <li>Toolbars with buttons or other content</li> <li>Menus on a menu bar or pop up menus</li> <li>Tabbed dialogs</li> <li>Trees for hierarchical or tabular information</li> <li>Keyboard shortcuts</li>
</ul>
<p>The displayed content can be created from the contents of a XUL file or with data from a datasource. In Mozilla, such datasources include a user's mailbox, their bookmarks and search results. The contents of menus, trees and other elements can be populated with this data, or with your own data supplied in an <abbr title="Resource Description Framework">RDF</abbr> file.</p>
<p>There are several ways you can use XUL:</p>
<ul> <li>Firefox extension -- an extension adds functionality to the browser itself, often in the form of extra toolbars, context menus, or customizations to the browser's user interface. This is done using a feature of XUL called an <strong>overlay</strong>, which allows the UI provided from one source, in this case, the Firefox browser, to be merged together with the UI from the extension. Extensions may also be applied to other Mozilla based products such as Thunderbird.</li> <li>Standalone XULRunner application -- XULRunner is a packaged version of the Mozilla platform which allows you to create standalone XUL applications. A browser isn't required to run these applications, as they have their own executable file.</li> <li>XUL package -- in between the other two are applications which are created in the same way as an extension, but they act like a separate application in a separate window. This is used when you don't want to have the larger size of a complete XULRunner application, but don't mind requiring a Mozilla browser to be installed to be able to run the application.</li> <li>Remote XUL application -- you can also just place XUL code on a web server and open it in a browser, as you would any other web page. This method is limited however, as there are security concerns that will limit the kinds of things you will be able to do, such as opening other windows.</li>
</ul>
<p>The first three types all require an installation to be performed on the user's machine. However, these types of applications do not have security restrictions placed on them, so they may access local files and read and write preferences, for example. For extensions, the XUL files and associated scripts and images used by an application would be packaged into a single file and downloaded and installed by the user. Mozilla applications such as Firefox provide an extension manager which allows packages to be installed without having to write a lot of complex code.</p>
<p>It is also possible to open XUL files directly from the file system or from a remote web site; however they will be restricted in the kinds of operations they can do, and some aspects of XUL will not work. However, if you do want to load XUL content from a remote site, the Web server must be set up to send XUL files with the content type "application/vnd.mozilla.xul+xml". XUL is usually stored in files with a <code>.xul</code> extension. You can open a XUL file with Mozilla as you would any other file, using the Open File command from the File menu or typing the URL into the address bar.</p>
<h3 name="What_do_I_need_to_know_to_use_this_tutorial.3F">What do I need to know to use this tutorial?</h3>
<p>You should have an understanding of <abbr title="HyperText Markup Language">HTML</abbr> and at least a basic understanding of XML and <abbr title="Cascading Style Sheets">CSS</abbr>. Here are some guidelines to keep in mind:</p>
<ul> <li>XUL elements and attributes should all be entered in lowercase as XML is case-sensitive (unlike HTML).</li> <li>Attribute values in XUL must be placed inside quotes, even if they are numbers.</li> <li>XUL files are usually split into four files, one each for the layout and elements, for style declarations, for entity declarations (used for localization) and for scripts. In addition, you may have extra files for images or for platform specific data.</li>
</ul>
<p>XUL is supported in Mozilla and browsers that are also based upon on the Gecko engine, such as Netscape 6 or later and Mozilla Firefox. Due to various changes in XUL syntax over time, you will want to get the latest version for the examples to work properly. Most examples should work in Mozilla 1.0 or later. XUL is fairly similar in Firefox and to other browsers, although it has some specific differences such as support for customizable toolbars.</p>
<p>This tutorial attempts to cover much of XUL's functionality, however, not all features are discussed. Once you are familiar with XUL, you can use the <a href="/en/XUL_Reference" title="en/XUL_Reference">XUL Reference</a> to find out about other features supported by specific elements.</p>
<p>{{ Next("XUL Tutorial:XUL Structure") }}</p>
<p>{{ languages( { "de": "de/XUL_Tutorial/Einfuehrung", "es": "es/Tutorial_de_XUL/Introducci\u00f3n", "fr": "fr/Tutoriel_XUL/Introduction", "ja": "ja/XUL_Tutorial/Introduction", "pl": "pl/Kurs_XUL/Wprowadzenie", "zh-cn": "cn/XUL_\u6559\u7a0b/\u5f15\u8a00", "ru": "ru/\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e_\u043f\u043e_XUL/\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435" } ) }}</p>
Revert to this revision