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

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

Thêm vào BST

Báo xấu

73
lượt xem 6
download

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 3. xul elements and features- 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ủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Creating Applications with Mozilla-Chapter 3. XUL Elements and Features- P4

Chapter 3. XUL Elements and Features- P4 Figure 3-7. Checkbox widget Clicking on the box sets the checked attribute, for which the check indicates a positive value. You can set this attribute in script to give the checkbox an initial value. 3.6.3. Buttons A button is a multipurpose widget that commonly lives in toolbars and dialog boxes. The two button elements, and , are essentially the same. Often only the class attribute values distinguish the two. You can use a outside a toolbar or use a inside a toolbar, though in practice, the two usually stay in their respective domains. This flexibility has the nice effect of letting you get the buttons in a particular area by using the getElementsByTagName method with, for example, the tag name "button." A common form of the button contains text and an image, with image on the left and the text to the right by default. However, you may want to take advantage of some of the classes available in Mozilla to define a different orientation, or you can simply write your own style rules for your buttons.[1] The text that appears on the button is contained in the label attribute and shown in this example:
label="New"/> You can associate the image with the button using the src attribute, but the more common way is to use the list-style-image style rule in CSS, as in the following snippet of code that uses the id style selector: #newfileBtn { list-style-image: url("chrome://editor/skin/images/newfile.gif"); } 3.6.3.1. Button types Mozilla provides more than the standard "click" and "go" buttons in its toolkit. Table 3-3 describes the various button types in Mozilla. Table 3-3. Button types Type Usage Description Menu integrated into the Menu type= "menu" button with small arrow icon Menu appears distinct Dual Menu type= "menu-button" from the button, in separate clickable area Checkbox type= "checkbox" When selected, remains
Type Usage Description in a depressed state and toggles back to its natural state when selected again Designed to be part of a Radio type= "radio" group; only one button is selectable at a time Shows/Hides a portion Disclosure dlgtype= "disclosure" of a dialog window Performs the default Default dlgtype= "accept" action for a dialog Closes the dialog and Cancel dlgtype= "cancel" does not carry out the default action Activates context- Help dlgtype= "help" sensitive help Taking one of the button types in Table 3-3 as a mini-case study, you could use a button with the type menu-button to display more than one option at a time. The default orientation for this type of button is for the menu to be to the right of the button. Mozilla uses buttons of type menu-button for its back and forward buttons, in which the menu items hold previously
visited pages. Figure 3-8 shows the appearance of the browser's back button displaying the last several pages viewed. Figure 3-8. menu-button for browser's back functionality Other possible uses include options for different variations of the same feature, such as a New button that displays New File, New Project, or New Template options. The button action is the default option and the menuitems contain the rest of the choices. 3.6.3.2. Dialog buttons The last four items in Table 3-3 are button types that make most sense in, and were designed especially for, dialog windows. The easiest way to include them in dialogs is to use the buttons attribute on the element, which displays them automatically, as shown here:
buttons="accept,cancel,help" buttonpack="center" ondialogaccept="return onAccept( );" ondialogcancel="return onCancel( );" ondialoghelp="return doHelpButton( );"> The functions activated when these buttons are clicked on are defined in the ondialogaccept, ondialogcancel, and ondialoghelp event handler attributes. These event handler shortcuts are best if you simply want to inherit the default button text (Ok, Cancel, and Help). In cases when you want your own text, or want some extra control over the scripting, you can define your own button with the dlgtype attribute: The buttonpack attribute determines whether the buttons appear on the right, left, or center of the window. If no value is given, the default platform orientation takes effect. On Windows, the default is the right, and on Unix, it's the center. Notes [1] Unfortunately, button skins and the class attributes that associate them with button widgets change too often to list here. Some classes like "toolbar-primary" tend to be reused often for buttons in Mozilla, but the best way to find and use classes is to consult the source code itself or to
create your own. 3.7. Widget Interaction At a level above the use of widgets for different, singular functions in the application interface, Mozilla provides tools for hooking things together and creating application logic that can make your interfaces work more consistently and handle more complex tasks. If you have different elements in your application that execute the same function, for example, the command and observer system is the ideal way to facilitate reuse. Or you can use command sets to define command sets and key sets that can be overlaid and made available in different parts of your application, similar to how the cut and paste commands and others are spread over the Mozilla user interface but defined in a centralized file. 3.7.1. Broadcaster and Observers Broadcasters and observers are a mechanism for making any number of elements aware of state and event information from a single, "broadcasting" element. That broadcasting element can be an actual or a regular element that broadcasts its state with special attributes. A common example of broadcasting is the disabling of a group of elements -- a menu item and a separate button for viewing source, for example -- when the source for a web page is not available. The state of a broadcaster has to be changed explicitly for its observers to be updated:
Once a broadcaster is defined, a XUL file may define elements that observe the broadcast command: Observing elements can also be more specific about the attribute they want to mimic. This is done by using the element: The element attribute associates the broadcaster and attribute tells the element to mimic the behavior of the broadcaster's "disabled" attribute. 3.7.2. Commands Any number of commands can be contained in a , and multiple sets can exist for different events in your application. It is also possible for sets to contain other command sets, mixed with commands or on their own. The idea is that there will be one base set that all other sets must
inherit from; this base set can be defined in the top-level XUL file for your application. The following code has a command set that has its own commands and that pulls in a second set defined elsewhere (moreEditItems). The command updater is the mechanism used to pass command events between widgets in the UI. When an event is carried out, the message filters through to the command sets. Thus in the example above, if the select event is activated, all UI elements in this commandset become active. For example, setting the disabled attribute on a command set for saving disables all functional elements depending on it -- such as a menu item, a toolbar button, or a pop-up menu.
There are a number of ways to trigger the command updater. First, associate a widget with a particular command by using the command attribute: When this button is clicked, the command (cmd_cut) is located and carried out, firing the goDoCommand routine for that particular command. Alternatively, your application might have a select event for a text element or an image. When the select event is fired, the message filters through to the command set, which, in turn, updates (by using oncommandupdate) the widgets-associated button with the commands. The element is a container for key elements. Key elements are used to execute commands from a keystroke combination. The keys Ctrl- Shift-s can be defined to execute a Save As command in your application (and that command can actually be defined in a command element): The key element has various special attributes like key, which is used to set an identifier shortcut key, or the modifiers attribute to set the trigger key. For example, modifiers="accel" would be the Ctrl key on Windows and GTK Unix platforms and the command button on Macintosh. Example 3-15 shows a simple window that you can load up that has all element sets: commands, broadcasters, and keys. Example 3-15. Shortcut keys with command observers
3.8. Content Panels Content widgets allow you to load content into the UI for display. These widgets -- browser and editor -- provide a window into which you can load. In the standard browser, these documents can be written in HTML, XML, text, or other supported content types. 3.8.1. Browser and IFrame The element displays online content and provides full browsing capabilities to your application, such as navigation features or maintaining a history. The behind-the-scenes implementation for browser gives you access to certain interfaces that can be used in your scripts. These interfaces include: • nsIDocShell • nsIWebNavigation • nsIMarkupDocumentViewer • nsIContentViewerEdit • nsIContentViewerFile
• nsIWebBrowserFind • nsIDocumentCharsetInfo Without going into detail, these interfaces all provide sophisticated functionality for web browsing and other browser-like services, and are made available to JavaScript in the application interface. You can explore them further by looking at the interfaces themselves -- at the IDL files of the same name in the Mozilla source tree. If you would like to learn more about these available interfaces, the best place to look is the source code. The two recommended files to start with are browser.xml, which shows how the interfaces are exposed, and navigator.js, which shows how they are used. Both files can be browsed on the online Mozilla Cross Reference, at http://lxr.mozilla.org. An alternative to is the . It's similar to the browser widget in appearance, but better suited for simple or ephemeral content. It's often used as a preview window in HTML/XML editors and other WYSIWYG applications. iframes can also be good for dynamic document editing, as in the following example, in which the frame provides access to the document loaded as content. This can then be written to: The document's open( ), write( ), and close( ) methods, which are standard in the JavaScript engine, are used to write to the document: var doc = window.frames[1].document; doc.open( );
doc.write("Come fly with me ..."); doc.close( ); In this code snippet, you get a handle to the particular frame that you want by using window.frames, which returns an array of all frames contained in a document. There can be multiple frames in a document, which are indexed. Here it is assumed that we get the second (1 in a zero-based array) frame. The doc variable has a reference to the content area and uses the methods available on the document object to write content -- in this case, HTML. Ideas for using content panels include:[1] • Create HTML or XML help pages for your application and upload them in a ready-made help browser. • Create a previewer: test your XML, HTML, or CSS layout and styling in Gecko -- one of the most standards-compliant layout engines around. • A slight variation of the previous use, you could use mini-versions inline in dialogs to load up examples that change depending on the selection of the user from a number of choices (a font previewer, for example). • Pop ups contained in a window for display of web content. 3.8.2. Editor
The element loads editable content and can handle text or HTML editing. A good example of its usage is in Mozilla Composer, the HTML editor that comes bundled with Mozilla. The tag creates an instance of the nsEditorBoxObject interface when it's initialized. From that point, you can use JavaScript (via the element.editorShell property) to get to the editorShell methods for carrying out editing on the loaded document. The editor is also used in the various XUL and HTML text widgets in Mozilla, such as textbox and HTML forms, and for composing HTML messages in Mail and News. The text widgets differ from the full-blown editor because they act on a subtree of the document. Also, text widgets have limited text-editing services. Uses for the editor, both practical and speculative, include: • Plain text editor • Web forms editor • An HTML-enabled bulletin board, a guestbook entry form, or a Wiki that is a web interface collaboration area for posting comments • Instant Messaging Keeping Track in Multiframe Documents The content contained in a , , and is treated as a separate document. At times, you may want to access that specific content, so how do you keep track of different content? To return all the content frames in a document, you can use:
var contentAreas = content.frames; There are two ways to access specific content in a script: through the index of the frame within the containing document or by using the id attribute. By index, starting at 0: var content = window.frames[ 1 ]; By id: var content = window.frames[ contentId ]; This code returns the second frame. To flag one as default, use the type attribute and give it a value.
window (a box-based container), using boxes allows you to arrange, nest, and position your widgets the way you want. The box model defines: • How much space elements take up in relation to their siblings and containing elements • The orientation of elements • The relationship of elements to one another Space can be determined in a number of ways. You can constrain size by putting fixed sizes on windows or the widgets contained therein. Or you can let the natural sizes take effect and let the elements size themselves according to their content. Applying boxes to your layout uses space efficiently and optimizes the layout of your XUL windows and dialogs.