基於datagrid值的flex imagerender

我有一個位置和活動列表的數據網格觀鳥，划船，露營。如果活動在該位置提供，則根據簡單的「是」或「否」填充數據網格。我想用每個活動的單獨圖像替換「是/否」。我創建了一個圖像渲染器，我可以讓圖像改變，但只能用於觀鳥圖像。我的問題是，我怎樣才能讓它循環通過該數據網格並根據值顯示圖像？基於datagrid值的flex imagerender

謝謝。

package widgets.Samples.CononGeocoder2 
{ 
    import mx.containers.HBox; 
    import mx.controls.Image; 
    import mx.controls.Label; 
    import mx.controls.dataGridClasses.*; 

    public class ImageRenderer extends HBox 
    { 
     private var imageReference:Image = null; 
     private var imageReference2:Image = null; 
     private var imageReference3:Image = null; 
     private var lbl:Label = new Label(); 
     private var img:Image = new Image(); 
     private var img2:Image = new Image(); 
     private var img3:Image = new Image(); 

     override public function set data(value:Object):void 
     { 
      //if(value != null && imageReference == null) 
      { 

       for each(data in value) 
       { 

       if(value.Birdwatching == "yes") { 
        img.source = "assets/images/Birdwatching.png"; 
        addChild(img) 
        lbl.text = "(" + value.Birdwatching + ")"; 
        img.toolTip = "Birdwatching"; 
        imageReference = img; 
        setStyle("verticalAlign", "middle"); 
        setStyle("paddingLeft","5"); 
       } 
       if(value.Boating == "yes"){ 
        img2.source = "assets/images/Boating.png"; 
        addChild(img2) 
        lbl.text = "(" + value.Boating + ")"; 
        img2.toolTip = "Boating"; 
        imageReference2 = img2; 
        setStyle("verticalAlign", "middle"); 
        setStyle("paddingLeft","5"); 
       } 
       if(value.Camping == "yes"){ 
        img3.source = "assets/images/Camping.png"; 
        addChild(img3) 
        lbl.text = "(" + value.Camping + ")"; 
        img3.toolTip = "Camping"; 
        imageReference3 = img3; 
        setStyle("verticalAlign", "middle"); 
        setStyle("paddingLeft","5"); 
       } 
       //Place 

       } 
      } 


     } 

    } 
}

來源

2011-05-22 Tristan Forward

最簡單的方法是在MXML中執行此操作。像這樣的：

<mx:HBox> 
    <mx:Image source="assets/images/Birdwatching.png" visible="{data. Birdwatching == 'yes'}" includeInLayout="{data.Birdwatching == 'yes'}" toolTip="Birdwatching" /> 
    <mx:Image source="assets/images/Boating.png" visible="{data. Boating == 'yes'}" includeInLayout="{data.Boating == 'yes'}" toolTip="Boating" /> 
    <mx:Image source="assets/images/Camping.png" visible="{data. Camping == 'yes'}" includeInLayout="{data.Camping == 'yes'}" toolTip="Camping" /> 
    <mx:Label text="{'(' + (data.Birdwatching == 'yes') ? 'Birdwatching' : '' + (data.Boating == 'yes') ? 'Boating' : '' + (data. Camping == 'yes') ? 'Camping' : '' + ')'}" /> 
</mx:HBox>

請注意，這只是一個草案，所以你需要自己調整它。

如果您更喜歡使用ActionScript，則應該學習Flex components lifecycle並覆蓋updateDisplayList()用於顯示和定位子組件的方法。

來源

2011-05-22 17:44:27 Constantiner

我不會我們可以重寫'set data'函數來檢查被傳入的數據的值，然後通過actionscript將圖像添加到容器 – 2011-05-23 15:16:23

對於我來說，這對於新手來說比使用一些高級的ActionScript技術更有效的方法 – Constantiner 2011-05-23 15:19:11

@Constantiner你是絕對正確的，這是更簡單的解決方案，可以在他的情況下工作，這就是爲什麼我沒有降低你的答案的原因。我認爲在他想要的情況下指出這個解決方案的潛在問題也很重要d也研究更先進的技術。這不就是我們如何幫助新手從他們的新手身份畢業嗎？ :) – 2011-05-23 15:22:36

在我回答你的問題之前，我想指出一些項目。項目渲染器有潛力被使用一噸，所以你需要確保他們儘可能精益。例如，您每次都創建3個圖像組件實例。如果您需要更多，您可以根據需要創建它們。此外，如果您打算重複使用Canvas或UIComponent作爲超類，則可能需要進行調查。

接下來，不需要'for'循環。你沒有遍歷值對象。您只需檢查是否將屬性設置爲正確的值。除此之外，您的示例應該可以正常工作（儘管優化將是一個單獨的討論，如果由於某種原因仍然無法正常工作，請使用調試器查看該給定項目的值是多少）

來源

2011-05-22 17:49:40 dtuckernet

基於datagrid值的flex imagerender

回答

相關問題