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

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

Thêm vào BST

Báo xấu

68
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- p5', 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- P5

Chapter 3. XUL Elements and Features- P5 3.9.1. Box Attributes The XUL element defines a number of attributes and some implicit behavior for layout. Boxes can be oriented within other boxes to define the general layout of the UI. Some boxes stretch to fit the space available within the top-level window or their containing element; others take only as much space as needed to display their own children. Attributes on the box and its child elements determine the flexibility of the content contained within the box, the way that windows are resized, and the alignment of elements, as Table 3-4 describes. Table 3-4. Common box attributes Attribute Values Default value Description Determines how the children are start | end | center | aligned in align baseline | stretch | stretch conjunction with inherit the box's orientation Determines the | flexibility of the flex 0.0 inherit contained elements, which
Attribute Values Default value Description depends on their particular flex values CSS property and Applies CSS style style N/A value settings to the box horizontal | Determines the vertical | inline- layout of the orient inline-axis axis | block-axis | children of the inherit box Determines the use of remaining start | end | center | whitespace once pack start justify | inherit all other objects are stretched to their full size Determines the normal | reverse | direction of the direction normal inherit children in the box Controls the order ordinal-group | inherit 1 in which widgets
Attribute Values Default value Description appear in a box The attribute names in Table 3-4 (with the exception of style) are defined directly on the box. But there are also CSS versions of these properties that use the prefix box-. pack becomes box-pack when it's defined in CSS, for example. These properties are not part of the CSS specification, so you may need to go one step further and use the format -moz-box-pack. These special extensions to CSS are described in the section Section 4.2.3 in Chapter 4. The most commonly used attributes are orient, align, and pack. The orientation of the children of a box can be either vertical or horizontal. The default is horizontal for a plain , but not for all box containers ( is vertical). The and conveniences were created to bypass the use of this attribute and increase box layout efficiency in the rendering phase. Here is a look at how the pack and align properties can effect the layout of widgets. First, here is a bit of code with no constraints:
This XUL does not tell the button and text inside where to go, so they occupy the default positions shown in Figure 3-9. Figure 3-9. Default box positioning Here is a changed box definition with the align and pack attributes set: A noticeable visual difference can be seen in Figure 3-10. Figure 3-10. Box packing and alignment effects The align value moves the items to the right of the box, while simultaneously constraining the button to fit only the text label, making better use of space. pack centers both the items horizontally. 3.9.2. Box-Like Containers
The basic XUL box is represented by the , , and elements, but several more XUL elements are designed as box-like containers. They include: • • • • • • • • • • Descriptions of the tabbed box and the group box follow. Additional information on other box widgets can be found in the XUL element reference in Appendix C. 3.9.2.1. Tab box Tab boxes may contain only and elements, as shown in Example 3-16. Beyond this, there is no restriction on the content that can go into the panels themselves. For the panels to display content properly, there have to be the same number of children and tabs in the tab panels. Example 3-16. Tabbed panels
Example 3-16 shows the main controls used to create a simple three-tab control with content elements on each panel. The tabs are associated with the appropriate panels by their order within the containing element. 3.9.2.2. Status bar A status bar is a horizontal box that appears on the bottom of the screen in many Mozilla applications, including the Mozilla browser itself. It can be used for the same purpose in your application if you need it. The element typically contains icon images and text within one or more elements:
As a box, the statusbar behaves like any other box widget. The panels constrain to their natural sizing and layout attributes such as flex situate all elements within. In this example, the icons appear to the left and right of the bar, while the flexed text panel takes up the remaining space. 3.9.3. Additional Box Features Boxes work in concert with a few other special elements, including the and . These two elements create space between widgets in a box and can be horizontal or vertical depending on the orientation of the box. The separator is a visible divider and the spacer is invisible space. The default size for both of them is small, but they can be given flex, width, and height values like other elements. Used correctly, they can make all the difference in how your UI looks. 3.9.3.1. Visibility You can control the visibility of a box by showing and hiding it in different circumstances -- toggling the appearance of an advanced panel in a dialog, for example, or text that appears after a user selects something. One way to
control visibility is to use the collapsed attribute to cede the space taken by the box to surrounding elements: You can also set the CSS display property to none: The document is rendered as though the element did not exist in the document tree. If you want the space to be maintained but the element to remain invisible, you can use the CSS visibility property: Rendering the space but not the content avoids flicker and UI wobbles when content is being shown and hidden intermittently. 3.9.3.2. Overflow A value of scroll or auto for the CSS overflow property ensures that a scrollbar appears and that the content can be accessed even when it can't be displayed. A value of hidden hides the content outside of the box. The content is not clipped if this value is set to visible, but it will be visible outside the box. This snippet constrains the height of the box but displays a scrollbar when the content exceeds the available space. 3.9.4. Stacks and Decks
A variant and special model of the box is available in the stack and deck elements. Both are boxes, but they lay their children out one on top of the other like a stack of crates or a deck of cards, rather than sequentially. A stack shows all its levels at once. If you have transparency or extra space on one level, you can see underneath. Stacks are useful when you want to add shadows in your content or if you want to create transparent layering effects. If you have a bird's eye view of XUL content, you can see the elements on each layer flowing into each other, like the text on top of an image in Figure 3-11. Figure 3-11. Text stacked on an image Decks show only one level at a time. In Example 3-17, logo3.gif is foremost because the selectedIndex attribute on the deck is set to 2 in a zero- based index. Example 3-17. A deck with three image layers
As Example 3-18 shows, it is possible to switch pages using the DOM by changing the index on the deck. The setAttribute method changes the selectedIndex attribute of the deck element in script and can be executed, for example, when a user clicks a button or in other places in the interface. Example 3-18. Deck layer switching var deck = document.getElementById("fly-deck"); var selected = deck.getAttribute("selectedIndex"); if (!selected) selected = 0; if (selected < 2) { selected = parseInt(selected) + 1; deck.setAttribute("selectedIndex", selected); } else { selected = 0; deck.setAttribute("selectedIndex", selected);
} When applied to the deck in Example 3-17, the code in Example 3-18 continuously flips to the next image in the sequence and returns to the top of the deck when the last image is reached. In this case, there are only three images, so a maximum of 2 is put on the index check. 3.9.4.1. Moveable content At one point in XUL toolkit development, an element called the bulletinboard allowed you to layer child elements one on top of another like its real-world namesake. You could change the coordinates of the child elements on the screen by using the top and left attributes. The order of the children in the XUL content determines the z-ordering on screen. As stack developed and took on much of this functionality, bulletinboard was officially deprecated and some of its properties were merged back into the stack element. As Example 3-19 demonstrates, this was a boon for the stack element, which can use coordinates to position children like its ancestor. The two boxes in the example are positioned at varying distances away from the stack's top left corner. Example 3-19. Content positioning in a stack
You can position the two boxes, each containing an image, in any of the following ways: • By placing the top and left attributes directly on the tags • By setting them via stylesheets using the CSS properties top and left • By using DOM calls in your script Here is some script used to switch the position of the boxes from one location to another by changing the top and left attributes: Box1=document.getElementById("box1") Box1.setAttribute("top","40px") Box1.setAttribute("left","50px") Box2=document.getElementById("box2") Box2.setAttribute("top","20px") Box2.setAttribute("left","40px") 3.10. XUL Attributes Each XUL element has an attributes property that contains an array of all its attributes. This section summarizes some of the general XUL attributes that developers find useful, including debug. 3.10.1. Stretchiness An object becomes flexible when the flex attribute is placed on the element. Flexible objects can shrink or grow as the box shrinks and grows.
Whenever extra space is left over in a box, the flexible objects are expanded to fill that space. Flex is specified as a numerical value, and all flex is relative. For example, a child with a flex of 2 is twice as flexible as a child with a flex of 1, as Example 3-20 shows. The flex attribute is invaluable for positioning elements in the box model. Example 3-20. Flexible buttons 3.10.2. Style The style attribute allows you to apply CSS style properties to your XUL element directly within the content. The attribute lets you access CSS properties (including width, height, min-width, min-height, max-width, and max-height), which give you more control over the size of your widget.
Don't use the style attribute too often, though, especially if you want to have more than one theme for your application. See the section Section 4.2.1.3 in Chapter 4 for information about how this attribute can make your application less modular and, for some, a better way to apply style to your XUL documents. 3.10.3. Persistence The persist attribute preserves the state and appearance of a widget on an attribute-by-attribute basis. This feature is useful for properties that change or are set by users during a session, such as window size and positioning, splitter state, and the visibility of certain elements. When the state of the splitter changes -- when a user handles the and collapses the splitter, for example, and then quits -- the persist attribute preserves the splitter state and its visibility for the next session. 3.10.4. The debug Attribute Many of XUL elements, particularly container elements like box and toolbar, support the debug attribute as a useful tool for developers. If debug is set to true, extra borders are drawn around the element and all its children, with different color coding for each level. This setting can be used to check the orientation and the flexibility of elements. debug displays
horizontal boxes with a blue border and vertical boxes with a red border, for example, making it easy to see subtle differences or layout bugs. The border above the element will be straight for nonflexible elements and grooved for flexible elements.