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

flex-wrap para que sirve

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 haciendo que un componente MXML MyComponent otro UIComponent llamado MyComponent , en ambos casos, el componente tomaría el estilos declarados en su hoja de estilo externa, siempre que se haya importado la hoja de estilos en su aplicación (por ejemplo, a través de la Style source ):

MyComponent
{
     backgroundColor: #FFFFFF;
}

Otra forma es establecer la propiedad styleName de UIComponent (como una cadena):

public class MyComponent
{
     // ...

     this.styleName = "myStyle";

     // ...
}

... y definir el estilo en el archivo CSS de esa manera (observe la notación de puntos):

.myStyle
{
     backgroundColor: #FFFFFF;
}

¿Tener 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.

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

Answer 3

Un refinamiento de lo que joshtynjala sugirió:

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 los documentos en algún lado; el método classContruct se llama automáticamente.

Answer 4

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 setter para customBackgroundColor que llamó a invalidateDisplayList (), por lo que también podría establecer la propiedad customBackgroundColor programáticamente así como a través de css.

Answer 5

Christian tiene derecho a aplicar el CSS, pero si planea usar el componente en una biblioteca en todos los proyectos, querrá escribir un archivo css predeterminado para esa biblioteca. Así es como lo haces:

1. Cree un archivo css llamado "defaults.css" (¡Solo este nombre de archivo funcionará!) Y póngalo en el nivel superior debajo de 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 la 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. Me di cuenta de esto: enorme

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