Flex使用自定义皮肤和字体

Flex应用皮肤定制教程

最新推荐文章于 2012-04-18 19:14:00 发布

最新推荐文章于 2012-04-18 19:14:00 发布 · 155 阅读

文章标签：

#Flex #CSS #AIR #Adobe #XML

Flex 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何为Flex应用程序定制皮肤，包括使用特定网站提供的皮肤资源，并详细解释了如何解决皮肤不支持中文的问题，通过修改Main.css文件并添加微软雅黑字体。

首先介绍两个Flex皮肤网站：

1. Skins and Themes For Flex and AIR

2.Free Skin and Themes For Adobe Flex

以上两个网站都提供了皮肤下载。先看一个其中的效果：

当然这款皮肤Brownie并不支持中文，原因是它里面的自己没有中文的。需要自行添加，我这里使用的是微软雅黑。

需要在assets/css/Main.css中修改：

添加字体：

@font-face {
    fontFamily:"WRYH";
    src: url("assets/fonts/MSYH.TTF");
}

在添加：

Application
{
...
    fontFamily: "WRYH"; 
..
.headerStyle
{
	text-align:center;
	font-size: 15;
	fontFamily:"WRYH";
...
}

当然需要把微软雅黑拷贝到assets/fonts中。这样就可以了。

上面的例子代码：

主程序：

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]               
            private var myDP:ArrayCollection = new ArrayCollection([
                {label1:"苹果", quant:39, ok:true},
                {label1:"香蕉", quant:73, ok:true}     
            ]);               
        ]]>
    </mx:Script>
    <mx:Style source="assets/css/Main.css"/>
    <mx:Panel width="478" height="293" layout="absolute" title="水果销售折扣">
        <mx:DataGrid id="myDG" dataProvider="{myDP}"
            editable="true"  width="397" height="117" x="24" y="46">
            <mx:columns>
                <mx:DataGridColumn dataField="label1" headerText="项目" editable="false"/>
                <mx:DataGridColumn dataField="quant" headerText="数量" itemRenderer="MyProgressBar" editable="false"/>
                <mx:DataGridColumn dataField="ok" headerText="剩余" editable="false">
                	<mx:itemRenderer>
                		<mx:Component>
                			<mx:CheckBox selected="{data.ok}"/>
                		</mx:Component>
                	</mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
        </mx:Panel>
</mx:Application>

自定义

MyProgressBar.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="36" horizontalAlign="center">
	<mx:Script>
        <![CDATA[
        override public function set data(value:Object):void
        {      
                if(value != null)
                {
                    super.data = value;
                    var p:Number = (value.quant) as Number;
                    trace(value);
                    myP.setProgress(value.quant,100);
                    myP.label="当前折扣为"+ p+"%";
                   
                }
}        
        ]]>
</mx:Script>
       
    <mx:ProgressBar id="myP" width="100%" height="80%" mode="manual"/>
</mx:HBox>

希望大家喜欢这些皮肤！