Come si definisce uno stile predefinito per un componente Flex personalizzato?

Question

Sto creando un nuovo componente Flex (Flex 3). Mi piacerebbe avere uno stile predefinito. C'è una convenzione di denominazione o qualcosa del mio file .cs per renderlo lo stile predefinito? Mi sto perdendo qualcosa?

Answer 1

Due modi, in generale. Si fa semplicemente riferimento al nome della classe direttamente - quindi, per esempio, se avessi creato una nuova classe di componenti MyComponent in ActionScript, o indirettamente facendo un componente MXML estendendo un altro UIComponent chiamato MyComponent, in entrambi i casi, il componente avrebbe rilevato il stili dichiarati nel foglio di stile esterno, a condizione che il foglio di stile è stato importato nella vostra applicazione (ad esempio, via Style source):

MyComponent 
{ 
    backgroundColor: #FFFFFF; 
} 

un altro modo è impostando la proprietà del UIComponent styleName (come una stringa):

public class MyComponent 
{ 
    // ... 

    this.styleName = "myStyle"; 

    // ... 
} 

... a nd definire lo stile nel file CSS come tale (notare la notazione del punto):

.myStyle 
{ 
    backgroundColor: #FFFFFF; 
} 

Ha senso?

Answer 2

Oltre a quanto suggerito da Christian Nunciato, un'altra opzione è quella di definire un inizializzatore statico per gli stili del componente Flex. Ciò consente di impostare gli stili predefiniti senza richiedere allo sviluppatore di includere un file CSS.

Answer 3

Un perfezionamento di ciò che joshtynjala suggerito:

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

ho letto questo nella documentazione da qualche parte; il metodo classContruct viene chiamato automaticamente.

Answer 4

Christian ha il diritto di applicare il CSS, ma se hai intenzione di utilizzare il componente in una libreria attraverso i progetti, vorrai scrivere un file css predefinito per quella libreria. Ecco come si fa:

1. Creare un file css chiamato "defaults.css" (solo questo nome di file funzionerà!) E metterlo al livello più alto nella cartella "src" della vostra libreria. Se il file css fa riferimento a qualsiasi risorsa, devono essere anch'essi in "src".
2. (IMPORTANTE!) Andare alle proprietà del progetto della libreria> Flex Library Build Path> Assets e includere il file css e tutte le risorse.

Ecco come il team di Adobe imposta tutti i loro stili predefiniti, ora puoi farlo anche tu. Semplicemente capito: enorme

Answer 5

Per creare uno stile predefinito puoi anche avere una proprietà nella classe e sovrascrivere la funzione styleChanged() in UIComponent, ad esempio per disegnare solo un colore di sfondo su metà della larghezza 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); 
    } 
} 

si potrebbe anche creare un setter per il customBackgroundColor che ha chiamato invalidateDisplayList(), così si potrebbe anche impostare la proprietà customBackgroundColor programatically così come attraverso i CSS.

Answer 6

È possibile eseguire l'override degli stili predefiniti utilizzando il tag <fx:Style> o simile. Se questo è il caso, una dichiarazione CSSStyle potrebbe già esistere dal momento in cui classConstructed è spuntato.Ecco una soluzione:

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