Flex各种超酷实例代码大全.docx
- 文档编号:8175877
- 上传时间:2023-01-29
- 格式:DOCX
- 页数:122
- 大小:70.24KB
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=
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flex 各种 实例 代码 大全