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

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:10

lượt xem
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

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ả

Chủ đề:

Nội dung Text: Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P4

  1. Chapter 4. CSS in Mozilla Applications-P4 The communicator skin Like global.css, the communicator.css file (Example 4-8) is another CSS file that does imports to build up the communicator skin. The CSS style rules in the file itself are minimal, but if you look at the top, you can see that many styles that the communicator component uses come from the CSS files also located in the communicator subdirectory of the current skin. Example 4-8. CSS information from communicator.css /* ==== communicator.css =================================================== = == Styles shared everywhere throughout the Communicator suite. =================================================== ======================= */ @import url("chrome://global/skin/"); @import url("chrome://communicator/content/communicator.css "); @import url("chrome://communicator/skin/brand.css");
  2. @import url("chrome://communicator/skin/button.css"); @import url("chrome://communicator/skin/formatting.css"); @namespace url(""); /* ::::: 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 ::::: */
  3. .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"); }
  4. .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;
  5. } /* ::::: 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. It's not a good idea to edit this file. 4.4. Creating New Skins You have already created the highest level of the directory structure you will need to create a skin for the xFly application (See "Creating the Hello xFly Package" in Chapter 2). So far, you have created three subdirectories corresponding to different parts of the package and you have added XUL to the xfly/content subdirectory. In the xfly/skin subdirectory, you will tell the xFly content where to expect to find its skin resources. As just mentioned, Mozilla applications outside of the browser itself typically restrict their skin to a single subdirectory and their skin manifest to a single RDF/XML file.
  6. Since the skin subdirectory in your xFly package is already registered, you can create a new CSS file called xfly.css, save it in the skins subdirectory, and load it from your xfly.xul file by adding the following stylesheet loading instruction at the top: You will recall that the chrome pointer in the href resolves to a file named xfly.css (named after the directory) in the following registered directory in the chrome: chrome/xfly/skin/ This CSS file will be the worksheet for all CSS for the xFly application. Any style rules you add here and associated with XUL elements in the xFly XUL code will affect the layout and presentation of that code on restart. 4.4.1. Importing the Global Skin As you create a new skin for your application, the first step is to make sure that the application imports the global skin in which the most basic look and feel of the XUL widgets is defined. Even if you create a skin that looks completely different than the skins installed with Mozilla, you should import the global skin to avoid having to recreate so much of the basic presentation and 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, basic styles are also being defined in the XBL bindings for widgets. For instance, when you use a toolbar widget, you use a binding in which certain
  7. intrinsic looks and behaviors are defined in a way that's transparent to you and to the user of the application. The style for these bindings is located in the content subdirectories with the binding XML files. In this way, they "stay with" the widget and not with the selected skin. You can easily extend or 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 the xfly.xul file: If you do not have this line, add it now to the xfly.xul file and restart Mozilla. You ought to see a plain, UI-like collection of widgets in the XUL window. In the screenshots in Figure 4-8, you can see how loading the global skin affects the XUL file. Figure 4-8. Stylesheet additions to a XUL file
  8. The first screenshot in Figure 4-8 shows a XUL file loaded in Mozilla with no skin information. The second is the same XUL file with the global skin loading instruction at the top. The third is a screenshot of that XUL file with an instruction for loading your own stylesheet, which in turn imports the global skin: The CSS information in the skin file sample.css loaded above looks like this: @import url(chrome://global/skin/) box#bbox { background-color: lightgrey; } button#rd { background-color: red; color: white; } Taking advantage of the modularity of Mozilla skins, you can design a decent interface (if the last screenshot above can count as that) with just a few lines of code. Once you import the global skin and see what it buys you in terms of look and feel, you can begin to create your own skin for the xFly, overriding global styles where appropriate, extending them by "cascading" new, more specific style rules for your widgets, or adding new styles. Before you begin to add styles to the xfly.css file, import it (as a blank skin) into xfly.xul so you can see your progress as you go. Add the following line to the top of the xfly.xul file to import the xFly skin from the proper subdirectory of the xFly package:
  9. You won't see anything extra when you quit and restart the application, but you now have the skin structure in place so you can see your work progress. 4.4.2. Getting Started with Custom Styles When you make a new skin, it's a good idea to define the most general styles for your application first. As we described above, more specific CSS rules tend to inherit from more general ones. For the xFly application, the most general aspects of the style are the rules that apply to the xFly windows themselves. You can create styles for all windows using the element name, window, or you can define different classes for windows if your application supports them. In the xfly.xul file, for example, the root element has the attribute class="main", so it will pick up style rules given for window.main, as shown in Example 4-9. The xFly application has both a main window and pop-up windows, so you might create style rules like the ones that follow to establish the basic look of the xFly application. Example 4-9. CSS rules for xFly window window.main { background-color: #cccccc; display: block; overflow: hidden; font: small arial,helvetica,sans-serif,tahoma;
  10. padding: 0px; } window.popup{ background-color: #cccccc; display: block; overflow: hidden; font: small arial,helvetica,sans-serif,tahoma; padding: 2px; width: auto; height: auto; } Now, with the two stylesheets (global.css and the xfly.css) referenced at the top, you already have a window that is starting to look like an application.



Đồng bộ tài khoản