Primeros pasos con XULRunner

  • Enlace amigable (slug) de la revisión: Primeros_pasos_con_XULRunner
  • Título de la revisión: Primeros pasos con XULRunner
  • Id de la revisión: 443741
  • Creada:
  • Creador: nekside
  • ¿Es la revisión actual?
  • Comentario

Contenido de la revisión

{{ Siguiente("Windows and menus in XULRunner") }}

Este artículo explora la plataforma Mozilla mediante la construcción de una aplicación de escritorio básico utilizando XULRunner. Dado que Firefox, Thunderbird y otras múltiples aplicaciones se escriben utilizando la plataforma, es una apuesta segura que se puede utilizar para crear una aplicación básica. Hay un artículo con un enfoque más complicado de construir aplicaciones XULRunner en Creación de aplicaciones XULRunner con el Sistema de Mozilla Build. Si necesita cambiar la propia XULRunner o integrarlo con código binario externo puede que tenga que leer este artículo.

Paso 1: Descargar XULRunner

Usted puede encontrar un enlace de descarga en la página principal XULRunner aquí en MDC. Dado que no estamos creando ningún componente XPCOM binarios, sólo tenemos que descargar e instalar el paquete de tiempo de ejecución XULRunner, no el SDK.

La descarga de XULRunner para Windows es un archivo .zip, no un archivo ejecutable. Como desarrollador, me gusta la idea de que XULRunner sólo necesita ser descomprimido en mi máquina. Supongo que no es necesario conectar a mi sistema de Windows y eso es una buena cosa. También significa que el XULRunner es portátil, así que si usted desarrolla sus aplicaciones para ser portátil se puede llevar a todas partes en una unidad flash o sincronizarlos en la nube.

La versión para Mac de XULRunner se distribuye como un archivo tar.bz2. Puede extraer este a cualquier lugar que quieras, pero hay muchos lugares en la documentación que se supone que tiene esta instalado en /Library/Frameworks.

En el escritorio de Ubuntu y sus derivados (Xubuntu, Kubuntu, ...), a partir de la versión 11.10 (Ocelot onírico), XULRunner no está más cuidada y no existe en el repositorio de Ubuntu. Por lo tanto, ya sea que usted necesita para compilar XULRunner manual o descargar una versión binaria del servidor FTP de Mozilla. Una forma de archieve esto es ejecutar la siguiente secuencia de comandos cada vez que se desea instalar una nueva versión:

FIREFOX_VERSION=`grep -Po  "\d{2}\.\d+" /usr/lib/firefox/platform.ini`
ARCH=`uname -p`
XURL=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$FIREFOX_VERSION/runtimes/xulrunner-$FIREFOX_VERSION.en-US.linux-$ARCH.tar.bz2
cd /opt
sudo sh -c "wget -O- $XURL | tar -xj"
sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner
sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell

You could also save this script to a file for convenience.  Note: If you are using Firefox build from Ubuntuzilla repository, replace /usr/lib/firefox/platform.ini with /opt/firefox/platform.ini.

Step 2: Install XULRunner

On Windows, unzip the archive someplace reasonable. I unzipped it to a new C:\program files\xulrunner folder.

On the Mac, extract the tar.bz2 archive, which contains XULRunner as XUL.Framework.  Copy this to the /Library/Frameworks directory, or another location of your choice.

On Linux, you only need to unpack the archive if you are using a pre-release XULRunner.

Optionally, if you've downloaded the compressed archive of XULRunner and would like to install it on your system you can do so by running

xulrunner --register-global

as an administrator to register XULRunner for all users on the machine. To register XULRunner for a single user run

xulrunner --register-user

XULRunner will work whether you install it or not. This is purely for convenience.

In all systems you should unzip the omni.ja file into some example directory and take a look at all the awesome! First change the file extension to zip and then use your normal filesystem's decompression tool to open it up. The contents of omni.ja are available to XULRunner applications and are what make it possible to build amazing applications easily!

Step 3: Create the application folder structure

Time to start a simple, bare bones application shell. Call it a XUL “Hello World” if you want. All of what you see below can be found in the XULRunner documentation here on MDC in much more detail.

Hint: Skip ahead and download the sample application, you can experiment with it while following this tutorial. You can download the sample application from https://github.com/matthewkastor/XULRunner-Examples. Please continue reading to learn the "what", "why" and "how" parts of building a XULRunner application.

On Windows, I created the root in a new c:\program files\myapp folder, but you can create it wherever you like, using whatever OS you like. The same application structure is used on Windows, Mac and Linux. Here is the subfolder structure:

+ myapp/
|
+-+ chrome/
| |
| +-+ content/
| | |
| | +-- main.xul
| | |
| | +-- main.js
| |
| +-- chrome.manifest
|
+-+ defaults/
| |
| +-+ preferences/
|   |
|   +-- prefs.js
|
+-- application.ini
|
+-- chrome.manifest 

Notice that there are 5 files in the folder structure: application.ini, chrome.manifest (2), prefs.js, and main.xul. The /chrome/chrome.manifest file is optional, but might be useful for backward compatibility. See the note below.

For more details on the structure of installable bundles in general see: Structure of an installable bundle.

Note: In XULRunner 2.0, the chrome.manifest is now used to register XPCOM components in addition to its previous uses. Part of this change means the /chrome/chrome.manifest is no longer considered the "root" manifest. XULRunner will not check that folder location for a root-level chrome.manifest. You need to move your existing chrome.manifest to the application root folder, remembering to update the relative paths within the file. You could also just create a new application root-level manifest that includes the /chrome/chrome.manifest, which is what this tutorial will do.

Step 4: Set up application.ini

The application.ini file acts as the XULRunner entry point for your application. It specifies how your application intends to use the XULRunner platform as well as configure some information that XULRunner uses to run your application. Here is mine:

[App]
Vendor=XULTest
Name=myapp
Version=1.0
BuildID=20100901
ID=xulapp@xultest.org

[Gecko]
MinVersion=1.8
MaxVersion=200.*
Note: The MinVersion and MaxVersion fields indicate the range of Gecko versions your application is compatible with; make sure that you set them so that the version of XULRunner you're using is in that range, or your application won't work.
Note: Make sure your application name is lowercase and longer than 3 characters

Step 5: Set up the chrome manifest

The chrome manifest file is used by XULRunner to define specific URIs which in turn are used to locate application resources. This will become clearer when we see how the “chrome://” URI is used. Application chrome can be in a single or a few JAR files or uncompressed as folders and files. I am using the uncompressed method for now. Here is the chrome/chrome.manifest:

 content myapp content/

As mentioned in Step 3, the default location of the chrome.manifest has changed in XULRunner 2.0, so we also need a simple chrome.manifest in the application root which will include the the manifest in our chrome root. Here is the application root chrome.manifest:

manifest chrome/chrome.manifest

Step 6: Set up preferences

The prefs.js file tells XULRunner the name of the XUL file to use as the main window. Here is mine:

pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");

/* debugging prefs, disable these before you deploy your application! */
pref("browser.dom.window.dump.enabled", true);
pref("javascript.options.showInConsole", true);
pref("javascript.options.strict", true);
pref("nglayout.debug.disable_xul_cache", true);
pref("nglayout.debug.disable_xul_fastload", true);

XULRunner specific preferences include:

toolkit.defaultChromeURI
Specifies the default window to open when the application is launched.
toolkit.defaultChromeFeatures
Specifies the features passed to window.open() when the main application window is opened.
toolkit.singletonWindowType
Allows configuring the application to allow only one instance at a time.

The toolkit preferences are described in further detail in XULRunner:Specifying Startup Chrome Window.

The debugging preferences are discussed in Debugging a XULRunner Application

Step 7: Create some XUL

Finally, we need to create a simple XUL window, which is described in the file main.xul. Nothing fancy here, just the minimum we need to make a window. No menus or anything.

main.xul:

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <script type="application/javascript" src="chrome://myapp/content/main.js"/>

  <caption label="Hello World"/>
  <separator/>
  <button label="More >>" oncommand="showMore();"/>
  <separator/>
  <description id="more-text" hidden="true">This is a simple XULRunner application. XUL is simple to use and quite powerful and can even be used on mobile devices.</description>

</window>
Note: Make sure there is no extra whitespace at the beginning of the XML/XUL file

The application also has a JavaScript file. Most XUL applications will include some external JavaScript, so the sample application does too, just to show how to include it into the XUL file.

main.js:

function showMore() {
  document.getElementById("more-text").hidden = false;
}

For more information about XUL see: XUL.

For information about mixing HTML elements into your XUL read Adding HTML Elements.

Step 8: Run the application

The moment of truth. We need to get XULRunner to launch the bare-bones application.

Windows

From a Windows command prompt opened to the myapp folder, we should be able to execute this:

 C:\path\to\xulrunner.exe application.ini

Of course, if you opted to install xulrunner then you could simply do

%ProgramFiles%\xulrunner.exe application.ini

or on 64 bit systems

%ProgramFiles(x86)%\xulrunner.exe application.ini

Note: you can also install your application when you're finished debugging it. See XUL Application Packaging for details.

Mac

On the Mac, before you can run a XULRunner application with everything intact, you must install it using the --install-app xulrunner commandline flag. Installing the application creates an OS X application bundle:

 /Library/Frameworks/XUL.framework/xulrunner-bin --install-app /<path>/<to>/myapp.zip

Once installed, you can run the application:

 /Library/Frameworks/XUL.framework/xulrunner-bin "/Applications/Finkle/TestApp.app/Contents/Resources/application.ini"

You may run it without installing (but with the menu bar and dock icon missing) in OS X by typing:

/Library/Frameworks/XUL.framework/xulrunner-bin "/<full path>/TestApp/application.ini"

Note: The full path is required or a "Error: couldn't parse application.ini."-message will be returned.

This might also be simplified using a very simple shell script (i call mine "run.sh"):

#!/bin/sh
/Library/Frameworks/XUL.framework/xulrunner-bin `pwd`/application.ini 

Linux

On Ubuntu, you can run the application from a terminal. First change into the \myapp folder, then start the application by:

 xulrunner application.ini

You should now see a window that looks something like this. This particular screenshot is from Ubuntu 10.

myapp-screenshot.png

Alternative: Run XUL apps with Firefox

With Firefox 3 and later, you can tell the Firefox executable to run a XUL application from the command line. The XUL application will run instead of the Firefox browser that normally starts. This is similar to starting a XUL app using XULRunner. See Using Firefox to run XULRunner applications. This does not work if Firefox itself was installed as a XUL app - you need to use the installed XULRunner directly.

Further Reading:

There are many things you can do with XULRunner. Before you get too far into things you might want to read the XULRunner tips article. Also, throughout this tutorial you've been introduced to various bits of the Toolkit API and it may help you to get familiar with it. Once you've got an application that's ready for the world you'll love our article titled Deploying XULRunner.

For now, click the "next" link to learn about windows and menus in XULRunner!

{{ Next("Windows and menus in XULRunner") }}

Original Document Information

  • Author: Mark Finkle, October 2, 2006

{{ languages( { "ja": "ja/Getting_started_with_XULRunner", "ko": "ko/Getting_started_with_XULRunner" } ) }}

Fuente de la revisión

<p>{{ Siguiente("Windows and menus in XULRunner") }}</p>
<p><span id="result_box" lang="es"><span class="hps">Este artículo explora</span> <a href="https://developer.mozilla.org/es/docs/La_plataforma_Mozilla" title="https://developer.mozilla.org/en-US/docs/The_Mozilla_platform"><span class="hps">la plataforma</span> <span class="hps">Mozilla</span></a> <span class="hps">mediante la construcción de</span> <span class="hps">una aplicación de escritorio</span> <span class="hps">básico utilizando</span> <a href="https://developer.mozilla.org/es/docs/XULRunner" title="https://developer.mozilla.org/es/docs/XULRunner"><span class="hps">XULRunner</span></a><span>.</span> <span class="hps">Dado que</span> <span class="hps">Firefox</span><span>, Thunderbird</span> <span class="hps">y</span> <span class="hps">otras múltiples</span> <span class="hps">aplicaciones</span> <span class="hps">se escriben utilizando</span> <span class="hps">la plataforma</span><span>, es</span> <span class="hps">una apuesta segura que</span> <span class="hps">se puede utilizar</span> <span class="hps">para crear una aplicación</span> <span class="hps">básica.</span> <span class="hps">Hay un artículo</span> <span class="hps">con un</span> <span class="hps">enfoque más</span> <span class="hps">complicado de</span> <span class="hps">construir aplicaciones</span> <span class="hps">XULRunner</span> <span class="hps">en</span> <a href="https://developer.mozilla.org/en-US/docs/Creating_XULRunner_Apps_with_the_Mozilla_Build_System" title="https://developer.mozilla.org/en-US/docs/Creating_XULRunner_Apps_with_the_Mozilla_Build_System"><span class="hps">Creación de</span> <span class="hps">aplicaciones</span> <span class="hps">XULRunner</span> <span class="hps">con el Sistema de</span> <span class="hps">Mozilla</span> <span class="hps">Build</span></a><span>.</span> <span class="hps">Si</span> <span class="hps">necesita cambiar</span> <span class="hps">la propia</span> <span class="hps">XULRunner</span> <span class="hps">o</span> <span class="hps">integrarlo con</span> <span class="hps">código binario externo</span> <span class="hps">puede que tenga que</span> <span class="hps">leer</span> <span class="hps">este artículo.</span></span></p>
<h2 id="Step_1:_Download_XULRunner" name="Step_1:_Download_XULRunner">Paso 1: Descargar XULRunner</h2>
<p><span id="result_box" lang="es"><span class="hps">Usted puede encontrar</span> <span class="hps">un enlace de descarga</span> <span class="hps">en la página principal</span> <a href="https://developer.mozilla.org/es/docs/XULRunner" title="https://developer.mozilla.org/es/docs/XULRunner"><span class="hps">XULRunner</span></a> <span class="hps">aquí en</span> <span class="hps">MDC</span><span>.</span> <span class="hps">Dado que</span> <span class="hps">no estamos creando</span> <span class="hps">ningún componente</span> <span class="hps">XPCOM</span> <span class="hps">binarios</span><span>,</span> <span class="hps">sólo tenemos que</span> <span class="hps">descargar e instalar el</span> <span class="hps">paquete de</span> <span class="hps">tiempo de ejecución</span> <span class="hps">XULRunner</span><span>, no el</span> <span class="hps"><a href="https://developer.mozilla.org/es/docs/Gecko_SDK" title="https://developer.mozilla.org/es/docs/Gecko_SDK">SDK</a>.</span></span></p>
<p><span id="result_box" lang="es"><span class="hps">La descarga</span> de <span class="hps">XULRunner</span> <span class="hps">para Windows es</span> <span class="hps">un archivo</span> <em><span class="hps">.zip</span></em><span>, no un</span> <span class="hps">archivo ejecutable</span><span class="hps">.</span> <span class="hps">Como desarrollador</span><span>, me gusta</span> <span class="hps">la idea de que</span> <span class="hps">XULRunner</span> <span class="hps">sólo necesita ser</span> <span class="hps">descomprimido</span> <span class="hps">en mi</span> <span class="hps">máquina.</span> <span class="hps">Supongo que</span> <span class="hps">no es necesario</span> <span class="hps">conectar</span> <span class="hps">a mi</span> <span class="hps">sistema de Windows</span> <span class="hps">y eso es una</span> <span class="hps">buena cosa.</span> <span class="hps">También significa</span> <span class="hps">que el</span> <span class="hps">XULRunner</span> <span class="hps">es portátil</span><span>, así que si</span> <span class="hps">usted desarrolla</span> <span class="hps">sus aplicaciones</span> <span class="hps">para ser portátil</span> <span class="hps">se puede</span> <span class="hps">llevar a todas partes</span> <span class="hps">en una unidad</span> <span class="hps">flash o</span> <span class="hps">sincronizarlos</span> <span class="hps">en la nube.</span></span></p>
<p><span id="result_box" lang="es"><span class="hps">La</span> <span class="hps">versión para Mac de</span> <span class="hps">XULRunner</span> <span class="hps">se distribuye</span> <span class="hps">como un archivo</span> <em><span class="hps">tar.bz2</span></em><span>.</span> <span class="hps">Puede</span> <span class="hps">extraer</span> <span class="hps">este</span> <span class="hps">a cualquier lugar</span> <span class="hps">que quieras,</span> <span class="hps">pero hay</span> <span class="hps">muchos lugares en</span> <span class="hps">la documentación</span> <span class="hps">que</span> <span class="hps">se supone que tiene</span> <span class="hps">esta</span> <span class="hps">instalado en</span></span> <code>/Library/Frameworks</code>.</p>
<p><span id="result_box" lang="es"><span class="hps">En el</span> <span class="hps">escritorio de Ubuntu</span> <span class="hps atn">y sus derivados (</span><span>Xubuntu</span><span>,</span> <span class="hps">Kubuntu</span><span>, ...)</span><span>, a partir de</span> <span class="hps">la versión</span> <span class="hps atn">11.10 (</span><span>Ocelot</span> <span class="hps">onírico</span><span>)</span><span>,</span> <span class="hps">XULRunner</span> <span class="hps">no está</span> <span class="hps">más</span> <span class="hps">cuidada y</span> <span class="hps">no existe en el</span> <span class="hps">repositorio de</span> <span class="hps">Ubuntu.</span> <span class="hps">Por lo tanto</span><span>, ya sea</span> <span class="hps">que usted necesita</span> <span class="hps">para compilar</span> <span class="hps">XULRunner</span> <span class="hps">manual o</span> <span class="hps">descargar una versión</span> <span class="hps">binaria</span> <span class="hps">del</span> <span class="hps">servidor</span> <span class="hps">FTP</span> <span class="hps">de Mozilla.</span> <span class="hps">Una forma de</span> <span class="hps">archieve</span> <span class="hps">esto es ejecutar</span> <span class="hps">la siguiente</span> <span class="hps">secuencia de comandos</span> <span class="hps">cada vez que</span> <span class="hps">se desea instalar</span> <span class="hps">una nueva versión</span><span>:</span></span></p>
<div class="note">
  <code>FIREFOX_VERSION=`grep -Po&nbsp; "\d{2}\.\d+" /usr/lib/firefox/platform.ini`<br />
  ARCH=`uname -p`<br />
  XURL=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$FIREFOX_VERSION/runtimes/xulrunner-$FIREFOX_VERSION.en-US.linux-$ARCH.tar.bz2<br />
  cd /opt<br />
  sudo sh -c "wget -O- $XURL | tar -xj"<br />
  sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner<br />
  sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell </code></div>
<p>You could also save this script to a file for convenience.&nbsp; Note: If you are using Firefox build from Ubuntuzilla repository, replace <code>/usr/lib/firefox/platform.ini</code> with <code>/opt/firefox/platform.ini</code>.</p>
<h2 id="Step_2:__Install_XULRunner" name="Step_2:__Install_XULRunner">Step 2: Install XULRunner</h2>
<p>On Windows, unzip the archive someplace reasonable. I unzipped it to a new <code>C:\program files\xulrunner</code> folder.</p>
<p>On the Mac, extract the tar.bz2 archive, which contains XULRunner as <code>XUL.Framework.</code>&nbsp; Copy this to the <code>/Library/Frameworks</code> directory, or another location of your choice.</p>
<p>On Linux, you only need to unpack the archive if you are using a pre-release XULRunner.</p>
<div class="note">
  <p>Optionally, if you've downloaded the compressed archive of XULRunner and would like to install it on your system you can do so by running</p>
  <p><code>xulrunner --register-global</code></p>
  <p>as an administrator to register XULRunner for all users on the machine. To register XULRunner for a single user run</p>
  <p><code>xulrunner --register-user</code></p>
  <p><code>XULRunner will work whether you install it or not. This is purely for convenience.</code></p>
</div>
<div class="note">
  <p><span style="color: rgb(93, 86, 54); line-height: 1.5em; font-size: 14px;">In all systems you should unzip the </span><a href="/en-US/docs/Mozilla/About_omni.ja_(formerly_omni.jar)" style="line-height: 1.5em; font-size: 14px;" title="/en-US/docs/Mozilla/About_omni.ja_(formerly_omni.jar)">omni.ja</a><span style="color: rgb(93, 86, 54); line-height: 1.5em; font-size: 14px;">&nbsp;file into some example directory and take a look at all the awesome! First change the file extension to zip and then use your normal filesystem's decompression tool to open it up. The contents of omni.ja are available to XULRunner applications and are what make it possible to build amazing applications easily!</span></p>
</div>
<h2 id="Step_3:_Create_the_application_folder_structure" name="Step_3:_Create_the_application_folder_structure">Step 3: Create the application folder structure</h2>
<p>Time to start a simple, bare bones application shell. Call it a XUL “Hello World” if you want. All of what you see below can be found in the <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> documentation here on MDC in much more detail.</p>
<div class="note">
  <p><strong>Hint:</strong> Skip ahead and download the sample application, you can experiment with it while following this tutorial. You can download the sample application from <a href="https://github.com/matthewkastor/XULRunner-Examples" title="https://github.com/matthewkastor/XULRunner-Examples">https://github.com/matthewkastor/XULRunner-Examples</a>. Please continue reading to learn the "what", "why" and "how" parts of building a XULRunner application.</p>
</div>
<p>On Windows, I created the root in a new <code>c:\program files\myapp</code> folder, but you can create it wherever you like, using whatever OS you like. The same application structure is used on Windows, Mac and Linux. Here is the subfolder structure:</p>
<pre>
+ myapp/
|
+-+ chrome/
| |
| +-+ content/
| | |
| | +-- main.xul
| | |
| | +-- main.js
| |
| +-- chrome.manifest
|
+-+ defaults/
| |
| +-+ preferences/
|   |
|   +-- prefs.js
|
+-- application.ini
|
+-- chrome.manifest 
</pre>
<p>Notice that there are 5 files in the folder structure: <code>application.ini</code>, <code>chrome.manifest (2)</code>, <code>prefs.js</code>, and <code>main.xul</code>. The <code>/chrome/chrome.manifest</code> file is optional, but might be useful for backward compatibility. See the note below.</p>
<div class="note">
  <p>For more details on the structure of installable bundles in general see: <a href="/en-US/docs/Bundles" title="/en-US/docs/Bundles">Structure of an installable bundle</a>.</p>
</div>
<div class="note">
  <strong>Note:</strong> In XULRunner 2.0, the chrome.manifest is now used to register XPCOM components in addition to its previous uses. Part of this change means the <code>/chrome/chrome.manifest</code> is no longer considered the "root" manifest. XULRunner will not check that folder location for a root-level <code>chrome.manifest</code>. You need to move your existing chrome.manifest to the application root folder, remembering to update the relative paths within the file. You could also just create a new application root-level manifest that includes the <code>/chrome/chrome.manifest</code>, which is what this tutorial will do.</div>
<h2 id="Step_4:_Set_up_application.ini" name="Step_4:_Set_up_application.ini">Step 4: <code>Set up application.ini</code></h2>
<p>The<code> <a href="/en-US/docs/XUL_Application_Packaging" title="/en-US/docs/XUL_Application_Packaging">application.ini</a> </code>file acts as the XULRunner entry point for your application. It specifies how your application intends to use the XULRunner platform as well as configure some information that XULRunner uses to run your application. Here is mine:</p>
<pre>
[App]
Vendor=XULTest
Name=myapp
Version=1.0
BuildID=20100901
ID=xulapp@xultest.org

[Gecko]
MinVersion=1.8
MaxVersion=200.*
</pre>
<div class="note">
  <strong>Note:</strong> The <code>MinVersion</code> and <code>MaxVersion</code> fields indicate the range of Gecko versions your application is compatible with; make sure that you set them so that the version of XULRunner you're using is in that range, or your application won't work.</div>
<div class="note">
  <strong>Note</strong>: Make sure your application name is lowercase and longer than 3 characters</div>
<h2 id="Step_5:_Set_up_the_chrome_manifest" name="Step_5:_Set_up_the_chrome_manifest">Step 5: Set up the chrome manifest</h2>
<p>The <a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">chrome manifest</a> file is used by XULRunner to define specific URIs which in turn are used to locate application resources. This will become clearer when we see how the “chrome://” URI is used. Application chrome can be in a single or a few JAR files or uncompressed as folders and files. I am using the uncompressed method for now. Here is the <code>chrome/chrome.manifest</code>:</p>
<pre class="eval">
 content myapp content/
</pre>
<p>As mentioned in Step 3, the default location of the <code>chrome.manifest</code> has changed in XULRunner 2.0, so we also need a simple <code>chrome.manifest</code> in the <strong>application</strong> root which will include the the manifest in our <strong>chrome</strong> root. Here is the application root <code>chrome.manifest</code>:</p>
<pre>
manifest chrome/chrome.manifest</pre>
<h2 id="Step_6:_Set_up_preferences" name="Step_6:_Set_up_preferences">Step 6: Set up preferences</h2>
<p>The <a href="/en-US/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences" title="/en-US/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences">prefs.js</a> file tells XULRunner the name of the XUL file to use as the main window. Here is mine:</p>
<pre class="eval">
pref("toolkit.defaultChromeURI", "<span class="external">chrome://myapp/content/main.xul</span>");

/* debugging prefs, disable these before you deploy your application! */
pref("browser.dom.window.dump.enabled", true);
pref("javascript.options.showInConsole", true);
pref("javascript.options.strict", true);
pref("nglayout.debug.disable_xul_cache", true);
pref("nglayout.debug.disable_xul_fastload", true);
</pre>
<p>XULRunner specific preferences include:</p>
<dl>
  <dt>
    <code><a href="/en-US/docs/toolkit.defaultChromeURI" title="/en-US/docs/toolkit.defaultChromeURI">toolkit.defaultChromeURI</a></code></dt>
  <dd>
    Specifies the default window to open when the application is launched.</dd>
  <dt>
    <code><a href="/en-US/docs/toolkit.defaultChromeFeatures" title="/en-US/docs/toolkit.defaultChromeFeatures">toolkit.defaultChromeFeatures</a></code></dt>
  <dd>
    Specifies the features passed to <code><a href="/en-US/docs/DOM:window.open" title="/en-US/docs/DOM:window.open">window.open()</a></code> when the main application window is opened.</dd>
  <dt>
    <code><a href="/en-US/docs/toolkit.singletonWindowType" title="/en-US/docs/toolkit.singletonWindowType">toolkit.singletonWindowType</a></code></dt>
  <dd>
    Allows configuring the application to allow only one instance at a time.</dd>
</dl>
<div class="note">
  <p>The toolkit preferences are described in further detail in <a href="/en-US/docs/XULRunner/Specifying_Startup_Chrome_Window" title="/en-US/docs/XULRunner/Specifying_Startup_Chrome_Window">XULRunner:Specifying Startup Chrome Window</a>.</p>
  <p>The debugging preferences are discussed in&nbsp;<a href="/en-US/docs/Debugging_a_XULRunner_Application" title="/en-US/docs/Debugging_a_XULRunner_Application">Debugging a XULRunner Application</a></p>
</div>
<h2 id="Step_7:_Create_some_XUL" name="Step_7:_Create_some_XUL">Step 7: Create some XUL</h2>
<p>Finally, we need to create a simple <a href="/en-US/docs/XUL/window" title="/en-US/docs/XUL/window">XUL window</a>, which is described in the file <code>main.xul</code>. Nothing fancy here, just the minimum we need to make a window. No menus or anything.</p>
<p>main.xul:</p>
<pre>
&lt;?xml version="1.0"?&gt;

&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;

&lt;window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;

  &lt;script type="application/javascript" src="chrome://myapp/content/main.js"/&gt;

  &lt;caption label="Hello World"/&gt;
  &lt;separator/&gt;
  &lt;button label="More &gt;&gt;" oncommand="showMore();"/&gt;
  &lt;separator/&gt;
  &lt;description id="more-text" hidden="true"&gt;This is a simple XULRunner application. XUL is simple to use and quite powerful and can even be used on mobile devices.&lt;/description&gt;

&lt;/window&gt;
</pre>
<div class="note">
  <strong>Note:</strong> Make sure there is no extra whitespace at the beginning of the XML/XUL file</div>
<p>The application also has a JavaScript file. Most XUL applications will include some external JavaScript, so the sample application does too, just to show how to include it into the XUL file.</p>
<p>main.js:</p>
<pre>
function showMore() {
  document.getElementById("more-text").hidden = false;
}
</pre>
<div class="note">
  <p>For more information about XUL see: <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>.</p>
  <p>For information about mixing HTML elements into your XUL read <a href="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements" title="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements">Adding HTML Elements</a>.</p>
</div>
<h2 id="Step_8:_Run_the_application" name="Step_8:_Run_the_application">Step 8: Run the application</h2>
<p>The moment of truth. We need to get XULRunner to launch the bare-bones application.</p>
<h3 id="Windows">Windows</h3>
<p>From a Windows command prompt opened to the <code>myapp</code> folder, we should be able to execute this:</p>
<pre class="eval">
 C:\path\to\xulrunner.exe application.ini
</pre>
<p>Of course, if you opted to install xulrunner then you could simply do</p>
<pre>
​<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">%ProgramFiles%\xulrunner.exe application.ini</span></pre>
<p><span style="font-size: 14px; line-height: 1.572;">or on 64 bit systems</span></p>
<pre>
​<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">%ProgramFiles(x86)%\xulrunner.exe application.ini</span></pre>
<div class="note">
  <p><span style="font-size: 14px; line-height: 1.572;"><strong>Note</strong>: you can also install your application when you're finished debugging it. See <a href="/en-US/docs/XUL_Application_Packaging" title="/en-US/docs/XUL_Application_Packaging">XUL Application Packaging</a>&nbsp;for details.</span></p>
</div>
<h3 id="Mac">Mac</h3>
<p>On the Mac, before you can run a XULRunner application with everything intact, you must install it using the <code>--install-app</code> xulrunner commandline flag. Installing the application creates an OS X application bundle:</p>
<pre class="eval">
 /Library/Frameworks/XUL.framework/xulrunner-bin --install-app /&lt;path&gt;/&lt;to&gt;/myapp.zip
</pre>
<p>Once installed, you can run the application:</p>
<pre class="eval">
 /Library/Frameworks/XUL.framework/xulrunner-bin "/Applications/Finkle/TestApp.app/Contents/Resources/application.ini"
</pre>
<p>You may run it without installing (but with the menu bar and dock icon missing) in OS X by typing:</p>
<pre>
/Library/Frameworks/XUL.framework/xulrunner-bin "/&lt;full path&gt;/TestApp/application.ini"
</pre>
<div class="note">
  <p>Note: The full path is required or a "Error: couldn't parse application.ini."-message will be returned.</p>
</div>
<p>This might also be simplified using a very simple shell script (i call mine "run.sh"):</p>
<pre>
#!/bin/sh
/Library/Frameworks/XUL.framework/xulrunner-bin `pwd`/application.ini 
</pre>
<h3 id="Linux">Linux</h3>
<p>On Ubuntu, you can run the application from a terminal. First change into the <code>\myapp</code> folder, then start the application by:</p>
<pre class="eval">
 xulrunner application.ini
</pre>
<p>You should now see a window that looks something like this. This particular screenshot is from Ubuntu 10.</p>
<p><img alt="myapp-screenshot.png" class="internal default" src="/@api/deki/files/4679/=myapp-screenshot.png" /></p>
<h3 id="Alternative:_Use_Firefox3_-app_to_run_XUL_apps" name="Alternative:_Use_Firefox3_-app_to_run_XUL_apps">Alternative: Run XUL apps with Firefox</h3>
<p>With Firefox 3 and later, you can tell the Firefox executable to run a XUL application from the command line. The XUL application will run instead of the Firefox browser that normally starts. This is similar to starting a XUL app using XULRunner. See <a href="/en/XULRunner_tips#Using_Firefox_to_run_XULRunner_applications" title="en/XULRunner_tips#Using_Firefox_to_run_XULRunner_applications">Using Firefox to run XULRunner applications</a>. This does not work if Firefox itself was installed as a XUL app - you need to use the installed XULRunner directly.</p>
<h2 id="Further_Reading.3A">Further Reading:</h2>
<p>There are many things you can do with XULRunner. Before you get too far into things you might want to read the <a href="/en-US/docs/XULRunner_tips" title="/en-US/docs/XULRunner_tips">XULRunner tips</a> article. Also, throughout this tutorial you've been introduced to various bits of the <a href="/en-US/docs/Toolkit_API" title="/en-US/docs/Toolkit_API">Toolkit API</a> and it may help you to get familiar with it. Once you've got an application that's ready for the world you'll love our article titled&nbsp;<a href="/en-US/docs/XULRunner/Deploying_XULRunner_1.8" title="/en-US/docs/XULRunner/Deploying_XULRunner_1.8">Deploying XULRunner</a>.</p>
<p>For now, click the "next" link to learn about windows and menus in XULRunner!</p>
<p>{{ Next("Windows and menus in XULRunner") }}</p>
<div class="originaldocinfo">
  <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
  <ul>
    <li>Author: Mark Finkle, October 2, 2006</li>
  </ul>
</div>
<p>{{ languages( { "ja": "ja/Getting_started_with_XULRunner", "ko": "ko/Getting_started_with_XULRunner" } ) }}</p>
Revertir a esta revisión