Barre de progression primefaces sur le traitement backend
Je serais reconnaissant si quelqu'un peut me donner quelques conseils sur la barre de progression et ajax retour en fin de traitement.
De clarifier ce dont j'ai besoin voici plus de détails:
J'ai un bouton de commande pour effectuer un traitement en back-end.
Je voudrais afficher une barre de progression qui atteint les 100% lors de la sauvegarde de haricot termine le traitement back-end instructions.
J'ai regardé sur de nombreux threads mais pas de chance. La plupart d'entre eux ne montrent pas de béton exemple de la façon de le faire.
Ci-dessous est un extrait de mon code:
</h:panelGrid>
<p:commandButton id="btn" value="DoSomeAction"
styleClass="ui-priority-primary" update="panel"
onclick="PF('pbAjax').start();PF('startButton1').disable();"
widgetVar="startButton1"
actionListener="#{actionBean.DoSomeAction}" />
<p:progressBar widgetVar="pbAjax" ajax="true"
value="#{progressBean.progress}" labelTemplate="{value}%"
styleClass="animated">
<p:ajax event="complete" listener="#{progressBean.onComplete}"
update="growl" oncomplete="startButton2.enable()" />
</p:progressBar>
</p:panel>
C'est le code pour le Progrès Brean:
@ManagedBean(name="progressBean")
public class ProgressBean implements Serializable {
private Integer progress;
public Integer getProgress() {
if(progress == null)
progress = 0;
else {
progress = progress + (int)(Math.random() * 35);
if(progress > 100)
progress = 100;
}
return progress;
}
public void setProgress(Integer progress) {
this.progress = progress;
}
public void onComplete() {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Progress Completed", "Progress Completed"));
}
public void cancel() {
progress = null;
}
}
Le résultat de ce code est juste un vide de la barre de progression et rien ne se passe lorsque je clique sur mon bouton.
Merci à l'avance.
source d'informationauteur user1152660 | 2013-07-15
Vous devez vous connecter pour publier un commentaire.
Ça va être plus facile si je vous guider à travers mon exemple de code puisque vous avez deux haricots et je ne sais pas l'interaction entre eux. Vous pouvez l'utiliser pour demander à la vôtre.
<p:commandButton>
Rien d'impressionnant ici. Vous avez un
commandButton
avecwidgetVar="startButton1"
. Lorsque vous cliquez sur elle,onclick
arrive et désactive lecommandButton
. Il témoigne aussi de<p:progressBar>
démarrer viapbAjax.start()
(<p:progressBar>
awidgetVar = "pbAjax.start()"
).<p:progressBar>
<p:progressBar>
sera tout simplement continuer à l'appeler#{progressBean.progress}
pour mettre à jour l'avancement. Lorsque le processus atteint100%
<p:ajax>
de coups de pied dans les appels#{progressBean.onComplete}
.<p:commandButton>
re-activé et<p:growl>
est mis à jour. Remarquez comment je ne suis pas en utilisantPF(...)
. Pour être honnête, je ne sais pas si cela fait une différence, je n'ai pas tester.Note
Dans votre
<p:progressBar>
vous avezoncomplete="startButton2.enable()
. Il devrait êtrestartButton1.enable()
depuis votrewidgetVar
de la valeur pour votre<p:commandButton>
eststartButton1
.Aussi, remarquez que je n'ai pas utilisé
styleClass="animated"
. Avec cela, il vous suffit de faire le fade à la recherche barre bleue. Si vous voulez l'utiliser, alors vous devez prendre certaines mesures supplémentaires. En regardant le code, il semble que vous êtes en prendre directement à partir de la PrimeFaces vitrine donc je vais aussi utiliser leurs actifs.À l'aide de
styleClass="animated"
Tout d'abord, vous allez créer un dossier appelé
resources
dans votrewebapp
dossier (Web Pages
pour Netbeans). Puis créez un dossier appelécss
et ajouter dans une feuille de style appeléestyle.css
. La structure de répertoire sera comme ceci:resources/css/style.css
. Dansstyle.css
vous allez avoir à définir cette règle. (Ne vous inquiétez pas si cela porte à confusion, je vais avoir tout le code ci-dessous).Ensuite, vous allez créer un
images
dossier sousresources
et de la place de l'imagepbar-ani.gif
dans ce dossier (resources/images/pbar-ani.gif
). L'Image ci-dessous.Assurez-vous d'avoir
<h:outputStylesheet name='css/style.css' />
dans<h:head>
et ajouterstyleClass="animated"
dans<p:progressBar>
.Important!
Si vous utilisez PrimeFaces 3.5 comme je suis l'image sera tout simplement pas d'affichage (y compris lorsque vous n'utilisez pas
styleClass
). Si vous regardez de près de Firebug, vous verrez l'erreur suivanteUne solution de contournement que j'ai trouvé pour cela est d'utiliser simplement mannequin
<p:dialog>
.Que c'est.
Vous pouvez obtenir plus d'informations sur le
progressBar
par le biais de la guide du développeur d'.Dans le cas où vous vous demandez comment je savais où trouver l'image que vous devrez télécharger la vitrine. Vous pouvez lire ce article pour savoir comment télécharger de la vitrine.
À mon avis, si vous voulez vraiment utiliser la vitrine de code, il est préférable si vous simplement de télécharger la démo. Souvent, le temps que je suis pas de voir l'image complète ou le code dans la vitrine a quelques erreurs
De toute façon, voici l'exemple de code comme promis. Je suis en utilisant le même
ProgressBean
de la vitrine (la même que la vôtre). Gardez à l'esprit que vous aurez à venir avec la logique de la façon dont votre objet interagit avecProgressBean
pour mettre à jour la barre de progression.Résumé
et n'oubliez pas vos répertoires
resources/css/style.css
resources/images/pbar-ani.gif