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

Tham khảo tài liệu creating applications with mozilla-chapter 3. xul elements and features- p3, 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- P3Chapter 3. XUL Elements and Features- P3Figure 3-5. Multilevel tree hierarchy3.4.2.4. Using trees in XUL templatesXUL templates are special built-in structures that allow dynamic updating ofXUL elements and that are often used with trees and list boxes. Templatesharness the power of the Resource Description Framework (RDF) to pulldata from external datasources and dynamically create or update content inthe UI. The following code extract shows the basic structure of a XULtemplate for displaying the browser history in Mozilla: For each entry or row in the browser history, the template extractsinformation from the datasource and renders it in a treecell. It thenupdates it each time a page is visited. For a more detailed discussion, refer toChapter 9.3.4.2.5. Custom tree viewsCustom views extend upon the static presentation of data in a tree with moreflexibility, different ways to present the same data, and interfaces fordefining behavior related to content. The functions include intercepting atreeitem selection and carrying out some functionality, populating orgetting values from the tree, and returning the number of rows currently inthe tree.The first thing you have to do to build a custom view is instantiate yourtree and then associate a view object with it, commonly known as a view.document.getElementById(main-tree).treeBoxObject.view=mainView;In this example, the view that is exposed in the nsITreeView XPCOMobject is essentially the lifeline for the tree, supplying the data that populatesthe view. The view is assigned to the code object that contains all thefunctions available to it and your implementation of what you need to dowhen they are activated.Here is a large subset of the functions available to the view object:setTree(tree)Called during initialization and used to connect the tree view to the frontend. This connection ensures that the correct tree is associated with the view.getCellText (row,column) Returns the text of a particular cell, or an empty string if theres just an image in it.rowCount Set up the number of rows that you anticipate for your tree.cycleHeader(index) Called when you click on the header of a particular column.toggleOpenState Put code in here to be carried out when the view is expanded and collapsed.setCellText (row, colID, value) Called when the contents of the cell have been edited.performAction (action) An event from a set of commands can be invoked when you carry out a certain action on the outliner. The tree invokes this method when certain keys are pressed. For example, when the ENTER key is pressed, performAction calls with the enter string.There are more local conveniences in the form of PerformActionOnRowand performActionOnCell.selectionChanged Should be hooked up to the onselect handler of the element in the XUL content.3.4.3. GridA is another XUL table structure, designed to be more flexiblewith the content it can hold than the other tabular widgets. Example 3-12shows a two-column grid that holds text input boxes and labels for them.Example 3-12. XUL grid In a grid, the number of columns needs to be defined and placed in a set. In Example 3-12, the first column holds the labels and thesecond contains the text boxes. These two columns are horizontal to eachother and in rows for easy association. The flex is greater on the secondcolumn, allowing more space for the text input boxes. As with all examplesin this chapter, you can see Example 3-12 in action by adding the XMLprocessing instruction at the top and surrounding the grid in a basic windowroot element.3.5. Words and PicturesThe text widgets described here are used to label other widgets, or simply todisplay messages or instructions to the user in the interface and include atext input widget. Images can be displayed with the main image element orin various ways on other elements, such as buttons or menus.3.5.1. Text InputThe element is a text input box not unlike the HTML element. The default element has a single line.However, setting the multiline attribute makes it into a larger text area.A multiline textbox defaults to three lines unless constricted by a fixed sizeon a container or stretched out with flex. To force the number of lines, usethe rows attribute. If you want to restrict the number of characters inputted,set the size attribute to a numeric value.The initial value of an input widget is blank if no value is specified.Setting the readonly attribute to true or false can control editingaccess.3.5.1.1. AutocompleteAutocompletion is the process of automatically finishing a users input byoffering possible choices, or completions, when something is typed in. InMozilla, this mechanism is simply known as autocomplete, and the textboxwidget is used for this process in such places as the browser URL bar and inthe address area of the mail compose window. Example 3-13 shows the codefrom the Open Web Location dialog, which provides autocompletion.Example 3-13. Text autocomplete The first thing to note is the nested . This pop up holds thechoices in a drop-down format. The relevant attribute in this example istype on the , which has a value of autocomplete.Figure 3-6 shows the autocomplete widget. As the user types the URLinto the textbox, auto completion kicks in and the values are retrieved toshow in the pop-up list, from which the user can then choose. When similarvalues are input regularly, autocom ...