Dynamische Daten in speziellem Tree (cascade-list) anzeigen

[francois]

Hallo zusammen

Ich arbeite mich gerade in Flex ein, und bin auf ein Problem gestossen. Was ich vorhabe, ist folgendes:
Daten per PHP aus einer MySQL-Datenbank rekursiv auslesen und diese in XML-Form an eine Tree-Komponente weitergeben (per AMFPHP). Das funktioniert soweit, ist aber nur ein Test, weil die hierarchischen Daten letztendlich in einer "cascade-list"-Komponente angezeigt werden sollen. Die Komponente gibts hier:
blog.widget-labs.com Blog Archive Cascade List component

Die cascade-list bringe ich zum laufen, wenn ich die XML kenne und keine neuen Zweige dazukommen. Da sich die Daten bzw. die Tiefe des Baumes meiner MySQL-Daten aber laufend ändern, muss ich nun irgendwie in Actionscript die XML-Daten durchlaufen bzw. formatieren, so dass die cascade-list das versteht...so denke ich mir das zumindest. Und an dieser Stelle weiß ich nicht weiter.

Hier ist mal der Code für eine statische XML und der dazugehörige Actionscript-Code in Flex, der diese ausliest und formatiert. Wie gesagt, das funktioniert so, aber ich will es ja dynamisch, ohne dass ich die Tiefe der XML kenne.

Ich habe im Moment nicht nur ein Brett vorm Kopf, sondern einen zentimeterdicken, in japanischen Gebirgshütten geschmiedeten und in heiligem Gletscherwasser gehärteten Stahlhelm auf. Vielleicht ist jemand so nett, und hilft mir weiter. Wenn das Ding fertig ist, könnte es ja in den "Stuff"-Bereich, dann haben alle was davon.

Die XML:

<genres>
  <genre name="Rock">
    <band name="AC/DC" image="acdc.png" founded="1973" status="Active">
      <member>Angus Young</member>
      <member>Malcolm Young</member>
      <member>Brian Johnson</member>
      <member>Cliff Williams</member>
      <member>Phil Rudd</member>
    </band>
    <band name="Aerosmith" image="aerosmith.png" founded="1970" status="Active">
      <member>Steven Tyler</member>
      <member>Joe Perry</member>
      <member>Brad Whitford</member>
      <member>Joey Kramer</member>
     </band>
  </genre>
</genres>

Hier der Code in Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
  xmlns:cl="com.rd.widget.cascadelist.*" creationComplete="bands.send()">

<mx:HTTPService id="bands" url="http://localhost/music.xml" resultFormat="e4x" result="onBands(event);" />
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import com.rd.widget.cascadelist.*;

[Bindable]
private var treeData:Object = [];

private function getMembers( band:XML ) : Array {
  var members:Array = [];
  for each ( var member:XML in band.member ) {
  	members.push( { label: member.toString() } );
  }
  return members;
}
private function getBands( genre:XML ) : Array {
  var bands:Array = [];
  for each ( var band:XML in genre.band ) {
  	bands.push( { label: band.@name, children: getMembers( band ) } );
  }
  return bands;
}
private function onBands( event:ResultEvent ) : void {
  var genres:Array = [];
  for each ( var genre:XML in event.result..genre ) {
  	genres.push( { label: genre.@name, children: getBands( genre ) } );
  }
  treeData = {label:"root", root:true, children: genres };
}
]]>
</mx:Script>
<mx:Panel title="Cascade List">
    <cl:CascadeList dataProvider="{treeData}" initialNumberOfLevels="2" width="500" height="300" />
</mx:Panel>
</mx:Application>

[Omega Psi]

1. Wieso solltest du das XML-Protokoll nicht kennen?
2. Da die Liste nicht weiter konfigurierbar ist, kannst du nichts weiter machen als ein Protokoll zu definieren und label und children aber Properties verwenden, um die Datenstruktur zu beschreiben.

[francois]

Danke fürs Antworten :-)

Wenn ich nun in der Datenbank einen neuen Zweig einfüge, dann wird der einfach ignoriert, weil ich nicht definiert habe, dass es sowas wie "tourdaten" gibt. Der Clou wäre ja der, dass das automatisch geht. Also es soll erstmal geschaut werden, wieviele es insgesamt gibt und wie sie heissen, um sie dann in ein gleichnamiges Array zu pushen.
Ich muss dazu sagen, dass ich mehr Designer als Programmierer bin...also bitte nicht zerreissen, wenn das alles abartig klingt ;-)

Beispiel:

<genres>
  <genre name="Rock">
    <band name="AC/DC" image="acdc.png" founded="1973" status="Active">
      <member>Angus Young</member>
      <member>Malcolm Young</member>
      <member>Brian Johnson</member>
      <member>Cliff Williams</member>
      <member>Phil Rudd</member>
      <tourdaten>
          <januar>New York, Berlin</januar>
          <februar>Hintermwaldingen, Buxtehude</februar>
      </tourdaten>
    </band>
    <band name="Aerosmith" image="aerosmith.png" founded="1970" status="Active">
      <member>Steven Tyler</member>
      <member>Joe Perry</member>
      <member>Brad Whitford</member>
      <member>Joey Kramer</member>
     </band>
  </genre>
</genres>

[Omega Psi]

Du hast doch schon einen Object-Parser gebaut - das ist der richtige Ansatz.

[francois]

Jain. Klar könnte ich den Code jetzt so erweitern, dass es mit den Tourdaten auch funktioniert. Ich möchte aber nicht jedesmal die Applikation ändern, wenn ich in der Datenbank neue Daten einpflege. Deshalb suche ich nach einer dauerhaften Lösung.

[Omega Psi]

Die wirst du so nicht bekommen. Am einfachsten ist es gleich AMF zu nehmen und deinen Objekten eine label(:String) und eine children(:Array) Property zu geben und XML als Austauschprotokoll zu ersetzen.

[francois]

Also, meine PHP baut einen String im Format wie im folgenden Code (siehe unten), also genau wie das Beispiel auf der Ursprungsseite der Komponente. Über AMFPHP und ein RemoteObject greife ich dann auf die Funktion in der PHP zu, und das Resultat ist: Weder eine Tree-Komponente noch die cascade-list Komponente verstehen es. Stattdessen kann ich mir wunderbar alles als String in einer Textarea anzeigen lassen. Ich vermute, ich muss das irgendwie als Arraycollection ausgeben, oder? Oder was meinst du mit Property? Sorry, ich bewege mich da noch in Neuland.

{label:"root", root:true, children: 
				[
					{label:"US", children: 
						[
							{label:"West", children:
								[
									{label:"New York"},
									{label:"New Jersey"}									
								
								]},
							{label:"Central", children:
								[
									{label:"Michigan"},
									{label:"Illinois"},
									{label:"Iowa"}											
								]},
							{label:"East", children: 
								[
									{label:"California", children:
										[
											{label:"San Francisco", children:
											[
												{label:"Very very long label"}
											]},
											{label:"Los Angeles"},
											{label:"San Jose"}									
										]
									}									
								]}
						]},
					{label:"Canada"}
				]
			}