Scrollbar sur l'application

Version imprimable

18/03/2010, 18h31
Dougui_bzh

Scrollbar sur l'application

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.
19/03/2010, 11h39
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 !
19/03/2010, 12h30
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?
19/03/2010, 12h39
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 !
19/03/2010, 12h49
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?
19/03/2010, 13h49
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.
19/03/2010, 17h34
Dougui_bzh

Le problème c'est que ca commence à être une grosse application. Te passer tout le code serai compliqué.
19/03/2010, 17h59
jylaxx

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

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

Code:

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:

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:

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.

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

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

Code:

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>

20/03/2010, 00h33
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.
20/03/2010, 10h48
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/

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:

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:

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.