javascript & managed bean

**zouhayr** · 29/05/2012, 15h59

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.

**karbos** · 29/05/2012, 17h43

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

**DevServlet** · 30/05/2012, 11h46

Envoyé par zouhayr

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

**zouhayr** · 30/05/2012, 13h08

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

**DevServlet** · 30/05/2012, 13h54

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 ?

**zouhayr** · 30/05/2012, 16h16

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

**fxrobin** · 30/05/2012, 16h28

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.

**DevServlet** · 30/05/2012, 16h33

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.

**karbos** · 30/05/2012, 15h13

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

javascript & managed bean

Développement Web en Java

Vue hybride

Discussions similaires

Partager

Partager