Flex Examples
The following example shows how you can use an embedded font with the Flex ColorPicker control by setting the fontFamily style.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/06/15/using-an-embedded-font-with-the-colorpicker-control-in-flex/ --> <mx:Application name="ColorPicker_fontFamily_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Base 02"); fontFamily: Base02Embedded; } </mx:Style> <mx:Script> <![CDATA[ private function uintToHex(value:uint):String { var prefix:String = "000000"; var str:String = String(prefix + value.toString(16)); return "#" + str.substr(-6).toUpperCase(); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:ColorPicker id="colorPicker" fontFamily="Base02Embedded" editable="false" /> <mx:Label id="lbl" text="{uintToHex(colorPicker.selectedColor)}" fontFamily="_typewriter" fontSize="16" /> </mx:ApplicationControlBar> </mx:Application>
View source is enabled in the following example.
You can also set the fontFamily style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/06/15/using-an-embedded-font-with-the-colorpicker-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Base 02"); fontFamily: Base02Embedded; } ColorPicker { fontFamily: Base02Embedded; } </mx:Style> <mx:Script> <![CDATA[ private function uintToHex(value:uint):String { var prefix:String = "000000"; var str:String = String(prefix + value.toString(16)); return "#" + str.substr(-6).toUpperCase(); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:ColorPicker id="colorPicker" editable="false" /> <mx:Label id="lbl" text="{uintToHex(colorPicker.selectedColor)}" fontFamily="_typewriter" fontSize="16" /> </mx:ApplicationControlBar> </mx:Application>
Or, you can set the fontFamily style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/06/15/using-an-embedded-font-with-the-colorpicker-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Style> @font-face { src: local("Base 02"); fontFamily: Base02Embedded; } </mx:Style> <mx:Script> <![CDATA[ private function init():void { colorPicker.setStyle("fontFamily", "Base02Embedded"); } private function uintToHex(value:uint):String { var prefix:String = "000000"; var str:String = String(prefix + value.toString(16)); return "#" + str.substr(-6).toUpperCase(); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:ColorPicker id="colorPicker" editable="false" initialize="init();" /> <mx:Label id="lbl" text="{uintToHex(colorPicker.selectedColor)}" fontFamily="_typewriter" fontSize="16" /> </mx:ApplicationControlBar> </mx:Application>
Base 02 font by www.stereo-type.net.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Hi
I like your flex tutorial and all of them is useful for me . Please place some tutorial about flex and sql interact ;)