XML
  Home arrow XML arrow Page 2 - An Introduction to XUL Part 6
Dev Shed Forums  
Administration  
AJAX  
Apache  
BrainDump  
DHTML  
Flash  
Java  
JavaScript  
Multimedia  
MySQL  
Oracle  
Perl  
PHP  
Practices  
Python  
Reviews  
Security  
Smartphone Development  
Style-Sheets  
Web Services  
XML  
Zend  
Zope  
Mobile Linux  
App Generation ROI  
IBM® developerWorks  
Forums Sitemap  
E-Commerce Hosting  
Linux Web Hosting  
Managed Hosting  
Small Business Hosting  
VPS Hosting  
Weekly Newsletter

 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid  
Request Media Kit
Contact Us  
Site Map  
Privacy Policy  
Support  
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
XML

An Introduction to XUL Part 6
By: Dan Wellman
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: starstarstarstarstar / 9
    2005-06-27


    Table of Contents:
  • An Introduction to XUL Part 6
  • Stylesheet
  • Customization
  • Adding the Code to our XUL

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      error-file:tidyout.log Del.ici.ous error-file:tidyout.log Digg
      error-file:tidyout.log Blink error-file:tidyout.log Simpy
      error-file:tidyout.log Google error-file:tidyout.log Spurl
      error-file:tidyout.log Y! MyWeb error-file:tidyout.log Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article

     
     
    ADVERTISEMENT


    An Introduction to XUL Part 6 - Stylesheet
    ( Page 2 of 4 )

    Next up, you need to create the stylesheet that will point to the binding:

    menubar.mymenu { 
        -moz-binding: url('example.xml#defaultmenu');
    }

    This simply defines a class of a menubar pointing at the binding id.  This is done with the filename of the binding file followed by the # symbol followed by the id of the binding element you wish to use.  The –moz-binding: prefix is a special CSS property that tells the stylesheet file that you’re binding to an XBL file.  Because the binding file we are using is very basic and contains only one binding element, this could be omitted.  Save this file as bindingexample.css in the same location that the first file was saved.

    Finally, create the XUL file that references the binding style sheet:

    <?xml version="1.0"?>
    <?xml-stylesheet href="example.css" type="text/css"?>
    <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/
      there.is.only.xul">
      <menubar id="xblmenu" class="mymenu"></menubar>
    </window>

    The xml-stylesheet reference points at the CSS file, which in turn points to the binding.  Save this file as bindingexample.XUL, again in the same location as the above two.  You needn’t open this via a chrome URL (although for real-world XBL usage it is advisable), so revert to the command line call used in the first couple of articles.  You should get a very small window containing the default menubar at the top.  As the class has been assigned specifically to the menubar tag, you are free to define menubars in the XUL file that will not inherit the menu items defined in the binding tag.  Add another menubar element to the XUL file without declaring the style class and it should appear as normal beneath the XBL menu:

    <menubar id="nonxblmenu">
        <menu label="special"/>
    </menubar>

    However, if you then assign the second menu to the mymenu class, the menu you have added manually will override the menu elements defined in the XBL file and they will not appear in the second menu.  You can get around this by using the <children/> element in the XBL file.  Add the element beneath the <XUL:menu> elements and then execute the file again.  Now the menus defined in the XBL will be there, with the special menu in the location that the children element appears (i.e. after the other menus).  The power this gives you when designing applications is phenomenal; you can define a default menu set that you want to appear in all of your applications, and then just tweak the XUL files to add any additional menus relevant to the application you’re building.  This promotes code reuse, which is something pushed by all modern programming languages.



     
     
    >>> More XML Articles          >>> More By Dan Wellman
     

       

    XML ARTICLES

    - Flex Array Collection Sort and Filtering
    - The Flex Tree Control
    - Flex List Controls
    - Working with Flex and Datagrids
    - How to Set Up Podcasting and Vodcasting
    - Creating an RSS Reader Application
    - Building an RSS File
    - An Introduction to XUL Part 6
    - An Introduction to XUL Part 5
    - An Introduction to XUL Part 4
    - An Introduction to XUL Part 3
    - An Introduction to XUL Part 2
    - An Introduction to XUL Part 1
    - XML Matters: Practical XML Data Design and M...
    - Practical XML Data Design and Manipulation f...





    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 5 Hosted by Hostway
    Stay green...Green IT