如何動態更改flex的Css
来源:互联网 发布:悉知怎么用 编辑:程序博客网 时间:2024/06/05 21:16
How to Add Multiple UI Skins to your Flex application with Compiled CSS Stylesheets
This short tutorial describes how to implement and load multiple UI skins in a Flex application, leveraging compiled CSS stylesheets.
1. Move all mxml component style settings that control visual aspects of the view controls to a standalone stylesheet (defaultStyles.css in this example).
For a good separation of UI design and easy maintenance, typical UI control properties that should be moved to a stylesheet rather than specified inline include font and border settings, fill and background colors, padding, alignment, etc.
Use the CSS type selector to override the style settings for all the control instances and class selector with a styleName attribute to control individual control instance settings. Here is an example from the Flex 3 lang. ref. docs:
A CSS rule such as
Button { color: #FF0000 }affects every instance of the Button class; a selector like
Button
is called a type selector.A CSS rule such as
.redButton { color: #FF0000 }affects only components whose
styleName
property is set to".redButton"
; a selector like.redButton
is called a
class selector and must start with a dot.
2.Include default stylesheet in the main application mxml file:
<mx:Style source="assets/skins/defaultStyles.css" />
3. Create alternative stylesheets for your CSS skins.
Once the style settings you’d like to change are moved to a separate css file and you are happy with how your application looks with the default stylesheet, you can create alternative stylesheets to implement different UI skins.
Create new stylesheet for an alternative look and feel by saving the defaultStylesheet.css with a different filename. We’ll create red.css for this example.
Don’t forget to override style settings in your alternative UI skin css file to create a different appearance for your application.
4. Compile all CSS stylesheets to SWF
In Flex Builder, right-click on each stylesheet you’d like to load as an alternative UI skin at run-time and check Compile your CSS stylesheet to SWF option:
5. Add ActionScript code to change CSS stylesheet at runtime:
This code can be added to your main application mxml file or better yet a custom application control bar component.
import mx.styles.StyleManager; private var _skin:String; /*** Changes the selected skin by unloading current style declarations* and loading new style declarations from the embedded stylesheet swf file.*/private function changeSkin(skinUrl:String ):void{ if (_skin != null) { StyleManager.unloadStyleDeclarations(_skin, true); } _skin = skinUrl; StyleManager.loadStyleDeclarations(_skin, true); // force immediate update}
6. Add UI control to your application control bar to enable CSS skin selection:
<!-- Skin Selection --> <mx:Label text="Skin:" /> <mx:ComboBox id="skinSelector" change="{changeSkin(skinSelector.selectedItem.data);}"/> <mx:ArrayCollection> <mx:Object label="Dark" data="assets/skins/defaultStyles.swf"/> <mx:Object label="Red" data="assets/skins/red.swf"/> </mx:ArrayCollection> </mx:ComboBox>
You can use combo box, as in this example, or change it to a menu option.
The skinSelector combo box has a list of the sample CSS UI skins we’ve created with data attributes specifying the full path to the stylesheet swf file.
The change event handler calls our changeSkin method to load the selected UI skin by unloading current style declarations and loading new style declarations from the compiled CSS stylesheet at runtime.
Example
You can view an example of how this works in my new Random3DView sample application I’ve built to explore Away3D camera options and experiment with OpenFlux Plexiglass layouts.
View Random3DView source code to see this setup along with some other options I’ve created for 3D visualization testing purposes.
For a good overview of other Flex application skinning options, see 10 Ways to Skin an App on scalenine.com.
This will work in either Flash or Flex. (this is non-working psuedo-code for demo purposes only)
- Load the text of the CSS file with an URLLoader, something like:
var cssLdr : URLLoader = new URLLoader();cssLdr.addEventListener (Event.COMPLETE, handleCSSLoadComplete);cssLdr.load ();
- Parse the CSS into a StyleSheet object.
function handleCSSLoadComplete (evt:Event) : void { var sSheet : StyleSheet = new StyleSheet(); sSheet.parseCSS (evt.target.data);}
- Apply that style sheet where you need it
Application.styleSheet = sSheet;
<?xml version="1.0" encoding="utf-8"?>/src/styles.css
<!-- http://blog.flexexamples.com/2008/03/22/applying-a-cascading-style-sheet-to-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private var styleSheet:StyleSheet;
private var urlLoader:URLLoader;
private function init():void {
urlLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, urlLoader_complete);
urlLoader.load(new URLRequest("styles.css"));
}
private function urlLoader_complete(evt:Event):void {
var css:String = URLLoader(evt.currentTarget).data;
// Convert text to style sheet.
styleSheet = new StyleSheet();
styleSheet.parseCSS(css);
// Set the style sheet.
textArea.styleSheet = styleSheet;
}
private function textArea_link(evt:TextEvent):void {
Alert.show("text: " + evt.text, "Panel");
}
]]>
</mx:Script>
<mx:String id="txt" source="text.html" />
<mx:TextArea id="textArea"
htmlText="{txt}"
editable="false"
condenseWhite="true"
width="100%"
height="100%"
link="textArea_link(event);" />
</mx:Application>h1 {
font-size: 24;
}
p {
font-size: 10;
}
a {
text-decoration: underline;
}
a:hover {
color: #FF0000;
}
- 如何動態更改flex的Css
- 如何動態更改flex的Css
- 如何在Flex 4 中使用新的CSS语法
- 如何在Flex 4 中使用新的CSS语法
- 如何利用原生js更改css样式
- css更改placeholder的样式
- Flex 更改控件层次的例子
- css的flex box布局
- 如何更改文件夹的图标!如何更改文件的图标!
- 如何更改桌面的路径
- 如何更改窗口的光标?
- 如何更改vs2005的浏览器
- 如何更改文件的图标
- 如何更改CSDN的图像?
- 如何更改默认的Client
- 如何更改登录的shell
- 如何更改数据库的所有者
- 如何更改UIPickerView的高度
- 小试关联数组
- C++调用com控件方法
- ifcfg-eth0 配置
- base64算法的加解密处理
- gcc生成静态库和动态库
- 如何動態更改flex的Css
- 一个多态类的汇编代码。
- Lua语言的安装和编辑器的高亮、运行调试、定位出错行设置
- C#调用Oracle存储过程的方法
- Server Host Cannot be null解决方法
- Android Audio System
- SQL 日期转换 count
- 男女至情
- ffmpeg使用小结(不断更新中)