note for Flex4

in Flex4, the <s:Application>tag's layout is determined by an instance of Layout class.You typically set the application's layout property with an<s:layout> tag,wrapped around an instance of the layout class you want to use.

whenever you save changes to your source code, Flash Builder automatically rebuilds your application using the HTML model file to generate an HTML wrapper.At the same time, it copies the contents of the html-template folder to the output folder that contains the compiled application.

Flash Player "plays" the application with a bit of software known as the ActionScrip Virtual Machine (AVM), is doing the work at runtime, interpreting your ActionScript code and executing the application's functionality.

<fx:Declarations>element:

do not have vusual representation in the application.The <fx:Declarations>element must be a direct child element of the MXML file's root element.because visual container can only contain other visual objects.

ActionScript 3 is the most recent version of the programming language that drives both Flash and Flex.The language recommendation on which it's modeled, ECMAScript, share syntax with languages such as C, C++,C#, and Java.Like these languages, ActionScript has these syntactical features:

1. All identifiers and keywords are case sensitive

2. Keywords are always lowercase

3. Statements end with a ;(semicolon)

4. {}(brace) characters are used to denote code blocks

in ActionScript 3 ,the var keyword is required for all variable declarations.When you declare a variable inside a function, it's always local to the function,it's always local to the function.Variables delclare outside functions always persist for the lifetime of the component or class.

var myStringVar:String;

va myLooseVar:*;

Combining MXML and ActionScript

1.Using the <fx:Script>element

2.Using external ActionScript file:<fx:Script source="calculator.as"/>

The Application component is always declared as the root element of an MXML application file. It represents the top level of the application's containership hierarchy.

Feature:

1.pageTitle

2.backgroundColor

3.controlBarContent: an array of vusual objects that are laid out in a skin part named controlBarGroup and typed as a roup

4.framRate: the number of frames per second at which changes are reflected in Flash Player. The default in Flex is 24 frames/second

5.url: a read-only property returning the URL from which the application SWF file was opened.

FlexGlobals.topLevelApplication referenced the application itself

Passing application parameters:

you pass parameters to the application from the browse using a special Flash Player variable named flashvars.

You can add your own parameters by declaring named properties of the flashvar object: flashvars.state="New";

to retrieve these values at runtim, use the Application object's parameters property: currentState=this.parameters.state;

Setting the layout property:

the new Application component is extended from SkinnableContainer, and uses Flex 4's new component layout architecture.the layout property is set to an instance of a complex object.

The layout property is set to an instance of a class that extends a superclass named LayoutBase. These classes and their built-in properties, styles, and methods allow for flexible and portable customization of layout details.

1.BasicLayout: the default, places objects in the container based on object's positionng properties:x,y,top,bottom,left,right,horizonalCenter, vertiacalCenter

2.HorizontalLayout:Lays out objects in a single row from left to right

3.VerticalLayout:Lays out objects in a single column from top to bottom.

4.TitleLayout:Arranges objects in either rows or columns of equally sized cells.

Declaring Graphics with MXML and FXG

redefine the appearance of visual controls with programmatic skins

Adobe Systems introduced the FXG language to help solve this programming challenge.FXG, which stands for Flash XML Graphics,is an XML-based graphics interchange file format that describes low-level vector graphics, with specific attention paid to how Flash Player renders graphics. you can declare FXG graphics either as part of an MXML file or by incorporating FXG files exported from Creative Suite Products as embedded graphics.You can then mix these FXG graphics with other visual components in a skinning class that determines a component's appearance at runtime.

The CS5 products such as Illustrator and Fireworks are able to export the format,FXG, and the Flex 4 SDK is able to use the exported files.

The FXG specification defines elements named <Graphic>,<Ellipse>,<Line>,<Path>,<Rect>. In an FXG file, you "draw" a shape by declaring an element of the appropriate name and setting its attributes.

spark primitives contains the following ActionScript classes:

Ellipse: draw an elliptical shape,  if its height and width are identical, it draws a circle

line:draw a straight line from one set of coordinates to another

path:draw a shape based on a set of drawing commands,creating multiple shape segments

rect: draw a rectangular shape, if its height and width are identical, it draws a square

include the following classes that are used to group graphics together and embed graphical files in conventional formats such as PNG, GIF, and JPG:

BitmapImage: embeds bitmap data defined in PNG,JPG,GIF

Graphic: nonvisual class that can be used to group multiple FXG graphics together

 

Drawing lines:

the stroke property must be set to an instance of a class that implements the IStroke interface, GradientStroke, SolidColorStroke

using gradient strokes: LinearGradientStroke and RadialGradientStroke

注意每一句后的/ 容易出错

Drawing rectangular and elliptical shapes:

each shape's fill property can be set to an instance of a class that implements the IFill interface, includes:

bitmapFill

LinearGradient

RadialGradient

Solidcolor

horizontalCenter 和 verticalCenter 样式指定在指定的方向上组件的中心点与容器的中心之间的距离（以像素计）；一个负数会从中心向左或向上移动组件。

使用基于限制的布局: top、 bottom、 left、 right、 horizontalCenter 或 verticalCenter

绝对定位:指定 x 和 y 坐标

Drawing arbitrary shapes with the Path class

the path class enables you to declare any shape based on a set of commands that replicate the features of the Flash drawing API. Its data property is a string that executes cusor placement and drawing operations. Each command is notated with a single alphabetical character:

C: draw a cubic Bezier curve(次曲线) the first two values are the first set of control coordinates, the second two vaules are the second set of control coordinates, adn the last two values are the drawing destination.

Q: Draw a quadratic Bezier curve(二次贝塞尔曲线), the first two values are the control coordinates, and the last two are the drawing destination.

H: Draw a horizontal line from the current cursor coordinate to a new X coordinate

v: draw a vertical line from the current cursor coordinate to a new Y coordinate

L: Draw a line from the current cusor position to a set of coordinates.

M: Move the cusor to a set of coordinates.

z: close the path

Reusing graphic elements with <fx:Library> and <fx:Definition> that you use to define graphic elements that can then be reused anywhere in the same MXML document.

<fx:Library> element, you define one or more <fx:Definition>element.Each <fx:Definition> describes a graphic element.

Applying filters:

each of the primitive vector graphic classes supports the filters property, an array of objects derived from one of the classes in the spark.filters package.

notice that the FXG markup generated by Fireworks is considerably more concise than the version created by Illustrator.

use the <s:BitmapGraphic source="@Embed('address')"> tag to embed an FXG graphic with the @Embed() compiler directive

In Flex 4 , skins are now defined as MXML components that are extended from new classes named Skin and SparkSkin.

You can create a new custom skin using the new architecture for any component that includes the new SkinnableComponent class in its inheritance hierarchy. SkinnableComponent extends UIComponent,which means that Spark components can be added as display children of any Spark or MX containers.

Associating the skin with the host component: you create the association with the [HostComponent] metadata tag. This tag takes as its only attribute a string that describes the fully qualified package and name of the component.

Spark components typically implement one or more required skin parts. These are typically used for specific functionality in the component.If you don't declare the required skin parts in your custom skin, the application fails at runtime when it tries to use the skin part; in the case of contentGroup, it fails when it tries to add visual controls declared with MXML to the group upon application startup.