¿Cómo se define un estilo predeterminado para un componente Flex personalizado?

Question

Estoy creando un nuevo componente Flex (Flex 3). Me gustaría que tenga un estilo predeterminado. ¿Existe una convención de nomenclatura o algo para que mi archivo .cs lo convierta en el estilo predeterminado? ¿Me estoy perdiendo de algo?

Answer 1

De dos maneras, en general. Al hacer referencia directamente al nombre de la clase, por ejemplo, si creó una nueva clase de componente MyComponent en ActionScript, o indirectamente al hacer que un componente MXML amplíe otro UIComponent llamado MyComponent, en ambos casos, el componente seleccionaría el estilos declaradas en la hoja de estilos externa, siempre y cuando hoja de estilo ha sido importado en su aplicación (por ejemplo, a través de Style source):

MyComponent 
{ 
    backgroundColor: #FFFFFF; 
} 

Otra forma es mediante el establecimiento de la propiedad del UIComponent styleName (como una cadena):

public class MyComponent 
{ 
    // ... 

    this.styleName = "myStyle"; 

    // ... 
} 

... a nd definir el estilo en el archivo CSS como tal (nota de la notación de puntos):

.myStyle 
{ 
    backgroundColor: #FFFFFF; 
} 

sentido?

Answer 2

Además de lo que sugirió Christian Nunciato, otra opción es definir un inicializador estático para los estilos de su componente Flex. Esto le permite configurar los estilos predeterminados sin requerir que el desarrollador incluya un archivo CSS.

Answer 3

Un refinamiento de lo joshtynjala sugerido:

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; 
    } 
} 

He leído esto en la documentación en alguna parte; el método classContruct se llama automáticamente.

Answer 4

Christian tiene derecho a aplicar el CSS, pero si planea utilizar el componente en una biblioteca en todos los proyectos, querrá escribir un archivo css predeterminado para esa biblioteca. He aquí cómo se hace:

1. Crear un archivo css llamado "defaults.css" (Sólo este nombre de archivo va a funcionar!) Y lo puso en el nivel superior en la carpeta "src" de su biblioteca. Si el archivo css hace referencia a cualquier activo, también debe estar bajo "src".
2. (¡IMPORTANTE!) Vaya a Propiedades del proyecto de la biblioteca> Ruta de compilación de biblioteca Flex> Activos e incluya el archivo css y todos los recursos.

Así es como el equipo de Adobe configura todos sus estilos predeterminados, ahora usted también puede hacerlo. Simplemente lo descubrí: enorme

Answer 5

Para crear un estilo predeterminado, también puede tener una propiedad en su clase y anular la función styleChanged() en UIComponent, por ejemplo, para dibujar un color de fondo en la mitad del ancho del componente:

// 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); 
    } 
} 

también podría crear un regulador para la customBackgroundColor que llama invalidateDisplayList(), por lo que también puede establecer la propiedad customBackgroundColor mediante programación, así como a través de CSS.

Answer 6

Es posible que desee sobrescribir los estilos predeterminados utilizando la etiqueta <fx:Style> o similar. Si ese es el caso, una CSSStyleDeclaration ya puede existir en el momento en que se compruebe classConstructed.Aquí hay una solución:

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); 
}