2012-01-30 15 views
5

मेरे पास एक कस्टम फ्लेक्स 4+ घटक है जिसे मैं कस्टम संपत्ति में बदलावों के बारे में जागरूक होने और बनाने के लिए प्रयास कर रहा हूं। यह संपत्ति बटन (और कुछ अन्य दृश्य परिवर्तन) पर ग्राफिक निर्धारित करेगी लेकिन डेटा लगातार बदल जाएगा क्योंकि इसे टाइमर द्वारा अपडेट किया जाएगा।फ्लेक्स 4 कस्टम घटक - संपत्ति परिवर्तन की त्वचा को कैसे सूचित किया जाए?

मैंने अनकही उदाहरणों को देखा है और अभी भी वाक्यविन्यास को सही करने में असमर्थ हैं या यह पता चलता है कि चीजों को कैसे अलग किया जाना चाहिए। मैंने बिना सफलता के प्रतिबद्धताप्रॉपर्टीज और PropertyChangeEvent को ओवरराइड करना देखा है। तो मेरे पास दो प्रश्न हैं।

1) जब मैं बदलता हूं तो एक बाध्य संपत्ति के बारे में अधिसूचित होने के लिए मुझे त्वचा कैसे मिल सकती है?

2) यदि घटक की बाध्य संपत्ति के लिए डेटा एक वस्तु है, तो ऑब्जेक्ट की कोई संपत्ति बदलती है (या प्रत्येक संपत्ति को अलग से पारित करना बेहतर होगा)?

यहां मैं जो हासिल करने की कोशिश कर रहा हूं उसका एक संक्षिप्त उदाहरण है।

घटक इस तरह दिखता है:

<s:ButtonBase xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"> 

<fx:Script> 
    <![CDATA[ 
     private var _iconData:String; 

     [Bindable] 
     public function get iconData():String 
     { 
      return _iconData; 
     } 
     public function set iconData(value:String):void 
     { 
      _iconData = value; 
     } 
    ]]> 
</fx:Script> 

मैं इसे इस तरह फोन कर रहा हूँ:

<components:MyButton id="myButton" iconData="{myData.curIconTag}" skinClass="skins.MyButtonSkin" /> 

मुझे लगता है मैं लोड हो रहा है हो सकता है विभिन्न छवियों के एक बहुत है और इसलिए मैं मैं राज्यों की संख्या से डरता हूं (अप/डाउन/ओवर/अक्षम, आदि के संयोजन के साथ हाथ से बाहर हो सकता है ताकि SetIconDisplay आइकन सेट कर रहा हो, लेकिन असली कुंजी यह है कि मेरे पास उस फ़ंक्शन में अन्य कोड है जब आइकनडेटा संपत्ति प्रत्येक X मिनट या उससे भी अधिक में बदलती है तो इसे निष्पादित करने की आवश्यकता होती है।

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
    creationComplete="init()"> 

<fx:Metadata> 
    [HostComponent("components.MyButton")] 
</fx:Metadata> 

<s:states> 
    <s:State name="default" /> 
    <s:State name="down"/> 
    <s:State name="up"/> 
    <s:State name="over"/> 
    <s:State name="disabled" /> 
</s:states> 

<fx:Script> 
    <![CDATA[ 
     import components.MyButton; 

     [Embed(source="images/image1.png")] 
     private var icon1:Class; 

     [Embed(source="images/image2.png")] 
     private var icon2:Class; 

     [Embed(source="images/image3.png")] 
     private var icon3:Class; 

     [Bindable] 
     public var hostComponent:MyButton; 

     [Bindable] 
     private var iconClass:Class; 

     private function init():void 
     { 
      iconClass = new Class(); 
     } 

     // how do I get this called when the iconData property on my custom component is changed? 
     private function SetIconDisplay():void 
     { 
      switch (hostComponent.iconData) 
      { 
       case "apple": 
        iconClass=icon1; 
        break; 
       case "orange": 
        iconClass=icon2; 
        break; 
       case "grape": 
        iconClass=icon3; 
        break; 
      } 
     } 
    ]]>   
</fx:Script> 

<s:BitmapImage source="{iconClass}" x="0" y="0" width="180" height="108"/> 

फिर, चिंता मत करो कैसे त्वचा वास्तव में क्या कर रहा है यह क्या रूप में है कि शायद बदल (राज्यों का उपयोग नहीं) होगा क्या कर रहा है के बारे में के रूप में ज्यादा: तो त्वचा कुछ इस तरह है। मैं बस यह समझने की कोशिश कर रहा हूं कि बाध्य संपत्ति बदलते समय एक विशिष्ट कार्य को कैसे कॉल करें।

धन्यवाद!

उत्तर

0
<s:BitmapImage source="{hostComponent.iconClass}" /> 


काम करना चाहिए आप सार्वजनिक वर hostComponent घोषित करने के लिए की जरूरत नहीं है: MyButton;

यह SparkSkin

+1

SparkSkin कोड पर एक नज़र डालें और आप पाएंगे कि hostComponent SparkSkin का हिस्सा नहीं है। मेरा मानना ​​है कि संपत्ति मेजबान घटक मेटाडेटा के आधार पर संकलन समय पर बनाई गई है। यह समझ में आता है क्योंकि सभी एमएक्सएमएल की खाल स्पार्कस्किन का विस्तार करती हैं और त्वचा को यह जानने का कोई तरीका नहीं है कि मेजबान की संपत्ति तर्क प्रकार क्या होना चाहिए। एक एक्शनस्क्रिप्ट में केवल त्वचा में आपको मेजबान कॉम्पोनेंट गुण मैन्युअल रूप से बनाना होगा। – JeffryHouser

3

होने आधार वर्ग एक विशेष त्वचा पर एक समारोह फोन अजीब हो सकता है, के रूप में यह मतलब है कि आधार वर्ग त्वचा वर्ग है, जो यह खाल बाहर स्वैप करने के लिए कठिन बना देता है पर निर्भर है का हिस्सा है । इसके चारों ओर जाने के दो अच्छे तरीके हैं:

विकल्प 1: आइकन को घटक में ले जाएं। त्वचा वर्ग सीधे संपत्ति के लिए बाध्य कर सकता है, और यह तय करने के लिए तर्क कि कौन से आइकन का उपयोग त्वचा के बजाय घटक द्वारा किया जा सकता है। यह त्वचा से तर्क को दूर रखता है, और आपके साथ काम करने के लिए स्किनिंग कोड की मात्रा रखता है।

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

संपादित करें: यदि आप कई अन्य स्किन्स बनाने की योजना बना रहे हैं जो आइकन का उपयोग नहीं करते हैं, तो # 2 जाने का तरीका है। इसलिए जैसे त्वचा पर एक संपत्ति बनाएँ:

private var _iconData:String; 

public function get iconData():String 
{ 
    return _iconData; 
} 

public function set iconData(value:String):void 
{ 
    _iconData = value; 
    SetIconDisplay() 
} 

तो यह hostComponent से कनेक्ट करने के एक बाध्यकारी का उपयोग करें:

<fx:Binding source="hostComponent.iconData" destination="iconData" /> 
+0

कस्टम घटक बहुत बुनियादी है, लेकिन इसके लिए मेरे पास लगभग 4 या 5 अलग-अलग खाल होंगे। यह विशेष त्वचा अलग है क्योंकि इसमें कई अलग-अलग आइकन, कुछ एनिमेशन और इसके बारे में अन्य अनूठी चीजें हो सकती हैं, लेकिन मैं तर्क के लिए "सर्वश्रेष्ठ" अभ्यास के साथ कुश्ती कर रहा था। त्वचा में तर्क होने का अर्थ समझ में आया क्योंकि यह कोड है जो निर्धारित करता है कि क्या प्रदर्शित करना है। घटक में कोड को समझ में नहीं आया क्योंकि मैंने सोचा था कि घटक को यह नहीं पता होना चाहिए कि वह कैसा दिखता है या उसकी परवाह नहीं करता है। यह सिर्फ यह निर्धारित करने के लिए त्वचा के लिए एक संपत्ति जोड़ना चाहता है कि क्या करना है। – ImAStreamer

+0

@ImAStreamer ऐसा लगता है कि आपको दूसरा दृष्टिकोण लेना चाहिए, और आइकनडेटा संपत्ति प्राप्त करने के लिए त्वचा को अपडेट करना चाहिए। मैंने आवश्यक कोड के साथ उत्तर अद्यतन किया है। –

+0

मुझे वह दूसरा दृष्टिकोण पसंद है। मैंने एक और दृष्टिकोण खोजा है, जो काम करता है। सुनिश्चित नहीं है कि कौन सा प्राथमिकता दी जाएगी। मेरे अपने प्रश्न का उत्तर देखें। – ImAStreamer

5

मैं एक कस्टम घटना भेजने जब डेटा अद्यतन किया है और इसके लिए सुन रहा है समाप्त हो गया त्वचा में

घटक:

<s:ButtonBase xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx"> 

<fx:Script> 
     <![CDATA[ 
      import classes.CustomEvent; 

      private var _iconData:String; 

      [Bindable] 
      public function get iconData():String 
      { 
       return _iconData; 
      } 
      public function set iconData(value:String):void 
      { 
       _iconData = value; 
       dispatchEvent(new CustomEvent("iconDataUpdated")); 
      } 
     ]]> 
</fx:Script> 

त्वचा इस जोड़ता है:

protected function skin_preinitializeHandler(event:FlexEvent):void 
{ 
     hostComponent.addEventListener(CustomEvent.ICON_DATA_UPDATED,SetIconDisplay); 
} 
+0

अच्छा एक साथी, मुझे लगता है कि इस वजह से जाने का रास्ता अगर आप SparkButtonSkin को देखो, यह निम्न कोड मिला है है: सार्वजनिक समारोह सेट hostComponent (मूल्य: ButtonBase): शून्य { अगर (_hostComponent) _hostComponent.removeEventListener (" contentChange ", contentChangeHandler); _hostComponent = value; यदि (मान) _hostComponent.addEventListener ("contentChange", contentChangeHandler); } – zavr

1

साधारण प्रश्न का एक अन्य समाधान है, हालांकि हो सकता है इस स्थिति में आदर्श नहीं, त्वचा कॉल करने के लिए है। अवैध जब डिस्प्लेलिस्ट() जब भी कोई संपत्ति बदलती है। फिर, त्वचा में, अद्यतन डिस्प्लेलिस्ट फ़ंक्शन को ओवरराइड करें और वहां से एक फ़ंक्शन को कॉल करें जो बदले गए गुणों पर प्रतिक्रिया करता है, साथ ही साथ पैरेंट क्लास पर फ़ंक्शन को कॉल करता है।

यहाँ देखें: https://forums.adobe.com/thread/797247

संबंधित मुद्दे