problème de VerticalLayout

Version imprimable

Bonjour,

Je suis en train de dev un site full Flex.
J'aimerai que des scrolls apparaissent si on redimensionne la fenêtre ou si la résolution est trop petite.

Pour cela j'ai mis en place un VerticalLayout de la manière suivant :
Code:

1 2 3 4 5 6 7 8 <s:Scroller width="100%" height="100%" horizontalCenter="0" textAlign="center"> <s:Group width="100%" height="100%"> <s:layout> <s:VerticalLayout useVirtualLayout="true" clipAndEnableScrolling="true"/> </s:layout> //mes composants... </s:Group> </s:Scroller>
Ça fonctionne a une exception près, mon site n’apparaît que dans la première moitie de l’écran. Si je change en HorizontalLayout Seul la moitie gauche est utilisée.

Je ne sais pas comment résoudre ce problème, ce doit être un truc très bête..

03/08/2011, 09h42
Krazymins

Salut,

peux-tu nous montrer tout le code de ton fichier racine stp ? (avec la balise <mx:Application ...>)

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
<?xml version="1.0" encoding="utf-8"?>
<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/mx"
			   xmlns:local="*" creationComplete="init()">
 
 
 
	<s:Scroller width="100%" height="100%" horizontalCenter="0" textAlign="center">
		<s:Group width="100%" height="100%">
			<s:layout>
				<s:VerticalLayout  useVirtualLayout="true" clipAndEnableScrolling="true"/>
			</s:layout>
	<s:BorderContainer width="100%" height="100%" backgroundImage="@Embed(source='font.jpg')">
	<mx:VBox id="vb" y="0" width="100%" height="100%" horizontalCenter="0" textAlign="center" horizontalAlign="center" clipContent="true">
		<mx:VBox width="80%" height="20%">
			<s:BorderContainer id="head" width="100%" height="100%">
				<s:BitmapImage source="@Embed(source='logo.jpg')"/>
			</s:BorderContainer>
 
			<mx:MenuBar id="myMenuBar" dataProvider="{MenuTab}" labelField="@label" horizontalCenter="0" change="menuChange(event)">
			</mx:MenuBar>	
		</mx:VBox>
 
		<mx:ViewStack id="viewStack" borderStyle="solid" width="80%" height="80%" color="0x323232">
 
			<mx:VBox id="photos" label="Photos" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
				<mx:Label id="imgLabel" text="Images" width="100%" textAlign="center" paddingTop="10"/>
				<mx:Label id="imgDescr" text="Description" width="100%" textAlign="center" paddingTop="20"/>
				<mx:HBox width="100%" height="100%">
					<mx:DataGrid height="100%" width="20%" id="filtres" allowMultipleSelection="true" change="appliFiltre();" sortableColumns="true">
						<mx:columns>
							<mx:DataGridColumn dataField="filtre" headerText="Filtre"/>
						</mx:columns>
					</mx:DataGrid>
				<mx:VBox width="100%" horizontalAlign="center">
					<local:DisplayShelf id="shelf" width="100%" height="100%" bottom="0" effectStart="checkItem();" effectEnd="changeData();"/>
					<mx:HBox>
						<s:Label text="Taille:" />
						<s:HSlider id="pop" width="400" liveDragging="true" maximum="1" minimum="0"
								   snapInterval=".01" value="1"/>
					</mx:HBox>
				</mx:VBox>
				</mx:HBox>
			</mx:VBox>
 
			<mx:VBox id="videos" label="Customer Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" horizontalAlign="center" >
				<mx:Label text="Customer Info" width="100%" textAlign="center" paddingTop="10" />
				<mx:HBox width="100%" horizontalAlign="center">
 
					<mx:Label text="Email Address"/>
					<mx:TextInput id="email" width="200"/>
					<mx:Button label="Submit" click="email.text='';" />
				</mx:HBox>
 
			</mx:VBox>
 
			<mx:VBox id="infos" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
				<mx:Label text="Account Info" width="100%" textAlign="center" paddingTop="10" />
				<mx:HBox width="100%" horizontalAlign="center">
					<mx:Button label="Purchases" />
					<mx:Button label="Sales" />
					<mx:Button label="Reports" />
 
				</mx:HBox>
			</mx:VBox>
 
		</mx:ViewStack>
 
		<s:BorderContainer bottom="0" width="80%" height="20%" horizontalCenter="0" textAlign="left">
		</s:BorderContainer>
	</mx:VBox>
	</s:BorderContainer>
	</s:Group>
	</s:Scroller>
</s:Application>

J'ai viré les transitions, le css et les scripts pour que ce soit plus clair.

10/08/2011, 16h18
npirard

Au niveau de la balise<application>, peux-tu ajouter width="100%" et height="100%" ?

Ou mettre des valeurs "1024" * "768" et voir ce que cela donne!

:ccool:
11/08/2011, 09h48
TekToto42

Le fait d'ajouter height et width dans la balise <application> ne fonctionne pas. En fait mon site ne prend que la moitié de l’écran en hauteur, quoi qu'il arrive. Surement une couille avec le layout...

Essai d'enlever le layout et de remplacer ton "SGroup" par un "VGROUP".

Au lieu de ceci

Code:

1
2
3
4
5
6
7
<s:Scroller width="100%" height="100%" horizontalCenter="0" textAlign="center">
<s:Group width="100%" height="100%">
			<s:layout>
				<s:VerticalLayout  useVirtualLayout="true" clipAndEnableScrolling="true"/>
			</s:layout>
....
</s:Group>

tu aurais ceci

Code:

1
2
3
4
<s:Scroller width="100%" height="100%" horizontalCenter="0" textAlign="center">
<s:VGroup width="100%" height="100%">
...
</s:Vgroup>

11/08/2011, 11h28
TekToto42

Si je fais ça ça fonctionne. Le truc c'est que j'ai mis un layout pour avoir les scroll sur le côté quand on réduit la taille du navigateur. Or la il n'apparaissent pas.
11/08/2011, 14h37
npirard
Au moins, le problème vient bien de ton VerticalLayout.

Regarde en enlevant les options que tu lui as donné, voir si il y a pas d'autres options... Mais comme ça je ne vois pas le souci.

Voici les 2 options que je mets par défaut dans mes scrollers :
Code:

1 2 3 verticalScrollPolicy="auto" horizontalScrollPolicy="auto"
Après, dans ma balise <Application> nous forçons toujours un Heigth et un Width "en Dur"... et le scroller lui fait bien 100% en height et en witdh...

Quand on réduit l'application (moins que le width), mon scroller s'affiche!

Test peut-être cela.
11/08/2011, 16h32
TekToto42

A parfait ca fonctionne merci.

Donc j'ai viré mon VerticalLayout, j'ai mis une height width en dure dans la balise <application> et j'ai rajouté les options dans le balise scroller comme ceci

Code:

<s:Scroller width="100%" height="100%" horizontalCenter="0" textAlign="center" verticalScrollPolicy="auto" horizontalScrollPolicy="auto">

Encore merci.