एक कस्टम फ्लेक्स घटक के लिए डिफ़ॉल्ट शैली को कैसे परिभाषित करता है?

Question

मैं एक नया फ्लेक्स घटक (फ्लेक्स 3) बना रहा हूं। मुझे यह एक डिफ़ॉल्ट शैली चाहिए। क्या कोई नामकरण सम्मेलन या मेरी .cs फ़ाइल के लिए कुछ डिफ़ॉल्ट शैली बनाने के लिए है? क्या मैं कुछ भूल रहा हूँ?

Answer 1

आम तौर पर दो तरीके। एक बस कक्षा के नाम को सीधे संदर्भित करके - उदाहरण के लिए, यदि आपने एक्शनस्क्रिप्ट में एक नया घटक वर्ग MyComponent बनाया है, या अप्रत्यक्ष रूप से एक एमआईसीएमएल घटक बनाकर MyComponent नामक एक और यूआईसीओम्पोनेंट को बनाकर, घटक दोनों उठाएंगे शैलियों अपने बाहरी शैलीपत्रक में घोषित है, बशर्ते कि स्टाइलशीट अपने आवेदन में आयात हो गया है (जैसे, Style source के माध्यम से):

MyComponent 
{ 
    backgroundColor: #FFFFFF; 
} 

एक और तरीका है UIComponent के styleName संपत्ति की स्थापना द्वारा है (स्ट्रिंग के रूप):

public class MyComponent 
{ 
    // ... 

    this.styleName = "myStyle"; 

    // ... 
} 

... ए और सीएसएस फ़ाइल में शैली को परिभाषित करना (नोट डॉट नोटेशन नोट करें):

.myStyle 
{ 
    backgroundColor: #FFFFFF; 
} 

समझ में आता है?

Answer 2

ईसाई नुनसिआटो के सुझाव के अलावा, एक अन्य विकल्प आपके फ्लेक्स घटक की शैलियों के लिए एक स्थिर प्रारंभकर्ता को परिभाषित करना है। यह आपको डेवलपर को एक सीएसएस फ़ाइल शामिल करने की आवश्यकता के बिना डिफ़ॉल्ट शैलियों को सेट करने की अनुमति देता है।

Answer 3

क्या सुझाव दिया 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; 
    } 
} 

मैंने कहीं डॉक्स में इसे पढ़ लिया है; कक्षा नियंत्रण विधि स्वचालित रूप से बुलाया जाता है।

Answer 4

सीएसएस को लागू करने के बारे में ईसाई का अधिकार, लेकिन यदि आप परियोजनाओं में लाइब्रेरी में घटक का उपयोग करने की योजना बना रहे हैं, तो आप उस पुस्तकालय के लिए एक डिफ़ॉल्ट सीएसएस फ़ाइल लिखना चाहेंगे। यहां बताया गया है कि आप इसे कैसे करते हैं:

1. "defaults.css" नामक एक सीएसएस फ़ाइल बनाएं (केवल यह फ़ाइल नाम काम करेगा!) और इसे अपनी लाइब्रेरी के "src" फ़ोल्डर के नीचे शीर्ष स्तर पर रखें। यदि सीएसएस फ़ाइल किसी भी संपत्ति का संदर्भ देती है, तो उन्हें भी "src" के अंतर्गत होना चाहिए।
2. (महत्वपूर्ण!) लाइब्रेरी प्रोजेक्ट की प्रॉपर्टीज> फ्लेक्स लाइब्रेरी बिल्ड पथ> संपत्तियों पर जाएं और सीएसएस फ़ाइल और सभी संपत्तियां शामिल करें।

इस तरह एडोब टीम अपनी सभी डिफ़ॉल्ट शैलियों को सेट करता है, अब आप इसे भी कर सकते हैं। बस लगा इस विशाल बाहर

Answer 5

एक डिफ़ॉल्ट शैली बनाने के लिए आप भी अपने वर्ग में एक संपत्ति है और styleChanged() UIComponent में समारोह, जैसे ओवरराइड कर सकते हैं के लिए एक ही घटक के आधे चौड़ाई में एक पृष्ठभूमि रंग आकर्षित:

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

तुम भी, customBackgroundColor कि invalidateDisplayList (कहा जाता है) के लिए एक सेटर बना सकते हैं ताकि आप भी सीएसएस के माध्यम से प्रोग्राम के रूप में अच्छी तरह customBackgroundColor गुण सेट कर सकते हैं।

Answer 6

आप <fx:Style> टैग या इसी तरह का उपयोग कर डिफ़ॉल्ट शैलियों को ओवरराइड करना चाह सकते हैं। यदि ऐसा है, तो CSStyleDeclaration समय-समय पर पहले से मौजूद हो सकता है कॉन्स्ट्रक्टेड चेक किया गया है।यहाँ एक समाधान है:

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