我正在创建一个新的Flex组件(Flex 3)。我希望它有一个默认样式。是否有命名约定或我的.cs文件的某些内容使其成为默认样式?我错过了什么吗?
答案 0 :(得分:9)
Christian对于应用CSS的权利,但是如果您计划跨项目在库中使用该组件,那么您将要为该库编写默认的css文件。这是你如何做到的:
这就是Adobe团队如何设置所有默认样式,现在您也可以这样做。刚想出这个巨大的
答案 1 :(得分:8)
MyComponent
,或者通过使MXML组件扩展另一个名为MyComponent
的UIC组件来间接创建例如,如果样式表已导入到您的应用程序中(例如,通过Style source
),该组件将获取外部样式表中声明的样式:
MyComponent
{
backgroundColor: #FFFFFF;
}
另一种方法是设置UIComponent的styleName
属性(作为字符串):
public class MyComponent
{
// ...
this.styleName = "myStyle";
// ...
}
...并在CSS文件中定义样式,如下所示(注意点符号):
.myStyle
{
backgroundColor: #FFFFFF;
}
有意义吗?
答案 2 :(得分:6)
除了Christian Nunciato建议的内容之外,另一个选择是为Flex组件的样式定义静态初始化程序。这允许您设置默认样式,而无需开发人员包含CSS文件。
private static function initializeStyles():void
{
var styles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("ExampleComponent");
if(!styles)
{
styles = new CSSStyleDeclaration();
}
styles.defaultFactory = function():void
{
this.exampleNumericStyle = 4;
this.exampleStringStyle = "word to your mother";
this.exampleClassStyle = DefaultItemRenderer //make sure to import it!
}
StyleManager.setStyleDeclaration("ExampleComponent", styles, false);
}
//call the static function immediately after the declaration
initializeStyles();
答案 3 :(得分:2)
joshtynjala建议的改进:
public class CustomComponent extends UIComponent {
private static var classConstructed:Boolean = classConstruct();
private static function classConstruct():Boolean {
if (!StyleManager.getStyleDeclaration("CustomComponent")) {
var cssStyle:CSSStyleDeclaration = new CSSStyleDeclaration();
cssStyle.defaultFactory = function():void {
this.fontFamily = "Tahoma";
this.backgroundColor = 0xFF0000;
this.backgroundAlpha = 0.2;
}
StyleManager.setStyleDeclaration("CustomComponent", cssStyle, true);
}
return true;
}
}
我在某处的文档中读过这篇文章; classContruct方法会自动调用。
答案 4 :(得分:2)
您可能希望使用<fx:Style>
标记或类似内容覆盖默认样式。如果是这种情况,则在检查classConstructed时可能已经存在CSSStyleDeclaration。这是一个解决方案:
private static var classConstructed:Boolean = getClassConstructed ();
private static function getClassConstructed ():Boolean {
var defaultCSSStyles:Object = {
backgroundColorGood: 0x87E224,
backgroundColorBad: 0xFF4B4B,
backgroundColorInactive: 0xCCCCCC,
borderColorGood: 0x333333,
borderColorBad: 0x333333,
borderColorInactive: 0x666666,
borderWeightGood: 2,
borderWeightBad: 2,
borderWeightInactive: 2
};
var cssStyleDeclaration:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration ("StatusIndicator");
if (!cssStyleDeclaration) {
cssStyleDeclaration = new CSSStyleDeclaration ("StatusIndicator", FlexGlobals.topLevelApplication.styleManager, true);
}
for (var i:String in defaultCSSStyles) {
if (cssStyleDeclaration.getStyle (i) == undefined) {
cssStyleDeclaration.setStyle (i, defaultCSSStyles [i]);
}
}
return (true);
}
答案 5 :(得分:1)
要创建默认样式,您还可以在类中使用属性并覆盖UIComponent中的styleChanged()函数,例如,仅在组件宽度的一半上绘制背景颜色:
// this metadata helps flex builder to give you auto complete when writing
// css for your CustomComponent
[Style(name="customBackgroundColor", type="uint", format="color", inherit="no")]
public class CustomComponent extends UIComponent {
private static const DEFAULT_CUSTOM_COLOR:uint = 0x00FF00;
private var customBackgroundColor:uint = DEFAULT_CUSTOM_COLOR;
override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
var allStyles:Boolean = (!styleProp || styleProp == "styleName");
if(allStyles || styleProp == "customBackgroundColor")
{
if(getStyle("customBackgroundColor") is uint);
{
customBackgroundColor = getStyle("customBackgroundColor");
}
else
{
customBackgroundColor = DEFAULT_CUSTOM_COLOR;
}
invalidateDisplayList();
}
// carry on setting any other properties you might like
// check out UIComponent.styleChanged() for more examples
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
graphics.clear();
graphics.beginFill(customBackgroundColor);
graphics.drawRect(0,0,unscaledWidth/2,unscaledHeight);
}
}
您还可以为调用invalidateDisplayList()的customBackgroundColor创建一个setter,这样您也可以以编程方式和css方式设置customBackgroundColor属性。