Discussion :

[georges_jung]

Bonjour,

Je suis en train de développer un composant dans lequel j'utilise le composant BOOK de ruben swieringa (http://www.rubenswieringa.com/code/as3/flex/Book/). Pour faire bref, ce composant BOOK est un feuilleteur contenant des images. Il est dérivé du composant Canvas.

Lors du redimensionnement du navigateur, je voudrais que ce composant Book et par conséquent les images qu'il contient s'adaptent à la taille de ma fenêtre. Par exemple, si un utilisateur utilise une résolution de 800x600, il doit pouvoir accéder à l'ensemble de l'image sans avoir à scroller.

Voici le code source presque complet de mon composant :

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
 
	<mx:VBox verticalGap="0">
		<mx:HBox width="100%" height="90%" horizontalGap="70">
			<mx:VBox width="10%" height="100%" verticalAlign="bottom" horizontalAlign="center">
				<!-- Les boutons -->
				<mx:Text text="Télécharger au format PDF" width="120" textAlign="{TextFormatAlign.CENTER}" styleName="buttonText"/>
				<mx:Image source="assets/images/buttons/PDF.gif" id="imgPDF"/>
				<reflector:Reflector target="{imgPDF}"/>
				<mx:Text text="Consulter les archives" width="120" textAlign="{TextFormatAlign.CENTER}" styleName="buttonText"/>
				<mx:Image source="assets/images/buttons/Calendar.gif" id="imgCalendar"/>
				<reflector:Reflector target="{imgCalendar}"/>
			</mx:VBox>   
			<rs:Book id="myBook" width="892" height="650"
					openAt="1" autoFlipDuration="100" easing="0.7" regionSize="150" 
					sideFlip="true" hardCover="false" hover="true" snap="false" flipOnClick="true" doubleClickEnabled="true">
 
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/1.jpg')"  x="0" y="0"/></rs:Page>
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/2.jpg')"  x="0" y="0"/></rs:Page>
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/3.jpg')"  x="0" y="0"/></rs:Page>
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/4.jpg')"  x="0" y="0"/></rs:Page>
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/5.jpg')"  x="0" y="0"/></rs:Page>
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/6.jpg')"  x="0" y="0"/></rs:Page>
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/7.jpg')"  x="0" y="0"/></rs:Page>
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/8.jpg')"  x="0" y="0"/></rs:Page>
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/9.jpg')"  x="0" y="0"/></rs:Page>
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/10.jpg')" x="0" y="0"/></rs:Page>
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/11.jpg')" x="0" y="0"/></rs:Page>
					<rs:Page><mx:Image source="@Embed('assets/images/samedi/12.jpg')" x="0" y="0"/></rs:Page>
			</rs:Book>
 
		</mx:HBox>
		<!-- LE COMPOSANT POUR CHANGER DE PAGE !!! -->
 
	</mx:VBox>

J'aurai été tenté de mettre les propriétés width="90%" et height="100%" à l'élément myBook mais étant donné que celui-ci est basé sur un Canvas, cela ne marche pas. De plus, je pense que cette opération ne me permettrai pas de faire un resize automatique de mon "livre" et de ses images.

J'espère n'ai pas été trop confus dans mes propos.
Quelqu'un a t'il une piste pour réaliser ce que je souhaite faire ?

Merci beaucoup

[Jim_Nastiq]

il ne faut pas seulement affecté un redimenssionement à ton book mais aussi aux images qu'il contient

[georges_jung]

Merci pour ta réponse mais j'ai peur de ne pas l'avoir compris

Tu me conseilles de mettre les propriétés width="90%" et height="100%" à l'élément myBook et de mettre aussi les propriétés width="50%" (car chaque image représente une page du book soit la moitié de sa taille) et height="100%" à chacune des images ?

Car ca plante dès que je veux mettre un pourcentage aux propriétés du composant myBook.

Sinon je viens de voir ton blog...super intéressant, bon boulot

[Jim_Nastiq]

je te conseille de travailler avec des valeurs "calculées" plutôt, à l'initialisation récupéré l'espace diponible (width et height) et affecté une taille avec une marge pour ton livre et redimensionner les images en gardant les proportions(petit calcul tout simple). Il ne faut pas oublier d'effectuer le meme calcul lors d'un resize de l'application(resizeEvent il me semble ou Event.RESIZE)

[georges_jung]

OK merci j'ai bien compris...
je pense que cela ne devrait pas poser de problèmes

++