Dynamische Bilder im ItemRenderer darstellen

[dr monk]

Hallo zusammen.

Ich ärger mich nun schon gut 2 Stunden mit dem (wahrscheinlich kleinen) Problem rum und finde einfach keine Lösung für folgendes Problem:

Ich möchte in einem DataGrid Bilder entsprechend meiner Suchergebnisse anzeigen lassen. Der ItemRenderer ist in einem Paket angelegt und auch der Spalte korrekt zugewiesen.
Allerdings schaffe ich es nicht ein Bild zur Laufzeit zu laden. Mit "Embed"-Bildern die als Class deklariert werden klappt es einwandfrei. Daher glaube ich, dass mir in meiner Deklaration für das Bild etwas fehlt wo ich einfach nicht drauf komme...

Anbei mal die ItemRenderer-Klasse:

PHP-Code:

package renderer 
{
    import mx.containers.VBox;
    import mx.controls.Image;
     
    public class vorschauRenderer extends VBox
    {
        
        public function vorschauRenderer():void
        {
            super();
        }
        
        [Bindable] public var bild:Image;    // hier stimmt wohl was nicht
                
        override public function set data (value:Object):void {
            this.removeAllElements();
            
            bild = new Image();
            bild.source = value.vorschaubild;    // gibt die erreichbare Internetadresse des Bildes aus
            
            bild.scaleContent = true;
            
            // platz für weitere Elemnte in der VBox
            
            addChild(bild);
        }
    }
} 


Wenn ich nur ein Label hinzufüge klappt dies -> ItemRenderer wird korrekt in den DataGrid eingebunden

Kann mir jemand weiterhelfen und mir sagen wie ich das Bild vor der setData()-Funktion deklarieren muss? Danke schonmal.

MfG Monk

[Omega Psi]

Wieso werden manche Klassen klein geschrieben? Versuch's mal so.

package
{
	import mx.containers.VBox;
	import mx.controls.Image;

	public class ImageRenderer extends VBox
	{
		private var _image:Image;

		override public function set data(value:Object):void
		{
			super.data = value;
			invalidateProperties();
		}

		public function ImageRenderer()
		{
		}

		override protected function commitProperties():void
		{
			super.commitProperties();

			_image.source = data ? data.vorschaubild : data;
		}

		override protected function createChildren():void
		{
			super.createChildren();
			if (!_image)
			{
				_image = new Image();
				_image.trustContent = true;
				_image.scaleContent = true;
				addChild(_image);
			}
		}
	}
}

[dr monk]

Vielen Dank!

Es funktioniert soweit ich sehen kann. Ich habe zwar noch ein Problem damit, dass die Liste beim Scrollen immer auf Index 0 springt, aber das werde ich gleich mal untersuchen.

Aber erstmal muss ich das mit der Sicherheits-Sandbox lösen. Die Bilder sollten ja schließlich nicht immer einen Error ausgeben wenn man das Programm im FD debuggt. Wenn ich mich recht erinner habe ich zu dem Thema bereits schon Links...

Und die Klassennamen habe ich jetzt alle umbenannt

MfG Monk

[dr monk]

Ich habe jetzt vorerst

PHP-Code:

_image.trustContent = true; 


ausgeklammert. Ich habe es einfach nicht hinbekommen die Sicherheitseinstellungen innerhalb von FlashDevelop so einzustellen das die Daten korrekt geladen werden.
Sobald die Eigenschaft nicht gesetzt wurde ( = false) funktioniert es bei mir.

MfG Monk

[dr monk]

Irgendwie gibts Probleme mit dem Script von Omega Psi.

Ein Hinweis vorweg: von 30 Elementen in meinem DataGrid haben 3 Stk ein 50kB großes Bild was dargestellt werden soll.

Wenn ich auf diese Weise ein Bild in meinem DataGrid einblenden lasse und versuche noch weiter nach unten zu scrollen springt der Index immer wieder auf die Zeile mit dem Bild zurück.
Wenn ich per Scrollbalken an dem Element vorbeiscrollen möchte hängt sich Flash auf.
Sortiere ich mein DataGrid, sodass die 3 Elemente zusammen liegen, werden alle Bilder angezeigt. Beim scrollen friert Flash wieder ein.

Muss man bei dem Skript noch irgenwas besonders beachten?

Ich hatte schon testhalber die Bilder als Embed eingebunden gehabt. Dort hat das Scrollen funktioniert.

MFG Monk

Hier noch der Code wie ich das DataGrid definiert habe (der Itemrenderer ist 1:1 übernommen, die Anderen funktionieren einwandfrei)

PHP-Code:

        <mx:VBox id="ergebnisContainer" width="100%" height="100"  visible="false">
            <mx:Panel id="ergebnisAnzeige" width="100%" height="100%">
                <mx:DataGrid id="ergebnisDG" width="100%" height="100%" dataProvider="{ergebnisse}" variableRowHeight="true">
                    <mx:columns>
                        <mx:DataGridColumn dataField="vorschau" headerText="Vorschau" width="300" itemRenderer="renderer.VorschauRenderer" />
                        <mx:DataGridColumn dataField="module" headerText="Module" itemRenderer="renderer.ModuleRenderer" />
                        <mx:DataGridColumn dataField="infos" headerText="Infos" itemRenderer="renderer.InfosRenderer" />
                        <mx:DataGridColumn dataField="pdf" headerText="PDF" width="80" itemRenderer="renderer.PdfRenderer" />
                        <mx:DataGridColumn dataField="bidler" headerText="Bilder" width="80" itemRenderer="renderer.BildRenderer" />
                    </mx:columns>
                </mx:DataGrid>
            </mx:Panel>
        </mx:VBox> 


________________

Edit: anbei noch ein konkretes Beispiel. Dort kann man beobachten, dass man nicht nach unten scrollen kann.

PHP-Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
        import VorschauRenderer;
        
        ]]>
    </mx:Script>
    
    <mx:XMLList id="daten">
        <employee>
            <name>Test 1</name>
            <bild></bild>
        </employee>
        <employee>
            <name>Test 2</name>
            <bild></bild>
        </employee>
        <employee>
            <name>Test 3</name>
            <bild>http://www.joomla-downloads.de/images/stories/retro/icons-magog-white.png</bild>
        </employee>
         <employee>
            <name>Test 4</name>
            <bild></bild>
        </employee>
        <employee>
            <name>Test 5</name>
            <bild>http://www.joomla-downloads.de/images/stories/retro/icons-magog-white.png</bild>
        </employee>
         <employee>
            <name>Test 6</name>
            <bild></bild>
        </employee>
        <employee>
            <name>Test 7</name>
            <bild></bild>
        </employee>
    </mx:XMLList>
    
    <mx:DataGrid dataProvider="{daten}" width="100%" height="300" variableRowHeight="true">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="Name"/>
            <mx:DataGridColumn dataField="bild" headerText="Bild" itemRenderer="VorschauRenderer" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

Der VorschauRenderer ist 1:1 der Code von Omega Psi.
Vielleicht liegt das Problem auch an dem DataGrid selbst?!

[dr monk]

Ich habe noch ein weiteres Problem und finde irgendwie nicht die Ursache gescheige denn die Lösung. Ich verwende den Code von Omega Psi (siehe weiter oben).
Ich bekomme es einfach nicht hin über die .as-Datei die Ausrichtung des Bildes zentriert darzustellen.

Wo muss ich das denn definieren?

MfG Monk

[Omega Psi]

Hast du dir mal die SWFLoader Stile

horizontalAlign="left|center|right"
verticalAlign="top|middle|bottom"

angeschaut? Respective natürlich auch für die VBox.

[dr monk]

Hallo Omega Psi,

ja - das habe ich gemacht. Wenn ich in den .as-Dateien meiner ItemRenderer den Wert horizontalAlign="center" an eine instanzierte VBox hänge kommt immer der Error:

...\src\renderer\PdfRenderer.as(37): col: 11 Error: Access of possibly undefined property horizontalAlign through a reference with static type mx.containers:VBox.
vBox.horizontalAlign = "center";

(vBox ist die zuvor instanzierte VBox -> var vBox:VBox = new VBox(); )

Ich bekomme immer nur horizontalCenter zur Auswahl gestellt (FlashDevelop).

MfG Monk

[Omega Psi]

Es sind Stile, keine Eigenschaften.

[dr monk]

Guten Morgen.

Das mit den Styles kapier ich nicht in dem zusammenhang. Ich habe mir meine Buchseiten mit "Styles" durchgelesen aber sehe den Zusammenhang von Elementen in DataGrids nicht.
Ich habe den Columns in MXML nun den Style "paddingLeft" gegeben und somit "mittig" ausgerichtet. Das tut´s notfalls auch.

MfG Monk

[mildesign]

Das mit den Styles kapier ich nicht in dem zusammenhang.

Eigenschaften-->

PHP-Code:

vbox.x=1; 


style -->

PHP-Code:

vbox.setStyle("horizontalAlign","center"); 


[dr monk]

Danke mildesign. Jetzt hat es geklappt

/* Update
* Das Problem tritt nur auf wenn der Renderer versucht ein Bild zu laden was es nicht gibt.
* Dann müsste man ja eigentlich nur ein Event-Listener hinzufügen der prüft ob das Bild geladen wurde?
* Werde das mal nach dem Essen testen - Mahlzeit!
*/


Es gibt allerdings noch ein Problem mit dem Renderer an sich. Sobald die Bilder im DataGrid angezeigt werden geht die Preformance von Flash in den Keller und hängt sich fast auf (es hängt für mehrere Sekunden).

Ich lasse, als modifikation zum Ursprungsscript, noch eingebundene Bilder anzeigen wenn kein Vorschaubild vorhanden ist. Solange das DataGrid nur diese Bilder darstellt ist die Preformance ok.

Daher vermute ich, dass das Script vielleicht die externen Bilder ständig nachlädt und somit Flash zum "Fastabsturz" bringt. Allerdings ändert sich das Bild im DataGrid nicht wenn ich das Bild während der Ausführung im Vorschauordner umbenenne...

Ich habe mir überlegt ob man vielleicht alle Bilder des DataGrids vorlädt und diese dann als als Array dem Renderer zur Verfügung stellt. Allerdings wüsste ich nicht wie ich das anstellen soll und es gibt (hoffentlich) eine sauberere Lösung?!

Anbei mal mein Code wie ich ihn momentan einsetze:

PHP-Code:

package renderer 
{
    import mx.containers.VBox;
    import mx.controls.Image;

    public class VorschauRenderer extends VBox
    {
        private var _image:Image;
        [Bindable] [Embed(source = "assets/no_image.png")] private var noImage:Class;
        
        override public function set data(value:Object):void
        {
            this.setStyle("horizontalAlign","center");  
            super.data = value;
            invalidateProperties();
        }

        public function VorschauRenderer()
        {
            
        }

        override protected function commitProperties():void
        {
            super.commitProperties();
            
            _image.source = data ? data.vorschau : data;
            
            if (_image.source == "") {
                _image.source = noImage;
            }
        }

        override protected function createChildren():void
        {
            super.createChildren();
            if (!_image)
            {
                _image = new Image();
                //_image.trustContent = true;
                _image.scaleContent = true;
                _image.scaleX = 0.5;
                _image.scaleY = 0.5;
                addChild(_image);
            }
        }
    }
} 


MfG Monk

[Omega Psi]

Ja, das Problem wird sein, dass du immer wieder neue BitmapDatas in den Speicher schreibst. Elegante Lösungen kann ich hier nicht posten, weil mir die Zeit fehlt und das auch etwas den Rahmen deiner Probleme sprengt. Letzten Endes musst du dafür sorgen, dass jedes Bild nur 1x geladen wird. Baue dir einen Singleton, der die Bilder lädt und über den du auf die BitmapDatas zugreifen kannst. Die solltest du die aus Loader.content rausziehen, um sie nur einmal(!) im Speicher zu haben.

[dr monk]

Ich mal wieder

Ich habe jetzt stundenlang versucht das Problem mit den fehlenden Bildern zu lösen. Erst habe ich versucht ein Singleton zu verwenden damit die Bilder nicht andauernd geladen werden (nach diesem Code). Allerdings kommt dann die Fehlermeldung das die Anzahl der Argumente nicht stimmen würde (wahrscheinlich weil die Klasse als Itemrenderer angegeben ist?!)

Dann hatte ich versucht den IOError abzufangen und dann durch eine Bildklasse (noImage) zu ersetzen. Allerdings übernimmt er mir zum einen das Bild nicht und zum Anderen wird nach dem Scrollen im DataGrid immer wieder ein neues Bild erstellt (soweit ich gesehen habe nur von den fehlerhaften?!).

Gibt es eine Möglichkeit zu überprüfen ob die Bilder geladen werden konnten und diese bei Bedarf mit einer Bild-Klasse zu überschreiben?!

Ich verwende noch den Code aus meinem letzten Beitrag. Allerdings habe ich noch eine Styledefinition hinzugefügt (welche keine Auswirkung auf das Problem haben sollte?!)

PHP-Code:

public function VorschauRenderer():void
{
    this.setStyle("horizontalAlign","center"); 
} 


MfG Monk

[Omega Psi]

Meine Lösung kann ich nicht in 3 Worten beschreiben. Aber ich werde in den nächsten Tagen ein github Repository publishen, in dem eine Lösung skizziert ist.