Difference between revisions of "Mozilla.dev.tech.xul"

From CDOT Wiki
Jump to: navigation, search
m (/* [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/c38b314ec14bf039/b3fafe8e0a90102c#b3fafe8e0a90102c Can I change a XUL tree cell/row/item background color with Javacript?])
(FAQ)
 
(8 intermediate revisions by 2 users not shown)
Line 21: Line 21:
 
# [http://developer.mozilla.org/en/docs/Newsgroup_summaries:mozilla-dev-tech-xul:2006-11-03 Friday November 3, 2006]
 
# [http://developer.mozilla.org/en/docs/Newsgroup_summaries:mozilla-dev-tech-xul:2006-11-03 Friday November 3, 2006]
 
# [http://developer.mozilla.org/en/docs/Newsgroup_summaries:mozilla-dev-tech-xul:2006-11-10 Friday November 10, 2006]
 
# [http://developer.mozilla.org/en/docs/Newsgroup_summaries:mozilla-dev-tech-xul:2006-11-10 Friday November 10, 2006]
 +
# [http://developer.mozilla.org/en/docs/Newsgroup_summaries:mozilla-dev-tech-xul:2006-11-17 Friday November 17, 2006]
 +
# [http://developer.mozilla.org/en/docs/Newsgroup_summaries:mozilla-dev-tech-xul:2006-11-24 Friday November 24, 2006]
 +
# [http://developer.mozilla.org/en/docs/Newsgroup_summaries:mozilla-dev-tech-xul:2006-12-01 Friday December 1, 2006]
  
 
== FAQ ==
 
== FAQ ==
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/8d4a161af5f3c859/26ea3851f9b196ca#26ea3851f9b196ca What is an example of tab browser in XUL?] ===
 +
 +
:[http://lxr.mozilla.org/mozilla1.8/source/browser/base/content/browser.xul#506 An example of tab browswer in XUL]
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/57d92948ee93e015/e126b4642552567d#e126b4642552567d How can i get URIs on open tabs?] ===
 +
 +
Using the following code sample,
 +
:<pre>
 +
:// Get browsers object
 +
:var browsers=document.getElementById('content').browsers;
 +
:var numBrowsers=browsers.length;
 +
:
 +
:for (var i=0; numBrowsers>i; i++)
 +
:{
 +
:    var thisURI=browsers[i].currentURI.spec;
 +
:    // do something with it.
 +
:}
 +
:
 +
:</pre>
 +
The person can get the titles too using the .contentTitle tag.
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/f25c7e5dd546a005/bce0d886cf0ba703#bce0d886cf0ba703 How to add and remove values to/from, set up inside a <prefwindow> container to handle the preference?] ===
 +
 +
:<prefwidnow> can contain any control, just like a regular window. Some of them can be tied to a preference so that the preference is automatically updated as the control is manipulated. Others, like <listbox>, cannot be so tied, but one can always write a script that updates preferences explicitly, via nsIPrefBranch interface.
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/0f9029377573cfa2/ba127b8ff6c7e57b#ba127b8ff6c7e57b Can a XUL template be used for RSS?] ===
 +
 +
:You should be able to use a XUL template to display feeds, although you may have to write the feed data to an RDF datasource first.
  
 
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/1cd0d95ece50e2ed/3d56c5f2b5a56b9b#3d56c5f2b5a56b9b How do I remove the file location header included in the default printing setting?] ===
 
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/1cd0d95ece50e2ed/3d56c5f2b5a56b9b#3d56c5f2b5a56b9b How do I remove the file location header included in the default printing setting?] ===
Line 111: Line 143:
 
:electedtreeitem.firstChild.setAttribute('style', 'background: #FF0000');
 
:electedtreeitem.firstChild.setAttribute('style', 'background: #FF0000');
 
:</pre>
 
:</pre>
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/1c47b84ce54353a5/9daa474a70c5dff6#9daa474a70c5dff6 Specifying window.onload function] ===
 +
 +
To specify a function to run when the window is loaded,add the following code between the script tags in the XUL file:
 +
window.addEventListener("load", function(e) { startup(); }, false);
 +
 +
Similarly, for onunload use the code:
 +
window.addEventListener("unload", function(e) { shutdown(); }, false);
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/f0aa44a69e64dda5/b86f0e12f5941092#b86f0e12f5941092 Is there an event which is called when the Firefox browser is initialized?] ===
 +
 +
An event is initiated when the application starts up and when the profile is changed. For more information please look at the following link:  [http://lxr.mozilla.org/mozilla/source/toolkit/mozapps/extensions/src/nsExtensionManager.js.in#2703 nsExtensionManager.js]
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/40b79fb4574cac8b/5c46a2cebfcae898#5c46a2cebfcae898 Is nsIVariant fully supported using python?] ===
 +
 +
Python has full support for variants.  Pass a Python string/int/etc to the method requiring an nsIVariant.  A Python object is convered when implmenting an interface taking an nsIVariant. 
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/b8916415bc0fa019/9c7fd67b21949317#9c7fd67b21949317 How do I close the "showPopup" which is automatically opened when the "oncontextmenu" event is called?] ===
 +
 +
If you have a similar code base as the following:
 +
 +
:<pre>
 +
:onBookmarkContextMenu: function(event, id) {
 +
:  document.getElementById("bookmarkPopup").showPopup(document.getElementById(id),
 +
:                          event.screenX + 6, event.screenY + 6, "popup", "bottomright",
 +
:                          "bottomright");
 +
:
 +
:}
 +
:</pre>
 +
 +
Use the hidePopup() function to solve this issue.
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/9bf54cc3afe1c340/100724af248a02ad#100724af248a02ad What is an example of addProgressListener?] ===
 +
 +
An example of this is this:
 +
 +
:<pre>
 +
:// Associate the progress listener for a "browser" to a listener object
 +
:
 +
:browserObject.addProgressListener( listObj,
 +
:        Components.interfaces.nsIWebProgress.NOTIFY_STATE_WINDOW );
 +
:
 +
:// Remember to define the object, something like this:
 +
:
 +
:listObj = new Object();
 +
:
 +
:listObj.wpl = Components.interfaces.nsIWebProgressListener;
 +
:
 +
:listObj.QueryInterface = function(aIID) {
 +
:        if (aIID.equals(listObj.wpl) ||
 +
:            aIID.equals(Components.interfaces.nsISupportsWeakReference) ||
 +
:            aIID.equals(Components.interfaces.nsISupports)) return this;
 +
:              throw Components.results.NS_NOINTERFACE;
 +
:
 +
:}
 +
:
 +
:listObj.onStateChange = function(aProgress, aRequest, aFlag, aStatus) {
 +
:        if (aFlag & listObj.wpl.STATE_START) {
 +
:                // This fires when the load event is initiated
 +
:        } else {
 +
:                if (aFlag & listObj.wpl.STATE_STOP) {
 +
:                        if ( aFlag & listObj.wpl.STATE_IS_WINDOW ) {
 +
:                                // This fires when ALL load finish
 +
:                        }
 +
:                        if ( aFlag & listObj.wpl.STATE_IS_NETWORK ) {
 +
:                                // Fires when ALL load are REALLY over,
 +
:                                // do something "final" here
 +
:                                // (my two cents)
 +
:                        } else {
 +
:                                // This fires when a load finishes
 +
:                        }
 +
:                }
 +
:        }
 +
:        return 0;
 +
:
 +
:}
 +
:
 +
:// This fires when the location bar changes i.e load event is confirmed
 +
:// or when the user switches tabs
 +
:listObj.onLocationChange = function(aProgress, aRequest, aURI) {
 +
:
 +
:// do whatever you want to do
 +
:return 0;
 +
:
 +
:}
 +
:
 +
:// For definitions of the remaining functions see XulPlanet.com
 +
:listObj.onProgressChange    = function() { return 0 };
 +
:listObj.onStatusChange      = function() { return 0 };
 +
:listObj.onSecurityChange    = function() { return 0 };
 +
:listObj.onLinkIconAvailable = function() { return 0 };
 +
:
 +
:/*
 +
:        I use the progress listener to trap the end of a local HTML
 +
:        "template" file loading, and run XSLT transormations.
 +
:        In addition I need to evaluate the browser contentDocument DOM
 +
:        in order to clean "target" attributes on links, and so on.
 +
:
 +
:        HTH
 +
:*/
 +
:</pre>
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/55136a31f12497cc/22e2b0dadf941259#22e2b0dadf941259 How do I create XUL elements dynamically in JavaScript?] ===
 +
 +
Use the following snippet of code to add a new element under an existing element:
 +
var elem = document.getElementById(XUL_ELEMENT_ID);
 +
var node = document.createElement(XUL_ELEMENT_NAME);
 +
 +
node.setAttribute(ATTRIBUTE, VALUE);
 +
node.setAttribute(ATTRIBUTE, VALUE);
 +
elem.appendChild(node);
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/df9104b140a1961b/8aa034e25417bc55#8aa034e25417bc55 How do I access XUL elements in a sidebar from the context menu JavaScript?] ===
 +
 +
The sidebar's content is a separate document, so you should use document.getElementById("sidebar").contentDocument.getElementById(...)
 +
 +
This is something you could see using the DOMi.
 +
 +
See also http://developer.mozilla.org/en/docs/Working_with_windows_in_chrome_code
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/6098538f09e9822c/3e1ff364f7a986d5#3e1ff364f7a986d5 How can I include a .js document from inside a JavaScript document?] ===
 +
 +
Use the following snippet of code to reference a js file within a js file:
 +
objScriptLoader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader);
 +
 +
objScriptLoader.loadSubScript(strURL);
 +
 +
See http://www.xulplanet.com/references/xpcomref/ifaces/mozIJSSubScriptLoader.html for more information.
  
 
== UnAnswered Questions (UAQ) ==
 
== UnAnswered Questions (UAQ) ==
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/c48b0997c211cb30/09fd369cfd27a782#09fd369cfd27a782 How can I center image/text within the toolbarbutton element in a xulrunner application?] ===
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/8a8e3939a2fad620/51c738063ead0511#51c738063ead0511 Issues with relative path in a jar in XUL] ===
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/010fe5746a11183e/3e59469982739735#3e59469982739735 How can I create global observers for my XUL applications?] ===
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/2354e3354d47478a/94806ab7d3a7d4c8#94806ab7d3a7d4c8 Is there a XUL function that will allow a script to determine the ID or handle of the active window task?] ===
  
 
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/b1141a8d850db281/50a5fd68808a3afc#50a5fd68808a3afc Getting an error in the console when inserting a subtree into a XUL document from another XML.] ===
 
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/b1141a8d850db281/50a5fd68808a3afc#50a5fd68808a3afc Getting an error in the console when inserting a subtree into a XUL document from another XML.] ===
Line 127: Line 295:
  
 
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/19c4ac28a33071b3/3562fb411ad0f106#3562fb411ad0f106 Can I change the shape of the edge of the Toolbarbutton element?] ===
 
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/19c4ac28a33071b3/3562fb411ad0f106#3562fb411ad0f106 Can I change the shape of the edge of the Toolbarbutton element?] ===
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/41a1096602618693/fd3527c2490338b8#fd3527c2490338b8 Custom alert window] ===
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/bc3b2322803e8178/87ca61ab171cbd55#87ca61ab171cbd55 Updating observes attribute] ===
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/62f0d1fb0ed52543/77ee30fd2fef45e6#77ee30fd2fef45e6 Hover Help on Dynamically Generated XUL Elements] ===
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/842dfac328743b80/f8eb7fb268354c80#f8eb7fb268354c80 Is there an example of scrollingrows.xul from the firefox source?] ===
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/a1246bb44631f0d0/9389e7e2cb624055#9389e7e2cb624055 How do I make my XULRunner application run in front of all my applications on OSX?] ===
 +
 +
=== [http://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/73930957246a9c93/a9a335c545b1934a#a9a335c545b1934a Toolbar and side bar syntax problem] ===

Latest revision as of 20:21, 1 December 2006

Contents

Newsgroup

mozilla.dev.tech.xul

XUL on MDC

Authors

  1. Michael Lau
  2. Paul St-Denis

Weekly Summaries

NOTE: these should be turned into links to separate pages.

  1. Friday September 29, 2006
  2. Friday October 6, 2006
  3. Friday October 13, 2006
  4. Friday October 20, 2006
  5. Friday October 27, 2006
  6. Friday November 3, 2006
  7. Friday November 10, 2006
  8. Friday November 17, 2006
  9. Friday November 24, 2006
  10. Friday December 1, 2006

FAQ

What is an example of tab browser in XUL?

An example of tab browswer in XUL

How can i get URIs on open tabs?

Using the following code sample,

// Get browsers object
var browsers=document.getElementById('content').browsers;
var numBrowsers=browsers.length;
for (var i=0; numBrowsers>i; i++)
{
var thisURI=browsers[i].currentURI.spec;
// do something with it.
}

The person can get the titles too using the .contentTitle tag.

How to add and remove values to/from, set up inside a <prefwindow> container to handle the preference?

<prefwidnow> can contain any control, just like a regular window. Some of them can be tied to a preference so that the preference is automatically updated as the control is manipulated. Others, like <listbox>, cannot be so tied, but one can always write a script that updates preferences explicitly, via nsIPrefBranch interface.

Can a XUL template be used for RSS?

You should be able to use a XUL template to display feeds, although you may have to write the feed data to an RDF datasource first.

How do I remove the file location header included in the default printing setting?

See http://www.xulplanet.com/references/elemref/ref_iframe.html, the first user note at the bottom. Change this line
var settings = PrintUtils.getPrintSettings();
to this
var settings = PrintUtils.getPrintSettings().clone();
settings.docURL = " "; // suppress URL on printout
Other options you can modify are documented here:
http://www.xulplanet.com/references/xpcomref/ifaces/nsIPrintSettings.html

Is it possible to load the template with XML file and not rdf based source?

That feature isn't available yet. The code that implements it is waiting to be reviewed. See bug https://bugzilla.mozilla.org/show_bug.cgi?id=321171

How can I manage scrolling outside the browser?

This problem can be solved by capturing the focus events and giving the focus to another xul element or capturing and canceling the keypress events

DrawWindow with transparent background possible?

With Mozilla trunk
---------------------------------------------------------
nsIDOMCanvasRenderingContext2D* c2d = //coming from <canvas>
nsIDOMWindow* window = //coming from <iframe>
c2d->DrawWindow( window, ..., "rgba(0,0,0,0)");
---------------------------------------------------------
This makes canvas background transparent if background is transparent but when "window" is coming from top level content window, background is not transparent.
So how can I do this same way as <iframe>? You can't right now

I want to create dymanically multiple elements with datasource attribute. I want to create XUL element in the javascript, assign datasources/ref/template attribute to it so that the content is generated from the rdf datasource

Create the element, set the datasources attribute then add the element to the document. This should then create the database.

How can I send XML/XUL document fragrement to the server instead of using GET or POST variables?

You can send documents using send(document), so you should be able to insert the fragment into an empty document.

I get the error: Gecko MinVersion requirement not met.

Visit http://developer.mozilla.org/en/docs/Getting_started_with_XULRunner#Step_4:_Set_up_application.ini to find out how to properly set up the application.ini file.

Is Localizing remote XUL possible?

Loading remote DTDs for XML documents is currenty not yet supported in XUL.
The following bugs were reported on this issue.
https://bugzilla.mozilla.org/show_bug.cgi?id=22942
https://bugzilla.mozilla.org/show_bug.cgi?id=133698

When loading an XSLT stylesheet into an XML I get the error: "Error loading stylesheet: An XSLT stylesheet load was blocked for security reasons."

That error is from a security check that has been put up to safeguard against cross-site-scripting attacks.
A scheme is in development to allow servers to open up their site for cross-site access, but that's not yet done.

hidechrome="true" doesn’t work on a Mac?

Unfortunately, no simple solution to this was posted. A workaround is to open the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the 3rd argument.

Are XUL attributes integers?

Attributs such as left="100" or top="200" look as if they're integers but they are actually handled as strings.
To use them as integers use JavaScript's parseInt() function.

Using the "icon" attribute on a button

From XULPlanet.com reference:

This attribute should be used to set the usage for common buttons. Some platforms display these buttons with a small icon indicating their usage. This should be used in place of the image attribute. Possible values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select-color, network. If you are using a button that matches one of these common usages, use the icon attribute to indicate this.

Dynamic Objects in Toolbar

There may be a few ways to implement this:

  1. By building your menupopup from an RDF datasource, which could be generated on the server.
  2. By getting data (e.g. JSON string) from the server, parsing it on client, and building the menupopup using DOM methods (such as document.createElementNS).
  3. By getting data as XML from the server. (server can just send the XUL code to use for popup - alternatively it can send generic XML describing the attributes of the items in the menu and you generate the XUL on client by applying an XSLT transform.)

Can I change a XUL tree cell/row/item background color with Javacript?

To set the background color you need to set the property for the cell/row and not for the item. An example of this is:

selectedtreeitem = tree.view.getItemAtIndex(tree.currentIndex);
electedtreeitem.firstChild.setAttribute('style', 'background: #FF0000');

Specifying window.onload function

To specify a function to run when the window is loaded,add the following code between the script tags in the XUL file:

window.addEventListener("load", function(e) { startup(); }, false);

Similarly, for onunload use the code:

window.addEventListener("unload", function(e) { shutdown(); }, false);

Is there an event which is called when the Firefox browser is initialized?

An event is initiated when the application starts up and when the profile is changed. For more information please look at the following link: nsExtensionManager.js

Is nsIVariant fully supported using python?

Python has full support for variants. Pass a Python string/int/etc to the method requiring an nsIVariant. A Python object is convered when implmenting an interface taking an nsIVariant.

How do I close the "showPopup" which is automatically opened when the "oncontextmenu" event is called?

If you have a similar code base as the following:

onBookmarkContextMenu: function(event, id) {
document.getElementById("bookmarkPopup").showPopup(document.getElementById(id),
event.screenX + 6, event.screenY + 6, "popup", "bottomright",
"bottomright");
}

Use the hidePopup() function to solve this issue.

What is an example of addProgressListener?

An example of this is this:

// Associate the progress listener for a "browser" to a listener object
browserObject.addProgressListener( listObj,
Components.interfaces.nsIWebProgress.NOTIFY_STATE_WINDOW );
// Remember to define the object, something like this:
listObj = new Object();
listObj.wpl = Components.interfaces.nsIWebProgressListener;
listObj.QueryInterface = function(aIID) {
if (aIID.equals(listObj.wpl) ||
aIID.equals(Components.interfaces.nsISupportsWeakReference) ||
aIID.equals(Components.interfaces.nsISupports)) return this;
throw Components.results.NS_NOINTERFACE;
}
listObj.onStateChange = function(aProgress, aRequest, aFlag, aStatus) {
if (aFlag & listObj.wpl.STATE_START) {
// This fires when the load event is initiated
} else {
if (aFlag & listObj.wpl.STATE_STOP) {
if ( aFlag & listObj.wpl.STATE_IS_WINDOW ) {
// This fires when ALL load finish
}
if ( aFlag & listObj.wpl.STATE_IS_NETWORK ) {
// Fires when ALL load are REALLY over,
// do something "final" here
// (my two cents)
} else {
// This fires when a load finishes
}
}
}
return 0;
}
// This fires when the location bar changes i.e load event is confirmed
// or when the user switches tabs
listObj.onLocationChange = function(aProgress, aRequest, aURI) {
// do whatever you want to do
return 0;
}
// For definitions of the remaining functions see XulPlanet.com
listObj.onProgressChange = function() { return 0 };
listObj.onStatusChange = function() { return 0 };
listObj.onSecurityChange = function() { return 0 };
listObj.onLinkIconAvailable = function() { return 0 };
/*
I use the progress listener to trap the end of a local HTML
"template" file loading, and run XSLT transormations.
In addition I need to evaluate the browser contentDocument DOM
in order to clean "target" attributes on links, and so on.
HTH
  • /

How do I create XUL elements dynamically in JavaScript?

Use the following snippet of code to add a new element under an existing element:

var elem = document.getElementById(XUL_ELEMENT_ID);
var node = document.createElement(XUL_ELEMENT_NAME);

node.setAttribute(ATTRIBUTE, VALUE);
node.setAttribute(ATTRIBUTE, VALUE);
elem.appendChild(node);

How do I access XUL elements in a sidebar from the context menu JavaScript?

The sidebar's content is a separate document, so you should use document.getElementById("sidebar").contentDocument.getElementById(...)

This is something you could see using the DOMi.

See also http://developer.mozilla.org/en/docs/Working_with_windows_in_chrome_code

How can I include a .js document from inside a JavaScript document?

Use the following snippet of code to reference a js file within a js file:

objScriptLoader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader);

objScriptLoader.loadSubScript(strURL);

See http://www.xulplanet.com/references/xpcomref/ifaces/mozIJSSubScriptLoader.html for more information.

UnAnswered Questions (UAQ)

How can I center image/text within the toolbarbutton element in a xulrunner application?

Issues with relative path in a jar in XUL

How can I create global observers for my XUL applications?

Is there a XUL function that will allow a script to determine the ID or handle of the active window task?

Getting an error in the console when inserting a subtree into a XUL document from another XML.

How can I find more information about TB infrastructure?

Throw an exception from an XSLT

Force browser links

How can I save images using canvas for a Firefox 2.0+ extension?

How can I access custom XPCOM Component from a XULRunner based application?

Can I change the shape of the edge of the Toolbarbutton element?

Custom alert window

Updating observes attribute

Hover Help on Dynamically Generated XUL Elements

Is there an example of scrollingrows.xul from the firefox source?

How do I make my XULRunner application run in front of all my applications on OSX?

Toolbar and side bar syntax problem