I am using the tabs where active index is selected by passing request parameter to the page :
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<p:tabMenu activeIndex="${param.i}" style="text-decoration: none">
<p:menuitem value="Home" outcome="/home.xhtml">
<f:param name="i" value="0"/>
</p:menuitem>
<p:menuitem value="Sign" outcome="/web/sign/SelectServer.xhtml">
<f:param name="i" value="1"/>
</p:menuitem>
<p:menuitem value="Certificate Management" outcome="/web/sign/FileUpload.xhtml">
<f:param name="i" value="2" />
</p:menuitem>
<p:menuitem value="Support" outcome="/web/sign/FileUpload.xhtml">
<f:param name="i" value="3" />
</p:menuitem>
<p:menuitem value="Admin" outcome="/web/sign/FileUpload.xhtml">
<f:param name="i" value="4" />
</p:menuitem>
</p:tabMenu>
</ui:composition>
The problem is that it shows in the URL like :
/CodesignWebApp/faces/web/sign/SelectServer.xhtml?i=1
which doesn't look good. Is there a way to pass this param as hidden. I dont see a option to do that in f:param. Or Do I have to use managed-bean to achieve that?
Related
Both pages contains the header:
<p:tabMenu activeIndex="#{param.i}">
<p:menuitem value="Overview" outcome="index" icon="ui-icon-star">
<f:param name="i" value="0" />
</p:menuitem>
<p:menuitem value="Demos" outcome="second" icon="ui-icon-search">
<f:param name="i" value="1" />
</p:menuitem>
</p:tabMenu>
The second page contains a form:
<h:form>
<h:inputText id="name" value="#{name}" a:placeholder="What's your name?" />
<h:commandButton value="Submit" outcome="second" />
<br/> <h:outputText value="Hello, #{name}" rendered="#{not empty name}" />
</h:form>
The problem is that activeIndex becomes 0 after the form submited. How to fix it?
it fixed by adding a <f:param name="i" value="1" /> to commnadButton
I personally use a #ViewAccessedScope for menu backingveans from DeltaSpike for this instead of passing params around.
I try to build a primefaces TabMenu for a Web-Page.
It is displayed an it will direct my to the Page I want, but it won't set the activeIndex and so it still looks like I'm still on my main-page.
Heres the JSF-View (It's a component, which is inserted into the page):
<ui:component>
<div id="navigation">
<h:form id="navForm">
<p:tabMenu activeIndex="#{projectCockpit.pageId}">
<p:menuitem value="Home" url="/mainPage.xhtml"
actionListener="#{projectCockpit.setPageId(0)}">
</p:menuitem>
<p:menuitem value="Projekte" url="/projects.xhtml">
<f:setPropertyActionListener value="1"
target="#{projectCockpit.pageId}" />
</p:menuitem>
</p:tabMenu>
</h:form>
</div>
</ui:component>
And here is my Bean:
#ManagedBean(name = "projectCockpit")
#SessionScoped
public class projectCockpitBean implements Serializable{
/**
*
*/
private static final long serialVersionUID = 8049539654282700741L;
private int pageId;
#PostConstruct
protected void init(){
pageId = 0;
}
public int getPageId() {
return pageId;
}
public void setPageId(int pageId) {
this.pageId = pageId;
}
}
For redirect page with tabMenu, you must use the same code in two page like this.
mainPage.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template.xhtml">
<ui:define name="content">
<p:tabMenu activeIndex="#{param.i}">
<p:menuitem value="Overview" outcome="/mainPage.xhtml" icon="ui-icon-star">
<f:param name="i" value="0" />
</p:menuitem>
<p:menuitem value="Demos" outcome="/projects.xhtml" icon="ui-icon-search">
<f:param name="i" value="1" />
</p:menuitem>
</p:tabMenu>
//place your mainPage code here
<p:outputLabel value="mainPage code"/>
</ui:define>
</ui:composition>
projects.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template.xhtml">
<ui:define name="content">
<p:tabMenu activeIndex="#{param.i}">
<p:menuitem value="Overview" outcome="/mainPage.xhtml" icon="ui-icon-star">
<f:param name="i" value="0" />
</p:menuitem>
<p:menuitem value="Demos" outcome="/projects.xhtml" icon="ui-icon-search">
<f:param name="i" value="1" />
</p:menuitem>
</p:tabMenu>
//place your projects code here
<p:outputLabel value="projects code"/>
</ui:define>
</ui:composition>
I am aware that nesting is a problem with form tags. However, my page does not have nested forms. I have one form (id="menuForm") to enclose the p:menu. Next, I have a form (id="locationForm") lower in the page. I have checked the html source that is output, and there is no nesting happening.
I have one p:commandButton that I want to use to submit the form. It works occasionally, but not all of the time. Sometimes, the method fires and other times it doesn't. Can anyone poing out what I'm doing wrong?
Also--If I comment out the menu form completely it works as intended.
Thanks.
Action Method:
public String insertLocationAction(){
System.out.println("******* Method Fired.");
DatabaseManager.insertLocation(newLocation);
return "locations";
}
XHTML Page:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<f:view>
<ui:debug rendered="#{facesContext.application.projectStage eq 'Development'}"/>
<h:head />
<p:messages />
<p:layout fullPage="true">
<p:layoutUnit position="west" size="260" header="Menu" resizable="false" closable="false">
<h:form id="menuForm">
<p:menu style="width: 240px;" >
<p:submenu label="Locations" style="width: 240px;">
<p:menuitem value="All Locations" outcome="/pages/locations.xhtml" style="width: 240px;" />
<p:menuitem value="Create New" action="#{locationBackingBean.addLocationAction}" style="width: 240px;" />
</p:submenu>
<p:submenu label="Queries" style="width: 240px;">
<p:menuitem value="Product Group Sales" outcome="/pages/productGroupSales.xhtml" style="width: 240px;" />
<p:menuitem value="Product Line Sales" outcome="/pages/productLineSales.xhtml" style="width: 240px;" />
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form id="locationform" enctype="multipart/form-data">
<p:growl id="growl" showDetail="true" />
<p:panelGrid columns="2">
<f:facet name="header">Enter New Location Details</f:facet>
<h:outputLabel for="locationName" value="Location Name:" /> <p:inputText id="locationName" value="#{locationBackingBean.newLocation.locationName}" size="100" />
<h:outputLabel for="street1" value="Street Address1:" /> <p:inputText id="street1" value="#{locationBackingBean.newLocation.street1}" size="100"/>
<h:outputLabel for="street2" value="Street Address2:" /><p:inputText id="street2" value="#{locationBackingBean.newLocation.street2}" size="100"/>
<h:outputLabel for="city" value="City:" /><p:inputText id="city" value="#{locationBackingBean.newLocation.city}" size="40" />
<h:outputLabel for="state" value="State:" /><p:inputText id="state" value="#{locationBackingBean.newLocation.state}" size="2" />
<h:outputLabel for="country" value="Country:" /><p:inputText id="country" value="#{locationBackingBean.newLocation.country}" size="20" />
<h:outputLabel for="phone" value="Phone:" /><p:inputText id="phone" value="#{locationBackingBean.newLocation.phone}" size="15" />
<h:outputLabel for="locationType" value="Type:" /><p:inputText id="locationType" value="#{locationBackingBean.newLocation.locationType}" />
</p:panelGrid>
<p:commandButton action="#{locationBackingBean.insertLocationAction}" ajax="false" value="Save" />
</h:form>
</p:layoutUnit>
</p:layout>
</f:view>
</html>
Refer to: http://www.primefaces.org/docs/vdl/4.0/primefaces-p/commandButton.html
By default the p:commandButton processes the whole 'view'.
Add process=":locationform" to the commandButton might just need "locationform" (depends on your selector working and nested jsf components etc..
Hi guys I want to link from my Menubar to certain Tab, but always the first tab is activated I tried lot of solutions from StackOverflow but nothing works. I think the problems is that i use a preRenderView. I hope someone can help me :)
I use jsf 2.1 and primefaces 3.5
The code for the menubar
<p:menubar >
<p:submenu label="Taskbox" >
<p:menuitem value="Inbox" url="taskbox.xhtml" />
<p:menuitem value="Sent" url="taskbox.xhtml#sentTab"/>
<p:menuitem value="Trash" url="taskbox.xhtml" onclick="tabPanel.select(3)"/>
<p:menuitem value="New Message" url="#"/>
</p:submenu>
</p:menubar>
Der code for the tabs
<ui:composition template="/META-INF/templates/templateContentSplit.xhtml">
<ui:define name="metadata">
<f:metadata>
<f:event type="preRenderView" listener="#{taskboxBean.initPage}" />
</f:metadata>
</ui:define>
<ui:define name="metadata">
<f:metadata>
<f:event type="preRenderView" listener="#{taskboxBean.initPage}" />
</f:metadata>
</ui:define>
<ui:define name="title">
<h:outputText value="Taskbox" />
</ui:define>
<ui:define name="contentLeft">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel">
<p:tab title="Inbox" id="inboxTab">
<ui:include src="/user/inboxTaskbox.xhtml" />
</p:tab>
<p:tab title="Sent" id="sentTab">
<ui:include src="/user/sentTaskbox.xhtml" />
</p:tab>
<p:tab title="Trash" id="trashTab">
<ui:include src="/user/trashTaskbox.xhtml" />
</p:tab>
</p:tabView>
</h:form>
</ui:define>
<ui:define name="contentRight">
<h:form id="contentForm">
<ui:include src="/user/detailTaskbox.xhtml" />
</h:form>
</ui:define>
</ui:composition>
For your <p:menuitem /> use an outcome attribute, which specifies the navigation case, instead of url, that's intended to be used with an absolute and not JSF related url. Here you've got a basic explanation case, based in #Daniel Camargo's suggested code:
tabs.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
<f:metadata>
<f:viewParam name="index" value="#{index}" />
<f:event type="preRenderView" listener="#{bean.initPage}" />
</f:metadata>
<h:form>
<p:menubar>
<p:submenu label="Taskbox">
<!-- Different ways of passing the view param -->
<p:menuitem value="Inbox" outcome="tabs?index=0" />
<p:menuitem value="Sent" outcome="tabs.xhtml?index=1" />
<p:menuitem value="Trash" outcome="tabs">
<f:param name="index" value="2" />
</p:menuitem>
<!-- External url -->
<p:menuitem value="Google" url="http://www.google.com"
target="_blank" />
</p:submenu>
</p:menubar>
</h:form>
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel"
activeIndex="#{index}">
<p:tab title="Inbox" id="inboxTab">
A
</p:tab>
<p:tab title="Sent" id="sentTab">
B
</p:tab>
<p:tab title="Trash" id="trashTab">
C
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
Note the outcome attribute here let's the JSF servlet evaluate the destination url. Basically, an outcome with value of tabs will get rendered as basePath/tabs.xhtml at client side. So basically you are making the page be directed to itself, but changing the viewParam value.
See also:
When should I use h:outputLink instead of h:commandLink?
Remember that this is a zero based index. You tabPanel.select(3) will try to activate the 4th tab which doesn't exist. Try doing this:
The menu:
<h:form>
<p:menubar >
<p:submenu label="Taskbox" >
<p:menuitem value="Trash" url="taskbox.xhtml?index=2"/>
</p:submenu>
</p:menubar>
</h:form>
The Taskbox page:
<f:metadata>
<f:viewParam name="index" value="#{viewMBean.index}" />
</f:metadata>
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel" activeIndex="#{viewMBean.index}">
<p:tab title="Inbox" id="inboxTab">
A
</p:tab>
<p:tab title="Sent" id="sentTab">
B
</p:tab>
<p:tab title="Trash" id="trashTab">
C
</p:tab>
</p:tabView>
</h:form>
I'm attempting to use a t:radio in my rich:datatable but it's always complaining about the fact that it can't find the component. I did some googling and I have to declare the full name, but I actually think I'm doing that.
Anyone can point me what I'm doing wrong? The code (I'm not going to give a minified version because I'm guessing it's going wrong with the compositions):
letterDetailTemplate.xhtml:
<h:form id="generateLetterForm">
<ui:include src="addStandardLetterMain.xhtml" />
<ui:include src="addStandardLetterText.xhtml" />
<ui:include src="buttons.xhtml" />
</h:form>
addStandardLetterText.xhtml (the radio button is over here, in the slrDataTable):
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:e="http://minfin.regondes2/entity"
xmlns:ccffdecorate="http://java.sun.com/jsf/composite/ccffdecorate"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:l="http://minfin.regondes2/layout"
xmlns:o="http://omnifaces.org/ui"
xmlns:t="http://myfaces.apache.org/tomahawk">
<ui:param name="entityBB" value="#{letterBB}" />
<ui:param name="type" value="Dossier.Letter" />
<l:screenzone id="addStandardLetterTextPanel"
title="#{AppMessages[type.concat('.addStandardLetterText.title')]}">
<h:outputStylesheet name="letterText.css" library="stylesheets" />
<h:outputScript name="letter.js" library="scripts" />
<a4j:region>
<a4j:outputPanel id="letterTextPanel">
<h:inputTextarea id="letterText" name="letterText"
value="#{entityBB.entity.text}" styleClass="letterText" />
<script type="text/javascript">
language: '#{screen.locale.language}'
CKEDITOR.replace( 'generateLetterForm:letterTex', {
});
</script>
</a4j:outputPanel>
<h:panelGroup styleClass="rButtonPanelAlignLeft" layout="block"
rendered="#{dossierContextBB.dossierContext == 'EDIT'}">
<a4j:commandButton
value="#{AppMessages[type.concat('.add.region')]}"
actionListener="#{entityBB.findAvailableRegionStandardLetters()}"
render="slrPopupFormPanel" limitRender="true" status="ajaxStatus"
onclick="LETTER.CKUpdate()"
oncomplete="#{rich:component('addStandardLetterRegion')}.show();" />
</h:panelGroup>
</a4j:region>
<rich:popupPanel id="addStandardLetterRegion" modal="true"
onmaskclick="#{rich:component('addStandardLetterRegion')}.hide()"
autosized="true">
<f:facet name="header">
<h:outputText
value="#{AppMessages['Dossier.Letter.StandardLetter.region.popup.title']}" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('addStandardLetterCentrum')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<a4j:outputPanel id="slrPopupFormPanel">
<t:selectOneRadio id="slrOption"
value="#{standardLetterBB.selected}" layout="spread"
converter="#{standardLetterBB.converter}">
<f:selectItems value="#{entityBB.availableStandardLetterText}"
var="standardLetter" itemLabel="" itemValue="#{standardLetter}" />
</t:selectOneRadio>
<rich:dataTable id="slrDataTable"
value="#{entityBB.availableStandardLetterText}"
var="standardLetter" noDataLabel="No standard letters found"
rowKeyVar="index">
<rich:column headerClass="ListTitle">
<t:radio for="generateLetterForm:slrDataTable:slrOption" index="#{index}" />
</rich:column>
<e:column entity="#{standardLetter.dossierType}" type="#{type}"
property="type" />
<e:column entity="#{standardLetter}" type="#{type}"
property="numbering" />
<e:columnTranslatable entity="#{standardLetter}" type="#{type}"
property="text" />
</rich:dataTable>
</a4j:outputPanel>
<div class="rButtonPanel">
<h:commandButton value="#{AppMessages['general.action.add']}">
<a4j:ajax event="click" execute="generateLetterForm"
listener="#{entityBB.addMotivationToReport}"
oncomplete="#{rich:component('addStandardLetterRegion')}.hide()"
render="reportMotivationTextPanel" limitRender="true" />
</h:commandButton>
<a4j:commandButton value="#{AppMessages['general.action.cancel']}"
onclick="#{rich:component('addStandardLetterRegion')}.hide()"
limitRender="true" immediate="true" bypassUpdates="true" />
</div>
</rich:popupPanel>
</l:screenzone>
Note that this view works and renders and displays the data from the backingbean when I remove the t:radio.
The errormessage I'm getting is:
SEVERE: java.lang.IllegalStateException: Could not find component 'generateLetterForm:slrDataTable:slrOption' (calling findComponent on component 'generateLetterForm:slrDataTable:0:j_idt258')
javax.faces.FacesException: java.lang.IllegalStateException: Could not find component 'generateLetterForm:slrDataTable:slrOption' (calling findComponent on component 'generateLetterForm:slrDataTable:0:j_idt258')
Change for="generateLetterForm:slrDataTable:slrOption" to for=":generateLetterForm:slrOption" and specify id for your t:radio in datatable also. Don't forget the ":" before generateLetterForm.