- 浏览: 543955 次
- 性别:
文章分类
- 全部博客 (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 1238皮肤与组件的关系 使用状态和皮肤 创建Button皮肤 为应用 ... -
(十二)AdvancedDataGrid
2013-01-02 14:37 1542AdvancedDataGrid扩展了普通的DataGrid, ... -
(十一)为DataGrid指定项目呈现器(单元格内显示图片和按钮)
2013-01-02 14:31 16441.使用DataGrid组件展现数 ... -
(十)自定义事件并利用事件对象传递数据以及集合元素变化能派发的事件
2013-01-02 00:14 1247创建和分派事件 1.使用事件可以降低程序的耦合度 2.子类自定 ... -
(九)对List和DataGroup使用itemRenderer
2013-01-01 21:47 5295数据集 包含一组数据元素的对象就叫做数据集Data ... -
(八)自定义组件
2012-12-30 23:35 10151.组件的作用及其对开发的好处 2.Flex类的层次 3.可见 ... -
(七)数据绑定和集合
2012-12-30 17:53 899数据绑定和集合 1.数据绑定的原理 2.ArrayCollec ... -
(六)创建ActionScript类---值对象
2012-12-30 15:31 935创建ActionScript类--值对象DTO/VO--数据模 ... -
(五)Flex4_使用远程数据
2012-12-30 11:44 1032使用远程XML数据 1.数据 ... -
(四)Flex4_事件
2012-12-29 23:57 856事件编程模型,构建松散耦合的应用程序 设置事件,向事件 ... -
(三)Flex4_Image控件,数据绑定
2012-12-29 23:03 1091数据绑定 1.给需要数据绑定的对象设置id,以便在程序中 ... -
(十八)Flex4_自定义ActionScript组件
2012-12-28 17:11 1041Spark组件是按复合(composi ... -
(十五)Flex4_格式化与校验器
2012-12-28 14:56 1320Flex提供了数据格式化功能,可以对数据进行格式化。通过内置的 ... -
(十四)Flex4_导航
2012-12-28 09:46 984Flex中实现导航有两种方式可以实现 1.使用状态,在不同事件 ... -
(二)Flex4 容器与布局
2012-12-27 23:03 1528MXML文件 1.文件头 2.命名空间 3.历史版本的恢复 4 ... -
(一)Flex4 第一篇 RIA到底是什么
2012-12-27 22:57 951待续... -
(十三)Flex4_实现拖放功能
2012-12-27 20:30 2154增强型拖放组件: List ... -
本地Host文件的修改
2012-12-23 09:40 1002Flash builder 4.6 序列号: 1424-49 ...
相关推荐
本博客提供的所有教程的资源原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播。同时,转载时不要移除本申明。...16. 使用样式定制Flex应用 17. 使用皮肤定制Flex应用 18. 自定义ActionScript组件
这样估计以后会有中文版的Flex2 了...),使用Flex2的本地化特性我们可以很容易创建多语言本地化的Flex应用,为我们的Flex应用打入国际市场添威助力,不过不像Java的 本地化资源动态获取的方式,目前Flex2的本地化...
flex flex flex flex flex
再接着详细讲解了BlazeDS框架的使用方法和工作原理,并通过迭代的方式完整地演示一个真实的Flex企业级应用的开发全过程,实战性极强;最后重点探讨Flex应用性能优化等方面的高级知识。值得一提的是,本书公开了作者...
使用IntelliJ_IDEA开发Flex应用,可以帮助使用IDEA同学们,快速入门; 大家分享
Flex、案例、Flex应用案例
ArcGIS API for Flex应用开发
再接着详细讲解了BlazeDS框架的使用方法和工作原理,并通过迭代的方式完整地演示一个真实的Flex企业级应用的开发全过程,实战性极强;最后重点探讨Flex应用性能优化等方面的高级知识。值得一提的是,本书公开了作者...
这是一本入门级的Flex电子书,适合入门的朋友看!
Flex各种控件,样式生成工具(定制各种Flex按钮网页css样式),可视化操作,自动生成css代码。适合界面开发者使用,实现快速开发。
使用Flex开发WebGIS应用.pdf
具有代表性的17个Flex开发的应用介绍,具有一定参考价值
sfapi 可以expose flex应用程序的控件,以便测试程序通过执行js方法调用而操作flex界面控件
一个flash做的flex的样式 比较的齐全
Flex应用3D饼图,柱图线图,仪表盘,AdvancedDataGrid表头皮肤,分数较高,不建议下载,仅自己保留
是 http://download.csdn.net/detail/zhaoshansanxia/4115320 的Intellij IDEA 版本 如果了解IDEA 可以只下载一个即可!所需的jar包都包含在上面地址的源码中
Flex 应用内存泄露的分析与诊断 Flex 应用内存泄露的分析与诊断
Flex中弹出对话框的定制Flex中弹出对话框的定制Flex中弹出对话框的定制Flex中弹出对话框的定制
FLEX企业应用开发实战_part2
Flex 应用,BlazeDS通信,Flex 应用,BlazeDS通信