60 likes | 274 Views
XUL. XML User Interface Language. XUL. Firefox’s user interface is in XUL and JavaScript XUL is a XML grammar to add/modify UI widgets of the browser. User actions are bound to functionality using JavaScript. XUL Overlays. Overlays attach other UI widgets to XUL documents at run time.
E N D
XUL XML User Interface Language
XUL • Firefox’s user interface is in XUL and JavaScript • XUL is a XML grammar to add/modify UI widgets of the browser. • User actions are bound to functionality using JavaScript.
XUL Overlays • Overlays attach other UI widgets to XUL documents at run time. • XUL fragments are inserted at specific merge points in the master document. • For example:<statusbar id="status-bar"> <statusbarpanel id="my-panel" label="Hello, World"/> </statusbar> • “status-bar” is the merge point and “my-panel” is the new XUL fragment
Chrome URI’s • XUL files are loaded via chrome URI’s chrome://<package name>/<part>/<file.xul> • The chrome URI has three parts: Package name : Given by user Type of data : Content or Skin or Locale Content : xul and js files Skin : images and css files Locale : DTD and .properties files File name : Path of the file to load
Chrome URI’s… • Chrome URIs are written in chrome.manifest file • Overlays/skin/stylesheets are registered in chrome.manifest file overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
XUL file <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://sample/content/test.js"/> <?xml-stylesheet href="chrome://sample/skin/test.css" type="text/css"?> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="Hello World"/> </statusbar>