{small lecturenumber - heblocknumber :} XULaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Windowsaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Exampleaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Elementsaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Element exampleaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Other elementsaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Using CSS to control displayaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Using CSS to control displayaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Layoutaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Exampleaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Layoutaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Including HTMLaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Event Handlingaddtocounter {blocknumber}{1}{small lecturenumber - heblocknumber :} Using the DOMaddtocounter {blocknumber}{1}Distributed Software DevelopmentXULChris BrooksDepartment of Computer ScienceUniversity of San FranciscoDepartment of Computer Science — University of San Francisco – p.1/??14-0: XULXUL is an XML-based language designed for building userinterfaces within Mozilla (and Firefox).Pronounced “zool”Uses Javascript for event handling, CSS for displayProvides a rich set of graphical widgetsCan either be loaded as a URL, or installed.Firefox’s extensions are written with XUL.Department of Computer Science — University of San Francisco – p.2/??14-1: WindowsThe primary XUL element is a windowSimilar to a frame in JavaElements are placed within the window.Department of Computer Science — University of San Francisco – p.3/??14-2: Example<?xml version="1.0"?><?xml-stylesheet href="chrome://global/skin/" type="text/css"?><windowid="window1"title="A sample window"orient="horizontal"xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"></window>Department of Computer Science — University of San Francisco – p.4/??14-3: ElementsElements (widgets) are then placed within the window.XUL has all of the typical elements you’d expect, plussome others.Each element is indicated by an XML element.Images can also be included as elements.Department of Computer Science — University of San Francisco – p.5/??14-4: Element example<windowid="findfile-window"title="Find Files"orient="horizontal"align="start"xmlns:html="http://www.w3.org/1999/xhtml"xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><buttonid="identifier" class="dialog"label="OK" default="true" /><button label="Not OK" /><button label="cancel"/><label id="label1" value="here is a label"/></window>Department of Computer Science — University of San Francisco – p.6/??14-5: Other elementsListsTreesmenusspacersStatus barstoolbarsand many, many moreDepartment of Computer Science — University of San Francisco – p.7/??14-6: Using CSS to control displaySince XUL is an XML-based language, we can use CSSto control the visual display of elements.Keeps the XUL simple(r), separates presentation fromfunctionDepartment of Computer Science — University of San Francisco – p.8/??14-7: Using CSS to control displayXUL code:<image id="image1"/><image id="search"/>Style Sheet:#image1list-style-image: url("chrome://findfile/skin/banner.jpg");#searchlist-style-image: url("chrome://findfile/skin/images/search.jpg");Department of Computer Science — University of San Francisco – p.9/??14-8: LayoutXUL uses what’s called the ’box model’ to lay outelements.This is somewhat like Java’s Flow Layout ManagerObjects within a box are arranged horizontally or vertically.Boxes can be nested.Department of Computer Science — University of San Francisco – p.10/??14-9: Example<hbox><button id = "hb1" label="Horiz button 1" /><button id = "hb2" label="Horiz button 2" /></hbox><vbox><button id = "vb1" label="Vert button 1" /><button id = "vb1" label="Vert button 1" /></vbox>Department of Computer Science — University of San Francisco – p.11/??14-10: LayoutYou can also use CSS to specify element sizes.Boxes and elements can also be set to be flexible<hbox flex="1"><button label="Yes" flex="1"/><button label="No"/><button label="I really don’t know one way or the other"/></hbox>Department of Computer Science — University of San Francisco – p.12/??14-11: Including HTMLYou can include HTML formatting inside XULHTML requires its own namespace for HTML tags<windowid="findfile-window"xmlns:html="http://www.w3.org/1999/xhtml"xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><html:ul><html:li> blah </html:li><html:li> blah </html:li><html:li> blah again </html:li></html:ul></window>Department of Computer Science — University of San Francisco – p.13/??14-12: Event HandlingNormally, you will specify Javascript functions to executewhen an event is received by an element.Typically, your XUL file will reference a separate filecontaining Javascript.<windowid="findfile-window"xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><script src="test1.js" /><buttonid="identifier" label="OK"oncommand="doStuff();" /></window>## test1.jsfunction doStuff()var l = document.getElementById(’label1’);l.setAttribute("value", "here’s some content");Department of Computer Science — University of San Francisco – p.14/??14-13: Using the DOMNotice that in the previous Javascript, we accessed anelement by finding its ID.Since XUL is XML, we have access to the DOM tree.This makes it easy to retrieve elements, just as we’vedone previously.You can also use this to alter the UI on the fly by changingthe DOM tree.Department of Computer Science — University of San Francisco –
View Full Document
Unlocking...