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

Tham khảo tài liệu creating applications with mozilla-chapter 3. xul elements and features- 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 3. XUL Elements and Features- P2Chapter 3. XUL Elements and Features- P2Figure 3-3. Visual comparison of menu widgets3.3.2.1. MenusMenus are much more flexible than they first appear to be. They can appearanywhere in the UI, for one thing, and neednt be stuck at the top of thewindow. They can be in buttons, trees, or just out on their own. Example 3-6shows the basic structure of a menu.Example 3-6. A sample menu There is a rigid ordering of nesting in a menu. A menu contains a, which in turn contains one or more menu items.Optionally, you can segregate groups of menu items by using a in the pop up, which draws a thin line between items.3.3.2.2. Pop upsThe pop up manifests as either a or a element.The latter can be used in a number of different ways, but Example 3-7focuses on its common use in context menus.Example 3-7. Context menu using pop up A couple of extra steps are needed to prepare a context pop up for activation.First, you must attach the popup element to a widget in the UI by using theid of the pop up that must correspond to the context of the widget:When the toolbar is clicked, the pop up that corresponds to that valueappears. You can have some script execute when you show and/or hide thepop up by using the onpopupshowing and onpopuphiding methods,as when you show and hide items in a dynamic menu.The second step includes the pop up in a set of pop ups, enclosed in a element. Though not strictly necessary as a container for popups, the pop-up set helps organize the free-floating[1] pop-up windows inyour application and makes it easy to overlay them or overlay into them asthe situation requires.3.3.2.3. Menu listsAnother manifestation of the pop up is in the use of menu lists. A menu listis a choice of options presented to solicit a single choice, usually in the formof a drop-down menu, for which XUL provides the element.Example 3-8 presents a straightforward menu list with a selection of items tochoose from. As in the other pop-up examples, selecting an item executesthe code defined in the oncommand event handler for that item (e.g.,changeF(1) for the menu item Tachinidae).Example 3-8. XUL menu list The menulist widget provides functionality beyond that of a regularmenu. The menu list can be made editable when the user should be allowedto enter a value not represented in the menu items. In this case, themenulist element definition in Example 3-8 would change to somethingsuch as:A true value on the editable attribute allows input in the list. Input canbe validated immediately by using the oninput attribute. The addition ofthe onchange attribute can be used to carry out an extra script when a newselection is made.Notes[1] Free-floating because their location in the interface is not determined by their position in the XUL markup, as it usually is for items like menus and buttons.3.4. Tabular and Hierarchical InformationMany options exist to display hierarchical information in your user interface.The most common are tree-like and table-like structures, both of which arerepresented by elements in Mozillas XPFE toolkit. In this section, we lookat list boxes, trees, and grids. With the exception of the tree, these elementsare not limited in regard to the content they can contain. Currently, the treeonly holds text and image content and grids are designed for holding themore diverse content as shown in upcoming examples.3.4.1. List Boxes is used to display tabular data. Example 3-9 shows alistbox widget with all the basic features, including the definition of thenumber of columns (listcol), the listbox header (listhead), and alist item (listitem).Example 3-9. Listbox widget The first thing of note in the markup in Example 3-9 is the rules for thenesting of elements within a listbox structure. The number of columnsneeds to be set, each with a element, and all have to bewrapped in a set. Example 3-9 has two columns. They areseparated by a draggable grippy item, which also acts as a columnseparator in the header row. The cells for those columns are contained in a grouping. The header is optional and has the same structureas a list item. Once youve put a hierarchy like this in place, you can put thecontent you want into the tabular structure. The listbox does not support multilevel/nested rows. Also note that the class attribute example above is what gives the tree much of its particular appearance. Listboxes and trees often use class-based style rules for their appearance and positioning (e.g., the column splitter in Example 3-9).Example 3-9 creates the listbox in Figure 3-4.Figure 3-4. Listbox3.4.2. High Performance TreesThe widget is suitable only for certain kinds of content. Forbetter scalability and multilevel capabilities, the was created. is an advanced tree widget that was originally designed for theMail/News component in Mozilla. In its first incarnation, it was called theoutliner widget.The tree is designed for high performance in large lists, such as newsgroups,message folders, and other applications where the volume of data isexpected to be high. The tree widget has a simpler, more lightweight layout,but it is more difficult to use, requiring the addition of special views inorder to display data.3.4.2.1. Tree featuresThe implementation of the tree widget is unique in the XUL universe in thatit displays its content only when it comes into view, which makes it veryefficient for long lists of data. Table 3-1 lists some of the main features ofthe tree.Table 3-1. Main features of the treeRow features Column features Visual featuresPlain or hierarchical ...