Ajuster les éléments de la page quelque soit la taille de l'écran

**DBA_OCP** · 14/12/2010, 00h47

Bonjour,

Je suis entrain de créer une page web personnelle avec Flex. Le problème que j'ai c'est que en testant mon application sur mon PC (17 ') ça marche très bien sans problème.

Alors que quand je fais exporter mon projet (release-bin) et que je le met sur un autre pc (15 ') pour tester, l'image que je met en "banner" ne s'affiche pas et les menus sont un peu mal organiser comparer à ce que j'ai crée au début et qui fonctionnait parfaitement sur mon PC.

Ma pagese compose de 3 parties : Le banner + corps avec des menus + copyright tout en bas.

Merci pour votre aide.

PS : J'ai bien fais de sélectionner les éléments de ma page pour qu'ils respectent la mise en page avec le "Constraints" pour tout centrer.

**Krazymins** · 14/12/2010, 01h35

Salut,

question bête mais as-tu utilisé des tailles de composants/containers fixes ou bien travailles tu avec des pourcentages ?

**DBA_OCP** · 14/12/2010, 09h18

Très bonne question au contraire

Je sais pas exactement. Je dois dire que c'est fixe puisque je n'ai fait que drag/drop de mon banner + un panel (où ya les menus) + textArea (pour copyright) ?

Il faut faire comme ça ou autre chose ?

Je suis encore newbie avec Flex. Merci

**Krazymins** · 14/12/2010, 11h18

Salut,

Envoyé par Hot_Abd

Je suis encore newbie avec Flex. Merci

Pas de soucis

Comme tu parles de drag 'n drop je suppose que tu as utilisé le mode design de FlexBuilder ? si c'est le cas effectivement par défaut les tailles sont fixes (pixels).
Il te faut redéfinir dans le code des tailles variables (pourcentage) plutôt que fixes.
Globalement ces tailles ( en %) prennent le conteneur parent comme referentiel. De même je te conseille d'utiliser des composants type HBox ou VBox etc ...

Pour plus d'informations, tu peux aller fouiner ici

Et globalement la doc Flex est remplie d'infos

regarde du côté des composants type "Layout" dans le designer

**Jim_Nastiq** · 14/12/2010, 11h29

Salut,

En effet les Layouts sont important en flex et regarde également les contraintes(top, left, right, bottom, horizontalCenter, verticalCenter) qui peuvent t'intéresser pour le positionnement des tes controles selon la taille de l'écran

**DBA_OCP** · 14/12/2010, 11h47

J'utilise dans ma page déjà un layout de type Panel.

Ma page est comme ceci :

Bannière
(petit espace)
Panel { Bouttons + text }
(petit espace)
Copyrights

**Jim_Nastiq** · 14/12/2010, 11h55

le Panel n'est pas un layout a proprement parlé

**DBA_OCP** · 14/12/2010, 12h33

Donc, pour pouvoir faire un auto fit aux composants de ma page il faut faire quoi au juste SVP ?

Une démarche assez claire sera la bienvenue.

Merci.

**DBA_OCP** · 14/12/2010, 12h35

Envoyé par Krazymins

Salut,

Globalement ces tailles ( en %) prennent le conteneur parent comme referentiel. De même je te conseille d'utiliser des composants type HBox ou VBox etc ...

J'utilise le Panel parce que ça donne un effet ombre qui est jolie !

**Krazymins** · 14/12/2010, 12h46

Envoyé par Hot_Abd

Donc, pour pouvoir faire un auto fit aux composants de ma page il faut faire quoi au juste SVP ?

Euh.. utiliser des conteneurs type HBox/Vbox (entre autres), des width et height en %, et les propriétés verticalAlign, horizontalCenter etc ....

d'une manière générale, regarder les liens que l'on a posté ... On ne sait pas exactement ce que tu veux faire, et on ne peut pas t'écrire tout ton code de A à Z, donc je ne saurais que te conseiller de lire les posts précédents...

Lit déjà ces liens et fait une petite ébauche, nous pourrons te venir en aide si tu rencontres des problèmes. Mais essaye déjà à partir des bases que l'on t'as indiqué

Sinon à la grosse louche, par rapport à ce que tu as indiqué, regarde du côté des VBox et des spacers, tu devrais trouver une bonne partie de ton bonheur

**DBA_OCP** · 14/12/2010, 13h22

Voilà j'ai pu faire le truc pour la bannière mais pas pour le panel (j'insiste sur l'usage du panel par rapport à son effet ombre qui est sympa)

Voici le code ma bannière puis celui du panel.

Code :

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

1
2
3
<mx:Image width="761" height="30%" horizontalCenter="0" y="10" id="image1">
		<mx:source>img/Banner.png</mx:source>
	</mx:Image>

Code :

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

<mx:Panel y="210" width="761" height="60%" layout="absolute" horizontalCenter="0" borderColor="#000000" themeColor="#000000" id="panel1" horizontalAlign="center" verticalAlign="middle">

**Jim_Nastiq** · 14/12/2010, 13h41

avec ce code ton image va varier en hauteur selon la taille de l'écran et donc se déformer!
par ailleurs les propriétés x et y ne sont pas des contraintes elles permettent de fixer de façon statique les coordonnés d'un composant.

Enfin pour ton panel tu indiques un layout absolute , il faut bien comprendre que le layout indiqué pour ton panel est appliqué aux enfants du panel et pas au panel lui meme

.
ton panel et ton image se positionne selon le layout de leur conteneurs parent !

Comme l'a indiqué Krazymins lis attentivement la littérature sur les layouts et surtout comprends la, c'est essentiel.

PS: déclarer horizontalAlign et horizontalCenter ensemble ne présente pas d'intéret

**DBA_OCP** · 14/12/2010, 15h18

Je ne connais pas le code actionScript.

Le code généré, est généré de façon graphique de plus que les différents options à droite de la page que j'ai dû utiliser.

C'est une page static pour le moment, j’intégrerais du PHP après pour mes formulaires.

Je vais essaye de faire avec tes conseils et donner mon résultat.

Merci beaucoup.

**Jim_Nastiq** · 14/12/2010, 15h34

J'en déduis que tu dois utiliser le mode Design de Flex Builder, qui te génére du code mais comme tout WYSIWYG , le code n'est pas franchement propre. Avant de te lancer dans le code, il te faudrait comprendre et étudier Flex et l'actionScript je pense.

**Krazymins** · 14/12/2010, 15h48

Envoyé par Jim_Nastiq

J'en déduis que tu dois utiliser le mode Design de Flex Builder, qui te génére du code mais comme tout WYSIWYG , le code n'est pas franchement propre. Avant de te lancer dans le code, il te faudrait comprendre et étudier Flex et l'actionScript je pense.

Je valide

Tu as pas mal de tuto pour démarrer en Flex, ne serait-ce que sur ce site