跟我StepByStep学FLEX教程------自定义主题

跟我StepByStep学FLEX教程------自定义主题

 

 

说明：该文系作者原创，请勿商用或者用于论文发表，转载必须经作者同意并且注明出处。

 

 

      如何自定义主题：

      1、首先定义好.css文件；

      2、compc编译生成swc文件；

      compc -include-file name path -o output.swc

      如（可以include多个文件）：

      compc -include-file mycss.css c:/myfiles/themes/mycss.css
    -include-file upIcon.jpg c:/myfiles/themes/assets/upIcon.jpg
    -include-file downIcon.jpg c:/myfiles/themes/assets/downIcon.jpg
    -include-file overIcon.jpg c:/myfiles/themes/assets/overIcon.jpg
    -o c:/myfiles/themes/MyTheme.swc

      3、编写xml配置文件，如：

<?xml version="1.0"?>
<flex-config xmlns="http://www.adobe.com/2006/flex-config">
    <output>MyTheme.swc</output>
    <include-file>
        <name>mycss.css</name>
        <path>c:/myfiles/themes/mycss.css</path>
    </include-file>
    <include-file>
        <name>upIcon.jpg</name>
        <path>c:/myfiles/themes/assets/upIcon.jpg</path>
    </include-file>
    <include-file>
        <name>downIcon.jpg</name>
        <path>c:/myfiles/themes/assets/downIcon.jpg</path>
    </include-file>
    <include-file>
        <name>overIcon.jpg</name>
        <path>c:/myfiles/themes/assets/overIcon.jpg</path>
    </include-file>
    <include-classes>
        <class>MyButtonSkin</class>
        <class>MyAccordionHeaderSkin</class>
        <class>MyControlBarSkin</class>
    </include-classes>
</flex-config>

      执行compc -load-config myconfig.xml编译主题文件。

      以上参考Flex Builder自带帮助文件Creating a theme SWC file 部分。

 

      自然，读者也可以通过工具来进行制作漂亮的主题。

Adobe Extension Manager CS4 2.0 http://www.adobe.com/cn/exchange/em_download/

Flex Skin Design Extensions & Flex Component Kit for Flash CS3

https://www.adobe.com/cfusion/entitlement/index.cfm?e=flex%5Fskins

     

      最简单的方法，就是下载已经做好的主题风格，作者推荐一个网站：http://www.scalenine.com/，读者也可以自己在网上百度、google一下，可以找到很多。

     

      5月4日青年节，FlexUnit 4 alpha 1.0发布了，这个内容本来要放在后边讲，不过既然发布了，作者就将最新的研究先在教程里讲一下，这个版本进行了较大的底层重构。