Discussion :

[Dougui_bzh]

Bonjour,

Je suis en train de créer une application avec Flex 4 et j'utilise donc différents composants. Lorsque le contenue d'un composant est trop grand pour sa taille une scrollbar s'affiche sur le composant hors j'aimerai que ça soit l'application tout entière soit agrandie et que ça soit le scrollbar de l'application qui s'affiche. J'aimerai que le comportement de l'application ce fasse comme en HTML au final.

J'ai essayé de jouer avec les height, minHeight et mesuredHeight mais ça devient vite compliqué.

Avez-vous une solution? Merci d'avance.

[jylaxx]

A mon avis le meilleur moyen de faire "comme" de l'HTML c'est de faire de l'HTML...

Une application Flex doit être vue plutôt comme une application desktop traditionnelle et non pas comme un autre moyen de faire de l'HTML !

[Dougui_bzh]

Je suis d'accord avec toi mais le problème est que je ne suis pas du tout bon designer et je vois en flex comme le moyen de faire quelque chose de jolie assez simplement. Je sais qu'au niveau du référencement c'est pas la meilleur méthode non plus mais c'est pas trop grave vu que je fais mon projet "pour le fun".

Le gros problème si je décide de faire du HTML et d'y intégrer mes composants flex c'est que je n'aurai pas des transitions entre les pages aussi harmonieuses (avec des Fades ou d'autres effets graphiques).

Pense tu que je devrais quand même faire ainsi?

[jylaxx]

Aucune idée de ce qui serait la meilleure solution dans ton cas.

Dans tous les cas si tu décides de le faire en Flex, pense Flex et non pas HTML sinon ce sera désillusion et déception !

[Dougui_bzh]

Je ne pourrais jamais faire ca : http://frontoffice.matsiya.eu/FrontOffice.html en faisant du HTML.

Pour le moment ca ne change pas vraiment mon problème. Sur cet exemple ils ont juste choisi de faire la une grande page à chaque fois pour que la scrollbar puisse allez jusqu'en bas. Je trouve que c'est une solution qui fait juste illusion. Quelqu'un connait mieux?

[jylaxx]

Pour revenir à ta question initiale, tu peux surement avoir le comportement que tu souhaites avec Flex.
Envois moi le code de ton application je te dirais quelles propriétés modifier.

[Dougui_bzh]

Le problème c'est que ca commence à être une grosse application. Te passer tout le code serai compliqué.

[jylaxx]

Je voulais dire juste une version allégée avec uniquement les containers principaux et un ou deux composants qui posent problème.

[Dougui_bzh]

Voici d'abord le composant devant étre intégré dans l'autre.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas  xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" >
	<fx:Script source="../scripts/indexAlbums.as"/>
	<mx:states>
		<s:State name="normal"/>
		<s:State name="admin"/>
	</mx:states>
	<mx:Tile id="conteneurPhotos" creationComplete="onCreationComplete(event)" verticalAlign="middle" horizontalAlign="center" horizontalCenter="0"/>
 
</mx:Canvas>

D'autres éléments sont ajouté dynamiquement dans le tile.

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
 
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:custcom="com.custom.*" xmlns:appli="application.*"  xmlns:ssr="org.rubyamf.remoting.ssr.*" xmlns:com="com.*" skinClass="skins.application" >
	<fx:Style source="Main.css"/>
 
	<fx:Script source="scripts/main.as"/>
	<s:states>
		<s:State name="normal"/>
		<s:State name="loged"/>
	</s:states>
 
	<mx:Box width="100%" height="100%" maxHeight="{screen.height}" horizontalAlign="center" verticalAlign="middle" paddingBottom="10" paddingTop="10" >
		<mx:VBox id="header" paddingRight="10"  paddingLeft="10" width="95%" height="200" cornerRadius="20" backgroundColor="0x000000" backgroundAlpha="0.7" verticalCenter="0" horizontalCenter="0" borderStyle="solid" borderVisible="true" borderAlpha="1.0" borderColor="#D44040" borderSkin="com.custom.CustomBorder">
			<mx:HBox id="titre" width="100%" height="190" verticalAlign="middle">
				<mx:Text text="Dougui Rules" fontSize="64" width="{titre.width - formLogin.width - 20}"/>
				<com:FormLogin id="formLogin" width="370" height="170" cornerRadius="20" backgroundColor="0x000000" backgroundAlpha="0.7" borderSkin="com.custom.CustomBorder"/>
			</mx:HBox>
		</mx:VBox>
		<mx:MenuBar id="menuBar" labelField="@label" itemClick="menuHandler(event);" dataProvider.normal="{menubarXML}" dataProvider.loged="{menubarXMLLoged}" width="95%"/>
		<mx:VBox id="conteneur" paddingRight="10"  paddingLeft="10"  paddingTop="10" width="95%" height="300" cornerRadius="20" backgroundColor="0x000000" backgroundAlpha="0.7" verticalCenter="0" horizontalCenter="0" borderStyle="solid" borderVisible="true" borderAlpha="1.0" borderColor="#D44040" borderSkin="com.custom.CustomBorder"/>
	</mx:Box>
</s:Application>

Voici le code de l'application, la Vbox "conteneur" recoit les diffrents elements via le code suivant

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
 
public function show():void{
	if(element != null){
		conteneur.removeElement(element);
	}
	var page:String = pages.getItemAt(pages.length-1) as String;
	var args:Array = args.getItemAt(args.length-1) as Array;
	switch(page){
		case "indexAlbum":
			element = new IndexAlbums();
			element.currentState = "normal";
			break;
		case "indexAlbumAdmin":
			element = new IndexAlbums();
			element.currentState = "admin";
			break;
		case "compteCreate":
			element = new FormCompte();
			element.currentState = "create";
			break;
		case "compteEdit":
			element = new FormCompte();
			FormCompte(element).compte = args[0];
			element.currentState = "edit";
			break;
		case "vueAlbum":
			element = new VueAlbum();
			VueAlbum(element).album = args[0];
			break;
	}
	element.id = page;
	element.name = page;
	element.percentHeight = 95;
	element.percentWidth = 95;
	conteneur.addElement(element);
	conteneur.alpha = 0;
	var fade:Fade = new Fade(conteneur);
	fade.duration = 1000;
	fade.alphaTo = 1;
	fade.play();
}

Et donc quand j'ajoute un élément dans l'autre le premier prend une scrollbar et ce que j'aimerai c'est que le conteneur soit redimensionné mais je ne sais pas vraiment comment.

Merci pour ton aide.

[jylaxx]

Pour que cela fonctionne il ne faut pas définir la hauteur du conteneur.

Voici un exemple inspiré de ton code (Flex 3)

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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  horizontalScrollPolicy="off" >
 
 
	<mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" 
		paddingBottom="10" paddingTop="10">
		<mx:VBox id="conteneur" paddingRight="10"  paddingLeft="10"  paddingTop="10" width="95%" 
			cornerRadius="20" backgroundColor="0x000000" backgroundAlpha="0.7"
			borderStyle="solid" borderColor="#D44040" horizontalAlign="center">
			<mx:DateChooser />
			<mx:DateChooser />
			<mx:DateChooser />
		</mx:VBox>	
	</mx:VBox>
 
</mx:Application>

[Dougui_bzh]

ok ca marche mais pas en flex 4.... je pense que ca un rapport avec les layout mais je ne sais pas comment faire pareil.

[jylaxx]

Le layout est géré indépendamment du container, mais cette nouvelle architecture doit permettre d'avantage de libertés.

Je pense que tu trouveras des pistes ici :
http://www.flex-tutorial.fr/2009/09/...ut-et-effects/

[Dougui_bzh]

Merci pour ton aide. Mon problème est résolut et voici la solution :

J'ai un skin pour mon application qui contient ceci :

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
 
<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="application" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">
 
	<s:states>
		<s:State name="normal" />
		<s:State name="disabled" />
	</s:states>
 
	<fx:Metadata>
		[HostComponent("spark.components.Application")]
	</fx:Metadata> 
	<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#FFCCCC" />
				<s:GradientEntry color="#330000" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>    
	<s:Scroller width="100%" height="100%">
		<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0">  
			<s:layout>
				<s:VerticalLayout gap="0" horizontalAlign="justify" useVirtualLayout="true" />
			</s:layout>   
		</s:Group>
	</s:Scroller>
 
</s:Skin>

Et il est applique à mon application par la maniere classique :

Code :

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

1
2
 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:custcom="com.custom.*" xmlns:appli="application.*"  xmlns:ssr="org.rubyamf.remoting.ssr.*" xmlns:com="com.*" skinClass="skins.application" >

J'espère que ça pourra aidé quelqu'un plus tard.