Wizard with dynamic tabs

[luca_bk]

Hi all,

I'm trying to use the wizard in my solution, in my scenario I have different questions grouped in sections. I would create one tab per section but questions and sections may differ each time, so I would create tabs dynamically but it's seems not possible (not easly however). In fact using c:forEach to render different panel works but this way it's not possibile to use viewScope for the backing-bean even ui:repeat or ui:include doesn't work for the purpose.

I fear the only solution would be create a custom wizard tag that handle somehting like this:

Code: Select all

<p:wizard ...>
    <p:tabs var='#{mySections}'>
     ....
   </tabs>
</p:wizard>

Hope I'm wrong

Thanks for any advice,
Luca

[bercolax]

As far as I know p:wizard cannot handle this.

But try carousel which can handle dynamic data. You can set the rows attribute value to 1.

[luca_bk]

First of all thanks for your reply,

I've taken a look to the carousel and, actually, it's able to handle dynamic tabs but it's a compromise and the final result doesn't really satisfy me. In fact this way I can't mix dynamic section with static. (For example in my case I would use the wizard for a survey, then I would use the last static tab to display the summary with user's responses)

So now I'll try to use sessionScope for the backin bean and forEach (hope this way my backin bean will not be generated at each ajax interation) inside the wizard component. However I would be glad if you can give me an hint: it's possible to customize wizard component so that I could use it this way:

Code: Select all

<p:wizard>
<p:tab>
 Static tab...
</p:tab>
<ui:repeat value='#{wizard.survey.sections}' var='section'>
   <p:tab>
     ... ...
     ...
   </tab>
</ui:repeat>
<p:tab>
 Static tab...
</p:tab>
</wizard>

Do you think it's an easy job? Can you give me an hint about where I should start in this customization ???

Thanks,
Luca

[bercolax]

A ViewScoped backing bean should not be created again during successive Ajax calls as long as you stay in the same Page (rather than having a Session scoped bean).

- In the backing bean have a variable like

Code: Select all

int selectedInnerTabPosition=0;

and all the inner tabs can have a common prefix for id followed by the position like

Code: Select all

<p:tab  id="innertab#{section.indexInList}>

Now when the user wishes to move to the next inner tab, increment the backing bean's selectedInnerTabPosition and update a hidden field. Then oncomplete of Ajax request invoke a JavaScript function which using jQuery can hide all inner tabs , then display the inner tab whose id is related to selectedInnerTabPosition (by using the hidden field's value). (If your Java framework supports remoting you can use it rather than updating a hidden field )