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

Tham khảo tài liệu creating applications with mozilla-chapter 4. css in mozilla applications-p4, 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-P4Chapter 4. CSS in Mozilla Applications-P44.3.4.3. The communicator skinLike global.css, the communicator.css file (Example 4-8) isanother CSS file that does imports to build up the communicator skin. TheCSS style rules in the file itself are minimal, but if you look at the top, youcan see that many styles that the communicator component uses come fromthe CSS files also located in the communicator subdirectory of thecurrent skin.Example 4-8. CSS information from communicator.css/* ==== communicator.css==================================================== == Styles shared everywhere throughout theCommunicator suite.========================================================================== */@import url(chrome://global/skin/);@importurl(chrome://communicator/content/communicator.css);@importurl(chrome://communicator/skin/brand.css);@importurl(chrome://communicator/skin/button.css);@importurl(chrome://communicator/skin/formatting.css);@namespaceurl(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);/* ::::: online/offline icons ::::: */#offline-status[offline=true] { list-style-image:url(chrome://communicator/skin/icons/offline.gif);}#offline-status { list-style-image:url(chrome://communicator/skin/icons/online.gif);}/* ::::: directional button icons ::::: */.up { min-width: 0px; list-style-image:url(chrome://global/skin/arrow/arrow-up.gif);}.up[disabled=true] { list-style-image:url(chrome://global/skin/arrow/arrow-up-dis.gif);}.down { min-width: 0px; list-style-image:url(chrome://global/skin/arrow/arrow-dn.gif);}.down[disabled=true] { list-style-image:url(chrome://global/skin/arrow/arrow-dn-dis.gif);}.up { list-style-image:url(chrome://global/skin/scroll-up.gif); min-width: 0px;}.up[disabled=true] { list-style-image:url(chrome://global/skin/scroll-up-disabled.gif);}.down { min-width: 0px; list-style-image:url(chrome://global/skin/scroll-down.gif);}.down[disabled=true] { list-style-image:url(chrome://global/skin/scroll-down-disabled.gif);}.sidebarTree { border: none; margin: 0px !important;}/* ::::: download manager ::::: */#downloadView > treechildren:-moz-tree-image(Name){ margin-right: 2px;}Notes[1] There are just a couple of exceptions to this rule. The content directory of a package (typically the place where just the XUL and JS are stored) sometimes holds a file called xul.css. This file defines style information that is so fundamental to the way widgets are rendered -- more fundamental, even, then global.css and its siblings -- that it is set apart from the regular skin and put in with the content, where it is loaded automatically. Its not a good idea to edit this file.4.4. Creating New SkinsYou have already created the highest level of the directory structure you willneed to create a skin for the xFly application (See Creating the Hello xFlyPackage in Chapter 2). So far, you have created three subdirectoriescorresponding to different parts of the package and you have added XUL tothe xfly/content subdirectory. In the xfly/skin subdirectory, youwill tell the xFly content where to expect to find its skin resources. As justmentioned, Mozilla applications outside of the browser itself typicallyrestrict their skin to a single subdirectory and their skin manifest to a singleRDF/XML file.Since the skin subdirectory in your xFly package is already registered, youcan create a new CSS file called xfly.css, save it in the skinssubdirectory, and load it from your xfly.xul file by adding the followingstylesheet loading instruction at the top:You will recall that the chrome pointer in the href resolves to a file namedxfly.css (named after the directory) in the following registered directoryin the chrome:chrome/xfly/skin/This CSS file will be the worksheet for all CSS for the xFly application. Anystyle rules you add here and associated with XUL elements in the xFly XULcode will affect the layout and presentation of that code on restart.4.4.1. Importing the Global SkinAs you create a new skin for your application, the first step is to make surethat the application imports the global skin in which the most basic look andfeel of the XUL widgets is defined. Even if you create a skin that lookscompletely different than the skins installed with Mozilla, you should importthe global skin to avoid having to recreate so much of the basic presentationand behavior of the XUL widgets.As much as possible, the global skin avoids providing theme-specific styles,and instead provides just enough information to make buttons, for example,look like buttons and menu items look like menu items. Increasingly, basicstyles are also being defined in the XBL bindings for widgets. For instance,when you use a toolbar widget, you use a binding in which certainintrinsic looks and behaviors are defined in a way thats transparent to youand to the user of the application. The style for these bindings is located inthe content subdirectories with the binding XML files. In this way, theystay with the widget and not with the selected skin. You can easily extendor overwrite any of the style information you pick up from the global skin,but loading the skin is a good place to start.To do this, verify that you have the following line at the top of thexfly.xul file:If you do not have this line, add it now to the xfly.xul file and restartMozilla. You ought to see a plain, UI-like collection of widgets in the XULwindow. In the screenshots in Figure 4-8, you can see how loading theglobal skin affects the XUL file.Figure 4-8. Stylesheet additions to a XUL fileThe first screenshot in Figure 4-8 shows a XUL file loaded in M ...