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

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ả
Nội dung trích xuất từ tài liệu:
Creating Applications with Mozilla-Chapter 3. XUL Elements and Features- P5 Chapter 3. XUL Elements and Features- P53.9.1. Box AttributesThe XUL element defines a number of attributes and some implicitbehavior for layout. Boxes can be oriented within other boxes to define thegeneral layout of the UI. Some boxes stretch to fit the space available withinthe top-level window or their containing element; others take only as muchspace as needed to display their own children.Attributes on the box and its child elements determine the flexibility of thecontent contained within the box, the way that windows are resized, and thealignment of elements, as Table 3-4 describes.Table 3-4. Common box attributesAttribute Values Default value Description Determines how the children are start | end | center | aligned inalign baseline | stretch | stretch conjunction with inherit the boxs orientation Determines the | flexibility of theflex 0.0 inherit contained elements, whichAttribute Values Default value Description depends on their particular flex values CSS property and Applies CSS stylestyle N/A value settings to the box horizontal | Determines the vertical | inline- layout of theorient inline-axis axis | block-axis | children of the inherit box Determines the use of remaining start | end | center | whitespace oncepack start justify | inherit all other objects are stretched to their full size Determines the normal | reverse | direction of thedirection normal inherit children in the box Controls the orderordinal-group | inherit 1 in which widgetsAttribute Values Default value Description appear in a boxThe attribute names in Table 3-4 (with the exception of style) are defineddirectly on the box. But there are also CSS versions of these properties thatuse the prefix box-. pack becomes box-pack when its defined in CSS,for example. These properties are not part of the CSS specification, so youmay 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 inChapter 4.The most commonly used attributes are orient, align, and pack. Theorientation of the children of a box can be either vertical or horizontal. Thedefault is horizontal for a plain , but not for all box containers( is vertical). The and conveniences werecreated to bypass the use of this attribute and increase box layout efficiencyin the rendering phase.Here is a look at how the pack and align properties can effect the layout ofwidgets. First, here is a bit of code with no constraints: This XUL does not tell the button and text inside where to go, so theyoccupy the default positions shown in Figure 3-9.Figure 3-9. Default box positioningHere 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 effectsThe align value moves the items to the right of the box, whilesimultaneously constraining the button to fit only the text label, makingbetter use of space. pack centers both the items horizontally.3.9.2. Box-Like ContainersThe basic XUL box is represented by the , , and elements, but several more XUL elements are designed as box-likecontainers. They include: • • • • • • • • • • Descriptions of the tabbed box and the group box follow. Additionalinformation on other box widgets can be found in the XUL elementreference in Appendix C.3.9.2.1. Tab boxTab boxes may contain only and elements, asshown in Example 3-16. Beyond this, there is no restriction on the contentthat can go into the panels themselves. For the panels to display contentproperly, there have to be the same number of children and tabs in the tabpanels.Example 3-16. Tabbed panels ...