XUL XML User Interface Language XUL Firefoxs user

  • Slides: 6
Download presentation
XUL XML User Interface Language

XUL XML User Interface Language

XUL • Firefox’s user interface is in XUL and Java. Script • XUL is

XUL • Firefox’s user interface is in XUL and Java. Script • XUL is a XML grammar to add/modify UI widgets of the browser. • User actions are bound to functionality using Java. Script.

XUL Overlays • Overlays attach other UI widgets to XUL documents at run time.

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 “mypanel” is the new XUL fragment

Chrome URI’s • XUL files are loaded via chrome URI’s chrome: //<package name>/<part>/<file. xul>

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

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/the re.

XUL file <? xml version="1. 0"? > <overlay id="sample" xmlns="http: //www. mozilla. org/keymaster/gatekeeper/the re. 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>