在Flex 4里创建自定义组件和皮肤

本文来自：http://coenraets.org/blog/2010/01/creating-a-custom-component-and-skins-in-flex-4/

Flex 4里Spark皮肤模块的基本思路是: 完全将组件的行为与其视觉表示（visual representation）解耦开来。你在一个类里编译组件的行为代码，在可互换MXML皮肤类里，编译其视觉表示的代码。这个新的构架降低了重量，并且使得自定义组件更为简单。

 

为了给你们一个简单的范例，我为一些Flex 3范例创建的PhotoInput组件创建了Spark版本（Salesbuilder和 inSync)。有了PhotoInput组件，用户可以使用webcam拍照。

 

下面是PhotoInput组件，配简约皮肤。点击Start Camera（启用照相机）按钮，启用你的webcam，点击Take Picture （拍照）按钮，开始拍照。

< components:PhotoInput skinClass = "skins.PhotoInputSkin" width = "200" />

这是同一个PhotoInput 组件，但是使用了不同的皮肤。点击组件左上角的webcam图标，开始拍照。

< components:PhotoInput skinClass = "skins.PhotoInputSkin2" width = "200" />

 

你可以在主应用程序类中看到，这是同一个PhotoInput组件，使用了两种不同的皮肤：PhotoInputSkin 和PhotoInputSkin2。

 

PhotoInputSkin.mxml 定义如下：

<?xml version="1.0" encoding="utf-8"?> 02.<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 03. xmlns:s="library://ns.adobe.com/flex/spark" 04. xmlns:mx="library://ns.adobe.com/flex/mx"> 05. 06. <!-- host component --> 07. <fx:Metadata> 08. [HostComponent("components.PhotoInput")] 09. </fx:Metadata> 10. 11. <s:states> 12. <s:State name="capturing"/> 13. <s:State name="normal"/> 14. </s:states> 15. 16. <s:layout> 17. <s:VerticalLayout/> 18. </s:layout> 19. 20. <mx:VideoDisplay id="videoDisplay" width="{hostComponent.width}" height="{hostComponent.width}"/> 21. 22. <s:BitmapImage id="image" width="{hostComponent.width}" height="{hostComponent.width}"/> 23. 24. <s:Button id="startCameraButton" label="Start Camera" width="100%" includeIn="normal"/> 25. <s:Button id="stopCameraButton" label="Stop Camera" width="100%" includeIn="capturing"/> 26. <s:Button id="takePictureButton" label="Take Picture" width="100%" includeIn="capturing"/> 27. 28.</s:Skin>

PhotoInputSkin2.mxml 定义如下：

<?xml version="1.0" encoding="utf-8"?> 02.<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 03. xmlns:s="library://ns.adobe.com/flex/spark" 04. xmlns:mx="library://ns.adobe.com/flex/mx"> 05. 06. <fx:Script> 07. <!--[CDATA[ 08. 09. private function takePicture():void 10. { 11. // Show the picture that was just taken for 2 seconds, 12. // then show the webcam capture again 13. image.visible = true; 14. var myTimer:Timer = new Timer(2000, 1); 15. myTimer.addEventListener(TimerEvent.TIMER, timerHandler); 16. myTimer.start(); 17. } 18. 19. private function timerHandler(event:TimerEvent):void 20. { 21. if (currentState == "capturing") image.visible = false; 22. } 23. 24. ]]--> 25. </fx:Script> 26. 27. <fx:Declarations> 28. <mx:SoundEffect id="soundEffect" source="@Embed(source='assets/camera_click.mp3')" useDuration="false" /> 29. </fx:Declarations> 30. 31. <s:states> 32. <s:State name="capturing"/> 33. <s:State name="normal"/> 34. </s:states> 35. 36. <!-- host component --> 37. <fx:Metadata> 38. [HostComponent("components.PhotoInput")] 39. </fx:Metadata> 40. 41. <s:layout> 42. <s:BasicLayout/> 43. </s:layout> 44. 45. <s:Rect radiusX="8" radiusY="8" top="0" bottom="0" left="0" right="0"> 46. <s:fill> 47. <s:LinearGradient rotation="90"> 48. <s:GradientEntry color="0x606060" alpha="1" ratio="0" /> 49. <s:GradientEntry color="0x303030" alpha=".8" ratio="1" /> 50. </s:LinearGradient> 51. </s:fill> 52. </s:Rect> 53. 54. <s:Group top="4" bottom="4" left="4" right="4"> 55. 56. <s:layout> 57. <s:BasicLayout/> 58. </s:layout> 59. 60. <mx:VideoDisplay id="videoDisplay" width="{hostComponent.width - 8}" height="{hostComponent.width}" includeIn="capturing"/> 61. 62. <s:BitmapImage id="image" width="{hostComponent.width - 8}" height="{hostComponent.width}" 63. source="@Embed('assets/male_user_gray.png')" visible.capturing="false"/> 64. 65. <s:Button id="startCameraButton" skinClass="skins.StartWebCamButtonSkin" toolTip="Start Camera"/> 66. <s:Button id="stopCameraButton" skinClass="skins.StopWebCamButtonSkin" includeIn="capturing" toolTip="Stop Camera"/> 67. <s:Button id="takePictureButton" skinClass="skins.TakePictureButtonSkin" label="Take Picture" width="100%" bottom="0" includeIn="capturing" 68. toolTip="Take Picture" 69. mouseDownEffect="{soundEffect}" 70. click="takePicture()"/> 71. 72. </s:Group> 73. 74.</s:Skin>

PhotoInput 类提供组件的基本行为（启动/停止照相机，拍照等），定义如下：

package components 002.{ 003. import flash.display.BitmapData; 004. import flash.events.MouseEvent; 005. import flash.media.Camera; 006. 007. import mx.controls.VideoDisplay; 008. import mx.graphics.ImageSnapshot; 009. 010. import spark.components.Button; 011. import spark.components.supportClasses.SkinnableComponent; 012. import spark.primitives.BitmapImage; 013. 014. [SkinState("capturing")] 015. public class PhotoInput extends SkinnableComponent 016. { 017. private var camera:Camera; 018. 019. private var isCameraOn:Boolean = false; 020. 021. [SkinPart(required="true")] 022. public var videoDisplay:VideoDisplay; 023. 024. [SkinPart(required="true")] 025. public var image:BitmapImage; 026. 027. [SkinPart(required="false")] 028. public var takePictureButton:Button; 029. 030. [SkinPart(required="false")] 031. public var startCameraButton:Button; 032. 033. [SkinPart(required="false")] 034. public var stopCameraButton:Button; 035. 036. public function PhotoInput() 037. { 038. super(); 039. } 040. 041. override protected function partAdded(partName:String, instance:Object):void 042. { 043. super.partAdded(partName, instance); 044. 045. if (instance == startCameraButton) 046. { 047. startCameraButton.addEventListener(MouseEvent.CLICK, startCameraButton_click); 048. } 049. if (instance == stopCameraButton) 050. { 051. stopCameraButton.addEventListener(MouseEvent.CLICK, stopCameraButton_click); 052. } 053. if (instance == takePictureButton) 054. { 055. takePictureButton.addEventListener(MouseEvent.CLICK, takePictureButton_click); 056. } 057. } 058. 059. override protected function partRemoved(partName:String, instance:Object):void 060. { 061. super.partRemoved(partName, instance); 062. 063. if (instance == startCameraButton) 064. { 065. startCameraButton.removeEventListener(MouseEvent.CLICK, startCameraButton_click); 066. } 067. if (instance == stopCameraButton) 068. { 069. stopCameraButton.removeEventListener(MouseEvent.CLICK, stopCameraButton_click); 070. } 071. if (instance == takePictureButton) 072. { 073. takePictureButton.removeEventListener(MouseEvent.CLICK, takePictureButton_click); 074. } 075. } 076. 077. override protected function getCurrentSkinState():String 078. { 079. if (isCameraOn) 080. { 081. return "capturing"; 082. } 083. 084. return "normal"; 085. } 086. 087. private function startCamera():void 088. { 089. isCameraOn = true; 090. invalidateSkinState(); 091. callLater(attachCamera); 092. } 093. 094. private function attachCamera():void 095. { 096. camera = Camera.getCamera(); 097. videoDisplay.attachCamera(camera); 098. } 099. 100. private function stopCamera():void 101. { 102. isCameraOn = false; 103. invalidateSkinState(); 104. videoDisplay.attachCamera(null); 105. } 106. 107. private function takePicture():void 108. { 109. var bd:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay); 110. image.source = bd; 111. } 112. 113. private function startCameraButton_click(event:MouseEvent):void 114. { 115. startCamera(); 116. } 117. 118. private function stopCameraButton_click(event:MouseEvent):void 119. { 120. stopCamera(); 121. } 122. 123. private function takePictureButton_click(event:MouseEvent):void 124. { 125. takePicture(); 126. } 127. 128. } 129.}

源代码

你可以在这里 下载应用程序的源代码：

 

更多信息

如需了解有关皮肤的更多信息，请阅读DevNet.上Ryan Frishberg 的精彩文章。

Flash Builder 4 正式版下载地址：http://g.csdn.net/5128184