- 浏览: 558091 次
- 性别:
文章分类
- 全部博客 (337)
- WEB前端@HTML (4)
- WEB前端@CSS (5)
- WEB前端@javascript (31)
- WEB前端@DHTML (8)
- WEB前端@jQuery (3)
- WEB前端@Flex4 (19)
- WEB前端@BootStrap3 (21)
- 数据交换@JSON (1)
- 模板标签@JSTL (1)
- 模板标签@Thymeleaf (1)
- 模板标签@XSL-FO (3)
- WEB后台@JavaSE (75)
- WEB后台@JAX-WS (27)
- WEB后台@HttpClient (0)
- WEB后台@SSO (2)
- 框架@Spring3 (3)
- 框架@spring_MVC (8)
- 框架@Hibernate (26)
- 框架@play framework (18)
- 框架@sl4j (4)
- 数据库@ (2)
- 数据库@JDBC (0)
- 服务器@Linux (14)
- 服务器@Tomcat (2)
- 第三方jar@dom4j (1)
- 第三方jar@POI (2)
- 第三方jar@CXF (5)
- 项目管理@Maven (22)
- 项目管理@SVN (1)
- 缓存管理@ehcache (1)
- 系统设计@设计模式 (10)
- 单元测试@JunitTest (1)
- 开发工具 (3)
- BUG收录 (1)
- 学习之路 (6)
- 面试之道 (1)
- 我的项目 (2)
最新评论
-
superich2008:
logback配置文件的改动会导致应用重新加载,多改动几次后就 ...
Chapter 3: Logback configuration -
chenzhihui:
不是可以在log4j中配置以控制台或者文件方式保存日志的?
play记录日志 -
smilease:
很棒,正缺这个,非常感谢
bootstrap3-typeahead 自动补全 -
guangling13345:
[size=x-small][/size]
二级联动菜单 -
jacksondesign:
有,和YAML的格式有关,不知道有没有什么好的YAML格式的验 ...
(四)play之yabe项目【页面】
为Flex应用程序添加样式:
通过标签属性设置样式
可继承的样式属性
通过<fx:Style>标签设置样式
通过CSS文件设置样式
改变Flex应用程序外观的方式:1.样式 2.皮肤
样式
通过样式设置可见元素的字体大小及背景颜色,实现改变Flex组件的外观
需要了解:样式的继承、应用样式的几种方式
皮肤
皮肤的概念更宽泛,通过换肤可以一次性改变所有可见元素的外观,甚至重新排列元素在屏
幕上的位置
-------------------------------------------------
Flex开发使用了一套基于标准的语言
基于XML的MXML
基于ECMAScript的ActionScript3.0
基于CSS(层叠样式表)
-------------------------------------------------
使用CSS为Flex应用程序添加样式的途径:
为个别组件设置个别样式
使用CSS类选择器为多个组件设置一组样式[类选择器]
使用类型选择器指定某种类型(如Button)的所有实例都使用同一组样式[类型选择器]
使用ID选择器指定具有特定id的某一个组件采用一组样式[ID选择器]
使用伪选择器,为组件的某种特定状态(如按钮按下)应用样式[伪选择器]
使用后代选择器指定符合某种层次关系的组件采用同一组样式[后代选择器]
Flex中内置组件的可用样式:
参考Adobe Flex 4 Language Reference(ASDocs)
1.行内样式
2.CSS样式表
-------------------------------------------------------------
1.类选择器
styleName可以指定多个样式样式类,用空格分隔
2.类型选择器
FlexGrocer.mxml中定义样式
CreditCartItem.mxml中的form表单引用该样式
推荐做法:
将样式定义到一个样式文件中,在主程序中引用该样式文件
DefaultStyle.css
其中使用到的命名空间可以先在主程序中的<fx:Style>标签中拷贝
当配置<fx:Style>标签程序会自动加入用到的命名空间
主程序FlexGrocer.mxml中引用该样式文件,被设置样式的组件就会应用到定义的样式了
对样式文件增添更多样式:
使用新字体并应用到程序中
3.后代选择器
4.ID选择器
5.伪选择器
说明:通过上述方式使用样式,可以集中管理样式,维护起来方便
但是有一个弊端,每次修改完CSS文件之后,都要求重新编译应用程序
运行时动态加载CSS
优点:迅速完成维护工作,只要把修改好的CSS文件上传到WEB服务器上就行了
不用重新编译应用程序,因为是动态加载样式的
由于Flash Player不具备运行时动态加载CSS文件的能力
只好将CSS文件转换为Flash Player能处理的SWF文件
CSS文件转换为SWF的方法:
选中需要转换的CSS文件,然后右键,然后选择将CSS转换为SWF文件即可!
编译好的SWF文件放在bin-debug/assets目录下
使用StyleManger加载CSS SWF
StyleManager 管理应用程序中所有样式的一个Flex对象
注意:当某个样式在几个样式表中都有定义,那么Flex只会采用最后加载的样式表定义的样式!某些样式表可能是编译到应用程序中的,某些样式表则采用动态加载的,当出现重复定义时,Flex会选用最后加载的样式表中的样式定义!
通过标签属性设置样式
可继承的样式属性
通过<fx:Style>标签设置样式
通过CSS文件设置样式
改变Flex应用程序外观的方式:1.样式 2.皮肤
样式
通过样式设置可见元素的字体大小及背景颜色,实现改变Flex组件的外观
需要了解:样式的继承、应用样式的几种方式
皮肤
皮肤的概念更宽泛,通过换肤可以一次性改变所有可见元素的外观,甚至重新排列元素在屏
幕上的位置
-------------------------------------------------
Flex开发使用了一套基于标准的语言
基于XML的MXML
基于ECMAScript的ActionScript3.0
基于CSS(层叠样式表)
-------------------------------------------------
使用CSS为Flex应用程序添加样式的途径:
为个别组件设置个别样式
使用CSS类选择器为多个组件设置一组样式[类选择器]
使用类型选择器指定某种类型(如Button)的所有实例都使用同一组样式[类型选择器]
使用ID选择器指定具有特定id的某一个组件采用一组样式[ID选择器]
使用伪选择器,为组件的某种特定状态(如按钮按下)应用样式[伪选择器]
使用后代选择器指定符合某种层次关系的组件采用同一组样式[后代选择器]
Flex中内置组件的可用样式:
参考Adobe Flex 4 Language Reference(ASDocs)
1.行内样式
<!-- 设置下拉列表的样式 --> <s:DropDownList selectedItem="@{orderInfo.cardType}" requireSelection="true" rollOverColor="#AAAAAA" selectionColor="#EA800C">
2.CSS样式表
-------------------------------------------------------------
1.类选择器
<fx:Style> .customDropDown { rollOverColor:"#AAAAAA"; selectionColor:"#EA800C" } </fx:Style> <s:DropDownList styleName="customDropDown"/>
styleName可以指定多个样式样式类,用空格分隔
<fx:Style> .customDropDown { rollOverColor:"#AAAAAA"; selectionColor:"#EA800C" } .blueStyle { color:blue; } </fx:Style> <s:DropDownList styleName="customDropDown blueStyle"/>
2.类型选择器
FlexGrocer.mxml中定义样式
<fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace views "views.*"; @namespace services "services.*"; @namespace cart "cart.*"; .customDropDown { selectionColor:#EA800C; rollOverColor:#AAAAAA; } </fx:Style>
CreditCartItem.mxml中的form表单引用该样式
<!-- 引用主程序中的样式,设置下拉列表的样式 --> <mx:Form styleName="customDropDown"> ...
推荐做法:
将样式定义到一个样式文件中,在主程序中引用该样式文件
DefaultStyle.css
其中使用到的命名空间可以先在主程序中的<fx:Style>标签中拷贝
当配置<fx:Style>标签程序会自动加入用到的命名空间
/* CSS file */ @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace views "views.*"; @namespace services "services.*"; @namespace cart "cart.*"; .customDropDown { selectionColor:#EA800C; rollOverColor:#AAAAAA; }
主程序FlexGrocer.mxml中引用该样式文件,被设置样式的组件就会应用到定义的样式了
<!-- 引入外部css样式表文件 --> <fx:Style source="assets/DefaultStyle.css"/>
对样式文件增添更多样式:
使用新字体并应用到程序中
/* CSS file */ @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace views "views.*"; @namespace services "services.*"; @namespace cart "cart.*"; /*为下拉列表框中的选项定义选中和悬停状态下的颜色*/ .customDropDown { selectionColor:#EA800C; rollOverColor:#AAAAAA; } /*引入新的字体样式,通过SaccoVanzetti就能引用到该字体*/ @font-face { src:url("assets/fonts/SaccoVanzetti.ttf"); fontFamily:SaccoVanzetti; } /*为Spark命名空间的Application添加一个新的类型选择器 指定该应用程序使用SaccoVanzetti字体*/ s|Application { fontFamily:SaccoVanzetti; }
3.后代选择器
/*后代选择器:为ProductList所包含的所有Label标签设置颜色*/ components|ProductList s|Label { color:#013FAC; }
4.ID选择器
/*ID选择器:controlBarContent下的List项被选中和鼠标悬停状态设置颜色*/ #categoryList { rollOverColor:#defcdc; selectionColor:#6aa95f; borderVisible:false; }
5.伪选择器
/*为组件的某种状态设置样式 将主应用程序在checkoutView状态下的背景设置为浅绿色*/ s|Application:checkoutView { backgroundColor:#BBC8B8; } /*为处理购物车导航的几个按钮设置样式 控制条上的View Cart按钮、购物车组件中的View Cart按钮、Continue Shopping按钮 设置悬停和按下时的样式*/ .cartButton:over { chromeColor:#F3FBF4; } .cartButton.down { chromeColor:#C2CBE7; }
说明:通过上述方式使用样式,可以集中管理样式,维护起来方便
但是有一个弊端,每次修改完CSS文件之后,都要求重新编译应用程序
运行时动态加载CSS
优点:迅速完成维护工作,只要把修改好的CSS文件上传到WEB服务器上就行了
不用重新编译应用程序,因为是动态加载样式的
由于Flash Player不具备运行时动态加载CSS文件的能力
只好将CSS文件转换为Flash Player能处理的SWF文件
CSS文件转换为SWF的方法:
选中需要转换的CSS文件,然后右键,然后选择将CSS转换为SWF文件即可!
编译好的SWF文件放在bin-debug/assets目录下
使用StyleManger加载CSS SWF
StyleManager 管理应用程序中所有样式的一个Flex对象
private function handleCreationComplete(event:FlexEvent):void { //动态加载CSS SWF样式到应用程序中 styleManager.loadStyleDeclarations("assets/DefaultStyle.swf"); //卸载某个SWF样式 //styleManager.unloadStyleDeclarations("assets/DefaultStyle.swf"); }
注意:当某个样式在几个样式表中都有定义,那么Flex只会采用最后加载的样式表定义的样式!某些样式表可能是编译到应用程序中的,某些样式表则采用动态加载的,当出现重复定义时,Flex会选用最后加载的样式表中的样式定义!
发表评论
-
(十七)为Flex定制皮肤
2013-01-03 16:46 1290皮肤与组件的关系 使用状态和皮肤 创建Button皮肤 为应用 ... -
(十二)AdvancedDataGrid
2013-01-02 14:37 1586AdvancedDataGrid扩展了普通的DataGrid, ... -
(十一)为DataGrid指定项目呈现器(单元格内显示图片和按钮)
2013-01-02 14:31 16881.使用DataGrid组件展现数 ... -
(十)自定义事件并利用事件对象传递数据以及集合元素变化能派发的事件
2013-01-02 00:14 1300创建和分派事件 1.使用事件可以降低程序的耦合度 2.子类自定 ... -
(九)对List和DataGroup使用itemRenderer
2013-01-01 21:47 5382数据集 包含一组数据元素的对象就叫做数据集Data ... -
(八)自定义组件
2012-12-30 23:35 10401.组件的作用及其对开发的好处 2.Flex类的层次 3.可见 ... -
(七)数据绑定和集合
2012-12-30 17:53 923数据绑定和集合 1.数据绑定的原理 2.ArrayCollec ... -
(六)创建ActionScript类---值对象
2012-12-30 15:31 1006创建ActionScript类--值对象DTO/VO--数据模 ... -
(五)Flex4_使用远程数据
2012-12-30 11:44 1084使用远程XML数据 1.数据 ... -
(四)Flex4_事件
2012-12-29 23:57 885事件编程模型,构建松散耦合的应用程序 设置事件,向事件 ... -
(三)Flex4_Image控件,数据绑定
2012-12-29 23:03 1207数据绑定 1.给需要数据绑定的对象设置id,以便在程序中 ... -
(十八)Flex4_自定义ActionScript组件
2012-12-28 17:11 1090Spark组件是按复合(composi ... -
(十五)Flex4_格式化与校验器
2012-12-28 14:56 1382Flex提供了数据格式化功能,可以对数据进行格式化。通过内置的 ... -
(十四)Flex4_导航
2012-12-28 09:46 1036Flex中实现导航有两种方式可以实现 1.使用状态,在不同事件 ... -
(二)Flex4 容器与布局
2012-12-27 23:03 1620MXML文件 1.文件头 2.命名空间 3.历史版本的恢复 4 ... -
(一)Flex4 第一篇 RIA到底是什么
2012-12-27 22:57 1022待续... -
(十三)Flex4_实现拖放功能
2012-12-27 20:30 2186增强型拖放组件: List ... -
本地Host文件的修改
2012-12-23 09:40 1033Flash builder 4.6 序列号: 1424-49 ...
相关推荐
本博客提供的所有教程的资源原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播。同时,转载时不要移除本申明。...16. 使用样式定制Flex应用 17. 使用皮肤定制Flex应用 18. 自定义ActionScript组件
总的来说,Flex样式生成工具是界面开发者的一款得力助手,它将复杂的CSS样式定制过程简化,让开发者能够更加专注于设计和功能的实现,从而打造更加美观且易用的Web应用。通过使用这款工具,你可以快速生成符合设计...
通过深入学习和实践,你将能够充分利用这两个工具,提高Flex应用程序的视觉吸引力和用户体验。在“flex-css-flash”这个压缩包中,可能包含了一些示例和资源,可以帮助你进一步理解和应用这个过程。
使用这些皮肤可以使Flex应用看起来与相应操作系统更加融合,提升用户体验。 4. **皮肤大全**:这个集合提供了多样化的皮肤选择,开发者可以根据自己的项目需求选择合适的皮肤,或者作为灵感来源来创建自己的定制...
Flex样式设计工具是一种用于开发Adobe Flex应用程序的辅助软件,它帮助开发者更轻松地管理与定制Flex组件的外观和样式。Flex是一种开源框架,主要用于构建富互联网应用程序(RIA),尤其是在使用ActionScript和MXML...
本文将深入探讨Flex应用中的AdvancedDataGrid表头皮肤设计与实现。 AdvancedDataGrid的表头皮肤是用户界面的重要组成部分,它决定了表头的外观和交互体验。表头皮肤不仅包括了列标题的显示样式,还包括了排序指示器...
Flex样式生成工具是一种专为Adobe Flex应用程序设计的实用工具,旨在简化和优化用户界面的样式定制过程。Flex是一个开源框架,用于构建富互联网应用程序(RIA),它基于ActionScript和MXML,提供了丰富的图形和交互...
在这里,我们将聚焦于一个专门针对Flex平台的数据可视化工具——AnyChart,探讨如何在Flex应用中集成并使用它,以及它能为我们的项目带来哪些优势。 首先,让我们了解Flex是什么。Flex是Adobe公司推出的一种开源...
Flex样式选择器是Adobe Flex框架中的一个重要组成部分,用于在Flex应用程序中定义和管理用户界面元素的外观。这个选择器允许开发者以声明式的方式定制控件的样式,从而实现丰富的视觉效果和交互体验。Flex框架是基于...
- 合理使用CSS可以提升Flex应用的性能,避免过度使用嵌套选择器和过于复杂的样式规则。 通过深入理解这些知识点,开发者可以在Flex环境中高效地使用CSS来实现丰富的用户界面设计,创造出既美观又功能强大的应用...
### Flex中的CSS样式详解 Flex是一种用于开发交互式应用程序的框架,它...通过灵活运用本地样式、外部样式表、内联样式以及ActionScript中的`setStyle()`方法,开发者可以在Flex应用程序中实现高度个性化的UI设计。
Flex3 StyleExplorer是一款专为Adobe Flex 3设计的样式生成工具,它允许开发者和设计师探索、测试和定制Flex组件的外观。这个工具是Flex SDK的一部分,帮助用户理解并利用MXML和CSS(Cascading Style Sheets)来控制...
综上所述,"记事万年历flex源码"是一个展示Flex技术在构建富互联网应用中的实际应用的例子,它融合了UI设计、事件处理、数据绑定和定制组件等多方面的知识。对于想要提升自己在Flex开发技能的开发者来说,这是一个...
综上所述,Flex控件折叠效果是提高用户体验和界面交互性的关键元素,无论是使用内置的Accordion组件还是自定义的CollapsiblePanel,都能为应用程序带来更丰富的功能和更好的视觉体验。开发者应根据项目需求和用户...
### Flex3中应用CSS完全详解 #### 一、使用本地样式定义 在Flex3中,开发者可以通过使用`<mx:Style>`标签在MXML文件中创建本地的样式...通过这些方法,开发者可以根据项目需求灵活地调整和定制Flex应用的界面样式。
1. CSS样式表引入:Flex应用中的CSS样式表可以通过`<style>`标签或者链接外部样式表(`.css`文件)的方式引入。在MXML文件中,可以使用`<mx:Style>`标签来包含内联样式。 2. 样式类(Style Class):Flex中的组件...
标题中的"[Flash/Flex] 使用css定义文本样式"表明我们将讨论如何使用CSS来控制在Flash或Flex应用中的文本外观。在Flash Professional或Flex Builder中,开发者可以创建自定义样式表,这些样式表可以包含针对不同文本...
5. **关于AIRIA.txt**:AIRIA可能是指Adobe Integrated Runtime (AIR)的互动应用,这是一份有关AIRIA的文本文件,可能包含关于如何将Flex应用部署到桌面环境的信息,或者解释了这些工具与AIR的关系。 6. **访问...