javascript & managed bean

Version imprimable

29/05/2012, 15h59
zouhayr

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.
29/05/2012, 17h43
karbos

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 :

Citation:

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 ?

Citation:

et je récupère une liste contenant tout les valeurs taper
30/05/2012, 11h46
DevServlet

Citation:

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...
30/05/2012, 13h08
zouhayr

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 :ccool:
30/05/2012, 13h54
DevServlet

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 ?
30/05/2012, 15h13
karbos
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:

<h:inputHidden id="monTableau"/>

Ton ManagedBean contient donc :
Code:

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:

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:

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 ;)

Voici le code du page XHTML :

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

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:

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 :ccool:

30/05/2012, 16h28
fxrobin

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.
30/05/2012, 16h33
DevServlet

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.
30/05/2012, 16h34
DevServlet

Citation:

Envoyé par fxrobin

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

:ccool: Tout l'interet s'y trouve, et ca fait du code découplé, propre, maintenable, etc...
30/05/2012, 16h50
fxrobin

Citation:

Envoyé par DevServlet

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.

:ccool: je plussoie :mrgreen:

il faut prendre le temps d'étudier les techno qu'on utilise ... dans une sorte de "bac à sable" pour ensuite reproduire sur son projet avec son propre besoin (et pas l'inverse) ...
30/05/2012, 23h18
zouhayr

je vous remerci pour vos réponses ^^
j'ai essayé de travailler avec le composant datatable j'ai pas trouvé de moyen pour ajouter ou supprimer des colonnes
si c'est possible alors bye bye javascript :D
03/06/2012, 13h50
zouhayr

alors les amis je vois que personne n'as pu me proposer une idée :(
j'utilise le composant dataTable JSF, pour le moment je peut ajouter/supprimer des lignes sans problème , mais je trouve très difficile d'ajouter/supprimer des colonnes :(

c'est important et merci d'avance
04/06/2012, 10h10
DevServlet

Citation:

Envoyé par zouhayr

alors les amis je vois que personne n'as pu me proposer une idée :(
j'utilise le composant dataTable JSF, pour le moment je peut ajouter/supprimer des lignes sans problème , mais je trouve très difficile d'ajouter/supprimer des colonnes :(

c'est important et merci d'avance

Bonjour,
Peux tu nous dire fonctionnellement quel besoin te pousse à devoir ajouter/supprimer une colonne d'un tableau dynamiquement? Et également le nombre total de tableaux possibles que tu peux afficher (toutes colonnes confondues), et également l'opération à l'initiative de l'utilisateur qui va provoquer le changement de l'affichage du tableau?
05/06/2012, 11h41
zouhayr

merci DevServlet pour votre réponse

donc le besoin d'ajouter/supprimer des colonnes réside du demande du client car ce tableau ne contient pas toujours le même nombre de colonne alors il veut avoir la possibilité d'ajouter ou de réduire la taille du tableau, et j'ai un seul tableau qui va faire cette tache.
pour l'opération qui va provoquer le changement est le click sur des bouttons désigner pour ses opérations(ajouter colonne, supprimer colonne, ajouter ligne, supprimer ligne)

je vous remercie pour votre aimable soutient :ccool:
05/06/2012, 14h22
DevServlet

Suppression de ligne, pas de souci, c'est un besoin classique, mais alors suppression de colonnes ==> Pas de bol d'être tombé sur un client aussi chi... Voici une solution provisoire qui pourrait t'aider même si perso je ne suis pas fan ici