Chapter 5. Scripting Mozilla- P3 5.3.3. Changing an Element's CSS Style Using JavaScript Much of what makes the Mozilla UI both flexible and programmable is its ability to dynamically alter the CSS style rules for elements at runtime. For example, if you have a button, you can toggle its visibility by using a simple combination of JavaScript and CSS. Given a basic set of buttons like this: <button id="somebutton" class="testButton" label="foo" /> <spacer flex="1" /> <button id="ctlbutton" class="testButton" label="make disappear" oncommand="disappear( );" /> as well as a stylesheet import statement at the top of the XUL like this: <?xml-stylesheet href="test.css" type="text/css"?> and a simple CSS file in your chrome/xfly/content directory called test.css that contains the following style rule: #somebutton[hidden="true"]{ display: none; } .testButton{ border : 1px outset #cccccc; background-color : #cccccc; padding : 4px; margin : 50px; } You can call setAttribute in your script to hide the button at runtime. <script> function disappear( ){ return document.getElementById('somebutton').setAttribute( 'hidden', true); } </script> The previous code snippet makes a visible button disappear by setting its hidden attribute to true. Adding a few more lines, you can toggle the visibility of the button, also making it appear if it is hidden: <script> function disappear( ){ const defaultLabel = "make disappear"; const newLabel = "make reappear"; var button = document.getElementById('somebutton'); var ctlButton = document.getElementById('ctlbutton'); if(!button.getAttribute('hidden')) { button.setAttribute('hidden', true); ctlButton.setAttribute('label', newLabel); } else { button.removeAttribute('hidden'); ctlButton.setAttribute('label', defaultLabel); } return; } </script> Another useful application of this functionality is to collapse elements such as toolbars, boxes, and iframes in your application. The setAttribute method can also be used to update the element's class attribute with which style rules are so often associated. toolbarbutton-1 and button-toolbar are two different classes of button. You can change a button from a toolbarbutton-1 -- the large button used in the browser -- to a standard toolbar button using the following DOM code: // get the Back button in the browser b1 = document.getElementById("back-button");\ b1.setAttribute("class", "button-toolbar"); This dynamically demotes the Back button to an ordinary toolbar button. Code such as this assumes, of course, that you know the classes that are used to style the various widgets in the interface. You can also set the style attribute directly using the DOM: el = document.getElementById("some-element"); el.setAttribute("style", "background- color:darkblue;"); Be aware, however, that when you set the style attribute in this way, you are overwriting whatever style properties may already have been defined in the style attribute. If the document referenced in the snippet above by the ID some-element has a style attribute in which the font size is set to 18pc, for example, that information is erased when the style attribute is manipulated in this way. 5.3.4. Creating Elements Dynamically Using the createElement method in XUL lets you accomplish things similar to document.write in HTML, with which you can create new pages and parts of a web page. In Example 5-9 , createElement is used to generate a menu dynamically. Example 5-9. Dynamic menu generation <?xml version="1.0"?> <?xml-stylesheet href="test.css" type="text/css"?> <!DOCTYPE window> <window id="test-win" xmlns="http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul" title="test" style=" min-width : 200px; min-height: 200px;"> <script> <![CDATA[ function generate( ){ var d = document; var popup = d.getElementById('menupopup'); var menuitems = new Array('menuitem_1', 'menuitem_2', 'menuitem_3', 'menuitem_4', 'menuitem_5'); var l = menuitems.length; var newElement; for(var i=0; i<l; i++) { newElement = d.createElement('menuitem'); newElement.setAttribute('id', menuitems[i]); newElement.setAttribute('label', menuitems[i]); popup.appendChild(newElement); } return true; } ]]> </script> <menu label="a menu"> <menupopup id="menupopup"> </menupopup> </menu> <spacer flex="1" /> <button id="ctlbutton" class="testButton" label="generate" oncommand="generate( );" /> </window> The JavaScript function generate( ) in Example 5-9 gets the menupopup as the parent element for the new elements, creates five menuitems in an array called menuitems, and stores five string ID names for those menuitems. The variable l is the length of the array. The variable newElement is a placeholder for elements created by using the createElement method inside of the for loop. generate( ) assigns newElement on each iteration of the loop and creates a new menuitem each time, providing a way to dynamically generate a list of menu choices based on input data or user feedback. Try this example and experiment with different sources of data, such as a menu of different auto manufacturers, different styles on group of boxes that come from user selection, or tabular data in a tree. 5.3.5. Sharing Data Between Documents As the scale of your application development increases and your applications grow new windows and components, you may become interested in passing data around and ensuring that the data remains in scope. Misunderstanding that scope often leads to problems when beginning Mozilla applications. 5.3.5.1. Scope in Mozilla The general rule is that all scripts pulled in by the base XUL document and scripts included in overlays of this document are in the same scope. Therefore, any global variables you declare in any of these scripts can be used by any other scripts in the same scope. The decision to put a class structure or more sophisticated design in place is up to you. The relationship of a parent and child window indicates the importance of storing data in language constructs that can be passed around. This code shows a common way for a parent to pass data to a window it spawns: var obj = new Object ( ); obj.res = ""; window.openDialog("chrome://xfly/content/foo.xul", 'foo_main', "chrome,resizable,scrollbars,dialog=yes,close,modal =yes", obj); 5.3.5.2. Using the window.arguments array The previous code snippet creates a new JavaScript object, obj, and assigns the value of an empty string to that object's res property. The object is then passed by reference to the new window as the last parameter of the openDialog( ) method so it can be manipulated in the scope of the child window: function onOk( ) { window.arguments[0].res = "ok"; return; } function onCancel( ) { window.arguments[0].res = "cancel"; return; } In that child window, the object is available as an indexed item in the special window.arguments array. This array holds a list of the arguments passed to a window when it is created. window.arguments[0] is a reference to the first argument in the openDialog( ) parameter list that is not a part of the input parameters for that method, window.arguments[1] is the second argument, and so on. Using window.arguments is the most common way to pass objects and other data around between documents. When the user clicks a button in the displayed dialog (i.e., the OK or Cancel button), one of the functions sets a value to the res property of the passed- in object. The object is in the scope of the newly created window. When control is passed back to the script that launched the window, the return value can be checked: if (obj.res != "ok") { dump("User has cancelled the dialog"); return; } In this case, a simple dump statement prints the result, but you can also test the result in your application code and fork accordingly. 5.4. XPConnect and Scriptable Components At the second level of scripting, XPConnect binds JavaScript and the user interface to the application core. Here, JavaScript can access all XPCOM components that implement scriptable libraries and services through a special global object whose methods and properties can be used in JavaScript. Consider these JavaScript snippets from the Mozilla source code: // add filters to the file picker fp.appendFilters( nsIFilePicker.HTML ); // display a directory in the file picker fp.displayDirectory ( dir ); // read a line from an open file file.readLine(tmpBuf, 1024, didTruncate); // create a new directory this.fileInst.create( DIRECTORY, parseInt(permissions) ); retval=OK; The filepicker, file, and localfile components that these JavaScript objects represent are a tiny fraction of the components available via XPConnect to programmers in Mozilla. This section describes how to find these components, create the corresponding JavaScript objects, and use them in your application programming. 5.4.1. What Is XPConnect? Until now, scripting has referred to scripting the DOM, manipulating various elements in the interface, and using methods available in Mozilla JavaScript files. However, for real applications like the Mozilla browser itself, this may be only the beginning. The UI must be hooked up to the application code and services (i.e., the application's actual functionality) to be more than just a visual interface. This is where XPConnect and XPCOM come in. Browsing the Web, reading email, and parsing XML files are examples of application-level services in Mozilla. They are part of Mozilla's lower-level functionality. This functionality is usually written and compiled in platform- native code and typically written in C++. This functionality is also most often organized into modules, which take advantage of Mozilla's cross- platform component object model (XPCOM), and are known as XPCOM components. The relationship of these components and the application services they provide to the interface is shown in Figure 5-4 . . Chapter 5. Scripting Mozilla- P3 5. 3.3. Changing an Element's CSS Style Using JavaScript Much. this way. 5. 3.4. Creating Elements Dynamically Using the createElement method in XUL lets you accomplish things similar to document.write in HTML, with which