在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>
<!-- 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);
}
}
}
* 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/ -->
<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/