This also means that pro-grams written in JavaScript are usually open source by definition — they are just plain-text pieces of code, located either in separate files or embedded in HTML
Trang 1Figure 16-1 shows the horizontally arranged buttons.
F IGURE 16-1: Horizontally arranged buttons
As you can see, to create a horizontal layout, we placed the three buttons inside an hbox ele-ment Similarly, to create a vertical layout, you place the elements inside a vbox:
<vbox>
<button label=”Red”/>
<button label=”Green”/>
<button label=”Blue”/>
</vbox>
Figure 16-2 shows the vertically arranged buttons
F IGURE 16-2: Vertically arranged buttons
An example of a complete XUL document follows:
<?xml version=”1.0”?>
<window orient=”horizontal”
xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”>
<textbox value=”Enter you text here”/>
<button label=”Go”/>
</window>
The xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only xul”line specifies that the window children are XUL elements
RDF in XUL Applications
Resource Description Framework (RDF) is a technology for describing Internet resources It is typically implemented as an XML file having a special syntax RDF is a complex topic outside the scope of this book In the following sections, you can see some Mozilla configuration files written using this format, but understanding RDF is not required — all the examples include the necessary explanations and clarifications
Trang 2The RDF specification is maintained by the World Wide Web Consortium (W3C) For more information about this technology in Mozilla visit the Mozilla RDF page: http://www mozilla.org/rdf/doc/
Additional XUL Resources
Following are two additional XUL resources that might come in handy:
Mozilla XUL project page: This page contains the XUL specification and links to
addi-tional XUL resources:http://www.mozilla.org/projects/xul/
XUL Planet: This site is dedicated to XUL programming It has several very helpful
tutorials and a lot of reference material:http://www.xulplanet.com/
We now know what XUL is and how we can use it to create user interfaces But XUL by itself isn’t very useful; we have merely created a bunch of elements and placed them together We need a way to add some functionality to our user interface This is usually done with JavaScript, which leads us to the following section
JavaScript
JavaScript is a powerful scripting language most widely used for creating dynamic web pages
Mozilla also uses JavaScript to implement the logic behind XUL user interfaces Like many other technologies used in Mozilla, JavaScript is very easy to master; you don’t have to be an experienced programmer to start writing JavaScript programs
JavaScript and Java are two completely different languages They both have syntax somewhat similar to C, but other than that, they don’t really have much in common JavaScript is a lightweight scripting language created by Netscape, while Java is a more complex, compiled lan-guage developed by Sun Microsystems
JavaScript is an interpreted language This means that the program is executed directly from the source code; there is no need to first compile it into binary form This also means that pro-grams written in JavaScript are usually open source by definition — they are just plain-text pieces of code, located either in separate files or embedded in HTML or XUL documents
The JavaScript language is standardized by the ECMA-262 standard under the name ECMAScript
Syntax
When it comes to syntax, JavaScript is similar to C, Perl, PHP, and many other programming languages
Trang 3If you want to test the JavaScript examples that follow, you can create an HTML document with the following contents:
<html>
<body>
<script type=”text/javascript”>
<! [Your JavaScript code goes here]
.
// >
</script>
</body>
</html>
Insert your JavaScript code into the <script> element and open the HTML page inside the browser to see what it does
Conditional Statements
Similar to most programming languages, JavaScript has an if .elsestatement:
if (i == 1) { alert(“i is 1”);
} else { alert(“i is not 1”);
}
As with many other programming languages, the elsepart of the ifstatement is optional You can use the alert function to display a dialog with a custom message
JavaScript also has a switchstatement that allows executing different blocks of code, depend-ing on the expression value:
switch (i) { case 1:
alert(“i is 1”);
break;
case 2:
alert(“i is 2”);
break;
default:
alert(“i is neither 1 nor 2”);
Trang 4JavaScript has several different looping statements For example, the following loop will be exe-cuted four times:
for (i = 0; i < 4; i++) { alert(i);
}
In the preceding statement we want ito be initialized with 0and to be incremented by 1 on each loop iteration The loop will be executed as long as the value of iis less than 4
Variables
Variables in JavaScript are created by either assigning a value to a new variable or by declaring
it using the varkeyword:
var i;
Variables declared inside a function have a local scope, meaning that they can be used only inside that function Variables that were defined outside any function are global and can be used anywhere in the script
Functions
You can define new functions using the functionkeyword:
function add(a, b) { return a + b;
} The preceding function receives two arguments,aand b, and returns their sum
Scripting the User Interface
As previously mentioned, we will be using JavaScript in Mozilla to implement the logic behind the user interface Each user interface element can trigger several events For example, a button can trigger an event when it is pressed If we attach a JavaScript function to such an event, it will be executed each time the event is triggered A function attached to an event is called an
event handler.
If you are familiar with HTML, you may find the XUL events and their handlers very familiar In fact, Mozilla handles XUL and HTML events in an almost identical fashion
Let’s create a simple XUL user interface — two entry boxes and a button (see Figure 16-3):
<hbox>
<textbox id=”first-box”/>
<textbox id=”second-box”/>
<button label=”Add” oncommand=”calculateSum()”/>
</hbox>
Trang 5F IGURE 16-3: A primitive calculator
Each time the button is pressed, our calculateSumfunction is executed Let’s look at how this function might be implemented:
function calculateSum() { var firstBox = document.getElementById(“first-box”);
var secondBox = document.getElementById(“second-box”);
var a = parseInt(firstBox.value);
var b = parseInt(secondBox.value);
alert(a + b);
} Step by step, the preceding function does the following:
1 Find the two entry boxes elements using getElementsById This function is a part of the DOM interface (See the DOM section later in this chapter for details.)
2 After finding our entry boxes, we get their value by examining their valueproperty
3 Convert the value to integer using the parseIntfunction
4 After we have a numerical representation of the contents of our textboxes, we can
calcu-late the sum and present it to the user in a popup box
To see the previous example in action, you can create the following XUL document and open it
in Firefox:
<?xml version=”1.0” encoding=”UTF-8”?>
<window align=”start”
xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”>
<script type=”application/x-javascript”>
<![CDATA[
function calculateSum() { var firstBox = document.getElementById(“first-box”);
var secondBox = document.getElementById(“second-box”);
var a = parseInt(firstBox.value);
var b = parseInt(secondBox.value);
alert(a + b);
} ]]>
</script>
Trang 6<textbox id=”first-box”/>
<textbox id=”second-box”/>
<button label=”Add” oncommand=”calculateSum()”/>
</hbox>
</window>
In the previous example, we embedded some JavaScript code directly in the XUL document In such cases, the JavaScript code should be placed inside a CDATA section, so the XML parser doesn’t try to parse it Otherwise, characters that have a special meaning in XML (such as >) can confuse the XML parser
After reading this section, you should have a basic idea about what JavaScript is and how you can use it to add some logic to your user interface Chapter 17 continues exploring the possibil-ities while examining several additional examples
Additional JavaScript Resources
Following are some additional JavaScript resources that might be useful:
The WebReference JavaScript Section has many articles and tutorials on JavaScript programming:http://www.webreference.com/js/
The JavaScript Guide, while a bit outdated, is still a good reference:http://wp netscape.com/eng/mozilla/3.0/handbook/javascript/
The official JavaScript (ECMAScript) specification can be found on the Ecma web site:http://www.ecma-international.org/publications/standards/
Ecma-262.htm
Here is a good JavaScript tutorial:http://www.tizag.com/javascriptT/
Here is a nice article about the history of JavaScript:http://www.howtocreate co.uk/jshistory.html
Cascading Style Sheets
Cascading Style Sheets (CSS) is a mechanism for specifying the appearance of HTML, XUL, and other documents With CSS, you can specify colors, fonts, sizes, and other style elements
CSS is a World Wide Web Consortium (W3C) specification
CSS allows you to separate your document content from its presentation For example, your XUL document can specify that your user interface contains an entry box and two buttons A style sheet can then be used to specify the size of the entry field, the color of the buttons, and the font of their labels There are many advantages to separating the document style from its content The first and possibly the most important benefit is flexibility If you define all the presentation-related information in a separate style sheet, you will be able to easily modify the style of your user interface without needing to adjust the document content Your HTML or XUL files will become much more readable and clean
Trang 7Suppose that you have created a large project with dozens of XUL documents Then, after working with your program for a while, you notice that changing the font of all the labels will greatly improve their readability In a world without style sheets, you would have to search all your XUL documents for labelelements and add an appropriate attribute to each and every one of them What would happen if you decided to experiment with several different fonts to see which one looked the best? With style sheets, this task becomes trivial If all your docu-ments use the same style sheet (and if they are part of the same project, they probably should), you can just add a line to this style sheet specifying the new font of your label elements
A typical CSS definition is a list of rules A rule has a selector that specifies the elements the rule applies to and a list of style declarations For example, a rule for changing the appearance
of all the labelelements might look like this:
label { font-family: arial;
font-weight: bold;
color: blue;
}
In this rule,labelis a selector; it specifies that the rule applies to all the labelelements After the selector comes a block enclosed in curly braces that specifies the styles that should be applied to the selected elements The block is a semicolon-separated list of property: valuepairs In this example, the colorproperty will receive the value blue, meaning that the text of all our labels will be blue
There are many places in which both the author of the document and its reader can specify their preferred style rules For example, styles can be defined in external style sheets, embedded
in the document, or specified inline by setting an element’s style attribute Users can further change these styles by changing the browser settings or adding their own custom style sheets This means that several, often-conflicting style definitions can be applicable to the same ele-ment The “cascading” in CSS allows these conflicts to be resolved by specifying the order in which the rules are evaluated For example, the author-specified rules have higher priority than the reader-specified ones, and the more specific rules will override ones that are more general Each element in our HTML or XUL document can have a classattribute that can be used
to specify that several elements are related to one another in some way Elements can also have
an idattribute Unlike the classattribute, the element’s idshould be unique throughout the document — it will be used to identify the specific element Let’s look at a fragment of a XUL document to clarify things a bit:
<button id=”play-button” class=”control” label=”play”/>
<button id=”stop-button” class=”control” label=”stop”/>
In the preceding example, both buttons belong to the controlclass This will be useful if you want to apply some style to all the elements belonging to this class For example, you might want to make all your control buttons bigger than the others You can see that both buttons are uniquely identified by their respective idattributes You can use this to apply a specific style only to one element (the play button, for example) without affecting all the other elements The idattribute will also become handy if you want to find a specific element using JavaScript
Trang 8Let’s see a few examples of the various style declarations we can apply to our documents and specifically to the two buttons from the previous example
To specify a style for all the button elements in your document, you can use the following rule:
button { border: 1px solid red; } This rule will draw a 1-pixel-wide red border around all the buttons in your document
You can style all the elements having a specific class:
button.control { color: blue; } This rule selects the buttons having a controlclass and makes their label text blue If you want the rule to apply to all the elements that belong to the controlclass and not only but-tons, you can omit the buttonpart of the selector, as follows:
.control { color: blue; } Now let’s change the label font of the stop button to bold by selecting it using its id, stop-button:
#stop-button { font-weight: bold; } The preceding examples, while simple, demonstrate the power of CSS There is, of course, much more to style sheets; there are additional selector types, inheritance, and many useful style properties The important principle you should have gotten from this section is that you should always separate your document content from its presentation by using style sheets
Additional CSS Resources
Following are some additional CSS resources that might be helpful:
The CSS specification can be found on the W3C site:http://www.w3.org/TR/
REC-CSS1(Level 1),http://www.w3.org/TR/REC-CSS2(Level 2)
The Web Design Group (WDG) site has a nice guide to CSS:http://www htmlhelp.com/reference/css/
The Document Object Model
The DOM is a collection of interfaces for working with HTML and XML documents The document is represented as a tree of elements The DOM defines methods for navigating and searching this tree, retrieving information about the various elements, modifying the tree struc-ture by removing and inserting elements, manipulating individual elements, and so on
The DOM isn’t a language or a software library It is a World Wide Web Consortium (W3C) specification for an interface So how does it actually work? Software vendors, in our case Mozilla, implement the DOM standard interfaces and allow them to be used from various pro-gramming languages When developing Mozilla extensions, we will typically be using JavaScript
to call the DOM methods
Trang 9The following sections provide some examples of what you can do with the DOM interfaces This isn’t intended as a complete DOM reference but is rather meant to give you a taste of the possibilities
Assume that you have an HTML document that contains the following table:
<table id=”my-table” border=”1”>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
This table will typically be rendered by the browser, as shown in Figure 16-4
F IGURE 16-4: The sample table rendered by the browser
The DOM representation of this table is shown in Figure 16-5
F IGURE 16-5: The DOM representation of the sample table
You can use the DOM Inspector extension to see the exact tree structure You can inspect and modify the elements, their attributes, styles, and much more See Chapter 15 for more details on the DOM Inspector
abl
tr
tr
td
td
th th
John
Doe First Name Last Name
Trang 10Navigating and Searching the Document Tree
The following JavaScript code searches the document tree for our table using the table’s id attribute my-table:
var myTable = document.getElementById(“my-table”);
The document object represents the root element of our document tree It can be used to access all the other elements
In all of the following examples, assume that we have already found our table using the getElementByIdmethod and assigned it to the myTablevariable
After successfully locating the table, you can find all the table header (th) elements of that table:
var headers = myTable.getElementsByTagName(“th”);
for (var i = 0; i < headers.length; i++) { alert(headers[i].innerHTML);
} The preceding code displays two popup dialogs, the first saying “First Name” and the second saying “Last Name.”
To see this example in action, create an HTML document with the following contents, open it
in the browser, and click the Test button You can later modify the body of the testfunction inserting the code of the following examples
<html>
<head>
<script type=”text/javascript”>
<! function test() { var myTable = document.getElementById(“my-table”);
var headers = myTable.getElementsByTagName(“th”);
for (var i = 0; i < headers.length; i++) { alert(headers[i].innerHTML);
} } // >
</script>
</head>
<body>
<table id=”my-table” border=”1”>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>