Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P5

Tham khảo tài liệu creating applications with mozilla-chapter 4. css in mozilla applications-p5, công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P5 Chapter 4. CSS in Mozilla Applications-P54.4.3. Creating Styles for the xFly ButtonsNow that you have created a single custom style for the xFly application,you can see how easy it is to associate cascading style rules with anyelement in your interface. The next logical step is to style the buttons in thexFly sample application, since they make up such a large portion of theinterface itself.When you use the button widget without any extra style information, youalready get a lot of the button-like presentation and behavior. The button hasdifferent looks, for example, when you hover over it and when you click it,and it has a basic three-dimensional shape as seen in Figure 4-9.Figure 4-9. XUL button with no styleA common update to regular XUL buttons is to give them images, like thenavigation buttons in the main Mozilla browser window. Adding the class-based style rule in Example 4-10 to the xFly stylesheet (and, of course, theGIF image itself to the skin subdirectory) will give all the fly buttonsbackground images with flies in them.Example 4-10. Custom styles for buttonsbutton.fly { list-style-image:url(chrome://xfly/skin/btnfly.gif);}button.fly[disabled=true] { list-style-image: url(chrome://xfly/skin/btnfly-dis.gif );}button.fly#hover { list-style-image: url(chrome://xfly/skin/btnfly-hov.gif );}4.4.4. Describing the Skin in RDFAs described in Chapter 6, a manifest must accompany and describe the skinso it can be found and registered. The manifest is an RDF file calledcontents.rdf that sits at the highest level of the skin (i.e., at the top ofthe JAR or immediately under the modern directory when extracted todisk). Since the content, skin, and locale of an application are considereddifferent packages, each must have its own manifest.The listing in Example 4-11 shows the contents.rdf manifest thataccompanies the xFly skin resources in the xfly.jar!/skin/ directory.Example 4-11. Skin manifest for the xFly sample As you can see, the basic form of the manifest is something like, This is theclassic skin we have (given as a direct child of the RDF root element), whichapplies to the following packages: xfly. The second group of RDF in thismanifest provides a list of packages to which the skin should apply. In thecase of the xFly application, all XUL code is a single package. In Mozilla, acontents.rdf file in a package subdirectory of the modern.jar, forexample, would describe the communicator package in a similar way, but itwould be a composite of other package manifests in the theme to create asingle, overarching manifest for the whole theme. Example 4-12 shows themanifest for just the Mozilla communicator package.Example 4-12. Manifest for the communicator package of the modernskin in Mozilla This RDF/XML file describes a skin to the chrome registry so it can beregistered properly. All new packages must be accompanied by these sortsof RDF-based descriptions if they will be made available to users.4.5. What Is Possible in a Skin?In this final section, we describe a few things that make CSS in Mozillaparticularly powerful and cases when this power is curtailed because of thesecurity restrictions.4.5.1. Binding New Widgets to the Interface Using XBLA description of skins wouldnt be complete without a mention of bindingwidgets by using XBL, a very powerful feature of CSS in Mozilla. The -moz-binding keyword described in Table 4-4 is the key to bindingspecial, prefabricated widgets to your XUL. The language in which thesewidgets are defined is another XML-based language called the ExtensibleBindings Language. Chapter 7 describes this language in more detail.To see how XBL works, go back and look at the first style rule for print-button in Example 4-6. The first style statement in that block has a propertycalled -moz- binding. This property defines a binding for the XULelement styled by this style rule. The chrome URL that the -moz-binding property points to is where an XBL-based definition of a printbutton is located.Creating a style rule in which your XUL element (in this case, a button inwhich the ID is print-button) and the use of the -moz-binding to pointto the XBL defines new properties, behavior, or content for that XULelement, you can add to or totally recreate any widget in your interface. Thebinding itself is described in XBL, but XBL also provides structures (such asthe and child elements) in which you candefine new XUL content, new JavaScript, and new XPConnected interfaces.CSS glues the XUL together with the XBL.In the first part of the snippet in Example 4-13, for example, the CSS rulebinds the toolbar button to an XBL binding called menu-button, whichadds a button and an image.Example 4-13. CSS and XBL example// In the CSS:toolbarbutton[type=menu-button] { -moz-binding:url(chrome://global/content/bindings/toolbarbutton.xml#menu-button);}// In the XBL file toolbarbutton.xml: When you use the Modern skin, you can see in Figure 4-10 that the menubutton is a composite of the toolbar button, a dropmarker image resource,and a menupopup making the drop-down history available.Figure 4-10. Modern menu buttonYou might also notice in Example 4-13 that this binding pulls in an externalstylesheet (toolbarbutton.css), which is contained in the section of the binding. This stylesheet provides all thestyles and theme information for a toolbar button, including the type ofmenu-button. More information on stylesheets in XBL can be found inChapter 7.4.5.2. User StylesheetsIn addition to th ...