It is also possible to use a install script written in JavaScript to install files. This allows you to copy files to any location and perform other file management tasks. However, applications installed with a script will not be listed in the extension manager and there is no automated method to uninstall them. For this reason, the install scripts are not used often.
For standalone applications, they can be packaged up using XULRunner. This allows a separate executable file, and the application may be distributed independently of a browser.
For more information about creating extensions, see http://developer.mozilla.org/en/docs/Extensions. For more information about XULRunner, see http://developer.mozilla.org/en/docs/XULRunner
Older Applications
If you are creating applications for older versions of Mozilla software, that is, before Firefox 1.5 or Mozilla 1.8, the process is a bit more involved. The following describes how to set up a package for earlier versions. This section may be skipped if you are writing new extensions or XUL applications.
Create a directory somewhere on your disk. Many people put this as a subdirectory inside Mozilla's chrome directory, but this isn't necessary. The directory could be anywhere and on any disk. Put your XUL files in this directory.
Create a file called contents.rdf and place it in this directory. Copy the text in the box below into the new contents.rdf file. This file is used to identify the application id, its name, author, version and so on.
<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
<RDF:Seq about="urn:mozilla:package:root">
<RDF:li resource="urn:mozilla:package:myapplication"/>
</RDF:Seq>
<RDF:Description about="urn:mozilla:package:myapplication"
chrome:displayName="Application Title"
chrome:author="Author Name"
chrome:name="myapplication"
chrome:extension="true"/>
</RDF:RDF>
Change the highlighted parts of the file above to your own information. The red text 'myapplication' should be the ID of your application. You make this up, but typically, the ID is similar to your application's name. Replace the blue highlighted text above with your application's title and author.
If the 'chrome:extension' field is true, the application is a Mozilla Firefox Extension and it will show up in the Extensions window of the browser. If false, it will not appear.
Save the contents.rdf and make sure it is in the directory you created in step 1.
Open the file <mozilla-directory>/chrome/installed-chrome.txt, where <mozilla-directory> is the directory where Mozilla is installed. Exit Mozilla before you do this.
Next, you are going to register the new application with Mozilla so it will know where to find it. Add a line at the end of installed-chrome.txt pointing to the new directory you created in step 1.
content,install,url,file:///main/app/
Change the highlighted text to the file URL of the directory. Make sure that it URL ends with a slash and that you press enter at the end of the line. If you aren't sure what the URL is, open the directory created in step 1 into a Mozilla browser and copy the URL from the location field. Note that the reference should always be a directory, not a file.
Delete the file <mozilla-directory>/chrome/chrome.rdf.
Start Mozilla. You should be able to view any XUL files you put into the directory using a URL of the form: chrome://applicationid/content/file.xul where file.xul is the filename. Your main XUL file should be applicationid.xul which you can load using the shortcut URL chrome://applicationid/content/.
If you are creating skin and/or locale portions, repeat the steps above, except that the format of the contents.rdf file is slightly different. Look at the contents.rdf files in other applications for details.
Creating a chrome package can often be tricky and it is difficult to diagnose problems. Here are a few tips in case you get stuck.
Open the file <mozilla-directory>/chrome/chrome.rdf. You should find references to your application ID in there. If not, something is wrong with registration. If it is there, you are probably using the wrong chrome URL when you load the file.
Try deleting the <mozilla-directory>/chrome/chrome.rdf file. It will get regenerated. Also delete the entire <mozilla-directory>/chrome/overlayinfo/ directory if you are using overlays.
Make sure that the URL in the line you added to installed-chrome.txt ends with a slash and the file itself ends with a blank line.
On Windows, file URLs are of the form file:///C|/files/app/, where C is the drive letter.
Make sure the contents.rdf file is in the right directory and is well-formed. Open the contents.rdf file in Mozilla to see if it parses as well-formed XML. If not, you will see an error on a yellow background.
If you are using a debug build of Mozilla, some info will be printed to the terminal when starting up indicating what chrome applications are being checked. Check if your application is listed.
2. Simple Elements
Creating a Window
We're going to be creating a simple find files utility throughout this tutorial. First, however, we should look at the basic syntax of a XUL file.
Creating a XUL File
A XUL file can be given any name but it really should have a .xul extension. The simplest XUL file has the following structure:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="findfile-window"
title="Find Files"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
...
</window>
This window will not do anything since it doesn't contain any UI elements. Those will be added in the next section. Here is a line by line breakdown of the code above:
<?xml version="1.0"?>
This line simply declares that this is an XML file. You would normally add this line as is at the top of each xul file, much like one would put the HTML tag at the top of an HTML file.
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
This line is used to specify the style sheets to use for the file. This is the syntax that XML files use to import style sheets. In this case, we import the styles found in the global/skin chrome directory. We didn't specify a specific file so Mozilla will determine which files in the directory to use. In the case, the all-important global.css file is selected. This file contains all the default declarations for all of the XUL elements. Because XML does not have any knowledge of how elements should be displayed, the file indicates how. Generally, you will put this line at the top of every XUL file. You can also import other style sheets using a similar syntax. Note that you would normally import the global style sheet from within your own style sheet file.
<window
This line declares that you are describing a window. Each user interface window is described in a separate file. This tag is much like the BODY tag in HTML which surrounds the entire content. Several attributes can be placed in the window tag -- in this case there are four. In the example, each attribute is placed on a separate line but they do not have to be.
id="findfile-window"
The id attribute is used as an identifier so that the window can be referred to by scripts. You will usually put an id attribute on all elements. The name can be anything you want although it should be something relevant.
title="Find Files"
The title attribute describes the text that would appear on the title bar of the window when it is displayed. In this case the text 'Find Files' will appear.
orient="horizontal"
The orient attribute specifies the arrangement of the items in the window. The value horizontal indicates that items should be placed horizontally across the window. You may also use the value vertical, which means that the items are placed in a column. This is the default value, so you may leave the attribute off entirely if you wish to have vertical orientation.
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
This line declares the namespace for XUL, which you should put on the window element to indicate that all of its children are XUL. Note that this URL is never actually downloaded. Mozilla will recognize this URL internally.
...
This is where the elements (the buttons, menus and other user interface components) would be declared. We'll add some of these in the next set of sections.
</window>
And finally, we need to close the window tag at the end of the file.
Opening a Window
In order to open a XUL window, there are several methods that can be used. If you are only in the development stage, you can just type the URL (whether a chrome:, file: or other URL type) into the location bar in a Mozilla browser window. You should also be able to double-click the file in your file manager, assuming that XUL files are associated with Mozilla. The XUL window will appear in the browser window as opposed to a new window, but this is often sufficient during the early stages of development.
The correct way, of course, is to open the window using JavaScript. No new syntax is necessary as you can use the window.open() function as one can do for HTML documents. However, one additional flag, called 'chrome' is necessary to indicate to the browser that this is a chrome document to open. This will open the window without the toolbars and menus and so forth that a normal browser window has. The syntax is described below:
window.open(url,windowname,flags);
where the flags contains the flag "chrome".
Example:
window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");
Let's begin by creating the basic file for the find file dialog. Create a file called findfile.xul and put it in a new directory somewhere. It doesn't matter where you put it, but the chrome/findfile/content directory is a suitable place. Add the XUL template shown at the top of this page to the file and save it.
You can use the command-line parameter '-chrome' to specify the XUL file to open when Mozilla starts. If this is not specified, the default window open will open. (Usually the browser window.) For example, if you have created a manifest file for the findfiles application in the chrome directory, we could open the find files dialog with the following:
mozilla -chrome chrome://findfile/content/findfile.xul
If you run this command from a command-line (assuming you have one on your platform), the find files dialog will open by default instead of the Mozilla browser window. Of course, because we haven't put any UI elements in the window, you won't see a window appear. We'll add some elements in the next section.
To see the effect though, the following will open the bookmarks window:
mozilla -chrome chrome://communicator/content/bookmarks/bookmarksManager.xul
The '-chrome' argument doesn't give the file any additional privileges. Instead, it causes the specified file to open as a top-level window without any browser chrome, such as the address field or menu. Only chrome URLs have additional privileges.
Adding Buttons
In this section, we will look at how to add some simple buttons to a window.
Adding Buttons to a Window
The window we've created so far has had nothing in it, so it isn't very interesting yet. In this section, we will add two buttons, a Find button and a Cancel button. We will also learn a simple way to position them on the window.
Like HTML, XUL has a number of tags that can be used to create user interface elements. The most basic of these is the button tag. This element is used to create simple buttons.
The button element has two main properties associated with it, a label and an image. You need one or the other or both. Thus, a button can have a label only, an image only or both a label and an image. Buttons are commonly used for the OK and Cancel buttons in a dialog, for example.
The button tag has the following syntax:
<button
id="identifier"
class="dialog"
label="OK"
image="images/image.jpg"
disabled="true"
accesskey="t"/>
The attributes are as follows, all of which are optional:
id
A unique identifier so that you can identify the button with. You'll see this attribute on all elements. You'll want to use this if you want to refer to the button in a style sheet or script. However, you should add this attribute to almost all elements. It isn't always placed on elements in this tutorial for simplicity.
class
The style class of the button. This works the same as in HTML. It is used to indicate the style that the button appears in. In this case the value dialog is used. In most cases, you will not use a class for a button.
label
The label that will appear on the button. For example, OK or Cancel. If this is left out, no text appears.
image
The URL of the image to appear on the button. If this is attribute is left out, no image appears. You can also specify the image in a stylesheet using the list-style-image property.
disabled
If this attribute is set to true, the button is disabled. This is usually drawn with the text in grey. If the button is disabled, the function of the button cannot be performed. If this attribute is left out entirely, the button is enabled. You can switch the disabled state of the button using JavaScript.
accesskey
This should be set to a letter that is used as a shortcut key. This letter should appear in the label text and will typically be drawn underlined. When the user presses ALT (or a similar key that varies on each platform) and the access key, the button will be focused from anywhere in the window.
Note that a button supports more attributes than those listed above. Others will be discussed later. Some examples of buttons:
Example 2.2.1: Source View
<button label="Normal"/>
<button label="Disabled" disabled="true"/>
The examples above will generate the buttons in the image. The first button is a normal button. The second button is disabled so it appears greyed out.
We'll start by creating a simple Find button for the find files utility. The example code below shows how to do this.
<button id="find-button" label="Find"/>
Note that Firefox doesn't allow you to open chrome windows from web pages, so the View links in the tutorial will open in normal browser windows. Due to this, the buttons will appear to stretch across the window. You can add align="start" to the window tag to prevent the stretching.
Let's add this code to the file findfile.xul that we created in the previous section. The code needs to be inserted in-between the window tags. The code to add is shown in red below:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="findfile-window"
title="Find Files"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button id="find-button" label="Find"/>
<button id="cancel-button" label="Cancel"/>
</window>
You'll notice that the Cancel button was added also. The window has been given a horizontal orientation so that the two buttons appear beside each other. If you open the file in Mozilla, you should get something like the image shown here.
Note that we shouldn't put text labels directly in the XUL file. We should use entities instead so that text can be easily translated.
Adding Labels and Images
This section describes a way to add labels and images to a window. In addition, we look at how to include elements into groups.
Text Elements
You cannot embed text directly into a XUL file without tags around it and expect it to be displayed. The most basic way to include text in a window is to use the label element. An example is shown below:
Example 2.3.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 appear on only one line. This is suitable for short sections of text.
For longer text, you can place content inside opening and closing description tags. Unlike text specified with the label element and the value attribute, the child text will wrap onto multiple lines if necessary. Resize the window to see the wrapping. Like 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.
Example 2.3.2: Source View
<description>
This longer section of text is displayed.
</description>
Internally, both the label element and the description element are the same, which means that labels can have wrapped text if you place the text inside the tag, and descriptions can have a value attribute. The label element is intended for labels of controls, such as text fields. The description element is intended for other descriptive text such as informative text at the top of a dialog box. By convention, you should follow this guideline.
You can use the control attribute to set which control the label is associated with. When the user clicks the label, that control will be focused. Set the value of the control attribute to the id of the element to be focused.
Example 2.3.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.
Images
Like HTML, 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 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("chrome://findfile/skin/images/search.jpg");
}
These images come from within the chrome directory, in the skin for the findfile package. Because images vary by skin, you would usually place images in the skin
You are reading the story above: TeenFic.Net