Creating Applications with Mozilla-Chapter 2. Getting Started- P2

Tham khảo tài liệu creating applications with mozilla-chapter 2. getting started- p2, 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 2. Getting Started- P2 Chapter 2. Getting Started- P22.3. Making Mozilla Work for YouThe second Hello World sample, shown in Example 2-4, adds someimportant application features and begins to take advantage of the resourcesthat Mozilla provides for you. This section goes over the ways you canimport stylesheets and Mozilla scripts to make your XUL more sophisticatedand modular. It also prepares you to make an actual application.You can see this example in action by saving the code in Example 2-4 to afile, hello2.xul, and then launching Mozilla and selecting File > OpenFile from the browser. This displays the example as content in the Mozillabrowser, as shown in Figure 2-2.Example 2-4. Sample XUL window height=215 onload=centerWindowOnScreen( )> The difference between Example 2-4 and the first example is the addition ofnew elements, including the script element that brings in MozillaJavaScript functions for use, additional box layout properties, inline stylerules and processing instructions to import stylesheets, and the DOCTYPEdeclaration, which we describe later in this chapter in the section Section2.5.5.3.These extras make your XUL file work more like an application by givingyou access to services and features that already exist in Mozilla. They canalso help you organize your own work into reusable parts, such asapplication stylesheets, widgets, and script libraries, as described later in thischapter in the section Section 2.5.Figure 2-2. The second Hello xFly example loaded in the browser2.3.1. Importing Resources from MozillaThe code in Example 2-4 uses scripts and styles that are already defined inMozilla. As youll see in examples in this book and in the Mozilla sourcecode, the global.css stylesheet is where many basic styles are definedfor XUL widgets. Most XUL widgets have some inherent style, as you cansee in Example 2-1, where the button has a button-like look without anyexplicit style rules or stylesheet imports.As the XPFE has evolved, XUL widgets have used XBL internally to definesome of these inherent looks and behaviors, which has taken some of theresponsibility away from global.css and other CSS files. But thisstylesheet still contains important rules for displaying basic XUL widgets.Its usually a good idea to import this main stylesheet into your application,as described here, and see what it gets you in terms of presentation. If youload Example 2-4 with and without the global.css line, you can see theway that the rules in the stylesheet provide styles for the widgets in theXUL.Similarly, scripts like globalOverlay.js, tasksOverlay.js, anddialogOverlay.js, imported in Example 2-4, provide basic functionsyou can use in your applications.2.3.1.1. Loading stylesheetsIn the second line of Example 2-4, the stylesheet declaration uses achrome:// URL to refer to and load the global.css file. The stylerules in that file give the button widget its widgetness. You can use thestylesheet processing instruction to load Mozilla stylesheets likeglobal.css, navigator.css, and toolbar.css, or you can use itto load your own application stylesheet. In both cases, the chrome://URL allows you to refer to packaged files in a flexible way.Also note the use of an inline style in Example 2-4. The style property onthe label widget gives you a place to define CSS rules directly on widgets.In this case, the label is given a bold font so that it shows up better in thewindow. You could also define this style rule in an external stylesheet andmake that stylesheet part of the package for your application, as we do laterin this chapter in the section Section 2.5.5.2.3.1.2. Accessing script in XULTo access a script in XUL, use the script element and a URL value for itssrc attribute:The dialogOverlay.js script imported into your XUL file in Example2-4 provides access to the CenterWindowOnScreen( ) function. Thisfunction is made available to your XUL file with the line:All functions in dialogOverlay.js are imported into the scope of theXUL file and can be called directly, as CenterWindowOnScreen( ) isin the onload event handler for the XUL window. Note that the functionscontained in an imported JavaScript file are not broadcast in any particularway (though you can see them if you use the JavaScript Debugger). Youmay need to look around in the source code or see how other applicationsimport files to find the functions you need, but the routines you want to usein your application code are probably already available in Mozilla.[1]Notes[1] Unfortunately, no good reference exists for the functions defined in the various scripts files you can import. The functions and their locations within the files continue to change, so finding and using the right ones is sometimes a matter of luck, sometimes a matter of whom you know, and often a matter of testing, determination, and patience.2.4. Displaying XUL Files as ChromeFigure 2-2 shows the XUL file in Example 2-4 loaded into the browsersmain content area. The example features a label widget and an image,both situated within a vbox that lays them out properly in the availablespace. These widgets make up the chrome of your application, the Mozillauser interface that can refer to itself and its resources with the specialchrome:// URL.This example is starting to show off some of the nice features of XPFEprogramming, but it still isnt an application yet. Among other things, youprobably dont want your code to live inside the browser window forever. Asit grows, you may also want to divide it into sensible parts -- a XUL file, aseparate stylesheet, and a script file, for example. The rest of this chapterexplains how to organize and package the code in Example 2-4 and launch itas a standalone window by using the ...