I have created a primefaces wizard like this:
<p:wizard id="my-wizard" showNavBar="false" flowListener="#{myBean.onFlowProcess}"
widgetVar="transactionWizard">
<p:tab id="first" titleStyleClass="hidden-wizard-title">
</p:tab>
<p:tab id="second" titleStyleClass="hidden-wizard-title">
</p:tab>
</p:wizard>
Below is onflowProcess() code in my bean class. (My bean class has view access scope)
public String onFlowProcess( FlowEvent event ){
return event.getNewStep();
}
My problem is that, when I am on second tab page and refresh the page, it moves back to first tab page after refreshing. Bit I want page to be stayed at current tab after refresh. How do we do that?
Related
I have a requirement, where I have to create tabs. First two tabs are static tabs, next tabs are dynamic based on the records in database table.
When I try to create, only first tabs are coming, remaining tabs are not coming.
Here is my work
<p:tabView id="view1" value="#{bean.values}" var="tab" dynamic="true">
<p:tab id="view11" title="${msgs.ckd_title}">
// first tab content
</p:tab>
<p:tab id="view12" title="${msgs.pc_qsys_title_material}">
// second tab content
</p:tab>
<p:tabView id="view13" value="#{bean.values}" var="tab">
<p:tab id="view3" title="#{tab.label}">
//dynamic tab content
</p:tab>
</p:tabView>
</p:tabView>
I tried with ui:repeat, still no luck
<p:tabView id="supersetTabs"value="#{pcSuperSetReportBean.plantSuperSets}" var="tab">
<p:tab id="provisioninReportBySupplier" title="#{tab.label}">
//dynamic tab content
</p:tab>
</p:tabView>
"Dynamic" implies that bean logic is going to generate variable tab content. So your bean will have to populate the model referred to by value and
something (either an update parameter on a page component, or bean code) will have to tell the page to refresh the tabview supersetTabs.
I try to build a form where a user can enter data step by step. After trying a FlowScoped solution I now try to implement the Primefaces wizard.
Description:
My main.xhtml:
<h:form id="antragErfassenForm">
<p:wizard showStepStatus="false" widgetVar="wiz" showNavBar="false" >
<p:tab id="basic_decision_tab" title="Grundsatzentscheidungen">
<ui:include src="/eAkte/basic_decisions.xhtml" />
</p:tab>
<p:tab id="driving_ways_tab" title="Fahrtwegvarianten">
<ui:include src="/eAkte/driving_ways.xhtml" />
</p:tab>
</p:wizard>
</h:form>
Inside the include files I have buttons to navigate between the tabs.
The next button in the first tab 'basic_decisions.xhtml':
<p:commandLink value="Next" onclick="#{eAkteController.callDrivingWays()}; PF('wiz').next();" />
Depending on the result from callDrivingWays() (which evaluates the data of the first tab) the second tab has a different content.
My problem:
The method callDrivingWays() isn't called when clicking the next button on the first tab. Instead it is already called when the first tab is loaded. That's why I always have an empty second page.
I tried switching the method call callDrivingWays() inside an actionListener inside the button or the flowListener of the Wizard. After that the method is called at the correct time, but when clicking on the next button I get an exception, that my component ID has already been used before.
Does anyone has any suggestions?
Try using the flowListener attribute of p:wizard
<p:wizard flowListener="#{yourBB.yourMethod}" nextLabel="Next" backLabel="Back" showNavBar="false" widgetVar="myWizard">
In your backing bean code instead you can implement the actionListener like this:
public String yourMethod(FlowEvent event) {
if(event.getOldStep().equals("driving_ways_tab")){}
if(event.getNewStep().equals("driving_ways_tab")){}
you need getOldStep and getNewStep to perform some changes according to the tab you are entering, exiting.
I've have a primefaces web application, which consists of several tabs in which the user can enter and edit some data. If a user edits data and want to save this, he presses a save button and the data will be persisted to an database. If he want's to revert his entries he simply press the reset button.
Each tab is a own included .xhtml page.
Now we want to check, if the user navigates away with the menu or press the reset button, if there were made some changes and ask him if he really want to browse away without saving.
Do you have any suggestions?
Here the page of the tabs:
<p:tabView id="tabView"
activeIndex="#{management.activeTabIndex}"
rendered="#{management.dataFetched}"
styleClass="tab-view">
<p:ajax event="tabChange" update=":tabForm" />
<p:tab id="firstTab" title="First">
<p:panel id="firstPanel" styleClass="info-panel">
<ui:include src="/home/test/infoHost.xhtml" />
</p:panel>
</p:tab>
<p:tab id="secondTab" title="Second">
<p:panel id="secondPanel" styleClass="info-panel">
<ui:include src="/home/test/infoDb.xhtml" />
</p:panel>
</p:tab>
<p:tab id="thirdTab" title="Third">
<p:panel id="thirdPanel" styleClass="info-panel">
<ui:include src="/home/test/infoSt.xhtml" />
</p:panel>
</p:tab>
</p:panel>
</p:tab>
</p:tabView>
</h:form>
Many thanks in advance!
I would write jQuery function when tab is clicked and bind it to tabs. In this function I would get the content of data, create <p:remoteCommand> which invoke backing bean function. As a parameter I would pass data from jQuery function and in backing bean compare it with the value of field storing data. If these things differ call a dialog from backing bean "Are you sure...".
http://www.primefaces.org/showcase/ui/overlay/confirmDialog.xhtml
http://www.primefaces.org/showcase/ui/ajax/remoteCommand.xhtml
I'm using Primefaces 3.5 + MOJARA 2.2.
I'm trying to create a Master child kind of environment where we have all applications listed in one Tab with command buttons. Each command button will open up another tab in the same parent window.
To achieve this i'm using dynamic tabs with iframe
<p:tabView value="#{bean.tabs} var="tab">
<p:tab title="#{tab.title}" closable="#{tab.closable}">
<iframe src="#{tab.content}" class="ui-widget" width="100%" height="900px"/>
</p:tab>
</p:tabView>
Here tabs is a List and Tab is a POJO.
class Tab{
private String title;
private String content;//URL
private boolean closable;
//GETTER SETTERS
}
in Backing bean i create a Tab where in show command buttons as below.
public class Bean{
private List<Tab> tabs;
...
public Bean(){
tabs = new ArrayList<Tab>();
Tab tab1 = new Tab("Applicaton","dispApplications.xhtml",false);
tabs.add ( tab1 );
}
}
dispApplications.xhtml
<h:form id="buttonForm">
<h:panelGrid columns="6" border="0">
<c:forEach var="dataItem" items="${bean.applications}">
<h:column>
<p:graphicImage value="/images/#{dataItem.icon}"/>
<p:commandButton binding="#{bean.cmdButton}"/>
</h:column>
</c:forEach>
</h:panelGrid>
</h:form>
Problems:
I'm able to show initial "Applications" Tab. However when i try to invoke each application i had to force reloading of the entire page to get the tabs loaded. This i'm doing cmdButton.setOnClick("parent.location.href = parent.location.href") for each commandButton which is bound to Bean.
I also created an inline processListener for cmdButton which creates an instance of "Tab" and adds it to tabs.
I want to avoid complete page reloading to show tabs.
I want to highlight the new tab that is added/opened recently..
Tabclose is always closing first tab no matter which tab i try closing. Online primefaces showcase shows very clean implementation but i guess this works in 4.0 and hopefully this is a bug in 3.5 version.
This link from Baluc
has provided lot of help, but this is based on tabChange event and also the update is done using requestContext. This is not working when i use iframe.
Any other approach is also welcome.
Thanks in advance
I am using prime face version 3.4 , The problem is with the tab view display.
<p:messages id="messages"/>
<p:tabView id="tabView" dynamic="false">
<p:tab id="tab1" title="Navigation">
<p:tab id="tab2" title="Email Address">
<p:tab id="tab3" title="Password">
</p:tabView>
It's a Tabbed page with 3 Tabs(Notification , Email and Password) , If am on Email tab without entering any values i click submit , it displays the error message at the top and default to the first tab , I need to show the Email Tab
With ajax=false, the whole page gets refreshed after you click the button and tab view takes you to the first page just as if you were navigating to that page for the first time.
You could either set Ajax to true or use an integer on your bean as the selected index for the tabview (there's a property called selectedIndex on the tabview if memory doesn't fail me). The second option, however, would only work for view, session and application scoped beans.
Place the <p:messages id="messages"> tag inside the <p:tab id="tab2" title="Email Address"> tag. Note that it will display messages from any validated component inside the same form (or from any of your tabs). You should use <p:message for="componentId"> to show component-specific messages.