小小菜鸟的web菜园子

web开发学习。好记性不如烂笔头。每天进步一点点!

导航

在NumericStepper控件中使用嵌入字体显示数字.

NumericStepper控件的fontFamily样式学习.
示例:(右键查看源文件)

 


代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/18/using-embedded-fonts-with-the-numericstepper-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;
        }
    
</mx:Style>

    
<mx:NumericStepper id="numericStepper"
            fontFamily
="Base02Embedded"
            fontSize
="32"
            width
="100"
            textAlign
="right" />

</mx:Application>

菜鸟语:
你也可以使用as继承扩展NumericStepper控件,有2中制作自定义控件的方法,mxml和as,具体参考帮助文档《CREATING AND EXTENDING
ADOBE FLEX 3 COMPONENTS》
下面是用AS的方式制作自定义组件:

comps/MyComp.as:
/**
 * http://blog.flexexamples.com/2008/05/18/using-embedded-fonts-with-the-numericstepper-control-in-flex/
 */
package comps {
    import mx.containers.Canvas;
    import mx.controls.NumericStepper;

    public class MyComp extends Canvas {

        [Embed(systemFont="Base 02",
                fontName="Base02Embedded",
                mimeType="application/x-font")]
        public var Base02Embedded:Class;
        public var numericStepper:NumericStepper;

        public function MyComp() {
            super();
            init();
        }

        private function init():void {
            numericStepper = new NumericStepper();
            numericStepper.width = 100;
            numericStepper.setStyle("fontFamily", "Base02Embedded");
            numericStepper.setStyle("fontSize", 32);
            numericStepper.setStyle("textAlign", "right");
            addChild(numericStepper);
        }
    }
}

MXML文件:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/18/using-embedded-fonts-with-the-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps
="comps.*"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white">

    
<comps:MyComp id="myComp" />

</mx:Application>

示例:(右键查看源文件)




来自:http://blog.flexexamples.com/2008/05/18/using-embedded-fonts-with-the-numericstepper-control-in-flex/

posted on 2008-05-19 11:55  『小小菜鸟』  阅读(461)  评论(0编辑  收藏  举报