Chapter 10: Using Layout Containers 321 <s:stroke> <s:SolidColorStroke color=”#000000” weight=”5”/> </s:stroke> </s:Rect> <s:TextInput text=”TextInput 1” x=”10” y=”10”/> <s:TextInput text=”TextInput 2” x=”70” y=”52”/> <s:TextInput text=”TextInput 3” x=”141” y=”97”/> <! These Rect objects overlap each other with some transparency > <s:Rect width=”100” height=”100” x=”224” y=”144”> <s:fill> <s:SolidColor color=”#999999”/> </s:fill> </s:Rect> <s:Rect width=”100” height=”100” x=”249” y=”169” alpha=”.5”> <s:fill> <s:SolidColor color=”#666666”/> </s:fill> </s:Rect> <s:Rect width=”100” height=”100” x=”274” y=”194” alpha=”.5”> <s:fill> <s:SolidColor color=”#000000”/> </s:fill> </s:Rect> </s:Group> </s:Application> 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.) 16_488959-ch10.indd 32116_488959-ch10.indd 321 3/5/10 2:26 PM3/5/10 2:26 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 322 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 <?xml version=”1.0” encoding=”utf-8”?> <s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/mx”> <s:Group id=”myGroup” width=”600” height=”50” horizontalCenter=”0” top=”20”> <s:Rect width=”100%” height=”100%”> <s:stroke> <s:SolidColorStroke color=”#000000” weight=”5”/> </s:stroke> </s:Rect> <s:HGroup top=”10” left=”10” height=”{myGroup.height-20}” width=”{myGroup.width-20}”> <s:TextInput text=”TextInput 1”/> <s:TextInput text=”TextInput 2”/> <s:TextInput text=”TextInput 3”/> </s:HGroup> </s:Group> </s:Application> 16_488959-ch10.indd 32216_488959-ch10.indd 322 3/5/10 2:26 PM3/5/10 2:26 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 10: Using Layout Containers 323 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. 16_488959-ch10.indd 32316_488959-ch10.indd 323 3/5/10 2:26 PM3/5/10 2:26 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 324 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 <?xml version=”1.0” encoding=”utf-8”?> <s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark”> <s:HGroup gap=”40” top=”20” horizontalCenter=”0”> <s:BorderContainer horizontalCenter=”-257” top=”0” backgroundColor=”#CCCCCC” borderColor=”#000000” borderWeight=”3” width=”283”> <s:Label text=”A BorderContainer with styles” fontSize=”14” fontWeight=”bold” horizontalCenter=”0” verticalCenter=”0”/> </s:BorderContainer> <s:BorderContainer width=”378” borderColor=”#000000” borderWeight=”4”> <s:backgroundFill> <s:RadialGradient> <s:entries> <s:GradientEntry color=”#FFFFFF”/> <s:GradientEntry color=”#999999”/> </s:entries> </s:RadialGradient> </s:backgroundFill> <s:Label text=”A BorderContainer with a backgroundFill object” fontSize=”14” fontWeight=”bold” horizontalCenter=”0” verticalCenter=”0”/> </s:BorderContainer> </s:HGroup> </s:Application> 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. 16_488959-ch10.indd 32416_488959-ch10.indd 324 3/5/10 2:26 PM3/5/10 2:26 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 10: Using Layout Containers 325 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 <Panel> tags. The Panel container’s nested components are declared between the paired tags. This code declares an MX Panel: <mx:Panel title=”My MX Panel”> place contents here </mx:Panel> And this code declares a Spark Panel: <s:Panel title=”My Spark Panel”> place contents here </s:Panel> 16_488959-ch10.indd 32516_488959-ch10.indd 325 3/5/10 2:26 PM3/5/10 2:26 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 326 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 <?xml version=”1.0” encoding=”utf-8”?> <s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/mx” > <s:Panel title=”My Spark Panel” top=”20” horizontalCenter=”0”> <s:layout> <s:TileLayout verticalGap=”10” horizontalGap=”20”/> </s:layout> <s:Button label=”Button 1”/> <s:Button label=”Button 2”/> <s:Button label=”Button 3”/> <s:Button label=”Button 4”/> <s:Button label=”Button 5”/> <s:Button label=”Button 6”/> </s:Panel> </s:Application> 16_488959-ch10.indd 32616_488959-ch10.indd 326 3/5/10 2:26 PM3/5/10 2:26 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 10: Using Layout Containers 327 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 16_488959-ch10.indd 32716_488959-ch10.indd 327 3/5/10 2:26 PM3/5/10 2:26 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 328 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 <?xml version=”1.0” encoding=”utf-8”?> <s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/mx”> <mx:Panel title=”An MX Panel with a ControlBar” horizontalCenter=”0” top=”20” paddingTop=”10” paddingBottom=”10” paddingRight=”10” paddingLeft=”10”> <s:VGroup> <s:Label text=”Text 1”/> <s:Label text=”Text 2”/> <s:Label text=”Text 3”/> </s:VGroup> <mx:ControlBar> <s:Button label=”Button 1”/> <s:Button label=”Button 2”/> <s:Button label=”Button 3”/> </mx:ControlBar> </mx:Panel> </s:Application> 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 16_488959-ch10.indd 32816_488959-ch10.indd 328 3/5/10 2:26 PM3/5/10 2:26 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 10: Using Layout Containers 329 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%: <mx:ControlBar> <s:Button label=”Button 1”/> <mx:Spacer width=”100%”/> <s:Button label=”Button 2”/> </mx:ControlBar> 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. 16_488959-ch10.indd 32916_488959-ch10.indd 329 3/5/10 2:26 PM3/5/10 2:26 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 330 LISTING 10.10 A Spark Panel with control bar content <?xml version=”1.0” encoding=”utf-8”?> <s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/mx” > <s:Panel title=”A Spark Panel with a ControlBar” horizontalCenter=”0” top=”20”> <s:layout> <s:VerticalLayout paddingTop=”10” paddingBottom=”10” paddingRight=”10” paddingLeft=”10”/> </s:layout> <s:Label text=”Text 1”/> <s:Label text=”Text 2”/> <s:Label text=”Text 3”/> <s:controlBarContent> <s:Button label=”Button 1”/> <s:Button label=”Button 2”/> <s:Button label=”Button 3”/> </s:controlBarContent> </s:Panel> </s:Application> 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 16_488959-ch10.indd 33016_488959-ch10.indd 330 3/5/10 2:26 PM3/5/10 2:26 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... the Flex 4 SDK n When you create a new tag set in an MXML document, Flash Builder automatically adds the MX and Spark namespaces declarations associated with their common prefixes: @namespace mx “library://ns.adobe.com /flex/ mx”; @namespace s “library://ns.adobe.com /flex/ spark”; add style declarations here Web Resource The CSS namespace implementation in Flex 4 is... themes to your Flash Builder workspace You can download and purchase themes created by third-party graphic designers through the Adobe Web site at www.adobe.com/go/getflextheme 342 Chapter 11: Using Cascading Style Sheets The Flex framework implements significant parts of the W3C’s CSS recommendation and adds features that make the technology particularly effective for implementing Flex application... application A theme is a combination of CSS declarations and graphical elements, packaged together as precompiled SWC files that can be plugged into a Flex project and its applications Themes are defined in Flash Builder 4 on a per-project basis To change the theme for a Flex project, choose Project ➪ Properties Then, in the Properties dialog box, choose Flex Theme As shown in the following figure, you can... one is a property and the other a style, you’d have to look it up in the product documentation You encounter differences between styles and properties when you set their values in ActionScript or actual style sheet declarations, or when you read about their use in the product documentation Table 11.1 describes some of the differences between styles and properties 343 Part II: Designing Flex Applications... installed on the desktop with Adobe AIR use CSS in exactly the same manner as Flex Web applications 341 Using style selectors Using embedded and external style sheets Controlling styles with ActionScript Creating compiled style sheet files Loading compiled style sheets at runtime Part II: Designing Flex Applications Using Flex Themes The Flex SDK supports a concept of themes, which determine the overall appearance... 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 editor Figure 10. 14 shows the Constraints interface in the Flex Properties view This interface appears whenever... ways depending on its data type New Feature Flex 3 didn’t support the CSS ID selector that enables you to apply a style in an embedded or external style sheet to a single object by its id property As described later in this chapter, Flex 4 applications now have this capability, so you can now choose between using ID selectors and inline style declarations n 344 Chapter 11: Using Cascading Style Sheets... in the latter context, all code samples in this chapter follow that standard n Understanding CSS namespaces The Flex 4 SDK includes components from multiple namespaces In CSS declarations, you have to be specific about which component you’re applying a style to For example, there are both MX and Spark versions of Button, Panel, and other visual components A style declaration must be specific about... The Halo and AeonGraphical themes represent the older Flex 3 default application appearance When you use these themes, the older MX components support all of the traditional styles, including borders, background colors, and others When you use the new Spark-based themes (Spark and Wireframe), only the newer styles are supported The Flex theme architecture enables graphic designers to create and distribute... or more style and value Flash Builder can create a new style sheet for you in a couple of ways: l As a new blank style sheet file l By exporting existing styles from Design view to a new external style sheet Creating a blank style sheet To create a new blank style sheet, choose File ➪ New ➪ CSS File from the Flash Builder menu, or right-click on a folder in the Package Explorer view and choose New . simple styles on the left and the version using the complex fill object on the right. 16 _48 8959-ch10.indd 3 241 6 _48 8959-ch10.indd 3 24 3/5/10 2:26 PM3/5/10. layout easily using Flash Builder s Design mode and Properties view or with a code-based approach. And using the new ConstraintRow and ConstraintColumn