Flex各种超酷实例代码大全.docx

Flex各种超酷实例代码大全.docx

《Flex各种超酷实例代码大全.docx》由会员分享，可在线阅读，更多相关《Flex各种超酷实例代码大全.docx（122页珍藏版）》请在冰豆网上搜索。

Flex各种超酷实例代码大全

FlexGumbo中如何利用＜Style/＞自定义Button和TextInput的例子

接下来的例子演示了FlexGumbo中如何利用＜Style/＞自定义Button和TextInput。

编译本例需要5873（4.0.0.5873）或者更新的才可以。

下面是main.mxml：

1.

xmlversion="1.0"encoding="utf-8"?

>

2.

Applicationname="FxGumbo_test"

3.xmlns:

fx="

4.xmlns:

s="library:

//

5.xmlns:

mx="library:

//

6.

layout>

7.

BasicLayout/>

8.

layout>

9.

10.

Style>

11.@namespaces"library:

//

12.@namespacemx"library:

//

13.

14.global{

15.color:

red;

16.fontStyle:

italic;

17.fontWeight:

bold;

18.}

19.

20.s|Button{

21.baseColor:

haloOrange;

22.}

23.

24.mx|Button{

25.baseColor:

haloGreen;

26.}

27.

Style>

28.

29.

VGrouphorizontalCenter="0"verticalCenter="0">

30.

Buttonlabel="I'maSparkButton"/>

31.

Buttonlabel="I'maHaloButton"/>

32.

HRulewidth="100%"/>

33.

TextInputtext="I'maSparkTextInput"/>

34.

TextInputtext="I'maHaloTextInput"/>

35.

VGroup>

36.

37.

RichEditableTextid="sdkVer"

38.editable="false"

39.initialize="sdkVer.text=mx_internal:

:

VERSION;"

40.bottom="10"

41.right="10"/>

42.

43.

Application>

Flex4中如何创建头部背景为图片的Accordion的例子

下面是完整代码（或点击这里察看）：

下面是main.mxml：

1.

xmlversion="1.0"encoding="utf-8"?

>

2.

Applicationname="Halo_Accordion_headerStyleName_skin_test"

3.xmlns:

fx="

4.xmlns:

s="library:

//

5.xmlns:

mx="library:

//

6.

7.

Style>

8.@namespaces"library:

//

9.@namespacemx"library:

//

10.

11..accordionHeaderStyles{

12.skin:

ClassReference（"skins.CustomAccordionHeaderSkin"）;

13.}

14.

Style>

15.

16.

Accordionid="accordion"

17.headerStyleName="accordionHeaderStyles"

18.width="80%"height="80%"

19.horizontalCenter="0"verticalCenter="0">

20.

VBoxlabel="Red"/>

21.

VBoxlabel="Orange"/>

22.

VBoxlabel="Yellow"/>

23.

VBoxlabel="Green"/>

24.

VBoxlabel="Blue"/>

25.

Accordion>

26.

27.

Application>

下面为skins/CustomAccordionHeaderSkin.mxml的代码:

1.

xmlversion="1.0"encoding="utf-8"?

>

2.

SparkSkinname="CustomAccordionHeaderSkin"

3.xmlns:

fx="

4.xmlns:

s="library:

//

5.minWidth="21"minHeight="21"

6.alpha.disabled="0.5">

7.

--states-->

8.

states>

9.

Statename="up"/>

10.

Statename="over"/>

11.

Statename="down"/>

12.

Statename="disabled"/>

13.

Statename="selectedUp"/>

14.

Statename="selectedOver"/>

15.

Statename="selectedDown"/>

16.

Statename="selectedDisabled"/>

17.

states>

18.

19.

--layer1:

fill-->

20.

Rectleft="1"right="1"top="1"bottom="1"alpha="0.6">

21.

fill>

22.

BitmapFillsource="@Embed（'assets/pattern_147.gif'）"/>

23.

fill>

24.

Rect>

25.

26.

--layer2:

filllowlight-->

27.

Rectleft="1"right="1"bottom="1"height="9">

28.

fill>

29.

LinearGradientrotation="90">

30.

GradientEntrycolor="black"alpha="0.0099"/>

31.

GradientEntrycolor="black"alpha="0.0627"/>

32.

LinearGradient>

33.

fill>

34.

Rect>

35.

36.

--layer3:

fillhighlight-->

37.

Rectleft="1"right="1"top="1"height="9">

38.

fill>

39.

SolidColorcolor="white"

40.alpha="0.33"

41.alpha.over="0.22"

42.alpha.down="0.12"/>

43.

fill>

44.

Rect>

45.

46.

--layer4:

highlightstroke（allstatesexceptdown）-->

47.

Rectleft="1"right="1"top="1"bottom="1"excludeFrom="down">

48.

stroke>

49.

LinearGradientStrokerotation="90">

50.

GradientEntrycolor="white"alpha.over="0.22"/>

51.

GradientEntrycolor="0xD8D8D8"alpha.over="0.22"/>

52.

LinearGradientStroke>

53.

stroke>

54.

Rect>

55.

56.

--layer5:

highlightstroke（downstateonly）-->

57.

Rectleft="1"top="1"bottom="1"width="1"includeIn="down">

58.

fill>

59.

SolidColorcolor="black"alpha="0.07"/>

60.

fill>

61.

Rect>

62.

Rectright="1"top="1"bottom="1"width="1"includeIn="down">

63.

fill>

64.

SolidColorcolor="black"alpha="0.07"/>

65.

fill>

66.

Rect>

67.

Rectleft="1"top="1"right="1"height="1"includeIn="down">

68.

fill>

69.

SolidColorcolor="black"alpha="0.25"/>

70.

fill>

71.

Rect>

72.

Rectleft="1"top="2"right="1"height="1"includeIn="down">

73.

fill>

74.

SolidColorcolor="black"alpha="0.09"/>

75.

fill>

76.

Rect>

77.

78.

--layer6:

border-->

79.

Rectleft="0"right="0"top="0"bottom="0"width="69"height="20">

80.

stroke>

81.

SolidColorStrokecolor="0x696969"

82.alpha="1"

83.alpha.over="1"

84.alpha.down="1"/>

85.

stroke>

86.

Rect>

87.

88.

SparkSkin>

Flex4中如何创建自定义Accordion头部的例子

接下来的例子演示了Flex4中如何通过自定义Skin，创建自定义Accordion头部。

下面是完整代码（或点击这里察看）：

下面是main.mxml：

1.

xmlversion="1.0"encoding="utf-8"?

>

2.

Applicationname="Accordion_SparkSkin_headerStyleName_skin_test"

3.xmlns:

fx="

4.xmlns:

mx="library:

//

5.xmlns:

s="library:

//

6.

7.

Style>

8..customAccordionHeadStyles{

9.skin:

ClassReference（"skins.CustomAccordionHeaderSkin"）;

10.}

11.

Style>

12.

13.

Accordionid="accordion"

14.headerStyleName="customAccordionHeadStyles"

15.left="20"right="20"top="20"bottom="20">

16.

VBoxlabel="Red"width="100%"height="100%">

17.

Texttext="Panel1"/>

18.

VBox>

19.

VBoxlabel="Orange"width="100%"height="100%">

20.

Texttext="Panel2"/>

21.

VBox>

22.

VBoxlabel="Yellow"width="100%"height="100%">

23.

Texttext="Panel3"/>

24.

VBox>

25.

VBoxlabel="Green"width="100%"height="100%">

26.

Texttext="Panel4"/>

27.

VBox>

28.

VBoxlabel="Blue"width="100%"height="100%">

29.

Texttext="Panel5"/>

30.

VBox>

31.

Accordion>

32.

33.

Application>

下面是skins/CustomAccordionHeaderSkin.mxml的代码：

1.

xmlversion="1.0"encoding="utf-8"?

>

2.

SparkSkinname="CustomAccordionHeaderSkin"

3.xmlns:

fx="

4.xmlns:

s="library:

//

5.minWidth="21"minHeight="21"

6.alpha.disabled="0.5">

7.

--states-->

8.

states>

9.

Statename="up"/>

10.

Statename="over"/>

11.

Statename="down"/>

12.

Statename="disabled"/>

13.

Statename="selectedUp"/>

14.

Statename="selectedOver"/>

15.

Statename="selectedDown"/>

16.

Statename="selectedDisabled"/>

17.

states>

18.

19.

--layer3:

fill-->

20.

Rectleft="1"right="1"top="1"bottom="1">

21.

fill>

22.

SolidColorcolor="white"

23.color.up="red"

24.color.over="haloOrange"

25.color.down="yellow"

26.color.selectedUp="haloGreen"

27.color.selectedOver="haloBlue"

28.color.selectedDown="purple"/>

29.

fill>

30.

Rect>

31.

32.

--layer4:

filllowlight-->

33.

Rectleft="1"right="1"bottom="1"height="9">

34.

fill>

35.

LinearGradientrotation="90">

36.

GradientEntrycolor="0x000000"alpha="0.0099"/>

37.

GradientEntrycolor="0x000000"alpha="0.0627"/>

38.

LinearGradient>

39.

fill>

40.

Rect>

41.

42.

--layer5:

fillhighlight-->

43.

Rectleft="1"right="1"top="1"height="9">

44.

fill>

45.

SolidColorcolor="0xFFFFFF"

46.alpha="0.33"

47.alpha.over="0.22"

48.alpha.down="0.12"/>

49.

fill>

50.

Rect>

51.

52.

--layer6:

highlightstroke（allstatesexceptdown）-->

53.

Rectleft="1"right="1"top="1"bottom="1"excludeFrom="down">

54.

stroke>

55.

LinearGradientStrokerotation="90">

56.

GradientEntrycolor="0xFFFFFF"alpha.over="0.22"/>

57.

GradientEntrycolor="0xD8D8D8"alpha.over="0.22"/>

58.

LinearGradientStroke>

59.

stroke>

60.

Rect>

61.

62.

--layer6:

highlightstroke（downstateonly）-->

63.

Rectleft="1"top="1"bottom="1"width="1"includeIn="down">

64.

fill>

65.

SolidColorcolor="0x000000"alpha="0.07"/>

66.

fill>

67.

Rect>

68.

Rectright="1"top="1"bottom="1"width="1"includeIn="down">

69.

fill>

70.

SolidColorcolor="0x000000"alpha="0.07"/>

71.

fill>

72.

Rect>

73.

Rectleft="1"top="1"right="1"height="1"includeIn="down">

74.

fill>

75.

SolidColorcolor="0x000000"alpha="0.25"/>

76.

fill>

77.

Rect>

78.

Rectleft="1"top="2"right="1"height="1"includeIn="down">

79.

fill>

80.

SolidColorcolor="0x000000"alpha="0.09"/>

81.

fill>

82.

Rect>

83.

84.

--layer2:

border-->

85.

Rectleft="0"right="0"top="0"bottom="0"width="69"height="20">

86.

stroke>

87.

SolidColorStrokecolor="0x696969"

88.alpha="1"

89.alpha.over="1"

90.alpha.down="1"/>

91.

stroke>

92.

Rect>

93.

94.

SparkSkin>

Flex4中如何创建去除下拉阴影效果Alert的例子

接下来的例子演示了Flex4中如何通过borderSkin样式，去掉Alert的下拉阴影效果。

下面是main.mxml：

1.

xmlversion="1.0"encoding="utf-8"?

>

2.

Applicationname="Halo_Alert_borderSkin_test2"

3.xmlns:

fx="

4.xmlns:

s="library:

//

5.xmlns:

mx="library:

//

6.

7.

Style>

8.@namespaces"library:

//

9.@namespacemx"library:

//

10.

11.mx|Alert{

12.borderSkin:

ClassReference（"skins.CustomPanelBorderSkin"）;

13.}

14.

Style>

15.

16.

Script>

17.

[CDATA[

18.importmx.controls.Alert;

19.

20.protectedfunctionbtn_click（evt:

MouseEvent）:

void{

21.Alert.show（"Thequickbrownfoxjumpsoverthelazydog.","Alerttitle"）;

22.}

23.]]>

24.

Script>

25.

26.

ApplicationControlBarwidth="100%"cornerRadius="0">

27.

Buttonid="btn"

28.label=