How to get all Tabs without going into onTabChange - jsf

I want to know how to get all the tabs in the JSF layer without going into the ontabChange method.
I have a system with dynamic tabs. Depending on the values users keyed in, different tabs will be rendered. After saving, the user needs to be directed to the "Account" tab, however with all the tab renderings, the index for "Account" may have changed.
If user do a tab change then it's fine, because I can get all the children for the tab and navigate to whichever index "Account" is.
But the problem is, how do I populate the tab and the children if the user did not call the ontabchange method, meaning that the user did not do any navigate to other tabs and straight away save the information.
<p:tabView id="tabView"
activeIndex="#{userBacking.tabInt}">
<p:ajax event="tabChange" immediate="true" update=":form:message"
listener="#{userBacking.onTabChange}" />
<p:tab id="tab1" title="Personal Information">
// Items for tab 1
</p:tab>
<p:tab id="tab2" rendered="#{userBacking.renderedTab2}
title="Education">
// Items for tab 2
</p:tab>
<p:tab id="tab3" rendered="#{userBacking.renderedTab3}"
title="Qualifications">
// Items for tab 3
</p:tab>
<p:tab id="tab4" rendered="#{userBacking.renderedTab4}"
title="Contact Information">
// Items for tab 4
</p:tab>
<p:tab id="tab5" title="Account">
// Items for tab 5
</p:tab>
</p:tabView>
Without the user calling the ontabchange, I want to get all the tabs available and navigate to the "Account" tab.

Related

Creating static and dynamic tabs on a single page

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.

Check page for modifications if the user browses away from page

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

Tab is displaying the default , Need to show the tab which we select

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.

Execute listener corresponding to selected tab in p:tabview on tabChange event

I need to fetch corresponding data into bean whenever some certain tab is selected from the tabview. For this I have been trying to use f:event with preRenderComponent but that doesnt help with desired.
How can I execute listener corresponding to the tab whenever a certain tab is selected in tabview.
<p:tabView dynamic="true" cache="false">
<p:tab title="People I'm following" >
<f:event type="preRenderComponent" listener="#{listRetriever.retrieveFollowies()}"/>
<ui:repeat value="#{listRetriever.list}" var="person">
#{person}<br/>
</ui:repeat>
</p:tab>
<p:tab title="People following me" >
<f:event type="preRenderComponent" listener="#{listRetriever.retrieveFollowers()}"/>
<ui:repeat value="#{listRetriever.list}" var="person">
#{person}<br/>
</ui:repeat>
</p:tab>
</p:tabView>
TabChangeEvent passes you the selected tab instance, live sample;
http://www.primefaces.org/showcase-labs/ui/tabviewChangeListener.jsf

Make tabs appear vertically on the side when using PrimeFaces TabView

I'm using the PrimeFaces TabView and would like to know if there is a way to make the tabs appear vertically on the side (left or right, preferably left) instead of horizontally across the top.
If anyone knows of any other way to achieve the desired effect using PrimeFaces or plain JSF, I'll take that too.
Yes its possible. You can use the orientation attribute
PrimeFaces TabView is implemented using jQuery UI Tabs. Have a look at this question Vertical Tabs with jQuery. You could try to over ride the PrimeFaces tab CSS with the answer provided in that question to give you vertical tabs.
This code shows how to manage tabs in TOP-DOWN order (vertically):
<p:tabView orientation="left">
<p:tab title="Tab#1">
Tab#1
</p:tab>
<p:tab title="Tab#2">
Tab#2
</p:tab>
<p:tab title="Tab#3">
Tab#3
</p:tab>
<p:tab title="Tab#4">
Tab#4
</p:tab>
</p:tabView>
And, this code shows how to manage tabs in LEFT-RIGHT or vise-versa order (horizontally):
<p:tabView scrollable="true">
<p:tab title="Tab#1">
Tab#1
</p:tab>
<p:tab title="Tab#2">
Tab#2
</p:tab>
<p:tab title="Tab#3">
Tab#3
</p:tab>
<p:tab title="Tab#4">
Tab#4
</p:tab>
<p:tab title="Tab#5">
Tab#5
</p:tab>
<p:tab title="Tab#6">
Tab#6
</p:tab>
<p:tab title="Tab#7">
Tab#7
</p:tab>
<p:tab title="Tab#8">
Tab#8
</p:tab>
</p:tabView>
I do not believe it is possible according to the documentation, however perhaps you can utilize the Menu component to your advantage?
http://www.primefaces.org/showcase/ui/menu.jsf
I have used the Menu within a Master page to load content into the master page body. Clicking on a specific menu will load the appropriate child page.

Resources