ウィザード タイプのフローを構築するには、基本的に 2 つのオプションがあります。最初のオプションは、1 つのビュー内にすべてのステップを表示することです。もう 1 つは、ウィザードにステップがあるため、ビューの数を表示することです。
1 つのビュー内のすべてのウィザード手順
Xtreme Biker が正しく言及しているように、ビューを設計する最も自然な方法は、条件付きでレンダリングされたコンポーネントのすべてのステップを分離し<h:panelGroup>、別のウィザード ステップに入ったときに Bean のプロパティ currentStep を更新することです。
基本的なビューのセットアップ:
<h:panelGroup id="step1">
<h:panelGroup rendered="#{bean.currentStep eq 1}">
<ui:include src="step1.xhtml"/>
</h:panelGroup>
</h:panelGroup>
...
含まれているページ (step2.xhtml):
...
<h:commandButton value="Back" action="#{bean.back}">
<f:ajax execute="step2" render="step1 step2"/>
</h:commandButton>
<h:commandButton value="Forward" action="#{bean.forward}">
<f:ajax execute="step2" render="step1 step2"/>
</h:commandButton>
...
バッキング Bean:
@ManagedBean
@ViewScoped
public class Bean implements Serializable {
...
private int currentStep = 1;//getter+setter
public String forward() {
...
if(currentStep == 2) {
doSomethingWithValues();
currentStep++;
}
...
}
public String back() {
...
if(currentStep == 2) {
clearNecessaryValues();
currentStep--;
}
...
}
}
このアプローチは、カスタマイズされたコンテンツをビューに埋め込みたい場合に適しています。「標準」のアプローチに慣れている場合は、車輪を再発明してPrimefaces ライブラリの<p:wizard>タグを使用するのではなく、基本的に同じことを行います。
異なるビューでのすべてのウィザード ステップ
戻る/進むボタンを呼び出して別のビューに移動し、flash必要なデータを次のビューに転送するオブジェクトを使用してジョブを実行するたびに異なる結果を返す場合。
したがって、セットアップは次のようになります: wizard/step2.xhtml(ステップごとに 1 つのビュー) および 1 つのビュー スコープ Bean Bean。
ビューの 1 つ (2 つ目のビュー)
...
<h:commandButton value="Back" action="#{bean.back}">
</h:commandButton>
<h:commandButton value="Forward" action="#{bean.forward}">
</h:commandButton>
...
バッキング Bean:
@ManagedBean
@ViewScoped
public class Bean implements Serializable {
...
private int currentStep = 1;//getter+setter
@ManagedProperty("#{flash}")
private Flash flash;//getter+setter
private Data step1Data;
private Data step2Data;
private Data step3Data;
...
@PostConstruct
public void init() {
int step = Integer.parseInt(flash.get("newStep"));
Data step1 = (Data)flash.get("step1");
Data step2 = (Data)flash.get("step2");
Data step3 = (Data)flash.get("step3");
this.currentStep = step;
this.step1Data = step1;
this.step2Data = step2;
this.step3Data = step3;
...
}
public String forward() {
...
if(currentStep == 2) {
doSomethingWithValues();
currentStep++;
flash.put("step", currentStep);
flash.put("step1", step1Data);
flash.put("step2", step2Data);
return "wizard/step3?faces-redirect=true"
}
...
}
public String back() {
...
if(currentStep == 2) {
clearNecessaryValues();
currentStep--;
flash.put("step", currentStep);
flash.put("step1", step1Data);
return "wizard/step1?faces-redirect=true"
}
...
}
}