Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to XUL Thuha Nguyen. Overview What is XUL? Benefits of using XUL XUL syntax XUL package XUL elements XUL examples –Menu, menubar –Button.

Similar presentations


Presentation on theme: "Introduction to XUL Thuha Nguyen. Overview What is XUL? Benefits of using XUL XUL syntax XUL package XUL elements XUL examples –Menu, menubar –Button."— Presentation transcript:

1 Introduction to XUL Thuha Nguyen

2 Overview What is XUL? Benefits of using XUL XUL syntax XUL package XUL elements XUL examples –Menu, menubar –Button –Text field –HTML elements More information

3 What is XUL ? XML-based User interface Language (“zool”) Makes UI building easier and faster Cross-platform support Entire Mozilla/Nav5 UI built in XUL Uses W3C standards: HTML 4.0, XML, XML Namespaces, CSS1/2, DOM1/2

4 Why XUL? Provides flexibility and ease of use –Ready-made widgets –Incorporation of W3E standards Offers enough power to build application UI Less expensive than building separate front ends using Windows GUI and Mac GUI. Benefits both developers and consumers

5 XUL Benefits Web/client application developers –Cross-platform UI easily –Cross-device UI quickly –Common UI metaphors (boxes, springs) that web standards lack –Can build small, powerful, quickly-downloadable application by leveraging power of browser instead of duplicating it –Conclusion: throw away your books on Windows, Mac, and Motif or GTK UI development and use lightweight web standards and markup languages instead

6 XUL Benefits (cont.) Consumers: –XUL applications are small, downloaded quickly and therefore save user time –Increase freedom of choice of platform and device –Increase ability to tailor application appearance to own preferences

7 XUL, XPToolkit, XPFE XUL is used to create interface. It is a universe of elements, attributes, syntax, rules and relationships XPToolkit is the finite set of interface-specific elements created in XUL XPFE (cross platform front end) is the front end created from XPToolkit

8 XUL User Interface Elements can be created using XUL: –Input controls (text fields) –Toolbars with buttons or any content –Menus on a menu bar or pop up menus –Tabbed dialogs –Trees for hierarchical or tabular information –Keyboard shortcuts –Progress meter, scrollbar, etc.

9 XUL File Writing a XUL window description is basically the same as writing an HTML content description, except: –Syntax is XML –Unique elements: Widgets Infrastructure

10 XUL Syntax and Rules XUL is case sensitive: all events and attributes must be written in lower case All strings must be double quoted Every XUL widget must use close tags to be well- formed All attributes must have a value XUL file extension:.xul

11 XUL Package A chunk of UI machinery used to create a single window Has five parts: –content: XML description of UI –appearance: look customized with CSS –behavior: defined with JavaScript or C++ –locale: all localizable strings in external DTD –platform: platform specific info

12 XUL Elements Widgets –Small components used to make an interface –Largely self-contained –Window, box, menu, menubars, toolboxes, toolbars, checkbox, scrollbar, titled buttons … Infrastructure –JavaScript event handlers within a widget –Tie widgets together using JavaScript and broadcaster nodes (communicate the changes of state between widgets)

13 XUL and JavaScript XUL interface is a collection of disconnected widgets until programmed JavaScript and/or C++ JavaScript included in XUL or a separate file function InitWindow() { var checkbox = document.getElementByID(“remember”); if (checkbox) checkbox.checked = true; }

14 Building an XUL file XUL file preamble ………..

15 Element Root element in a XUL file and top level of the interface, similar to the tag in HTML Each window is described in a separate file Attributes: –title: name appears in the title bar of window –id: used as identifier so that window can be refered to by scripts –xmlns: xml namespace declaration

16 Element onclick – JavaScript event handler within a widget

17 Element


Download ppt "Introduction to XUL Thuha Nguyen. Overview What is XUL? Benefits of using XUL XUL syntax XUL package XUL elements XUL examples –Menu, menubar –Button."

Similar presentations


Ads by Google