Formulaire complexe dynamique

Version imprimable

15/09/2010, 09h58
wamania

Formulaire complexe dynamique

Bonjour à tous.

Je suis assez nouveau en flex, bien que ce ne soit pas mon 1er projet. Aujourd'hui je suis face à un soucis de conception de formulaire.
J'ai trouvé bcp d'exemples sur le net de formulaire simple, mais pas grand chose de très complexe.

J'ai 2 parties pour laquelle je bloque un peu

1. Dans une 1ère liste select, l'utilisateur choisi "personne physique" ou "personne morale". Suivant son choix, la suite du formulaire sera complètement différente. J'ai pensé à 2 choses : les états, mais j'ai l'impression que ça va être super lourd, ou 2 sous-composants, mais ça m'embête un peu pcq il y aura qd même pas mal de choses communes (adresse, phone, mail, etc)

2. Dans ce formulaire d'ajout de personne, il faudra mettre des adresses, autant qu'on veut. Il faudra donc rajouter un bouton qui permet d'insérer le bout de formulaire pour saisir l'adresse x.
Pensez vous qu'il faille que je crée une classe AS contenant ce bout de formulaire, et que j'instancie à chaque click sur le bouton "ajouter une adresse", ou que je crée un composant à part, que j'insère à chaque appel. Est-ce que au final, les 2 solutions ne sont pas un peu semblables...

Chers amis flexeur, merci de votre éclairage :mouarf:

Hello,

Pour le 1:
Les états me semble la bonne solution (surtout que dans Flex4 c'est assez simplifié au niveau de l'utilisation...)
Pour ton problème que les formulaires doivent changer du tout au tout en fonction de la liste déroulante mais qui vont quand même posséder des champs communs, est ce que tu peux pas grouper ces champs dans un sous-composant ?

Pour le 2:
Je pense que tu vas trop loin dans ta réflexion.
Tes champs adresses doivent certainement être dans un container à part (genre VBox). Sur ton bouton "Ajouter une adresse", tu rajoute un click handler dans lequel tu vas faire :
Code:

1 2 3 4 5 public function clickHandler(event:MouseEvent):void{ var newTextInput:TextInput=new TextInput();// je suis pas sûr du nom de la classe mais ça doit être un truc comme ça [id_container_des_champs_adresse].addChild(newTextInput); }
Et ça devrait faire le job, parce que si tu te lances dans des composants tu peux avoir des surprises vis à vis du cycle d'instanciation de composant de Flex...

Bon courage et bienvenu ^^

15/09/2010, 11h59
wamania

Effectivement les états dans flex 4 sont plus simples, j'ai créé mes 2 états assez rapidement.

Sinon c'est vrai qu'ajouter simplement les champs dont j'ai besoin c'est plus simple^^
Un vbox avec un id pour pouvoir supprimer si besoin.

Merci pour ton aide, ça m'a aidé un peu à trier tout ça.
15/09/2010, 13h27
vilveq

Bonjour,

Pour ton point 1 les états sont le meilleur choix.

Pour le point 2, pourquoi ne pas mettre simplement les adresses dans une liste ? Tu peux faire un Itemrenderer comme tu le souhaites pour afficher les infos.

Bien à toi

Salut !

Alors pour le 1. j'ai effectivement mis des états et ça fonctionne à merveille

Pour le 2., j'ai mis une list comme préconise vilveq et ça fonctionne bien à l'affichage.
Seulement voila, le soucis, c'est que j'aimerais que le contenu de l'Itemrenderer change aussi en fonction de l'état. Mais il n'a pas l'air de comprend l'état du du composant principale. Et je n'arrive pas à faire passer un paramètre "dynamique" à l'itemrenderer a chaque changement d'état.

Pour résumer l'architecture :

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
 
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
         creationComplete="init()" xmlns:components="components.*">
 
<s:states>
        <s:State name="physique" />
        <s:State name="morale"  />
    </s:states>
<s:List itemRenderer="components.AdressFormItemRenderer" 
                    id="adressList"
                    width="100%" 
                    borderVisible="false"
                    horizontalCenter="0"
                    verticalCenter="0">
                <s:layout>
                    <s:VerticalLayout gap="14" />
                </s:layout>
                <s:dataProvider>
                    <s:ArrayList>
                        <fx:Object street="toto"/>
                        <fx:Object street="titi"/>
                    </s:ArrayList>
                </s:dataProvider>
            </s:List>

Et l'itemrenderer

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:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         width="100%">
    <s:states>
        <s:State name="physique" />
        <s:State name="morale" />
    </s:states>
    <s:VGroup paddingBottom="15" paddingTop="15" paddingLeft="4" paddingRight="4">
        <mx:FormItem label="Civilité : " required="true">
            <s:DropDownList id="contactAdressType" selectedIndex="0" requireSelection="true" width="200" selectedItem="{data.contactAdressType}">
                <s:dataProvider.physique>
                    <mx:ArrayList>
                        <fx:Object data="home" label="Domicile" />
                        <fx:Object data="work" label="Bureau" />
                    </mx:ArrayList>
                </s:dataProvider.physique>
                <s:dataProvider.morale>
                    <mx:ArrayList>
                        <fx:Object data="siege" label="Siège" />
                        <fx:Object data="filiale" label="Filiale" />
                        <fx:Object data="facturation" label="Facturation" />
                    </mx:ArrayList>
                </s:dataProvider.morale>
            </s:DropDownList>
        </mx:FormItem>
    </s:VGroup>
</s:ItemRenderer>

J'ai volontairement simplifié bien sûr.

Voila, si vous avez des idées..
Merci d'avance

16/09/2010, 14h18
samy2525

Bonjour je suis super novice en Flex 4 mais pour la solution N°2 j'aurais developper un composant AS qui contient une zone de texte pour l'adresse un bouton ajouter une nouvelle adresse et supprimer l'adresse ce dernier est visible que à partir de deux ligne (2 adresse et plus)

c'est à dire dans une meme HBOX on peut avoir une zone texte bouton ajouter une nouvelle adresse , bouton supprimer l'adresse actuelle

Bon courage

Samy
16/09/2010, 17h29
Maskime
Hello,

Tu as un problème de scope je pense.
Ton sous-composant ignore les states de l'application, il faut que tu lui passe en paramètres dans ton code appelant.
Sinon tu dois pouvoir le récupérer en AS avec un truc du style :
Code:

1 2 3 this.application.state // il faut trouver le nom de la variable qui contient le state //courant de l'application, un petit coup de debugger t'en diras plus ;)
Mais je pense pas que se soit la bonne méthode.
Ton composant devrait avoir un attribut "mode" qui te permettrai de définir l'affichage que tu souhaite qu'il réalise.
17/09/2010, 09h07
wamania

En fait le problème c'est que l'état "parent" n'est pas celui de l'application mais d'un composant qui lui même contient les autres composants.

Citation:

Mais je pense pas que se soit la bonne méthode.
Ton composant devrait avoir un attribut "mode" qui te permettrai de définir l'affichage que tu souhaite qu'il réalise.

J'ai repris cette idée, le tout branché sur les "enterState" du parent pour changer les "states" enfants

Bref, ça fonctionne