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?Come si definisce uno stile predefinito per un componente Flex personalizzato?
risposta
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?
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.
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.
... ed ecco il link http://livedocs.adobe.com/flex/3/html/help.html?content=skinstyle_3.html –
È abbastanza ovvio perché classConstruct viene chiamato ed è piuttosto sfortunato che i documenti non siano più prolissi su questo argomento. Viene chiamato perché la variabile statica classConstructed viene impostata chiamando il metodo statico classConstruct. Qualsiasi variabile statica o blocco di codice verrà eseguita quando si fa il primo riferimento al tipo, prima che si sia verificata qualsiasi istanziazione. Non ho provato questo, ma sono abbastanza sicuro che solo l'utilizzo di un blocco statico produrrà lo stesso risultato, senza dichiarare variabili ridondanti e meno disordine. –
Si noti che è necessario utilizzare il nome completo del pacchetto, ovvero "com.mypackage.CustomComponent". L'esempio di Darren funziona se CustomComponent si trova nel pacchetto predefinito. Altrimenti, usa il nome completo del pacchetto. –
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:
- 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".
- (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
Piuttosto dovrei dare il merito di dove è dovuto: Henk e Chris in risposta qui: http://parallaxed.net/article/css-type-selettori-sono-non-supportati-in-componenti? commentato = 1 – Yarin
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.
È 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);
}
ho sprecato un sacco di tempo ottenere tutto questo per funzionare, quindi per raccogliere le richieste di assistenza: Questa è una grande risposta, questo funziona, ma per un ulteriore buon riferimento, controlla la rispondi sotto di Yarin. Quando segui la risposta di Yarin, assicurati che il nome del file CSS sia effettivamente chiamato "defaults.css" Nessun altro nome funzionerà anche se puoi includere qualsiasi file css nel progetto. Argh. – davidemm
@davidemm: buon punto Ho chiarito la mia risposta – Yarin