Creating Applications with Mozilla-Chapter 3. XUL Elements and Features- P6

Tham khảo tài liệu creating applications with mozilla-chapter 3. xul elements and features- p6, 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 3. XUL Elements and Features- P6 Chapter 3. XUL Elements and Features- P63.11. OverlaysAn overlay is a separate file in which additional XUL content can be definedand loaded at runtime. Overlays are often used to define things like menusthat appear in different components or parts of the application.If you are creating a large application or a UI with many elements as a partof your design, the files can easily become large. The size in itself does notrender it ineffective, but it does make the job of the developer a littledifficult when tracking down and changing features. The best way toovercome this size problem is to use overlays. Another reason to useoverlays is to extract information from a certain logical portion of the UI andcontain it in a file of its own. This extraction and containment promotesmodularization and reusability.3.11.1. How to Use OverlaysThe following declaration is the principal method for including reusablecontent in a XUL window.This declaration follows the same syntax as CSS processing instructions.Like other XML processing instructions, it uses a ? at the beginning andend, just inside the braces. The href attribute points to the overlay and usesMozillas chrome:// type URL.To insert content from an overlay, use the same id of an element in thebase file for a similar element in your overlay content, and the overlay willreplace the base file at runtime (or be merged with it, as described later inthis chapter in the Section 3.11.2 section).When the base element is empty, it is replaced with the correspondingoverlay element and any child subcontent. The following toolbar snippetshows a reference placed in a base file:When an overlay is read with the content below, the previous line is replacedwith that content: Overlay files are XUL files with a .xul extension. The content within thatfile has to be contained in an element, which is the root of thedocument. For example, the toolbar is a first level child of the root. //FIXME did we loose content here? Styles from overlays override styles from base XUL files, so be careful not to load master styles in an overlay.3.11.1.1. Dynamic loadingThe usual method for loading overlays, as outlined previously, is to includethe overlay processing instruction in your XUL file. The dynamic loading ofcontent is more subtle, but just as effective. Mozilla has a registry ofoverlays, in the form of an RDF datasource that lives in the chromedirectory. These overlays live in the tree in a directory called overlayinfounder the chrome root.[1] When a new package or component is registered,the overlays that come with it are loaded automatically.Dynamic overlays are commonly used to extend certain parts of the Mozillaapplication itself when new packages are installed that need access points, asdo new language packages and themes, for instance. Certain menus in theUI, for example, are open for third-party authors to add items. Adding thename of your package to Mozillas Tasks menu, for example, provides aconvenient launching point and is handled with dynamic overlays. Chapter 6provides more information on this topic, in the section Section 6.2.3.3.3.11.2. Content PositioningContent positioning is the order in which widgets appear in the UI. Usuallycontent is laid out in the order elements are defined in the XUL file.However, there are a couple of ways to override this ordering in XUL.Continuing with the example of the overlaid toolbar in the previous section,it is possible for both the base definition and the overlaid definition to havechildren. In this instance, the content is merged, with the original contentappearing before the overlaid content by default: If the toolbarbutton above is in the base XUL, then the ordering of thebuttons would be Print, New, Open, and Save. It is possible to change thisordering by using insertbefore, however, as shown in Example 3-21.Example 3-21. Positioning attributes The insertbefore attribute is placed on one of the child items to signifythat it should go before a sibling in the base file. insertbefore takes anelement id as a value and says, in this case, that the New button should gobefore Print. Conversely, you can move an item after it by using theinsertafter attribute. For more precision, you can use position toposition an item absolutely in the sequence of siblings. In Example 3-21, theposition attribute puts the Save button in the second position, so the finalorder is New, Save, Print, and Open.Notes[1] Chapter 9 has more information on RDF datasources. To delve deeper into the chrome layout and install issues, see Chapter 6.3.12. The ExtrasCertain lesser-known elements and features are indispensable to the savvyXUL developer and can add that something extra to Mozilla applications, asshown here.3.12.1. TooltipsTooltips are visual pop ups that appear when you place the cursor over apiece of the UI. The hovering behavior of a tooltip is useful for many things,including abbreviated help and the display of values that are otherwiseobscured in the UI. In the Mozilla application, the most common placeswhere they are used are on toolbar buttons and splitter grippies that dividepanels in the window.To invoke a tooltip, add a tooltiptext attribute to the widget that needsit:Defining this attribute is enough to ensure that the generic Mozilla tip boxappears with the specified text when you place the cursor over the element.Tooltips are actually implemented as an XBL binding. Underneath, a tooltipis essentially a pop up with a description element within that holds text.You can also create your own tooltips.To create your own content and customized appearance for a tooltip: 1. Create the content. 2. Attach it to the pop-up ...