Discussion :

[felix79]

Bonjour
J'ai une page wicket qui lance un traitement particulier quand on clique sur un bouton. Ce traitement est long et comprend plusieurs étapes, je voudrais donc que l'utilisateur voit l'état d'avancement au fur et à mesure.
L'idée ce serait un truc du genre le traitement écrit dans une stream et on affiche dynamiquement cette stream à l'utilisateur...
Mais je ne sais pas du tout comment m'y prendre ! Est ce que c'est seulement possible ?
Toute idée est la bienvenue....

[Jimmy_]

Bonjour,

Oui c'est tout à fait possible.
A toi de choisir si l'étape en cours suffit ou si tu dois (ou peut) avoir quelques choses de plus fin.
Si du texte suffit ou si tu veux quelques choses de plus 'sexy'.

[felix79]

Je veux juste afficher du texte au fur a mesure que mon traitement me l'envoie...

[Jimmy_]

Regarde du coté du AjaxSelfUpdatingTimerBehavior

Sur cet exemple : http://wicketstuff.org/wicket/ajax/world-clock?0

La page se met à jour avec l'heure, tu dois pouvoir réutiliser ce principe.

[felix79]

L'idée est bonne ! Mais ça marche pas....
J'ai bien mis l'AjaxSelfUpdatingTimerBehavior sur le champ qui doit afficher mon avancement et ce champ a bien l'air de se rafraichir toute les secondes, sauf quand je clique sur mon bouton pour lancer le traitement, la j'ai l'impression qu'aucun rafraichissement ne se fait tant que le traitement n'est pas terminé et que la page est "en attente" en quelque sorte....
D'ailleurs si j'ajoute dans ma page l'affichage d'une horloge comme dans l'exemple que tu donnes, je vois bien qu'elle s’arrête pendant toute la durée du traitement...

[Jimmy_]

Le principe de l'exemple est d'attacher un AbstractAjaxTimerBehavior sur ta WebPage qui la referesh toutes les secondes et d'attacher un model sur ton composant. C'est ce modèle qui reçoit la mise à jour qui est affichée lors d'un event onTimer. A toi de construire une chaine de caractère lisible depuis ce modèle au fur et a mesure de ton traitement. Ce qui implique d'avoir la main dessus.

Je n'ai pas vu ton code, mais j'ai l'impression que ton bouton ne fait pas d'Ajax mais un simple post de formulaire non ?

[felix79]

Pour le bouton j'ai mis un IndicatingAjaxButton, donc il fait de l'ajax je suppose....
J'ai réussi a avoir ce que je voulais en lançant mon traitement dans une thread, du coup wicket rend la main et le TimerBehavior raffraichi bien le champ voulu pendant que le traitement se déroule dans une thread parallèle.

[Jimmy_]

Ho ben bravo, je t'avais fait un exemple rapide à base du worldclock pour illustrer mes propos :

Ici chaque fois que tu cliques sur submit, il affiche l'etat d'une chaine de caratère qui se concatène à elle même toutes les secondes :

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
 
 
 
import java.util.TimeZone;
 
import org.apache.wicket.ajax.AbstractAjaxTimerBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.form.AjaxFormValidatingBehavior;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.PropertyModel;
import org.apache.wicket.util.time.Duration;
 
import com.ac.api.error.ServerException;
 
 
public class WorldClockPage extends BasePage
{
 
    String nom= "test";
 
	public void setNom(String nom) {
		this.nom = nom;
	}
 
 
	public String getNom() throws ServerException {	
		nom+=nom;
		return nom;
	}
 
 
    @SuppressWarnings("serial")
	public WorldClockPage()
    {
        // create clock components for different timezones
        final Clock la = new Clock("la", TimeZone.getTimeZone("America/Los_Angeles"));
        final Clock ny = new Clock("ny", TimeZone.getTimeZone("America/New_York"));
        final Clock moscow = new Clock("moscow", TimeZone.getTimeZone("Europe/Moscow"));
        final Clock prague = new Clock("prague", TimeZone.getTimeZone("Europe/Prague"));
        final Clock london = new Clock("london", TimeZone.getTimeZone("Europe/London"));
 
        // make components print out id attrs so they can be updated via ajax
        la.setOutputMarkupId(true);
        ny.setOutputMarkupId(true);
        moscow.setOutputMarkupId(true);
        prague.setOutputMarkupId(true);
        london.setOutputMarkupId(true);
 
        // add the components to the container and add a markup id setter to
        // each component.
        add(la);
        add(ny);
        add(moscow);
        add(prague);
        add(london);
 
		final Label nomText = new Label("nomText", new PropertyModel<String>(this, "nom"));
 
 
        // add the timer behavior to the page and make it update all
        // other components as well
        add(new AbstractAjaxTimerBehavior(Duration.seconds(1))
        {
            /**
             * @see org.apache.wicket.ajax.AbstractAjaxTimerBehavior#onTimer(org.apache.wicket.ajax.AjaxRequestTarget)
             */
            protected void onTimer(AjaxRequestTarget target)
            {
                target.addComponent(la);
                target.addComponent(ny);
                target.addComponent(moscow);
                target.addComponent(prague);
                target.addComponent(london);
            }
        });
 
  		nomText.setOutputMarkupId(true);
        Form form = new Form("ficheForm");
        // attach an ajax validation behavior to all form component's onkeyup
        // event and throttle it down to once per second
 
        AjaxFormValidatingBehavior.addToAllFormComponents(form, "onkeyup", Duration.ONE_SECOND);
 
        // add a button that can be used to submit the form via ajax
        form.add(new AjaxButton("ajax-button", form)
        {
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form<?> form)
            {
                // repaint the feedback panel so that it is hidden
                target.addComponent(nomText);
            }
 
 
        });
        form.add(nomText);
        add(form);
 
 
    }
}

Et la page qui va avec :

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
<wicket:extend>
 
This example demonstrates a AjaxTimerBehavior as well as updating of multiple components on the page.
<br/>
This AjaxTimerBehavior can be attached to any component and will recieve a callback every x number of milliseconds.
Within this callback it is very simple to update any number of components via ajax.
 
<br/><br/>
<table cellspacing="0" cellpadding="2">
<tr>
    <td style="align:right;">Los Angeles:</td>
    <td><span wicket:id="la">[la clock]</span></td>
</tr>
<tr>
    <td style="align:right;">New York:</td>
    <td><span wicket:id="ny">[ny clock]</span></td>
</tr>
<tr>
    <td style="align:right;">London:</td>
    <td><span wicket:id="london">[london clock]</span></td>
</tr>
<tr>
    <td style="align:right;">Prague:</td>
    <td><span wicket:id="prague">[prague clock]</span></td>
</tr>
<tr>
    <td style="align:right;">Moscow:</td>
    <td><span wicket:id="moscow">[moscow clock]</span></td>
</tr>
</table>
      	<form wicket:id="ficheForm">
			<br></br>
        	<input type="submit" value="submit" wicket:id="ajax-button"/>
        	<br></br> 
        	<span wicket:id="nomText"></span>
		</form>
</wicket:extend>