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
Buttonis called a type selector.A CSS rule such as
.redButton { color: #FF0000 }affects only components whose
styleNameproperty is set to".redButton"; a selector like.redButtonis 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 ;
}
本文转自:http://hi.baidu.com/hay100800/blog/item/227c35cc1c2d0c1800e928fa.html
扫一扫
1498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
