Discussion :

[TekToto42]

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 :

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

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

[Krazymins]

Salut,

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

[TekToto42]

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

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

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

[npirard]

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

Au lieu de ceci

Code :

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

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 :

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

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