`

flex---style和theme

    博客分类:
  • flex
阅读更多

1.<mx:Style source="style.css"/>
2.
<mx:Style>
.XXX{
  XXXX
}
</mx:Script>

3.在function里面写
list_yg.setStyle("backgroundColor","#FF00FF")

var css:CSSStyleDeclaration = new CSSStyleDeclaration("mystyle");
css.setStyle("color","blue");
css.setStyle("backgroundColor","green");
css.setStyle("fontSize",15);
StyleManager.setStyleDeclaration("Panel",css,true);//第三个参数是立即更新

全局样式:
在xx.css里面写一个
global{
 xxx

}
var css:CSSStyleDeclaration = StyleManager.getStyleDeclaration("global");

建议使用.swc来封装主题


在elipse里面找到Flex Compiler 里面找到Additional compoler arguments 加上 -theme ../Style/Smoke.css 
(这里Smoke.css在BindDemo1的src平级的Style文件夹下)

或者去Flex Builder3\sdks\3.00\frameworks\flex-config.xml中设置
<theme>
	<filename>themes/Smoke/Smoke.css</filename>
</theme>

如何生成swc文件
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
或者写到配置文件里面
<?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 主题--Brownie

    在Flex中,主题(Theme)扮演着至关重要的角色,它允许开发者通过定制UI组件的外观和感觉,来实现一致且吸引人的用户界面。"Brownie"是一个特定的Flex主题,以其独特的黑色调和炫酷的设计风格而闻名。 首先,让我们...

    hexo-theme-gstyle:具有Google风格的hexo主题

    用法git clone https://github.com/wayou/hexo-theme-gstyle.git themes/gstyle 配置网站_config.yml theme: gstyle在帖子中使用相对资产路径在hexo网站配置文件_config.yml启用post_asset_folder 安装hexo-filter-...

    flex 4.6Css

    使用方法: 引入: add silvergreen-2.1.swc to libs 使用(SWC方案): 在IDE(如:Flash Builder)里面,增加一个编译参数: ... &lt;fx:Style source="com\ksria\flex\silvergreen\spark\style.css" /&gt;

    Flex更换主题 更换皮肤控件

    在Flex中,主题(Theme)和皮肤(Skin)是实现用户界面UI设计的重要组成部分,它们允许开发者轻松地改变应用程序的整体外观和感觉,以满足不同用户需求或品牌要求。本文将深入探讨Flex中更换主题和皮肤控件的相关...

    Flex 3 基础教程(1).ppt

    使用 `.swc` 文件导入主题,可以通过 `-theme` 编译指令指定,或者在 `Flex-config.xml` 文件中配置 `&lt;theme&gt;` 标签来设置。 **创建自定义主题**: 1. **修改现有主题文件**:你可以直接编辑 `.css` 文件,定制...

    react-theme:遵循Bootstrap方法的主题

    它受到启发,并使用其比例尺和命名约定。 。 让我们看一下tachyons与传统样式的比较:1.传统react-native风格: import {StyleSheet} from "react-native";const s = StyleSheet.create({ view: { borderWidth: 1, ...

    Flex 3 基础教程(5)

    Flex 3 基础教程(5) —style和theme

    Flex3.0 使用CSS美化界面

    Flex3.0是一款由Adobe开发的富互联网应用程序(RIA)框架,它允许开发者创建具有丰富交互性和动态视觉效果的Web应用。在Flex3.0中,通过使用CSS(层叠样式表)可以对用户界面进行详细的定制和美化,使得应用程序的...

    Harmony应用开发--自定义标题栏实战.docx

    - `androidhwext:style/Theme.Emui.NoTitleBar`:这是一个预定义的主题样式,用于移除顶部的状态栏和标题栏。 3. **保存并编译**:完成上述配置后,保存`config.json`文件并重新编译项目,此时系统默认的标题栏将...

    flex组件样式属性中文对照表

    根据给定文件中的标题、描述、以及部分内容,我们可以整理出一系列与Flex组件样式属性相关的知识点。以下是基于这些信息的...这些属性可用于调整和优化Flex组件的外观和行为,使得开发者能够更加灵活地定制界面样式。

    VUE---使用字体图标

    import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 5. **图标大小和颜色** - 字体图标的大小和颜色可以通过CSS控制,就像操作普通文本一样: ```html &lt;i class="iconfont icon-...

    flex各组件对应的样式属性

    `Application`组件作为Flex应用的顶级容器,拥有丰富的样式属性,可以通过这些属性来自定义应用程序的整体外观和感觉。下面详细介绍几个关键的样式属性: 1. **Background Image**:可以通过`Embed`标签嵌入一张...

    flex主题皮肤源码2

    在Flex开发中,主题(Theme)是一组定义UI组件样式和外观的CSS(Cascading Style Sheets)文件和图形资源。这些主题可以包含SWF(ShockWave Flash)文件,用于绘制组件的视觉元素,如按钮、滑块、列表等。通过修改...

    FlexCss手册

    在 Flex 应用程序中,可以通过 `&lt;mx:Style&gt;` 标签在 MXML 文件中创建本地样式定义。这种方式允许开发者根据 CSS2.0 的语法标准来定义样式表,并且这些样式将应用于当前文档及其所有子文档。 **示例代码:** ```xml...

    Flex Android项目 设置Button的背景色

    4. **使用主题(Theme)**:Flex还支持使用预定义的主题来统一整个应用的视觉风格。你可以在主题文件中定义Button的背景颜色,然后应用到整个项目。 综上所述,设置Flex Android项目中Button的背景色有多种方式,...

    flex 组件的样式属性整理

    Flex提供了丰富的组件库,允许开发者创建具有复杂交互功能和美观界面的应用程序。Flex中组件的样式可以通过ActionScript或者MXML进行自定义配置,这些样式属性能够帮助开发者轻松调整UI的外观和感觉。 #### 主题...

    Vue使用vue-draggable 插件在不同列表之间拖拽功能

    &lt;/script&gt;&lt;style scoped&gt; .theme-setting { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; } .theme-left, .theme-right { width: 45%; min-width: 270px; max-width:...

    从 react-native-calendar 扩展的简单日期范围选择器

    react-native-date-range-picker 使用 react-native-calendars 实现的简单日期范围...} } const style = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundCo

    ActionBar自定义样式

    &lt;style name="CustomTheme" parent="Theme.AppCompat.Light"&gt; &lt;item name="android:actionBarStyle"&gt;@style/MyActionBar &lt;/style&gt; &lt;style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar"&gt; ...

    Flutter实战1

    style: Theme.of(context).textTheme.headline4, ), RaisedButton( onPressed: _incrementCounter, child: Text('Increment'), ), ], ), ), ); } } ``` #### 六、路由管理 1. **路由管理概述**: - ...

Global site tag (gtag.js) - Google Analytics