Download - NyFUG Skinning Components In Flex 4

Transcript
Page 1: NyFUG Skinning Components In Flex 4

Skinning Components in Flex 4

Theo Rushin JrWeb Application Developer/TrainerTwin Technologies & DoubleBlack Technologies

[email protected]://therush.wordpress.com

Monday, August 31, 2009

Page 2: NyFUG Skinning Components In Flex 4

Agenda

Halo vs Spark ComponentsWhat is Skinning?Skinning ContractsCreating and Applying SkinsExamplesQ&A

Monday, August 31, 2009

Page 3: NyFUG Skinning Components In Flex 4

Halo components are the base set of components that are a part of the Flex 3 framework.

These components have the look and feel of the component directly connected to the logic and methods of the component.

Too much time spent in Actionscript code.

Halo vs Spark Components

Monday, August 31, 2009

Page 4: NyFUG Skinning Components In Flex 4

Spark is the new component architecture found in the Flex 4 framework – based on the Halo system.

The look and feel have been pulled away from the logic and methods.

An MXML-based skin class defines the look and feel of the component.

Halo vs Spark Components (cont.)

Monday, August 31, 2009

Page 5: NyFUG Skinning Components In Flex 4

Skinning (skin ▪ ning): transitive verb1. to cover with or as with skin2. the process of changing a component's

appearance by modifying its visual elements

What is Skinning?

Monday, August 31, 2009

Page 6: NyFUG Skinning Components In Flex 4

The process of skinning in Flex 4 is very different from how it was done in previous versions of Flex.

The skin class not only defines the look and feel but can also define the layout and allow the creation of transitions and effects.

Flex 4 skinning is more powerful, easier, and more intuitive!

What is Skinning? (cont.)

Monday, August 31, 2009

Page 7: NyFUG Skinning Components In Flex 4

Skinning Contracts:What is it?

The Skinning Contract simply defines how the component will display its skin.

The skin class must:define the host componentdeclare the skin statesdefine the appearance of the skin’s parts

The component class must:Define the skin class(es) that it usesIdentify the skin partsIdentify the skin states

Monday, August 31, 2009

Page 8: NyFUG Skinning Components In Flex 4

Skinning Contracts:Defining the Host Component

PropertyBy defining a hostComponent property on the skin class you can access public properties and styles of the host component.

You define the hostComponent property using the <Metadata> tag:

<Metadata>[HostComponent(“spark.components.Button”)]

</Metadata>

Monday, August 31, 2009

Page 9: NyFUG Skinning Components In Flex 4

Skinning Contracts:Using the Host Component Property

<Metadata>[HostComponent(“spark.components.Button”)]

</Metadata>

...

<s:SimpleText text=”{hostComponent.label}” ... />

NOTE: Only works with public properties defined in the host component.

Monday, August 31, 2009

Page 10: NyFUG Skinning Components In Flex 4

Skinning Contracts:Defining the skin states

Skin states define the appearance of the skin when the component is in a particular state.

Declare the skin state with the <states> tag.(optional) Specify the individual states using one or more <State> tags.

<s:states><s:State name=”up” /><s:State name=”down” /><s:State name=”over” />

</s:states>

Monday, August 31, 2009

Page 11: NyFUG Skinning Components In Flex 4

Skinning Contracts:Using the skin states

<s:SparkSkin ...>...<s:states>

<s:State name=”up” /><s:State name=”down” /><s:State name=”over” />

</s:states>...<s:SimpleText id=”labelElement”

color.up=”0xff0000” color.down=”0x00ff00” color.over=”0x0000ff” text.up=”Up” text.down=”Down” text.over=”Over” />

...</s:SparkSkin>

Monday, August 31, 2009

Page 12: NyFUG Skinning Components In Flex 4

Skinning Contracts:Defining the skin parts

Some components define more than one skin part. For example, the NumericStepper declares three parts - up button, down button, and text.

Parts defined in a component can be optional and thus not required.

Use the [SkinPart] metadata to declare a skin part on a component.

[SkinPart(required=”false”)]public var labelElement:TextGraphicElement;

Monday, August 31, 2009

Page 13: NyFUG Skinning Components In Flex 4

Skinning Contracts:Using the skin parts

Parts are identified by their id attribute thus the id of the skin part in the host component MUST match the skin part defined in the skin class.

<s:TextBox id=”labelElement” ... />

Monday, August 31, 2009

Page 14: NyFUG Skinning Components In Flex 4

Creating and Applying Skins

Skins are typically created using Spark skin classes, written in MXML.

The MXML typically uses FXG to draw the graphical elements. You can also use embedded images.

Skins can be applied to components in one of three ways:

Using the skinClass property in MXML.Using the skinClass property in CSS.

Using the setStyle() method and the skinClass property.

Monday, August 31, 2009

Page 15: NyFUG Skinning Components In Flex 4

Creating and Applying Skins:Using the skinClass property in

MXMLSetting the skinClass in MXML only applies the skin to that component instance.

<s:Button id=”btnMyButton” label=”My Button” skinClass=”mySkins.MyButtonSkin” />

Monday, August 31, 2009

Page 16: NyFUG Skinning Components In Flex 4

Creating and Applying Skins:Using the skinClass property in CSS

Setting the skinClass in CSS enables you to apply the skin to all components that use the specified class selector.

.myButtonClass {skinClass:ClassReference(“mySkins.MyButtonSkin”);

}

Monday, August 31, 2009

Page 17: NyFUG Skinning Components In Flex 4

Creating and Applying Skins:Using the skinClass property in

ActionScriptSetting the skinClass in ActionScript applies the skin to a component instance OR to all types of a particular component.

...import mySkins.*...myButton.setStyle(“skinClass”, Class(MyButtonSkin));...

NOTE: You must cast your skin class as a Class.

Monday, August 31, 2009

Page 18: NyFUG Skinning Components In Flex 4

Typically, the structure of your skin class include the following elements:

<s:SparkSkin ...> root tag[hostComponent] metadata<s:states> declaration<fx:Script> blockOne or more graphic elements and/or controls

The easiest way to get started is to copy and alter the source of an existing skin.

You can also use a tool that outputs FXG and copy the output into your custom skin class.

Creating and Applying Skins:Your Custom Skin Class

Monday, August 31, 2009

Page 19: NyFUG Skinning Components In Flex 4

Flash XML Graphics (FXG) is a declarative, xml-based language used for interchanging graphics among application that support it.

FXG can be exported from other Adobe tools such as Fireworks CS4, Adobe Photoshop CS4, and Adobe Illustrator CS4

FXG can be used in MXML or in a standalone document.

Creating and Applying Skins:Using FXG to Define Skins

Monday, August 31, 2009

Page 20: NyFUG Skinning Components In Flex 4

EXAMPLES

How to Skin a Spark Button

How to Add Transitions and Effects

How to Skin An ItemRenderer

Monday, August 31, 2009

Page 21: NyFUG Skinning Components In Flex 4

Q&A Theo Rushin [email protected]

[email protected]

Monday, August 31, 2009