Gestire la visualizzazione e la modifica di una lista di oggetti con Thymeleaf

di il
9 risposte

Gestire la visualizzazione e la modifica di una lista di oggetti con Thymeleaf

Ho questo oggetto:

public class VariabileSistema {

    public Long id;
    public String variabile;
    public String valore;

    public VariabileSistema(){

    }

    public VariabileSistema(Long id, String variabile, String valore) {
        this.id = id;
        this.variabile = variabile;
        this.valore = valore;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getVariabile() {
        return variabile;
    }

    public void setVariabile(String variabile) {
        this.variabile = variabile;
    }

    public String getValore() {
        return valore;
    }

    public void setValore(String valore) {
        this.valore = valore;
    }

}
e questa lista di oggetti:

public class VariabiliDiSistema {

    public ArrayList<VariabileSistema> variabiliDiSistema;

    public VariabiliDiSistema() {
    }

    public VariabiliDiSistema(ArrayList<VariabileSistema> variabiliDiSistema) {
        this.variabiliDiSistema = variabiliDiSistema;
    }

    public ArrayList<VariabileSistema> getVariabiliDiSistema() {
        return variabiliDiSistema;
    }

    public void setVariabiliDiSistema(ArrayList<VariabileSistema> variabiliDiSistema) {
        this.variabiliDiSistema = variabiliDiSistema;
    }

}

La lista di oggetti viene istanziata sulla base di alcune informazioni presenti a database:

INSERT INTO variabili_sistema (variabile, valore) VALUES ('registrazione', 'true') ON CONFLICT DO NOTHING;
INSERT INTO variabili_sistema (variabile, valore) VALUES ('login', 'true') ON CONFLICT DO NOTHING;
Quando sono nella pagina html, modifico il tag input di tipo radio e premo sul pulsante, vorrei poter passare al controller la lista di oggetti aggiornata in modo da poter editare conseguentemente il database.
Ho provato questa soluzione che funzione in andata (riesco a renderizzare correttamente la pagina con una chiamata di tipo GET) ma non in ritorno (quando premo sul pulsante al controller non arriva nulla).

<form th:action="@{/pannello-di-controllo}" th:object="${VariabiliDiSistema}" method="post" id="variabiliSistema">
    <div th:switch="${VariabiliDiSistema != null}" th:remove="tag">
        <div th:case="${true}" th:remove="tag">
            <div th:each="VariabileSistema:${VariabiliDiSistema}" th:remove="tag">
                <div th:switch="${
                VariabileSistema.variabile != null &&
                #strings.equals(VariabileSistema.variabile, 'registrazione')
                }" th:remove="tag">
                    <div th:case="${true}" th:remove="tag">
                        <p>Gli utenti possono registrarsi sul sito:</p>
                        <input type="radio" id="registrazioneTrue" name="registrazione" value="true"
                               th:checked="${#strings.equals(VariabileSistema.valore, 'true')} ? 'checked'">
                        <label for="registrazioneTrue">si</label><br>
                        <input type="radio" id="registrazioneFalse" name="registrazione" value="false"
                               th:checked="${#strings.equals(VariabileSistema.valore, 'false')} ? 'checked'">
                        <label for="registrazioneFalse">no</label><br>
                        <br>
                    </div>
                </div>
                <div th:switch="${
                VariabileSistema.variabile != null &&
                #strings.equals(VariabileSistema.variabile, 'login')
                }" th:remove="tag">
                    <div th:case="${true}" th:remove="tag">
                        <p>Gli utenti registrati possono eseguire la procedura di autenticazione:</p>
                        <input type="radio" id="loginTrue" name="login" value="true"
                               th:checked="${#strings.equals(VariabileSistema.valore, 'true')} ? 'checked'">
                        <label for="loginTrue">si</label><br>
                        <input type="radio" id="loginFalse" name="login" value="false"
                               th:checked="${#strings.equals(VariabileSistema.valore, 'false')} ? 'checked'">
                        <label for="loginFalse">no</label><br>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="submit" value="Salva le modifiche">
</form>
Ho provato a scrivere questa nuova pagina:

<form th:action="@{/pannello-di-controllo}" th:object="${VariabiliDiSistema}" method="post" id="variabiliSistema">
    <div th:switch="${VariabiliDiSistema!=null}" th:remove="tag">
        <div th:case="${true}" th:remove="tag">
            <div th:each="vCorrente, x:${VariabiliDiSistema.variabiliDiSistema}" th:remove="tag">
                <div th:switch="${variabiliDiSistema[${x.index}].variabile != null &&
                #strings.equals(variabiliDiSistema[${x.index}].variabile,'registrazione')}" th:remove="tag">
                    <div th:case="${true}" th:remove="tag">
                        <p>Gli utenti possono registrarsi sul sito:</p>
                        <input type="radio" id="registrazioneTrue"
                               th:name="|variabiliDiSistema[${x.index}].variabile|"
                               th:value="${vCorrente.getValore()}"
                               th:checked="${#strings.equals(variabiliDiSistema[${x.index}].valore,'true')}?'checked'">
                        <label for="registrazioneTrue">si</label><br>
                        <input type="radio" id="registrazioneFalse"
                               th:name="|variabiliDiSistema[${x.index}].variabile|"
                               th:value="${vCorrente.getValore()}"
                               th:checked="${#strings.equals(variabiliDiSistema[${x.index}].valore,'false')}?'checked'">
                        <label for="registrazioneFalse">no</label><br>
                        <br>
                    </div>
                </div>
                <div th:switch="${variabiliDiSistema[${x.index}].variabile != null &&
                #strings.equals(variabiliDiSistema[${x.index}].variabile,'login')}" th:remove="tag">
                    <div th:case="${true}" th:remove="tag">
                        <p>Gli utenti registrati possono eseguire la procedura di autenticazione:</p>
                        <input type="radio" id="loginTrue"
                               th:name="|variabiliDiSistema[${x.index}].variabile|"
                               th:value="${vCorrente.getValore()}"
                               th:checked="${#strings.equals(variabiliDiSistema[${x.index}].valore,'true')}?'checked'">
                        <label for="loginTrue">si</label><br>
                        <input type="radio" id="loginFalse"
                               th:name="|variabiliDiSistema[${x.index}].variabile|"
                               th:value="${vCorrente.getValore()}"
                               th:checked="${#strings.equals(variabiliDiSistema[${x.index}].valore,'false')}?'checked'">
                        <label for="loginFalse">no</label><br>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="submit" value="Salva le modifiche">
</form>
e poi ho fatto altri 10000 tentativi ma non risolvo.

9 Risposte

  • Re: Gestire la visualizzazione e la modifica di una lista di oggetti con Thymeleaf

    Non hai mostrato come è fatto il controller. Hai controllato il HTML generato? (come al solito è sempre una delle cose da fare)
    Hai controllato la request? (come al solito anche questo è da fare, con i developer tools del browser)

    Se nel HTML hai un es.: name="variabiliDiSistema[0].variabile" E se il controller riceve un VariabiliDiSistema, allora se ben ricordo è corretto (variabiliDiSistema è la property in VariabiliDiSistema, NON il nome della classe VariabiliDiSistema).

    Non ho purtroppo tempo ora di fare una prova e verificare .... forse domani.

    P.S. in classi "wrapper" come VariabiliDiSistema (e anche in generale), non fissare mai il tipo a es. ArrayList. Stai sull' "astratto", ovvero List.
  • Re: Gestire la visualizzazione e la modifica di una lista di oggetti con Thymeleaf

    Non conosco i developer tools del browser, mi mandi un link da leggere sullo strumento che usi tu?

    Comunque l'HTML non lo vedo proprio, ottengo un errore 500 da spring boot.

    variabiliDiSistema me lo segna errato anche IntelliJ ma ho già provato a toglierlo a rendere la variabile public nella classe, a metterla private a cambiare List con ArrayList (cosa che tu mi hai sconsigliato), ecc...

    Capisco, sei impegnato, non ti preoccupare, grazie comunque per le dritte.

    Ecco il controller:
    
        @RequestMapping(value = "/pannello-di-controllo", method = RequestMethod.GET)
        public String pannelloControlloGet(Model model, Principal principal) {
            variabiliGeneraliPerPaginaHTML(principal, model);
            model.addAttribute("titolo", "Pannello di controllo");
            model.addAttribute("messaggio", "Pannello di controllo");
            try{
                EseguiVariabiliDiSistema eseguiVariabiliDiSistema = new EseguiVariabiliDiSistema(
                        "trova tutte le variabili",
                        null,
                        null,
                        variabileSistemaRepository
                );
                model.addAttribute("VariabiliDiSistema", eseguiVariabiliDiSistema.getVariabiliDiSistema());
            }catch (Exception e){
                model.addAttribute("VariabiliDiSistema", null);
            }
            return "pannello-di-controllo";
        }
    
        @RequestMapping(value = "/pannello-di-controllo", method = RequestMethod.POST)
        public String pannelloControlloPost(
                Model model,
                @ModelAttribute("VariabiliDiSistema") VariabiliDiSistema datiInseriti,
                Principal principal
        ) {
            variabiliGeneraliPerPaginaHTML(principal, model);
            model.addAttribute("titolo", "Pannello di controllo");
            model.addAttribute("messaggio", "Pannello di controllo");
            try{
                EseguiVariabiliDiSistema eseguiVariabiliDiSistema = new EseguiVariabiliDiSistema(
                        "modifica tutte le variabili",
                        null,
                        datiInseriti.getVariabiliDiSistema(),
                        variabileSistemaRepository
                );
                model.addAttribute("VariabiliDiSistema", eseguiVariabiliDiSistema.getVariabiliDiSistema());
            }catch (Exception e){
                model.addAttribute("VariabiliDiSistema", null);
            }
            return "pannello-di-controllo";
        }
    
    Ecco la classe come era all'inizio, prima delle 1000 prove:
    
    public class VariabiliDiSistema {
    
        private List<VariabileSistema> variabiliDiSistema;
    
        public VariabiliDiSistema(List<VariabileSistema> variabiliDiSistema) {
            this.variabiliDiSistema = variabiliDiSistema;
        }
    
        public List<VariabileSistema> getVariabiliDiSistema() {
            return variabiliDiSistema;
        }
    
        public void setVariabiliDiSistema(List<VariabileSistema> variabiliDiSistema) {
            this.variabiliDiSistema = variabiliDiSistema;
        }
    
    }
    
  • Re: Gestire la visualizzazione e la modifica di una lista di oggetti con Thymeleaf

    iBaffiPro ha scritto:


    Non conosco i developer tools del browser, mi mandi un link da leggere sullo strumento che usi tu?
    Firefox: https://developer.mozilla.org/en-US/docs/Tool
    Chrome: https://developer.chrome.com/docs/devtools

    C'è anche per IE/Edge .... ma non li uso mai ...

    iBaffiPro ha scritto:


    Comunque l'HTML non lo vedo proprio, ottengo un errore 500 da spring boot.
    Il HTML della pagina con il form, PRIMA di inviare i dati.
  • Re: Gestire la visualizzazione e la modifica di una lista di oggetti con Thymeleaf

    Partendo dai tuoi consigli ho fatto progressi. Con questo codice:
    
    <form th:action="@{/pannello-di-controllo}" th:object="${VariabiliDiSistema}" method="post" id="variabiliSistema">
        <div th:switch="${VariabiliDiSistema!=null}" th:remove="tag">
            <div th:case="${true}" th:remove="tag">
                <div th:each="vCorrente, x:${VariabiliDiSistema}" th:remove="tag">
                    <div th:switch="${x.current.variabile != null &&
                    #strings.equals(x.current.variabile,'registrazione')}" th:remove="tag">
                        <div th:case="${true}" th:remove="tag">
                            <p>Gli utenti possono registrarsi sul sito:</p>
                            <input type="radio" id="registrazioneTrue"
                                   th:name="|variabiliDiSistema[${x.index}].registrazione|"
                                   th:value="${vCorrente.getValore()}"
                                   th:checked="${#strings.equals(x.current.valore,'true')}?'checked'">
                            <label for="registrazioneTrue">si</label><br>
                            <input type="radio" id="registrazioneFalse"
                                   th:name="|variabiliDiSistema[${x.index}].registrazione|"
                                   th:value="${vCorrente.getValore()}"
                                   th:checked="${#strings.equals(x.current.valore,'false')}?'checked'">
                            <label for="registrazioneFalse">no</label><br>
                            <br>
                        </div>
                    </div>
                    <div th:switch="${x.current.variabile != null &&
                    #strings.equals(x.current.variabile,'login')}" th:remove="tag">
                        <div th:case="${true}" th:remove="tag">
                            <p>Gli utenti registrati possono eseguire la procedura di autenticazione:</p>
                            <input type="radio" id="loginTrue"
                                   th:name="|variabiliDiSistema[${x.index}].login|"
                                   th:value="${vCorrente.getValore()}"
                                   th:checked="${#strings.equals(x.current.valore,'true')}?'checked'">
                            <label for="loginTrue">si</label><br>
                            <input type="radio" id="loginFalse"
                                   th:name="|variabiliDiSistema[${x.index}].login|"
                                   th:value="${vCorrente.getValore()}"
                                   th:checked="${#strings.equals(x.current.valore,'false')}?'checked'">
                            <label for="loginFalse">no</label><br>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="submit" value="Salva le modifiche">
    </form>
    
    Ottengo questo:
    
    <form action="/gestioneutenti/pannello-di-controllo" method="post" id="variabiliSistema">
                            <p>Gli utenti registrati possono eseguire la procedura di autenticazione:</p>
                            <input type="radio" id="loginTrue"
                                   name="variabiliDiSistema[0].login"
                                   value="true" checked="checked">
                            <label for="loginTrue">si</label><br>
                            <input type="radio" id="loginFalse"
                                   name="variabiliDiSistema[0].login"
                                   value="true">
                            <label for="loginFalse">no</label><br>
                            <br>
                            <p>Gli utenti possono registrarsi sul sito:</p>
                            <input type="radio" id="registrazioneTrue"
                                   name="variabiliDiSistema[1].registrazione"
                                   value="true" checked="checked">
                            <label for="registrazioneTrue">si</label><br>
                            <input type="radio" id="registrazioneFalse"
                                   name="variabiliDiSistema[1].registrazione"
                                   value="true">
                            <label for="registrazioneFalse">no</label><br>
                            <br>
        <input type="submit" value="Salva le modifiche">
    </form>
    
    Nel controller ottengo questo:
    
                System.out.println(datiInseriti.getVariabiliDiSistema().size());
                System.out.println(datiInseriti.getVariabiliDiSistema().get(0).getVariabile());
                System.out.println(datiInseriti.getVariabiliDiSistema().get(0).getValore());
                System.out.println(datiInseriti.getVariabiliDiSistema().get(1).getVariabile());
                System.out.println(datiInseriti.getVariabiliDiSistema().get(1).getValore());
    
    
    2
    null
    null
    null
    null
    
    c'è ancora qualcosa che non va ma non dovrei essere distante...
  • Re: Gestire la visualizzazione e la modifica di una lista di oggetti con Thymeleaf

    Questo invia al controllore solo uno dei due membri della classe:
    
    <form th:action="@{/pannello-di-controllo}" th:object="${VariabiliDiSistema}" method="post" id="variabiliSistema">
        <div th:switch="${VariabiliDiSistema!=null}" th:remove="tag">
            <div th:case="${true}" th:remove="tag">
                <div th:each="vCorrente, x:${VariabiliDiSistema}" th:remove="tag">
                    <div th:switch="${x.current.variabile != null &&
                    #strings.equals(x.current.variabile,'registrazione')}" th:remove="tag">
                        <div th:case="${true}" th:remove="tag">
                            <p>Gli utenti possono registrarsi sul sito:</p>
                            <input type="radio" id="registrazioneTrue"
                                   th:name="|variabiliDiSistema[${x.index}].variabile|"
                                   th:value="${vCorrente.getVariabile()}"
                                   th:checked="${#strings.equals(x.current.valore,'true')}?'checked'">
                            <label for="registrazioneTrue">si</label><br>
                            <input type="radio" id="registrazioneFalse"
                                   th:name="|variabiliDiSistema[${x.index}].variabile|"
                                   th:value="${vCorrente.getVariabile()}"
                                   th:checked="${#strings.equals(x.current.valore,'false')}?'checked'">
                            <label for="registrazioneFalse">no</label><br>
                            <br>
                        </div>
                    </div>
                    <div th:switch="${x.current.variabile != null &&
                    #strings.equals(x.current.variabile,'login')}" th:remove="tag">
                        <div th:case="${true}" th:remove="tag">
                            <p>Gli utenti registrati possono eseguire la procedura di autenticazione:</p>
                            <input type="radio" id="loginTrue"
                                   th:name="|variabiliDiSistema[${x.index}].variabile|"
                                   th:value="${vCorrente.getVariabile()}"
                                   th:checked="${#strings.equals(x.current.valore,'true')}?'checked'">
                            <label for="loginTrue">si</label><br>
                            <input type="radio" id="loginFalse"
                                   th:name="|variabiliDiSistema[${x.index}].variabile|"
                                   th:value="${vCorrente.getVariabile()}"
                                   th:checked="${#strings.equals(x.current.valore,'false')}?'checked'">
                            <label for="loginFalse">no</label><br>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="submit" value="Salva le modifiche">
    </form>
    
    
    <form action="/gestioneutenti/pannello-di-controllo" method="post" id="variabiliSistema">
                            <p>Gli utenti registrati possono eseguire la procedura di autenticazione:</p>
                            <input type="radio" id="loginTrue"
                                   name="variabiliDiSistema[0].variabile"
                                   value="login" checked="checked">
                            <label for="loginTrue">si</label><br>
                            <input type="radio" id="loginFalse"
                                   name="variabiliDiSistema[0].variabile"
                                   value="login">
                            <label for="loginFalse">no</label><br>
                            <br>
                            <p>Gli utenti possono registrarsi sul sito:</p>
                            <input type="radio" id="registrazioneTrue"
                                   name="variabiliDiSistema[1].variabile"
                                   value="registrazione" checked="checked">
                            <label for="registrazioneTrue">si</label><br>
                            <input type="radio" id="registrazioneFalse"
                                   name="variabiliDiSistema[1].variabile"
                                   value="registrazione">
                            <label for="registrazioneFalse">no</label><br>
                            <br>
        <input type="submit" value="Salva le modifiche">
    </form>
    
    
                System.out.println(datiInseriti.getVariabiliDiSistema().size());
                System.out.println(datiInseriti.getVariabiliDiSistema().get(0).getVariabile());
                System.out.println(datiInseriti.getVariabiliDiSistema().get(0).getValore());
                System.out.println(datiInseriti.getVariabiliDiSistema().get(1).getVariabile());
                System.out.println(datiInseriti.getVariabiliDiSistema().get(1).getValore());
    
    
    2
    login
    null
    registrazione
    null
    
    domani ho la sveglia presto, devo andare ma dovrei essere vicinissimo...
  • Re: Gestire la visualizzazione e la modifica di una lista di oggetti con Thymeleaf

    Mi pare ovvio ora:
    name="variabiliDiSistema[1].registrazione"

    registrazione non è certo una property della classe VariabileSistema !

    (idem l'altro name che si vede)
  • Re: Gestire la visualizzazione e la modifica di una lista di oggetti con Thymeleaf

    Si quello si, infatti l'ho corretto ma c'è dell'altro perché non riesco a prelevare 'valore'. Questo HTML è sbagliato:
    
    <form action="/gestioneutenti/pannello-di-controllo" method="post" id="variabiliSistema">
                            <p>Gli utenti registrati possono eseguire la procedura di autenticazione:</p>
                            <input type="radio" id="loginTrue"
                                   name="variabiliDiSistema[0].variabile"
                                   value="login" checked="checked">
                            <label for="loginTrue">si</label><br>
                            <input type="radio" id="loginFalse"
                                   name="variabiliDiSistema[0].variabile"
                                   value="login">
                            <label for="loginFalse">no</label><br>
                            <br>
                            <p>Gli utenti possono registrarsi sul sito:</p>
                            <input type="radio" id="registrazioneTrue"
                                   name="variabiliDiSistema[1].variabile"
                                   value="registrazione" checked="checked">
                            <label for="registrazioneTrue">si</label><br>
                            <input type="radio" id="registrazioneFalse"
                                   name="variabiliDiSistema[1].variabile"
                                   value="registrazione">
                            <label for="registrazioneFalse">no</label><br>
                            <br>
        <input type="submit" value="Salva le modifiche">
    </form>
    
    come si recupera la variabile 'valore' con il radio?
  • Re: Gestire la visualizzazione e la modifica di una lista di oggetti con Thymeleaf

    iBaffiPro ha scritto:


    Si quello si, infatti l'ho corretto ma c'è dell'altro perché non riesco a prelevare 'valore'. Questo HTML è sbagliato:
    
                            <input type="radio" id="loginTrue"
                                   name="variabiliDiSistema[0].variabile"
                                   value="login" checked="checked">
                            <input type="radio" id="loginFalse"
                                   name="variabiliDiSistema[0].variabile"
                                   value="login">
    
    come si recupera la variabile 'valore' con il radio?
    Quando il form viene inviato, per i radio viene inviato il value di quello che risulta "checked" (sono gestiti in esclusione a parità di name).
    Immagino che tu voglia mettere il valore scelto nella property valore (non variabile!), quindi dovrai avere

    name="variabiliDiSistema[0].valore" value="true"

    e come value per i due radio, vedo che all'inizio hai fatto insert con 'true', quindi i value avranno "true" e "false".

    E se vuoi riavere nell'oggetto anche variabile, lo devi passare al POST come campo hidden. Ma bisogna vedere (non è evidente fin qui) se fai update per id o variabile.
  • Re: Gestire la visualizzazione e la modifica di una lista di oggetti con Thymeleaf

    Sei il numero uno Andrea ... e ancora... ... tutti meritati!!!
    grazie di cuore
Devi accedere o registrarti per scrivere nel forum
9 risposte