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

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ả
Nội dung trích xuất từ tài liệu:
Creating Applications with Mozilla-Chapter 3. XUL Elements and Features- P4Chapter 3. XUL Elements and Features- P4Figure 3-7. Checkbox widgetClicking on the box sets the checked attribute, for which the checkindicates a positive value. You can set this attribute in script to give thecheckbox an initial value.3.6.3. ButtonsA button is a multipurpose widget that commonly lives in toolbars anddialog boxes. The two button elements, and, are essentially the same. Often only the classattribute 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 niceeffect of letting you get the buttons in a particular area by using thegetElementsByTagName method with, for example, the tag namebutton.A common form of the button contains text and an image, with image on theleft and the text to the right by default. However, you may want to takeadvantage of some of the classes available in Mozilla to define a differentorientation, 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 andshown in this example: label=New/>You can associate the image with the button using the src attribute, but themore 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 typesMozilla provides more than the standard click and go buttons in itstoolkit. Table 3-3 describes the various button types in Mozilla.Table 3-3. Button typesType Usage Description Menu integrated into theMenu type= menu button with small arrow icon Menu appears distinctDual Menu type= menu-button from the button, in separate clickable areaCheckbox type= checkbox When selected, remainsType Usage Description in a depressed state and toggles back to its natural state when selected again Designed to be part of aRadio type= radio group; only one button is selectable at a time Shows/Hides a portionDisclosure dlgtype= disclosure of a dialog window Performs the defaultDefault dlgtype= accept action for a dialog Closes the dialog andCancel dlgtype= cancel does not carry out the default action Activates context-Help dlgtype= help sensitive helpTaking one of the button types in Table 3-3 as a mini-case study, you coulduse a button with the type menu-button to display more than one optionat a time. The default orientation for this type of button is for the menu to beto the right of the button. Mozilla uses buttons of type menu-button forits back and forward buttons, in which the menu items hold previouslyvisited pages. Figure 3-8 shows the appearance of the browsers back buttondisplaying the last several pages viewed.Figure 3-8. menu-button for browsers back functionalityOther possible uses include options for different variations of the samefeature, such as a New button that displays New File, New Project, or NewTemplate options. The button action is the default option and themenuitems contain the rest of the choices.3.6.3.2. Dialog buttonsThe 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 toinclude 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 theondialogaccept, ondialogcancel, and ondialoghelp eventhandler attributes. These event handler shortcuts are best if you simply wantto inherit the default button text (Ok, Cancel, and Help). In cases when youwant your own text, or want some extra control over the scripting, you candefine your own button with the dlgtype attribute:The buttonpack attribute determines whether the buttons appear on theright, left, or center of the window. If no value is given, the default platformorientation takes effect. On Windows, the default is the right, and on Unix,its 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 cons ...