在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():void10. {11. // Show the picture that was just taken for 2 seconds,12. // then show the webcam capture again13. 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):void20. {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 components002.{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 SkinnableComponent016. {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):void042. {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):void060. {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():String078. {079. if (isCameraOn)080. {081. return "capturing";082. }083. 084. return "normal";085. }086. 087. private function startCamera():void088. {089. isCameraOn = true;090. invalidateSkinState();091. callLater(attachCamera);092. }093. 094. private function attachCamera():void095. {096. camera = Camera.getCamera();097. videoDisplay.attachCamera(camera);098. }099. 100. private function stopCamera():void101. {102. isCameraOn = false;103. invalidateSkinState();104. videoDisplay.attachCamera(null);105. }106. 107. private function takePicture():void108. {109. var bd:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);110. image.source = bd;111. } 112. 113. private function startCameraButton_click(event:MouseEvent):void114. {115. startCamera();116. }117. 118. private function stopCameraButton_click(event:MouseEvent):void119. {120. stopCamera();121. }122. 123. private function takePictureButton_click(event:MouseEvent):void124. {125. takePicture();126. }127. 128. }129.}

源代码

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

 

更多信息

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

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