CoverFlowContainer : remplir le cover flow avec un XML parsing

Version imprimable

08/08/2008, 23h15
ttone

CoverFlowContainer : remplir le cover flow avec un XML parsing

Bonjour, j'ai un CeverFlow component, construit sur le component de DougMcCune, rempli par des <mx:panel>

Je voudrais contrôler le contenu à partir d'un xml, de facon à le gérer dynamiquement au lieu de revenir dans la source flex, à la main, à chaque fois.

Seulement <containers:CoverFlowContainer> ne contient pas de carac. "dataProvider".
Une idée ?

Merci
11/08/2008, 11h38
Jim_Nastiq

je n'ai pas regardé le composant de Doug Mc Cune mais si tu dis qu'il n'y a pas de dataProvider et que tu en souhaites un, je ne vois qu'une seule solution, à savoir modifier ce composant en ajoutant un getter/setter et tout ce qui va avec un dataprovider(event sur le collectionEvent.CHANGE et cie) :roll:
11/08/2008, 17h03
ttone

Merci je vais essayer ca. Je débute complètement en Flex, je ne connaissais pas le 'backoffice' des dataProvider...

Salam ttone,

Voici une petite implémentation, en supposant que ton CoverFlowContainer s'appel coverflow (i.e. id="coverflow")

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
	private function set dataProvider(value:Array):void
	{
		_dataProvider = value;
 
		coverflow.removeAllChildren();
		var newPanel:Panel = null;
		for each (var o:Object in _dataProvider)
		{
			newPanel = new Panel();
			newPanel.title = o as String;
			newPanel.width = 200; // Important to setup the width
			newPanel.height = 200; // Important to setup the height
			coverflow.addChild(newPanel);
		}
	}
	private function get dataProvider():Array
	{
		return _dataProvider;
	}
	private var _dataProvider:Array = null;

11/08/2008, 20h17
ttone
choukran Fares,
Code:

1 2 <mx:Panel initialize="coverflow.dataProvider()" />
Les méthodes marchent mais je butte sur l'appel :

Code:

initialize="coverflow.dataProvider(libraryXML)"

Je ne sais pas où le faire :aie:
11/08/2008, 20h34
Fares BELHAOUAS

Salam ttone,

En fait dataProvider dans mon code est un setter/getter, ça veut dire tu peux et tu dois faire:

Code:

coverflow.dataProvider = libraryXML

Mais je ne sais pas exactement c'est quoi le type de ton libraryXML et qu'est ce que tu veux faire au juste, dans mon code, je crée seulement des Panel fixes et vides
11/08/2008, 21h33
ttone

Ok je n'avais pa saisi qu'il n'y avait rien à ajouter au MXML à part linker le coverflow via l'id...

J'y retourne.

Merci

Voici mon code à titre indicatif

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:coverflow="com.dougmccune.coverflow.*"
    layout="vertical" horizontalAlign="center" verticalAlign="middle"
    maxHeight="500" maxWidth="1000"
    backgroundColor="0xffffff" backgroundGradientAlphas="[1.0, 1.0]"
    viewSourceURL="srcview/index.html" xmlns:containers="com.dougmccune.containers.*">
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import flash.net.navigateToURL;     
 
            public function download(urlDoc:URLRequest):void{
			navigateToURL(urlDoc,"_blank");
            }
 
		    private function set dataProvider(value:Array):void
			{
				_dataProvider = value;
 
				coverflow.removeAllChildren();
				var newPanel:Panel = null;
				for each (var o:Object in _dataProvider)
				{
					newPanel = new Panel();
					newPanel.title = o as String;
					newPanel.width = 200; // Important to setup the width
					newPanel.height = 200; // Important to setup the height
					coverflow.addChild(newPanel);
				}
			}
			private function get dataProvider():Array
			{
				return _dataProvider;
			}
			private var _dataProvider:Array = null;
      ]]>
 
    </mx:Script>
 
 	<mx:XML  id="libraryXML" source="library.xml"/>
 
 
    <mx:VBox  id="box" verticalGap="0" height="100%" width="100%"  maxWidth="1000" maxHeight="500" >
 
        <containers:CoverFlowContainer id="coverflow" width="100%" height="100%" 
            horizontalGap="0" borderStyle="inset" backgroundColor="0x000000"
            segments="6" reflectionEnabled="true">
 
            <mx:Panel width="220" height="320" title="Digital Music Instruments"  headerColors="orange">
            		<mx:Image source="{libraryXML.lastResult.paper.source}"/>
     	        	<mx:Button label="Download" click="download(new URLRequest('http://t.tone.free.fr/27sens.com/litterature/AST-TPM-HenryBernard-2007.pdf'))"/>
            </mx:Panel>
 
        </containers:CoverFlowContainer>
 
        <mx:HScrollBar id="scrollbar" width="100%" pageSize="1" maxScrollPosition="{coverflow.numChildren - 1}"
            scrollPosition="{coverflow.selectedIndex}" 
            scroll="coverflow.selectedIndex = Math.round(scrollbar.scrollPosition)" />
 
    </mx:VBox>
 
 
</mx:Application>

Salam

En écrivant mon code, j'ai trouvé que le maxScrollPosition n'est pas mis à jour, j'ai du donc réctifier le programme de la façon suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	private function set dataProvider(value:Array):void
	{
		_dataProvider = value;
 
		coverflow.removeAllChildren();
		var newPanel:Panel = null;
		for each (var o:Object in _dataProvider)
		{
			newPanel = new Panel();
			newPanel.title = o as String;
			newPanel.width = 200; // Important to setup the width
			newPanel.height = 200; // Important to setup the height
			coverflow.addChild(newPanel);
		}
		scrollbar1.setScrollProperties(1, 0, coverflow.numChildren - 1);
	}

12/08/2008, 20h47
ttone

Citation:

En fait dataProvider dans mon code est un setter/getter, ça veut dire tu peux et tu dois faire:

Code :

coverflow.dataProvider = libraryXML

Mais je ne sais pas exactement c'est quoi le type de ton libraryXML et qu'est ce que tu veux faire au juste, dans mon code, je crée seulement des Panel fixes et vides

Salam. En fait en utilisant le composant de DougMcCune, je crée directement mes panel en mxml, pas en as3. Comme dans mon code ci dessus.
Du coup il me reste à définir un dataProvider sur un parent des Panels (en l'occurence le containers:coverflow, ou la mx:VBOx, voire l'mx:Application?) et de générer les panels avec gestion du contenu via des lastResult.

Grâce à ton code je crée l'option/caract. "dataProvider" pour le composant containers:coverflowContainers

L'attribut de monn dataProvider n'est pas un Array, mais un HTTPService, j'ai donc modifié.

Mais comme je suis en MXML et pas en AS3, je ne sais pas où appeler :

Code:

coverflow.dataProvider = srvLitterature

avec

Code:

<mx:HTTPService id="srvLitterature" url="http://.../litteratureXML.xml">

Dans le "main" du script ?

Mon debug dit ok si je ne specifie aucun dataProvider dans la partie MXML, je linke simplement le script via l'id du CoverFlow. Ca release. Je fais pointer mes panel sur l'HTTPService, tout semble bien se passer...

Je débute et j'ai un peu du mal avec ce mix MXML/AS3...

Salam ttone,

Voci une piste:

Code:

1
2
3
4
5
	<mx:HTTPService id="srvLitterature"
		url="http://.../litteratureXML.xml"
		result="resultHandler(event)"
		fault="faultHandler(event)"
		>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
	<mx:Script>
	<![CDATA[
	private function resultHandler(ev:ResultEvent):void
	{
		// GERER LE RESULT
	}
	private function faultHandler(ev:FaultEvent):void
	{
		// GERER LE FAULT
	}
	]]>
	</mx:Script>

Salam Farès, ok je viens de comprendre mieux la place du MXML, c'est un assistant "design", je comprends mieux tes aides du coup. Ta solution de départ est très bien. Mais je bloque surement à cause de grosses lacunes en AS3 :

Citation:

1119 Appel à la méthode dataProvider non-définie via la référence de type static libpath.containers:CoverFlowContainer

here is the code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<?xml version="1.0" encoding="utf-8"?>
<mx:Application ...    initialize="init()">
 
    <mx:HTTPService id="srv" url="http://t.tone.free.fr/27sens.com/litterature/srv/library.xml" />
 
    <mx:Script>
        <![CDATA[
        import mx.events.FlexEvent;
        import mx.core.Container;
        import mx.controls.Button;
 
        public function download(urlDoc:URLRequest):void{
			navigateToURL(urlDoc,"_blank");
        } 
 
	public function init():void{
			var coverflow = null;
 
			coverflow = new CoverFlowContainer();
 
			coverflow.width="100%";
			coverflow.height="100%";
			coverflow.horizontalGap="0";
			coverflow.borderStyle="inset";
			coverflow.backgroundColor="0X000000";
			coverflow.segments="6";
			coverflow.reflectionEnabled="true";
 
			coverflow.dataProvider = srv;
		}
 
        private function set dataProvider(value:HTTPService):void
	{
			_dataProvider = value;
 
			coverflow.removeAllChildren();
			var newPanel:Panel = null;
			var picture:Image = null;
			var read:Button = null;
 
			for each (var paper:Object in _dataProvider)
			{
					newPanel = new Panel();
					newPanel.title = paper.label as String;
					newPanel.width = 220; // Important to setup the width
					newPanel.height = 320; // Important to setup the height
 
						picture = new Image();
						picture.source= paper.pic as String;
 
						read = new Button();
						read.label = "Read";
						//newButton.click = download(new URLRequest(srv.lastResult.papers.paper.url));
 
 
					newPanel.addChild(picture);
					newPanel.addChild(read);
				coverflow.addChild(newPanel);
			}
		}
		private function get dataProvider():HTTPService
		{
			return _dataProvider;
		}
		private var _dataProvider:HTTPService = null;
 
        ]]> 
    </mx:Script>
 
 
    <mx:VBox id="box" verticalGap="0" height="100%" width="100%"  maxWidth="1000" maxHeight="500" >
 
        <containers:CoverFlowContainer id="coverflow">
            <mx:Panel>
	            <mx:Image/>
	            <mx:Button/>
            </mx:Panel>         
        </containers:CoverFlowContainer>
 
        <mx:HScrollBar id="scrollbar" width="100%" pageSize="1" maxScrollPosition="{coverflow.numChildren - 1}"
            scrollPosition="{coverflow.selectedIndex}" 
            scroll="coverflow.selectedIndex = Math.round(scrollbar.scrollPosition)" />
 
    </mx:VBox>
 
</mx:Application>

19/08/2008, 15h10
ttone

La solution est plus simple :
utiliser un mx:Repeater dans le coverflow, et lui assigner un dataProvider