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

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

Thêm vào BST

Báo xấu

78
lượt xem 7
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- 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ả

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- P2

Chapter 3. XUL Elements and Features- P2 Figure 3-3. Visual comparison of menu widgets 3.3.2.1. Menus Menus are much more flexible than they first appear to be. They can appear anywhere in the UI, for one thing, and needn't be stuck at the top of the window. They can be in buttons, trees, or just out on their own. Example 3-6 shows 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 ups The pop up manifests as either a or a element. The latter can be used in a number of different ways, but Example 3-7 focuses 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 the id 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 value appears. You can have some script execute when you show and/or hide the pop 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 pop ups, the pop-up set helps organize the free-floating[1] pop-up windows in your application and makes it easy to overlay them or overlay into them as the situation requires. 3.3.2.3. Menu lists
Another manifestation of the pop up is in the use of menu lists. A menu list is a choice of options presented to solicit a single choice, usually in the form of a drop-down menu, for which XUL provides the element. Example 3-8 presents a straightforward menu list with a selection of items to choose from. As in the other pop-up examples, selecting an item executes the 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 regular menu. The menu list can be made editable when the user should be allowed to enter a value not represented in the menu items. In this case, the menulist element definition in Example 3-8 would change to something such as: A true value on the editable attribute allows input in the list. Input can be validated immediately by using the oninput attribute. The addition of
the onchange attribute can be used to carry out an extra script when a new selection 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 Information Many options exist to display hierarchical information in your user interface. The most common are tree-like and table-like structures, both of which are represented by elements in Mozilla's XPFE toolkit. In this section, we look at list boxes, trees, and grids. With the exception of the tree, these elements are not limited in regard to the content they can contain. Currently, the tree only holds text and image content and grids are designed for holding the more diverse content as shown in upcoming examples. 3.4.1. List Boxes is used to display tabular data. Example 3-9 shows a listbox widget with all the basic features, including the definition of the number of columns (listcol), the listbox header (listhead), and a list item (listitem). Example 3-9. Listbox widget
The first thing of note in the markup in Example 3-9 is the rules for the nesting of elements within a listbox structure. The number of columns needs to be set, each with a element, and all have to be wrapped in a set. Example 3-9 has two columns. They are separated by a draggable grippy item, which also acts as a column separator in the header row. The cells for those columns are contained in a grouping. The header is optional and has the same structure as a list item. Once you've put a hierarchy like this in place, you can put the content 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. Listbox 3.4.2. High Performance Trees The widget is suitable only for certain kinds of content. For better scalability and multilevel capabilities, the was created. is an advanced tree widget that was originally designed for the Mail/News component in Mozilla. In its first incarnation, it was called the outliner widget. The tree is designed for high performance in large lists, such as newsgroups, message folders, and other applications where the volume of data is expected 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" in order to display data. 3.4.2.1. Tree features
The implementation of the tree widget is unique in the XUL universe in that it displays its content only when it comes into view, which makes it very efficient for long lists of data. Table 3-1 lists some of the main features of the tree. Table 3-1. Main features of the tree Row features Column features Visual features Plain or hierarchical Each cell can display an Multicolumn rows image preceding text Look of each element Multiselection based on Resizing using mouse (row, cell, image, etc.) is selection ranges dragging defined in CSS Drag and drop, either on Column hiding using Appearance of the drop a row or in between pop-up menu in top- feedback during drag- rows right corner and-drop can be styled Spring loaded containers Reordering using drag- that open after hovering and-drop over a closed container for a second Sorting by clicking on a column header; custom views can implement their own sorting
Even with this rich set of features, however, a tree can display only text and image content. The listbox is more flexible in the type of content that appears in its cells. 3.4.2.2. Tree views In the tree widget, a view is a model for the population and display of data. The view is a flexible feature of the tree that can handle everything from simple data in a content view to more dynamic data from a custom view or an RDF datasource (builder view). Table 3-2 shows the main features of each, using general categories of datasource, speed, and type of usage. Table 3-2. Tree views Content view Builder view Custom view Consumer provides its Rows are built from a Rows are built from an own tree view content model. RDF datasource. implementation. Fast but not as memory The fastest and most efficient (bigger Still fast and efficient. efficient way. footprint). Suitable for small trees; Most difficult to Relatively easy to use. easiest to use. implement. As already mentioned, the tree is used in the Mail/News thread pane, but there are plenty of other places to look for it in Mozilla. Custom views and tree widgets are implemented for the Address Book results, JS Debugger,
DOM Inspector, Bookmarks, and for autocomplete. You can see builder views in History and a content view implementation in Preferences. 3.4.2.3. The tree content model The content in a tree is defined with , , , and tags. Example 3-10 shows a basic column number definition (two in this instance) and a treechildren placeholder that defines the tree body. Example 3-10. Tree base model As in the listbox, a well-defined hierarchy of elements has to be observed. This hierarchy is part of the content model for a tree. The organization of content within a tree enforced by the specific tree elements is listed below. Unlike listbox, nested children are possible for multilevel trees. An example of nested children appears later in this chapter in Example 3- 11.
This element contains a single top-level row and all its descendants. The container attribute is used to mark this row as a container and is optional. The open attribute is used for expanded containers. The row is contained in the element. You may optionally set the properties attribute on the to a whitespace-separated list of properties. A special element used to draw a horizontal separating line. The properties attribute is used to compute the properties that apply to the separator. The element must appear within the element. It specifies the text and properties that apply for a cell. The label attribute is used to set the text for the cell. The optional properties attribute is used to compute the properties that apply to the cell. The ref attribute correlates a cell within an to the column in the tree and is optional. Tying the concepts presented in this section together allows us to present Example 3-11, which shows a multilevel tree with two columns and two top-level rows. Example 3-11. Multilevel tree content view
To create a new sublevel, create another element; inside of it, place a , which, in turn, contains one or more rows and cells. Figure 3-5 illustrates the result of this hierarchy.