jsf - Combine Faces Flow feature with Ajax -
is possible combine new jsf 2.2 faces flow feature ajax?
use case: there wizard embedded in panel on page. user steps through wizard, panel shall updated, not entire page.
i looking down route myself , did research. short answer yes can use ajax both partial view processing , partial view rendering. here working example:
flow definition
@applicationscoped public class myflow implements serializable { @produces @flowdefinition public flow defineflow(@flowbuilderparameter flowbuilder flowbuilder) { flowbuilder.id("", "myflow"); flowbuilder.viewnode("flowp1", "/flowpage1.xhtml").markasstartnode(); return flowbuilder.getflow(); } }
flowpage1.xhtml (first , view in flow):
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:head> <title>view within flow ajax test</title> </h:head> <h:body> <h:form> <h:panelgrid columns="2"> <p:commandbutton value="flow action method" action="#{myflowbean.flowactionmethod}" update="flowtext"/> <p:commandbutton value="view action method" action="#{myviewbean.viewactionmethod}" update="viewtext"/> <h:outputtext id="flowtext" value="#{myflowbean.flowvalue}" /> <h:outputtext id="viewtext" value="#{myviewbean.viewvalue}" /> </h:panelgrid> </h:form> </h:body> </html>
backing beans
flow-scoped bean
@named @flowscoped("myflow") public class myflowbean implements serializable{ private string flowvalue; @postconstruct public void init(){ system.out.println("myflowbean postconstruct"); } public void flowactionmethod(){ system.out.println("flowactionmethod called"); //flowvalue = "flow value set"; } public string getflowvalue() { return flowvalue; } public void setflowvalue(string flowvalue){ this.flowvalue = flowvalue; } }
view-scoped bean
@named @viewscoped public class myviewbean implements serializable { private @inject myflowbean flowbean; private string viewvalue; @postconstruct public void init(){ system.out.println("myviewbean postconstruct"); } public void viewactionmethod(){ system.out.println("viewactionmethod called"); viewvalue = "view value set"; flowbean.setflowvalue("flow value set"); } public string getviewvalue() { return viewvalue; } }
navigate flow using "myflow" navigation-case anywhere outside flow. once flowpage1.xhtml has rendered, following demonstrate ajax usage:
- press "view action method" button. set value of both bean fields, render view-scoped field. see text view-scoped field.
- press "flow action method" button. render flow scoped bean field, displaying value set view bean's action method.
Comments
Post a Comment