Flash Builder 4 and Flex 4 Bible- P8

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

Thêm vào BST

Báo xấu

108
lượt xem 21
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Flash Builder 4 and Flex 4 Bible- P8: When Macromedia first released Flash MX in 2002, the product was branded as the new way to build Rich Internet Applications (known by the acronym RIA). The term was invented at Macromedia to describe a new class of applications that would offer the benefits of being connected to the Internet, including access to various types of Web-based services, but would solve many of the nagging issues that had been inherent in browser-based applications since the mid-1990s....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Flash Builder 4 and Flex 4 Bible- P8

Chapter 10: Using Layout Containers On the Web The code in Listing 10.5 is available in the Web site files as GroupDemo.mxml in the chapter10 project. n The completed application is shown in Figure 10.8. Using VGroup and HGroup The VGroup and HGroup components share all the features of Group, and add flow-based layout logic. Along with automatic vertical or horizontal alignment, these components implement the fol- lowing properties that determine padding, alignment, and gaps: l verticalAlign. HGroup only. Should be set to top, middle, bottom, justify, or contentJustify. l horizontalAlign. VGroup only. Should be set to left, center, right, justify, or contentJustify. l gap. Should be set to a number of pixels between objects. (This does the same thing as verticalGap and horizontalGap for MX Box containers, but is applied differently depending on which Spark container you’re using: when used with HGroup it’s applied to the horizontal gap, and when used with VGroup it’s applied to the vertical gap.) 321
Part II: Designing Flex Applications FIGURE 10.8 An application with a Group that contains MXML graphics and other Flex components The application in Listing 10.6 declares an HGroup inside a Group. The outer Group implements the border with an MXML graphic; the nested HGroup lays out its child objects (three TextInput controls) from left to right. LISTING 10.6 An application with an HGroup nested inside a Group 322
Chapter 10: Using Layout Containers On the Web The code in Listing 10.6 is available in the Web site files as HGroupDemo.mxml in the chapter10 project. A similar application named VGroupDemo.mxml is included that demonstrates nesting a VGroup inside a Group for vertical layout. n The completed application is shown in Figure 10.9. FIGURE 10.9 An HGroup nested within a Group, containing three TextInput controls Using the Spark BorderContainer The Spark BorderContainer component is designed to be used whenever you need a rectangu- lar container that supports very simple styles but doesn’t require a full component skin. It extends the SkinnableContainer class but typically isn’t used with a custom skin. Unlike the Group components, which are designed exclusively for layout and don’t display borders or background colors, the BorderContainer implements the following styles and default values: l backgroundImage = “undefined” l backgroundImageFillMode = “scale” l borderAlpha = “1.0” l borderColor = “0xB7BABC” l borderStyle = “solid” l borderVisible = “true” l borderWeight = “1” l cornerRadius = “0” l dropShadowVisible = “false” In addition, BorderContainer implements properties named backgroundFill (set to an instance of any class that implements the IFill interface) and borderStroke (set to an instance of any class that implements the IStroke interface). You can mix and match the border and background styles and properties as need to achieve the application’s visual design. 323
Part II: Designing Flex Applications The application in Listing 10.7 displays two instances of the BorderContainer component. The first uses style declarations for its border and background, while the second uses the more complex backgroundFill property to display a gradient fill. LISTING 10.7 An application with two instances of the BorderContainer component On the Web The code in Listing 10.7 is available in the Web site files as BorderContainerDemo.mxml in the chapter10 project. n Figure 10.10 shows the finished application, with the container using simple styles on the left and the version using the complex fill object on the right. 324
Chapter 10: Using Layout Containers FIGURE 10.10 An application displaying two instances of BorderContainer Using Panel Containers Panel containers display a rectangular region that looks like a dialog box. Unlike the MX Box containers and the Spark Group containers, which don’t have any default visual appearance, you use a Panel when you want to wrap content inside a visual presentation that sets it off from the rest of the application. There are two versions of the Panel container: an older MX version that includes the capability to nest a ControlBar as a footer and a newer Spark version that supports declarative skins built with MXML graphics. Cross-Reference The process of skinning Spark components with the SparkSkin class and FXG graphics is described in Chapter 15. n A simple Panel is declared in MXML with a pair of tags. The Panel container’s nested components are declared between the paired tags. This code declares an MX Panel: ... place contents here ... And this code declares a Spark Panel: ... place contents here ... 325
Part II: Designing Flex Applications Panel properties The Panel component shares many properties with the Application container. Just as with other containers, the method you use to determine layout depends on whether you’re working with MX or Spark components. Using the layout property Like the Application component, Panel supports the layout property. The MX version of Panel has a simple layout property that accepts values of absolute, horizontal, and vertical (the default). The Spark Panel component’s layout property is set to an instance of a class that extends a class named LayoutBase. These are the same layout classes used in the Spark Application component, and include l BasicLayout (the default) l VerticalLayout l HorizontalLayout l TileLayout The application in Listing 10.8 uses the Spark version of Panel and sets its layout property to an instance of TileLayout. LISTING 10.8 A Spark Panel using the TileLayout class to present objects in a grid 326
Chapter 10: Using Layout Containers On the Web The code in Listing 10.8 is available in the Web site files as SparkPanelDemo.mxml in the chapter10 project. n Figure 10.11 shows the result: the Panel component’s nested child objects (six Button controls) are laid out in a grid with two controls per row. FIGURE 10.11 A Spark Panel using the TileLayout class to lay out objects in a grid Using the title and status properties Both the MX and the Spark Panel containers implement a title property that places a label in a bold font in the left side of the Panel header. The MX Panel also implements a status prop- erty that places a label in a normal font aligned to the right side of the header. Tip While a Panel looks like a dialog box, it’s typically presented “in-line” with the rest of the application layout, rather than as a pop-up window. When you present pop-up windows, you typically use the MX TitleWindow container or the Alert class, both of which extend the MX version of the Panel container and share its capa- bilities but are specifically designed for that use. There is also a Spark version of the TitleWindow container designed to be used as the superclass for custom pop-up windows in Flex 4 applications. n Cross-Reference The use of pop-up windows is described in Chapter 17. n 327
Part II: Designing Flex Applications Using the MX ControlBar container The MX ControlBar container is designed to be nested as the last component within an MX Panel or a TitleWindow. This container mimics the behavior of the HBox container, laying out its nested components horizontally, and creates a footer region below the other Panel container’s nested objects with a style that matches the title bar. Listing 10.9 shows an MX Panel with a ControlBar that lays out its child controls from left to right. LISTING 10.9 An MX Panel with a ControlBar On the Web The code in Listing 10.9 is available in the Web site files as ControlBarDemo.mxml in the chapter10 project. n Figure 10.12 shows the resulting application. Notice that the Button controls in the ControlBar are laid out horizontally. Tip The MX ControlBar container always lays out its nested components horizontally. If you want to stack objects in a ControlBar vertically or place them with absolute positions, declare a VBox or Canvas con- tainer inside the ControlBar. n 328
Chapter 10: Using Layout Containers FIGURE 10.12 An MX Panel with a ControlBar To separate controls within a ControlBar so that they “glue” themselves to the far left and right edges, add a Spacer control between the controls with a width of 100%: Figure 10.13 shows that the component after the Spacer is pushed to the far right edge of the ControlBar. FIGURE 10.13 An MX ControlBar with a Spacer The invisible Spacer Using Spark panels with control bars The Spark Panel component implements a controlBarContent property that lays out objects horizontally as well. The application in Listing 10.10 uses this property to lay out objects at the bottom of the panel. 329
Part II: Designing Flex Applications LISTING 10.10 A Spark Panel with control bar content On the Web The code in Listing 10.10 is available in the Web site files as SparkControlBarDemo.mxml in the chapter10 project. n Using Constraint-Based Layout Constraint-based layout enables you to place objects on the screen using anchors other than a con- tainer’s top-left corner. You can implement constraint-based layout easily using Flash Builder’s Design mode and Properties view or with a code-based approach. And using the new ConstraintRow and ConstraintColumn classes, you can anchor objects to regions other than the borders of the container. Note Constraint-based layout works only in MX containers that support absolute layout, and Spark components that use the BasicLayout class. When used in the MX versions of the Application, Panel, TitleWindow, or Window containers, the container’s layout property must be set to absolute for constraint properties to have an effect. Because the Canvas container always uses absolute layout, constraint properties work within that container without any other changes to its property values. Constraint-based layout does not work in VBox, HBox, ControlBar, or other containers that don’t support absolute layout. Similarly, constraint-based layout 330
Chapter 10: Using Layout Containers only works in Spark containers that use basic layout (that is, that have their layout property set to an instance of BasicLayout). This includes the Spark versions of Application, WindowedApplication, Window, NavigatorContent, and Group. n Positioning components in Design mode Flash Builder’s Design mode has tools that can create constraint properties through a combination of selecting options in the Properties view and dragging an object with anchors in the MXML edi- tor. Figure 10.14 shows the Constraints interface in the Flex Properties view. This interface appears whenever a component in a container with absolute layout is selected in Design view. FIGURE 10.14 The Constraints interface in the Flex Properties view Follow these steps to create a text logo that’s anchored to the application’s bottom-right corner: 1. Create a new MXML application. 2. If the application opens in Source mode, click the Design button. 3. Drag a Button control from the Components view into the application. Place it any- where on the screen. 4. Set the new Button control’s label property to My Button. 5. In the Constraints interface at the bottom of the Flex Properties view, click in the check boxes in the right anchor and the bottom anchor, as shown in Figure 10.15. 6. Click in the input controls in the constraint interface, and set the bottom and right anchors to 10. You should see in the Constraints interface that the number of pixels from each anchor changes as you drag the Label control in Design view. On the Web The completed version of the preceding exercise is available in the Web site files as UsingConstraints Complete.mxml in the chapter10 project. n 331
Part II: Designing Flex Applications FIGURE 10.15 The Constraints interface Bottom anchor Right anchor Using constraint properties Each visual component supports six constraint properties. Each of the properties is datatyped as a Number and indicates the number of pixels from the named anchor: l left. This property sets the number of pixels from the left edge of the container to the left edge of the nested component. l right. This property sets the number of pixels from the right edge of the container to the right edge of the nested component. l top. This property sets the number of pixels from the top edge of the container to the top edge of the nested component. l bottom. This property sets the number of pixels from the bottom edge of the container to the bottom edge of the nested component. l horizontalCenter. This property sets the number of pixels from the horizontal center of the container to the horizontal center of the nested component. A positive number off- sets the component to the right of the container’s horizontal center; a negative number offsets the component to the left. l verticalCenter. This property sets the number of pixels from the vertical center of the container to the vertical center of the nested component. A positive number offsets the component below the container’s vertical center; a negative number offsets the component above the vertical center. The following code is generated by Design view as the user sets properties in the Constraints inter- face and drags the component around the screen: The right and bottom properties are each set to values of 10 pixels. Each time the user resizes the application, the Label control changes its position relative to the application’s bottom-right corner. 332
Chapter 10: Using Layout Containers Sizing Containers and Controls Four strategies are available to determine the dimensions of a container or control at runtime: l Content. Component dimensions are determined dynamically based on the cumulative size of the component’s child objects. l Absolute. Component dimensions are determined by its width and height properties set to numeric values interpreted as pixels. l Percentage. Component dimensions are determined by percentage of available space. l Constraints. Component dimensions are determined by constraint-based anchor properties. Content-based sizing Content-based sizing means that a container or control expands to accommodate its contents. In the absence of any other sizing properties, this happens automatically. With containers, this means that the container sizes itself to accommodate and display its nested contents. With controls, this means that the control sizes itself to display its internal objects. For example, if you don’t set a Button control’s height or width properties, it sizes itself to display its full label and icon. Default dimensions Each container has a default height and width. For example, if you create a Spark Panel with this code, it has no nested components and no title property that would affect its height or width: Other containers have different default dimensions. In the absence of nested content, the Group, VGroup, and HGroup set their height and width to 0. Minimum and maximum dimensions You can set properties to constrain content-based sizing. These properties set minimum and maxi- mum dimensions to place limits on a container’s capability to dynamically grow and shrink: l minHeight. The container’s minimum height in pixels. l minWidth. The container’s minimum width in pixels. l maxHeight. The container’s maximum height in pixels. l maxWidth. The container’s maximum width in pixels. This Panel container has a minimum width and height of 200 pixels each: ... nested components ... 333
Part II: Designing Flex Applications The container can still expand if its contents require more space, but it can’t contract to less than 200 pixels in either dimension. Absolute sizing Absolute sizing means that you set a component’s width and height properties in absolute pixel values. This Panel container is always displayed as 200 pixels high by 200 pixels wide, regardless of its nested contents: Percentage sizing Percentage sizing means that you set a dimension as a percentage of available space. When you set a component’s size in MXML, you can declare percentage sizing with either the height and width properties or with percentHeight and percentWidth. Percentage sizing with height and width When you set percentage sizing with the height and width properties, you declare the values with a percentage expression, such as 50%. This Label control’s width is 50 percent of the avail- able space within its container: Percentage sizing with percentHeight and percentWidth When you set percentage sizing with the percentHeight and percentWidth properties, you use numeric expressions such as 50. This Label control’s width is also 50 percent of the available space within its container: Note You cannot set the height and width properties to new percentage values at runtime with ActionScript statements. Instead, always use percentHeight and percentWidth in ActionScript. n Note The percentHeight and percentWidth properties return meaningful values only if you’ve previously set them through MXML declarations or ActionScript commands. Their values are not recalculated at runtime. n Using percentage ratios When you declare multiple components within a container and set sizes by percentage, you can declare a total percentage of greater than 100 percent. This VBox contains three TextInput con- trols, each with a width property of 100 percent: 334
Chapter 10: Using Layout Containers It might seem that this means the total width of the nested component is 300 percent and would exceed the available space. Instead, the framework adds up the total percentage values and uses the ratio of the control’s declared percentage value divided by the total to assign an actual percentage based on available space: 100% + 100% + 100% = 300% (the total) For each component: 100% / 300% = 33.33% Note If there is a combination of percentage-based and absolute sizing, space is allotted first to the strict values. Then if the remaining space is not enough to fulfill the percentage-based items, the same ratio division is calcu- lated and applied. n Constraint-based sizing Constraint properties also can be used to control a component’s size. When a component is nested in a container with absolute layout and two constraint properties in the vertical or horizontal dimension are set, the component “stretches” at runtime to keep its edges the correct distance from the two anchors. Listing 10.11 uses a Label control with right and left properties that keep its edges 50 pixels from each of the Application container’s horizontal edges. LISTING 10.11 Using constraint-based sizing continued 335
Part II: Designing Flex Applications LISTING 10.11 (continued) On the Web The code in Listing 10.11 is available in the Web site files as ConstraintSizing.mxml in the chapter10 project. n Figure 10.16 shows the resulting display. When the user resizes the application, the Text control expands and contracts to keep its edges the correct distance from the constraint anchors. FIGURE 10.16 A control with constraint-based sizing 50-pixel left 50-pixel right constraint constraint 336
Chapter 10: Using Layout Containers Creating a Scrolling Region With MX containers, if a container was too small to display its nested contents, by default it dis- played scrollbars that enabled the user to scroll to see the contents. This architecture was easy to use but added a lot of complexity to the container implementations. Spark components that have child objects, such as Group and Panel, follow a different strategy. They don’t generate their own scrollbars. Instead, you add an instance of a Scroller object inside the container whose content you want to scroll. The Scroller object is wrapped around a component that contains the child objects you want to scroll. This component, which can be a Group, HGroup, VGroup, or a custom component, is known as the Scroller object’s viewport. The application in Listing 10.12 displays a Spark Panel that wraps its content in a Scroller and a VGroup. LISTING 10.12 An application with a scrolling panel, implemented with the Spark Scroller class 337
Part II: Designing Flex Applications On the Web The code in Listing 10.12 is available in the Web site files as ScrollerDemo.mxml in the chapter10 project. n Figure 10.17 shows the completed application, with a scrolling region inside the Panel compo- nent’s content area. FIGURE 10.17 A scrolling Panel implemented with the Scroller component Scrollbar created by the Scroller component Caution The Panel itself can also be treated as a viewport for the Scroller, as in this code: ... content children ... The result of this code, however, would be to scroll the entire Panel (rather than just its content). n Cross-Reference You can provide custom skins to the Scroller component to replace its default horizontal and vertical scrollbar components. For more information on skinning of Spark components, see Chapter 15. n 338
Chapter 10: Using Layout Containers Summary In this chapter, I described the use of layout containers, how to size components, and how to use constraint-based layout. You learned the following: l Layout containers are used to position other visual objects on the screen. l The MX layout containers include VBox, HBox, and Canvas. l The Spark layout containers include Group, HGroup, and VGroup. l The HGroup and VGroup containers place their nested components on the screen dynamically by calculating their cumulative size. l The Group container always uses basic layout to place objects based on x and y proper- ties or with constraint-based properties. l The Spark BorderContainer implements styles and properties that enable simple visual displays without having to create a custom skin. l The Panel container creates a dialog-box presentation and supports the same layout property as the Application component. l Constraint properties enable you to place and size objects with anchors to any of a container’s borders or center positions. l Containers can be sized based on content, absolute dimensions, percentage dimensions, or constraints. l Spark components that have content child objects can be made scrollable by wrapping the content children inside a Group, and the Group inside a Scroller component. 339