1. Trang chủ >
  2. Công Nghệ Thông Tin >
  3. Hệ điều hành >

9  Apply Skins to a Container

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (8.09 MB, 764 trang )










Alternatively, you can supply an IStroke instance for the borderStroke property of a

BorderContainer. The following example sets a borderStroke on a BorderContainer

through MXML markup:


cornerRadius="10" borderStyle="inset">




paddingRight="5" horizontalAlign="justify" />

















The s:SolidColorStroke element supplied as the borderStroke for the BorderCon

tainer overrides any previously declared color or weight style properties. However,

because the IStroke interface does not expose a cornerRadius or borderStyle property,

some border style properties need to be provided directly to the BorderContainer if they

are desired. Because BorderContainer is an extension of SkinnableContainer, skinning

is also supported along with the border convenience styles.

Custom skin classes are set on the SkinnableContainerBase-based containers (such as

BorderContainer) through the skinClass property, whose value can be set either inline

using MXML markup or via CSS, because skinClass is considered a style property.

When you create a custom skin for a container, the skin is entering into a contract with

the container to provide the necessary skin parts and states for the host. These skin

parts are referenced using an agreed-upon id property value and, depending on the type

of skinnable container, relate to content layers for visual elements.

To create a custom skin for a skinnable container, extend the spark.skins.SparkSkin

class and declare the HostComponent metadata and necessary state and skin part elements. The following is an example of a custom skin fulfilling a contract to be applied

to a SkinnableContainer:


xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">



2.9 Apply Skins to a Container | 51



www.it-ebooks.info





[HostComponent("spark.components.SkinnableContainer")]















































/>

/>

/>



/>

/>

/>




width="100%" height="100%"

left="10" right="10" top="10" bottom="10">













The CustomGroupSkin declares the type of container component that the skin will be

applied to within the [HostComponent] metatag. In this example the host component is

a SkinnableContainer, and as such contains a Group container with the id property value

of contentGroup. The contentGroup property of SkinnableContainer is considered a skin

part and represents the content layer on which visual child elements are drawn. Along

with the host component and contentGroup, contractual states are declared to represent

the enabled and disabled visual states of the container. You can declare additional states

as needed, but at a minimum, normal and disabled need to be added to the available

states to support the enabled property of the container. Styles can be applied to elements



52 | Chapter 2: Containers



www.it-ebooks.info



based on these states, as is shown using inline dot notation for the fill type of the

s:Rect element.

To apply the custom skin to a SkinnableContainer instance, set the skinClass style

property to a Class reference either inline or using CSS. The following example applies

the CustomGroupSkin skin inline using a fully qualified class name:


xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">








width="200" height="200"

skinClass="com.oreilly.f4cb.CustomGroupSkin">










click="{container.enabled=!container.enabled}" />





When applying a custom skin, the layout can be set within the skin class (as in this

example). It should be noted, however, that if a layout is applied to a container directly

in MXML markup, that layout will override any layout supplied to the content layer

declared in the skin.

Creating a custom skin for a SkinnableDataContainer that uses data elements to represent children is similar to creating a custom skin for a SkinnableContainer instance.

The difference between the two involves the type of host component declaration and

skin part reference. The following custom skin declares the host component references

as the SkinnableDataContainer class and contains a DataGroup container with the reference id of dataGroup:


xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">



[HostComponent("spark.components.SkinnableDataContainer")]





2.9 Apply Skins to a Container | 53



www.it-ebooks.info















































/>

/>

/>



/>

/>

/>






width="100%" height="100%">




paddingTop="10" paddingBottom="10" />











The CustomDataGroupSkin fulfills a contract with SkinnableDataContainer to provide a

DataGroup instance as the content layer for data elements supplied to the skinnable

container. With the host component metatag and necessary states declared, the custom

skin is applied to a SkinnableDataContainer through the skinClass style property:


xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">





Lorem ipsum dolor sit amet consectetur adipisicing elit.







54 | Chapter 2: Containers



www.it-ebooks.info










itemRenderer="spark.skins.spark.DefaultItemRenderer"

skinClass="com.oreilly.fcb4.CustomDataGroupSkin">




id="collection" source="{txt.split(' ')}" />






click="{container.enabled=!container.enabled}" />





The full extent of skinning and styling possibilities that the Flex 4 SDK provides is

discussed in Chapter 6, but these examples demonstrate the basic contractual agreement that custom skins must fulfill when working with SkinnableContainerBase-based

containers.



2.10 Set the Background Image of a BorderContainer

Problem

You want to set the background image of a BorderContainer and control how the

graphic is applied as a fill.



Solution

Use either the background image style properties of the BorderContainer or the back

groundFill property to apply a BitmapFill directly.



Discussion

The BorderContainer is a convenience container for IVisualElement child elements that

exposes style properties pertaining to the border and background displays of a container not found directly on its superclass, the SkinnableContainer. When using a Skin

nableContainer, border and background styles are handled by a skin class applied to

the container. The BorderContainer class provides style properties for the border and

background that can be set inline in MXML markup or through CSS; it also provides

two properties, borderStroke and backgroundImage, that allow you to apply styles using

graphic elements.



2.10 Set the Background Image of a BorderContainer | 55



www.it-ebooks.info



The following example demonstrates setting the style properties for a background image inline on a BorderContainer:


cornerRadius="10" borderStyle="inset"

backgroundImage="@Embed(source='background.jpg')"

backgroundImageFillMode="{BitmapFillMode.REPEAT}">




paddingRight="5" horizontalAlign="justify" />











Alternatively, the style properties of a BorderContainer can be applied using CSS and

set using the styleName property:



@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

.imageBorder {

backgroundImage: Embed(source='background.jpg');

backgroundImageFillMode: repeat;

}




cornerRadius="10" borderStyle="inset"

styleName="imageBorder">




paddingRight="5" horizontalAlign="justify" />











In the previous examples, an image from the local resource is embedded and supplied

as the backgroundImage style property value. The fill mode for the image is set using the

backgroundImageFillMode style property, which can take three values—clip, scale, and

repeat—all of which are enumerated properties of the BitmapFillMode class. When a

background image is styled with clipping, the image is rendered at its original dimensions within the container. A background image with a scale value for the fill mode is

scaled to the dimensions of the container, and the repeat value repeats the image in a



56 | Chapter 2: Containers



www.it-ebooks.info



Xem Thêm
Tải bản đầy đủ (.pdf) (764 trang)

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×