Discussion :

[ttone]

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

[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)

[ttone]

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

[Fares BELHAOUAS]

Salam ttone,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;

[ttone]

choukran Fares,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<mx:Panel initialize="coverflow.dataProvider()" />

Les méthodes marchent mais je butte sur l'appel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

initialize="coverflow.dataProvider(libraryXML)"

Je ne sais pas où le faire

[Fares BELHAOUAS]

Salam ttone,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[ttone]

Voici mon code à titre indicatif

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Fares BELHAOUAS]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
	}

[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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

coverflow.dataProvider = srvLitterature

avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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...

[Fares BELHAOUAS]

Salam ttone,

Voci une piste:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[ttone]

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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[ttone]

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