IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Développement Web en Java Discussion :

javascript & managed bean


Sujet :

Développement Web en Java

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Mai 2011
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Mai 2011
    Messages : 24
    Par défaut javascript & managed bean
    Bonsoir tous le monde

    je suis entrain de créer une application JEE dont j'ai rencontrer un problème.

    dans une page A.xhtml je crée une tableau dynamique et éditable (en lignes et en colonnes), chaque cellule contient un champs de texte avec javascript, et je récupère une liste contenant tout les valeurs taper. je dois stansferer cette liste dans un managed bean pour l'utiliser à la construction d'un autre tableau du même taille
    c'est très important, Merci d'avance pour votre aide.

  2. #2
    Membre expérimenté
    Avatar de karbos
    Inscrit en
    Novembre 2008
    Messages
    155
    Détails du profil
    Informations forums :
    Inscription : Novembre 2008
    Messages : 155
    Par défaut
    Pour te répondre, ce serait plus facile avec le code de ton fichier XHTML, le code ton ManagedBean et une petite explication... qu'est-ce que ça veut dire :
    chaque cellule contient un champs de texte avec javascript
    et est-ce que tu charges des valeurs par défaut dans ton tableau lorsque tu charges avec ta page ? D'où viennent-elles ?
    et je récupère une liste contenant tout les valeurs taper

  3. #3
    Membre Expert
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juin 2007
    Messages
    2 938
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Juin 2007
    Messages : 2 938
    Par défaut
    Citation Envoyé par zouhayr Voir le message
    Bonsoir tous le monde

    je suis entrain de créer une application JEE dont j'ai rencontrer un problème.

    dans une page A.xhtml je crée une tableau dynamique et éditable (en lignes et en colonnes), chaque cellule contient un champs de texte avec javascript, et je récupère une liste contenant tout les valeurs taper. je dois stansferer cette liste dans un managed bean pour l'utiliser à la construction d'un autre tableau du même taille
    c'est très important, Merci d'avance pour votre aide.
    Bonjour, je suppose que tu débutes en JSF c'est bien ça? Ton besoin tel qu'expliqué n'a nullement besoin de transiter par du Javascript codé à la main. Tout peut se gérer uniquement entre ta vue xhtml et ton managedBean sans code intermédiaire javascript fait à la main. Les lignes de ton tableau seraient les élements d'une Liste gérée par ton managedBean, et chaque champ d'une ligne du tableau serait si ("bien mappée" dans la vue xhtml) gérable par ton contrôleur, bref tu peux faire très propre... Mais on a peu d'éléments pour te répondre techniquement...

  4. #4
    Membre averti
    Inscrit en
    Mai 2011
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Mai 2011
    Messages : 24
    Par défaut
    merci pour votre réponses karbos et DevServlet

    je vais essayé d'expliquer un peut plus :

    mon tableau est dynamique c-a-d l'utilisateur peut ajouter/supprimer des lignes/colonnes comme il désire, et chaque cellule contient un inputText et ce tableau je le crée avec javascript (j'ai pas trouvé d'autre solution ... ), donc chaque inputText n'est pas gérer par le contrôleur.

    en premier temps, le tableau est vide, après le choix des nombre lignes et colonnes l'utilisateur peut remplir les cases (ipnutText) et ces valeur je les récupère dans array() avec java script (puisque le tableau n'est po gérable par le contrôleur)

    et donc je veux gérer (transférer) cette liste par le contrôleur.

    j’espère que ca devient claire maintenent je vous remercie pour votre précieux aide

  5. #5
    Membre Expert
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juin 2007
    Messages
    2 938
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Juin 2007
    Messages : 2 938
    Par défaut
    Peut on voir le code de ta vue xhtml? et le code de ton managedBean? As tu pris le temps de faire un tutoriel complet JSF avant de te lancer sur ce projet ?

  6. #6
    Membre averti
    Inscrit en
    Mai 2011
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Mai 2011
    Messages : 24
    Par défaut
    Voici le code du page XHTML :
    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
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:p="http://primefaces.org/ui">
     
        <h:head>
            <title>Facelet Title</title>
            <link rel="stylesheet" type="text/css" href="resources/css/css.css" />
            <link rel="stylesheet" type="text/css" href="resources/css/avis_vente.css" />
            <script type="text/javascript" src="resources/js/tablle_dynamique.js"></script>
            <link rel="stylesheet" type="text/css" href="resources/css/HtmlEditTable.css" />
     
        </h:head>
        <h:body>
            <h:form>
                <div id="divWrapper">
                    <p:commandButton value="Génerer" action="#{redirect.fr_redirect}"/>
                    <div id="divAvis">
     
                        <div id="divLogo_fr">
                            <img src="resources/img/logo_Meknes.jpg"/>
                        </div>
     
                        <div id="divPhoto">
                            <div id="divPhotoChild">
                                <p:graphicImage id="localCroppedImage"  
                                                value="#{MBavis.avis.url}"/> 
                            </div>
                            <div id="divDroitePhoto_fr"></div>
                            <div id="divTitre_fr">
                                <div id="divComponent_fr">
                                    <h:selectOneMenu id="type" value="#{MBavis.avis.type}">
                                        <f:selectItems value="#{MBavis.liste.list_type}" var="typpe" itemLabel="#{type}" itemValue="#{typpe}" />  
                                    </h:selectOneMenu> 
                                </div>
                                <div id="divComponent_fr">
                                    <p:editor id="objet" value="#{MBavis.avis.objet}" controls="bold italic underline font size style color highlight alignleft center alignright" width="520" height="80"/>  
                                </div>
                                <div id="divComponent_fr">
                                    <h:selectOneMenu id="logement" value="#{MBavis.avis.logement}" >
                                        <f:selectItems value="#{MBavis.liste.list_logement_fr}" />  
                                    </h:selectOneMenu>
                                </div>
     
                                <div id="divComponent_fr">
                                    <h:selectOneMenu id="local" value="#{MBavis.avis.localisation}">
                                        <f:selectItems value="#{MBavis.liste.list_localiastion_fr}"/>  
                                    </h:selectOneMenu> 
                                </div>
                            </div>
     
                        </div>
     
                        <div id="divUploeadFile">
                                <p:fileUpload fileUploadListener="#{MBavis.uploaded}"
                                              auto="true"
                                              sizeLimit="3000000"   
                                              allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                                              id="documentToUpload"
                                              />  
                        </div>
     
                        <div id="divtext1_fr"> 
                            <p:editor id="text" value="#{MBavis.avis.texte1}" controls="bold italic underline font size style color highlight alignleft center alignright" width="825" height="110" />  
    <!--                        <p:inputTextarea id="text1" value="#{MBavis.avis.texte1}" autoResize="false" />-->
                        </div>
     
                        <div id="divDetaile">
                            <div id="divGauche_fr">
                                <p:editor id="text2" value="#{MBavis.avis.texte2}" controls="bold italic underline font size style color highlight alignleft center alignright" width="460" height="100"/>
                                <div id="divTab_fr">
     
    <INPUT id="" type="button" value="ajouter l" onclick="appendRow()" />
     
            <INPUT id="" type="button" value="supprimer l" onclick="deleteRows()" />
     
            <INPUT id="" type="button" value="ajouter c" onclick="appendColumn()" />
     
            <INPUT id="" type="button" value="supprimer c" onclick="deleteColumns()" />       
     
            <table id="tableHTML" class="ui-datatable-odd">
     
                <tr id="inhead">
                    <td><INPUT id="lignes" type="text"/></td>
                    <td><INPUT id="lignes" type="text"/></td>
                    <td><INPUT id="lignes" type="text"/></td>
                    <td><INPUT id="lignes" type="text"/></td>
                </tr>
     
            </table>
                                </div>
                            </div>
                            <div id="separator_fr"/>
                            <div id="divDroite_fr">
                                <p:editor id="text3" value="#{MBavis.avis.texte3}" controls="bold italic underline font size style color highlight alignleft center alignright" width="320" height="240"/>
                            </div>
                        </div>
                        <div id="contact_fr">
                            <div id="contactCell"><img src="resources/img/eco.png"/></div>
                            <div id="contactCell"><img src="resources/img/eco.png"/></div>
                            <div id="contactCell"><img src="resources/img/eco.png"/></div>
                        </div>
                        <hr id="seperator_footer"/>
                        <div id="footer_avis_fr">
                            Al Omrane Meknès, Rue Ibn Sina, BP 253, ville nouvelle, Meknès / Tél : 05 35 52 26 32<br/>
                            Al Omnrane Meknès est une filiale du Groupe Al Omrane
                        </div>
                    </div>
                </div>
     
     
            </h:form>
        </h:body>
    </html>
    Voici le code du Managed Bean :
    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
    @ManagedBean(name = "MBavis")
    @SessionScoped
    public class MB_Avis implements Serializable{
     
     
        private Avis avis;
        private Listes liste = new Listes() ;
        private List listeTab = new ArrayList();
     
        public List getListeTab() {
            return listeTab;
        }
     
        public void setListeTab(List listeTab) {
            this.listeTab = listeTab;
        }
     
        public MB_Avis() {
            this.avis = new Avis();
            avis.setUrl("resources/default.jpg");
     
        }
     
        public Avis getAvis() {
            return avis;
        }
     
        public void setAvis(Avis avis) {
            this.avis = avis;
        }
     
        public Listes getListe() {
            return liste;
        }
     
        public void setListe(Listes liste) {
            this.liste = liste;
        }
     
         private final String destination="E:/GI5/Workspaces/Projet_OMRAN/Omrane_V0.1/web/resources/";
     
     
     
        public void uploaded(FileUploadEvent event) {
            // Do what you want with the file        
            try {
                copyFile(event.getFile().getFileName(), event.getFile().getInputstream());
            } catch (IOException e) {
            }
     
        }  
     
        public void copyFile(String fileName, InputStream in) {
               try {
     
                    // write the inputStream to a FileOutputStream
                    OutputStream out = new FileOutputStream(new File(destination + fileName));
                    int read = 0;
                    byte[] bytes = new byte[1024];
                    while ((read = in.read(bytes)) != -1) {
                        out.write(bytes, 0, read);
                    }
                    in.close();
                    out.flush();
                    out.close();
     
                    avis.setUrl("resources/"+fileName);
                     System.out.println(destination+fileName);
                    System.out.println("New file created!");
     
     
                    } catch (IOException e) {
                    System.out.println(e.getMessage());
                    }
        }
    }
    Et le code javascript :
    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
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    var columns=4,
    lignes = 1,
    arrayListe = new Array(lignes,columns);
     
    function appendRow() {
        var tbl = document.getElementById('tableHTML'), // table reference
        row = tbl.insertRow(tbl.rows.length),      // append table row
        i;
        // insert table cells to the new row
        for (i = 0; i < tbl.rows[0].cells.length; i++) {
            createCell(row.insertCell(i),'row');          
        }
        lignes ++;
    }
     
    // create DIV element and append to the table cell
    function createCell(cell, style) {
        var div = document.createElement('div'); // create DIV element
        var element6 = document.createElement("input");
        element6.type = "text";
        // create text node
        div.appendChild(element6);                    // append text node to the DIV
        div.setAttribute('class', style);        // set DIV class attribute
        div.setAttribute('className', style);    // set DIV class attribute for IE (?!)
        cell.appendChild(div);                   // append DIV to the table cell
    }
     
     
    // append column to the HTML table
    function appendColumn() {
        var tbl = document.getElementById('tableHTML'), // table reference
        i;
        // open loop for each row and append cell
        for (i = 0; i < tbl.rows.length; i++) {
            createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), 'col');
     
        }
        columns ++;
    }
     
     
    // delete table rows with index greater then 0
    function deleteRows() {
        var tbl = document.getElementById('tableHTML'), // table reference
        lastRow = tbl.rows.length - 1,             // set the last row index
        i;
        // delete rows with index greater then 0
        //for (i = lastRow; i > 0; i--) {
     
        if(lastRow != 0) {
            //                            table.deleteRow(i);
            //                            rowCount--;
            //                            i--;
            //                        }
            tbl.deleteRow(lastRow);
            lignes --;
        }
    //}
    }
     
    // delete table columns with index greater then 0
    function deleteColumns() {
        var tbl = document.getElementById('tableHTML'), // table reference
        lastCol = tbl.rows[0].cells.length - 1,    // set the last column index
        i, j;
        // delete cells with index greater then 0 (for each row)
        for (i = 0; i < tbl.rows.length; i++) {
            // for (j = lastCol; j > 0; j--) {
            if(lastCol != 2){
                tbl.rows[i].deleteCell(lastCol);
                columns --;
            }
        // }
        }
     
    }
     
    function getValueTable(form){
        for(i=0 ; i< lignes; i++){
            var table = document.getElementById('tableHTML'),
            k=0;
     
            for(i=0 ; i< lignes; i++){
                trs = table.getElementsByTagName('tr')[i];
                for(j=0 ; j< columns; j++){
                    tds = trs.getElementsByTagName('td')[j],
                    // alert(tds.getElementsByTagName('input')[0].value);
                    arrayListe[k] = tds.getElementsByTagName('input')[0].value;
                    k++;
                }
            }
        }
        }
    Je vous remercie beaucoup les amis

  7. #7
    Membre Expert
    Avatar de fxrobin
    Homme Profil pro
    Architecte SI, Java Fan, API Manager
    Inscrit en
    Novembre 2007
    Messages
    875
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Architecte SI, Java Fan, API Manager
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : Novembre 2007
    Messages : 875
    Par défaut
    on peut tout à fait ajouter des lignes à un tableau au moyen d'un BackingBean de type HtmlDataTable, ou encore simplement en manipulant la liste du h:datatable.

    Plein d'exemples ici :
    http://balusc.blogspot.fr/2006/06/us...owsToDatatable

    Donc pas besoin de JavaScript.

    En règle général, quand on fait du JSF, on a quasiment plus jamais besoin de faire du JavaScript.

  8. #8
    Membre Expert
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juin 2007
    Messages
    2 938
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Juin 2007
    Messages : 2 938
    Par défaut
    A mon avis, tu as besoin de retourner faire un helloworld complet sur l'utilisation des composants Primefaces, vu que tu pars de zéro, prends du temps pour apprendre, voici le site officiel de primefaces.

  9. #9
    Membre expérimenté
    Avatar de karbos
    Inscrit en
    Novembre 2008
    Messages
    155
    Détails du profil
    Informations forums :
    Inscription : Novembre 2008
    Messages : 155
    Par défaut
    Je crois que je comprends ce que tu essayes de faire... Pourquoi tu ne passerais pas par une chaîne de texte avec un séparateur de valeur type ";"...
    Tu met une balise comme ça dans ton formulaire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <h:inputHidden id="monTableau"/>
    Ton ManagedBean contient donc :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    private String monTableau = "";
    public String getMonTableau(){return this.monTableau}
    public void setMonTableau(String monTableau){this.monTableau = monTableau}
    A chaque fois que tu le souhaites tu peux ajouter des valeurs dans ton tableau via une méthode du type :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function addValue(value){
      document.all["monTableau"] += ';' + value;
    }
    Et dans ton ManagedBean tu récupères un tableau de valeurs comme ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    public String[] getTableau() {
      return this.monTableau.subString(1) /*supprime le premier ";"*/ .split(";");
    }
    Enfin, il y a plus simple, mais ça peut dépanner en attendant que tu nous fournisses ton code

Discussions similaires

  1. JavaScript et Managed Bean
    Par Lolosan dans le forum Développement Web en Java
    Réponses: 47
    Dernier message: 18/04/2014, 17h10
  2. Réponses: 3
    Dernier message: 15/09/2006, 14h01
  3. utilisation d'un managed bean par un autre
    Par Romain93 dans le forum JSF
    Réponses: 6
    Dernier message: 28/07/2006, 10h29
  4. Réponses: 4
    Dernier message: 10/03/2006, 17h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo