I´m trying to create an updateable GUI using JSF 2.2 and PrimeFaces 4.0. My problem is that the model is updated but not the view.
Here is my example page. It has just a Button which should make the two Panels change their places:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head/>
<h:body>
<h:form>
<p:panelGrid id="grid">
<p:row>
<p:column id="slot1" style="width: 100px; height: 100px">
<p:panel id="panel1" binding="#{test.panel1}" style="width: 100px; height: 100px"/>
</p:column>
<p:column id="slot2" style="width: 100px; height: 100px">
<p:panel id="panel2" binding="#{test.panel2}" style="width: 100px; height: 100px"/>
</p:column>
</p:row>
</p:panelGrid>
<p:commandButton id="button2" value="Switch Panels">
<p:ajax listener="#{test.onSwitchPanels(event)}" update="grid"/>
</p:commandButton>
</h:form>
</h:body>
</html>
And the Java class:
@ManagedBean
@SessionScoped
public class Test {
Panel panel1 = new Panel();
Panel panel2 = new Panel();
public Test() {
panel1.setHeader("Panel 1");
panel2.setHeader("Panel 2");
}
public Panel getPanel1() {
return panel1;
}
public void setPanel1(Panel panel) {
this.panel1 = panel;
}
public Panel getPanel2() {
return panel2;
}
public void setPanel2(Panel panel) {
this.panel2 = panel;
}
public void onSwitchPanels(ActionEvent event) {
Panel tmp = panel1;
panel1 = panel2;
panel2 = tmp;
}
}
Debugging shows me that the getters and setters are called after onSwitchPanels()
with the correct new values when the button is clicked.
But as I wrote the view is not updated. This happens only after a manual page refresh or the next click (which of course sets the model back to it´s original state but shows the switched panels).
I already tried update="@form"
and update="slot1 slot2"
without luck...