Your SlideShare is downloading. ×
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Building with XUL
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building with XUL

2,374

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,374
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Good afternoon ladies and gentleman, my name is Ben Goodger and I’m the lead engineer of the Mozilla Firefox browser. I currently work for Google in Mountain View California. I’m here to talk to you today about XUL, the XML User Interface Language that we built Firefox with. I’m going to give you a brief run through of what XUL is, the benefits it has, show you a little of what developing with XUL and the Mozilla platform looks like, and give you some demos. I’ll also tell you what we’re doing with XUL this year and in the future. At the end there’ll be some time for Q&A.
  • Transcript

    • 1.
      • Building with XUL
      • Ben Goodger
      • Software Engineer, Google Inc.
    • 2. What is XUL?
      • XUL is a powerful language that lets you quickly develop client software
      • XUL is used by Mozilla Firefox, Thunderbird and other software projects.
    • 3. What can XUL do?
      • Extensions (to Firefox, Thunderbird, other applications) - BugMeNot, AdBlock, MiniT, Sage, Enigmail, etc.
      • Applications (like Firefox, Thunderbird, etc)
    • 4. XUL Features
      • XML Syntax
      • Flexible Box Model
      • Wide array of application controls
      • Data binding
      • Rich set of platform services
      • Development supported across numerous platforms
      • Scripting and flexibility with implementation language
      • Tools for section 508 accessibility compliance
      • Localizability
      • Tested and deployed to millions of people
    • 5. Where is XUL going?
      • XUL2.0 (API polish)
      • XULRunner
      • Standardization (via: WHATWG: datagrid, etc, W3C: XUL Box Model in CSS)
    • 6. A Simple XUL Demo
    • 7. What does XUL look like?
      • <?xml version=&quot;1.0&quot;?>
      • <?xml-stylesheet href=&quot;chrome://global/skin/&quot;?>
      • <window id=&quot;test&quot;
      • xmlns=&quot;http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&quot;
      • title=&quot;Hello, World!&quot;>
      • <script type=&quot;application/x-javascript&quot; src=&quot;test.js&quot;/>
      • <vbox flex=&quot;1&quot;>
      • <listbox id=&quot;itemlist&quot; flex=&quot;1&quot;>
      • <listitem label=&quot;Item 1&quot;/>
      • <listitem label=&quot;Item 2&quot;/>
      • </listbox>
      • <hbox>
      • <textbox id=&quot;labelfield&quot; flex=&quot;1&quot;
      • oninput=&quot;validateInput();&quot;/>
      • <button id=&quot;addButton&quot; label=&quot;Add Item&quot;
      • disabled=&quot;true&quot; oncommand=&quot;addItem();&quot;/>
      • </hbox>
      • </vbox>
      • </window>
    • 8. Making XUL Live
      • function addItem() {
      • var listbox = document.getElementById(&quot;itemlist&quot;);
      • var listitem = document.createElement(&quot;listitem&quot;);
      • var labelfield = document.getElementById(&quot;labelfield&quot;);
      • listbox.appendChild(listitem);
      • listitem.label = labelfield.value;
      • labelfield.value = &quot;&quot;;
      • validateInput();
      • labelfield.focus();
      • }
      • function validateInput() {
      • var field = document.getElementById(&quot;labelfield&quot;);
      • var button = document.getElementById(&quot;addButton&quot;);
      • button.disabled = field.value == &quot;&quot;;
      • }
    • 9. Adding Visual Panache
      • Visual style is added using CSS
      • Icons, colors, backgrounds
      • Themes
    • 10. Making your XUL Application Live
      • Networking
      • File I/O
      • Preferences
      • Web Services
      • Extensions
    • 11. Extending XUL
      • XBL is Mozilla’s Extensible Binding Language
      • Create new elements by using others
      • Develop element node apis
      • <binding id=“mytag”> <content> <xul:hbox> <xul:button label=“Button 1”/> <xul:button label=“Button 2”/> </xul:hbox> </content> <implementation> <constructor> alert(“foo”); </constructor> </implementation> </binding>
    • 12. Building XUL Extensions
      • Changing the UI - overlaying the DOM - executing script
    • 13. A XUL Extension to Firefox
      • Adds Session History Strip above browser
      • Thumb strip added using XUL overlays
      • Uses <canvas> to render page thumbnails
    • 14. Packaging XUL Extensions
      • Extension Bundle
      • UI
      • Components
      • Defaults
      • Housekeeping
    • 15. Packaging XUL Applications
      • Application Bundle
      • UI
      • Components
      • Defaults
      • Housekeeping
    • 16. Resources
      • http://www.xulplanet.com
      • news://news.mozilla.org
      • irc://irc.mozilla.org #developers
      • Rapid Application Development with Mozilla
      • Firefox Hacks
    • 17. Why Use XUL
      • Rapid development
      • Easy to learn
      • Rich platform services especially for internet applications
      • Localizable, accessibility compliant
      • Small application size when targeting deployed XULRunner
      • Platform deployed to millions of users
    • 18. Questions?

    ×